b68b892769472930053dc74bcf691e9636e2183e
[edumed.git] / edumed / static / css / base.scss
1 @import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
2
3 @import "vars";
4 @import "mixins";
5
6
7 a {
8     text-decoration: none;
9     color: $oranji;
10     img {
11         border: 0;
12         padding: 0;
13     }
14 }
15
16 body {
17     @include base-font;
18     margin: 0;
19 }
20 .clr {
21     clear: both;
22 }
23
24 #banners {
25     display: inline-block;
26     margin: 0 auto 1.4375em;
27     width: 58.75em;
28
29     > a {
30         display: block;
31         width: 100%;
32     }
33
34     img {
35         display: block;
36         margin: 0 auto;
37         width: 100%;
38     }
39 }
40 #header-wrapper {
41     background-image: url(../img/header-bar.png);
42     background-repeat: repeat-x;
43     background-position: 0 100%;
44 }
45 header.main {
46     margin: 0 auto 23*$px;
47     width: 940*$px;
48     padding: 29*$px 10*$px 0;
49
50     #header-top {
51     }
52
53     #logo {
54         float: left;
55         margin-bottom: 20*$px;
56         img {
57             vertical-align: middle;
58         }
59     }
60     #organizer {
61         float: right;
62         font-size: .75em;
63         color: #777;
64         
65         img {
66             margin-top: .5em;
67         }
68     }
69
70
71
72     nav {
73         ul {
74             padding: 0;
75             position: absolute;
76             left: 15em;
77         }
78         li {
79             list-style: none;
80             display: inline-block;
81             text-transform: uppercase;
82             margin: 0 .5em;
83             text-align: center;
84             /*position:relative;*/
85         }
86         a {
87             color: $ciemny;
88             display: block;
89             vertical-align: bottom;
90             font-size: .85em;
91         }
92         a:hover {
93             color: $oranji;
94         }
95
96         a:before {
97             content: " ";
98             display: block;
99             margin-bottom: .8em;
100             width: 44*$px;
101             height: 34*$px;
102             text-align:center;
103             margin: auto;
104             margin-bottom: .8em;
105         }
106         .menu-lekcje:before { background: url(../img/menu/lekcje.png) no-repeat 0 0; background-size: 100%;}
107         .menu-kompetencje:before { background: url(../img/menu/katalog.png) no-repeat 0 0; background-size: 100%;}
108         .menu-wspolpraca:before { background: url(../img/menu/wspolpraca.png) no-repeat 0 0; background-size: 100%;}
109         .menu-szkolenia:before { background: url(../img/menu/szkolenia.png) no-repeat 0 0; background-size: 100%;}
110         .menu-wesprzyj:before { background: url(../img/menu/wesprzyj.png) no-repeat 0 0; background-size: 100%;}
111         .menu-o-nas:before { background: url(../img/menu/o-nas.png) no-repeat 0 0; background-size: 100%;}
112         .menu-kontakt:before { background: url(../img/menu/kontakt.png) no-repeat 0 0; background-size: 100%;}
113         .menu-lekcje:hover:before { background: url(../img/menu/lekcje_active.png) no-repeat 0 0; background-size: 100%;}
114         .menu-kompetencje:hover:before { background: url(../img/menu/katalog_active.png) no-repeat 0 0; background-size: 100%;}
115         .menu-wspolpraca:hover:before { background: url(../img/menu/wspolpraca_active.png) no-repeat 0 0; background-size: 100%;}
116         .menu-szkolenia:hover:before { background: url(../img/menu/szkolenia_active.png) no-repeat 0 0; background-size: 100%;}
117         .menu-wesprzyj:hover:before { background: url(../img/menu/wesprzyj_active.png) no-repeat 0 0; background-size: 100%;}
118         .menu-o-nas:hover:before { background: url(../img/menu/o-nas_active.png) no-repeat 0 0; background-size: 100%;}
119         .menu-kontakt:hover:before { background: url(../img/menu/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
120
121     }
122
123     #tagline {
124         clear: both;
125         float: left;
126         background-color: white;
127         /* Extend padded background .*/
128         padding: 0 10*$px;
129         margin-left: -10*$px;
130         font-size: .9em;
131         color: $ciemny;
132     }
133     #search {
134         float: right;
135         background-color: white;
136         /* Extend padded background .*/
137         padding: 2px 10*$px 0;
138         margin-right: -10*$px;
139     }
140 }
141
142
143 #content {
144     width: 940 * $px;
145     padding: 0 10 * $px;
146     margin: auto;
147     position: relative;
148 }
149
150
151 footer.main {
152     clear: both;
153     border-top: 1px solid #c9ccce;
154     width: 940 * $px;
155     padding: .2em 10 * $px;
156     margin: 40*$px auto 1em auto;
157     color: #9a9c9e;
158
159     p {
160         font-size: .75em;
161     }
162     .footer-item {
163         float: left;
164         margin-right: 20 * $px;
165         width: 220 * $px;
166     }
167     .sponsors-column {
168         float: left;
169         margin-left: 20 * $px;
170         width: 100 * $px;
171         p {
172             font-size: .75em;
173         }
174     }
175     .footer-extra p {
176         margin-top: 0;
177     }
178 }
179
180
181 #search {
182     font-size: .8em;
183
184     input, button {
185         font-family: Dosis;
186         font-size: .9em;
187         vertical-align:bottom;
188         border: 1px solid #c9ccce;
189         padding: 0;
190         margin: 0;
191         line-height: .9em;
192     }
193     input {
194         border-right-width: 0;
195         height: 16px;
196         width: 16em;
197         padding-left: 1.3em;
198     }
199     button {
200         height: 18px;
201         width: 1.8em;
202         span {
203             position:relative;
204             top: -1px;
205         }
206     }
207
208     input::-webkit-input-placeholder {
209         text-transform: uppercase;
210     }
211     input:-moz-placeholder {
212         text-transform: uppercase;
213     }
214     input::-moz-placeholder {
215         text-transform: uppercase;
216     }
217     input::-ms-placeholder {
218         text-transform: uppercase;
219     }
220
221 }
222
223
224 .link-list {
225     list-style: none;
226     padding: 0;
227
228     li {
229         margin-bottom: .5em;
230     }
231
232     a:before {
233         content: "→";
234         margin-right: .5em;
235     }
236     a {
237         color: $ciemny;
238     }
239     a:hover {
240         color: $oranji;
241     }
242 }
243 .link-list-colored {
244     a {
245         color: $oranji;
246     }
247 }
248
249
250 .plain {
251     margin: 0;
252     padding: 0;
253     list-style: none;
254     li {
255         margin: 1em 0;
256     }
257 }
258
259 .flatpage {
260     img {
261         border: 5*$px solid #eee;
262         margin: 1.3em;
263     }
264 }