@charset "UTF-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ececec;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
 #container {
	width: 100%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.breadcrumb {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #EEEEEE;
	margin-right: 30px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #EEEEEE;
	list-style-type: none;
	float: left;
	padding-right: 10px;
	list-style-position: inside;
	margin-left: -10px;
	display: block;
}

.breadcrumb a{
	color: #4daabb;
	
}

 #header {
	background: #FFF;
	padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
 #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}


/* ------------------------------ NAVIGATION STYLES ----------------------------------- */

.horizontalcssmenu {
	width: 100%;
	margin: 0 auto;
	background-color: #8d8d8d;
	border-bottom:1px solid #FFFFFF;
}


.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;

}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
background-color:#8D8D8D;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
	display: block;
	/*width: 100px; /*Width of top level menu link items*/ 
	height:21px;
	padding: 0px 15px;
	border: 0;
	border-left-width: 0;
	text-decoration: none;
	background: transparent url(images/nav_div.gif) top right no-repeat;
	color: #EEEEEE;
	font: normal 13px/20px Helvetica;
}
	
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border: 0;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); 
filter:alpha(opacity=85);
-moz-opacity:0.85; 
-khtml-opacity: 0.85;
opacity: 0.85;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
	display: inline;
	float: none;
	margin-left: 25px;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 10px;
background: #CCCCCa;
border:0;
color: #2b2b2b;
}

.horizontalcssmenu ul li a:hover{
background: transparent url(images/nav_div.gif) top right no-repeat;
color: #FFFFFF;
}

.horizontalcssmenu ul li ul li a:hover{
background: #fffffe;
color:#444444;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
/* background: transparent url(images/menuarrow.gif) no-repeat center left;  */
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

/* ------------------------------ END NAVIGATION STYLES ------------------------------- */

/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the " #leftbox p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/

/* --------------------------------------- GALLERY STYLES ----------------------------------------- */

.gallerycontainer{
position: relative;
height:454;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 630px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

/* ---------------------------------- END GALLERY STYLES ------------------------------------ */

#videopane {
	margin:0;
	padding:0;
	background-image: url(images/video_box_bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	width:100%;
	height:410px;
	}
#sideBar {
	width: 33%;
	float: right;
	background-color:#212121;
}
.padding {
	padding: 25px;
}

#sideBar25 {
	width: 30%;
	float: right;
	padding: 40px 0 0 0;
}
#sideBar25 li {
	list-style-type: none;
	float: left;
	margin: 10px 25px 15px 0;
	list-style-position: inside;
}
#sideBar25 h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #DDDDDD;
}

#sideBar25 p {
	font-family: Helvetica;
	font-size: 11px;
	color: #CCCCCC;
	text-align: justify;
	padding:0;
	margin:5px 0;
}

#sideBar p {
	border: 0;
	width: 268px;
	margin: 0 auto;
	padding: 20px 0;
}
.sidebarHeader {
	font-family: Helvetica;
	font-size: 16px;
	color: #b1b1b1;
	line-height: 22px;
}
.sidebarBody {
	font-family: Helvetica;
	font-size: 11px;
	line-height: 14px;
	color: #BBBBBB;
}
.sidebarBody a:link {
	font-family: Helvetica;
	font-size: 11px;
	color: #BBBBBB;
	text-decoration: none;
}

.sidebarBody a:hover {
	font-family: Helvetica;
	font-size: 11px;
	color: #BBBBBB;
	text-decoration: underline;
}

#greyContent {
	width: 100%;
	background-image: url(images/sidebar_bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-color:#333333;
	border-top: 1px solid #FFFFFF;
	height: auto;
}

#mainContent {
	margin:0;	
}

#leftContent {
	float: left;
	width: 65%;
	max-width: 800px;
	_width: 600px; /* for InternetExploder */
}
#leftContent p {
	font-family: Helvetica;
	font-size: 12px;
	color: #EEEEEE;
	text-align: justify;
	padding: 10px 5px 5px 20px;
	line-height: 17px;
}
#logo img {
	margin-left: 15px;
}

#leftContent li {
	font-family: Helvetica;
	font-size: 12px;
	color: #EEEEEE;
	text-align: justify;
	line-height: 16px;
}

