html {
height: 100%;
}
body {
margin: 0;
padding: 0;
text-align: center;
font: 400 0.8em verdana, arial, sans-serif;
line-height: 170%;
color: #FFFFFF;
background-color: #6C6CF4;
background-repeat: repeat-x;
background-position: left top;
}
h1 {
clear: both;
font: 700 2.5em "trebuchet ms", serif;
color: #FFF;
}
h2 {
font: 400 1.5em "trebuchet ms", serif;
color: #FFFFFF;
}
h2 a {
color: #6C6CF4;
}
h2 a:hover {
color: #FFF;
}
h3 {
font: 400 1.3em "trebuchet ms", serif;
color: #F8D766;
}
h4 {
font: 700 1.2em "trebuchet ms", serif;
color: #F39F01;
}
h5 {
font: 700 1.1em "trebuchet ms", serif;
color: #F17400;
}
h6 {
font: 700 1em "trebuchet ms", serif;
color: #FF4B33;
}
.leftColumn {
color: #000000;
padding-left: 5px;
background-color: #6C6CF4;
}
h1, h2, h3, h4, h5, h6, p, dl {
margin: 0;
padding: 10px 15px;
}
/* Done so the leftmost column aligns properly with the header.
If the leftmost column has class gradient applied to it,
this class isn't required. */
.leftColumn h1,
.leftColumn h2,
.leftColumn h3,
.leftColumn h4,
.leftColumn h5,
.leftColumn h6,
.leftColumn p,
.leftColumn dl {
padding-left: 0;
color: #000000;
}
a {
color: #6C6CF4;
}
/* Uncomment this if you would like a visited link style
a:visited {
text-decoration: line-through;
} */
a:hover {
color: #FFF;
}
b {
}
ol, ul {
margin: 10px 30px;
padding: 0 30px;
}
ol {
color: #FC0;
}
ol span {
color: #EEE;
}
ul {
list-style-image: url(../images/bg/bullet.gif);
}
del {
color: #AAA;
}
code {
margin: 10px 15px;
padding: 10px;
display: block;
overflow: auto;
font: 400 1em courier, monospace;
line-height: 120%;
white-space: pre;
background: #444;
}
.leftColumn code {
margin-left: 0;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
dt {
font-weight: bold;
color: #FFB323;
}
dd {
margin-left: 0;
padding-left: 45px;
}
/**************************************************************
Form Elements
**************************************************************/
label {
display: block;
}
input,
textarea,
select {
padding: 2px;
font: 400 1em verdana, sans-serif;
color: #444;
background: #EEE;
border: 1px solid #444;
}
input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
color: #000;
background: #E4F7FA;
border: 1px solid #00DFFF;
}
input.button {
padding: 2px 5px;
font: 400 1.1em "trebuchet ms", serif;
color: #555;
background: #9FF3FF;
border-width: 1px;
border-style: solid;
border-color: #FFF #00DFFF #00DFFF #FFF;
}
/**************************************************************
Blockquote and included icons
**************************************************************/
blockquote {
margin: 10px 15px;
padding-left: 27px;
background-color: #000033;
background-repeat: no-repeat;
background-position: 5px 50%;
}
blockquote.exclamation {
background-image: url(../images/icons/exclamation.gif);
}
blockquote.stop {
background-image: url(../images/icons/stop.gif);
}
blockquote.go {
background-image: url(../images/icons/go.gif);
}
/**************************************************************
Images
**************************************************************/
img.floatRight {
margin: 5px 0px 10px 15px;
}
img.floatLeft {
margin: 5px 15px 10px 0px;
}
a img {
border: 2px solid #8BE6FA;
}
a:hover img {
/* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
border: 2px solid #FFF !important;
border: 2px solid #8BE6FA;
}
#content {
height: 100%;
min-height: 100%;
text-align: left;
border: thin solid #000000;
background: #6C6CF4;
}
#content,
#width {
/* max-width hack for IE since it doesn't understand the valid css property */
width: expression(document.body.clientWidth > 1200 ? "1200px" : "94%");
max-width: 1200px;
margin: 0 auto;
}
#content[id],
#width[id] {
width: 94%;
height: auto;
}
/**************************************************************
#header: Holds the site title and header images
**************************************************************/
#header {
position: relative;
height: 148px;
background-image: url(../images/bg/header.jpg);
background-repeat: repeat-x;
width: 100%;
overflow: hidden;
}
#leftheader {
background-image: url(../images/bg/header_left.jpg);
background-repeat: no-repeat;
float: left;
height: 148px;
}
#rightheader {
background-image: url(../images/bg/header_right.jpg);
background-repeat: no-repeat;
float: right;
height: 148px;
}
/* Holds the site title and subtitle */
#header #title {
position: absolute;
z-index: 3;
top: 10px;
left: 130px;
padding: 5px;
text-align: right;
}
#header h1 {
margin: 0;
padding: 0;
font: 700 4em "trebuchet ms", serif;
letter-spacing: -3px;
text-transform: lowercase;
color: #FFF;
}
#header h2 {
position: absolute;
top: 10px;
right: 5px;
margin: 0;
padding: 0;
font: 700 1em "trebuchet ms", serif;
text-transform: lowercase;
color: #00F0EC;
}
#header img.center {
position: absolute;
z-index: 0;
}
/* Sets where the header images will go */
#header img.left {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#header img.right {
position: absolute;
z-index: 0;
top: 0;
right: 0;
}
#header img.balloons {
position: absolute;
z-index: 2;
top: 70px;
right: 400px;
}
/**************************************************************
#mainMenu: The top level site menu
**************************************************************/
#mainMenu {
float: left;
width: 100%;
clear: both;
background-color: #6C6CF4;
;
}
#mainMenu ul {
margin: 0;
padding: 0;
}
#mainMenu li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#mainMenu li a {
float: left;
margin: 0 2px;
padding: 5px 0.5em;
font: 400 1.6em "trebuchet ms", serif;
text-decoration: none;
text-transform: lowercase;
color: #FFF;
}
#mainMenu li a:hover,
#mainMenu li a.here {
color: #FFFFFF;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#mainMenu li a.last {
margin-right: 0;
}
/**************************************************************
.sideMenu: The side bar menu
**************************************************************/
ul.sideMenu {
margin: 0;
padding: 0;
}
.sideMenu li {
display: inline;
/* Needed since IE fails when you give it list-style: none; */
list-style-image: url(foo.gif);
font: 400 1.3em "trebuchet ms", serif;
}
.sideMenu li a {
display: block;
margin: 0.2em 0;
padding: 3px 5px;
text-decoration: none;
color: #FFF;
}
.sideMenu li a:hover {
color: #65EBFF;
background: #5F5F5F;
}
/* Active menu item */
.sideMenu li.here {
display: block;
padding: 5px;
color: #65EBFF;
background: #555;
}
/* Submenu of active menu item */
.sideMenu li.here ul {
margin: 0;
padding: 0;
}
.sideMenu li.here ul li a {
padding-left: 35px;
font: 400 0.55em verdana, arial, sans-serif;
color: #FFF;
background: url(../images/bg/bullet.gif) no-repeat 10px 0px;
}
.sideMenu li.here ul li a:hover {
color: #9FF3FF;
background: #5F5F5F url(../images/bg/bullet.gif) no-repeat 10px 0px;
}
/**************************************************************
#page: Holds the main page content.
**************************************************************/
#page {
float: left;
width: 100%;
clear: both;
padding-bottom: 4em;
}
/**************************************************************
#footer: The page footer - will stick to the bottom if not
enough content.
**************************************************************/
#footer {
float: left;
width: 100%;
clear: both;
margin-top: -3.8em;
background: #000 url(../images/bg/footer.jpg) repeat-x top left;
}
/* Sets the width of the footer content */
#footer #width {
position: relative;
z-index: 3;
font-size: 0.85em;
padding-top: 27px;
}
/**************************************************************
Width classes used by the site columns
**************************************************************/
.width100 {
width: 100%;
}
.width75 {
width: 74%;
background-color: #6C6CF4;
}
.width50 {
width: 49.7%;
}
.width33 {
width: 32.7%;
}
.width25 {
width: 24.7%;
}
/**************************************************************
Alignment classes
**************************************************************/
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
/**************************************************************
Generic display classes
**************************************************************/
.clear {
clear: both;
}
.block {
display: block;
}
.small {
font-size: 0.8em;
}
.green {
color: #A1FF45;
}
.red {
color: #EA1B00;
}
.grey {
color: #666;
}
.grey a {
color: #999;
}
.grey a:hover {
color: #EEE;
}
.gradient {
margin-bottom: 2em;
background-color: #111170;
background-repeat: repeat-x;
background-position: left bottom;
}
#leftColumn {
}
#mainMenu li a:hover, #mainMenu li a.herenlast {
color: #FFFFFF;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin-right: 0px;
}
.leftColumn a {
color: #000000;
}
.leftColumn a:hover {
color: #FFFFFF;
}
.nodec {
text-decoration: none;
}
#fill-in {
visibility:hidden;
display:none;
}
div.cntr {text-align: center;
}