Additional information
[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 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
68             a {
69                 color: white;
70                 text-transform: uppercase;
71                 display: block;
72                 height: 80*$px;
73                 width: 150*$px;
74                 display: table;
75                 padding: 5*$px;
76
77                 span {
78                     font-size: .9em;
79                     height: 100%;
80                     width: 100%;
81                     display: table-cell;
82                     vertical-align: middle;
83                     border: 1px solid transparent;
84                     border-radius: 10*$px;
85                     padding-left: 16*$px;
86                 }
87             }
88             a:hover span {
89                 border: 1px solid white;
90             }
91         }
92         .box1 {background-color: #adaeaf;}
93         .box2 {background-color: #f8b323;}
94         .box3 {background-color: #16a487;}
95         .box4 {background-color: #5e6165;}
96         .box5 {background-color: #16a487;}
97         .box6 {background-color: #363a3e;}
98         .box7 {background-color: #adaeaf;}
99         .box8 {background-color: #ed7831;}
100     }
101 }
102
103 #main-chosen {
104     float: right;
105     margin-top: 1.2em;
106     width: 220*$px;
107
108     h1 {
109         font-size: .9em;
110         margin: 0 0 0 1.4em;
111         text-transform: uppercase;
112     }
113
114     ul {
115         margin: 17*$px 0 0 1.4em;;
116
117         li {
118             font-size: .9em;
119             text-transform: uppercase;
120             line-height: 1.25em;
121         }
122     }
123 }
124
125 #main-tools {
126     clear: both;
127     .main-tools-box {
128         float: left;
129         margin-top: 1.5em;
130         margin-right: 20*$px;
131         width: 280*$px;
132
133         h1 {
134             margin: 0;
135             font-size: .9em;
136             text-transform: uppercase;
137         }
138
139         ul, ol {
140             margin: 1.1em 0 0 0;
141             font-size: .9em;
142             line-height: 1.15em;
143         }
144     }
145 }