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