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 }