/*
Description:	CSS 2011
Author:			Visualcode Limited
Date: 			October 2012
Version:		1.0
*/

@import url('css/generalform.css');
@import url('css/fancybox.css');
@import url('css/cookie.css');
@import url('css/vcbanner.css');
@import url('css/coda-slider.css');

/*---------------------------Grid -----------------------------*/

.bannerTextOverlay{
	font-weight:700;
	}	

.toggle{
	background:#009FB2;
	position:absolute;
	right:10px;
	top:0;
	z-index:1000;
	display:none;
	}
	
#GridContainer{
	display:none;
	z-index:100;
	position:absolute;
	height:100%;
	top:0px;
	width:100%;
	padding:0px 0px 0px 0px;
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	}

#Grid{
	margin:0 auto;
	height:100%;
	top:0px;
	width:960px;
	background:pink;
	padding:0px 0px 0px 20px;
	}
	
#Grid div{
	width:60px;
	margin-right:20px;
	background:purple;
	height:100%;
	float:left;
	color:#000;
	font-weight:bold;
	font-size:10px;
	}


/*---------------------------Global Start -----------------------------*/

body { 
	font:13px/20px trebuchet ms, Arial,Helvetica,sans-serif;
	margin:0px;
	padding:0px;
	color:#333;
	background:#C2C6C9;
	text-align:center;
	}

input, 
button, 
select, 
textarea {
	font:13px/20px trebuchet ms, Arial,Helvetica,sans-serif;
	}

a:link {
	color:#174A7C; 
	text-decoration: none;
	}

a:visited {
	color:#174A7C;
	text-decoration: none;
	}

a:active {
	color: #C2C6C9;
	text-decoration: none;
	}

a:hover {
	color: #C2C6C9;
	text-decoration: none;
	}

a img{
	border:none;
	}


h1, h2, h3, h4{
	font-weight:700;
	line-height:normal;
	}
	
h1 {
	font-size: 29px;
	font-weight:bold;
	margin-top:0px;
	padding-top:0px;
	color:#174A7C;
	
	}
	
h1 span{
	display:block;
	float:left;
	padding-bottom:20px;
	padding-left:20px;
	background: url(/images/stripe_10.png) repeat-x left bottom;
	}


h2 {
	font-size:25px;
	margin-top:0px;
	color:#174A7C;
	}

h2 span{
	display:block;
	float:left;
	padding-bottom:10px;
	padding-left:20px;
	background: url(/images/stripe_5_grey.png) repeat-x left bottom;
	}


h3 {
	font-size:21px;
	color:#174A7C;
}

h4 {
	font-size:15px;
	font-weight:400;
	margin-top:0px;
}

hr {
	border: none;
	height: 1px;
	margin: 10px auto;
	padding: 0px !important;
	color:#FFF;
	clear:both;
	border-top:#D068B3 solid 1px;
	}

p{
	margin:10px 0;
	}

.instruction{
	display:block;
	padding:5px 10px;
	margin:0px 0px 10px 0px;
	font-size:12px;
	background:#FFFFcc;
	border:#FFFF66 dotted 1px;
	}
	
div{position:relative; min-width:0px} /* IE 6/7 Picaboo bug fix */

pre {
    display: inline;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.thumbend{margin-right:0 !important;}
	
table{margin:0; border-collapse:collapse; width:100%; border:#C2C6C9 solid 1px;}	
table td{padding:5px; font:13px "trebuchet ms", arial, helvetica, sans-serif; border:#C2C6C9 solid 1px; vertical-align:top;}	
table td.five{padding:5px;}
table thead td{background:#C2C6C9; font-weight:bold; color:#FFF; padding-left:5px; font-weight:normal; }
table thead td.none{border-right:none;}	

.clear{clear:both; text-align:center; padding-top:5px;}

a.button,
.clear a{
	padding:5px 10px !important;
	border:0;
	color:#FFF;
	font-weight:bold;
	background:#174A7C;
	}

a:hover.button,
.clear a:hover{
	background:#C2C6C9;
	color:#FFF;
	text-decoration:none;
	}

#container{
	padding:20px 0px 0px 0px;
	margin:0px auto;
	border:none;
	position:relative;
	text-align:center;
	background:#FFF;
	}
	
#header {
	width:980px;
	padding:0px;
	margin:0px auto 0px auto;
	padding-top:00px;
	text-align:left;	
	position:relative;
	}

#headCont{
	position:relative;
	}

.headCol1{width:320px;float:right;}


#Logo {
	margin:0px;
	padding:0px 0px 0px 0px;
	text-align:left;
	width:260px;
	height:70px;
	background:#174A7C;
	float:left;
	margin-bottom:10px;
	}

