abea73cc7bfd97135fc693fca8d197c2eaf5af70
[wolnelektury.git] / 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     content: url(/static/img/lang-arrow.png);
134     padding-left: .5em;
135 }
136 #lang-menu {
137     position: relative;
138     float: right;
139     display: block;
140     padding-left: 1.5em;
141     padding-right: 1.5em;
142     /* must match grid-line */
143     height: 2.7em;
144     padding-top: 1.3em;
145     background: #f7f7f7;
146 }
147
148 #lang-menu-items button {
149     display: none;
150     background: #f7f7f7;
151     color: #444;
152     cursor: pointer;
153     width: 100%;
154     border: solid #ddd;
155     border-width: 0 0 1px 0;
156     padding: .5em 0;
157     margin: 0;
158 }
159
160 #lang-menu:hover button {
161     display: block;
162 }
163
164 #lang-menu:hover #lang-menu-items {
165     position: absolute;
166     width: 100%;
167     padding: 0;
168     left: 0;
169     /* must match grid-line height */
170     top: 3.9em;
171 }
172
173 #lang-menu .active {
174     font-weight: bold;
175 }