/*****************************************
	Elec Tech CSSby nwonline.co.uk
*****************************************/

body { background: #fff; font-family: "Arial", Gadget, sans-serif; margin: 10px 0}
em { font-style: italic;}

/*components*/
#index-wrapper {width:981px;height:auto;margin:0 auto; padding: 0;overflow: hidden;}
#navbox {height:110px;width:100%;margin:0 auto;}
#header {width:981px;height:110px;background:url('../images/site/HEADER.jpg') 0 0 no-repeat; margin: 0 auto; overflow: hidden;}
#maincontent{width:981px;height:auto;background:#FFF;float: left; border-top: 1px solid #cecece; padding: 10px 0 0 0; margin: 10px 0 0 0}
#leftcontent {width:520px; height: 360px;float:left;padding:10px 10px 20px 20px; border-right: 1px solid #ccc; overflow: auto}
#leftcontent_full {width:520px; float:left;padding:10px 10px 20px 20px; border-right: 1px solid #ccc;}
#leftcontent.full { overflow: none !important;}
#rightcontent {width:725px;float:right;padding:15px}
#legalcontent {width:820px;height:auto;float:left;background: #fff;padding: 25px 40px}
#rightcontent { float: right; width: 400px; height: 390px; padding: 0; margin: 0 20px 0 0}
#main_wrap { width: 981px; height: 400px; float: left;  left: 0; top: 0; overflow: hidden;}

.gmap { 
	float: right;
	width: 130px; height: 130px;
	padding: 2px;
	margin: 0 30px 0 0;
	background: #fff; 
	border: 1px dotted #ccc;}

.gmap img { border: none !important;} 
.gmap img a{ border: none !important;} 

dl { float: left; font: normal 12px/20px sans-serif; width: 510px;}
dt { float: left; font: bold 12px/20px sans-serif; width: 510px; color: #000;}
dd { float: left; clear: both; font: normal 12px/20px sans-serif; width: 510px; color: #666; margin: 0 0 10px 0;}

#rightcol_contact { 
	float: right; 
	width: 410px;}

#rightcol_contact p { margin: 0; padding: 0;}
#rightcol_contact p small { font: normal 11px/18px Tahoma;}
#rightcol_contact p small a { color: #333; margin: 0 0 10px 0;}
#rightcol_contact address { 
	font: normal 12px/19px sans-serif; 
	color: #666; 
	font-style: italic;
	float: left;
	width: 400px; 
	padding: 10px 0;}


/*Header Logo*/
#header span { width: 163px; height: 97px; display: block; float: left; position: relative; left: 0; top: 5px; background: #fff url('../img/head_logo.jpg') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
#header img { float: right; position: relative; top: 35px; display: block; }

/*footer*/
#footer{ width: 100%; height: 60px; background: url('../images/site/foot-bg.jpg') repeat-x;	border-top: 1px solid #ccc; clear:both; padding: 5px 0; color: #6b8db3; font: bold 12px sans-serif;}
#footer a { color: #2873b2;font: bold 12px sans-serif;}
#footer a:hover { text-decoration: underline;}
#footer .footer_gen_links-left { float: left;padding: 10px;}
#footer .footer_gen_links-right { float: right;padding: 10px;}
#footer #foot_sub_wrap { width: 960px; padding: 0;	float: left; margin: 0;}
#footer .footer { font: normal 11px/21px sans-serif;}
#footer .footer a { font: bold 11px/21px sans-serif; color: #666;}
#footer .footer a:hover { font: bold 11px/21px sans-serif; color: #06C;}
#footer #foot_sub_left { width: 365px; float: left;	margin: 0; padding: 0;	text-align: left;}
#footer #foot_sub_right { width: 365px;	float: right; margin: 0; padding: 0; text-align: right;}
#footer #foot_sub_right p { font: normal 12px/45px sans-serif; margin: 0; padding: 0; color: #2873b2; text-align: right;}
#footer #foot_sub_mid { width: 190px; float: left; margin: 0; padding: 0; text-align: center;}
#footer .foot_sec {	width: 20%;	float: left; padding: 10px 15px; margin: 0;}
#footer .foot_sec h4 { font: bold 12px/21px sans-serif; color: #06C; padding: 0 0 0 10px; margin: 0;}

#footer .foot_sec ul{ margin: 0; padding: 0 10px 0; float: left; width: 920px; list-style:none; text-align: center;}
#footer .foot_sec li { font: bold 11px/21px sans-serif; display: inline-block; float: left; padding: 0 7px 0 7px; width: auto; border-left: 1px dotted #999;}
#footer .foot_sec li a { list-style-type: none; font: bold 12px/21px sans-serif; color: #666 !important;}
#footer .foot_sec li a:hover{ list-style-type: none; margin: 0; font: bold 12px/21px sans-serif; color: #2873b2 !important;}
#footer .foot_sec li:first-child { padding: 0 7px 0 0 !important; border-left: none !important;} 

#footer #foot_accred { width: 981px; height: 65px; float: left; border-bottom: 1px dotted #ccc; padding: 5px 0;}
#footer #foot_accred img { float: left; width: 485px; height: 65px; padding: 0 0 0 20px;}
#footer #foot_accred #right { float: right; width: 360px; height: 60px; padding: 5px 0 0 0; text-align: right;}
#footer #foot_accred #right address { font: normal 11px/20px 'Tahoma', sans-serif; font-style: italic; margin: 0 20px 0 0;}

/*Typography*/
p {color: #666; font: normal 12px/20px sans-serif;}
a:link, a:visited {	text-decoration: none;}
a:hover, a:active { text-decoration: underline;}

#leftcontent h2 {font: bold 12px sans-serif; color: #2873b2; padding: 5px 10px 0 0;}
#leftcontent h3 {font: bold 12px sans-serif; color: #666666; padding: 5px 10px 0 0;}

#leftcontent p a { color: #2873b2; font: bold 12px sans-serif; text-decoration: underline;}
#leftcontent p a:hover { color: #666; font: bold 12px sans-serif; text-decoration: none;}
#leftcontent blockquote { font: normal 12px/19px sans-serif; color: #666; font-style: italic; margin: 10px 40px 10px 40px; border-left: 2px solid #2873b2; padding: 5px 0 5px 10px;}
#leftcontent blockquote p { font-style: italic;}
#leftcontent ul { clear: both; padding: 10px 0; width: 500px; list-style-type: disc !important; list-style: disc !important; margin: 0;}
#leftcontent ol { clear: both; padding: 10px 0; width: 500px; list-style-type: decimal !important; list-style: decimal !important; margin: 0;}
#leftcontent ul li { font: normal 12px/19px sans-serif; color: #666; list-style-type: disc !important; list-style: disc !important; margin: 0 0 0 30px}
#leftcontent ol li { font: normal 12px/19px sans-serif; color: #666; list-style-type: decimal !important; list-style: decimal !important; margin: 0 0 0 30px}

#leftcontent address { font: normal 12px/19px sans-serif; color: #666; font-style: italic;}
#leftcontent abbr { cursor:help; background: url('../images/site/dotted.jpg') 0 bottom repeat-x; font: bold 12px/19px sans-serif;}
#leftcontent em { font-style: italic;}
#leftcontent code { background: #FFC; font: bold 12px/21px "Courier New", Courier, monospace; padding: 4px; border: 1px dotted #CCC; color: #333}
#maincontent address { font: normal 12px/19px sans-serif; color: #666; font-style: italic;}

/*Gallery*/
#leftcontent .gallery { float: left; list-style-type: none !important; list-style: none !important; width: 620px; padding: 0 0 10px 0; margin: 0;}
#leftcontent .gallery li { width: 126px; height: 106px; float: left; border: 1px solid #ccc; padding: 1px; background: #fff; margin: 0 0 0 27px; list-style-type: none !important; list-style: none !important;}
#leftcontent .gallery li:first-child { margin: 0;}

/*Contact Forms*/
#contact-form_dup { width: 580px; padding: 15px 10px 10px 10px; float: left; margin: 10px 0; background: #F7F7F7; border-top: 1px solid #dedede; border-bottom: 1px solid #ccc; overflow: hidden;}
#contact-form_dup form { float: left; width: 500px; margin: 0 0 0 40px; }
#contact-form_dup label { width: 220px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666;}
#contact-form_dup label#textarea{ width: 220px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666; height: 110px;}
#contact-form_dup label.full { width: 440px;}
#contact-form_dup input { float: right; font: normal 12px/21px sans-serif; color: #666; width: 260px; margin: 2px 0; padding: 2px 4px;}
#contact-form_dup #submit { width: 90px; float: right; margin: 0; clear: both;} 
#contact-form_dup textarea { font: normal 12px/18px sans-serif; color: #666; padding: 4px; float: right; width: 260px; height: 110px; margin: 0;}	
#contact-form_dup select { font: normal 12px/23px sans-serif; color: #666; height: 23px; float: right; width: 272px; margin: 0;}
#contact-form_dup small { font: normal 11px/34px sans-serif; color: #666;}
#contact-form_dup em { font-style: italic;}

/*headers*/
h1 { color: #1e5e96; font: normal 27px/30px "Arial Narrow", Arial, sans-serif; padding: 0; margin: 0; text-transform: uppercase !important;}
h2 { font: normal 12px/20px sans-serif; color: #936; padding: 5px 10px 0 0;}
h4 { font: bold 12px/20px sans-serif; color: #333;}

/*Navigation*/
.navigation-wrapper { width: 981px; background: #FFF; float: left; font-family: Arial, Helvetica, sans-serif; height: 35px;}
#topmenu { width: 966px; float: left;font-family: Arial, Helvetica, sans-serif;margin: 0 0 14px 0;padding: 0 0 0 15px;background: #002650}
#topmenu li {float: left;position: relative;height: 35px; font-weight: bold; letter-spacing: 0px; font-size: 12px;list-style: none;	}
#topmenu li a { display: block; padding: 0 15px;color: #fff; font: bold 12px/35px sans-serif;text-decoration: none;}
#topmenu li a.selected{ color: #fff !important; background: #298ce9}
#topmenu li a:hover{ color: #298ce9;}
#topmenu li ul {list-style: none;position: absolute;visibility: hidden;overflow: hidden;top: 35px;left: 0;float: left;z-index: 100;padding: 5px 10px 10px 10px;width: 220px;background: #002650 url('../img/sub_nav_bg.png') 0 0 repeat-x !important;margin: 0 !important;text-align: left; z-index: 10 !important;}
#topmenu li.hover ul,
#topmenu li:hover ul { visibility:visible;  z-index: 10 !important}
#topmenu li li {margin: 0 !important;padding:0 !important;text-align: left;height: 30px !important;float: left;clear: both;width: 220px;font: bold 12px/25px sans-serif !important; background: url('../images/site/png_dn.png') 0 28px repeat-x;}
#topmenu li li:first-child { border: none !important;}
#topmenu li li a {font: bold 12px/25px sans-serif !important;width: 220px !important;color: #FFF;margin: 0 0 0 0px;padding: 0 10px !important;text-decoration: none;}
#topmenu li li a:before { content: '// ' }
#topmenu li li a:hover {color: #fff !important;text-decoration: underline !important;}

/*contact fields*/
.contactfield {	border: #ccc 1px solid; font: normal 12px/20px sans-serif; width: 194px; padding: 2px; color: #666;}	
.contactlabel { clear: left; padding: 2px; display: inline; float: left; margin: 0 10px 10px 0; width: 150px; color: #4b4b4b; font: normal 12px/20px sans-serif;}
.contactfieldwrap {	margin-bottom: 5px}

hr { background: #fff; border-left: none; border-right: none; border-top: 1px dotted #666; border-bottom: none;}
/*right col*/
.right-col-box-wrapper-1 { width: 320px; height: 125px; padding: 0;	margin: 0 0 10px 0;	float: left; background: url('../images/site/north-west.jpg') no-repeat; border: 1px solid #CCC;}
.right-col-box-container-1 { width: 200px; height: 55px; padding: 60px 10px 10px 10px; margin: 0; float: left;}

/*left col nav*/
#leftcol_short { float: left; width: 212px; padding: 20px 0 20px 10px;}
#leftcol_short ul { list-style-type: none; font: bold 12px/24px sans-serif;}
#leftcol_short li { float: left; position: relative; clear: both; display: block; width: 212px;}
#leftcol_short li a { border-top: 1px solid #fff; border-bottom: 1px solid #ccc; padding: 0 0 0 30px; display: block; background: #eee url('../images/site/chevron.jpg') 10px 8px no-repeat; color: #666;}
#leftcol_short li a:hover{ background: #fff url('../images/site/chevron.jpg') 10px 8px no-repeat; color: #2171af;}
#leftcol_short li#bot { background: url('../images/site/left_nav_bot.jpg') 0 0 no-repeat; height: 12px;}
#leftcol_short li#top { background: url('../images/site/left_nav_top.jpg') 0 0 no-repeat; height: 35px;}
#leftcol_short li#top { font: bold 12px/35px sans-serif; color: #29588c; padding: 0 0 0 10px; border-bottom: 1px solid #ccc; width: 202px;}

/*Right Col Boxes*/
#rightcol ul { list-style-type: none; padding: 0;}
#rightcol li { width: 274px; height: 131px; position: relative; float: left; background: #252525 url('../images/site/rc_bg.jpg') 0 0 repeat-x; margin: 10px 0 10px 0; padding: 5px 18px 0 18px; border-top: 1px solid #dedede; border-bottom: 1px solid #8f8f8f;}
#rightcol li:first-child { margin: 0 !important;}
#rightcol li h3 { color: #333; font: normal 21px/27px "Arial Narrow", Arial, sans-serif; letter-spacing: -1px; display: block; width: 122px; overflow: hidden !important;}
#rightcol li p { font: normal 12px/16px sans-serif; color: #2873b2; z-index: 2; display: block}
#rightcol li p a { font: bold 12px/16px sans-serif; color: #004ec2; text-decoration: underline; z-index: 2; display: block}
#rightcol li p a:hover { font: bold 12px/16px sans-serif; color: #2873b2; text-decoration: none; z-index: 2; display: block}
#rightcol li#accred { background: #fff url('../images/site/rc_accred.jpg') center center no-repeat; border: none; height: 80px; }

#rightcol li span { width: 274px; height: 135px; display: block; float: right; position: absolute; right: 0; top: 0; padding: 5px 18px 0 18px;}
#rightcol li#rc1 {background: url('../images/site/rc_1.jpg') -15px 0 no-repeat;}
#rightcol li#rc2 {background: url('../images/site/rc_2.jpg') -15px 0 no-repeat;}
#rightcol li#rc3 {background: url('../images/site/rc_3.jpg') -15px 0 no-repeat;}
#rightcol li#rc4 {background: url('../images/site/rc_4.jpg') -15px 0 no-repeat;}