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.1em;
  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.1em;
  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 }