/*****************************************
	CSSby nwonline.co.uk
	red #d14141
*****************************************/

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; overflow: auto}

#leftcontent_full {width:520px; float:left;padding:10px 10px 20px 20px; }
#leftcontent_projects {width:520px; float:left;padding:10px 10px 20px 20px; }

#leftcontent.full { overflow: visible !important; height: auto !important;}
#rightcontent {width:725px;float:right;padding:15px; margin: 0 0 10px 0 !important;}
#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;}
#main_wrap.full { width: 981px; height: auto; float: left;  left: 0; top: 0;}

.gmap { 
	float: right;
	width: 400px; height: 300px;
	padding: 2px;
	margin: 0 5px 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;}

/*Projects*/
#leftcontent_full ul.project {
	float: left;
	clear: both;
	margin: 0 0 0 0;
	position: relative;
	padding: 5px 0;
	width: 510px;
	list-style-type: none;
	list-style: none;
	font: normal 12px/26px sans-serif;}

#leftcontent_full ul.project span.pic {
	display: block;
	width: 240px; height: 240px;
	background: #fff; border: 1px solid #cecece;
	position: absolute;
	right: -250px;
	top: -1px;}

#leftcontent_full ul.project li {
	width: 510px;
	list-style-type: none; 
	list-style: none; 
	float: left; 
	clear: both;
	line-height: 26px;}
	
#leftcontent_full ul.project li label { float: left; width: 120px; display: block; height: auto; color: #333; font-weight: bold;}

#leftcontent_full ul.project li p { display: block; float: right; margin: 0; padding: 0; width: 380px; color: #333; line-height: 26px;}


ul.kc_projects {float: left;
	clear: both;
	margin: 10px 0 10px 0;
	position: relative;
	padding: 10px;
	width: 480px;
	/*border: 1px solid #ccc;*/
	list-style-type: none;
	list-style: none;
	font: normal 12px/26px sans-serif;
	/*background: url('../img/bg_fade.jpg') 0 1px repeat-x;*/}

ul.kc_projects li { width: 480px; list-style-type: none; list-style: none; float: left; clear: both; cursor: pointer;}
ul.kc_projects li a { color: #666; text-decoration: none}
ul.kc_projects li span.h { float: left; width: 480px; line-height: 26px; font-weight: bold; color: #C33; }
ul.kc_projects li a span.h { color: #C33;}
ul.kc_projects li span.p { float: left; width: 480px; line-height: 18px; font-weight: normal; color: #666; padding: 0 0 10px 0; border-bottom: 1px dotted #cecece; }
ul.kc_projects li a span.p { color: #666;}
ul.kc_projects li a:hover span{ color: #1a1a1a !important; cursor: pointer;}

/*Header Logo*/
#header span { width: 300px; 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: #666; 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: #666; padding: 0 0 0 10px; margin: 0;}

#footer .foot_sec ul{ margin: 0; padding: 0 0 0; float: left; width: 920px; list-style:none; text-align: center;}
#footer .foot_sec li { font: bold 11px/21px sans-serif; display: inline; 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: 80px; float: left; border-bottom: 1px dotted #ccc; padding: 5px 0;}
#footer #foot_accred img { float: left; width: 726px; height: 65px; padding: 0 0 0 20px;}
#footer #foot_accred #right { float: right; width: 230px; 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 0 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: #333; padding: 5px 10px 0 0;}
#leftcontent h3 {font: bold 12px sans-serif; color: #666666; padding: 5px 10px 0 0;}



#leftcontent_full p a, #leftcontent p a { color: #d14141; font: bold 12px sans-serif; text-decoration: underline;}
#leftcontent_full p a:hover, #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*/
div#contact-form { float: left;}
div.row { float: left; width: 360px; padding: 0 0 5px 0; position: relative;}

.label {
	float: left;
	clear: left;
	display: inline;
	width: 110px;
	padding: 2px 0px 2px 6px;
	margin: 0 10px 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	color: #444;}
	
.text { float: left; padding: 5px 3px; background: #fff; border: 1px solid #ccc; width: 200px; font-size: 12px; color: #666;}
.textarea { float: left; padding: 5px 3px; background: #fff; border: 1px solid #ccc; width: 200px; font-size: 12px; color: #666;}
#submit { float: left; font-size: 12px; font-weight: bold; color: #333; position: relative; left: 125px; padding: 4px 10px}

input.text:hover, .textarea:hover { border: 1px solid #999}
input:focus, textarea:focus { background: #FFC; border: 1px solid #999}

input.error { border: 1px dotted #C00 !important; background: #FFF2F2;}

label.error {
	font: bold 11px/20px 'Tahoma', Arial, sans-serif;
	position:absolute;
	top: -20px; left: 290px;
	min-width: 200px;
	max-width: 200px;
	padding:5px 10px;
	margin:0;
	color:#900;
	background:#FCC;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  	filter: alpha(opacity=80);
  	-moz-opacity: 0.8;
  	-khtml-opacity: 0.8;
  	opacity: 0.8;}

label.error:before {
	content:"\00a0";
	display:block;
	position:absolute;
	z-index: 0;
	bottom:-10px;
	left:20px;
	width:0;
	height:0;
	border-width:5px 5px;
	border-style:solid;
	border-color:#FCC transparent transparent;}




/*headers*/
h1 { color: #d14141; font: bold 22px/30px "Helvetica", Arial, sans-serif; padding: 0; margin: 0; letter-spacing: -1px;}
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: #d14141;
	-moz-border-radius-topright: 5px; 
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px; 
	-webkit-border-top-left-radius: 5px;}
#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: #C00 !important; background: #f9f9f9 url('../img/topmenu_selected.jpg') 0 0 repeat-x;}
#topmenu li a:hover{ color: #000;}
#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: #d14141 url('../img/sub_nav_bg.png') 0 0 repeat-x !important;margin: 0 !important;text-align: left; z-index: 10 !important;
	-moz-border-radius-bottomright: 5px; 
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px; 
	-webkit-border-bottom-left-radius: 5px;}
#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;}