2aa1c13e8af8d6143086842396de9ac9b1b4a67e
[exim-website.git] / templates / web / common.css
1 /* Reset CSS */
2 html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
3   margin: 0;
4   padding: 0;
5   border: 0;
6   font-weight: inherit;
7   font-style: inherit;
8   font-size: 100%;
9   font-family: inherit;
10   vertical-align: baseline;
11 }
12
13 /* Fonts */
14
15   body {
16     font-size:          62.5%;
17     font-family:        Verdana, Arial, Helvetica, Sans-Serif;
18   }
19
20 /* Header Defaults */
21
22   h1, h2, h3, h4, h5, h6 { font-family:serif; line-height:1.7; font-weight: bold; }
23   h1 { font-size: 3.0em; text-align: center; }
24   h2 { font-size: 2.2em; text-align: center; }
25   h3 { font-size: 1.7em; }
26   h4 { font-size: 1.5em; }
27   h5 { font-size: 1.3em; }
28   h6 { font-size: 1.1em; }
29
30 /* Shrink header sizes on thin windows (phones?) */
31   @media all and ( max-width:640px ){
32     h1 { font-size: 2.4em; }
33     h2 { font-size: 1.4em; }
34     h3 { font-size: 1.25em;  }
35     h4 { font-size: 1.2em; }
36     h5 { font-size: 1.15em;  }
37     h6 { font-size: 1.1em; }
38   }
39
40 /* Anchor Defaults */
41
42   a   { color: #037094; }
43   a:visited { color: #335024; }
44   a:hover, a:visited:hover { color: #000; }
45
46 /* Some more Defaults */
47
48   html, body {
49     height:       100%;
50     background-color:   #fff;
51   }
52   .hidden {
53     display:      none;
54   }
55   #inner ul, #inner ol {
56     padding:      0 0 1em 4em;
57   }
58   #inner p, #inner pre {
59     margin-bottom: 1em;
60   }
61   #inner pre {
62     font-family:      monospace;
63           white-space:                    pre-wrap;       /* css-3 */
64           white-space:                    -moz-pre-wrap;  /* Mozilla, since 1999 */
65           white-space:                    -pre-wrap;      /* Opera 4-6 */
66           white-space:                    -o-pre-wrap;    /* Opera 7 */
67           word-wrap:                      break-word;     /* Internet Explorer 5.5+ */
68   }
69   #content {
70     padding: 0 1em;
71   }
72   @media all and ( max-width:640px ){ #content { padding:0; } }
73
74 /* Main Header */
75
76   #header {
77     position:     absolute;
78     top:        0;
79     left:       0;
80     height:       2em; /* 60px */
81     width:        100%;
82     line-height:      2;   /* 60px */
83     background-color:   #000;
84     z-index:      1000;
85
86     background-color:   #1f3c5a; /* For browsers without gradient support */
87     filter:       progid:DXImageTransform.Microsoft.gradient(startColorstr='#032044', endColorstr='#1f3c5a'); /* IE */
88     background:     -webkit-gradient(linear,left top,left bottom,from(#032044),to(#1f3c5a)); /* Webkit */
89     background:     -moz-linear-gradient(top, #032044, #1f3c5a); /* Firefox >= 3.6 */
90   }
91   @media all and ( max-width:640px ){
92     #header {
93       height:     2.5em; /* 60px */
94       line-height:    2.5;   /* 60px */
95     }
96   }
97
98   body > #header.fixed {
99     position:     fixed;
100   }
101
102   #header a {
103     color:        #fff;
104     white-space:      nowrap;
105   }
106
107   #header a:hover {
108     color:        #aaf;
109   }
110
111   #header, .nav {
112     opacity:      0.925;
113   }
114
115 /* Outer Container (Positionining) */
116
117   #outer {
118     position:     absolute;
119     top:        0;
120     left:       0;
121     width:        100%;
122     min-height:     100%;
123     height:       auto !important;
124     height:       100%;
125     background-color:   #fff;
126   }
127
128 /* Grey Side Bars */
129
130   #outer .left_bar, #outer .right_bar {
131     display:      none;
132   }
133
134   #outer > .left_bar.display, #outer > .right_bar.display {
135     display:      block;
136     position:     absolute;
137     top:        0;
138     width:        10%;
139     height:       100%;
140     background-color:   #ddd;
141   }
142   #outer > .left_bar  { left: 0; }
143   #outer > .right_bar { right:  0; }
144
145   @media all and ( max-width:640px ){
146     #outer > .left_bar.display, #outer > .right_bar.display { display: none; }
147   }
148
149 /* Navigation */
150
151   .nav {
152     position:       relative;
153     top:            0;
154     left:           0;
155     margin-top:     6em;
156     padding:      0 0 0.5em 0;
157     width:        100%;
158     text-align:     center;
159     list-style:     none;
160     background-color:   #1f3c5a;
161     z-index:      1000;
162   }
163
164   .nav li {
165     display:      inline;
166     font-size:      1.2em;
167     padding:      0 0.3em;
168   }
169
170   .nav li a         { color: #fff; }
171   .nav li a:hover   { color: #aaf; }
172   .nav li a:visited { color: #aaf; }
173   .nav li a:visited:hover { color: #fff; } 
174
175   .nav li.img { padding-top: 0.1em; position:relative;top:0.3em;}
176
177   #outer > #nav_float {
178     position:     fixed;
179     top:        0;
180     left:       0;
181     width:      100%;
182     display:    none;
183     margin-top: 0;
184   }
185
186 /* Search Field */
187   .nav li.search, .nav form {
188     display:          inline;
189     padding-top:      4px;
190   }
191   .nav .search_field_container.roundit .search_field {
192     border:       0;
193     padding:      0;
194     margin:       0;
195   }
196   .nav .search_field_container.roundit {
197     background-color:   #fff;
198     -moz-border-radius:   1em;
199     -webkit-border-radius:    1em;
200     padding:      0.1em 1em;
201     font-size:      1.2em;
202   }
203   .nav .search_field_container {
204     cursor:       text;
205   }
206
207 /* Main content */
208
209   #inner {
210     z-index:      1000;
211     width:        80%;
212     min-width:      50%;
213     max-width:      65em;
214     padding:      0.71429em 0 1.42857em 0;
215     margin:       0 auto;
216     font-size:      1.4em; /* 14px */
217     line-height:    2;     /* 28px */
218     background-color:   #fff;
219   }
220   /* Remove side padding on thin windows (phones?) */
221     @media all and ( max-width:640px ){
222       #inner { width: auto; }
223     }
224
225 /* Branding */
226   #branding {
227     display:      block;
228     visibility:     hidden;
229     width:        80%;
230     margin:       -1.42857em auto 1.42857em auto;
231     overflow:     hidden;
232     border:       0;
233     outline:      0;
234   }
235
236 /* Footer */
237   #footer {
238     position:     absolute;
239     bottom:       0;
240     left:       0;
241     height:       1.4em;  /* 14px */
242     width:        100%;
243     z-index:      1000;
244     line-height:      1.4;    /* 14px */
245     text-align:     center;
246     text-align:     center;
247   }
248
249   #footer, #footer a {
250     color:        #999;
251   }
252
253   #footer:hover, #footer:hover a { color: #444; }
254   #footer a:hover { color: #000; }
255
256 /* Some docbook elements */
257
258   .docbook_filename, .docbook_emphasis, .docbook_function {
259     font-style:        italic;
260   }
261   .docbook_option, .docbook_command {
262     font-weight:      bold;
263   }
264   .docbook_literal {
265     font-family:      monospace;
266   }
267   .docbook_literallayout {
268     background-color:   #e8e8d0;
269   }
270   .docbook_literallayout pre {
271     padding:      1em;
272     margin-bottom:      1em;
273   }