#banner {
	overflow: hidden;
	padding: 0;
	margin: 0px 0 0px 0;
}

#banner .slider-wrap p { text-align: left; margin: 15px 0 }
		
#banner .slider-wrap p, #banner .slider-wrap ul { font-size: 13px; line-height: 1.4em } 
		
#banner .slider-wrap p a, #banner .slider-wrap li a { color: #39c; text-decoration: none }
		
#banner .slider-wrap p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
		
#banner .slider-wrap p#cross-links { text-align: center }
		
#banner .slider-wrap p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
		
#banner .slider-wrap noscript p, #banner .slider-wrap noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
#banner .slider-wrap noscript a { color: #a00; text-decoration: underline }
#banner .slider-wrap noscript ol { margin-left: 25px; }
		
#banner .slider-wrap a:focus { outline:none }
		
#banner .slider-wrap img { border: 0 }
		
#banner .slider-wrap h1 { 
			font: 24px Arial, Verdana, Geneva, sans-serif;	
			margin: 45px 0 0 0;
			padding: 0;
			text-align: left; 
			color: #056186; 
			border: none;
			}
			
#banner .slider-wrap h1 span { color: #d62500; } 		
			
#banner .slider-wrap h2 { 
			font: 14px Arial, Verdana, Geneva, sans-serif;	
			color: #3e6960;
			margin: 0 0 30px 0;
			padding: 0 0 0 100px;
			text-align: left; 
}

#banner .slider-wrap .left { float: left; }		
#banner .slider-wrap .right { float: left; }		
		
#banner .slider-wrap .imageContainer {	width: 1003px; height:300px;}

#banner .slider-wrap .right.imageContainer img { float: left; }		
		
#banner .slider-wrap .textContainer {	width: 1003px; /*background: url(../img/banner/text_background.png) no-repeat -20px -20px;*/ }

#banner .slider-wrap .left.textContainer{ margin-left: 30px; width: 1003px; }		

		
#banner .slider-wrap .textContainer p {
			font: 12px Arial, Verdana, Geneva, sans-serif;	
			color: #4d6963;
			line-height: 18px;
			width: 1003px;
		}

#banner .slider-wrap .textContainer p a {
	color: #48729d;
	background: url(../img/banner/arrows.gif) no-repeat 0 50%;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
		}		

#banner .slider-wrap .textContainer p a:hover, #banner .slider-wrap .textContainer p a:focus {
			text-decoration: underline;
		}		
		
		
#banner .stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 0px 0 0px;
		}
		
#banner .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 0px 0;
	position: relative;
	width: 1003px;
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-size: 13px;
	font-weight: normal;
	color: #FF6600;
	text-decoration: none;
		}

		/* These 2 lines specify style applied while slider is loading */
#banner .csw {width: 1003px; height: 356px; background: #fff; overflow: hidden}
#banner .csw .loading {height: 356px; width:1003px; text-align: center; background: #fff; }

#banner .stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			/*border: 5px solid #000; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 1003px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 300px;
			clear: both;
			background: url(../img/banner/panel-back.jpg) no-repeat 0 0;
		}
		
#banner .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 1003px;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
#banner .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			margin-left:auto;
			margin-right:auto;
			height: 100%;
			position: relative;
			width: 1003px;; /* Also specified in  .stripViewer  above */
			}
			
#banner .stripViewer .panelContainer .panel.aboutUs {
			background: url(../images/index_03.jpg) no-repeat 0 0;
			height: 320px;
			
}			

#banner .stripViewer .panelContainer .panel.aboutUs.en {
			background: url(../images/index_03.jpg) no-repeat 0 0;
			height: 320px;
}	

#banner .stripViewer .panelContainer .panel.aboutUs .textContainer {
			width: 360px;
			overflow: hidden;
}

#banner .stripViewer .panelContainer .panel.aboutUs .textContainer p {
			font: 16px Arial, Verdana, Geneva, sans-serif;	
			color: #000;
			line-height: 24px;
			width: 310px;
			
		}

#banner .slider-wrap .textContainer p a {
			color: #d62500;
			/*background: url(../img/red_arrows.gif) no-repeat 0 5px;
			padding: 0 0 0 17px;*/
			padding: 0;
			background: none;
		}		

#banner .slider-wrap .textContainer p a:hover, #banner .slider-wrap .textContainer p a:focus {
			text-decoration: underline;
		}		
		
#banner .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			
			overflow: hidden;
		}
		
#banner .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
#banner .stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
#banner .stripNav ul li {
			float: left;
			padding-top:10px;
			font-weight:bold;
			line-height:1;
			/*margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
#banner .stripNav a { /* The nav links */
			font-family: Arial, Verdana, Geneva, sans-serif;	
			font-size: 18px;
			background: #edebee;
			color: #056186;
			text-decoration: none;
			display: block;
			padding: 0 10px;
			text-align: left;
		}

#banner .stripNav li.tab1 a { background:  color: #494949; width: 230px; text-align:left;}
#banner .stripNav li.tab2 a { background:  color: #494949; width: 230px; text-align:center;}
#banner .stripNav li.tab3 a { background:  color: #494949; width: 230px; text-align:center;}
#banner .stripNav li.tab4 a { background:  color: #494949; width: 230px; text-align:right}
		
