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 #header a {
  29         color: #17CFDB;
  30 }
  31
  32 #half-header {
  33     padding-bottom: 0;
  34 }
  35
  36 #half-header-content {
  37     background: #191919;
  38     color: #989898;
  39 }
  40
  41
  42 #user-info {
  43     float: right;
  44     margin: 0;
  45 }
  46
  47 #logo {
  48     position: absolute;
  49     top: -1.6em;
  50     margin-left: 1.5em;
  51 }
  52
  53 #logo a {
  54     font-family: WL-Logo;
  55     font-size: 2.05em;
  56     color:#f7f7f7;
  57     line-height: 7em;
  58 }
  59
  60 #tagline {
  61     display: inline-block;
  62     margin-left: 25.5em;
  63 }
  64 #tagline span {
  65     font-size: 1.3em;
  66     color: #bbb;
  67 }
  68
  69 #search-area {
  70     margin: 0;
  71     background: #444;
  72     color: white;
  73     margin-left: 24em;
  74     width: 73.5em;
  75 }
  76
  77 #search-field {
  78     display: inline-block;
  79     width: 63.1em;
  80     padding-left: .5em;
  81     padding-right: 0;
  82     padding-top: 0.5em;
  83     padding-bottom: 0;
  84 }
  85
  86 #search {
  87     font-size: 1.3em;
  88     padding: 0;
  89     /*height: 3.3em;
  90     width: 62.6em;
  91     padding-left: .5em;
  92     -webkit-border-radius: .5em;
  93     -moz-border-radius: .5em;
  94     border: none;
  95     border-radius: .5em;
  96     -webkit-box-shadow:0 0 .5em #444 inset;
  97     -moz-box-shadow:0 0 .5em #444 inset;
  98     box-shadow: 0 0 .5em #444 inset;*/
  99     height: 2.54em;
 100     width: 47.47em;
 101     padding-left: 1em;
 102     -webkit-border-radius: .38em;
 103     -moz-border-radius: .38em;
 104     border: none;
 105     border-radius: .38em;
 106     -webkit-box-shadow:0 0 .38em #444 inset;
 107     -moz-box-shadow:0 0 .38em #444 inset;
 108     box-shadow: 0 0 .5em #444 inset;
 109     line-height: 2.5em;
 110
 111     font-family: Georgia;
 112     background-color: #fff;
 113     color: #000;
 114 }
 115
 116 /* styling search placeholder */
 117
 118 #search:-webkit-input-placeholder
 119 {
 120     font-family: Georgia;
 121     font-style: italic;
 122     color: #767676;
 123 }
 124
 125 #search.placeholder
 126 {
 127     font-family: Georgia;
 128     font-style: italic;
 129     color: #767676;
 130 }
 131
 132 #search:-moz-placeholder
 133 {
 134     font-family: Georgia;
 135     font-style: italic;
 136     color: #767676;
 137 }
 138
 139 #search-button {
 140     display: inline-block;
 141     background: #018189;
 142     color: white;
 143     padding: 0;
 144     margin: 0;
 145     width: 9.4em;
 146     float: right;
 147 }
 148 #search-button button {
 149     font-size: 1em;
 150     height: 4.5em;
 151     border: none;
 152     background: #018189;
 153     color: white;
 154     width: 100%;
 155     padding: 0;
 156 }
 157
 158 #search-button button span {
 159     font-size: 1.1em;
 160     position:relative;
 161 }
 162
 163
 164 #nav-line {
 165     background-color: #e2e2e2;
 166     height: 4.9em;
 167 }
 168
 169 ul#menu {
 170     list-style: none;
 171     padding: 0;
 172     margin: 0 0 0 .6em;
 173 }
 174
 175 li.menu {
 176     background-color: #e2e2e2;
 177     float: left;
 178 }
 179 a.menu {
 180     display: block;
 181     padding-left: 1.4em;
 182     padding-right: 1.4em;
 183     /* must match grid-line */
 184     height: 3.1em;
 185     padding-top: 1.8em;
 186     color: #0c7076;
 187 }
 188 a.menu span {
 189     font-size: 1.1em;
 190 }
 191
 192
 193 #lang-button {
 194     color: #717171;
 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: #6f6f6f;
 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 }