wider sponsors
[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
106         .menu-oc-program:before { background: url(../img/menu/olimpiada/program.png) no-repeat 0 0; background-size: 100%;}
107         .menu-oc-harmonogram:before { background: url(../img/menu/olimpiada/harmonogram.png) no-repeat 0 0; background-size: 100%;}
108         .menu-oc-regulamin:before { background: url(../img/menu/olimpiada/regulamin.png) no-repeat 0 0; background-size: 100%;}
109         .menu-oc-literatura:before { background: url(../img/menu/olimpiada/literatura.png) no-repeat 0 0; background-size: 100%;}
110         .menu-oc-komitet:before { background: url(../img/menu/olimpiada/komitet.png) no-repeat 0 0; background-size: 100%;}
111         .menu-oc-kontakt:before { background: url(../img/menu/olimpiada/kontakt.png) no-repeat 0 0; background-size: 100%;}
112         .menu-oc-program:hover:before {
113             background: url(../img/menu/olimpiada/program_active.png) no-repeat 0 0; background-size: 100%;}
114         .menu-oc-harmonogram:hover:before {
115             background: url(../img/menu/olimpiada/harmonogram_active.png) no-repeat 0 0; background-size: 100%;}
116         .menu-oc-regulamin:hover:before {
117             background: url(../img/menu/olimpiada/regulamin_active.png) no-repeat 0 0; background-size: 100%;}
118         .menu-oc-literatura:hover:before {
119             background: url(../img/menu/olimpiada/literatura_active.png) no-repeat 0 0; background-size: 100%;}
120         .menu-oc-komitet:hover:before {
121             background: url(../img/menu/olimpiada/komitet_active.png) no-repeat 0 0; background-size: 100%;}
122         .menu-oc-kontakt:hover:before {
123             background: url(../img/menu/olimpiada/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
124     }
125
126     #tagline {
127         clear: both;
128         float: left;
129         background-color: white;
130         /* Extend padded background .*/
131         padding: 0 10*$px;
132         margin-left: -10*$px;
133         font-size: .9em;
134         color: $ciemny;
135     }
136     #search {
137         float: right;
138         background-color: white;
139         /* Extend padded background .*/
140         padding: 2px 10*$px 0;
141         margin-right: -10*$px;
142     }
143 }
144
145
146 #content {
147     width: 940 * $px;
148     padding: 0 10 * $px;
149     margin: auto;
150     position: relative;
151 }
152
153
154 footer.main {
155     clear: both;
156     border-top: 1px solid #c9ccce;
157     width: 940 * $px;
158     padding: .2em 10 * $px;
159     margin: 40*$px auto 1em auto;
160     color: #9a9c9e;
161
162     p {
163         font-size: .75em;
164     }
165     .footer-item {
166         float: left;
167         margin-right: 20 * $px;
168         width: 220 * $px;
169     }
170     .sponsors-page {
171         margin-bottom: 20 * $px;
172     }
173     .sponsors-column {
174         float: left;
175         margin-left: 20 * $px;
176         width: 147 * $px;
177         p {
178             font-size: .75em;
179         }
180     }
181     .sponsors-column:first-child {
182         margin-left: 0;
183     }
184     .sponsors-column:nth-last-child(2) {
185         width: 100 * $px;
186     }
187     .footer-extra p {
188         margin-top: 0;
189     }
190 }
191
192
193 #search {
194     font-size: .8em;
195
196     input, button {
197         font-family: Dosis;
198         font-size: .9em;
199         vertical-align:bottom;
200         border: 1px solid #c9ccce;
201         padding: 0;
202         margin: 0;
203         line-height: .9em;
204     }
205     input {
206         border-right-width: 0;
207         height: 16px;
208         width: 16em;
209         padding-left: 1.3em;
210     }
211     button {
212         height: 18px;
213         width: 1.8em;
214         span {
215             position:relative;
216             top: -1px;
217         }
218     }
219
220     input::-webkit-input-placeholder {
221         text-transform: uppercase;
222     }
223     input:-moz-placeholder {
224         text-transform: uppercase;
225     }
226     input::-moz-placeholder {
227         text-transform: uppercase;
228     }
229     input::-ms-placeholder {
230         text-transform: uppercase;
231     }
232
233 }
234
235
236 .link-list {
237     list-style: none;
238     padding: 0;
239
240     li {
241         margin-bottom: .5em;
242     }
243
244     a:before {
245         content: "→";
246         margin-right: .5em;
247     }
248     a {
249         color: $ciemny;
250     }
251     a:hover {
252         color: $oranji;
253     }
254 }
255 .link-list-colored {
256     a {
257         color: $oranji;
258     }
259 }
260
261
262 .plain {
263     margin: 0;
264     padding: 0;
265     list-style: none;
266     li {
267         margin: 1em 0;
268     }
269 }
270
271 .flatpage {
272     img {
273         border: 5*$px solid #eee;
274         margin: 1.3em;
275     }
276 }
277
278 ul.messages {
279     list-style: none;
280 }
281
282 .messages .error {
283     top: 20px;
284     left: 20px;
285     border: 1px solid black;
286     background: red;
287     border-radius: 0.938em;
288     padding: 5px 2px;
289     color: white;
290     text-align: center;
291     font-weight: bold;
292 }