Merge branch 'patch/JAL-547_pid_groovyscript' into develop
[jalview.git] / examples / css / style.css
1 /**
2  * Jalview - A Sequence Alignment Editor and Viewer ($$Version-Rel$$)
3  * Copyright (C) $$Year-Rel$$ The Jalview Authors
4  * 
5  * This file is part of Jalview.
6  * 
7  * Jalview is free software: you can redistribute it and/or
8  * modify it under the terms of the GNU General Public License 
9  * as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
10  * 
11  * Jalview is distributed in the hope that it will be useful, but 
12  * WITHOUT ANY WARRANTY; without even the implied warranty 
13  * of MERCHANTABILITY or FITNESS FOR A PARTICULAR 
14  * PURPOSE.  See the GNU General Public License for more details.
15  * 
16  * You should have received a copy of the GNU General Public License along with Jalview.  If not, see <http://www.gnu.org/licenses/>.
17  * The Jalview Authors are detailed in the 'AUTHORS' file.
18  */
19 @import url(http://fonts.googleapis.com/css?family=Lato);
20 @import url(http://fonts.googleapis.com/css?family=Oswald);
21
22 /*****************
23 HTML 5 Elements
24 ******************/
25 new
26
27
28 article, aside, details, figcaption, figure, 
29 footer, header, hgroup, menu, nav, section 
30 {
31     display: block;
32 }
33
34
35 .clearfix:after
36  {
37     visibility: hidden;
38     display: block;
39     font-size: 0;
40     content: " ";
41     clear: both;
42     height: 0;
43 }
44
45
46 /****************
47 Body
48 ****************/
49
50 body
51
52 {
53   font: 76% arial,Helvetica,sans-serif;
54   text-align:left; 
55   background:#fff; 
56   color:#000;
57   border-top: 20px solid #555555;
58 }
59
60
61
62 /*********************
63 Page Wrapper
64 ********************/
65
66 #pageWrap 
67
68 {
69         width: 960px;
70         margin: 0 auto;
71         position:relative;
72 }
73
74 /**********************
75 HEADER
76 ************************/
77
78 #header 
79 {
80   display: block;
81   height: 180px;
82   margin: 0 auto 8px;
83   width: 960px;
84   position:relative;
85 }
86
87 #logo a 
88 {
89   background-image: url("../images/logo.jpg");
90   background-repeat: no-repeat;
91   height: 87px;
92   left: 0;
93   position: absolute;
94   top: 50px;
95   width: 361px;
96   margin-bottom:50px;
97 }
98
99 #buttons
100 {
101 height:88px;
102 width:252px;
103 float:right;
104  right: 0;
105   position: absolute;
106   top: 50px;
107 }
108
109 #buttons li
110 {
111 margin-bottom:10px;
112 }
113
114 #buttons #applet a
115 {
116   background-image: url("../images/applet.jpg");
117   background-repeat: no-repeat;
118     height:50px;
119   width:250px;
120   position: absolute;
121           opacity: 1;
122    transition: opacity .25s ease-in-out;
123    -moz-transition: opacity .25s ease-in-out;
124    -webkit-transition: opacity .25s ease-in-out;
125    text-shadow: 2px 2px 10px #000000;
126 }
127
128 #buttons #desktop a
129 {
130   background-image: url("../images/desk.jpg");
131   background-repeat: no-repeat;
132   height:50px;
133   width:250px;
134   position: absolute;
135   top:45px;
136           opacity: 1;
137    transition: opacity .25s ease-in-out;
138    -moz-transition: opacity .25s ease-in-out;
139    -webkit-transition: opacity .25s ease-in-out;
140    text-shadow: 2px 2px 10px #000000;
141 }
142
143 #buttons #applet a:hover
144 {
145  opacity: 0.8;
146 }
147
148 #buttons #desktop a:hover
149 {
150  opacity: 0.8;
151 }
152
153 /*****************************
154 NAV
155 *********************************/
156 #nav
157 {
158 width:100%;
159 max-width:100%;
160 color:#fff;
161 background:#555;
162 height:80px;
163 }
164
165 #navInner
166 {
167 width:960px;
168 margin:0 auto;
169 position:relative;
170 }
171
172
173 #sddm
174 {       margin: 0;
175         padding: 0;
176         z-index: 30;
177         position:relative;
178         top:27px;
179 }
180
181 #sddm li
182 {       margin: 0;
183         padding:0;
184         list-style: none;
185         float: left;
186 }
187
188 #sddm li a
189
190         color: #FFFFFF;
191     font-size: 13pt;
192     padding: 27px 15px 25px;
193     text-align: center;
194     text-decoration: none;
195             font-family: 'Lato',sans-serif;
196 }
197
198 #sddm li a.community:hover
199 {
200 background:#F78E1E;
201 }
202
203 #sddm li a.development:hover
204 {
205 background:#AEBF45;
206 }
207
208 #sddm li a.training:hover
209 {
210 background:#009DDC;
211 }
212
213 #sddm li a.download-right
214 {
215 float:right;
216 position:relative;
217 left:345px;
218 display:block;
219 clear:left;
220  margin-top: -27px;
221     padding: 27px 15px 25px;
222 }
223
224
225 ul#sddm li a:hover 
226 {           
227         text-decoration: none;
228         background:#0083A9;
229 }
230
231 #sddm div
232 {       position: absolute;
233         visibility: hidden;
234         margin: 0;
235         padding: 0;
236         background: #555;
237         border: 1px solid #000000;
238         top:50px;
239 }
240
241         #sddm div a
242         {       position: relative;
243                 display: block;
244                 margin: 0;
245                 padding:8px;
246                 width: 200px;
247                 white-space: nowrap;
248                 text-align: center;
249                 text-decoration: none;
250                 background: #555;
251                 color: #fff;
252                 border: 1px solid #000000;
253                 background: #555;
254         }
255         
256
257
258 /*****************************
259 CONTENT
260 *****************************/
261
262 #content
263 {
264   font-size: 10pt;
265   height: auto;
266   width: 710px;
267   padding-top:23px;
268   padding-bottom:12px;
269   overflow-x:auto; 
270   overflow-y:hidden; 
271 }
272 #content h1
273 {
274         padding-top:29px;
275         font-size: 15pt;
276         font-style: bold;
277 }
278 #content h2
279 {
280         padding-top:27px;
281         font-size: 13pt;
282         font-style: bold;
283 }
284 #content h3
285 {
286         padding-top:25px;
287         font-size: 12pt;
288         font-style: bold italic;
289 }
290 #content pre
291 {
292         font-family: monospace;
293 }
294 #sideNav
295 {
296 width:200px;
297 float:left;
298 padding-top:29px;
299 margin-right:50px;
300 }
301 #content ul
302 {
303         list-style-type: disc;
304 }
305 #content li
306 {
307         margin-left: 11px;
308         padding-bottom:11px;
309 }
310         
311 #sideNav li
312 {
313   height: 40px;
314     list-style-image: none;
315     list-style-type: none;
316     margin-bottom: 20px;
317 }
318
319 #sideNav a
320 {
321    color: #555555;
322     display: block;
323     font-size: 13pt;
324     padding: 8px 0 0 15px;
325     text-decoration: none;
326 }
327
328 #sideNav a:hover
329 {
330     text-decoration: underline;
331 }
332 #sideNav .about-nav-title
333 {
334 background: url("../images/normal-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
335     color: #FFFFFF;
336     font-family: 'Lato',sans-serif;
337     font-size: 18pt;
338     font-weight: normal;
339     height: 40px;
340     margin-bottom: 20px;
341     padding-left: 5px;
342 }
343
344 #sideNav .jvlite-nav-title
345 {
346 background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent;
347     color: #FFFFFF;
348     font-family: 'Lato',sans-serif;
349     font-size: 18pt;
350     font-weight: normal;
351     height: 40px;
352     margin-bottom: 20px;
353     padding-left: 5px;
354 }
355
356 #sideNav .jvlite-nav-small
357 {
358 background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent;
359     color: #FFFFFF;
360     font-family: 'Lato',sans-serif;
361     font-size: 18pt;
362     font-weight: normal;
363     height: 40px;
364     margin-bottom: 20px;
365     padding-left: 0px;
366 }
367
368 #sideNav .com-nav-title
369 {
370 background: url("../images/com-arrow-3-small.png") no-repeat scroll 0 0 transparent;
371     color: #FFFFFF;
372     font-family: 'Lato',sans-serif;
373     font-size: 18pt;
374     font-weight: normal;
375     height: 40px;
376     margin-bottom: 20px;
377     padding-left: 5px;
378 }
379
380 #sideNav .dev-nav-title
381 {
382 background: url("../images/dev-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
383     color: #FFFFFF;
384     font-family: 'Lato',sans-serif;
385     font-size: 18pt;
386     font-weight: normal;
387     height: 40px;
388     margin-bottom: 20px;
389     padding-left: 5px;
390 }
391
392 #sideNav .train-nav-title
393 {
394 background: url("../images/train-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
395     color: #FFFFFF;
396     font-family: 'Lato',sans-serif;
397     font-size: 18pt;
398     font-weight: normal;
399     height: 40px;
400     margin-bottom: 20px;
401     padding-left: 5px;
402 }
403
404 #content .borderTable td
405 {
406         border: 1px solid black;
407 }
408 #content .borderTable tr
409 {
410         border-bottom: 2px solid black;
411 }
412
413 td
414 {
415     vertical-align: middle;
416 }
417
418 /********************************
419 FOOTER
420 ***********************************/
421
422 #footer
423 {
424 max-width:100%;
425 width:100%;
426 color:#fff;
427 background:#555;
428 height:140px;
429 padding-top:10px;
430 clear:both;
431 }
432 #innerFooter a
433 {
434         color: #EEEEEE;
435         visited: #DDDDDD;
436         
437 }
438
439 #innerFooter
440 {
441 width:960px;
442 margin:0 auto;
443 height:140px;
444 padding-top:10px;
445 }
446
447
448 #copyright
449 {
450 float:left;
451 }
452
453 #cite
454 {
455 float:right;
456 width:555px;
457 }