body  {
/*	background: url(picts/background.jpg);		*/
	font-family: Verdana,Arial,Helvetica,sans-serif;
	color: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #05A;
}
h1,h2,h3,h4,h5,h6,p {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
}


a:link		{ color: #3300FF; text-decoration: none; }

a:visited	{ color: #3300FF; text-decoration: none; }

a:active	{ color: #3300FF; text-decoration: none; }

a:hover		{ color: #6699FF; text-decoration: none; }



/*  - - - -----------LAYOUT---------- - - -  */
.layout #container { 
	width: 994px;
	background: #EFF2F3;
	margin: 20px auto 0 auto; 
	padding: 0;
	border: 1px solid #FFF;	
	text-align: left;
} 

.layout #header_container {
	width: 994px;
	height: 120px;
	background-color: #0d73c7;
	background-color: #BBB;
} 
.layout #header_container h1,h2 {
	padding: 0;
	margin: 0 0 0 -150em;
}

.layout #header_chws {
	float: left;
	background: url(picts/calhot-logo.png) no-repeat;
	background-position: 0px;
	width: 200px;
	height: 120px;
	display: none;
}

/*  - - - ----------- HEADERS ---------- - - -  */
.layout #header_01 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_01.png) no-repeat;
}
.layout #header_02 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_02.png) no-repeat;
}
.layout #header_03 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_03.png) no-repeat;
}
.layout #header_04 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_04.png) no-repeat;
}
.layout #header_05 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_05.png) no-repeat;
}
.layout #header_06 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_06.png) no-repeat;
}
.layout #header_07 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_07.png) no-repeat;
}
.layout #header_08 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_08.png) no-repeat;
}
.layout #header_09 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_09.png) no-repeat;
}
.layout #header_10 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_10.png) no-repeat;
}
.layout #header_11 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_11.png) no-repeat;
}
.layout #header_12 {
	float: right; z-index: 1; display: none;
	width: 700px; height: 120px;
	background: url(picts/header_12.png) no-repeat;
}
.layout #header_13 {
	float: left; z-index: 1; display: block;
	width: 994px; height: 120px;
	background: url(picts/header_13.png) no-repeat;
}


.layout #menuStrip {
	background: url(picts/menu-background.jpg) repeat-x;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	margin: 0;
	padding: 0;
	height: 23px;
}
.layout #menuStrip ul{
	margin: 0;
}
.layout #menuStrip li{
	list-style-type: none;
	float: right;
}
.layout #menuStrip li a       {
	background-image: url("picts/menu.jpg");
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FC0;
	height: 22px;
	padding: 0px 7px 0px 7px;
	text-align: center;
	line-height: 20px;
	display: block;
}

.layout #menuStrip li.gap a   {
	padding: 0px 3px 0px 3px;
}

.layout #menuStrip li a:hover {
	background-image: url("picts/menu_on.jpg");
	color: #FFDD00;
}

#loading {
	background-image: url(picts/loading.jpg);
	background-repeat: no-repeat;
	background-position: center 20px;
	height: 3000px;
} 
#loading p {
	background-image: url(picts/loading.gif);
	background-repeat: no-repeat;
	background-position: center 15px;
	background-color: #bbbbbb;
	height: 80px;
	width: 80px;
	border: 2px solid #999999;
	position: relative;
	top: 258px;
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666666;
	line-height: 136px;
}

.layout #bookCase {
	background-image: url("picts/bookcase-background.png");
	margin: 0;
	padding: 20px 5px 0px 5px;
	height: 355px;
} 

.layout #content {
	background-image: url("picts/bookcase-background.png");
	margin: 0;
	padding: 20px 5px 0px 5px;
	height: 355px;
}

.layout #alternateSpace {
	margin: 0;
	padding: 0;
	background-color: #3399FF;
	height: 0px;
	clear: both;
} 

.layout #alternateSpace h3{
	margin-left: -50em;
}

.layout #footer {
	background-image: url("picts/footer-background.jpg");
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding: 0 10px 0 12px;
	height: 40px;
}
.layout #footer-logo {
	float: left;
	padding: 25px 0 0 0;
}
.layout #footer-logo p{
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color: #f8ca15;
	padding: 0;
	margin:0;
}
.layout #footer-phone {
	float: right;
	padding: 15px 5px 0 0;
	text-align: right;
	font: bold 17px Verdana, Arial, Helvetica, sans-serif;
	color: #dcb416;
}