.header {
	font-family: Helvetica;
	font-size: 18px;
	font-weight: bold;
	color: #EEEEEE;
}
#fullScreen {
	width: 100%;
	background-image: url(images/fullScreen_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

#videopane p {
	margin-left: 15px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #666666;
	}

 #leftbox {
	position:relative;
	display: block;
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 33%; /* since this element is floated, a width must be given */
	padding: 0px 0;  top and bottom padding create visual space within this div  */
	margin:0;
	background-image: url(images/box_bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	height: 205px;
	
}
 #rightbox {
	position:relative;
	display: block;
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 33%; /* since this element is floated, a width must be given */
	padding: 0px 0;  top and bottom padding create visual space within this div */
	margin:0;
	background-image: url(images/box_bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	height: 205px;

}
 #leftbox p, #rightbox p, #middlebox p {
	margin-left: 15px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #666666;
}

 #leftbox h3, #rightbox h3, #middlebox h3 {
	margin-left: 15px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #666666;
	line-height: 24px;
}

/* Tips for middlebox:
1. the space between the middlebox and sidebars is created with the left and right margins on the middlebox div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the middlebox div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the middlebox "hasLayout." This avoids several IE-specific bugs.
*/
 #middlebox {
	position:relative;
	display: block;
	float: left;
	width: 33%;
	padding: 0px 0;
	margin:0;
	background-image: url(images/box_bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #middlebox div's text to fill the sidebar spaces when the content in each sidebar ends. */
	height: 205px;
}

 #footer {
	padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFFFF;
	width: 100%;
	margin: 0 auto;
} 
 #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-family: Helvetica;
	font-size: 12px;
	color: #4daabb;
	text-decoration: none;
	text-align: center;
}

 #footer a {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-family: Helvetica;
	font-size: 12px;
	color: #4daabb;
	text-decoration: underline;
}

#box1_image {
	padding-left: 15px;
}

#box1_image img, #box1_image object {
	float: left;
	padding-right: 10px;
	padding-left: 10px;
}
#leftMain {
	width: 310px;
	padding: 25px 15px 10px 5px;
	float: left;
}
#rightMain {
	float: right;
	width: 531px;
	padding: 25px 25px 25px 5px;
}

#box2_image img {
	float: left;
	padding-right: 10px;
	padding-left: 10px;
}

#box3_image img {
	padding-right: 10px;
	padding-left: 10px;
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

div.line HR {
	width:90%;
	display: none;
   }
   
div.line {
	border-top: 1px solid #666;
	width: 93%;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 10px;
}   
#banner1 {
	width: 100%;
	background-color: #367b8f;
	height: 75px;
}

#banner2 {
	width: 100%;
	background-color: #CBC8C4;
	height: 75px;
}
#banner3 {
	background-color: #A6DCDA;
	width: 100%;
	height: 75px;
}
#banner4 {
	background-color: #6B764C;
	width: 100%;
	height: 75px;
}
#banner5 {
	background-color: #E4E8EA;
	width: 100%;
	height: 75px;
}

#banner6 {
	background-color: #1A1A1A;
	width: 100%;
	height: 75px;
}

#banner7 {
	background-color: #4DAABB;
	width: 100%;
	height: 75px;
}

#bannerAS {
	background-color: #00b5cb;
	width: 100%;
	height: 75px;
}

#bannerPS {
	background-color: #f79429;
	width: 100%;
	height: 75px;
}

#cvContent {
	width: 400px;
	padding: 8px 15px;
}

#cvContent p {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #444444;
	text-decoration: none;
	line-height: 16px;
	text-align: justify;
}

#leftContent_dark {
	width: 46%;
	padding: 8px 15px;
	float: left;
}

#leftContent_dark li a {
	
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); 
	filter:alpha(opacity=65);
	-moz-opacity:0.65; 
	-khtml-opacity: 0.65;
	opacity: 0.65;
}

#leftContent_dark li a:hover {
	
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); 
	filter:alpha(opacity=99);
	-moz-opacity:0.99; 
	-khtml-opacity: 0.99;
	opacity: 0.99;
}
#leftContent_dark p {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
}

#rightContent_dark p {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
}

