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