image listings / boxes work but need polishing. started coding the viewer.
[wolnelektury.git] / apps / wolnelektury_core / static / css / header.css
1 #header-bg {
2         z-index: -1;
3         background: #191919;
4         position: absolute;
5         width: 50%;
6         height: 9.4em;
7 }
8
9 #header {
10     padding-bottom: 0;
11     color: #989898;
12     background: #191919;
13     position: relative;
14 }
15 #header a {
16         color: #17CFDB;
17 }
18
19 #half-header {
20     padding-bottom: 0;
21 }
22
23 #half-header-content {
24     background: #191919;
25     color: #989898;
26 }
27
28 #logo a, #logo img {
29     display: block;
30 }
31
32 #tagline {
33         margin-left: 1.5em;
34 }
35
36 #tagline span {
37     font-size: 1.3em;
38     color: #bbb;
39 }
40
41 #user-info {
42     margin: 0;
43 }
44
45 #search-area {
46     margin: 0;
47     background: #444;
48     color: white;
49 }
50
51 #search-field {
52     display: inline-block;
53     padding-left: .5em;
54     padding-top: 0.5em;
55     padding-bottom: 0;
56 }
57
58 #search {
59     font-size: 1.3em;
60     padding: 0;
61     /*height: 3.3em;
62     width: 62.6em;
63     padding-left: .5em;
64     -webkit-border-radius: .5em;
65     -moz-border-radius: .5em;
66     border: none;
67     border-radius: .5em;
68     -webkit-box-shadow:0 0 .5em #444 inset;
69     -moz-box-shadow:0 0 .5em #444 inset;
70     box-shadow: 0 0 .5em #444 inset;*/
71     height: 2.54em;
72     padding-left: 1em;
73     -webkit-border-radius: .38em;
74     -moz-border-radius: .38em;
75     border: none;
76     border-radius: .38em;
77     -webkit-box-shadow:0 0 .38em #444 inset;
78     -moz-box-shadow:0 0 .38em #444 inset;
79     box-shadow: 0 0 .5em #444 inset;
80     line-height: 2.5em;
81
82     font-family: Georgia;
83     background-color: #fff;
84     color: #000;
85     z-index: 200;
86     position: relative;
87 }
88
89 /* styling search placeholder */
90
91 #search:-webkit-input-placeholder
92 {
93     font-family: Georgia;
94     font-style: italic;
95     color: #767676;
96 }
97
98 #search.placeholder
99 {
100     font-family: Georgia;
101     font-style: italic;
102     color: #767676;
103 }
104
105 #search:-moz-placeholder
106 {
107     font-family: Georgia;
108     font-style: italic;
109     color: #767676;
110 }
111
112 #search-button {
113     display: inline-block;
114     background: #018189;
115     color: white;
116     padding: 0;
117     margin: 0;
118     width: 9.4em;
119 }
120 #search-button button {
121     font-size: 1em;
122     height: 4.5em;
123     border: none;
124     background: #018189;
125     color: white;
126     width: 100%;
127     padding: 0;
128 }
129
130 #search-button button span {
131     font-size: 1.1em;
132     position:relative;
133 }
134
135
136 #nav-line {
137     background-color: #e2e2e2;
138     height: 4.9em;
139 }
140
141 ul#menu {
142     list-style: none;
143     padding: 0;
144     margin: 0 0 0 .6em;
145 }
146
147 li.menu {
148     background-color: #e2e2e2;
149     float: left;
150 }
151 a.menu {
152     display: block;
153     padding-left: 1.4em;
154     padding-right: 1.4em;
155     /* must match grid-line */
156     height: 3.1em;
157     padding-top: 1.8em;
158     color: #0c7076;
159 }
160 #menu a.hidden-box-trigger:hover {
161     border-bottom: 3px solid white;
162     margin-bottom: -3px;
163 }
164 a.menu span {
165     font-size: 1.1em;
166 }
167
168
169 #lang-button {
170     color: #717171;
171 }
172 #lang-button:after {
173     padding-left: 1em;
174     content: url("/static/img/arrow-gray.png");
175     vertical-align: middle;
176 }
177 #lang-menu {
178     position: relative;
179     float: right;
180     display: block;
181     padding-left: 2.5em;
182     padding-right: 2em;
183     /* must match grid-line */
184     height: 3.3em;
185     padding-top: 1.6em;
186     background: #f7f7f7;
187 }
188 #lang-menu .lang-flag {
189         font-size: 1.3em;
190 }
191
192 #lang-menu-items {
193         z-index: 9999;
194 }
195
196 #lang-menu-items button {
197     display: none;
198     background: #f7f7f7;
199     color: #6f6f6f;
200     cursor: pointer;
201     width: 100%;
202     border: solid #ddd;
203     border-width: 0 0 1px 0;
204     padding: .5em 0;
205     margin: 0;
206     font-size: 1.3em;
207 }
208
209 #lang-menu:hover button,
210 #lang-menu.hover button {
211     display: block;
212 }
213
214 #lang-menu:hover #lang-menu-items,
215 #lang-menu.hover #lang-menu-items {
216     position: absolute;
217     width: 100%;
218     padding: 0;
219     left: 0;
220     /* must match grid-line height */
221     top: 3.9em;
222 }
223
224 #lang-menu .active {
225     color: #000;
226 }
227
228 .search-hint-label {
229     display: inline-block;
230     width: 25em;
231     font-size: 1.1em;
232     line-height: 1.636em;
233 }
234
235 .search-hint-category {
236     font-size: 1.1em;
237     line-height: 1.636em;
238     
239 }
240
241
242
243 #user-menu {
244         left: 0;
245         top: 2em;
246         width: 15em;
247         line-height:1.6em;
248 }
249 #user-menu a {
250         color: #0D7E85;
251 }