d40f461cf839bfbf3ec8774567a0a8bcec605f73
[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     margin: 0 auto;
26     width: 58.75em;
27
28     > a {
29         display: block;
30         width: 100%;
31     }
32
33     img {
34         display: block;
35         margin: 0 auto;
36         width: 100%;
37     }
38 }
39 #header-wrapper {
40     background-image: url(../img/header-bar.png);
41     background-repeat: repeat-x;
42     background-position: 0 100%;
43 }
44 header.main {
45     margin: 0 auto 23*$px;
46     width: 940*$px;
47     padding: 29*$px 10*$px 0;
48
49     #header-top {
50     }
51
52     #logo {
53         float: left;
54         margin-bottom: 20*$px;
55         img {
56             vertical-align: middle;
57         }
58     }
59     #organizer {
60         float: right;
61         font-size: .75em;
62         color: #777;
63         
64         img {
65             margin-top: .5em;
66         }
67     }
68
69
70
71     nav {
72         ul {
73             padding: 0;
74             position: absolute;
75             left: 15em;
76         }
77         li {
78             list-style: none;
79             display: inline-block;
80             text-transform: uppercase;
81             margin: 0 .5em;
82             text-align: center;
83             /*position:relative;*/
84         }
85         a {
86             color: $ciemny;
87             display: block;
88             vertical-align: bottom;
89             font-size: .85em;
90         }
91         a:hover {
92             color: $oranji;
93         }
94
95         a:before {
96             content: " ";
97             display: block;
98             margin-bottom: .8em;
99             width: 44*$px;
100             height: 34*$px;
101             text-align:center;
102             margin: auto;
103             margin-bottom: .8em;
104         }
105         .menu-lekcje:before { background: url(../img/menu/lekcje.png) no-repeat 0 0; background-size: 100%;}
106         .menu-kompetencje:before { background: url(../img/menu/katalog.png) no-repeat 0 0; background-size: 100%;}
107         .menu-wspolpraca:before { background: url(../img/menu/wspolpraca.png) no-repeat 0 0; background-size: 100%;}
108         .menu-szkolenia:before { background: url(../img/menu/szkolenia.png) no-repeat 0 0; background-size: 100%;}
109         .menu-wesprzyj:before { background: url(../img/menu/wesprzyj.png) no-repeat 0 0; background-size: 100%;}
110         .menu-o-nas:before { background: url(../img/menu/o-nas.png) no-repeat 0 0; background-size: 100%;}
111         .menu-kontakt:before { background: url(../img/menu/kontakt.png) no-repeat 0 0; background-size: 100%;}
112         .menu-lekcje:hover:before { background: url(../img/menu/lekcje_active.png) no-repeat 0 0; background-size: 100%;}
113         .menu-kompetencje:hover:before { background: url(../img/menu/katalog_active.png) no-repeat 0 0; background-size: 100%;}
114         .menu-wspolpraca:hover:before { background: url(../img/menu/wspolpraca_active.png) no-repeat 0 0; background-size: 100%;}
115         .menu-szkolenia:hover:before { background: url(../img/menu/szkolenia_active.png) no-repeat 0 0; background-size: 100%;}
116         .menu-wesprzyj:hover:before { background: url(../img/menu/wesprzyj_active.png) no-repeat 0 0; background-size: 100%;}
117         .menu-o-nas:hover:before { background: url(../img/menu/o-nas_active.png) no-repeat 0 0; background-size: 100%;}
118         .menu-kontakt:hover:before { background: url(../img/menu/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
119
120         .menu-oc-program:before { background: url(../img/menu/olimpiada/program.png) no-repeat 0 0; background-size: 100%;}
121         .menu-oc-harmonogram:before { background: url(../img/menu/olimpiada/harmonogram.png) no-repeat 0 0; background-size: 100%;}
122         .menu-oc-regulamin:before { background: url(../img/menu/olimpiada/regulamin.png) no-repeat 0 0; background-size: 100%;}
123         .menu-oc-literatura:before { background: url(../img/menu/olimpiada/literatura.png) no-repeat 0 0; background-size: 100%;}
124         .menu-oc-komitet:before { background: url(../img/menu/olimpiada/komitet.png) no-repeat 0 0; background-size: 100%;}
125         .menu-oc-kontakt:before { background: url(../img/menu/olimpiada/kontakt.png) no-repeat 0 0; background-size: 100%;}
126         .menu-oc-program:hover:before {
127             background: url(../img/menu/olimpiada/program_active.png) no-repeat 0 0; background-size: 100%;}
128         .menu-oc-harmonogram:hover:before {
129             background: url(../img/menu/olimpiada/harmonogram_active.png) no-repeat 0 0; background-size: 100%;}
130         .menu-oc-regulamin:hover:before {
131             background: url(../img/menu/olimpiada/regulamin_active.png) no-repeat 0 0; background-size: 100%;}
132         .menu-oc-literatura:hover:before {
133             background: url(../img/menu/olimpiada/literatura_active.png) no-repeat 0 0; background-size: 100%;}
134         .menu-oc-komitet:hover:before {
135             background: url(../img/menu/olimpiada/komitet_active.png) no-repeat 0 0; background-size: 100%;}
136         .menu-oc-kontakt:hover:before {
137             background: url(../img/menu/olimpiada/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
138     }
139
140     #tagline {
141         clear: both;
142         float: left;
143         background-color: white;
144         /* Extend padded background .*/
145         padding: 0 10*$px;
146         margin-left: -10*$px;
147         font-size: .9em;
148         color: $ciemny;
149     }
150     #search {
151         float: right;
152         background-color: white;
153         /* Extend padded background .*/
154         padding: 2px 10*$px 0;
155         margin-right: -10*$px;
156     }
157 }
158
159
160 #content {
161     width: 940 * $px;
162     padding: 0 10 * $px;
163     margin: auto;
164     position: relative;
165 }
166
167
168 footer.main {
169     clear: both;
170     border-top: 1px solid #c9ccce;
171     width: 940 * $px;
172     padding: .2em 10 * $px;
173     margin: 40*$px auto 1em auto;
174     color: #9a9c9e;
175
176     p {
177         font-size: .75em;
178     }
179     .footer-item {
180         float: left;
181         margin-right: 20 * $px;
182         width: 220 * $px;
183     }
184     .sponsors-column {
185         float: left;
186         margin-left: 20 * $px;
187         width: 100 * $px;
188         p {
189             font-size: .75em;
190         }
191     }
192     .footer-extra p {
193         margin-top: 0;
194     }
195 }
196
197
198 #search {
199     font-size: .8em;
200
201     input, button {
202         font-family: Dosis;
203         font-size: .9em;
204         vertical-align:bottom;
205         border: 1px solid #c9ccce;
206         padding: 0;
207         margin: 0;
208         line-height: .9em;
209     }
210     input {
211         border-right-width: 0;
212         height: 16px;
213         width: 16em;
214         padding-left: 1.3em;
215     }
216     button {
217         height: 18px;
218         width: 1.8em;
219         span {
220             position:relative;
221             top: -1px;
222         }
223     }
224
225     input::-webkit-input-placeholder {
226         text-transform: uppercase;
227     }
228     input:-moz-placeholder {
229         text-transform: uppercase;
230     }
231     input::-moz-placeholder {
232         text-transform: uppercase;
233     }
234     input::-ms-placeholder {
235         text-transform: uppercase;
236     }
237
238 }
239
240
241 .link-list {
242     list-style: none;
243     padding: 0;
244
245     li {
246         margin-bottom: .5em;
247     }
248
249     a:before {
250         content: "→";
251         margin-right: .5em;
252     }
253     a {
254         color: $ciemny;
255     }
256     a:hover {
257         color: $oranji;
258     }
259 }
260 .link-list-colored {
261     a {
262         color: $oranji;
263     }
264 }
265
266
267 .plain {
268     margin: 0;
269     padding: 0;
270     list-style: none;
271     li {
272         margin: 1em 0;
273     }
274 }
275
276 .flatpage {
277     img {
278         border: 5*$px solid #eee;
279         margin: 1.3em;
280     }
281 }
282
283 ul.messages {
284     list-style: none;
285 }
286
287 .messages .error {
288     top: 20px;
289     left: 20px;
290     border: 1px solid black;
291     background: red;
292     border-radius: 0.938em;
293     padding: 5px 2px;
294     color: white;
295     text-align: center;
296     font-weight: bold;
297 }