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