BODY {font:12px/18px Verdana, Arial, Helvetica, sans-serif; color:#333; background:#fff url(../nav-ims/page-bg.gif) repeat-x; text-align:center; margin:0; padding:0;}

/* -----------------------base html---------------------------*/

h2 {margin:0 0 12px 0; padding:12px 10px 10px 50px; color:#fff; font-size:14px; font-weight:bold; background-color:#666;}
h3 {margin:0 0 10px 0; padding:8px 5px 8px 20px; color:#fff; font-size:14px; font-weight:bold; background-color:#666;}
h4 {margin:0 0 10px 0; padding:8px 4px; color:#fff; font-size:14px; font-weight:bold; background-color:#666; text-align:left;}

a, a:visited {color:#333;}
a img {border:none;}

div, form, table {margin:0; padding:0;}

table td {vertical-align:top; padding:0; font:12px/18px Verdana, Arial, Helvetica, sans-serif; /* for IE 5.5 */}

input, textarea, select {color:#333; background-color:#eee;}

ol, ul {margin-top:0;}

/* ----------------------- layout divs ----------------------- */

div#wrapper {width:786px; margin-left:auto; margin-right:auto; text-align:right; background:#fff url(../nav-ims/wrapper-bg.gif) no-repeat left bottom;}

div#header {height:72px;}
div#header2 {height:68px;}
div#topnav {height:52px;}

div#h1 {height:34px; background:#999 url(../nav-ims/header.gif) no-repeat top;} /* main page header */
div#h1 h1 { font:normal 18px Arial, Helvetica, sans-serif; text-align:right; margin:0; padding:6px 20px 2px 20px; color:#222;}


div#topnav a img#one {background-image:url(../nav-ims/topnav-1.gif);} /* hovers by css - main image is transparent gif */
div#topnav a img#two {background-image:url(../nav-ims/topnav-2.gif);}
div#topnav a img#three {background-image:url(../nav-ims/topnav-3.gif);}
div#topnav a img#four {background-image:url(../nav-ims/topnav-4.gif);}
div#topnav a img#five {background-image:url(../nav-ims/topnav-5.gif);}
div#topnav a img#one:hover {background-image:url(../nav-ims/topnav-1-over.gif);}
div#topnav a img#two:hover {background-image:url(../nav-ims/topnav-2-over.gif);}
div#topnav a img#three:hover {background-image:url(../nav-ims/topnav-3-over.gif);}
div#topnav a img#four:hover {background-image:url(../nav-ims/topnav-4-over.gif);}
div#topnav a img#five:hover {background-image:url(../nav-ims/topnav-5-over.gif);}


div#leftBar {float:left; width:206px; text-align:left;}
div#nav {width:160px; background:transparent url(../nav-ims/nav-bg.gif) no-repeat bottom; padding-bottom:30px; border-top:1px solid #777;}
div#nav a, div#nav a:visited {display:block; font-size:12px; padding:4px 6px 5px 12px; text-decoration:none; background:#fff url(../nav-ims/a.gif) no-repeat bottom;}
div#nav a:hover {background-image:url(../nav-ims/a-over.gif);}
div#leftBar div#underNav {margin-top:16px;}
div#leftBar div#underNav p {font-size:11px; line-height:14px; color:#333; margin:0 10px 1.5em 10px;}
div#leftBar div#underNav img {border:1px solid #333; border-width:5px 0; margin-bottom:20px;}
div#leftBar div#underNav h2 {color:#333; font-weight:bold; font-size:11px; margin:0 10px 0.6em 10px; padding:0; background-color:transparent;}

div.showHide {display:none;}
div.showHide#showMenu {display:block;}
div#nav div.showHide a, div#nav div.showHide a:visited {}
div#nav a#secondActive {font-weight:bold; background-image:url(../nav-ims/a-down.gif)}

div#mainCont {margin:22px 0 0 257px; text-align:left; width:526px; background-color:#d4d4d4; border-bottom:6px solid #666;}
div#mainCont p, div#mainCont table {margin:0 10px 1em 10px;}
div#mainCont table p {margin:0 0 0.6em 0;}

div#mainCont div#left {	margin-right:20px;} /*????? why is margin applied here instead of to right div ?? */

div#mainCont div#right {width:150px; float:right; margin-left:10px;}
div#mainCont div#right p {font-size:11px; line-height:12px;}



/* ------------------------- styles for red areas ---------------------------------- */
div#wrapper.red {background-image:url(../nav-ims/wrapper-red-bg.gif);}
div#wrapper.red div#nav {border-color:#c64646;}
div#wrapper.red div#h1 {background:#ff4c4c url(../nav-ims/header-red.gif) no-repeat top;}
div#wrapper.red div#mainCont, div#wrapper.red div#leftBar {background-color:#ffafaf; border-bottom-color:#c90000;}
div#wrapper.red h2, div#wrapper.red h3, div#wrapper.red h4 {background-color:#c90000;}
div#wrapper.red div#leftBar div#underNav img {border-color:#c90000;}
div#wrapper.red div#nav {background-image:url(../nav-ims/nav-red-bg.gif);}
div#wrapper.red div#nav a, div#wrapper.red div#nav a:visited {background-image: url(../nav-ims/a-red.gif)}
div#wrapper.red div#nav a:hover {background-image: url(../nav-ims/a-over-red.gif)}
div#wrapper.red div#nav a#secondActive {font-weight:bold; background-image:url(../nav-ims/a-down-red.gif)}


/* ------------------------- styles for blue areas ---------------------------------- */
div#wrapper.blue {background-image:url(../nav-ims/wrapper-blue-bg.gif);}
div#wrapper.blue div#nav {border-color:#49c3d0;}
div#wrapper.blue div#h1 {background:#008392 url(../nav-ims/header-blue.gif) no-repeat top;}
div#wrapper.blue div#mainCont, div#wrapper.blue div#leftBar {background-color:#a1f5ff; border-bottom-color:#008392;}
div#wrapper.blue h2, div#wrapper.blue h3, div#wrapper.blue h4 {background-color:#008392;}
div#wrapper.blue div#leftBar div#underNav img {border-color:#008392;}
div#wrapper.blue div#nav {background-image:url(../nav-ims/nav-blue-bg.gif);}
div#wrapper.blue div#nav a, div#wrapper.blue div#nav a:visited {background-image: url(../nav-ims/a-blue.gif)}
div#wrapper.blue div#nav a:hover {background-image: url(../nav-ims/a-over-blue.gif)}
div#wrapper.blue div#nav a#secondActive {font-weight:bold; background-image:url(../nav-ims/a-down-blue.gif)}


/* ------------------------- styles for green areas ---------------------------------- */
div#wrapper.green {background-image:url(../nav-ims/wrapper-green-bg.gif);}
div#wrapper.green div#nav {border-color:#73bd39;}
div#wrapper.green div#h1 {background:#9eff51 url(../nav-ims/header-green.gif) no-repeat top;}
div#wrapper.green div#mainCont, div#wrapper.green div#leftBar {background-color:#d1ffac; border-bottom-color:#418b06;}
div#wrapper.green h2, div#wrapper.green h3, div#wrapper.green h4 {background-color:#418b06;}
div#wrapper.green div#leftBar div#underNav img {border-color:#316f00;}
div#wrapper.green div#nav {background-image:url(../nav-ims/nav-green-bg.gif);}
div#wrapper.green div#nav a, div#wrapper.green div#nav a:visited {background-image: url(../nav-ims/a-green.gif)}
div#wrapper.green div#nav a:hover {background-image: url(../nav-ims/a-over-green.gif)}
div#wrapper.green div#nav a#secondActive {font-weight:bold; background-image:url(../nav-ims/a-down-green.gif)}


/* ------------------------- styles for orange areas ---------------------------------- */
div#wrapper.orange {background-image:url(../nav-ims/wrapper-orange-bg.gif);}
div#wrapper.orange div#nav {border-color:#ce6110;}
div#wrapper.orange div#h1 {background:#008392 url(../nav-ims/header-orange.gif) no-repeat top;}
div#wrapper.orange div#mainCont, div#wrapper.orange div#leftBar {background-color:#ffbe8e; border-bottom-color:#bd5101;}
div#wrapper.orange h2, div#wrapper.orange h3, div#wrapper.orange h4 {background-color:#bd5101;}
div#wrapper.orange div#leftBar div#underNav img {border-color:#bd5101;}
div#wrapper.orange div#nav {background-image:url(../nav-ims/nav-orange-bg.gif);}
div#wrapper.orange div#nav a, div#wrapper.orange div#nav a:visited {background-image: url(../nav-ims/a-orange.gif)}
div#wrapper.orange div#nav a:hover {background-image: url(../nav-ims/a-over-orange.gif)}
div#wrapper.orange div#nav a#secondActive {font-weight:bold; background-image:url(../nav-ims/a-down-orange.gif)}

/* --------------------------------- end of color classes --------------------------- */



div#footer {text-align:center; margin-top:20px; background-color:#a2a2a2;}
div#footer div#top, div#footer div#bot {background-color:#000;}
div#cont {width:786px; padding:4px 0 5px 0; margin:0 auto; color:#111;}

div#sw {width:775px; margin:12px auto 20px auto; text-align:left;}
div#sw a, div#sw a:visited {font-size:10px; color:#666; text-decoration:none;}
div#sw a:hover {text-decoration:underline;}

/* --------------------------classes---------------------------*/

div#mainCont table {margin:14px 0 20px 0; width:100%;}
div#mainCont table td {padding:10px;}
table td.center {text-align:center;}
div#mainCont table td.header, div#mainCont td.headerNoBord, div#mainCont td.headerBotBord, div#mainCont table.specs td.headerNoBord { color:#fff; text-align:center; font-weight:bold;}
div#wrapper.red div#mainCont table td.header {background-color:#cc0000; border-right:2px solid #ffafaf;}
div#wrapper.red div#mainCont table td.headerNoBord {background-color:#cc0000; border:none;}
div#wrapper.red div#mainCont table td.headerBotBord {background-color:#cc0000; border-bottom:2px solid #ffafaf;}
div#wrapper.blue div#mainCont table td.header {background-color:#008392; border-right:2px solid #A1F5FF;}
div#wrapper.blue div#mainCont table td.headerNoBord {background-color:#008392;}
div#wrapper.blue div#mainCont table td.headerBotBord {background-color:#008392; border-bottom:2px solid #A1F5FF;}
div#wrapper.green div#mainCont table td.header {background-color:#418B06; border-right:2px solid #D1FFAC;}
div#wrapper.green div#mainCont table td.headerNoBord {background-color:#418B06; border:none;}
div#wrapper.green div#mainCont table td.headerBotBord {background-color:#418B06; border-bottom:2px solid #D1FFAC;}
div#wrapper.orange div#mainCont table td.header {background-color:#BD5101; border-right:2px solid #FFBE8E;}
div#wrapper.orange div#mainCont table td.headerNoBord {background-color:#BD5101; border:none;}
div#wrapper.orange div#mainCont table td.headerBotBord {background-color:#BD5101; border-bottom:2px solid #FFBE8E;}

div#mainCont table td p {margin:0;} /* avoid double width margin if p tags used inside margined tables */
div#mainCont table.specs {margin-bottom:0 0 10px 0;}
div#mainCont table.specs td {padding:4px; color:#333;}
div#mainCont table.specs td.left {font-weight:bold; padding-right:14px; padding-left:12px; width:185px;}
div#mainCont table.specs td.right {}

img.imgLeft {float:left; margin:0 14px 4px 0;}
img.imgRight {float:right; margin:0  0 4px 14px;}
div.space {margin-top:20px;}
.centre {text-align:center;}

