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: #003648; } 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; }