290585471596ba01ea8e985dd63e19fcadd37e20
[edumed.git] / edumed / static / css / main.scss
1 $px: .0625em;
2
3 #main-promobox {
4     /*position: absolute;
5     top: 0;
6     right: 10 * $px;*/
7     float: right;
8
9     border-radius: 15*$px;
10
11     background: #f8b323;
12     padding: 1.5em 20*$px;
13     width: 220*$px - 2 * 20*$px;
14     height: 235*$px - 2 * 1.5em;
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.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 1.6em;
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             width: 160*$px;
65             height: 90*$px;
66             border-radius: 15*$px;
67             display: table;
68
69             a {
70                 display: table-cell;
71                 padding-left: 27*$px;
72                 vertical-align: middle;
73                 height: 100%;
74                 color: white;
75                 text-transform: uppercase;
76                 font-size: .9em;
77             }
78         }
79         .box1 {background-color: #adaeaf;}
80         .box2 {background-color: #f8b323;}
81         .box3 {background-color: #16a487;}
82         .box4 {background-color: #5e6165;}
83         .box5 {background-color: #16a487;}
84         .box6 {background-color: #363a3e;}
85         .box7 {background-color: #adaeaf;}
86         .box8 {background-color: #ed7831;}
87     }
88 }
89
90 #main-chosen {
91     float: right;
92     margin-top: 1.2em;
93     width: 220*$px;
94
95     h1 {
96         font-size: .9em;
97         margin: 0 0 0 1.4em;
98         text-transform: uppercase;
99     }
100
101     ul {
102         margin: 17*$px 0 0 1.4em;;
103         padding: 0;
104         list-style-position:inside;
105
106         li {
107             font-size: .9em;
108             text-transform: uppercase;
109             line-height: 1.25em;
110
111             a {
112                 color: #363a3e;
113             }
114         }
115     }
116 }
117
118 #main-tools {
119     clear: both;
120     .main-tools-box {
121         float: left;
122         margin-top: 1.5em;
123         margin-right: 20*$px;
124         width: 280*$px;
125
126         h1 {
127             margin: 0;
128             font-size: .9em;
129             text-transform: uppercase;
130         }
131
132         ul, ol {
133             margin: 1.1em 0 0 0;
134             padding: 0;
135             list-style-position:inside;
136             color: #ed7831;
137             font-size: .9em;
138             line-height: 1.15em;
139
140             li {
141                 a {
142                     color: #ed7831;
143                 }
144             }
145         }
146     }
147 }