/* Commonwealth Controls Corporation v1.0 2009 */

@import url("reset-min.css");


/*------------------------------------
 Page Colors
 
 Blue: #2762B0
 Light Gray: #95999C
 Dark Gray: #494D59
 
------------------------------------*/

/*------------------------------------
 Table of Contents
 
 Global Elements
 
 mainContainer
 
 headerContainer
 
 contentContainer
 
 leftContent
 
 columnOne
 
 columnTwo
 
 footer
 
------------------------------------*/

/*------------------------------------
 Start Global Elements
------------------------------------*/
body {
background: #FAFAFA url(../images/bg_body.jpg) top left repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #494D59;
}

html {
overflow-y: scroll;
}

a {
color: #2762B0;
}

a:hover {
text-decoration: none;
}

.clear {
clear: both;
}

.left {
float: left;
}

.right {
float: right;
}

.grayBox {
padding: 15px;
background: #F0F0F0;
}

.columnOneContent .grayBox {
margin: 0 0 20px 0;
padding: 15px;
background: #F0F0F0;
}

.grayBox ul.bullets {
margin: 0 0 0 25px;
list-style: square;
}

.blueButton {
padding: 10px 15px;
background: #2762B0;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.red {
color: #FF0000;
font-size: 14px;
font-weight: bold;
margin:0 0 5px 0;
}


/*------------------------------------
 Start List Styles
------------------------------------*/

ol {
list-style: decimal outside;
margin: 0 0 20px 25px;
padding: 0;
}

ul.bullets {
margin: 0 0 20px 25px;
list-style: square;
}

/*------------------------------------
 End List Styles
------------------------------------*/

/*------------------------------------
 Start Table Styles
------------------------------------*/

table.tablePadding td {
padding: 5px;
}

/*------------------------------------
 End Table Styles
------------------------------------*/


/*------------------------------------
 Start Header Styling
------------------------------------*/

h1 {
color: #000000;
font-size: 18px;
font-weight: bold;
line-height: 24px;
margin: 0 0 20px 0;
}

h2 {
color: #434A5C;
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}

/*------------------------------------
 End Header Styling
------------------------------------*/


/*------------------------------------
 Start mainContainer
------------------------------------*/


#mainContainer {
margin: 0 auto;
width: 940px;
}

/*------------------------------------
 Start headerContainer
------------------------------------*/

#headerContainer {
height: 215px;
width: 930px;
margin: 0 5px;
background: url(../images/bg_headerContainer.jpg) top left no-repeat;
}

#mainLogoContainer {
height: 130px;
width: 565px;
margin: 47px 0 0 36px;
float: left;
display: inline;
}

#mainLogo {
height: 110px;
width: 125px;
}

#tagLine {
height: 20px;
width: 565px;
}

#secondaryLogo {
height: 55px;
width: 135px;
margin: 124px 0 0 154px;
float: left;
}

/*------------------------------------
 End headerContainer
------------------------------------*/

/*------------------------------------
 Start navContainer
------------------------------------*/

#navContainer {
height: 39px;
width: 680px;
margin: 0 0 0 5px;
background: url(../images/bg_navContainer.jpg) top left repeat-x;
text-transform: uppercase; 
position:relative; 
z-index:1; 
float:left;
display: inline;
}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk#navContainers/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
=================================================================== */

/* float the list to make it horizontal and a relative positon so that you can control the dropdown#navContainer positon */
#navContainer li {
float:left; 
position:relative;
}

/* style the links for the top level */
#navContainer a, #navContainer a:visited {
height: 12px; 
padding:13px 25px 14px 25px; 
font-size:12px; 
font-weight:bold;
line-height:12px;
text-decoration:none; 
color:#FFFFFF; 
background: url(../images/bg_navContainerlLI.jpg) top right no-repeat;
display:block; 
float: left;
}

#navContainer a.selected {
background: #95999C;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navContainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:39px;
left:0;
}

