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