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     color: #969696;
  15     background: #191919;
  16 }
  17
  18 #half-header {
  19     background: url('/static/img/bg-header.png');
  20     background-position: center;
  21     background-size: 100%;
  22 }
  23
  24 #half-header-content {
  25     background: #191919;
  26 }
  27
  28
  29 #user-info {
  30     float: right;
  31     margin: 0;
  32 }
  33
  34 #logo {
  35     position: absolute;
  36     top: 4em;
  37 }
  38
  39 #logo a {
  40     font-family: WL-Logo;
  41     font-size: 1.9em;
  42     color:#f7f7f7;
  43 }
  44
  45 #logo img {
  46     max-width: 15em;
  47 }
  48
  49 #tagline {
  50     display: inline-block;
  51     margin-left: 16em;
  52 }
  53
  54 #search {
  55     margin: 0;
  56     background: #444;
  57     margin-left: 16em;
  58     width: 59em;
  59 }
  60
  61 #search-field {
  62     display: inline-block;
  63     width: 50em;
  64     padding-left: .5;
  65     padding-right: .5;
  66     padding: .1em .5em 0 .5em;
  67 }
  68
  69 #search-field input {
  70     height: 2.8em;
  71     border: none;
  72     width: 49.5em;
  73     font-size: 1em;
  74     padding-left: .5em;
  75     -webkit-border-radius: .5em;
  76     -moz-border-radius: .5em;
  77     border-radius: .5em;
  78     -webkit-box-shadow:0 0 .5em #444 inset;
  79     -moz-box-shadow:0 0 .5em #444 inset;
  80     box-shadow: 0 0 .5em #444 inset;
  81 }
  82
  83 #search-button {
  84     display: inline-block;
  85     background: #02adb7;
  86     padding: 0;
  87     margin: 0;
  88     width: 8em;
  89 }
  90 #search-button button {
  91     font-size: 1em;
  92     /* should match grid-line */
  93     height: 4em;
  94     border: none;
  95     background: #02adb7;
  96     color: white;
  97     width: 100%;
  98     padding: 0;
  99 }
 100
 101 #search-button button span {
 102     position:relative;
 103     top: -.2em;
 104 }
 105
 106
 107 #nav-line {
 108     background-color: #e2e2e2;
 109     height: 3.95em;
 110 }
 111
 112 ul#catalogue {
 113     list-style: none;
 114     padding: 0;
 115     margin: 0;
 116 }
 117 ul#catalogue li {
 118     background-color: #e2e2e2;
 119     float: left;
 120 }
 121 ul#catalogue a {
 122     display: block;
 123     padding-left: 1.5em;
 124     padding-right: 1.5em;
 125     /* must match grid-line */
 126     height: 2.7em;
 127     padding-top: 1.3em;
 128 }
 129
 130
 131
 132 #lang-button:after {
 133     padding-left: .5em;
 134     content: "↓";
 135     font-family: WL-Nav;
 136     vertical-align: middle;
 137 }
 138 #lang-menu {
 139     position: relative;
 140     float: right;
 141     display: block;
 142     padding-left: 1.5em;
 143     padding-right: 1.5em;
 144     /* must match grid-line */
 145     height: 2.7em;
 146     padding-top: 1.3em;
 147     background: #f7f7f7;
 148 }
 149
 150 #lang-menu-items button {
 151     display: none;
 152     background: #f7f7f7;
 153     color: #444;
 154     cursor: pointer;
 155     width: 100%;
 156     border: solid #ddd;
 157     border-width: 0 0 1px 0;
 158     padding: .5em 0;
 159     margin: 0;
 160 }
 161
 162 #lang-menu:hover button {
 163     display: block;
 164 }
 165
 166 #lang-menu:hover #lang-menu-items {
 167     position: absolute;
 168     width: 100%;
 169     padding: 0;
 170     left: 0;
 171     /* must match grid-line height */
 172     top: 3.9em;
 173 }
 174
 175 #lang-menu .active {
 176     font-weight: bold;
 177 }