edumed/static/css/base.scss

   1 @import url(http://fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
   2
   3 $px: .0625em;
   4 $oranji: #ed7831;
   5 $ciemny: #363a3e;
   6 $zielony: #16a487;
   7
   8
   9 a {
  10     text-decoration: none;
  11     color: $oranji;
  12     img {
  13         border: 0;
  14         padding: 0;
  15     }
  16 }
  17
  18 body {
  19     font-family: Dosis;
  20     margin: 0;
  21     background: white;
  22     color: $ciemny;
  23 }
  24 .clr {
  25     clear: both;
  26 }
  27 #header-wrapper {
  28     background-image: url(../img/header-bar.png);
  29     background-repeat: repeat-x;
  30     background-position: 0 100%;
  31 }
  32 header.main {
  33     margin: 0 auto 23*$px;
  34     width: 940*$px;
  35     padding: 29*$px 10*$px 0;
  36
  37     #header-top {
  38     }
  39
  40     #logo {
  41         float: left;
  42         margin-bottom: 20*$px;
  43         img {
  44             vertical-align: middle;
  45         }
  46     }
  47     #organizer {
  48         float: right;
  49         margin-top: 1.3em;
  50     }
  51
  52
  53
  54     nav {
  55         ul {
  56             padding: 0;
  57             position: absolute;
  58             left: 15em;
  59         }
  60         li {
  61             list-style: none;
  62             display: inline-block;
  63             text-transform: uppercase;
  64             margin: 0 .5em;
  65             text-align: center;
  66             /*position:relative;*/
  67         }
  68         a {
  69             color: $ciemny;
  70             display: block;
  71             vertical-align: bottom;
  72             font-size: .85em;
  73
  74         }
  75         a:hover {
  76             color: $oranji;
  77         }
  78         a:before {
  79             display: block;
  80             margin-bottom: .8em;
  81         }
  82         .menu-lekcje:before { content: url(../img/menu/lekcje.png);}
  83         .menu-kompetencje:before { content: url(../img/menu/katalog.png); }
  84         .menu-wspolpraca:before { content: url(../img/menu/wspolpraca.png);}
  85         .menu-szkolenia:before { content: url(../img/menu/szkolenia.png); }
  86         .menu-wesprzyj:before { content: url(../img/menu/wesprzyj.png);}
  87         .menu-o-nas:before { content: url(../img/menu/o-nas.png); }
  88         .menu-kontakt:before { content: url(../img/menu/kontakt.png); }
  89         .menu-lekcje:hover:before { content: url(../img/menu/lekcje_active.png);}
  90         .menu-kompetencje:hover:before { content: url(../img/menu/katalog_active.png); }
  91         .menu-wspolpraca:hover:before { content: url(../img/menu/wspolpraca_active.png);}
  92         .menu-szkolenia:hover:before { content: url(../img/menu/szkolenia_active.png); }
  93         .menu-wesprzyj:hover:before { content: url(../img/menu/wesprzyj_active.png);}
  94         .menu-o-nas:hover:before { content: url(../img/menu/o-nas_active.png); }
  95         .menu-kontakt:hover:before { content: url(../img/menu/kontakt_active.png); }
  96
  97
  98     }
  99
 100     #tagline {
 101         clear: both;
 102         float: left;
 103         background-color: white;
 104         /* Extend padded background .*/
 105         padding: 0 10*$px;
 106         margin-left: -10*$px;
 107         font-size: .9em;
 108         color: $ciemny;
 109     }
 110     #search {
 111         float: right;
 112         background-color: white;
 113         /* Extend padded background .*/
 114         padding: 2px 10*$px 0;
 115         margin-right: -10*$px;
 116     }
 117 }
 118
 119
 120 #content {
 121     width: 940 * $px;
 122     padding: 0 10 * $px;
 123     margin: auto;
 124     position: relative;
 125 }
 126
 127
 128 footer.main {
 129     clear: both;
 130     border-top: 1px solid #c9ccce;
 131     width: 940 * $px;
 132     padding: .2em 10 * $px;
 133     margin: 40*$px auto 0 auto;
 134     color: #9a9c9e;
 135
 136     .footer-item {
 137         float: left;
 138         margin-right: 20 * $px;
 139         width: 220 * $px;
 140         p {
 141             font-size: .75em;
 142         }
 143     }
 144     .footer-item-half {
 145         float: left;
 146         margin-right: 20 * $px;
 147         width: 100 * $px;
 148         p {
 149             font-size: .75em;
 150         }
 151     }
 152 }
 153
 154
 155 #search {
 156     font-size: .8em;
 157
 158     input, button {
 159         font-family: Dosis;
 160         font-size: .9em;
 161         vertical-align:bottom;
 162         border: 1px solid #c9ccce;
 163         padding: 0;
 164         margin: 0;
 165         line-height: .9em;
 166     }
 167     input {
 168         border-right-width: 0;
 169         height: 16px;
 170         width: 16em;
 171         padding-left: 1.3em;
 172     }
 173     button {
 174         height: 18px;
 175         width: 1.8em;
 176         span {
 177             position:relative;
 178             top: -1px;
 179         }
 180     }
 181
 182     input::-webkit-input-placeholder {
 183         text-transform: uppercase;
 184     }
 185     input:-moz-placeholder {
 186         text-transform: uppercase;
 187     }
 188     input::-moz-placeholder {
 189         text-transform: uppercase;
 190     }
 191     input::-ms-placeholder {
 192         text-transform: uppercase;
 193     }
 194
 195 }
 196
 197
 198 .link-list {
 199     list-style: none;
 200     padding: 0;
 201
 202     a:before {
 203         content: "→";
 204         margin-right: .5em;
 205     }
 206     a {
 207         color: $ciemny;
 208     }
 209     a:hover {
 210         color: $oranji;
 211     }
 212 }