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