examples/css/style.css

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