#footer-nl {
	float: right;
	padding: 3px 5px 0 0;
	text-align: right;
}
#footer-nl p{
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color: #f8ca15;
	padding: 0;
	margin:0;
}
#footer-nlf {
	float: right;
	padding: 0px 0px 0 0;
	text-align: right;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color: #f8ca15;
}

#siteDesign {
	width: 994px;
	padding: 0;
	margin: 8px auto;
	border: 1px solid #05a;	
	text-align: left;
	background-color: #05A; 
}
#siteDesign p {
	padding: 0;
	margin: 0px 15px;
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}

#siteDesign a:link		{ color: #242b52; text-decoration: none }
#siteDesign a:visited	{ color: #242b52; text-decoration: none }
#siteDesign a:active	{ color: #4074d7; text-decoration: none }
#siteDesign a:hover		{ color: #4074d7; text-decoration: none }

.layout #seoMenu {
	padding: 0 10px 0 12px; 
} 
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.vendor-tagLine {
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #444;
}

/*  - - - ----------- CONTACT ---------- - - -  */

#contactInfo a:link		{ color: #fc3; text-decoration: none }
#contactInfo a:visited	{ color: #fc3; text-decoration: none }
#contactInfo a:active	{ color: #ff5; text-decoration: none }
#contactInfo a:hover	{ color: #ff5; text-decoration: none }

#contactInfo {
	float: left;
	padding: 10px 20px 20px 20px;
}
#contactInfo h1{
	padding: 7px 0px;
	margin:0;
	color: #FC3;
	font: bold 18px Verdana, Arial, Helvetica, sans-serif;
	border-bottom: solid #FFF 2px;
}
#contactInfo p{
	padding: 0 0 0 3px;
	margin:0;
	color: #FC3;
	font: normal 14px Verdana, Arial, Helvetica, sans-serif;
}
#contactNL {
	float: left;
	padding: 10px 20px 20px 0px;
}
#contactNL form{
	float: left;
	padding: 10px 0 0 3px;
}#contactMap {
	float: right;
	padding: 7px 26px 0 40px;
	width: 425px;
	height: 330px;
	border-left: solid #AAA 2px;
}

/*  - - - ----------- NEWSLETTER ---------- - - -  */

#newsletterSignUp {
	float: right;
	padding: 7px 30px;
	width: 300px;
	height: 330px;
	border-left: solid #AAA 2px;
}
#newsletterSignUp h2{
	padding: 0 0 6px 3px;
	margin:0;
	color: #FC3;
	font: bold 16px Verdana, Arial, Helvetica, sans-serif;
	border-bottom: solid #FFF 2px;
}
#newsletterSignUp p{
	padding: 0 0 0 3px;
	margin:0;
	color: #FC3;
	font: normal 16px Verdana, Arial, Helvetica, sans-serif;
}

#newsletterSignUp p.reasons {
	padding: 0;
	margin: 0 0 12px 3px;
	color: #DDD;
	font: normal 13px Verdana, Arial, Helvetica, sans-serif;
}
#newsletterNL {
	float: left;
	padding: 10px 0px 0px 0px;
}
#newsletterNL form{
	float: left;
	padding: 10px 0 0 3px;
}

#newsletterPast {
	float: left;
	padding: 0px 0px;
	width: 612px;
	height: 342px;
/*	border: solid #AAA 1px;		*/
}
#newsletterPast h2 {
	padding: 0 0 6px 0px;
	margin: 0 32px 0 32px;
	color: #FC3;
	font: bold 16px Verdana, Arial, Helvetica, sans-serif;
	border-bottom: solid #FFF 2px;	
}

#newsletterPast a:link		{ color: #AAF; text-decoration: none }
#newsletterPast a:visited	{ color: #AAF; text-decoration: none }
#newsletterPast a:active	{ color: #DDF; text-decoration: none }
#newsletterPast a:hover		{ color: #DDF; text-decoration: none }

#newsletterPast ul {
	float: left;
	padding: 0;
	margin: 5px 0;
}
#newsletterPast li {
	display: block;
	float: left;
	padding: 0;
	margin: 0 25px 10px 25px;
	width: 103px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	color: #AAA;
	text-align: center;
	list-style-type: none;
/*	border: solid #AAA 1px;	*/
}

