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.1em;
  57 }
  58
  59 #search-area {
  60     margin: 0;
  61     background: #444;
  62     color: white;
  63     margin-left: 24em;
  64     width: 73.5em;
  65 }
  66
  67 #search-field {
  68     display: inline-block;
  69     width: 63.1em;
  70     padding-left: .5em;
  71     padding-right: 0;
  72     padding-top: 0.6em;
  73     padding-bottom: 0;
  74 }
  75
  76 #search {
  77     font-size: 1.3em;
  78     padding: 0;
  79     /*height: 3.3em;
  80     width: 62.6em;
  81     padding-left: .5em;
  82     -webkit-border-radius: .5em;
  83     -moz-border-radius: .5em;
  84     border: none;
  85     border-radius: .5em;
  86     -webkit-box-shadow:0 0 .5em #444 inset;
  87     -moz-box-shadow:0 0 .5em #444 inset;
  88     box-shadow: 0 0 .5em #444 inset;*/
  89     height: 2.54em;
  90     width: 47.47em;
  91     padding-left: 1em;
  92     -webkit-border-radius: .38em;
  93     -moz-border-radius: .38em;
  94     border: none;
  95     border-radius: .38em;
  96     -webkit-box-shadow:0 0 .38em #444 inset;
  97     -moz-box-shadow:0 0 .38em #444 inset;
  98     box-shadow: 0 0 .5em #444 inset;
  99
 100     font-family: Georgia;
 101     background-color: #fff;
 102     color: #000;
 103 }
 104 #search.blur {
 105     font-family: Georgia;
 106     font-style: italic;
 107     color: #888;
 108 }
 109
 110 #search-button {
 111     display: inline-block;
 112     background: #02adb7;
 113     color: white;
 114     padding: 0;
 115     margin: 0;
 116     width: 9.4em;
 117     float: right;
 118 }
 119 #search-button button {
 120     font-size: 1em;
 121     height: 4.5em;
 122     border: none;
 123     background: #02adb7;
 124     color: white;
 125     width: 100%;
 126     padding: 0;
 127 }
 128
 129 #search-button button span {
 130     font-size: 1.1em;
 131     position:relative;
 132 }
 133
 134
 135 #nav-line {
 136     background-color: #e2e2e2;
 137     height: 4.9em;
 138 }
 139
 140 ul#menu {
 141     list-style: none;
 142     padding: 0;
 143     margin: 0 0 0 .6em;
 144 }
 145 li.menu {
 146     background-color: #e2e2e2;
 147     float: left;
 148 }
 149 a.menu {
 150     display: block;
 151     padding-left: 1.4em;
 152     padding-right: 1.4em;
 153     /* must match grid-line */
 154     height: 3.1em;
 155     padding-top: 1.8em;
 156 }
 157 a.menu span {
 158     font-size: 1.1em;
 159 }
 160
 161
 162 #lang-button {
 163     color: #aaa;
 164 }
 165 #lang-button:after {
 166     padding-left: 1em;
 167     content: "↓";
 168     font-family: WL-Nav;
 169     vertical-align: middle;
 170 }
 171 #lang-menu {
 172     position: relative;
 173     float: right;
 174     display: block;
 175     padding-left: 2.5em;
 176     padding-right: 2em;
 177     /* must match grid-line */
 178     height: 3em;
 179     padding-top: 1.9em;
 180     background: #f7f7f7;
 181 }
 182
 183 #lang-menu-items button {
 184     display: none;
 185     background: #f7f7f7;
 186     color: #777;
 187     cursor: pointer;
 188     width: 100%;
 189     border: solid #ddd;
 190     border-width: 0 0 1px 0;
 191     padding: .5em 0;
 192     margin: 0;
 193 }
 194
 195 #lang-menu:hover button {
 196     display: block;
 197 }
 198
 199 #lang-menu:hover #lang-menu-items {
 200     position: absolute;
 201     width: 100%;
 202     padding: 0;
 203     left: 0;
 204     /* must match grid-line height */
 205     top: 3.9em;
 206 }
 207
 208 #lang-menu .active {
 209     color: #000;
 210 }