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         font-size: .75em;
  50         color: #777;
  51
  52         img {
  53             margin-top: .5em;
  54         }
  55     }
  56
  57
  58
  59     nav {
  60         ul {
  61             padding: 0;
  62             position: absolute;
  63             left: 15em;
  64         }
  65         li {
  66             list-style: none;
  67             display: inline-block;
  68             text-transform: uppercase;
  69             margin: 0 .5em;
  70             text-align: center;
  71             /*position:relative;*/
  72         }
  73         a {
  74             color: $ciemny;
  75             display: block;
  76             vertical-align: bottom;
  77             font-size: .85em;
  78         }
  79         a:hover {
  80             color: $oranji;
  81         }
  82
  83         a:before {
  84             content: " ";
  85             display: block;
  86             margin-bottom: .8em;
  87             width: 44*$px;
  88             height: 34*$px;
  89             text-align:center;
  90             margin: auto;
  91             margin-bottom: .8em;
  92         }
  93         .menu-lekcje:before { background: url(../img/menu/lekcje.png) no-repeat 0 0; background-size: 100%;}
  94         .menu-kompetencje:before { background: url(../img/menu/katalog.png) no-repeat 0 0; background-size: 100%;}
  95         .menu-wspolpraca:before { background: url(../img/menu/wspolpraca.png) no-repeat 0 0; background-size: 100%;}
  96         .menu-szkolenia:before { background: url(../img/menu/szkolenia.png) no-repeat 0 0; background-size: 100%;}
  97         .menu-wesprzyj:before { background: url(../img/menu/wesprzyj.png) no-repeat 0 0; background-size: 100%;}
  98         .menu-o-nas:before { background: url(../img/menu/o-nas.png) no-repeat 0 0; background-size: 100%;}
  99         .menu-kontakt:before { background: url(../img/menu/kontakt.png) no-repeat 0 0; background-size: 100%;}
 100         .menu-lekcje:hover:before { background: url(../img/menu/lekcje_active.png) no-repeat 0 0; background-size: 100%;}
 101         .menu-kompetencje:hover:before { background: url(../img/menu/katalog_active.png) no-repeat 0 0; background-size: 100%;}
 102         .menu-wspolpraca:hover:before { background: url(../img/menu/wspolpraca_active.png) no-repeat 0 0; background-size: 100%;}
 103         .menu-szkolenia:hover:before { background: url(../img/menu/szkolenia_active.png) no-repeat 0 0; background-size: 100%;}
 104         .menu-wesprzyj:hover:before { background: url(../img/menu/wesprzyj_active.png) no-repeat 0 0; background-size: 100%;}
 105         .menu-o-nas:hover:before { background: url(../img/menu/o-nas_active.png) no-repeat 0 0; background-size: 100%;}
 106         .menu-kontakt:hover:before { background: url(../img/menu/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
 107
 108     }
 109
 110     #tagline {
 111         clear: both;
 112         float: left;
 113         background-color: white;
 114         /* Extend padded background .*/
 115         padding: 0 10*$px;
 116         margin-left: -10*$px;
 117         font-size: .9em;
 118         color: $ciemny;
 119     }
 120     #search {
 121         float: right;
 122         background-color: white;
 123         /* Extend padded background .*/
 124         padding: 2px 10*$px 0;
 125         margin-right: -10*$px;
 126     }
 127 }
 128
 129
 130 #content {
 131     width: 940 * $px;
 132     padding: 0 10 * $px;
 133     margin: auto;
 134     position: relative;
 135 }
 136
 137
 138 footer.main {
 139     clear: both;
 140     border-top: 1px solid #c9ccce;
 141     width: 940 * $px;
 142     padding: .2em 10 * $px;
 143     margin: 40*$px auto 1em auto;
 144     color: #9a9c9e;
 145
 146     p {
 147         font-size: .75em;
 148     }
 149     .footer-item {
 150         float: left;
 151         margin-right: 20 * $px;
 152         width: 220 * $px;
 153     }
 154     .sponsors-column {
 155         float: left;
 156         margin-left: 20 * $px;
 157         width: 100 * $px;
 158         p {
 159             font-size: .75em;
 160         }
 161     }
 162     .footer-extra p {
 163         margin-top: 0;
 164     }
 165 }
 166
 167
 168 #search {
 169     font-size: .8em;
 170
 171     input, button {
 172         font-family: Dosis;
 173         font-size: .9em;
 174         vertical-align:bottom;
 175         border: 1px solid #c9ccce;
 176         padding: 0;
 177         margin: 0;
 178         line-height: .9em;
 179     }
 180     input {
 181         border-right-width: 0;
 182         height: 16px;
 183         width: 16em;
 184         padding-left: 1.3em;
 185     }
 186     button {
 187         height: 18px;
 188         width: 1.8em;
 189         span {
 190             position:relative;
 191             top: -1px;
 192         }
 193     }
 194
 195     input::-webkit-input-placeholder {
 196         text-transform: uppercase;
 197     }
 198     input:-moz-placeholder {
 199         text-transform: uppercase;
 200     }
 201     input::-moz-placeholder {
 202         text-transform: uppercase;
 203     }
 204     input::-ms-placeholder {
 205         text-transform: uppercase;
 206     }
 207
 208 }
 209
 210
 211 .link-list {
 212     list-style: none;
 213     padding: 0;
 214
 215     li {
 216         margin-bottom: .5em;
 217     }
 218
 219     a:before {
 220         content: "→";
 221         margin-right: .5em;
 222     }
 223     a {
 224         color: $ciemny;
 225     }
 226     a:hover {
 227         color: $oranji;
 228     }
 229 }
 230 .link-list-colored {
 231     a {
 232         color: $oranji;
 233     }
 234 }
 235
 236
 237 .plain {
 238     margin: 0;
 239     padding: 0;
 240     list-style: none;
 241     li {
 242         margin: 1em 0;
 243     }
 244 }
 245
 246 .flatpage {
 247     img {
 248         border: 5*$px solid #eee;
 249         margin: 1.3em;
 250     }
 251 }