[globalnav] produce xhtml code
[opensuse:themes.git] / bento / css / base.css
1 /*
2  * Title: openSUSE.org stylesheet (Bento-Theme)
3  * Author: Robert Lihm <rlihm@opensuse.org>
4  * Copyright (c) 2009 AUTHORS.txt (http://www.opensuse.org)
5  * Licensed under the MIT (MIT-LICENSE.txt) license.
6  */
7
8 /* 
9
10 # Basic HTML/CSS Structure #
11
12 html
13   |-body
14   | |- header
15   | | |- #header-content ==> .container_12
16   | | | |- #header-logo
17   | | | |- #global-navigation
18   | | | |- #global-search-form
19   | |- #subheader ==> .container_16
20   | | |- #breadcrump
21   | | |- #local-user-actions
22   | | | |- #pt-personal
23   | |- #content ==> .container_16 .content-wrapper
24   | | |- ...
25         |       |- footer ==> .container_12
26   | | |- ...
27   | | |- #footer-legal ==> .ui-oo-border-top .grid_12
28
29
30 # Main Colors #
31
32 More Detail: http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Styleguide#Icon_Set
33
34 # Color #                                                       # Hex #         #       RGB #                           # Usage Example #
35 ------------------------------------------------------------------------------
36 Dark Grey                                               #444444         68 68 68                        Text color
37 Medium Grey                                     #666666         102 102 102             Navigation Background
38 Light Grey 1                                    #999999         153 153 153             Text color in unselected input field
39 Light Grey 2                                    #dddddd         221 221 221             Box Header and Footer
40 BG Grey                                                         #f6f6f6         246 246 246             Body Background
41 Blue 1                                                          #006699         0 102 153                       Content Links
42 Blue 2                                                          #3399cc         51 153 204                      Content Links hover
43 Green 1                                                         #669900         102 153 0                       Text-Links outside of content
44 Light Yellow                                    #fbf9ee         251 249 238             Notification Box Background
45 Yellow                                                          #fcefa1         252 239 161             Notification Box Border
46 Light Red                                               #fef1ec         254 241 236             Error Notification Box Background
47 Red                                                                     #cc0000         204 0 0                                 Error Notification Box Border and Font-Color
48
49 # UI Style Colors #
50
51 # Color #                                                       # Hex #         #       RGB #                           # Usage Example #
52 ------------------------------------------------------------------------------
53 Dark Grey                                               #111111         17 17 17                        Box Bottom Border
54 Medium Grey 2                                   #4e4e4e         78 78 78                                Main Navigation Separator
55 Light Shadow Grey               #222222         34 34 34                                Box Dropshadow
56 Dark Shadow Grey                        #cccccc         204 204 204             Box Dropshadow
57
58 */
59
60
61 /* == Browser Reset.css =========================================================== */
62
63 /* -------------------------------------------------------------- 
64   
65    Reset default browser CSS.
66    
67    Based on work by Eric Meyer:
68    http://meyerweb.com/eric/tools/css/reset/index.html
69    
70 -------------------------------------------------------------- */
71
72 /* v1.0 | 20080212 */
73
74 /*@import url("reset.css") all;*/
75 /*
76 html, body, div, span, applet, object, iframe,
77 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
78 a, abbr, acronym, address, big, cite, code,
79 del, dfn, em, font, img, ins, kbd, q, s, samp,
80 small, strike, strong, sub, sup, tt, var,
81 b, u, i, center,
82 dl, dt, dd, ol, ul, li,
83 fieldset, form, label, legend,
84 table, caption, tbody, tfoot, thead, tr, th, td {
85         margin: 0;
86         padding: 0;
87         border: 0;
88         outline: 0;
89         font-size: 100%;
90         vertical-align: baseline;
91         background: transparent;
92 }
93 body {
94     background:#fff;
95         line-height: 1;
96 }
97 ol, ul {
98         list-style: none;
99 }
100 blockquote, q {
101         quotes: none;
102 }
103 blockquote:before, blockquote:after,
104 q:before, q:after {
105         content: '';
106         content: none;
107 }*/
108
109 /* remember to define focus styles! */
110 /*:focus {
111         outline: 0;
112 }*/
113
114 /* remember to highlight inserts somehow! */
115 /*ins {
116         text-decoration: none;
117 }
118 del {
119         text-decoration: line-through;
120 }*/
121
122 /* tables still need 'cellspacing="0"' in the markup */
123 /*table {
124         border-collapse: collapse;
125         border-spacing: 0;
126 }
127
128 a img { border: none; }*/
129
130 /* == include 960 Grid CSS Framework ====================================== */
131 /*@import url("960.css") all;*/ 
132 /*.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix{height:1%}
133
134 .clear {
135         margin:0 !important;
136 }*/
137
138 /* == Basic Element Settings ============================================== */
139 html,
140 body {
141   background: #f6f6f6;
142   color: #444444;
143   font: 16px "Lucida Grande", "Trebuchet MS", Arial, Verdana, sans-serif;
144   height: 99%;
145   margin: 0;
146   padding: 0;
147   width: 100%;
148 }
149
150 body > div { margin-bottom: 15px;}
151 h1 {font-size: 1.5em; margin-bottom: 1.2em;}
152 h2 {font-size: 1.3em; margin-bottom: 1.1em;}
153 h3 {font-size: 1.2em; margin-bottom: 1.0em;}
154 h4, h5, h6 {font-size: 1.1em; margin-bottom: 0.9em;}
155 a {color: #690; text-decoration: none;}
156 a:hover {color: #39c; text-decoration: underline;}
157 p, ul, ol {margin: 1em 0;}
158 h1, h2, h3, h4, h5, h6, p, ul, ol, table { margin-left: 15px; margin-right: 15px;}
159 h1, h2, h3, h4, h5, h6 {margin-top: 0.5em; margin-bottom: 1.2em;}
160 p {line-height: 150%;}
161 ul, ol { list-style: disc inside; padding: 0 1em;}
162 ul li , ol li {margin: 0.5em 0;}
163 ul ul , ol ul, ul ol , ol ol {margin-top: 0em; margin-bottom: 0em;}
164 ol {list-style-type: decimal;}
165 input, textarea { border: 1px solid #666; padding: 2px 3px;}
166
167 img {border: 0;}
168 p img {
169   padding: 0;
170   max-width: 100%;
171 }
172
173 table {
174         width: inherit;
175         max-width: 95%;
176 }
177 tbody, tfoot, thead, tr {
178 }
179
180 th, td {
181 }
182
183 th {background-color: #eee;}
184 th, td {padding: 0.2em;}
185 td {border: 1px dotted #ccc;}
186         th:first-child, td:first-child {border-left: none;}
187         th:last-child, td:last-child {border-right: none;} /* :last-child does not work in IE 8-- */
188
189 /* == 960 Extension ======================================================= */
190 .ui-oo-content-wrapper .ui-oo-box-shadow > div.grid_5, /* old way - dont use this */
191 .content-wrapper .box > div.grid_5 {
192   width: 260px;
193 }
194
195 /* Row System  ============================================================ */
196
197 /* 2010-03-26: not well testet 
198         Does not work correktly in columns ==> margin/pedding impact.
199 */
200
201 .row_auto {
202         height: auto;
203 }
204
205 .row_1 {min-height: 2em;}
206
207 /* ... */
208
209 .row_10 {min-height: 20em;} /* ninimum box height */
210 .row_11 {min-height: 22em;}
211 .row_12 {min-height: 24em;}
212 .row_13 {min-height: 26em;}
213 .row_14 {min-height: 28em;}
214 .row_15 {min-height: 30em;}
215 .row_16 {min-height: 32em;}
216 .row_17 {min-height: 34em;}
217 .row_18 {min-height: 36em;}
218 .row_19 {min-height: 38em;}
219 .row_20 {min-height: 40em;}
220 .row_21 {min-height: 42em;}
221 .row_22 {min-height: 44em;}
222 .row_23 {min-height: 46em;}
223 .row_24 {min-height: 48em;}
224 .row_25 {min-height: 50em;}
225 .row_26 {min-height: 52em;}
226 .row_27 {min-height: 54em;}
227 .row_28 {min-height: 56em;}
228 .row_29 {min-height: 58em;}
229 .row_30 {min-height: 60em;}
230
231 /* == Basic UI Settings =================================================== */
232
233 #header,
234 #subheader,
235 #flash-messages,
236 #content,
237 #footer {
238   
239 }
240 #subheader, #flash-messages, #footer {overflow: hidden;}
241
242 #content > div,
243 #subheader,
244 #content,
245 #content .column > div,
246 .ui-oo-box-shadow,
247 .box {
248   margin-bottom: 15px;
249 }
250
251 #header {
252   background: #666 url('images/gradient-dark-nav.png') repeat-x scroll bottom left;
253   font-size: 0.8em;
254   font-weight: bold;
255   margin: 0 0 25px;
256   border-bottom: 1px solid #333;
257 }
258 #header, #header ul#global-navigation li {height: 30px;}
259
260   #header-content {}
261
262   #header ul#global-navigation{
263     list-style: none inside;
264     width: 700px;
265     float: left;
266   }
267   #header ul#global-navigation,
268   #header ul#global-navigation li {
269     border-color: #4e4e4e;
270     border-style: solid;
271     margin: 0;
272   }
273     #header ul#global-navigation li:first-child {
274       border-left-width: 1px;
275     }
276     #header ul#global-navigation li {
277       float: left;
278       border-right-width: 1px;
279     }
280       #header ul#global-navigation li a {
281         color: #fefefe;
282         display: block;
283         height: 100%;
284         margin: 0 15px;
285         padding-top: 7px;
286         text-decoration: none;
287         width: 100%;
288       }
289       #header ul#global-navigation li a:hover {
290         
291       }
292   #header li#global-favorites {
293     float: right !important;
294     border-left-width: 1px;
295   }
296   #header a#header-logo {
297     float: left;
298     margin-top: 1px;
299     margin-right: 25px;
300   }
301   #header #global-search-form {
302     float: right;
303     margin-top: 4px;
304   }
305   #header #global-search-form input {
306     -moz-border-radius: 5px;
307     -webkit-border-radius: 5px;
308     -khtml-border-radius: 5px;
309     border-radius: 5px;
310     
311     border: 1px solid #2e2e2e;
312     color: #999;
313     width: 150px;
314   }
315     #header #global-search-form input:focus {
316       color: #330;
317     }
318 #subheader {
319   font-size: 0.8em;
320   margin-top: -15px;
321 }
322         #subheader a {
323                 text-decoration: none;
324         }
325
326 #breadcrump {
327   font-size: 0.9em;
328   color: #333;
329 }
330   #breadcrump img {
331     float: left;
332     margin-right: 5px;
333     border-bottom: 1px solid transparent;
334   }
335   #breadcrump a {
336     color: #666;
337   }
338   #breadcrump a:hover {
339     text-decoration: underline;
340   }
341 #login-wrapper {
342   text-align: right;
343   height: 1em;
344 }
345
346 /* == Login-Form ========================================================== */
347 #login-form {
348   display: none;
349   width: 250px;
350   height: auto;
351   font-size: 0.7em;
352   position: absolute;
353   top: 31px;
354   right: 0;
355   padding-bottom: 10px;
356   color: #f6f6f6;
357   background: #333 url('images/gradient-darker.png') repeat-x scroll bottom left;
358   -moz-border-radius-bottomleft: 5px;
359   -moz-border-radius-bottomright: 5px;
360   -webkit-border-bottom-left-radius: 3px;
361   -webkit-border-bottom-right-radius: 3px;
362   -khtml-border-bottom-left-radius: 5px;
363   -khtml-border-bottom-right-radius: 5px;
364   border-radius: 5px;
365   border-width: 1px;
366   border-style: solid;
367   border-color: transparent #333 #111;
368   opacity: 0.95;
369   -moz-opacity: 0.95;
370 /*  filter:alpha(opacity=90);*/ /* this could make trouble */
371   -webkit-box-shadow: 0 1px 3px #999;
372   -moz-box-shadow: 0 1px 3px #999;
373   box-shadow: 0 1px 3px #999;
374 }
375
376   #login-form input {
377     width: 213px;
378     font-size: 1.5em;
379     padding: 2px 3px;
380     border: 3px solid #222;
381     -moz-border-radius: 5px;
382     -webkit-border-radius: 5px; /* in webkit bowsers the background color appears around the rounded border */
383     -khtml-border-radius: 5px;
384     border-radius: 5px;
385   }
386     #login-form input:focus {
387       color: #39c;
388       border-color: #39c;
389       -webkit-box-shadow: 0 1px 3px #222;
390       -moz-box-shadow: 0 1px 3px #222;
391       box-shadow: 0 1px 3px #222;
392     }
393   #login-form input[type="submit"] {
394     border-color: #f6f6f6;
395     -webkit-box-shadow: 0 0px 2px #000;
396     -moz-box-shadow: 0 1px 1px #111;
397     box-shadow: 0 1px 1px #111;
398     color: #eee;
399     cursor: pointer;
400     background: #9f3 url('images/gradient-dark-nav.png') repeat-x scroll 0 -15px;
401     font-weight: bold;
402     text-shadow: 0 0px 3px #333;
403     width: 225px;
404   }
405       #login-form input[type="submit"]:hover {
406         border-color: #39c;
407       }
408   
409   #login-form p {
410     margin: 15px;
411     clear: left;
412     position: relative;
413   }
414   #login-form label {
415     display: block;
416     position: absolute;
417     top: 8px;
418     left: 7px;
419     color: #666;
420     width: 100px;
421     font-size: 13px;
422   }
423   #login-form .slim-footer {
424     text-align: center;
425     margin-bottom: 0;
426   }
427     #login-form .slim-footer a {
428       text-decoration: none;
429       color: #eee;
430       font-weight: bold;
431     }
432     #login-form .slim-footer a:hover {
433       text-decoration: underline;
434     }
435
436 /* == /Login-Form ========================================================= */
437
438 #local-user-actions { /*eg. Username, Preferences, etc.*/
439 /*  display: none;*/
440
441 }
442   #local-user-actions ul {
443     margin: 0;
444     list-style: none inside;
445   }
446
447 #flash-messages {
448
449 }
450 #flash-messages .ui-widget + .ui-widget{
451   margin-top: 15px;
452 }
453 #footer-content,
454 #footer-legal {
455   color: #666;
456   font-size: 0.9em;
457 }
458 #footer {
459   padding: 42px 0 100px;
460   font-size: 0.7em;
461 }
462         #footer ul {
463                 margin: 0;
464                 padding: 0.5em;
465         }       
466   #footer-legal {
467     border-top: 1px dotted #999;
468     color: #999;
469     font-size: 0.7em;
470     margin-top: 25px;
471     padding-top: 5px;
472     text-align: center;
473   }
474  
475 /* INFO: #ui-oo-* and .ui-oo-* are Interface related styles for openSUSE.org */
476
477 .ui-oo-content-wrapper,
478 .content-wrapper {
479   font-size: 0.8em;
480 }
481   .ui-oo-content-wrapper .ui-oo-box-shadow.navigation > *,
482   .content-wrapper .box.navigation > * { /* box specified as navigation */
483     margin: 0.5em 15px 1em;
484   }
485     .ui-oo-content-wrapper .ui-oo-box-shadow > * > :first-child,/* old style - dont use it */
486     .content-wrapper .box > * > :first-child {margin-top: 0;}
487
488     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h1, /* old style - dont use it */
489                 .content-wrapper .box > * > h1 {margin-top: 2em; margin-bottom: 0.7em;}
490                 
491                 .ui-oo-content-wrapper .ui-oo-box-shadow > * > h2, /* old style - dont use it */
492                 .content-wrapper .box-shadow > * > h2 {margin-top: 1.8em; margin-bottom: 0.7em;}
493                 
494     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h3, /* old style - dont use it */
495     .content-wrapper .box > * > h3 {margin-top: 1.5em; margin-bottom: 0.7em;}
496
497     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h4, /* old style - dont use it */
498     .content-wrapper .box > * > h4 {margin-top: 1em; margin-bottom: 0.5em;}
499
500     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h5, /* old style - dont use it */
501     .content-wrapper .box > * > h5 {margin-top: 1em; margin-bottom: 0.5em;}
502     
503                 .ui-oo-content-wrapper .ui-oo-box-shadow > * > h6, /* old style - dont use it */
504                 .content-wrapper .box > * > h6 {margin-top: 1em; margin-bottom: 0.5em;}
505
506 .ui-oo-box-shadow, /* old style - dont use it */
507 .box {
508   border-width: 1px;
509   border-style: solid;
510   border-color: #ddd #ccc #bbb;
511   background-color: #fefefe;
512   padding: 15px 0;
513 }
514
515 .ui-oo-box-shadow a, /* old style - dont use it */
516 .box a {
517         color: #069; /* Blue */
518         /*color: #693;*/        /* Green */
519 }
520
521         .ui-oo-box-shadow a:hover, /* old style - dont use it */
522         .box a:hover {
523                 color: #693;    /* Green */             
524         }
525
526
527 .container_16  div div,
528 .container_12  div div {
529 /*  margin-bottom: 3px;*/
530 }
531
532   .container_16.sibling_p4 div:first-child  {
533     margin-left: 240px;
534   }
535
536   .ui-oo-box-shadow.alpha, /* old style - dont use it */
537   .ui-oo-box-shadow.omega, /* old style - dont use it */
538   .box.alpha,
539   .box.omega {
540     margin-bottom: 15px; /* TODO: Browser Test Needed; this may not work propperly */
541   }
542   div.navigation {
543     padding-top: 0;
544                 position: relative;
545   }
546   ul.navigation {
547     list-style: none inside;
548     padding-left: 0;
549     width: 85%;
550   }
551     ul.navigation li {
552     }
553     ul.navigation a {
554       color: #666;
555       text-decoration: none;
556       
557       display: block;
558     }
559     ul.navigation a:hover {
560         background: transparent url('images/right_btn.png') no-repeat scroll bottom right;
561       color: #39c;
562     }
563   div.navigation h1 {
564     font-size: 1.2em;
565     color: #069;
566   }
567   
568   div.col_2 {
569     width: 50%;
570   }
571   
572 /* -- UI - Helper --------------------------------------------------------- */
573 /* Meny of this classes use the jQuery UI class names. Documentation for the 
574  * can be found at http://jqueryui.com/docs/Theming/API
575  */
576
577 /* Layout Helpers */
578 .ui-helper-hidden { display: none; }
579 .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
580 .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
581 .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
582 .ui-helper-clearfix { display: inline-block; }
583 /* required comment for clearfix to work in Opera \*/
584 * html .ui-helper-clearfix { height:1%; }
585 .ui-helper-clearfix { display:block; }
586 /* end clearfix */
587 .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
588
589
590 /* Widget Containers */
591 .ui-widget {}
592 .ui-widget-header {}
593 .ui-widget-content {}
594  
595 /* Interaction States */
596 .ui-state-default {}
597 .ui-state-hover {}
598 .ui-state-focus {}
599 .ui-state-active {}
600
601 /* Interaction Cues */
602 .ui-state-highlight,
603 .ui-state-error {
604   padding: 0 0.7em;
605 }
606
607
608 .ui-state-highlight {
609   background-color: #fbf9ee;
610   border: 1px solid #fcefa1;
611   color: #333;
612 }
613 .ui-state-error {
614   background-color: #fef1ec;
615   border: 1px solid #c00;
616   color: #c00;
617 }
618 .ui-state-error-text {}
619 .ui-state-disabled { cursor: default !important; }
620 .ui-priority-primary {}
621 .ui-priority-secondary {}
622
623 .ui-corner-all {}
624
625 /* Corner Radius helpers */
626 .ui-corner-tl {}
627 .ui-corner-tr {}
628 .ui-corner-bl {}
629 .ui-corner-br {}
630 .ui-corner-top {}
631 .ui-corner-bottom {}
632 .ui-corner-right {}
633 .ui-corner-left {}
634
635 .box,
636 .ui-oo-box-shadow, /* old style */
637 .ui-corner-all {
638   border-radius: 5px;
639   -moz-border-radius: 5px;
640   -webkit-border-radius: 5px;
641   -khtml-border-radius: 5px;
642 }
643 .ui-corner-t,
644 .ui-corner-b {}
645
646
647 /* Overlay & Shadow */
648
649 .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
650 .ui-oo-box-shadow, /* old style - dont use it */
651 .ui-widget-shadow,
652 .box-shadow {
653   box-shadow: 0 1px 3px #ccc;
654   -webkit-box-shadow: 0 1px 3px #ccc;
655   -moz-box-shadow: 0 1px 3px #ccc;
656 }
657
658 .ui-oo-fold-icon, /* old style - dont use it */
659 .fold-icon {
660   display: block;
661   width: 9px;
662   height: 9px;
663   float: right;
664   background: transparent url('images/unfold-indikator.png') no-repeat scroll 0 0;
665 }
666
667 /* == Customisation ======================================================= */
668
669 /* -- Content Area Settings ----------------------------------------------- */
670
671 .box-header,
672 .box-subheader,
673 .box-footer {
674   background: #fff url('images/gradient-light-short.png') repeat-x scroll 0 -20px ;
675   padding: 3px 0;
676   margin-left: 0!important; /* like 960gs .aplha */
677   margin-right: 0!important; /* like 960gs .omega */
678   min-height: 15px;
679   width: 100%;
680 }
681
682 .box-header a,
683 .box-subheader a,
684 .box-footer a {
685 /*      color: #690;*/ /* Green */
686         color: #069;
687 }
688
689 .box-header li,
690 .box-subheader li,
691 .box-footer li {
692         color: #069;
693         margin: 0.2em 0;
694 }
695
696 .box-header {
697   border-top-left-radius: 5px;
698   border-top-right-radius: 5px;
699   -moz-border-radius-topleft: 5px;
700   -moz-border-radius-topright: 5px;
701   -webkit-border-top-left-radius: 5px;
702   -webkit-border-top-right-radius: 5px;
703   -khtml-border-top-left-radius: 5px;
704   -khtml-border-top-right-radius: 5px;
705   margin-top: -15px;
706   margin-bottom: 15px!important;
707   border-bottom: 1px solid #ddd;
708 }
709
710 h2.box-header,
711 h2.box-subheader {
712   text-indent: 15px;
713   font-size: 1em;
714 }
715 .navigation h2.box-header,
716 .navigation h2.box-subheader {
717   margin-top: 0!important;
718 }
719 .box-subheader {
720   border-top: 1px solid #ddd;
721   border-bottom: 1px solid #ddd;
722 }
723 .box-footer {
724   border-bottom-left-radius: 5px;
725   border-bottom-right-radius: 5px;
726   -moz-border-radius-bottomleft: 5px;
727   -moz-border-radius-bottomright: 5px;
728   -webkit-border-bottom-left-radius: 5px;
729   -webkit-border-bottom-right-radius: 5px;
730   -khtml-border-bottom-left-radius: 5px;
731   -khtml-border-bottom-right-radius: 5px;
732   
733   border-top: 1px solid #ddd;
734 /* this does not work with fluid 960gs */
735         position: absolute;
736         bottom: 0px;
737         left: 0;
738         margin-bottom: 0!important;
739 /* Fluid 960gs fix*/
740 /*      margin-bottom: -15px;*/
741 }
742
743 .navigation .box-footer {
744         position: relative;
745         margin-bottom: -15px!important;
746 }
747 .box-header ul,
748 .box-footer ul {
749   list-style: none inside;
750   padding: 0;
751   font-size: 0.8em;
752   margin: 0 0 0 15px;
753 }
754 .box-header ul li,
755 .box-footer ul li {
756   float: left;
757 }
758 .box-header a,
759 .box-footer a {
760   text-decoration: none;
761   margin-right: 7px;
762         text-shadow: 0 1px 1px #ccc;
763 }
764 .aside ul {
765   list-style: none inside;
766 }
767
768
769
770 /* == Landing Page ======================================================== */
771 /*
772 *               The Quicklinks and Display are used in the Demo-Display ... an mockup for the landingpage.
773 *               TODO: Move Quicklings to local css file!
774 */
775
776 #display #lp-pr-image {
777   margin-top: 42px;
778   margin-left: 150px;
779 }
780 #display > div {
781   margin-bottom: 15px;
782 }
783
784 #display-content {
785   height: 450px;
786 }
787         #display-content.ui-oo-box-shadow, /* old style - dont use it */
788         #display-content.box {
789         padding: 0;
790         overflow: hidden;
791         }
792
793 #quicklinks-wrapper {
794   background: #222 url('images/bg_display-sidebar.png') no-repeat scroll 0 0;
795   height: 450px;
796   border-top-right-radius: 5px;
797   border-bottom-right-radius: 5px;
798   -moz-border-radius-topright: 5px;
799   -moz-border-radius-bottomright: 5px;
800   -webkit-border-top-right-radius: 5px;
801   -webkit-border-bottom-right-radius: 5px;
802   -khtml-border-top-right-radius: 5px;
803   -khtml-border-bottom-right-radius: 5px;
804 }
805
806 #quicklinks,
807 #quicklinks .headline,
808 #quicklinks .description {
809   
810 }
811 #quicklinks {
812   list-style: none inside;
813 }
814 #quicklinks li {
815   margin-bottom: 25px;
816 }
817 #quicklinks a {
818   text-decoration: none;
819   cursor: pointer;
820   display: block;
821   height: 120px;
822 }
823 #quicklinks .top,
824 #quicklinks .content,
825 #quicklinks .bottom,
826 #quicklinks .headline,
827 #quicklinks .description {
828   display: block;
829 }
830 #quicklinks .top,
831 #quicklinks .content,
832 #quicklinks .bottom {
833 }
834 #quicklinks .top,
835 #quicklinks .bottom {
836   height: 20px;
837 }
838 #quicklinks .top {
839   background-position: 0 0;
840 }
841 #quicklinks .content {
842   background-position: 0 -10px;
843   min-height: 100px;
844 }
845 #quicklinks .bottom {
846   background-position: 0 -130px;
847 }
848 #quicklinks .description {
849   margin-left: 100px;
850 }
851 #quicklinks a img {
852   opacity: 0.5;
853   -moz-opacity: 0.5;
854 }
855         #quicklinks a:hover img {
856           opacity: 1;
857           -moz-opacity: 1;
858         }
859
860 #quicklinks .headline {
861   font-weight: bold;
862   font-size: 1.2em;
863   margin-bottom: 0.5em;
864   text-shadow: #000 0px 1px 1px;
865 }
866 #quicklinks .headline,
867 #quicklinks .description {
868   margin-left: 30px;
869 }
870
871 #quicklinks a {
872   color: #ccc;
873   text-shadow: #000 0px 1px 1px;
874 }
875
876 #quicklinks a:hover {
877   color: #fff;
878   text-shadow: #000 0px 1px 3px;
879 }
880
881 #quicklinks .content img {
882   float: left;
883   margin: 10px 15px 25px 0;
884
885
886 /* == /Landing Page ======================================================== */
887
888
889
890 /* == Helper Styles ======================================================= */
891
892 .ui-oo-border-top, /* old style */
893 .border-top {
894   border-top: 1px dotted #999;
895 }
896
897 .hidden {
898   display: none;
899 }
900
901 /* Floating */
902 .alignright {float: right;}
903 .alignleft {float: left;}
904
905         img.centered {
906           display: block;
907           margin-left: auto;
908           margin-right: auto;
909         }
910         img.alignright,
911         img.alignleft {
912           padding: 4px;
913           display: inline;
914         }
915         img.alignright {margin: 0 0 2px 7px;}
916         img.alignleft {margin: 0 7px 2px 0;}
917
918         /* Clear Floating */
919         .clear-left {
920           clear: left;
921         }
922         .clear-both {
923           clear: both;
924         }
925         .clear-right {
926           clear: right;
927         }
928
929
930 .no-shadow { /* TODO: Remove this; old style */
931   box-shadow: none;
932   -webkit-box-shadow: none;
933   -moz-box-shadow: none;
934 }
935
936
937 /* == Mockup Styles ======================================================== */
938 /* This Styles are just for Mockups. They don't have full *-browser support! */
939
940 .column_2 {
941   -moz-column-count: 2;
942   -moz-column-gap: 20px;
943   -webkit-column-count: 2;
944   -webkit-column-gap: 20px;
945   column-count: 2;
946   column-gap: 20px;
947   
948 }
949
950 .column_3 {
951   -moz-column-count: 3;
952   -moz-column-gap: 20px;
953   -webkit-column-count: 3;
954   -webkit-column-gap: 20px;
955   column-count: 3;
956   column-gap: 20px;
957 }
958
959 .column_4{
960   -moz-column-count: 4;
961   -moz-column-gap: 20px;
962   -webkit-column-count: 4;
963   -webkit-column-gap: 20px;
964   column-count: 4;
965   column-gap: 20px;
966 }
967
968 /* == Debug Styles ======================================================== */
969
970 /*div {background: fuchsia;}*/
971
972 /* == Menu Styles ========================================================= */
973
974 #global-navigation li.selected {
975   background-color: #690;
976 }
977
978 .global-navigation-menu {
979   background: #fff;
980   border: 1px solid #888;
981   border-top: none;
982   width: 23em;
983   padding: 0;
984   display: none;
985   position: absolute;
986   z-index: 10;
987 }
988
989 .global-navigation-menu li {
990   display: block;
991   clear: both;
992   margin: 0;
993 }
994
995 .global-navigation-menu li a {
996   min-height: 56px;
997   display: block;
998   text-decoration: none;
999 }
1000
1001 .global-navigation-menu li:hover a {
1002   color: white;
1003 }
1004
1005 .global-navigation-menu li:hover {
1006   background: #690;
1007 }
1008
1009 .global-navigation-menu li img {
1010   float: left;
1011   width: 48px;
1012   height: 48px;
1013   margin: 4px;
1014   margin-right: 8px;
1015 }
1016
1017 .global-navigation-menu li span {
1018   font-weight: bold;
1019   padding-top: 4px;
1020   display: block;
1021 }
1022
1023 .global-navigation-menu li:hover span {
1024 }
1025
1026 .global-navigation-menu li span.desc {
1027   color: #000;
1028   font-size: 80%;
1029   font-weight: normal;
1030   padding-top: 2px;
1031   padding-bottom: 4px;
1032 }
1033
1034 .global-navigation-menu li:hover span.desc {
1035   color: #fff;
1036 }