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 8627 walker
	 font-weight: 400;
48
	 font-size: 1em;
49
	 line-height: 1.2em;
50
	 font-family: "Helvetica", "Source Sans Pro", sans-serif;
51
	 overflow-x: hidden;
52 8203 walker
}
53 4080 daigle
54 8203 walker
55 4080 daigle
56 8627 walker
	h3 {
57
		font-size: 1.2em;
58
		line-height: 2em;
59
		display: block;
60
		clear: both;
61
		margin: 0px;
62
	}
63
64
	h2{
65
		font-size: 2em;
66
		line-height: 2.1em;
67
		font-weight: 400;
68
		display: block;
69
		clear: both;
70
		margin: 0px;
71
	}
72
73
	h1{
74
		font-size: 2.5em;
75
		line-height: 2.8em;
76
		display: inline-block;
77
		clear: both;
78
		margin: 0px;
79
	}
80
81
	h1 > a,
82
	h2 > a,
83
	h3 > a,
84
	h4 > a{
85
		color: #333333;
86
	}
87
88 4080 daigle
input {
89
	padding-left: 4px;
90
	width: 400px;
91 8203 walker
	border: 1px solid #AAAAAA;
92
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
93
	background-color:#FFFFFF;
94
	color: #333333;
95
	border-radius: 5px;
96
	-moz-border-radius: 5px;
97
	-webkit-border-radius: 5px;
98 4080 daigle
}
99
100 8203 walker
select{
101
	border: 1px solid #AAAAAA;
102
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
103
	height: 2em;
104
}
105
106 8627 walker
input[type="submit"],
107
input[type="button"] {
108
	min-width: 100px;
109 4080 daigle
	margin-right: 5px;
110
	margin-top: 20px;
111 8203 walker
	cursor: pointer;
112 8627 walker
	background-color: #555;
113
	color: #FFF;
114 4080 daigle
}
115
116
input[type="radio"] {
117
	margin-bottom: 4px;
118 8203 walker
	width: 15px;
119
	height: 15px;
120 8222 walker
	float: left;
121 8245 walker
	-webkit-appearance: radio;
122 4080 daigle
}
123
124 4082 daigle
input[type="checkbox"] {
125 8203 walker
	width: 15px;
126
	height: 15px;
127
	float: left;
128 8245 walker
	-webkit-appearance: checkbox;
129
	margin-top: 1em;
130 4082 daigle
}
131
132 4080 daigle
label {
133 8203 walker
	font-size: 1.1em;
134
	line-height: 1.1em;
135
	display: block;
136
	margin-top: 10px;
137 4080 daigle
}
138
139 8240 walker
table{
140
	background: none;
141
}
142 4080 daigle
143 4100 daigle
144 8240 walker
145 8222 walker
/* NAVIGATION AND HEADER AND FOOTER
146 8203 walker
------------------------------------- */
147 8222 walker
.footer{
148
	width: 100%;
149
	padding: 20px 20px 0 0;
150
	bottom: 0;
151
}
152
153
.footer > p{
154
	font: 400 1em/1em Source Sans Pro, Arial;
155 8203 walker
	float: right;
156 8222 walker
	clear: both;
157
	display: block;
158
	text-transform: none;
159
	margin-right: 20px;
160 5010 daigle
}
161
162 8222 walker
.footer > ul{
163
	clear: both;
164
	float: right;
165
	margin-right: 20px;
166
}
167
168
.footer li {
169
	list-style: none;
170
	float: left;
171
	margin-left: 20px;
172
}
173
174
.footer li > a,
175
.header li > a{
176
	color: #FFFFFF;
177 8627 walker
	font: 400 1.5em/1.5em Oswald, Arial;
178 8203 walker
	text-transform: uppercase;
179 8222 walker
}
180
181
.footer li > a:hover,
182
.header li > a:hover{
183
	opacity: 0.6;
184 8203 walker
	text-decoration: none;
185 4080 daigle
}
186
187 8222 walker
.header{
188
	height: 100px;
189
	margin: 10px;
190
}
191
192 8203 walker
/* FORMS
193
----------------------------------------*/
194 8222 walker
.textinput,
195 8245 walker
input[type="password"],
196
input[type="text"] {
197 8203 walker
	vertical-align: middle;
198
	width: 30em;
199
	height: 2.2em;
200
	font: 400 1em/2em Source Sans Pro;
201
	border-radius: 5px;
202
	-moz-border-radius: 5px;
203
	-webkit-border-radius: 5px;
204
	border: 1px solid #aaa;
205 4080 daigle
}
206
207 8203 walker
.textinput-label {
208
	text-align: right;
209
	float: left;
210
	width: 200px;
211 8222 walker
	clear: left;
212 4080 daigle
}
213
214 8203 walker
.textinput-description {
215
	margin-left: 215px;
216 8222 walker
	color: #666666;
217 8203 walker
	font-size: 0.8em;
218
	clear: both;
219 8240 walker
	min-height: 2em;
220 8245 walker
	max-width: 500px;
221
	position: relative;
222
	top: -5px;
223 4080 daigle
}
224
225
226 8203 walker
227
.checkradio-label-inline {
228
 	display: inline;
229
	vertical-align: middle;
230 4080 daigle
}
231
232 8222 walker
.checkradio-label{
233 8245 walker
	margin: 0.7em 0px 0px 10px;
234 8222 walker
	float: left;
235
}
236 8203 walker
.checkradio-description {
237 8222 walker
	font: 400 .8em/.8em Source Sans Pro;
238
	color: #666666;
239
	clear: both;
240
	margin: 8px 0px 10px 38px;
241 4080 daigle
}
242
243 8245 walker
.radiowrapper{
244
	padding-top: 10px;
245
}
246 8222 walker
.icon-question-sign {
247
	color: #166194;
248
	font-size: 1.2em;
249
	cursor: pointer;
250 8203 walker
	margin-left: 10px;
251 8222 walker
	margin-top: 0.5em;
252 8245 walker
	display: inline-block;
253 4080 daigle
}
254
255 8531 tao
.icon-plus-sign {
256
    color: #166194;
257
    font-size: 1.2em;
258
    cursor: pointer;
259
    margin-left: 10px;
260
    margin-top: 0.5em;
261
    display: inline-block;
262
}
263
264
.icon-minus-sign {
265
    color: #166194;
266
    font-size: 1.2em;
267
    cursor: pointer;
268
    margin-left: 10px;
269
    margin-top: 0.5em;
270
    display: inline-block;
271
}
272
273 8245 walker
.checkbox-help{			/*For question mark icons next to checkboxes (need different vertical positioning) */
274
	margin-top: 0.7em;
275
}
276
277 8203 walker
.form-row {
278 8231 walker
	height: 2em;
279 8203 walker
	clear: both;
280 4080 daigle
}
281
282 8203 walker
.form-row input,
283
.form-row select,
284
.form-row span{
285
	float: left;
286 8222 walker
	margin-left: 1em;
287 8245 walker
	margin-bottom: 10px;
288 8203 walker
}
289
290
/* OTHER
291
----------------------------------------*/
292
293
.clear{
294
	clear: both;
295
}
296
297 8222 walker
.admin-login > tbody > tr > td{
298
	padding: 0px 10px 0px 0px;
299 8203 walker
}
300
301 8222 walker
.admin-login > tbody > tr{
302
	padding: 0px;
303 8203 walker
}
304
305 8222 walker
.username-input, login-input {
306
	width: auto;
307
	margin-bottom: 0px;
308
}
309
310 8203 walker
.buttons-wrapper{
311
	clear:both;
312 8222 walker
	margin: auto;
313
	max-width: 350px;
314 8203 walker
}
315
.heading-comment {
316
	margin-bottom: 0px;
317
}
318
319
320 4080 daigle
.configured-tag {
321
	color: green;
322
	width: 115px;
323
	height: 30px;
324
}
325
326
.unconfigured-tag {
327
	color: red;
328
	width: 125px;
329
}
330
331
332
.skin-name {
333 4082 daigle
	font-size: 14pt;
334
	width: 300px;
335 4080 daigle
}
336
337
.smaller-text {
338 8203 walker
	font-size: 0.5em;
339 4082 daigle
	display: inline;
340 4080 daigle
}
341
342 8231 walker
.configuration-table{
343
	border-collapse: separate;
344
	border-spacing: 6px;
345 8240 walker
	background: none;
346 8231 walker
}
347
348 8627 walker
.configure-link a{
349 8231 walker
	background: rgba(255, 255, 255, 0.7);
350
	border-radius: 10px;
351
	-moz-border-radius: 10px;
352
	-webkit-border-radius: 10px;
353
	color: #333333;
354 8627 walker
	width: 207px;
355
	display: block;
356
	text-align: center;
357
	padding-top: 5px;
358
	padding-bottom: 5px;
359 4258 daigle
}
360
361 8231 walker
362
.configure-link > i,
363
.configure-link > a{
364
	color: inherit;
365
	vertical-align: middle;
366
}
367
368 4258 daigle
.hiding-section {
369
	display: none;
370
	width: 100%;
371
	margin-left: 2em;
372
}
373
374 8531 tao
.h3-label {
375
    text-align: left;
376
    font: 400 1.5em/1.5em "Oswald", Arial, sans-serif;
377
    -webkit-margin-before: 0.2em;
378
    -webkit-margin-after: 0.2em;
379
    display: inline-block;
380
    margin-top: 20px;
381
}
382
383 8222 walker
frame[name="bottom"] table
384
{
385
	border-collapse: collapse;
386
	border: 1px solid #333;
387
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
388
}
389 4258 daigle
390 8222 walker
frame[name="bottom"] table > tbody > td
391
{
392
	padding: 5px;
393
}
394
395
i{
396
	margin-right: 10px;
397
}
398