replace gif with png
[opensuse:gamestore.git] / web / css / style.css
1 /*
2  * Title: openSUSE.org stylesheet
3  * Author: Robert Lihm <rlihm@suse.de>
4  * Date: 2009-11-04
5  */
6
7 /* 
8
9 html
10   |-body
11     |
12     |- header
13       |
14       |- #global-navigation
15       |
16     |- display
17     |- content
18     | |
19     | |- ...
20     | |
21     |- footer
22     |
23
24 ## Colours ##
25
26 Blue 1: #069 [e.g.: Link]
27 Blue 2: #39c [e.g.: Link hover]
28
29 Grey 1: #444 [e.g.: Global Font Colour]
30 Grey 2: #2e2e2e [e.g. Borders on dark BG => Global Searchform]
31 Grey 3: #666 [e.g.: Header Background]
32 Grey 4: #999 [e.g. Font-Colour in unselected <input type="text"/>]
33 Grey 5: #f6f6f6 [e.g. Body BAckground]
34
35
36
37 */
38
39
40 /* == include 960 Grid CSS Framework ====================================== */
41 @import url("960.css") all;
42 @import url("reset.css") all;
43
44
45 /* == Basic Element Settings ============================================== */
46 html,
47 body {
48   background: #f6f6f6;
49   color: #444444;
50   font: 16px "Lucida Grande", "Trebuchet MS", Arial, Verdana, sans-serif;
51   height: 99%%;
52   margin: 0;
53   padding: 0;
54   width: 100%;
55 }
56
57 body > div {
58   margin-bottom: 15px;
59 }
60
61 h1 {font-size: 1.5em;}
62 h2 {font-size: 1.3em;}
63 h3 {font-size: 1.2em;}
64 h4, h5, h6 {font-size: 1.1em;}
65
66 a {color: #069;}
67 a:hover {color: #39c; text-decoration: underline;}
68
69 p, ul, ol {margin: 1em 0;}
70
71 p {line-height: 150%;}
72
73 ul, ol {
74   list-style: disc inside;
75   padding: 0 1em;
76 }
77 ul li , ol li {margin: 0.2em 0;}
78 ul ul , ol ul, ul ol , ol ol {margin-top: 0em; margin-bottom: 0em;}
79
80 ol {list-style-type: decimal;}
81
82 input,
83 textarea {
84   border: 1px solid #666;
85   padding: 2px 3px;
86 }
87
88
89
90 /* == 960 Extension ======================================================= */
91
92 .ui-oo-content-wrapper .ui-oo-box-shadow > div.grid_5 {
93   width: 260px;
94 }
95
96 /* == Basic UI Settings =================================================== */
97
98 #header,
99 #display,
100 #content,
101 #footer {
102   
103 }
104
105 #header {
106   background: #666 url('images/gradient-dark-nav.png') repeat-x scroll bottom left;
107   font-size: 0.8em;
108   font-weight: bold;
109   margin: 0 0 25px;
110   border-bottom: 1px solid #333;
111 }
112 #header,
113 #header ul#global-navigation li {
114   height: 30px;
115 }
116
117   #header-content {
118     
119   }
120   #header ul#global-navigation{
121     list-style: none inside;
122     width: 700px;
123     float: left;
124   }
125   #header ul#global-navigation,
126   #header ul#global-navigation li {
127     border-color: #4e4e4e;
128     border-style: solid;
129     margin: 0;
130   }
131     #header ul#global-navigation li:first-child {
132       border-left-width: 1px;
133     }
134     #header ul#global-navigation li {
135       float: left;
136       border-right-width: 1px;
137     }
138       #header ul#global-navigation li a {
139         color: #fefefe;
140         display: block;
141         height: 100%;
142         margin: 0 15px;
143         padding-top: 7px;
144         text-decoration: none;
145         width: 100%;
146       }
147       #header ul#global-navigation li a:hover {
148         
149       }
150   #header li#global-favorites {
151     float: right !important;
152     border-left-width: 1px;
153   }
154   #header a#header-logo {
155     float: left;
156     margin-top: 1px;
157     margin-right: 25px;
158   }
159   #header #global-search-form {
160     float: right;
161     margin-top: 4px;
162   }
163   #header #global-search-form input {
164     -moz-border-radius: 5px;
165     -webkit-border-radius: 5px;
166     -khtml-border-radius: 5px;
167     border-radius: 5px;
168     
169     border: 1px solid #2e2e2e;
170     color: #330;
171   }
172 #subheader {
173   font-size: 0.8em;
174   margin-top: -15px;
175 }
176 #breadcrump {
177   font-size: 0.9em;
178   color: #333;
179 }
180   #breadcrump img {
181     float: left;
182     margin-right: 5px;
183     border-bottom: 1px solid transparent;
184   }
185   #breadcrump a {
186     text-decoration: none;
187     color: #666;
188   }
189   #breadcrump a:hover {
190     text-decoration: underline;
191   }
192 #content > div,
193 #subheader,
194 #display,
195 #content {
196   overflow: hidden;
197   margin-bottom: 15px;
198 }
199 #display-content {
200   height: 450px;
201 }
202 #footer-content,
203 #footer-legal {
204   color: #666;
205   font-size: 0.8em;
206 }
207 #footer {
208   padding: 42px 0 100px;
209   font-size: 0.9em;
210   overflow: hidden;
211 }
212   #footer-legal {
213     border-top: 1px dotted #999;
214     color: #999;
215     font-size: 0.7em;
216     margin-top: 25px;
217     padding-top: 5px;
218     text-align: center;
219   }
220  
221 /* INFO: #ui-oo-* and .ui-oo-* are Interface related styles for openSUSE.org */
222
223 .ui-oo-content-wrapper {
224   font-size: 0.8em;
225 }
226   .ui-oo-content-wrapper .ui-oo-box-shadow.navigation > * {
227     margin: 0.5em 15px;
228   }
229   .ui-oo-content-wrapper .ui-oo-box-shadow > * {
230     margin: 0.5em 15px;
231   }
232     .ui-oo-content-wrapper .ui-oo-box-shadow > * > :first-child {margin-top: 0;}
233     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h1 {margin-top: 2em; margin-bottom: 0.7em;}
234     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h2 {margin-top: 1.8em; margin-bottom: 0.7em;}
235     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h3 {margin-top: 1.5em; margin-bottom: 0.7em;}
236     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h4 {margin-top: 1em; margin-bottom: 0.5em;}
237     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h5 {margin-top: 1em; margin-bottom: 0.5em;}
238     .ui-oo-content-wrapper .ui-oo-box-shadow > * > h6 {margin-top: 1em; margin-bottom: 0.5em;}
239
240 .ui-oo-box-shadow {
241   border-color: #ddd #ccc #bbb;
242   border-style: solid;
243   border-width: 1px;
244   
245   border-radius: 5px;
246   -moz-border-radius: 5px;
247   -webkit-border-radius: 5px;
248   -khtml-border-radius: 5px;
249
250   box-shadow: 0 1px 3px #ccc;
251   -webkit-box-shadow: 0 1px 3px #ccc;
252   -moz-box-shadow: 0 1px 3px #ccc;
253   
254   background-color: #fefefe;
255
256   padding: 15px 0;
257 }
258   .ui-oo-box-shadow.alpha,
259   .ui-oo-box-shadow.omega {
260     margin-bottom: 3px;
261   }
262   .ui-oo-box-shadow.alpha {
263     margin-left: 3px;
264   }
265
266   div.navigation {
267     padding-top: 0;
268   }
269   ul.navigation {
270     list-style: none inside;
271     padding-left: 0;
272     width: 85%;
273   }
274     ul.navigation li {
275     }
276     ul.navigation a {
277       color: #666;
278       text-decoration: none;
279       
280       display: block;
281     }
282     ul.navigation a:hover {
283       text-decoration: underline;
284       background: transparent url('images/right_btn.png') no-repeat scroll bottom right;
285       
286     }
287   div.navigation h1 {
288     font-size: 1.2em;
289     color: #069;
290   }
291   
292   div.col_2 {
293     width: 50%;
294   }
295 /* == Customisation ======================================================= */
296
297 /* -- Form Settings ------------------------------------------------------- */
298
299
300 /* == Helper Styles ======================================================= */
301
302 .ui-oo-border-top {
303   border-top: 1px dotted #999;
304 }
305
306 .hidden {
307   display: none;
308 }
309
310 .clear-left {
311   clear: left;
312 }
313 .clear-both {
314   clear: left;
315 }
316 .clear-right {
317   clear: left;
318 }
319
320
321 /* == Mockup Styles ======================================================== */
322 /* This Styles are just for Mockups. They don't have full *-browser suppert! */
323
324 .column_2 {
325   -moz-column-count: 2;
326   -moz-column-gap: 20px;
327   -webkit-column-count: 2;
328   -webkit-column-gap: 20px;
329   column-count: 2;
330   column-gap: 20px;
331   
332 }
333
334 .column_3 {
335   -moz-column-count: 3;
336   -moz-column-gap: 20px;
337   -webkit-column-count: 3;
338   -webkit-column-gap: 20px;
339   column-count: 3;
340   column-gap: 20px;
341 }
342
343 .column_4{
344   -moz-column-count: 4;
345   -moz-column-gap: 20px;
346   -webkit-column-count: 4;
347   -webkit-column-gap: 20px;
348   column-count: 4;
349   column-gap: 20px;
350 }
351
352 /* == Debug Styles ======================================================== */
353
354 .debug-design-note {
355   color: #ddd;
356   font-size: 9px;
357 }
358
359 a {
360 /*  color: #666;*/
361   /*text-decoration: none;*/
362 }