css.styles.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin Show documentation
Show all versions of vaadin Show documentation
Vaadin is a web application framework for Rich Internet Applications (RIA).
Vaadin enables easy development and maintenance of fast and secure rich web
applications with a stunning look and feel and a wide browser support.
It features a server-side architecture with the majority of the logic running
on the server. Ajax technology is used at the browser-side to ensure a rich
and interactive user experience.
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;
}