/*  - - - ----------- CLASSES ---------- - - -  */
.layout #classContent-top {
	background: url("picts/cc-top-background.png") repeat-x;
	height: 19px;
	margin: 0;
}
.layout #classContent-bottom {
	background: url("picts/cc-bottom-background.png") repeat-x;
	height: 9px;
	margin: 0;
}
.layout #classContent {
	background-image: url("picts/cc-background.png");
	margin: 0;
	padding: 0px 5px 0px 5px;
}

#classesSlider h1, h2, h3, h4, h5, h6 { font: 1em/1.4em "Times New Roman", Times, serif; }
#classesSlider h1{ font-size: 2.2em; }
#classesSlider h2{ font-size: 2.0em; }
#classesSlider h3{ font: bold 14px Verdana, Arial, Helvetica, sans-serif; }
#classesSlider h4{ font-size: 1.4em; }
#classesSlider p{ font-size: 1.1em; }

#classesSlider a, a:visited { color: #ff8c00; outline: invert; text-decoration: none; }
#classesSlider a img, img a {border: none; text-decoration: none;}
#classesSlider a:hover { text-decoration: none; }

#classesSlider ul.simple, ul.simple li{ list-style:  none outside; padding: 0; }
#classesSlider ul.simple li p, ul.simple li h4{ /*padding: 5px 20px; */ }

/* layout -------------------------------------------*/
#classesSlider { width: 820px; margin: 0 auto; text-align: left; color: #949494; padding: 0 10px 10px 10px; }

#classesSlider h3 {
	display:block;
	width: 644px; 
	background: url(picts/slider-heading.png) top center no-repeat; 
	height: 31px; 
	line-height: 31px; 
	padding: 0 20px; 
	margin: 3px 0 0 80px; 
	position: relative; 
	cursor: pointer;
}
#classesSlider h3 a{ text-decoration: none; }	
#classesSlider h3 span { position: absolute; top: 0; right: 25px;  font-size: 14px; font-weight: bold;}

/*#container h2{padding: 5px;  }*/
#classesSlider div.heading {margin: 0 58px 0 0; padding: 0px; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #AAA; text-align:right;}
#classesSlider div.heading a, a:visited{color: #AAA;}
#classesSlider div.heading a:hover { color: #FFA; text-decoration: none; }

#classesSlider div.collapse{ width: 684px;  margin: 3px 0 3px 80px;  background: url(picts/slider-medium-top.png) top center no-repeat #2759b8;}	
#classesSlider div.collapse-container{top; width: 684px; height: 100%; padding: 0px 0px; background: url(picts/slider-medium-bottom.png)  bottom no-repeat;}
#classesSlider div.collapse-container p{ padding: 0px 20px 15px 20px; color: #AAA; font: normal 12px Verdana, Arial, Helvetica, sans-serif; line-height:16px;}
#classesSlider div.collapse-container h4{ padding: 20px 20px 5px 20px; color: #FFA; font: bold 14px Verdana, Arial, Helvetica, sans-serif;}
#classesSlider div.collapse-container h5{ padding: 3px 20px; color: #AAA; font: normal 12px Verdana, Arial, Helvetica, sans-serif; line-height:16px;}

#classesSlider div.collapse-container a, a:visited{color: #FFA;}
#classesSlider div.collapse-container a:hover{ color: #ff8c00; text-decoration: none; }

#classesSlider .classLogo {
	float: left;
	margin: 0;
	padding: 0;
	width: 80px;
	height: 31px;
}	

/*  - - - ------------- VIDEOS ------------ - - -  */

a.media   { display: block; }
div.media { font-size: 14px; text-align:center;}
div.media div, div.iframe_caption { 
	font-style: italic; 
	color: #AAF; 
	background-color:#242b52;
	padding:3px;
}

.layout #videoContent {
	background-image: url("picts/cc-background.png");
	margin:0;
	padding:0;
/*	border: solid #AAA 5px;		*/
}

/*
#videoList {
	width:840px;				
	margin: 0px auto;
	padding:0 0 30px 0;
	border: solid #F00 1px;		
}
#videoList p{
	margin: 0 0 0 50px;
	padding: 0;
	color: #FC0; 
	font: bold 14px Verdana, Arial, Helvetica, sans-serif
}
#videoList ul{
	margin:0;
	padding:0;
	list-style-position: inside;
	display: inline-block;
}

#videoList ul li{
	float:left;
	margin: 10px 50px;
	padding:0;
	width:320px;
	height:323px;
	list-style-type: none;
}
*/