/* another hack for IE5.5 */
* html #navContainer ul ul {
top:39px;
t\op:39px;
}

/* position the third level flyout#navContainer */
#navContainer ul ul ul{
left:150px; 
top:1px; 
width:150px;
}

/* position the third level flyout#navContainer for a left flyout */
#navContainer ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navContainer table {
position:absolute; 
top:0; 
left:0; 
border-collapse:collapse;
}

/* style the second level links */
#navContainer ul ul a, #navContainer ul ul a:visited {
background: #FFFFFF;
border-left: #DFDFDF 1px solid;
border-right: #DFDFDF 1px solid;
border-bottom: #DFDFDF 1px solid;
color: #2762B0;
padding:8px 25px 9px 25px; 
font-size:12px; 
line-height: 12px; 
width:150px;
}

/* yet another hack for IE5.5 */
* html #navContainer ul ul a, * html #navContainer ul ul a:visited {
width:150px;w\idth:128px;
}

/* style the top level hover */
#navContainer a:hover, #navContainer :hover > a, #navContainer ul ul a:hover{
background: #95999C;
}

#navContainer ul ul :hover > a {
background:#DFDFDF;
}


/* make the second level visible when hover on first level list OR link */
#navContainer ul li:hover ul, #navContainer ul a:hover ul{
visibility:visible; 
}

/* keep the third level hidden when you hover on first level list OR link */
#navContainer ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
#navContainer ul :hover ul :hover ul{ 
visibility:visible;
}


#searchContainer {
height: 39px;
width: 250px;
margin: 0 5px 0 0;
background: url(../images/bg_navContainer.jpg) top left repeat-x;
float:left;
}

#searchContainer input {
float: left;
}

#searchContainer .searchField {
height: 17px;
margin: 5px 5px 0 0;
padding: 4px 5px 4px 10px;
color: #95999C;
}

/*------------------------------------
 End navContainer
------------------------------------*/


/*------------------------------------
 Start contentContainer
------------------------------------*/

#contentContainer {
width: 940px;
margin: 0 auto;
margin-top: 22px;
line-height: 18px;
font-size: 11px;
clear: both;
float: left;
}

#contentContainer p {
margin: 0 0 20px 0;
padding: 0;
}

/*----------------------------------------------------------
  Start columnOne 
----------------------------------------------------------*/

#columnOne {
width: 625px;
background: url(../images/bg_columnOne.jpg) top left repeat-y;
float: left;
}

.columnOneTop {
height: 7px;
width: 625px;
background: url(../images/bg_columnOneTop.jpg) top left no-repeat;
font-size: 0;
}

.columnOneBottom {
height: 7px;
width: 625px;
background: url(../images/bg_columnOneBottom.jpg) top left no-repeat;
font-size: 0;
}

.columnOneBottomHome {
height: 7px;
width: 625px;
background: url(../images/bg_columnOneBottomHome.jpg) top left no-repeat;
font-size: 0;
}

.columnOneContent {
padding: 25px 35px;
min-height: 500px;
width: 555px;
}

.columnOneContent h1 {
font-size: 18px;
font-weight: bold;
border-bottom: #DFDFDF 1px solid;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
}

.columnOneContentHome {
padding: 7px 30px 0 10px;
height: 202px;
width: 345px;
line-height: 23px;
float: left;
}

.imageHome {
width: 204px;
padding: 7px 20px 7px 15px;
float: left;
}

.homeButton {
float: right;
margin: 10px 5px 0 0;
background: #2762B0;
display: inline;
}

.header {
color: #000000;
font-size: 18px;
font-weight: bold;
border-bottom: #DFDFDF 1px solid;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
}

.aboutUsHeader {
color: #000000;
font-weight: bold;
border-bottom: #DFDFDF 1px solid;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
float: left;
}

.aboutUsHeader .headerAbout {
width: 380px;
color: #000000;
font-size: 18px;
font-weight: bold;
float: left;
}

.aboutUsHeader .pageLinks {
width: 175px;
text-align: right;
float: left;
}

