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