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