.layout #videoContent .videoList {
	width:840px;				
	margin: 0px auto;
	padding:10px 0 30px 0;
/*	border: solid #F00 1px;		*/
}
.layout #videoContent .videoList h3{
	margin: 0 0 0 50px;
	padding: 0;
	color: #FC0; 
	font: bold 14px Verdana, Arial, Helvetica, sans-serif
}
.layout #videoContent .videoList ul {
	margin:0;
	padding:0;
	list-style-position: inside;
	display: inline-block;
}

.layout #videoContent .videoList li{
	float:left;
	margin: 10px 50px;
	padding:0;
	width:320px;
	height:323px;
	list-style-type: none;
/*	border: solid #0FF 1px;		*/
}

/*  - - - ------------- Manufacturers ------------ - - -  */
#manufacturersContent {
	background-image: url("picts/cc-background.png");
	margin:0;
	padding:0;
}

#manufacturersContent a:link	{ color: #AAF; text-decoration: none }
#manufacturersContent a:visited	{ color: #AAF; text-decoration: none }
#manufacturersContent a:active	{ color: #DDF; text-decoration: none }
#manufacturersContent a:hover	{ color: #DDF; text-decoration: none }

#manufacturersContent ul {
	background-image: url("picts/cc-background.png");
	width:100%;
	float: left;
	padding: 0;
	margin: 0px auto;
}
#manufacturersContent li {
	display: block;
	float: left;
	padding: 0px 0;
	margin: 10px 19px 10px 19px;
	width: 210px;
	height: 120px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	color: #AAA;
	text-align: center;
	list-style-type: none;
/*	background-color: #004;	*/
/*	border: solid #AAA 1px;	*/
}
/*  - - - --------------- Vendors -------------- - - -  */
#vendorContent {
	background-image: url("picts/cc-background.png");
	margin: 0;
	padding: 20px 5px 0px 5px;
	height: 355px;
}

/*  - - - ------------ Raypak-Content ----------- - - -  */
/*  - - - ------- manufacturer-raypak.html ------ - - -  */
#raypak-Content {
	float:left;
	width:1200px;
	height: 320px;
	padding:0;
	margin:0;
/*	border: solid #FFF 1px;	*/
}

#raypak-Content a:link		{ color: #AAF; text-decoration: none }
#raypak-Content a:visited	{ color: #AAF; text-decoration: none }
#raypak-Content a:active	{ color: #FD0; text-decoration: none }
#raypak-Content a:hover		{ color: #FD0; text-decoration: none }

#raypak-Content ul {
	float: left;
	padding: 0;
	margin: 30px 100px;
/*	border: solid #FFF 1px;	*/
}
#raypak-Content li {
	display: block;
	float: left;
	padding: 0;
	margin: 0 5px 10px 5px;
	font: bold 13px Verdana, Arial, Helvetica, sans-serif;
	color: #AAA;
	text-align: center;
	list-style-type: none;
/*	border: solid #FFF 1px;	*/
}

/*  - - - -- Manufacturer-Vendor-Model Content -- - - -  */
#vendorLineContent {
	background-image: url("picts/cc-background.png");
	margin: 0;
	padding: 0;
	height: 355px;
}
#vendor-line {
	float:left;
	width:180px;
	height:355px;
	padding:0;
	margin:0;
	border-right: 1px solid #FFF;
/*	background: #237;	*/
}
#vendor-models {
	float:left;
	width:300px;
	height:355px;
	padding:0;
	margin:0;
	border-right: 1px solid #FFF;
	background: #236;
}
#vendor-description {
	float:left;
	width:512px;
	height:355px;
	padding:0;
	margin:0;
	background: #223878;
}

#vendor-line ul {
	padding: 0;
	margin: 0px auto;
/*	border: solid #FFF 1px;	*/
}
#vendor-line li {
	padding: 0;
	margin: 0 5px 0px 5px;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	color: #AAA;
	text-align: center;
	list-style-type: none;
/*	border: solid #FFF 1px;	*/
}
#vendor-line li.logo {
	height:50px;
	margin: 0 15px 0px 15px;
	border-bottom: solid #AAF 1px;	
}	

