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;
}