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:23px;
 251   overflow-x:auto;
 252   overflow-y:hidden;
 253 }
 254
 255 #sideNav
 256 {
 257 width:200px;
 258 float:left;
 259 padding-top:29px;
 260 margin-right:50px;
 261 }
 262
 263
 264
 265 #sideNav li
 266 {
 267   height: 40px;
 268     list-style-image: none;
 269     list-style-type: none;
 270     margin-bottom: 20px;
 271 }
 272
 273 #sideNav a
 274 {
 275    color: #555555;
 276     display: block;
 277     font-size: 13pt;
 278     padding: 8px 0 0 15px;
 279     text-decoration: none;
 280 }
 281
 282 #sideNav a:hover
 283 {
 284     text-decoration: underline;
 285 }
 286 #sideNav .about-nav-title
 287 {
 288 background: url("../images/normal-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
 289     color: #FFFFFF;
 290     font-family: 'Lato',sans-serif;
 291     font-size: 18pt;
 292     font-weight: normal;
 293     height: 40px;
 294     margin-bottom: 20px;
 295     padding-left: 5px;
 296 }
 297
 298 #sideNav .jvlite-nav-title
 299 {
 300 background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent;
 301     color: #FFFFFF;
 302     font-family: 'Lato',sans-serif;
 303     font-size: 18pt;
 304     font-weight: normal;
 305     height: 40px;
 306     margin-bottom: 20px;
 307     padding-left: 5px;
 308 }
 309
 310 #sideNav .jvlite-nav-small
 311 {
 312 background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent;
 313     color: #FFFFFF;
 314     font-family: 'Lato',sans-serif;
 315     font-size: 18pt;
 316     font-weight: normal;
 317     height: 40px;
 318     margin-bottom: 20px;
 319     padding-left: 0px;
 320 }
 321
 322 #sideNav .com-nav-title
 323 {
 324 background: url("../images/com-arrow-3-small.png") no-repeat scroll 0 0 transparent;
 325     color: #FFFFFF;
 326     font-family: 'Lato',sans-serif;
 327     font-size: 18pt;
 328     font-weight: normal;
 329     height: 40px;
 330     margin-bottom: 20px;
 331     padding-left: 5px;
 332 }
 333
 334 #sideNav .dev-nav-title
 335 {
 336 background: url("../images/dev-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
 337     color: #FFFFFF;
 338     font-family: 'Lato',sans-serif;
 339     font-size: 18pt;
 340     font-weight: normal;
 341     height: 40px;
 342     margin-bottom: 20px;
 343     padding-left: 5px;
 344 }
 345
 346 #sideNav .train-nav-title
 347 {
 348 background: url("../images/train-arrow-3-normal.png") no-repeat scroll 0 0 transparent;
 349     color: #FFFFFF;
 350     font-family: 'Lato',sans-serif;
 351     font-size: 18pt;
 352     font-weight: normal;
 353     height: 40px;
 354     margin-bottom: 20px;
 355     padding-left: 5px;
 356 }
 357
 358 /********************************
 359 FOOTER
 360 ***********************************/
 361
 362 #footer
 363 {
 364 max-width:100%;
 365 width:100%;
 366 color:#fff;
 367 background:#555;
 368 height:140px;
 369 padding-top:10px;
 370 clear:both;
 371 }
 372
 373 #innerFooter
 374 {
 375 width:960px;
 376 margin:0 auto;
 377 height:140px;
 378 padding-top:10px;
 379 }
 380
 381
 382 #copyright
 383 {
 384 float:left;
 385 }
 386
 387 #cite
 388 {
 389 float:right;
 390 width:555px;
 391 }