div.outer {width:788px; padding:0; margin:1em auto 0 auto; background:white url(images/layout/middle.gif) repeat-y top center; position:relative;}

div.top {margin:0; padding:0; height:16px; background:white url(images/layout/top.gif) no-repeat top center; overflow:hidden;}
div.toplogo {width:285px; height:60px; padding:0; margin:0; background:url(images/layout/toplogo.gif) no-repeat top left; cursor:pointer;}

/* Top links, hover menu and breadcrumb display */
#nav {padding:0 0 0 90px; margin:0; list-style:none; margin-top:20px; margin-bottom:20px; background:#580e8c url(images/layout/listmenubg.gif) no-repeat top center;}
#nav ul {padding:0; margin:0; list-style:none; z-index:100; border:1px solid #580e8c;}
#nav a {display:block; width:10em; text-align:center; padding:10px 5px 10px 5px; color:White;}
#nav a.dud:hover {cursor:default;}
#nav li {float:left; /* varying widths defined within HTML */}
#nav li ul {position:absolute; width:13em; left:-999em; background:#580e8c url(images/layout/hovermenubg.jpg) repeat-x top left}
#nav ul li ul li {margin-top:5px;}
#nav ul li ul li a {width:12em; text-align:left; } /* Sub heading level 1 */
#nav a:hover, #nav ul li ul li a:hover {background-color:#410b66; color:#f2e286;} /* Sub heading level 1 hover */
#nav li:hover ul {left:auto;}
#nav li:hover ul, #nav li.sfhover ul {left:auto;}
.breadcrumbs {background-color:#efefef; border-top:1px solid #dddddd; padding:5px 0 5px 10px; font-weight:bold; margin-top:20px;}
.breadcrumbs .separator {margin-left:5px; margin-right:5px;}

/* -- CONTENT(S) ------------------------------ */
div.middle {margin:0; padding:0 20px 0 20px;}
div.content {position:relative; border:1px solid white; padding:0 0 20px 0; z-index:10;}

/* -- BOTTOM ---------------------------------- */
div.bottom {margin:0; padding:0; height:50px; background:url(images/layout/bottom.gif) no-repeat bottom center; overflow:hidden; position:relative; clear:both;}
div.bottom p {margin:0; padding:0; text-align:center; color:#999999; position:relative; top:5px;}

/* -- General HTML ---------------------------- */
html, body, form {margin:0; padding:0;}
body {background-color:#dddddd;}
p, td, div, input, textarea, select {font-family:Arial, Sans-Serif; font-size:9pt;}
p, td, ul {line-height:1.5em;}
table {border-collapse:collapse;}
td {vertical-align:top; padding:5px;}
h1, h3 {font-family:Arial, Sans-Serif;}
h1 {font-size:25px; margin-top:0.75em; letter-spacing:-0.03em;}
h2 {font-family:Lucida Sans Unicode, Lucida Grande, Sans-Serif; font-size:20px; color:#666666; font-weight:normal; font-style:italic; letter-spacing:-0.04em; margin-top:0.5em;}
h3 {font-size:16px; margin-top:1em}
a {color:#3500aa; font-weight:bold;}

/* -- Custom Tags  ---------------------------- */
.bold {font-weight:bold;}
.italics {font-style:italic;}
.underline {text-decoration:underline;}
.smaller {font-size:11px; line-height:normal;}
.smallprint {font-size:0.8em; line-height:normal;}
.purple {color:#4f0484;}
.green {color:#006600;}
.red {color:#990000;}
.super {font-size:90%; vertical-align:baseline; position:relative; bottom:0.33em;}
.clear {clear:both; height:0px; overflow:hidden;}

/* -- Page Product Menus (OLD) ---------------------- */
div.pagemenu {border:1px solid #492973; float:right; margin:10px 0 0 10px; padding:0; background:url(images/products/menus/lcms.jpg) no-repeat right top;}
div.pagemenu h2 {margin:0; background-color:#492973; text-align:center; color:White; font-size:14px; padding:5px;}
div.pagemenu ul {margin:0; padding:0;}
div.pagemenu ul li {list-style-type:none; margin:0; padding:3px; text-align:center; font-size:13px;}
div.pagemenu ul li a {display:block; padding-top:3px; padding-bottom:3px; font-weight:bold;}
div.pagemenu ul li a:hover {/*background-color:#492973; color:#ffffff; text-decoration:none;*/}
div.pagemenu ul li.current a {background-color:#675f71; color:white; text-decoration:none;}

/* -- Page Product Menus (NEW) ---------------------- */
.pagemenu2 {padding:185px 0 10px 0; position:relative; background:url(images/products/banners/skillstation.jpg) no-repeat top left;}
.pagemenu2 ul.list1 {list-style:none; margin:0; height:55px; padding:0 0 0 80px;}
.pagemenu2 ul.list1 li {float:left; width:80px; height:55px;}
.pagemenu2 ul.list1 li.large {width:85px;}
.pagemenu2 ul.list1 li.vlarge {width:120px;}
.pagemenu2 ul.list1 li a {display:block; padding-top:5px; height:50px; text-align:center; border:1px solid transparent;}
.pagemenu2 ul.list1 li a.plusicon {background:url(images/plusicon.gif) no-repeat 4px 10px;}
.pagemenu2 ul.list1 li a:hover, .pagemenu ul.list1 li a.hover /* class name for click when revealed submenu */ {background-color:white; border:1px outset #c8c3c8;}
.pagemenu2 ul.list2 {clear:both; display:none; list-style:none; padding:0; margin:0 0 0 100px; height:120px; width:620px;}
.pagemenu2 ul.list2 li {width:190px;float:left; margin:5px;}
.pagemenu2 ul.list2 li a {padding:5px 0 5px 30px; background-position:0px 3px;} /* These link also use .buttonHover */
.pagemenu2 ul.list2 li a:hover {border:1px outset #aaaaaa;} /* These link also use .buttonHover */

/* -- Lists ----------------------------------- */
ul.e4list {line-height:1.5em;}
ul.e4list li {font-size:13px; list-style-image:url(images/e4bullet.gif); margin-top:1em;}
ul.e4list li img {vertical-align:middle;}
ul.e4list li ul {margin-top:0.5em;}
ul.e4list li ul li {list-style-image:none; list-style-type:disc; margin-top:auto;}

div.overview {border:1px solid #ddddee; margin:30px -5px auto -5px; background:url(images/layout/overviewgradientbg.gif) repeat-x top left;}
div.overview h2 {background:url(images/layout/overviewheaderbg.gif) repeat-x top left; margin:0; padding:3px 5px 5px 5px;}
div.overview p {padding:5px; margin-top:0.5em; margin-bottom:0.5em;}

/* -- SkillStation outcome points --------------- */
.skillstationpoint {/*border:1px solid #eeeeee; */margin-top:20px; margin-bottom:20px; padding:0; background:url(images/skillstation/points/bg.jpg) repeat-y top left; position:relative;}
.skillstationpoint .text {float:left; width:550px; margin:10px 0 0 10px; padding:0;}
.skillstationpoint .text h3 {margin-top:0; padding-top:0; clear:none;}
.skillstationpoint .text p {}
.skillstationpoint .text dl {padding-left:20px; padding-right:20px;}
.skillstationpoint .text dt {font-weight:bold;}
.skillstationpoint .text dd {margin-left:20px; margin-bottom:10px;}
.skillstationpoint .grab {float:left; width:150px; margin:0; padding:0;}
.sslogo {}
.sslogo .skill {color:#990000; letter-spacing:-0.05em;}
.sslogo .station {color:#000099; letter-spacing:-0.05em;}
.sslogo sup {color:#666666; font-weight:normal; font-size:0.75em;}

/* Features list shown on default.aspx (large w/ green bg) */
.featuresMain {background:url(images/illustrative/productsandservicesbggreen.jpg) no-repeat top left; border:1px groove #66aa99 /* border stops IE7 disappearing content bug */;}
.featuresMain ul {list-style-type:none; margin:0; padding:0;}
.featuresMain ul li {width:130px; height:120px; margin:10px; padding:0; float:left;}
.featuresMain ul li a {display:block; height:50px; padding:60px 0 0 0; border:1px solid transparent; background-repeat:no-repeat; background-position:center 2px; text-align:center;}
.featuresMain ul li a:hover {background-color:white; border:1px outset #669966;}

/* Small features list at bottom of each page */
.features {width:430px; float:right; padding:5px 10px 10px 10px; background:url(images/illustrative/productsandservicesbggreen.jpg) no-repeat top left;}
.features h3 {margin-top:0; font-size:15px;}
.features ul {list-style-type:none; margin:0; padding:0;}
.features ul li {width:200px; height:40px; margin:0; padding:0; float:left;}
.features ul li a {display:block; height:30px; padding-left:40px; background-repeat:no-repeat; background-position:5px 2px;}
.features ul li a:hover {/* all buttons now use .buttonHover below */}

/* Button hover effect for links */
a.buttonHover {display:block; text-align:center; background-repeat:no-repeat; border-width:1px; border-style:solid; border-color:transparent;}
a.buttonHover:hover {border-width:1px; border-style:outset; border-color:#999999; background-color:White;}

/* Implementation steps flow chart (on skillstation/pricing.aspx) */
div.implementationstep {border:1px solid #6e8072; padding:0; margin-bottom:20px; width:610px; background-color:White;}
div.implementationstep h3 {margin:0; padding:5px; background-color:#6e8072; color:White; font-size:14px;}
div.implementationstep p {padding:0 5px 5px 5px; margin-top:0.5em;}

/* Front Page */
.iconfront {position:relative; width:748px; height:475px; background:url(images/layout/e4frontpage4people.jpg) no-repeat center bottom;}
.iconfront h1 {width:470px; position:absolute; top:215px; right:10px; font-size:40px; letter-spacing:-0.025em; font-weight:normal;}
.iconfront h2 {width:470px; position:absolute; top:280px; right:10px; font-size:24px; letter-spacing:-0.075em; font-style:normal;}
.iconfront div.info {width:470px; position:absolute; top:320px; right:10px;}
.productfrontholder {margin:30px 0 10px 0; padding:0 0 0 5px;}
.productfront {float:left; width:160px; margin:0 30px 0 0; height:230px; position:relative; background-repeat:no-repeat; background-position:center top; cursor:pointer;}
.productfront h2 {font-size:12pt; font-style:normal; margin:0; padding:0; text-align:center; padding-top:105px;}
.productfront p {font-size:9pt; margin:5px 0 0 0; padding:5px; line-height:normal; text-align:center;}

/* SkillStation Quote/Demo form */
.contactform {background-color:#eeeeee; padding:1em;}
.options {}
.options a {font-weight:normal; margin-left:1em;}
.options p {margin:0.5em 0 0.5em 0;}
.options .more {background-color:#f6f1f7; padding:0.5em; color:#333333; border:1px solid #cccccc;}
.options .more p {font-size:8pt; margin-top:0.5em;}
.options .more img {vertical-align:middle;}
.options .more a {margin-left:auto;}

/* ROI feature points */
.featurepoints {background:url(images/skillstation/points/roi/pound-notes.jpg) no-repeat center top; padding:30px;}
.featurepoints .featurepoint {border:1px solid #999999; padding:1em; margin:1em auto 2em auto; background:url(images/skillstation/points/roi/semitrans.png) repeat-y top left; width:95%;}
.featurepoints .featurepoint h3 {font-weight:bold; margin-top:0;}
.featurepoints .featurepoint .imageHolder {float:right; margin-left:2em; /* background-image set in HTML */ background-repeat:no-repeat;}
.featurepoints .featurepoint .source {font-style:italic; color:#666666;}