wolnelektury/static/css/header.css

   1 /* Logo font */
   2 @font-face {
   3     /* IE version */
   4     font-family: WL-Logo;
   5     src: url(/static/fonts/WL.eot);
   6 }
   7 @font-face {
   8   font-family: WL-Logo;
   9   src: url(/static/fonts/WL.ttf) format("truetype");
  10 }
  11
  12
  13 #header-bg {
  14         z-index: -1;
  15         background: #191919;
  16         position: absolute;
  17         width: 50%;
  18         height: 9.4em;
  19 }
  20
  21 #header {
  22     height: 3em;
  23     padding-top: 1.9em;
  24     padding-bottom: 0;
  25     color: #989898;
  26     background: #191919;
  27 }
  28
  29 #half-header {
  30     padding-bottom: 0;
  31 }
  32
  33 #half-header-content {
  34     background: #191919;
  35     color: #989898;
  36 }
  37
  38
  39 #user-info {
  40     float: right;
  41     margin: 0;
  42 }
  43
  44 #logo {
  45     position: absolute;
  46     top: -1.6em;
  47     margin-left: 1.5em;
  48 }
  49
  50 #logo a {
  51     font-family: WL-Logo;
  52     font-size: 2.05em;
  53     color:#f7f7f7;
  54     line-height: 7em;
  55 }
  56
  57 #tagline {
  58     display: inline-block;
  59     margin-left: 25.5em;
  60 }
  61 #tagline span {
  62     font-size: 1.3em;
  63     color: #ccc;
  64 }
  65 #tagline a,
  66 #user-info a {
  67         color: #17cfdb;
  68 }
  69
  70 #search-area {
  71     margin: 0;
  72     background: #444;
  73     color: white;
  74     margin-left: 24em;
  75     width: 73.5em;
  76 }
  77
  78 #search-field {
  79     display: inline-block;
  80     width: 63.1em;
  81     padding-left: .5em;
  82     padding-right: 0;
  83     padding-top: 0.5em;
  84     padding-bottom: 0;
  85 }
  86
  87 #search {
  88     font-size: 1.3em;
  89     padding: 0;
  90     /*height: 3.3em;
  91     width: 62.6em;
  92     padding-left: .5em;
  93     -webkit-border-radius: .5em;
  94     -moz-border-radius: .5em;
  95     border: none;
  96     border-radius: .5em;
  97     -webkit-box-shadow:0 0 .5em #444 inset;
  98     -moz-box-shadow:0 0 .5em #444 inset;
  99     box-shadow: 0 0 .5em #444 inset;*/
 100     height: 2.54em;
 101     width: 47.47em;
 102     padding-left: 1em;
 103     -webkit-border-radius: .38em;
 104     -moz-border-radius: .38em;
 105     border: none;
 106     border-radius: .38em;
 107     -webkit-box-shadow:0 0 .38em #444 inset;
 108     -moz-box-shadow:0 0 .38em #444 inset;
 109     box-shadow: 0 0 .5em #444 inset;
 110     line-height: 2.5em;
 111
 112     font-family: Georgia;
 113     background-color: #fff;
 114     color: #000;
 115 }
 116
 117 /* styling search placeholder */
 118
 119 #search:-webkit-input-placeholder
 120 {
 121     font-family: Georgia;
 122     font-style: italic;
 123     color: #888;
 124 }
 125
 126 #search.placeholder
 127 {
 128     font-family: Georgia;
 129     font-style: italic;
 130     color: #888;
 131 }
 132
 133 #search:-moz-placeholder
 134 {
 135     font-family: Georgia;
 136     font-style: italic;
 137     color: #888;
 138 }
 139
 140 #search-button {
 141     display: inline-block;
 142     background: #02adb7;
 143     color: white;
 144     padding: 0;
 145     margin: 0;
 146     width: 9.4em;
 147     float: right;
 148 }
 149 #search-button button {
 150     font-size: 1em;
 151     height: 4.5em;
 152     border: none;
 153     background: #02adb7;
 154     color: white;
 155     width: 100%;
 156     padding: 0;
 157 }
 158
 159 #search-button button span {
 160     font-size: 1.1em;
 161     position:relative;
 162 }
 163
 164
 165 #nav-line {
 166     background-color: #e2e2e2;
 167     height: 4.9em;
 168 }
 169
 170 ul#menu {
 171     list-style: none;
 172     padding: 0;
 173     margin: 0 0 0 .6em;
 174 }
 175
 176 li.menu {
 177     background-color: #e2e2e2;
 178     float: left;
 179 }
 180 a.menu {
 181     display: block;
 182     padding-left: 1.4em;
 183     padding-right: 1.4em;
 184     /* must match grid-line */
 185     height: 3.1em;
 186     padding-top: 1.8em;
 187 }
 188 a.menu span {
 189     font-size: 1.1em;
 190 }
 191
 192
 193 #lang-button {
 194     color: #aaa;
 195 }
 196 #lang-button:after {
 197     padding-left: 1em;
 198     content: "↓";
 199     font-family: WL-Nav;
 200     vertical-align: middle;
 201 }
 202 #lang-menu {
 203     position: relative;
 204     float: right;
 205     display: block;
 206     padding-left: 2.5em;
 207     padding-right: 2em;
 208     /* must match grid-line */
 209     height: 3em;
 210     padding-top: 1.9em;
 211     background: #f7f7f7;
 212 }
 213
 214 #lang-menu-items {
 215         z-index: 9999;
 216 }
 217
 218 #lang-menu-items button {
 219     display: none;
 220     background: #f7f7f7;
 221     color: #777;
 222     cursor: pointer;
 223     width: 100%;
 224     border: solid #ddd;
 225     border-width: 0 0 1px 0;
 226     padding: .5em 0;
 227     margin: 0;
 228 }
 229
 230 #lang-menu:hover button {
 231     display: block;
 232 }
 233
 234 #lang-menu:hover #lang-menu-items {
 235     position: absolute;
 236     width: 100%;
 237     padding: 0;
 238     left: 0;
 239     /* must match grid-line height */
 240     top: 3.9em;
 241 }
 242
 243 #lang-menu .active {
 244     color: #000;
 245 }