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 }