.aboutUsHeader .pageLinks a {
color: #000000;
}

.aboutUsHeader .pageLinks a.selected {
color: #2762B0;
text-decoration: none;
}

.contentAboutCol1 {
width: 425px;
float: left;
}

.contentAboutCol2 {
width: 100px;
padding: 0 0 0 30px;
float: left;
}

.contentAboutCol2 ul li {
height: 35px;
margin: 0 0 15px 0;
border-bottom: #DFDFDF 1px solid;
}

.contentAboutCol2 ul li a {
width: 80px;
padding: 0 0 0 20px;
background: #000;
background: url(../images/gfx_aboutBullets.gif) 0 4px no-repeat;
display: block;
}

.productContainer {
float: left;
}

.productHeader {
height: 26px;
width: 525px;
padding: 8px 15px 0 14px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background: url(../images/bg_productHeader.jpg) top left no-repeat;
float: left;
}

.manufacturer {
height: 60px;
width: 100px;
padding: 10px 19px;
text-align: center;
float: left;
}

.manufacturer img {
padding-bottom: 10px
}

.trainingHeader {
height: 26px;
width: 525px;
padding: 8px 15px 0 14px;
margin: 0 0 20px 0;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background: url(../images/bg_trainingHeader.jpg) top left no-repeat;
}

/*----------------------------------------------------------
 End columnOne  
----------------------------------------------------------*/

/*----------------------------------------------------------
 Start columnTwo  
----------------------------------------------------------*/

.columnTwoModule {
width: 290px;
margin: 0 0 10px 20px;
background: url(../images/bg_columnTwo.jpg) top left repeat-y;
float: left;
}

.columnTwoLatestNews {
padding: 0 25px 0 27px;
}

.columnTwoModule h2 {
color: #434A5C;
font-size: 14px;
font-weight: bold;
border-bottom: #DFDFDF 1px solid;
padding: 0 0 7px 0;
margin: 0 0 20px 0;
}

.columnTwoModule h3 {
margin: 0 0 10px 0;
color: #2762B0;
font-size: 14px;
font-weight: bold;
}

.columnTwoContent img {
padding-right: 10px;
float: left;
}

.columnTwoContent {
width: 240px;
padding: 20px 25px 15px 25px;
float: left;
}

.columnTwoContentHome {
padding: 30px 25px 15px 25px;
}

.columnTwoTop {
height: 7px;
width: 290px;
background: url(../images/bg_columnTwoTop.jpg) top left no-repeat;
font-size: 0;
}

.columnTwoTopAbout {
height: 7px;
width: 290px;
background: url(../images/bg_columnTwoTopAbout.jpg) top left no-repeat;
font-size: 0;
}

.columnTwoBottom {
height: 7px;
width: 290px;
background: url(../images/bg_columnTwoBottom.jpg) top left no-repeat;
clear: both;
font-size: 0;
}


/*----------------------------------------------------------
 End columnTwo  
----------------------------------------------------------*/


/*------------------------------------
 Start footer
------------------------------------*/

#footerContainerHome {
height: 64px;
width: 930px;
margin: 25px 5px 0 5px;
border-top: 1px solid #DFDFDF;
float: left;
}

#footerContainer {
width: 930px;
margin: 25px 5px;
padding: 20px 0;
border-top: 1px solid #DFDFDF;
color: #95999C;
text-align: right;
float: left;
}

#footerText {
width: 150px;
padding: 26px 35px;
background: #F0F0F0;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
float: left;
}

#footerLogos {
float: left;
}

#footerLogos li {
display: inline;
}

#subFooter {
width: 930px;
margin: 0 5px;
padding: 20px 0;
border-top: 1px solid #DFDFDF;
color: #95999C;
text-align: right;
clear: both;
}

#footerContainer a, #subFooter a {
color: #434A5C;
}


/*------------------------------------
 End footer
------------------------------------*/


/*------------------------------------
 End mainContainer
------------------------------------*/