remove edumed clutter
[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-column {
171         float: left;
172         margin-left: 20 * $px;
173         width: 100 * $px;
174         p {
175             font-size: .75em;
176         }
177     }
178     .footer-extra p {
179         margin-top: 0;
180     }
181 }
182
183
184 #search {
185     font-size: .8em;
186
187     input, button {
188         font-family: Dosis;
189         font-size: .9em;
190         vertical-align:bottom;
191         border: 1px solid #c9ccce;
192         padding: 0;
193         margin: 0;
194         line-height: .9em;
195     }
196     input {
197         border-right-width: 0;
198         height: 16px;
199         width: 16em;
200         padding-left: 1.3em;
201     }
202     button {
203         height: 18px;
204         width: 1.8em;
205         span {
206             position:relative;
207             top: -1px;
208         }
209     }
210
211     input::-webkit-input-placeholder {
212         text-transform: uppercase;
213     }
214     input:-moz-placeholder {
215         text-transform: uppercase;
216     }
217     input::-moz-placeholder {
218         text-transform: uppercase;
219     }
220     input::-ms-placeholder {
221         text-transform: uppercase;
222     }
223
224 }
225
226
227 .link-list {
228     list-style: none;
229     padding: 0;
230
231     li {
232         margin-bottom: .5em;
233     }
234
235     a:before {
236         content: "→";
237         margin-right: .5em;
238     }
239     a {
240         color: $ciemny;
241     }
242     a:hover {
243         color: $oranji;
244     }
245 }
246 .link-list-colored {
247     a {
248         color: $oranji;
249     }
250 }
251
252
253 .plain {
254     margin: 0;
255     padding: 0;
256     list-style: none;
257     li {
258         margin: 1em 0;
259     }
260 }
261
262 .flatpage {
263     img {
264         border: 5*$px solid #eee;
265         margin: 1.3em;
266     }
267 }
268
269 ul.messages {
270     list-style: none;
271 }
272
273 .messages .error {
274     top: 20px;
275     left: 20px;
276     border: 1px solid black;
277     background: red;
278     border-radius: 0.938em;
279     padding: 5px 2px;
280     color: white;
281     text-align: center;
282     font-weight: bold;
283 }