#strap{
	font-weight:700;
	color:#174A7C;
	text-align:right;
	float:right;
	width:700px;
	padding-top:20px;
	font-size:32px;
	line-height:40px;
	position:relative;
	overflow:hidden;
	}

#strap span.overlay{
	display:block;
	background: url(/images/white_grad_45.png) repeat-x;
	height:50px;
	width:700px;
	position:absolute;
	z-index:10;
	top:10px;
	left:0px;
	}

/* ______________________ Quick Basket ______________________ */

#topNav{
	height:70px;
	padding-left:20px;
	}

#topNav ul{
	margin:0;
	padding:0px;
	list-style:none;
	font-size:11px;
	}

#topNav ul li{
	float:left;
	margin-right:10px;
	border-right:#CCC solid 1px;
	padding-right:10px;
	}

#topNav ul li a{
	display:block;
	color:#CCC
	}
#topNav ul li a:hover{color:#174A7C}	


/* ______________________ Navigation ______________________ */

#Nav{ 	
	clear:both;
	height:40px;
	margin:0px auto;
	text-align:left;
	width:980px;
	border-top:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
	margin-bottom:20px;
	background:#C2C6C9 url(/images/navBack.png) repeat-x;
	position:relative;
	}


#NavInner{
	height:40px;
	position:relative;
	}

#Nav ul{
	clear:both;
	margin:0px;
	padding:0px 0px 0px 0px;
	text-align:center;
	list-style:none;
	padding-left:20px;
	position:relative;
	}

#Nav ul li{
	float:left;
	display:block;
	position:relative;
	border-left:#FFF solid 1px;
	}

#Nav ul li.end{
	padding-right:0px;
	background:none;
	border-right:#FFF solid 1px;
	}

#Nav ul li a{
	display:block;
	padding:0px 10px 0px 0px;
	color: #333;
	position:relative;
	height:20px;
	padding:10px 20px 10px 20px;
	border-right:#C2C6C9 solid 1px;
	border-left:#C2C6C9 solid 1px;
	font-weight:bold;
	text-shadow:#FFF 0px 1px 1px;
	}

#Nav ul li a:hover{	
	background:#ECECEC;
	}

#Nav ul li a.on{
	color:#FFF;
	background:#174A7C;
	border-right:#0b3258 solid 1px;
	border-left:#0b3258 solid 1px;
	text-shadow:none;
	}

#Nav ul li a:hover.on{
	color:#FFF;
	background:#174A7C;
	}


#Nav ul li a.on span{
	width:13px;
	height:9px;
	display:block;
	background:url(/images/drop_arrow.png) no-repeat;
	position:absolute;
	z-index:10;
	right:10px;
	bottom:-9px;
	}




/* ______________________ Coda Slider ______________________ */

#bannerarea{
	width:980px;
	height:325px;
	margin:0 auto;
	margin-bottom:20px;
	}

#bannerarea h2{
	text-align:left;
	height:75px;
	padding:20px 0px 0px 20px;
	margin:0px;
	font-size:35px;
	font-weight:normal;
	text-shadow:0px !important;
	}

#slideArea{
	height:280px;
	overflow:hidden;
	position:relative;
	}

#bannerarea .coda-nav-left, #bannerarea .coda-nav-right{
	height:80px;
	width:20px;
	position:absolute;
	top:210px;
	z-index:1000;
	}
	
#bannerarea .coda-nav-left{left:-15px;}
#bannerarea .coda-nav-right{right:-15px;}

#bannerarea .coda-nav-left a{display:block; height:80px; width:20px; background:transparent url(/images/banner_left_over.png) no-repeat -5px;}
#bannerarea .coda-nav-right a{display:block; height:80px; width:20px;  background:transparent url(/images/banner_right_over.png) no-repeat 5px;}
 
