Project

General

Profile

1 4082 daigle
/*
2 4080 daigle
  *   '$RCSfile$'
3
  *     Purpose: Default style sheet for KNB project web pages
4
  *              Using this stylesheet rather than placing styles directly in
5
  *              the KNB web documents allows us to globally change the
6
  *              formatting styles of the entire site in one easy place.
7
  *   Copyright: 2008 Regents of the University of California and the
8
  *               National Center for Ecological Analysis and Synthesis
9
  *     Authors: Michael Daigle
10
  *
11
  *    '$Author$'
12
  *      '$Date$'
13
  *  '$Revision$'
14
  *
15
  * This program is free software; you can redistribute it and/or modify
16
  * it under the terms of the GNU General Public License as published by
17
  * the Free Software Foundation; either version 2 of the License, or
18
  * (at your option) any later version.
19
  *
20
  * This program is distributed in the hope that it will be useful,
21
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
22
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
23
  * GNU General Public License for more details.
24
  *
25
  * You should have received a copy of the GNU General Public License
26
  * along with this program; if not, write to the Free Software
27
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
28
  */
29 8203 walker
30 8222 walker
/* Import the Metacat documentation stylesheet */
31
@import url(../docs/_static/metacatui.css);
32 8203 walker
33
/* THE BASICS
34
-------------------------------------------------- */
35
html{
36
	margin: 0;
37
	padding: 0;
38
	width: 100%;
39
	height: 100%;
40 4080 daigle
}
41 8203 walker
body{
42 8222 walker
	background: url(../docs/_static/bg.jpg) no-repeat center center fixed;
43
	background-size: cover;
44
     -webkit-background-size: cover;
45
	 -moz-background-size: cover;
46
	 -o-background-size: cover;
47
	 font: 400 1em/1.2em Source Sans Pro, Arial, sans-serif;
48 8203 walker
}
49 4080 daigle
50 8203 walker
h1{
51
	font: 400 3em/3em "Oswald", Arial, sans-serif;
52
	-webkit-margin-before: 0.2em;
53
	-webkit-margin-after: 0.2em;
54
	display: block;
55
	clear: both;
56
}
57
58 4080 daigle
h2 {
59 8203 walker
	font: 400 2.5em/2.5em "Oswald", Arial, sans-serif;
60
	-webkit-margin-before: 0.2em;
61
	-webkit-margin-after: 0.2em;
62
	display: block;
63
	clear: both;
64 4080 daigle
}
65
66
h3 {
67 8203 walker
	font: 400 1.5em/1.5em "Oswald", Arial, sans-serif;
68
	-webkit-margin-before: 0.2em;
69
	-webkit-margin-after: 0.2em;
70
	display: block;
71
	clear: both;
72
	margin-top: 20px;
73 4080 daigle
}
74
75
input {
76
	padding-left: 4px;
77
	width: 400px;
78 8203 walker
	border: 1px solid #AAAAAA;
79
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
80
	background-color:#FFFFFF;
81
	color: #333333;
82
	border-radius: 5px;
83
	-moz-border-radius: 5px;
84
	-webkit-border-radius: 5px;
85 4080 daigle
}
86
87 8203 walker
select{
88
	border: 1px solid #AAAAAA;
89
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
90
	height: 2em;
91
}
92
93 4080 daigle
input[type="submit"] {
94
	width: 100px;
95
	margin-right: 5px;
96
	margin-top: 20px;
97 8203 walker
	cursor: pointer;
98 4080 daigle
}
99
100
input[type="radio"] {
101
	margin-bottom: 4px;
102 8203 walker
	width: 15px;
103
	height: 15px;
104 8222 walker
	float: left;
105 4080 daigle
}
106
107 4082 daigle
input[type="checkbox"] {
108 8203 walker
	width: 15px;
109
	height: 15px;
110
	float: left;
111 4082 daigle
}
112
113 4080 daigle
label {
114 8203 walker
	font-size: 1.1em;
115
	line-height: 1.1em;
116
	display: block;
117
	margin-top: 10px;
118 4080 daigle
}
119
120
121 4100 daigle
122 8222 walker
/* NAVIGATION AND HEADER AND FOOTER
123 8203 walker
------------------------------------- */
124 8222 walker
.footer{
125
	width: 100%;
126
	padding: 20px 20px 0 0;
127
	bottom: 0;
128
}
129
130
.footer > p{
131
	font: 400 1em/1em Source Sans Pro, Arial;
132 8203 walker
	float: right;
133 8222 walker
	clear: both;
134
	display: block;
135
	text-transform: none;
136
	margin-right: 20px;
137 5010 daigle
}
138
139 8222 walker
.footer > ul{
140
	clear: both;
141
	float: right;
142
	margin-right: 20px;
143
}
144
145
.footer li {
146
	list-style: none;
147
	float: left;
148
	margin-left: 20px;
149
}
150
151
.footer li > a,
152
.header li > a{
153
	color: #FFFFFF;
154
	font: 400 2em/2em Oswald, Arial;
155 8203 walker
	text-transform: uppercase;
156 8222 walker
}
157
158
.footer li > a:hover,
159
.header li > a:hover{
160
	opacity: 0.6;
161 8203 walker
	text-decoration: none;
162 4080 daigle
}
163
164 8222 walker
.document{
165
	position: relative;
166
	margin-top: 20px;
167
	padding-bottom: 10px;
168
	min-height: 800px;
169 4080 daigle
}
170
171 8222 walker
.header{
172
	height: 100px;
173
	margin: 10px;
174
}
175
176 8203 walker
/* FORMS
177
----------------------------------------*/
178 8222 walker
.textinput,
179
input[type="password"] {
180 8203 walker
	vertical-align: middle;
181
	width: 30em;
182
	height: 2.2em;
183
	font: 400 1em/2em Source Sans Pro;
184
	border-radius: 5px;
185
	-moz-border-radius: 5px;
186
	-webkit-border-radius: 5px;
187
	border: 1px solid #aaa;
188 4080 daigle
}
189
190 8203 walker
.textinput-label {
191
	text-align: right;
192
	float: left;
193
	width: 200px;
194 8222 walker
	clear: left;
195 4080 daigle
}
196
197 8203 walker
.textinput-description {
198
	margin-left: 215px;
199 8222 walker
	color: #666666;
200 8203 walker
	font-size: 0.8em;
201
	margin-top: 5px;
202
	clear: both;
203 8231 walker
	height: 2em;
204 4080 daigle
}
205
206 8222 walker
.button, input[type="submit"], input[type="button"] {
207 4080 daigle
	width: 100px;
208
	margin-right: 5px;
209
	margin-top: 20px;
210 8203 walker
	font: 400 1.2em/1.5em Oswald, Arial;
211
	cursor: pointer;
212 8222 walker
	height: 1.7em;
213 4080 daigle
}
214
215 8203 walker
216
.checkradio-label-inline {
217
 	display: inline;
218
	vertical-align: middle;
219 4080 daigle
}
220
221 8222 walker
.checkradio-label{
222
	margin: 0px 0px 0px 10px;
223
	float: left;
224
}
225 8203 walker
.checkradio-description {
226 8222 walker
	font: 400 .8em/.8em Source Sans Pro;
227
	color: #666666;
228
	clear: both;
229
	margin: 8px 0px 10px 38px;
230 4080 daigle
}
231
232 8222 walker
.icon-question-sign {
233
	color: #166194;
234
	font-size: 1.2em;
235
	cursor: pointer;
236 8203 walker
	margin-left: 10px;
237 8222 walker
	margin-top: 0.5em;
238 4080 daigle
}
239
240 8203 walker
.form-row {
241 8231 walker
	height: 2em;
242 8203 walker
	clear: both;
243 4080 daigle
}
244
245 8203 walker
.form-row input,
246
.form-row select,
247
.form-row span{
248
	float: left;
249 8222 walker
	margin-left: 1em;
250 8203 walker
}
251
252
/* OTHER
253
----------------------------------------*/
254
255
.clear{
256
	clear: both;
257
}
258
259 8222 walker
.admin-login > tbody > tr > td{
260
	padding: 0px 10px 0px 0px;
261 8203 walker
}
262
263 8222 walker
.admin-login > tbody > tr{
264
	padding: 0px;
265 8203 walker
}
266
267 8222 walker
.username-input, login-input {
268
	width: auto;
269
	margin-bottom: 0px;
270
}
271
272 8203 walker
.buttons-wrapper{
273
	clear:both;
274 8222 walker
	margin: auto;
275
	max-width: 350px;
276 8203 walker
}
277
.heading-comment {
278
	margin-bottom: 0px;
279
}
280
281
282 4080 daigle
.configured-tag {
283
	color: green;
284
	width: 115px;
285
	height: 30px;
286
}
287
288
.unconfigured-tag {
289
	color: red;
290
	width: 125px;
291
}
292
293
294
.skin-name {
295 4082 daigle
	font-size: 14pt;
296
	width: 300px;
297 4080 daigle
}
298
299
.smaller-text {
300 8203 walker
	font-size: 0.5em;
301 4082 daigle
	display: inline;
302 4080 daigle
}
303
304 8231 walker
.configuration-table{
305
	border-collapse: separate;
306
	border-spacing: 6px;
307
}
308
309 4080 daigle
.configure-link {
310 8231 walker
	background: rgba(255, 255, 255, 0.7);
311
	border-radius: 10px;
312
	-moz-border-radius: 10px;
313
	-webkit-border-radius: 10px;
314
	color: #333333;
315 4258 daigle
}
316
317 8231 walker
.configure-link.inactive{
318
	background: none;
319
}
320
321
.configure-link.inactive:hover{
322
	background: none;
323
	cursor: default;
324
	color: #333333;
325
}
326
327
.configure-link > i,
328
.configure-link > a{
329
	color: inherit;
330
	vertical-align: middle;
331
}
332
333
.configure-link:hover,
334
.configure-link:hover > a,
335
.configure-link:hover > i{
336
	background: rgba(255, 255, 255, 1);
337
	color: #166194;
338
	text-decoration: none;
339
	cursor: pointer;
340
}
341
342 4258 daigle
.hiding-section {
343
	display: none;
344
	width: 100%;
345
	margin-left: 2em;
346
}
347
348 8222 walker
frame[name="bottom"] table
349
{
350
	border-collapse: collapse;
351
	border: 1px solid #333;
352
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
353
}
354 4258 daigle
355 8222 walker
frame[name="bottom"] table > tbody > td
356
{
357
	padding: 5px;
358
}
359
360
i{
361
	margin-right: 10px;
362
}
363