added silk-icon set
[opensuse:webdesign.git] / design_concept / theme_o.o-bento / css / base.css
1 /*
2  * Title: openSUSE.org stylesheet
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 {
151   margin-bottom: 15px;
152 }
153
154 h1 {font-size: 1.5em; margin-bottom: 1.2em;}
155 h2 {font-size: 1.3em; margin-bottom: 1.1em;}
156 h3 {font-size: 1.2em; margin-bottom: 1.0em;}
157 h4, h5, h6 {font-size: 1.1em; margin-bottom: 0.9em;}
158
159 a {color: #690; text-decoration: none;}
160 a:hover {color: #39c; text-decoration: underline;}
161
162 p, ul, ol {margin: 1em 0;}
163
164 h1, h2, h3, h4, h5, h6, p, ul, ol, table {
165   margin-left: 15px;
166   margin-right: 15px;
167 }
168 h1, h2, h3, h4, h5, h6 {margin-top: 0.5em;}
169
170 p {line-height: 150%;}
171
172 ul, ol {
173   list-style: disc inside;
174   padding: 0 1em;
175 }
176 ul li , ol li {margin: 0.2em 0;}
177 ul ul , ol ul, ul ol , ol ol {margin-top: 0em; margin-bottom: 0em;}
178
179 ol {list-style-type: decimal;}
180
181 input,
182 textarea {
183   border: 1px solid #666;
184   padding: 2px 3px;
185 }
186
187 img {
188  border: 0; 
189 }
190
191 /* == 960 Extension ======================================================= */
192 .ui-oo-content-wrapper .ui-oo-box-shadow > div.grid_5, /* old way - dont use this */
193 .content-wrapper .box > div.grid_5 {
194   width: 260px;
195 }
196
197 /* Row System  ============================================================ */
198
199 /* 2010-03-26: not well testet 
200         Does not work correktly in columns because of margin/pedding.
201 */
202
203 .row_auto {
204         height: auto;
205 }
206
207 .row_1 {min-height: 2em;}
208
209 /* ... */
210
211 .row_10 {min-height: 20em;} /* ninimum box height */
212 .row_11 {min-height: 22em;}
213 .row_12 {min-height: 24em;}
214 .row_13 {min-height: 26em;}
215 .row_14 {min-height: 28em;}
216 .row_15 {min-height: 30em;}
217 .row_16 {min-height: 32em;}
218 .row_17 {min-height: 34em;}
219 .row_18 {min-height: 36em;}
220 .row_19 {min-height: 38em;}
221 .row_20 {min-height: 40em;}
222 .row_21 {min-height: 42em;}
223 .row_22 {min-height: 44em;}
224 .row_23 {min-height: 46em;}
225 .row_24 {min-height: 48em;}
226 .row_25 {min-height: 50em;}
227 .row_26 {min-height: 52em;}
228 .row_27 {min-height: 54em;}
229 .row_28 {min-height: 56em;}
230 .row_29 {min-height: 58em;}
231 .row_30 {min-height: 60em;}
232
233 /* == Basic UI Settings =================================================== */
234
235 #header,
236 #subheader,
237 #display,
238 #flash-messages,
239 #content,
240 #footer {
241   
242 }
243 #subheader, #flash-messages, #footer {overflow: hidden;}
244
245 #content > div,
246 #subheader,
247 #display > div,
248 #content,
249 #content .column > div,
250 .ui-oo-box-shadow,
251 .box {
252   margin-bottom: 15px;
253 }
254
255 #header {
256   background: #666 url('images/gradient-dark-nav.png') repeat-x scroll bottom left;
257   font-size: 0.8em;
258   font-weight: bold;
259   margin: 0 0 25px;
260   border-bottom: 1px solid #333;
261 }
262 #header, #header ul#global-navigation li {height: 30px;}
263
264   #header-content {}
265
266   #header ul#global-navigation{
267     list-style: none inside;
268     width: 700px;
269     float: left;
270   }
271   #header ul#global-navigation,
272   #header ul#global-navigation li {
273     border-color: #4e4e4e;
274     border-style: solid;
275     margin: 0;
276   }
277     #header ul#global-navigation li:first-child {
278       border-left-width: 1px;
279     }
280     #header ul#global-navigation li {
281       float: left;
282       border-right-width: 1px;
283     }
284       #header ul#global-navigation li a {
285         color: #fefefe;
286         display: block;
287         height: 100%;
288         margin: 0 15px;
289         padding-top: 7px;
290         text-decoration: none;
291         width: 100%;
292       }
293       #header ul#global-navigation li a:hover {
294         
295       }
296   #header li#global-favorites {
297     float: right !important;
298     border-left-width: 1px;
299   }
300   #header a#header-logo {
301     float: left;
302     margin-top: 1px;
303     margin-right: 25px;
304   }
305   #header #global-search-form {
306     float: right;
307     margin-top: 4px;
308   }
309   #header #global-search-form input {
310     -moz-border-radius: 5px;
311     -webkit-border-radius: 5px;
312     -khtml-border-radius: 5px;
313     border-radius: 5px;
314     
315     border: 1px solid #2e2e2e;
316     color: #999;
317     width: 150px;
318   }
319     #header #global-search-form input:focus {
320       color: #330;
321     }
322 #subheader {
323   font-size: 0.8em;
324   margin-top: -15px;
325 }
326
327 #subheader a {
328         text-decoration: none;
329 }
330
331 #breadcrump {
332   font-size: 0.9em;
333   color: #333;
334 }
335   #breadcrump img {
336     float: left;
337     margin-right: 5px;
338     border-bottom: 1px solid transparent;
339   }
340   #breadcrump a {
341     color: #666;
342   }
343   #breadcrump a:hover {
344     text-decoration: underline;
345   }
346 #login-wrapper {
347   text-align: right;
348   height: 1em;
349   
350 /*  display: none;*/
351 }
352
353 /* == Login-Form ========================================================== */
354 #login-form {
355   display: none;
356   width: 250px;
357   height: auto;
358   font-size: 0.7em;
359   position: absolute;
360   top: 31px;
361   right: 0;
362   padding-bottom: 10px;
363   color: #f6f6f6;
364   background: #333 url('images/gradient-darker.png') repeat-x scroll bottom left;
365   -moz-border-radius-bottomleft: 5px;
366   -moz-border-radius-bottomright: 5px;
367   -webkit-border-bottom-left-radius: 3px;
368   -webkit-border-bottom-right-radius: 3px;
369   -khtml-border-bottom-left-radius: 5px;
370   -khtml-border-bottom-right-radius: 5px;
371   border-radius: 5px;
372   border-width: 1px;
373   border-style: solid;
374   border-color: transparent #333 #111;
375   opacity: 0.95;
376   -moz-opacity: 0.95;
377 /*  filter:alpha(opacity=90);*/ /* this could make trouble */
378   -webkit-box-shadow: 0 1px 3px #999;
379   -moz-box-shadow: 0 1px 3px #999;
380   box-shadow: 0 1px 3px #999;
381 }
382
383   #login-form input {
384     width: 213px;
385     font-size: 1.5em;
386     padding: 2px 3px;
387     border: 3px solid #222;
388     -moz-border-radius: 5px;
389     -webkit-border-radius: 5px; /* in webkit bowsers the background color appears around the rounded border */
390     -khtml-border-radius: 5px;
391     border-radius: 5px;
392   }
393     #login-form input:focus {
394       color: #39c;
395       border-color: #39c;
396       -webkit-box-shadow: 0 1px 3px #222;
397       -moz-box-shadow: 0 1px 3px #222;
398       box-shadow: 0 1px 3px #222;
399     }
400   #login-form input[type="submit"] {
401     border-color: #f6f6f6;
402     -webkit-box-shadow: 0 0px 2px #000;
403     -moz-box-shadow: 0 1px 1px #111;
404     box-shadow: 0 1px 1px #111;
405     color: #eee;
406     cursor: pointer;
407     background: #9f3 url('images/gradient-dark-nav.png') repeat-x scroll 0 -15px;
408     font-weight: bold;
409     text-shadow: 0 0px 3px #333;
410     width: 225px;
411   }
412       #login-form input[type="submit"]:hover {
413         border-color: #39c;
414       }
415   
416   #login-form p {
417     margin: 15px;
418     clear: left;
419     position: relative;
420   }
421   #login-form label {
422     display: block;
423     position: absolute;
424     top: 8px;
425     left: 7px;
426     color: #666;
427     width: 100px;
428     font-size: 13px;
429   }
430   #login-form .slim-footer {
431     text-align: center;
432     margin-bottom: 0;
433   }
434     #login-form .slim-footer a {
435       text-decoration: none;
436       color: #eee;
437       font-weight: bold;
438     }
439     #login-form .slim-footer a:hover {
440       text-decoration: underline;
441     }
442
443 /* == /Login-Form ========================================================= */
444
445 #local-user-actions { /*eg. Username, Preferences, etc.*/
446 /*  display: none;*/
447
448 }
449   #local-user-actions ul {
450     margin: 0;
451     list-style: none inside;
452   }
453
454 #flash-messages {
455
456 }
457 #flash-messages .ui-widget + .ui-widget{
458   margin-top: 15px;
459 }
460
461
462   #display-content {
463     height: 450px;
464   }
465   #display-content.ui-oo-box-shadow, /* old style - dont use it */
466         #display-content.box {
467     padding: 0;
468     overflow: hidden;
469   }
470 #footer-content,
471 #footer-legal {
472   color: #666;
473   font-size: 0.9em;
474 }
475 #footer {
476   padding: 42px 0 100px;
477   font-size: 0.7em;
478 }
479
480         #footer ul {
481                 margin: 0;
482                 padding: 0.5em;
483         }
484         
485   #footer-legal {
486     border-top: 1px dotted #999;
487     color: #999;
488     font-size: 0.7em;
489     margin-top: 25px;
490     padding-top: 5px;
491     text-align: center;
492   }
493  
494 /* INFO: #ui-oo-* and .ui-oo-* are Interface related styles for openSUSE.org */
495
496 .ui-oo-content-wrapper,
497 .content-wrapper {
498   font-size: 0.8em;
499 }
500   .ui-oo-content-wrapper .ui-oo-box-shadow.navigation > *,
501   .content-wrapper .box.navigation > * { /* box specified as navigation */
502     margin: 0.5em 15px 1em;
503   }
504     .ui-oo-content-wrapper .ui-oo-box-shadow > * > :first-child,/* old style - dont use it */
505     .content-wrapper .box > * > :first-child {margin-top: 0;}
506
507     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h1, /* old style - dont use it */
508                 .content-wrapper .box > * > h1 {margin-top: 2em; margin-bottom: 0.7em;}
509                 
510                 .ui-oo-content-wrapper .ui-oo-box-shadow > * > h2, /* old style - dont use it */
511                 .content-wrapper .box-shadow > * > h2 {margin-top: 1.8em; margin-bottom: 0.7em;}
512                 
513     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h3, /* old style - dont use it */
514     .content-wrapper .box > * > h3 {margin-top: 1.5em; margin-bottom: 0.7em;}
515
516     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h4, /* old style - dont use it */
517     .content-wrapper .box > * > h4 {margin-top: 1em; margin-bottom: 0.5em;}
518
519     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h5, /* old style - dont use it */
520     .content-wrapper .box > * > h5 {margin-top: 1em; margin-bottom: 0.5em;}
521     
522                 .ui-oo-content-wrapper .ui-oo-box-shadow > * > h6, /* old style - dont use it */
523                 .content-wrapper .box > * > h6 {margin-top: 1em; margin-bottom: 0.5em;}
524
525 .ui-oo-box-shadow, /* old style - dont use it */
526 .box {
527   border-width: 1px;
528   border-style: solid;
529   border-color: #ddd #ccc #bbb;
530   background-color: #fefefe;
531   padding: 15px 0;
532 }
533
534 .ui-oo-box-shadow a, /* old style - dont use it */
535 .box a {
536         color: #069;
537 }
538
539 .container_16  div div,
540 .container_12  div div {
541 /*  margin-bottom: 3px;*/
542 }
543
544   .container_16.sibling_p4 div:first-child  {
545     margin-left: 240px;
546   }
547
548   .ui-oo-box-shadow.alpha, /* old style - dont use it */
549   .ui-oo-box-shadow.omega, /* old style - dont use it */
550   .box.alpha,
551   .box.omega {
552     margin-bottom: 15px; /* TODO: Browser Test Needed; this may not work propperly */
553   }
554   div.navigation {
555     padding-top: 0;
556                 position: relative;
557   }
558   ul.navigation {
559     list-style: none inside;
560     padding-left: 0;
561     width: 85%;
562   }
563     ul.navigation li {
564     }
565     ul.navigation a {
566       color: #666;
567       text-decoration: none;
568       
569       display: block;
570     }
571     ul.navigation a:hover {
572       background: transparent url('images/right_btn.png') no-repeat scroll bottom right;
573       
574     }
575   div.navigation h1 {
576     font-size: 1.2em;
577     color: #069;
578   }
579   
580   div.col_2 {
581     width: 50%;
582   }
583   
584 /* -- UI - Helper --------------------------------------------------------- */
585 /* Meny of this classes use the jQuery UI class names. Documentation for the 
586  * can be found at http://jqueryui.com/docs/Theming/API
587  */
588
589 /* Layout Helpers */
590 .ui-helper-hidden { display: none; }
591 .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
592 .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
593 .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
594 .ui-helper-clearfix { display: inline-block; }
595 /* required comment for clearfix to work in Opera \*/
596 * html .ui-helper-clearfix { height:1%; }
597 .ui-helper-clearfix { display:block; }
598 /* end clearfix */
599 .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
600
601
602 /* Widget Containers */
603 .ui-widget {}
604 .ui-widget-header {}
605 .ui-widget-content {}
606  
607 /* Interaction States */
608 .ui-state-default {}
609 .ui-state-hover {}
610 .ui-state-focus {}
611 .ui-state-active {}
612
613 /* Interaction Cues */
614 .ui-state-highlight,
615 .ui-state-error {
616   padding: 0 0.7em;
617 }
618
619
620 .ui-state-highlight {
621   background-color: #fbf9ee;
622   border: 1px solid #fcefa1;
623   color: #333;
624 }
625 .ui-state-error {
626   background-color: #fef1ec;
627   border: 1px solid #c00;
628   color: #c00;
629 }
630 .ui-state-error-text {}
631 .ui-state-disabled { cursor: default !important; }
632 .ui-priority-primary {}
633 .ui-priority-secondary {}
634
635 .ui-corner-all {}
636
637 /* Corner Radius helpers */
638 .ui-corner-tl {}
639 .ui-corner-tr {}
640 .ui-corner-bl {}
641 .ui-corner-br {}
642 .ui-corner-top {}
643 .ui-corner-bottom {}
644 .ui-corner-right {}
645 .ui-corner-left {}
646
647 .box,
648 .ui-oo-box-shadow, /* old style */
649 .ui-corner-all {
650   border-radius: 5px;
651   -moz-border-radius: 5px;
652   -webkit-border-radius: 5px;
653   -khtml-border-radius: 5px;
654 }
655 .ui-corner-t,
656 .ui-corner-b {}
657
658
659 /* Overlay & Shadow */
660
661 .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
662 .ui-oo-box-shadow, /* old style - dont use it */
663 .ui-widget-shadow,
664 .box-shadow {
665   box-shadow: 0 1px 3px #ccc;
666   -webkit-box-shadow: 0 1px 3px #ccc;
667   -moz-box-shadow: 0 1px 3px #ccc;
668 }
669
670 .ui-oo-fold-icon, /* old style - dont use it */
671 .fold-icon {
672   display: block;
673   width: 9px;
674   height: 9px;
675   float: right;
676   background: transparent url('images/unfold-indikator.png') no-repeat scroll 0 0;
677 }
678
679 /* == Customisation ======================================================= */
680
681 /* -- Content Area Settings ----------------------------------------------- */
682
683 .box-header,
684 .box-subheader,
685 .box-footer {
686   background: #fff url('images/gradient-light-short.png') repeat-x scroll 0 -20px ;
687   padding: 3px 0;
688   margin-left: 0!important; /* like 960gs .aplha */
689   margin-right: 0!important; /* like 960gs .omega */
690   min-height: 15px;
691   width: 100%;
692 }
693
694 .box-header a,
695 .box-subheader a,
696 .box-footer a {
697         color: #690;
698 }
699
700 .box-header {
701   border-top-left-radius: 5px;
702   border-top-right-radius: 5px;
703   -moz-border-radius-topleft: 5px;
704   -moz-border-radius-topright: 5px;
705   -webkit-border-top-left-radius: 5px;
706   -webkit-border-top-right-radius: 5px;
707   -khtml-border-top-left-radius: 5px;
708   -khtml-border-top-right-radius: 5px;
709   
710   margin-top: -15px;
711   margin-bottom: 15px!important;
712   border-bottom: 1px solid #ddd;
713 }
714
715 h2.box-header,
716 h2.box-subheader {
717   text-indent: 15px;
718   font-size: 1em;
719 }
720 .navigation h2.box-header,
721 .navigation h2.box-subheader {
722   margin-top: 0!important;
723 }
724 .box-subheader {
725   border-top: 1px solid #ddd;
726   border-bottom: 1px solid #ddd;
727 }
728 .box-footer {
729   border-bottom-left-radius: 5px;
730   border-bottom-right-radius: 5px;
731   -moz-border-radius-bottomleft: 5px;
732   -moz-border-radius-bottomright: 5px;
733   -webkit-border-bottom-left-radius: 5px;
734   -webkit-border-bottom-right-radius: 5px;
735   -khtml-border-bottom-left-radius: 5px;
736   -khtml-border-bottom-right-radius: 5px;
737   
738   border-top: 1px solid #ddd;
739         position: absolute;
740         bottom: 0px;
741         left: 0;
742         margin-bottom: 0!important;
743 }
744
745 .navigation .box-footer {
746         position: relative;
747         margin-bottom: -15px!important;
748 }
749 .box-header ul,
750 .box-footer ul {
751   list-style: none inside;
752   padding: 0;
753   font-size: 0.8em;
754   margin: 0 0 0 15px;
755 }
756 .box-header ul li,
757 .box-footer ul li {
758   float: left;
759 }
760 .box-header a,
761 .box-footer a {
762   text-decoration: none;
763   margin-right: 7px;
764         text-shadow: 0 1px 1px #ccc;
765 }
766 .aside ul {
767   list-style: none inside;
768 }
769
770 p img {
771   padding: 0;
772   max-width: 100%;
773   }
774 img.centered {
775   display: block;
776   margin-left: auto;
777   margin-right: auto;
778   }
779 img.alignright,
780 img.alignleft {
781   padding: 4px;
782   display: inline;
783 }
784 img.alignright {margin: 0 0 2px 7px;}
785 img.alignleft {margin: 0 7px 2px 0;}
786 .alignright {float: right;}
787 .alignleft {float: left;}
788
789 table {
790 /*      width: 96.5%;*/
791         width: inherit;
792 }
793
794 /*tbody, tfoot, thead, tr {
795         width: 100%;
796 }
797
798 th, td {
799         width: auto;
800 }*/
801
802
803 th {background-color: #eee;}
804 th, td {padding: 0.2em;}
805 td {border: 1px dotted #ccc;}
806         th:first-child, td:first-child {border-left: none;}
807         th:last-child, td:last-child {border-right: none;}
808
809
810 /* -- Form Settings ------------------------------------------------------- */
811
812 /* == Landing Page ======================================================== */
813
814 #display #lp-pr-image {
815   margin-top: 42px;
816   margin-left: 150px;
817 }
818
819 #quicklinks-wrapper {
820   background-color: fuchsia;
821
822   background: #222 url('images/bg_display-sidebar.png') no-repeat scroll 0 0;
823
824   height: 450px;
825
826   -moz-border-radius-topright: 5px;
827   -moz-border-radius-bottomright: 5px;
828
829   -webkit-border-top-right-radius: 5px;
830   -webkit-border-bottom-right-radius: 5px;
831   
832   -khtml-border-top-right-radius: 5px;
833   -khtml-border-bottom-right-radius: 5px;
834   
835   border-top-right-radius: 5px;
836   border-bottom-right-radius: 5px;
837   
838 }
839
840 #display-content {
841 /*  background: #fefefe url('images/gradient-light.png') repeat-x scroll bottom left;*/
842   
843 }
844
845
846
847 /* Quicklinks OldStyles */
848
849
850 #quicklinks,
851 #quicklinks .headline,
852 #quicklinks .description {
853   
854 }
855
856 #quicklinks {
857   list-style: none inside;
858 }
859 #quicklinks li {
860   margin-bottom: 25px;
861 }
862 #quicklinks a {
863   text-decoration: none;
864   
865   cursor: pointer;
866   display: block;
867   height: 120px;
868 }
869 #quicklinks .top,
870 #quicklinks .content,
871 #quicklinks .bottom,
872 #quicklinks .headline,
873 #quicklinks .description {
874   display: block;
875 }
876
877 #quicklinks .top,
878 #quicklinks .content,
879 #quicklinks .bottom {
880 /*  background: transparent url('images/lp-quicklink-bg.png') no-repeat scroll 0 0;*/
881 }
882
883 #quicklinks .top,
884 #quicklinks .bottom {
885   height: 20px;
886 }
887
888 #quicklinks .top {
889   background-position: 0 0;
890 }
891 #quicklinks .content {
892   background-position: 0 -10px;
893   min-height: 100px;
894 }
895 #quicklinks .bottom {
896   background-position: 0 -130px;
897 }
898
899 #quicklinks .description {
900   margin-left: 100px;
901 }
902
903 #quicklinks a img {
904   opacity: 0.5;
905   -moz-opacity: 0.5;
906   filter:alpha(opacity=50);
907 }
908 #quicklinks a:hover img {
909   opacity: 1;
910   -moz-opacity: 1;
911   filter:alpha(opacity=1);
912 }
913 /*
914 #quicklinks a:hover .top { background-position: -456px 0; }
915 #quicklinks a:hover .content { background-position: -456px -10px; }
916 #quicklinks a:hover .bottom { background-position: -456px -130px; }
917 */
918
919 #quicklinks .headline {
920   font-weight: bold;
921   font-size: 1.2em;
922   margin-bottom: 0.5em;
923   text-shadow: #000 0px 1px 1px;
924 }
925 #quicklinks .headline,
926 #quicklinks .description {
927   margin-left: 30px;
928 }
929
930 #quicklinks a {
931   color: #ccc;
932   text-shadow: #000 0px 1px 1px;
933 }
934
935 #quicklinks a:hover {
936   color: #fff;
937   text-shadow: #000 0px 1px 3px;
938 }
939
940 #quicklinks .content img {
941   float: left;
942   margin: 10px 15px 25px 0;
943
944 /* /Quicklinks OldStyle*/
945
946 /* == Helper Styles ======================================================= */
947
948 .ui-oo-border-top {
949   border-top: 1px dotted #999;
950 }
951
952 .hidden {
953   display: none;
954 }
955
956 .clear-left {
957   clear: left;
958 }
959 .clear-both {
960   clear: left;
961 }
962 .clear-right {
963   clear: left;
964 }
965
966 .alignright {}
967 .alignleft {}
968
969 .no-shadow { /* TODO: Remove this; old style */
970   box-shadow: none;
971   -webkit-box-shadow: none;
972   -moz-box-shadow: none;
973 }
974
975
976 /* == Mockup Styles ======================================================== */
977 /* This Styles are just for Mockups. They don't have full *-browser support! */
978
979 .column_2 {
980   -moz-column-count: 2;
981   -moz-column-gap: 20px;
982   -webkit-column-count: 2;
983   -webkit-column-gap: 20px;
984   column-count: 2;
985   column-gap: 20px;
986   
987 }
988
989 .column_3 {
990   -moz-column-count: 3;
991   -moz-column-gap: 20px;
992   -webkit-column-count: 3;
993   -webkit-column-gap: 20px;
994   column-count: 3;
995   column-gap: 20px;
996 }
997
998 .column_4{
999   -moz-column-count: 4;
1000   -moz-column-gap: 20px;
1001   -webkit-column-count: 4;
1002   -webkit-column-gap: 20px;
1003   column-count: 4;
1004   column-gap: 20px;
1005 }
1006
1007 /* == Debug Styles ======================================================== */
1008
1009 /*div {background: fuchsia;}*/
1010
1011 /* == Menu Styles ========================================================= */
1012
1013 #global-navigation li.selected {
1014   background-color: #690;
1015 }
1016
1017 .global-navigation-menu {
1018   background: #fff;
1019   border: 1px solid #888;
1020   border-top: none;
1021   width: 20em;
1022   padding: 0;
1023   display: none;
1024   position: absolute;
1025   z-index: 10;
1026 }
1027
1028 .global-navigation-menu li {
1029   display: block;
1030   clear: both;
1031   margin: 0;
1032 }
1033
1034 .global-navigation-menu li a {
1035   height: 56px;
1036   display: block;
1037   text-decoration: none;
1038 }
1039
1040 .global-navigation-menu li:hover a {
1041   color: white;
1042 }
1043
1044 .global-navigation-menu li:hover {
1045   background: #690;
1046 }
1047
1048 .global-navigation-menu li img {
1049   float: left;
1050   width: 48px;
1051   height: 48px;
1052   margin: 4px;
1053   margin-right: 8px;
1054 }
1055
1056 .global-navigation-menu li div {
1057   font-weight: bold;
1058   font-size: 90%;
1059 }
1060
1061 .global-navigation-menu li:hover div {
1062 }
1063
1064 .global-navigation-menu li div.desc {
1065   color: #000;
1066   font-size: 75%;
1067   font-weight: normal;
1068 }
1069
1070 .global-navigation-menu li:hover div.desc {
1071   color: #fff;
1072 }