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: #969696;
  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: 5.5em;
  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: .5em;
  70     padding-top: 0;
  71     padding-bottom: 0;
  72 }
  73
  74 #search-field input {
  75     padding: 0;
  76     height: 3.3em;
  77     border: none;
  78     width: 62.6em;
  79     font-size: 1em;
  80     padding-left: .5em;
  81     -webkit-border-radius: .5em;
  82     -moz-border-radius: .5em;
  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 }
  88
  89 #search-button {
  90     display: inline-block;
  91     background: #02adb7;
  92     padding: 0;
  93     margin: 0;
  94     width: 9.4em;
  95 }
  96 #search-button button {
  97     font-size: 1em;
  98     height: 4.5em;
  99     border: none;
 100     background: #02adb7;
 101     color: white;
 102     width: 100%;
 103     padding: 0;
 104 }
 105
 106 #search-button button span {
 107     font-size: 1.1em;
 108     position:relative;
 109 }
 110
 111
 112 #nav-line {
 113     background-color: #e2e2e2;
 114     height: 4.9em;
 115 }
 116
 117 ul#catalogue {
 118     list-style: none;
 119     padding: 0;
 120     margin: 0 0 0 .6em;
 121 }
 122 ul#catalogue li {
 123     background-color: #e2e2e2;
 124     float: left;
 125 }
 126 ul#catalogue a {
 127     display: block;
 128     padding-left: 1.4em;
 129     padding-right: 1.4em;
 130     /* must match grid-line */
 131     height: 3.1em;
 132     padding-top: 1.8em;
 133 }
 134 ul#catalogue span {
 135     font-size: 1.1em;
 136 }
 137
 138
 139 #lang-button {
 140     color: #aaa;
 141 }
 142 #lang-button:after {
 143     padding-left: 1em;
 144     content: "↓";
 145     font-family: WL-Nav;
 146     vertical-align: middle;
 147 }
 148 #lang-menu {
 149     position: relative;
 150     float: right;
 151     display: block;
 152     padding-left: 2.5em;
 153     padding-right: 2em;
 154     /* must match grid-line */
 155     height: 3em;
 156     padding-top: 1.9em;
 157     background: #f7f7f7;
 158 }
 159
 160 #lang-menu-items button {
 161     display: none;
 162     background: #f7f7f7;
 163     color: #777;
 164     cursor: pointer;
 165     width: 100%;
 166     border: solid #ddd;
 167     border-width: 0 0 1px 0;
 168     padding: .5em 0;
 169     margin: 0;
 170 }
 171
 172 #lang-menu:hover button {
 173     display: block;
 174 }
 175
 176 #lang-menu:hover #lang-menu-items {
 177     position: absolute;
 178     width: 100%;
 179     padding: 0;
 180     left: 0;
 181     /* must match grid-line height */
 182     top: 3.9em;
 183 }
 184
 185 #lang-menu .active {
 186     color: #000;
 187 }