#vendor-line a:link		{ color: #AAF; text-decoration: none }
#vendor-line a:visited	{ color: #AAF; text-decoration: none }
#vendor-line a:active	{ color: #FD0; text-decoration: none }
#vendor-line a:hover	{ color: #FD0; text-decoration: none }

#vendor-models img {
	margin:0 auto;
	text-align:center ;
/*	border:1px solid #fff;	*/
}
#vendor-models p {
	margin:0 auto;
	color: #FFF;
}

/*---- - -  scroollingPanelContainers  - - ----*/
.scroollingPanelContainer {
	display:block;
	width:100%
	height:355px;
/*	border: 1px solid #F00;	*/
/*	background: #FCC;	*/
}

.scroollingPanelContainer a			{ font: bold 13px Verdana, Arial, Helvetica, sans-serif; }
.scroollingPanelContainer a:link	{ color: #AAF; text-decoration: none }
.scroollingPanelContainer a:visited	{ color: #AAF; text-decoration: none }
.scroollingPanelContainer a:active	{ color: #e3c500; text-decoration: none }
.scroollingPanelContainer a:hover	{ color: #e3c500; text-decoration: none }

.scroollingPanelContainer h1{
	width:100%;
	height:40px;
	line-height: 40px;
	text-align:center;
	vertical-align:middle;
	color: #ffa600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	border-bottom: 1px solid #FFF;
	background:#236;	
}
.scroollingPanelContainer p {
	margin:10px 20px 0px 0;
	font: normal 13px Verdana, Arial, Helvetica, sans-serif;
	color: #CCC;
/*	border: 1px solid #F00;		*/
}
.scroollingPanelContainer p.question { 
	color: #ffa600; 
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	margin:10px 20px 0px 0;
}
.scroollingPanelContainer p.subtitle { 
	color: #ffa600; 
	font: bold 13px Verdana, Arial, Helvetica, sans-serif;
}






.spc_image {	/* It is here to adjust the place for the Left Side Logo column */
	float:left;
	width: 160px;
	height: 295px;
	margin:10px 10px;
/*	border: 1px solid #F00;	*/
}

















/*--- - -  navigation tabs  - - ---*/
.oa_navigation {
	margin:0;
}
.oa_navigation ul{
	width:80%;
	list-style-type:none;
	padding:0;
	margin:0 auto;
	border-top:3px double #AAF;
/*	border-bottom:3px double #fff;	*/
}
.oa_navigation li{
	display:block;		
	padding:7px;
	font:bold 14px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
/*	border: 1px solid #fff;	*/
}

.oa_navigation a{
	color:#AAF;
	cursor:pointer;
}
.oa_navigation a:link		{ color: #AAF; cursor:pointer; text-decoration: none; }
.oa_navigation a:visited	{ color: #AAF; cursor:pointer; text-decoration: none; }
.oa_navigation a:active		{ color: #FD0; cursor:pointer; text-decoration: none; }
.oa_navigation a:hover		{ color: #FD0; cursor:pointer; text-decoration: none; }
.oa_navigation a.oa_selected{ color: #ffa600; cursor:auto }




/* scrolling panels - Size of the container */
.oa_slider{
clear:both;
width:512px;
margin:0 auto
}
.oa_scroll{		/* panel's visible width */
width:512px;
height:355px;	/* you need declare width & height for IE 7 or less compatibility. Define the visible area sizes */
overflow:hidden;
position:relative
}
ul.oa_scrollPanels{
position:relative;
float:left;
width:100%;
list-style-type:none;
padding:0;
margin:0
}
ul.oa_scrollPanels li{
display:inline
}
.oa_panel{		/* Amount of scroll */
float:left;
width:512px;
height:355px;
padding:0;
margin:0
}

/* some styles for better look and other ones to appreciate the difference between panels */

/*
body{
font:1em Arial, Helvetica, sans-serif;
background:url(../images/oa_bodyBg.jpg) repeat-x fixed #958e7e

}
h1, h2{
text-align:center;
font-weight:lighter;
padding:20px 20px 0 20px
}
p{
font-size:.93em;
padding:5px 20px 0 20px
}
.grey{
background:url(../images/oa_logo.png) 97% 100% no-repeat #e0d6c1 
}
.white{
background:url(../images/oa_logo.png) 97% 100% no-repeat #e5ddcd
}
*/