962336e588785dea6410d1f911d2628574091381
[edumed.git] / edumed / static / css / main.scss
1 $px: .0625em;
2
3 #main-promobox {
4     float: right;
5
6     border-radius: 15*$px;
7
8     background: #16a487;
9     padding: 1.5em 20*$px;
10     width: 220*$px - 2 * 20*$px;
11     height: 235*$px - 2 * 1.5em;
12
13     a {
14         display: block;
15     }
16     h1 {
17         color: white;
18         margin: 0;
19         text-transform: uppercase;
20         font-size: .9em;
21     }
22     h1:before {
23         content: url(/static/img/icons/announce_white.png);
24         margin-right: 1.2em;
25         vertical-align: top;
26     }
27     h2 {
28         color: white;
29         font-size: .9em;
30         margin: 1.1em 0 0 0;
31         font-weight: normal;
32         text-transform: uppercase;
33     }
34     p {
35         color: #363a3e;
36         font-size: .8em;
37         line-height: 1.15em;
38         margin: .3em 0;
39     }
40 }
41
42
43 #main-sections {
44     clear: both;
45     float: left;
46     margin-top: 1.2em;
47     width: 700*$px;
48
49     h1 {
50         font-size: .9em;
51         margin: 0 0 0 20*$px;
52         text-transform: uppercase;
53     }
54
55     ul {
56         margin: -3*$px 0 0 -20*$px;
57         padding: 0;
58         list-style: none;
59
60         li {
61             margin-top: 20*$px;
62             margin-left: 20*$px;
63             float: left;
64             height: 90*$px;
65             border-radius: 15*$px;
66
67             a {
68                 color: white;
69                 text-transform: uppercase;
70                 display: block;
71                 height: 80*$px;
72                 display: table;
73                 padding: 5px;
74
75                 .in-box {
76                     font-size: .9em;
77                     height: 100%;
78                     width: 100%;
79                     display: table-cell;
80                     vertical-align: middle;
81                     border: 1px solid transparent;
82                     border-radius: 10*$px;
83                     padding: 0 16*$px;
84
85                     .name {
86                         display: block;
87                         font-size: 1.5em;
88                         line-height: 1em;
89                         margin-bottom: .2em;
90                     }
91                 }
92             }
93             a:hover .in-box {
94                 border: 1px solid white;
95             }
96         }
97         .box1 {background-color: #adaeaf;}
98         .box2 {background-color: #f8b323;}
99         .box3 {background-color: #16a487;}
100         .box4 {background-color: #5e6165;}
101         // .box5 {background-color: #16a487;}
102         .box5 {background-color: #f8b323;}
103         .box6 {background-color: #363a3e;}
104         .box7 {background-color: #adaeaf;}
105         .box8 {background-color: #ed7831;}
106     }
107 }
108
109 #main-howto {
110     float: right;
111     margin-top: 1.2em;
112     width: 220*$px;
113
114     h1 {
115         font-size: .9em;
116         margin: 0 0 0 1.4em;
117         text-transform: uppercase;
118     }
119
120     ul {
121         margin: 17*$px 0 17*$px 1.4em;
122
123         li {
124             font-size: .9em;
125             text-transform: uppercase;
126             line-height: 1.25em;
127         }
128         a:before {
129             height: 20*$px;
130         }
131
132         .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
133         .activity:before {content: url(/static/img/icons/activity_dark.png);}
134         .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
135         .reference:before {content: url(/static/img/icons/reference_dark.png);}
136         .knowledge:hover:before {content: url(/static/img/icons/knowledge_orange.png);}
137         .activity:hover:before {content: url(/static/img/icons/activity_orange.png);}
138         .lesson-plan:hover:before {content: url(/static/img/icons/lesson-plan_orange.png);}
139         .reference:hover:before {content: url(/static/img/icons/reference_orange.png);}
140
141     }
142     p {
143         margin: 0 0 30*$px 1.4em;
144     }
145 }
146
147 #main-chosen {
148     clear: left;
149     float: left;
150     margin-top: 2em;
151
152     h1 {
153         font-size: .9em;
154         margin: 0 0 1em 20*$px;
155         text-transform: uppercase;
156     }
157
158     .levelth {
159         margin-left: 20*$px;
160     }
161 }
162
163 #main-tools {
164     clear: both;
165     .main-tools-box {
166         float: left;
167         margin-top: 1.5em;
168         margin-right: 20*$px;
169         width: 280*$px;
170
171         h1 {
172             margin: 0;
173             font-size: .9em;
174             text-transform: uppercase;
175         }
176
177         ul, ol {
178             margin: 1.1em 0 0 0;
179             font-size: .9em;
180             line-height: 1.15em;
181         }
182     }
183 }