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