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