b422a2d81330f12ec0219a0ac3a3db199397a4d6
[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     }
121
122     #tagline {
123         clear: both;
124         float: left;
125         background-color: white;
126         /* Extend padded background .*/
127         padding: 0 10*$px;
128         margin-left: -10*$px;
129         font-size: .9em;
130         color: $ciemny;
131     }
132     #search {
133         float: right;
134         background-color: white;
135         /* Extend padded background .*/
136         padding: 2px 10*$px 0;
137         margin-right: -10*$px;
138     }
139 }
140
141
142 #content {
143     width: 940 * $px;
144     padding: 0 10 * $px;
145     margin: auto;
146     position: relative;
147 }
148
149
150 footer.main {
151     clear: both;
152     border-top: 1px solid #c9ccce;
153     width: 940 * $px;
154     padding: .2em 10 * $px;
155     margin: 40*$px auto 1em auto;
156     color: #9a9c9e;
157
158     p {
159         font-size: .75em;
160     }
161     .footer-item {
162         float: left;
163         margin-right: 20 * $px;
164         width: 220 * $px;
165     }
166     .sponsors-column {
167         float: left;
168         margin-left: 20 * $px;
169         width: 100 * $px;
170         p {
171             font-size: .75em;
172         }
173     }
174     .footer-extra p {
175         margin-top: 0;
176     }
177 }
178
179
180 #search {
181     font-size: .8em;
182
183     input, button {
184         font-family: Dosis;
185         font-size: .9em;
186         vertical-align:bottom;
187         border: 1px solid #c9ccce;
188         padding: 0;
189         margin: 0;
190         line-height: .9em;
191     }
192     input {
193         border-right-width: 0;
194         height: 16px;
195         width: 16em;
196         padding-left: 1.3em;
197     }
198     button {
199         height: 18px;
200         width: 1.8em;
201         span {
202             position:relative;
203             top: -1px;
204         }
205     }
206
207     input::-webkit-input-placeholder {
208         text-transform: uppercase;
209     }
210     input:-moz-placeholder {
211         text-transform: uppercase;
212     }
213     input::-moz-placeholder {
214         text-transform: uppercase;
215     }
216     input::-ms-placeholder {
217         text-transform: uppercase;
218     }
219
220 }
221
222
223 .link-list {
224     list-style: none;
225     padding: 0;
226
227     li {
228         margin-bottom: .5em;
229     }
230
231     a:before {
232         content: "→";
233         margin-right: .5em;
234     }
235     a {
236         color: $ciemny;
237     }
238     a:hover {
239         color: $oranji;
240     }
241 }
242 .link-list-colored {
243     a {
244         color: $oranji;
245     }
246 }
247
248
249 .plain {
250     margin: 0;
251     padding: 0;
252     list-style: none;
253     li {
254         margin: 1em 0;
255     }
256 }
257
258 .flatpage {
259     img {
260         border: 5*$px solid #eee;
261         margin: 1.3em;
262     }
263 }