#bannerarea .coda-nav-left a:hover{background:transparent url(/images/banner_left.png) no-repeat -5px;}
#bannerarea .coda-nav-right a:hover{background:transparent url(/images/banner_right.png) no-repeat 5px;}

#slideArea .panel { float:left; width:160px; }
#slideArea .panel-thumb { float:right; width:140px;}

#slideArea a{ border:1px solid #FFF; display:block; width:138px;}


/* ______________________ Layout of Content Areas ______________________ */


#wrapper {
	margin:0px auto;
	width:980px;
	position:relative;
	text-align:left;
	}

.content_490{
	float:left; 
	width:490px; 
	padding:0px 0px 0px 0px; 
	margin:0px 0px 20px 0px;
	}

.content_980{
	clear:both;
	padding:0px 0px 20px 0px;
	margin:0px;
	}
	
.content_offset{
	clear:left;
	padding:1px 20px;
	}	
	
	
.block3{
	float:left;
	width:320px;
	margin-right:10px;
	padding-top:10px;
	}

.padbottom{
	padding-bottom:20px;
	}	
	
.block3 h3{
	margin:0px;
	padding:5px 0px 10px 20px;
	background:url(/images/stripe_5_grey.png) repeat-x left bottom;
	}	

.block3 p{
	font-size:11px;
	padding:0px 0px 0px 20px;
	}	

.block3 a{margin-left:20px;}

.end{margin-right:0px !important;}
	
#mainContent{
	width:720px;
	float:right;
	margin-right:0px;
	margin-bottom:20px;
	}	

#mainContent h1{
	background:url(/images/stripe.png) repeat-x left bottom;
	padding-bottom:20px;
	}
	
#leftnav{
	float:left;
	width:240px;
	margin-left:0px;
	}	

#leftnav .section h2{
	margin:5px 0px 5px 0px;
	padding:0px 0px 10px 20px;
	font-size:17px;
	background: url(/images/stripe_5_blue.png) repeat-x left bottom;
	}
	
#leftnav .section ul{
	list-style:none;
	margin:0px 0px 20px 0px;
	padding:0px;
	}
	
#leftnav .section ul li{
	margin:0px;
	padding:0px;
	display:block;
	}

#leftnav .section ul li a{
	display:block;
	padding:5px 0px 5px 20px;
	background:url(/images/arrow_black.png) no-repeat 0px 8px;
	border-bottom:#C2C6C9 solid 1px;
	color:#333;
	font-weight:bold;
	}

#leftnav .section ul li a:hover{
	background:#C2C6C9 url(/images/arrow_white.png) no-repeat 0px 8px;
	color:#FFF;
	text-decoration:none;
	}
	
#leftnav .section ul li a.on{
	color:#FFF;
	text-decoration:none;
	background:#174A7C url(/images/arrow_white.png) no-repeat 0px 8px;
	}
	
#leftnav .section p{
	padding-left:20px;
	}	
	
#wrapperBottom {
	clear:both;
	height:325px;
	padding-bottom:0px;
}

/* ______________________ Footer Navigation ______________________ */
	
#foot_navigation{
	clear:both;
	padding:10px 0px;
	margin-bottom:20px;
	width:980px;
	margin:0px auto;
	text-align:left;
	background:#c2c6c9 url(/images/stripe_5_white.png) repeat-x left bottom;
	color:#333;
	text-shadow:#FFF 0px 1px 1px;
	}

#foot_navigation h3{
	margin:0px;
	padding:0px;
	font-size:17px;
	padding-bottom:20px;
	background:url(/images/stripe_5_white.png) repeat-x left bottom;
	font-weight:bold;
	border-bottom:0px !important;
	
	}

#foot_navigation .footerColumn{
	width:220px;
	float:left;
	margin-left:20px;
	}

#foot_navigation .footerColumn ul{
	list-style:none;
	margin:0px;
	padding:0px;
	padding-top:10px;
	padding-bottom:10px;
	}

#foot_navigation .footerColumn ul li{line-height:25px;}

#foot_navigation .footerColumn ul li a{color:#333; background:url(/images/arrow_black.png) no-repeat; padding-left:20px;}
#foot_navigation .footerColumn ul li a:hover{color:#174A7C; background:url(/images/arrow_blue.png) no-repeat;}

