d941eb61e937cda88166572fae2a2d1d2add1c6d
[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     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.5em;
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     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 }