#rightContent_dark {
	width: 42%;
	padding: 10px 15px;
	float: left;
	height: 650px;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #b4b4b4;
	text-decoration: none;
}
#picScroll img {
	padding-right: 10px;
}
#leftContent_dark h2 {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	color: #E4E4E4;
	text-decoration: none;
	margin-bottom: -8px;
}
#leftContent_dark h1 {
	font-family: Helvetica, sans-serif;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	color: #E4E4E4;
	text-decoration: none;
	margin-bottom: -8px;
}

#rightContent_dark img{
	padding: 5px;
}

#leftContent_dark h3 {
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
}
.topSpacer {
	padding-top: 25px;
	margin-right: 10px;
}

#flashbox {
	float: left;
}
#boxes {
	margin: 0 auto;
}

.roundcont {
	width: 700px;
	background-color: #FFFFFF;
}

.roundcont p {
	margin: 0 10px;
	color: 111111;
}

.roundtop {
	background: url(images/round_top.png) no-repeat top right;
	width: 700px;
	height: 21px;
}

.roundbottom {
	background: url(images/round_bottom.png) no-repeat top right;
	width: 700px;
	height: 21px;
}

.maxLength {
	width: 66%;
	max-width: 700px;
	_width: 680px; /* for InternetExploder */
	
}

#spanWindow {
	width: 95%;
	padding: 15px;
	max-width: 1200px;
	_width: 800px; /* for InternetExploder */
}

#span66 {
	width: 66%;
	padding: 15px;
	max-width: 700px;
	_width: 600px; /* for InternetExploder */
}

#span666 {
	width: 700px;
	padding: 15px;
	max-width: 700px;
	_width: 700px; /* for InternetExploder */
}

#span666 p {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #121212;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
}

#span666 h3 {
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
}

#span666 li {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #121212;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
	list-style-position: inside;
	padding:0 10px;
}

#span50 {
	padding: 15px;
	width: 50%;
	max-width: 500px;
	_width: 300px; /* for InternetExploder */
}

#span90 {
	width: 90%;
	padding: 15px;
	max-width: 1200px;
	_width: 800px; /* for InternetExploder */
}

#spanWindow p, #span66 p, #span90 p, #span50 p {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
}

#spanWindow li, #span66 li, #span90 li, #span50 li {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
	list-style-position: inside;
}

#spanWindow a, #span66 a, #span90 a, #span50 a, #sideBar a, #sideBar25 a {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	color: #4DAABB;
	text-decoration: none;
	line-height: 18px;
	text-align: justify;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EEEEEE;
	font-weight: bold;
}

#spanWindow a:hover, #span66 a:hover, #span90 a:hover, #span50 a:hover, #sideBar a:hover, #sideBar25 a:hover  {
	border-bottom-style: solid;
	border-bottom-color: #4DAABB;
}

#spanWindow a:hover img, #span66 a:hover img, #span90 a:hover img, #span50 a:hover img {
	border-style: solid;
	border-color: #BB0000;
}

#spanWindow h2, #span66 h2, #span90 h2, #span50 h2  {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: bold;
	color: #4daabb;
	text-decoration: none;
	margin-bottom: 0px;
}

#spanWindow h3, #span66 h3, #span90 h3, #span50 h3  {
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
}

#leftContent_dark li {
	float: left;
	list-style-type: none;
	margin: 0px;
	margin-left: -40px;
	margin-right: 46px;
	border: 0;
}
.imgFrame {
	margin: 0px;
	padding: 5px;
	border: 1px dotted #444444;
	background-color: #EEEEEE;
}
.block {
	display: block;
	width: 180px;
	float: left;
	margin: 5px 15px 5px 0;
	padding-right: 15px;
}
.redHead {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #CC0000;
}
.bodyLink {
	color: #4DAABB;
	text-decoration: underline;
}
#callOut {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #444444;
	background-image: url(images/greybox_bg.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	margin: 0 auto;
	;
	width: 85%;
	padding: 7px;
}
.miniCaps {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
}
.clearleft {
	clear: left;
}

#picScroll {
	width: 252px;
	overflow: auto;
	height: 115px;
}
.mytext {
	font-family: Helvetica;
	font-size: 12px;
	color: #EEEEEE;
	text-align: justify;
	padding: 10px 5px 5px 20px;
	line-height: 17px;
}
#faqSpacer {
	height: auto;
}
.C8J_link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #777777;
	text-decoration: none;
	text-align: center;
}