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