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