| html { |
| margin: 0; |
| padding: 0; |
| text-align: center; |
| } |
| |
| body { |
| background-color: #fff; |
| font: normal 14px/20px Helvetica, "Lucida Grande", Arial, Verdana, sans-serif; |
| color: #464440; |
| padding: 0; |
| min-width: 980px; |
| text-align: left; |
| margin: 0 auto; |
| } |
| |
| .clearer { |
| height: 0; |
| overflow: hidden; |
| clear: both; |
| } |
| |
| h1,h2,h3,h4,h5,h6 { |
| color: #000; |
| font-weight: normal; |
| line-height: normal; |
| } |
| |
| h1 { |
| font-size: 48px; |
| font-weight: bold; |
| } |
| |
| h2 { |
| font-size: 36px; |
| font-weight: bold; |
| } |
| |
| h3 { |
| font-size: 30px; |
| font-weight: bold; |
| margin-bottom: 23px; |
| } |
| |
| h4 { |
| font-size: 18px; |
| margin-bottom: .8em; |
| } |
| |
| h5 { |
| font-size: 16px; |
| margin-bottom: .5em; |
| } |
| |
| h6 { |
| font-size: 14px; |
| margin: .6em 0 .1em; |
| } |
| |
| p { |
| margin: 0 0 1em; |
| } |
| |
| a { |
| text-decoration: none; |
| padding: 0 3px; |
| margin: 0 -3px; |
| -moz-border-radius: 2px; |
| -webkit-border-radius: 2px; |
| border-radius: 2px; |
| } |
| |
| a:link { |
| color: #00a2d8; |
| } |
| |
| a:visited { |
| color: #00a248; |
| } |
| |
| a:hover { |
| background: #e4e3da; |
| color: #505048; |
| } |
| |
| a:active { |
| color: #000; |
| background: #a09f91; |
| } |
| |
| ul { |
| list-style-type: square; |
| } |
| |
| .codeblock { |
| background: #f0efea; |
| padding: 1em; |
| margin: 1em 0; |
| -webkit-border-radius: 8px; |
| -moz-border-radius: 8px; |
| } |
| |
| .codeblock h4 { |
| margin-top: 0; |
| } |
| |
| |
| /*************************************************** |
| * Furniture |
| ***************************************************/ |
| |
| #header { |
| height: 93px; |
| position: relative; |
| } |
| |
| #header h1 { |
| width: 393px; |
| height: 46px; |
| background: transparent url(../img/vaadin-logo.png) no-repeat; |
| position: absolute; |
| top: 23px; |
| left: 50%; |
| margin: 0; |
| margin-left: -484px; |
| text-indent: -9999px; |
| } |
| |
| #version { |
| position: absolute; |
| left: 50%; |
| top: 38px; |
| color: #000; |
| text-align: right; |
| width: 484px; |
| } |
| |
| #version a { |
| color: #78776d; |
| display: inline-block; |
| zoom: 1; |
| padding: 1px 12px; |
| font-size: 12px; |
| background: #e4e3da; |
| -moz-border-radius: 9px; |
| -webkit-border-radius: 9px; |
| border-radius: 9px; |
| } |
| |
| #version a:hover { |
| border: none; |
| background: #a09f91; |
| color: #fff; |
| } |
| |
| #version .release-notes { |
| margin-left: 10px; |
| } |
| |
| #subheader { |
| position: relative; |
| height: 38px; |
| line-height: 38px; |
| background: #000; |
| } |
| |
| #menu, |
| #links { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| #subheader li { |
| display: inline; |
| float: left; |
| padding: 0; |
| } |
| |
| #menu { |
| position: absolute; |
| left: 50%; |
| width: 650px; |
| margin-left: -483px; |
| font-weight: bold; |
| white-space: nowrap; |
| z-index: 2; |
| } |
| |
| #menu li { |
| margin: 0 .3em; |
| } |
| |
| #menu li, |
| #menu a { |
| color: #d9d8cb; |
| } |
| |
| #links { |
| width: 484px; |
| position: absolute; |
| top: 2px; |
| left: 50%; |
| z-index: 1; |
| } |
| |
| #links li { |
| float: right; |
| } |
| |
| #links a { |
| font-size: 12px; |
| line-height: 34px; |
| color: #a09f91; |
| margin-left: 14px; |
| white-space: nowrap; |
| } |
| |
| #subheader a:hover { |
| background: transparent; |
| color: #fff; |
| } |
| |
| ul { |
| padding-left: 1.3em; |
| } |
| |
| #footer { |
| margin: 0 auto; |
| width: 968px; |
| height: 60px; |
| color: #000; |
| font-size: 11px; |
| } |
| |
| #footer a { |
| float: right; |
| } |
| |
| #footer strong { |
| font-size: 13px; |
| } |
| |
| #footer strong em { |
| color: #00b4f0; |
| font-style: normal; |
| margin: 0 0.2em 0 -0.15em; |
| } |
| |
| /*************************************************** |
| * Content wrapper |
| ***************************************************/ |
| |
| #content { |
| position: relative; |
| margin: 0 0 56px -484px; |
| left: 50%; |
| width: 968px; |
| overflow: hidden; |
| } |
| |
| |
| |
| /*************************************************** |
| * Vertical tabs |
| ***************************************************/ |
| #tabs { |
| float: left; |
| width: 196px; |
| } |
| |
| #tabs .tab { |
| font-size: 18px; |
| cursor: pointer; |
| padding: 8px 14px; |
| background: #fff; |
| color: #a09f91; |
| -webkit-transition: linear .2s color; |
| } |
| |
| #tabs .tab * { |
| vertical-align: middle; |
| } |
| |
| #tabs .tab a { |
| margin: 0; |
| padding: 0; |
| color: #00a2d8; |
| -webkit-transition: linear .2s color; |
| } |
| |
| #tabs .tab:hover a, |
| #tabs .tab a:focus { |
| background: transparent; |
| margin: 0; |
| padding: 0; |
| color: #464440; |
| } |
| |
| #tabs .tab:hover { |
| color: #464440; |
| } |
| |
| #tabs .tab span { |
| font-size: 9px; |
| margin-left: .7em; |
| } |
| |
| #tabs .selected, |
| #tabs .selected:hover, |
| #tabs .selected:hover a, |
| #tabs .selected a, |
| #tabs .selected a:hover, |
| #tabs .selected a:focus { |
| color: #000; |
| cursor: default; |
| -webkit-transition: linear .2s color; |
| font-weight: bold; |
| } |
| |
| #tabs .first { |
| margin-top: 0; |
| } |
| |
| h3.reasons { |
| color: #78776d; |
| margin: 0 0 40px; |
| height: 30px; |
| } |
| |
| #reasons { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #reasons.js { |
| float: left; |
| width: 769px; |
| } |
| |
| #reasons .tab { |
| display: block; |
| margin: 0 0 1em; |
| padding: 20px 40px; |
| background: #efeee9; |
| -webkit-border-radius: 9px; |
| -moz-border-radius: 9px; |
| border-radius: 9px; |
| clear: left; |
| overflow: hidden; |
| } |
| |
| #reasons.js .tab { |
| width: 689px; |
| } |
| |
| #reasons .tab h4 { |
| font-weight: bold; |
| font-size: 24px; |
| margin: 14px 0 24px; |
| } |
| |
| #reasons .tab .col { |
| width: 22.8%; |
| margin-right: 2%; |
| float: left; |
| margin-bottom: 2em; |
| } |
| |
| #reasons .tab .col2 { |
| width: 47.8%; |
| margin-right: 2%; |
| float: left; |
| margin-bottom: 2em; |
| } |
| |
| #reasons .tab .col3 { |
| width: 72.8%; |
| margin-right: 2%; |
| float: left; |
| margin-bottom: 2em; |
| } |
| |
| #reasons .tab .col4 { |
| clear: left; |
| margin-bottom: 2em; |
| } |
| |
| #reasons .tab .newline { |
| clear: left; |
| } |
| |
| #reasons .tab p:last-child { |
| margin: 0; |
| } |
| |
| #reasons .tab h5 { |
| margin-top: 0; |
| } |
| |
| |
| /*************************************************** |
| * Section specific styles |
| ***************************************************/ |
| img { |
| border: none; |
| } |
| |
| .book { |
| overflow: hidden; |
| } |
| |
| .book h5 { |
| font-weight: bold; |
| font-size: 18px; |
| } |
| |
| .book h6 { |
| margin: -0.7em 0 .7em; |
| color: #464440; |
| font-size: 13px; |
| font-style: italic; |
| color: #736f5e; |
| } |
| |
| .book img { |
| float: left; |
| margin-right: 1.2em; |
| } |
| |
| .dzone img, |
| .tutorial img { |
| float: left; |
| margin: 0 1em 2em 0; |
| } |
| |
| .tools img { |
| margin: 0em 2em .8em 2em; |
| float: right; |
| } |
| |
| span.fv { |
| padding: 2px 10px; |
| margin-right: 5px; |
| color: rgb(71,174,67); |
| font-weight: bold; |
| } |
| td.fv { |
| background-color: rgb(206,247,205); |
| text-align: center; |
| border-radius: 3px; |
| font-size: 12px; |
| line-height: 1; |
| font-weight: bold; |
| } |
| td.bfp { |
| text-align: center; |
| color: rgb(37,114,146); |
| border-radius: 3px; |
| |
| padding: 2px 10px; |
| margin-right: 5px; |
| background-color: rgb(216,245,255); |
| font-size: 12px; |
| line-height: 1; |
| font-weight: bold; |
| } |
| .ticket { |
| text-align: right; |
| padding-left: 5px; |
| } |
| .pad { |
| padding-left: 5px; |
| } |