#foot_navigation .footerColumn ul li label{display:block; float:left; width:20px; color:#333;}

#foot_navigation .icons ul li{padding-left:0px;}

/* ______________________ Footer ______________________ */

#footContainer { padding-top:10px; clear:both; background:url(/images/footer.png) no-repeat left top; height:205px;}

#footer {
	color: #FFF;
	margin:0 auto;
	width:980px;
	text-align:center;
	margin-bottom:20px;
	font-size:13px;
	line-height:22px;
	padding-top:10px;
	}
	
#address{
	text-align:right;
	float:right;
	margin-right:0px;
	width:470px;
	font-size:10px;
	}	

#address a{color:#FFF;}
#address a:hover{color:#FFF;}

#copyright{
	float:left;
	font-size:10px !important;
	width:470px;
	text-align:left;
	margin-left:0px;
	}
	
/* Home Page */

#home_intro{
	width:480px;
	float:left;
	margin-bottom:20px;
	}
	
#home_adv_search{
	background:#009FC2 url(/images/white_grad_45.png) repeat-x;
	margin-left:20px;
	width:440px;
	padding:0px 20px 20px 20px;
	float:left;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-bottom:20px;
	}

#home_adv_search h3{color:#FFF; margin:20px 0px 10px 0px;}

#home_adv_search label{
	font-weight:bold;
	font-size:11px;
	color:#FFF;
	width:70px;
	padding:0px;
	}	
	
#home_adv_search input{border:0px; width:360px;}

#home_adv_search input.button{width:140px;}
	
/* Gallery */

.thumbs { margin-top:0px; float:left; }
.thumbs a { float:left; margin:0px 20px 20px 0px; }
.thumbend a{margin:0px 0px 20px 0px !important;}

/* Form */

.contact_form{
	padding:10px 0px;
	margin-bottom:25px;
	}

.contact_form label{
	font-size:11px;
	width:70px;
	padding-left:10px;
	overflow:hidden;
	margin-right:10px;
	}	

.contact_form select, .contact_form input, .contact_form textarea{
	padding:5px;
	border:none;
	margin:0px;
	float:left;
	}

.contact_form input{width:200px;}
.contact_form textarea{clear:left; width:200px; }

.contact_form input.button{
	width:70px;
	border:0;
	}
	
.contact_details{
	font-size:15px;
	background:url(/images/contact-icon.jpg) no-repeat 10px 0px;
	padding-left:80px;
	}


/* ______________________ Data Grid ______________________ */
	
table.datatable{
	width:100%;
	border-collapse:collapse;
	}

table.datatable thead td{
	background:#000;
	color:#FFF;
	font-weight:bold;
	}
	
table.datatable tbody td{
	font-size:12px;
	}

table.datatable tbody td h2{
	font-size:15px;
	color:#84b968;
	font-weight:bold;
	}

table.datatable tbody td a.button{
	display:block;
	margin-bottom:10px;
	text-align:center;
	}

	
/* ______________________ Contact ______________________ */	


	
.greybox label._vcs__applicants_address{
	display:block;
	font-weight:normal;
	font-size:15px;
	float:none;
	display:none;
	}	
	
#contact #left{
	width:500px;
	float:left;
	}

#contact #left input{width:220px;}
	
#contact #right{
	width:220px;
	float:right;
	clear:none;
	}

#contact label{width:100px;}

#contact textarea{width:700px;}

/* ______________________ Catalogue Request Form ______________________ */	

.catalogue_request{
	margin:0px;
	padding:0px;
	}
	
.catalogue_request h4 span{
	background:#009FC2;
	float:left;
	display:block;
	text-align:center;
	margin-right:5px;
	width:20px;
	height:18px;
	padding-top:2px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	font-weight:bold;
	color:#FFF;
	font-family: trebuchet ms, helvetica, arial, sans;
	font-size:12px;
	}
	
.catalogue_request .options .layout{
	width:220px;
	float:left;
	clear:none;
	margin-left:20px;
	}

.catalogue_request .options .layout label{
	width:190px !important;
	padding:0px;
	font-size:12px;
	font-weight:bold;
	}


/* ______________________ Register ______________________ */	