#banner .stripNav li.tab1 a:hover, #banner .stripNav li.tab1 a:focus { color: #FF6600; /*url(../img/banner/tab-1.png) no-repeat 0 -78px;*/ }
#banner .stripNav li.tab2 a:hover, #banner .stripNav li.tab2 a:focus { color: #FF6600;/*url(../img/banner/tab-2.png) no-repeat 0 -78px;*/  }
#banner .stripNav li.tab3 a:hover, #banner .stripNav li.tab3 a:focus { color: #FF6600;/*url(../img/banner/tab-3.png) no-repeat 0 -78px;*/  }
#banner .stripNav li.tab4 a:hover, #banner .stripNav li.tab4 a:focus { color: #FF6600;/*url(../img/banner/tab-4.png) no-repeat 0 -78px;*/  }
#banner .stripNav li.tab5 a:hover, #banner .stripNav li.tab5 a:focus { color: #FF6600;/*url(../img/banner/tab-5.png) no-repeat 0 -78px;*/  }

#banner .stripNav li.tab1 a.current { background:   color: #FF6600; }
#banner .stripNav li.tab2 a.current { background: color: #FF6600; }
#banner .stripNav li.tab3 a.current { background: color: #FF6600; }
#banner .stripNav li.tab4 a.current { background:   color: #FF6600; }
#banner .stripNav li.tab5 a.current { background:   color: #FF6600; }

#banner .stripNav li.tab1 a span { color: #7c7c7c; display:block; font-size: 11px; line-height: 14px; }
#banner .stripNav li.tab2 a span { color: #7c7c7c; display:block; font-size: 11px; line-height: 14px; }
#banner .stripNav li.tab3 a span { color: #7c7c7c; display:block; font-size: 11px; line-height: 14px; }
#banner .stripNav li.tab4 a span { color: #7c7c7c; display:block; font-size: 11px; line-height: 14px; }
#banner .stripNav li.tab5 a span { color: #7c7c7c; display:block; font-size: 11px; line-height: 14px; }

#banner .stripNav li a:hover span, #banner .stripNav li a.current span, #banner .stripNav li a:focus span { color: #494b47; }

		/*.stripNav li a:hover {
			background: #333;
		}*/
		
		/*.stripNav li a.current {
			background: #000;
			color: #fff;
		}*/
		
#banner .stripNavL, #banner .stripNavR { /* The left and right arrows */
			/*position: absolute;*/
			top: 230px;
			
		}
		
#banner .stripNavL a, #banner .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
#banner .stripNavL {
			left: 0;
		}
		
#banner .stripNavR {
			right: 0;
		}
		
#banner .stripNavL {
			background: url("../img/banner/arrow-left.gif") no-repeat center;
		}
		
#banner .stripNavR {
			background: url("../img/banner/arrow-right.gif") no-repeat center;
		}
		
#banner .special {
			background: red;
		}
		
		
		
#banner a.arrows {
	background: url(../img/red_arrows.gif) no-repeat 0 4px;
	padding: 0 0 0 17px;
	color: #d62500;
}

#banner a.arrows:visited {
	background: url(../img/red_arrows.gif) no-repeat 0 -12px;
	color: #981a00;
}
		
		
		
/*--- SCREENSHOTS */		


#screenshots {
	overflow: hidden;
}

#screenshots .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 0;
	position: relative;
	width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
#screenshots .csw {width: 100%; height: auto; background: #fff; overflow: hidden}
#screenshots .csw .loading {margin: 200px 0 300px 0; text-align: center}

#screenshots .stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	/*border: 5px solid #000; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 550px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	/*height: 460px;*/
	height: auto;
	clear: both;
	background: #fff;
}

#screenshots .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

#screenshots .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 550px; /* Also specified in  .stripViewer  above */
}

#screenshots .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 0;
}

#content #screenshots .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

#content #screenshots .stripNav ul { /* The auto-generated set of links */
	list-style: none;
	overflow: hidden; 
	width: 200px;
	height: 30px;
	margin: 0;
}

#content #screenshots .stripNav ul li {
	float: left;
	margin-right: 10px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

#content #screenshots .stripNav a { /* The nav links */
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 20px;
	background: #f8f8f8;
	color: #656364;
	border: 1px solid #eeeeee; 
	border-bottom: 1px solid #c5c5c5;
	text-decoration: none;
	display: block;
	padding: 0;
	width: 22px;
	height: 22px;
	float: left;
	border-radius: 3px; /* CSS 3 */   
	-moz-border-radius: 3px; /* Gecko */   
	-webkit-border-radius: 3px; /* Webkit */
}

/*#content #screenshots .stripNav li.tab1 a { background: #60f }
#content #screenshots .stripNav li.tab2 a { background: #60c }
#content #screenshots .stripNav li.tab3 a { background: #63f }
#content #screenshots .stripNav li.tab4 a { background: #63c }
#content #screenshots .stripNav li.tab5 a { background: #00e }*/

#content #screenshots .stripNav li a:hover {
	color: #d72501;
}

#content #screenshots .stripNav li a:focus {
	background: #d72501;
	color: #fff;
}

#content #screenshots .stripNav li a.current {
	background: #d72501;
	color: #fff;
	border-bottom: 1px solid #ababab;
}



/*
#screenshots .stripNavL, #screenshots .stripNavR { /* The left and right arrows *//*
	position: absolute;
	top: 230px;
	text-indent: -9000em;
}

#screenshots .stripNavL a, #screenshots .stripNavR a {
	display: block;
	height: 40px;
	width: 40px;
}

#screenshots .stripNavL {
	left: 0;
}

#screenshots .stripNavR {
	right: 0;
}

#screenshots .stripNavL {
	background: url("images/arrow-left.gif") no-repeat center;
}

#screenshots .stripNavR {
	background: url("images/arrow-right.gif") no-repeat center;
}*/