images in partners
[emels.git] / emels / static / css / main.scss
1 @import "vars";
2
3 $horiz_padding: 10*$px;
4 $width_offset: 20*$px;
5
6 @mixin main-promobox-shape() {
7   background: #16a487;
8   padding: 1em $horiz_padding;
9   border-radius: 15*$px;
10 }
11
12 #main-promobox {
13   float: right;
14
15   width: 220*$px - $width_offset;
16   height: 235*$px - 2 * 1.5em;
17
18   a {
19     @include main-promobox-shape();
20
21     display: block;
22     margin-bottom: 1em;
23     width: 220*$px - $width_offset - 2*$horiz_padding;
24     float: left;
25
26     &:last-of-type {
27       margin-bottom: 0;
28     }
29   }
30   h1 {
31     @include main-promobox-shape();
32
33     color: white;
34     margin: 0;
35     text-transform: uppercase;
36     font-size: .9em;
37     width: 222*$px - 2 * $horiz_padding;
38     float: left;
39     padding-top: 1.25em;
40     padding-bottom: 1.25em;
41     border-bottom-right-radius: 0;
42     border-bottom-left-radius: 0;
43   }
44   h1:before {
45     content: url(/static/img/icons/announce_white.png);
46     margin-right: 1.2em;
47     vertical-align: top;
48   }
49   h2 {
50     color: white;
51     font-size: .9em;
52     /*margin: 1.1em 0 0 0;*/
53     margin: 0;
54     font-weight: normal;
55     text-transform: uppercase;
56   }
57   p {
58     color: #363a3e;
59     font-size: .8em;
60     line-height: 1.15em;
61     margin: .3em 0;
62   }
63 }
64
65 #main-sections {
66   clear: both;
67   float: left;
68   margin-top: 1.2em;
69   width: 700*$px;
70
71   h1 {
72     font-size: .9em;
73     margin: 0 0 0 20*$px;
74     text-transform: uppercase;
75   }
76
77   ul {
78     margin: -3*$px 0 0 -20*$px;
79     padding: 0;
80     list-style: none;
81
82     li {
83       margin-top: 20*$px;
84       margin-left: 20*$px;
85       float: left;
86       height: 90*$px;
87       border-radius: 15*$px;
88
89       a {
90         color: white;
91         text-transform: uppercase;
92         height: 80*$px;
93         display: table;
94         padding: 5px;
95
96         .in-box {
97           font-size: .9em;
98           height: 100%;
99           width: 100%;
100           display: table-cell;
101           vertical-align: middle;
102           border: 1px solid transparent;
103           border-radius: 10*$px;
104           padding: 0 16*$px;
105
106           .name {
107             display: block;
108             font-size: 1.5em;
109             line-height: 1em;
110             margin-bottom: .2em;
111           }
112         }
113       }
114       a:hover .in-box {
115         border: 1px solid white;
116       }
117     }
118     .box1 {
119       background-color: #adaeaf;
120     }
121     .box2 {
122       background-color: #f8b323;
123     }
124     .box3 {
125       background-color: #16a487;
126     }
127     .box4 {
128       background-color: #5e6165;
129     }
130     // .box5 {background-color: #16a487;}
131     .box5 {
132       background-color: #f8b323;
133     }
134     .box6 {
135       background-color: #363a3e;
136     }
137     .box7 {
138       background-color: #adaeaf;
139     }
140     .box8 {
141       background-color: #ed7831;
142     }
143   }
144 }
145
146 #main-howto {
147   float: right;
148   margin-top: 1.2em;
149   width: 220*$px;
150
151   h1 {
152     font-size: .9em;
153     margin: 0 0 0 1.4em;
154     text-transform: uppercase;
155   }
156
157   ul {
158     margin: 17*$px 0 17*$px 1.4em;
159
160     li {
161       font-size: .9em;
162       text-transform: uppercase;
163       line-height: 1.25em;
164     }
165     a:before {
166       height: 20*$px;
167     }
168
169     .knowledge:before {
170       content: url(/static/img/icons/knowledge_dark.png);
171     }
172     .activity:before {
173       content: url(/static/img/icons/activity_dark.png);
174     }
175     .lesson-plan:before {
176       content: url(/static/img/icons/lesson-plan_dark.png);
177     }
178     .reference:before {
179       content: url(/static/img/icons/reference_dark.png);
180     }
181     .knowledge:hover:before {
182       content: url(/static/img/icons/knowledge_orange.png);
183     }
184     .activity:hover:before {
185       content: url(/static/img/icons/activity_orange.png);
186     }
187     .lesson-plan:hover:before {
188       content: url(/static/img/icons/lesson-plan_orange.png);
189     }
190     .reference:hover:before {
191       content: url(/static/img/icons/reference_orange.png);
192     }
193
194   }
195   p {
196     margin: 0 0 30*$px 1.4em;
197   }
198   .side-banner img {
199     display: block;
200     width: 100%;
201     margin-bottom: 0.2em;
202   }
203 }
204
205 #main-chosen {
206   clear: left;
207   float: left;
208   margin-top: 2em;
209
210   h1 {
211     font-size: .9em;
212     margin: 0 0 1em 20*$px;
213     text-transform: uppercase;
214   }
215
216   .levelth {
217     margin-left: 20*$px;
218   }
219 }
220
221 #main-tools {
222   clear: both;
223   .main-tools-box {
224     float: left;
225     margin-top: 1.5em;
226     margin-right: 20*$px;
227     width: 280*$px;
228
229     h1 {
230       margin: 0;
231       font-size: .9em;
232       text-transform: uppercase;
233     }
234
235     ul, ol {
236       margin: 1.1em 0 0 0;
237       font-size: .9em;
238       line-height: 1.15em;
239     }
240   }
241 }