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