.register span.error{
	display:block !important;
	float:none !important;
	clear:left;
	}

.register .left, .register .right{
	width:460px;
	padding:10px;
	background:#F2F2F2;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin-bottom:20px;
	}

.register .left{
	float:left;
	
	}

.register .right{
	clear:none;
	float:right;
	}


.register label._vcs__customers_billingaddress{
	display:block;
	width:400px !important;
	font-weight:normal;
	font-size:23px !important;
	margin-top:0px;
	color:#009FC2;
	font-family: Georgia, Times, serif;
	padding:10px 0px 20px 0px;
	}
	
.register .submitCenter{
	text-align:center;
	padding:10px 0px;
	}

.register .submitCenter p{
	padding:10px;
	}

/* ______________________ Styles ______________________ */

.style{padding-bottom:10px;}

.style h3{margin:0px; padding:0px;}

.style .thumbs{
	margin:0px;
	padding:0px;
	width:220px;
	height:200px;
	float:left;
	}

.style .description{
	float:right;
	width:700px;
	}


.style .clear{
	clear:both;
	height:20px !important;
	border-bottom:#ECECEC solid 1px;
	}

/* ______________________ PRODUCTS ______________________ */


/* Product Description Layout */

#product {
	width:720px;
	}

#product .productImages{
	width:220px;
	padding:20px;
	background:#C2C6C9;
	float:right;
	text-align:center;
	margin-left:20px;
	margin-bottom:20px;
	}

#product .lrgImage{
	width:218px;
	height:218px;
	position:relative;
	border:#FFF solid 1px;
	}
	
#product .lrgImage .imgMag{
	width:23px;
	height:25px;
	background:url(/images/magnify.png) no-repeat;
	position:absolute;
	bottom:5px;
	right:5px;
	}
	
#product .productImages .thumb{
	float:left;
	margin-top:5px !important;
	margin-right:5px;
	border:#FFF solid 1px;
	width:68px;
	height:68px;
	}	

#product .productImages .thumb img{float:left;}


/* ______________________ Facilities ______________________ */

#facilitiesMap{
	width:720px;
	height:500px;
	background: url(/images/facilities.png) no-repeat left bottom;
	position:relative;
	}

#facilitiesMap table td{font-size:11px; font-weight:bold;}

#facilitiesMap .object{
	color:#FFF;
	font-weight:bold;
	font-size:10px;
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	background:url(/images/dot_21.png) no-repeat;
	line-height:20px;
	text-align:center;
	}

#facilitiesMap .object a{color:#FFF;}

#marker1{top:470px; left:100px; z-index:11;}
#marker2{top:440px; left:290px; z-index:12;}

/* ______________________ links ______________________ */

table.links h3{
	margin:0px;
	background: url(/images/stripe_5_grey.png) repeat-x left bottom;
	padding-bottom:5px;
	margin-top:10px;
	}

table.links, table.links td {border:0px;}

/* ______________________ News ______________________ */

.newsShort{
	margin-bottom:20px;
	}

.newsShort h2{
	margin:0px;
	background: url(/images/stripe_5_grey.png) repeat-x left bottom;
	padding:0px;
	padding-bottom:5px;
	position:relative;
	padding0right:70px;
	}

.newsShort h2 span{
	display:block;
	height:30px;
	margin:0px;
	padding:0px;
	background: url(/images/news.png) no-repeat;
	width:55px;
	position:absolute;
	z-index:10;
	right:0px;
	bottom:-5px;
	text-align:center;
	font-weight:bold;
	color:#FFF;
	font-size:12px;
	padding-top:10px;
	padding-left:5px;
	}

.RSS{
	padding-left:35px;
	margin-left:20px;
	font-weight:bold;
	padding-top:7px;
	padding-bottom:5px;
	background:url(/images/feed_icon.png) no-repeat left top;
	}
	
/* ______________________ Download ______________________ */

.download{
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:#CCC dotted 1px;
	}

.download h3{
	margin:0px;
	background: url(/images/stripe_5_grey.png) repeat-x left bottom;
	padding:0px;
	padding-bottom:5px;
	position:relative;
	}
	
span.downloadfile{
	display:block;
	background: url(/images/download.png) no-repeat 0px 3px;
	padding-left:20px;
	}