/*

JSC Electrics (screen) style sheet
===============================================

Theme Name: 	JSC Electrics
Theme URI: 		http://jscelectrics.co.uk/
Description: 	2011 Theme for JSC Electrics
Version: 		1.0.0

Author: 		John Metcalfe
Author URI: 	http://discoverydesign.co.uk/
Last Edit:		21/07/2011 by John Metcalfe

/*

/* RESETS
=============================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:					0;
font-weight:			inherit;
font-style: 			inherit;
font-size: 				100%;
font-family: 			inherit;
margin: 				0;
padding:				0;
outline: 				0;
vertical-align: 		baseline;
}

:focus {
outline: 				0;
}

body {
background:  			#f3f3f3 url(graphics/bg_base.jpg) repeat;
color: 					#333;
font: 					62.5% "proxima-nova-1","proxima-nova-2",sans-serif, Arial, Helvetica, sans-serif;
}

img {
-ms-interpolation-mode: bicubic;
}

ol, ul {
list-style: 			none;
}

table {
border-collapse: 		separate;
border-spacing: 		0;
width:					100%;
}

caption, th, td {
text-align:  			left;
}

blockquote:before, blockquote:after, q:before, q:after {
content: 				"";
}

blockquote, q {
quotes:  				"" "";
}

pre, code { 	
background: 			#e0e5e5;
border-left: 			3em solid #abb0b0;
display: 	 			block; 	
font-size: 				1.5em;
margin:  				2.5em 0; 
padding:  				1.5em; 
} 

p > code { 	
font-size: 				1.0em;
line-height:  			1.2em;
}

pre code { 
border: 				none; 
}

acronym {
cursor: 				help;
border-bottom:			1px dashed #333;
}

strong {
font-weight: 			600;
}

em {
font-style: 			italic;
}

.right {
float: 					right;
}

.left {
float: 					left;
}

.textleft {
text-align:				left;
}

.textcen {
text-align:				center;
}

.textright {
text-align:				right;
}

.hide {
display:				none;
}

.clear {
clear: 					both;
}

.clearfix:after {
clear: 					both;
content: 				".";
display: 				block;
height: 				0;
line-height: 			0;
visibility: 			hidden;
}

.clearfix {
display: 				block;
}

html[xmlns] .clearfix {
display: 				block;
}

* html .clearfix {
height: 				1%;
}

/* GLOBAL ELEMENTS
=============================================== */	
#container_header {
background:				url(graphics/bg_top.jpg) repeat-x;
height:					143px;
}

#container_main {
margin:					4.3em auto 0;
width:					960px;
}

#container_content {
float:					left;
margin:					0 4em 0 0;
width:					610px;	
}

#container_sidebar {
float:					left;
position:				relative;
width:					310px;
}

#container_footer {
background:				url(graphics/bg_footer.jpg) repeat-x;
height:					278px;
margin:					2.7em 0 0;
}
 
/* STYLES
=============================================== */
table {
border-collapse: 		collapse;
border: 				1px solid #e5e5e5;
border-bottom: 			0;
line-height: 			150%;
margin: 				.5em 0 1em 0;
width: 					100%;
}

th {
background: 			#f3f3f3;
border-bottom: 			1px solid #e5e5e5;
border-top: 			1px solid #e5e5e5;
padding: 				0.5em;
}

tr {
border-left: 			1px solid #e5e5e5;
border-right: 			1px solid #e5e5e5;
}

td {
background: 			#f9f9f9;
border-bottom: 			1px solid #e5e5e5;
padding: 				0.5em;
vertical-align: 		top;
}

.label_contactus {
display:				block;
font-size: 				1em;
font-weight:			700;
line-height: 			0;
margin: 				2em 0 1.2em;
}

.formfield {
border:					1px solid #CFCFCF;
font-size:				0.9em;
padding:				0.8em;
width:					555px;
-webkit-border-radius: 	1px;
-moz-border-radius: 	1px;
border-radius: 			1px;	
}

.formselect {
border:					1px solid #CFCFCF;
font-size:				0.9em;
padding:				0.8em;
width:					250px;
-webkit-border-radius: 	1px;
-moz-border-radius: 	1px;
border-radius: 			1px;	
}

.formtextarea {
border:					1px solid #CFCFCF;
font: 					1em "proxima-nova-1","proxima-nova-2",sans-serif, Arial, Helvetica, sans-serif;
padding:				0.8em;
width:					555px;
-webkit-border-radius: 	1px;
-moz-border-radius: 	1px;
border-radius: 			1px;	
}

.formfield:focus, .formfield:hover, .formselect:focus, .formselect:hover .formtextarea:hover, .formtextarea:focus {
border:					1px solid #4FAD11;
}

.formbutton {
background:				url(graphics/bg_top.jpg) no-repeat left center;
border:					1px solid #8FC309;
color:					#FFF;
font-size:				1em;
font-weight:			700;
margin:					1em 0 1em 0;
padding:				0.8em;
text-align:				center;
-webkit-border-radius: 	3px;
-moz-border-radius: 	3px;
border-radius: 			3px;	
}

.formbuttonvoid {
background:				#cf2626;
border:					1px solid #c30909;
color:					#FFF;
font-size:				1em;
font-weight:			700;
margin:					1em 0 1em 1em;
padding:				0.8em;
text-align:				center;
-webkit-border-radius: 	3px;
-moz-border-radius: 	3px;
border-radius: 			3px;	
}

.formbutton:hover, .formbuttonvoid:hover {
cursor:					pointer;
opacity: 				0.9;
-moz-opacity: 			0.9;
-khtml-opacity: 		0.9;
}

.header_info {
left:					64.5em;
position:				relative;
text-align:				center;
top:					-2.4em;
width:					312px;
}

#container_header .inner {
margin:					0 auto;
width:					960px;
}

.header_contact .second {
margin:					0 0 0 0.3em;	
}

.menu li {
float:					left;
font-size:				1.6em;
line-height:			3em;
text-transform:			uppercase;
text-shadow:			1px 1px 1px #000;
}

#container_sidebar .menu li {
float:					none !important;
font-size:				1em !important;
line-height:			1.2em !important;
text-transform:			uppercase !important; 
text-shadow:			none !important;
}

#container_content .content {
background:				#FFF;
border:					1px solid #cfcfcf;
font-size:				1.4em;
padding:				1.1em 1.2em;	
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

#container_content .post {
padding:				0 0 10px 0;
position:				relative;	
}

#container_content .post h3 { margin: 0 0 10px !important; }
#container_content .post h3 a {
color: #57AF0F;
font-size: 18px !important;
font-weight: normal !Important;
}

#container_content .shadow {
background:				url(graphics/bg_contentshadow.png) no-repeat bottom center;
padding:				0 0 2.4em;
}

.content .postit {
background:				url(graphics/main_sprite.png) no-repeat -10px -76px;
bottom:					-3em;
height:					184px;
position:				absolute;
right:					-6em;
text-indent:			-9999px;
width:					218px;
z-index:				1000;
}

#container_sidebar .box {
font-size:				1.4em;	
margin:					0.8em 0 0;
}

#container_sidebar .box.first {
margin:					0;
}

#container_sidebar .box.last {
margin:					0;
}

#container_sidebar .header {
background:				url(graphics/main_sprite.png) no-repeat -10px -425px;
height:					45px;
}

#container_sidebar .content {
background:				#FFF;
border:					1px solid #1c1c1c;
border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
-webkit-border-radius: 0 0 2px 2px;
}

#container_sidebar .content.image {
line-height:			0;
}

#container_sidebar .footer {
background:				url(graphics/main_sprite.png) no-repeat -10px -492px;
height: 				55px;

width: 					326px;
}

#container_sidebar .f1 {
top: 					15.4em;
left: 					-0.5em;
position: 				absolute;
}

#container_sidebar .f2 {
top: 					71.9em;
left: 					-0.5em;
position: 				absolute;
}

#container_sidebar .f3 {
top: 					94.9em;
left: 					-0.5em;
position: 				absolute;
}

#container_sidebar .f4 {
top: 					117.9em;
left: 					-0.5em;
position: 				absolute;
}

#container_content .content ul {
background:				#ededed;
border:					1px solid #d6d6d6;
margin:					0 0 0.8em;
padding:				0.3em 0 0.2em;
}

#container_content .content li {
background:				url(graphics/main_sprite.png) no-repeat -10px -755px;
color:					#363636;	
margin:					0 0 0 1em;
padding:				0.5em 0.5em 0.5em 1.1em;
}

.page-id-335 #container_content .content li {
background:				url(graphics/sharedlinks_dot.jpg) no-repeat 0 13px;
color:					#363636;	
margin:					0 0 0 1em;
padding:				0.5em 0.5em 0.5em 1.1em;
}

.page-id-335 #container_content .content li a { font-weight: bold; margin-top: 10px; }

.content .imgshadow {
background:				url(graphics/bg_imgborder.png) no-repeat bottom right;
margin:					0 0 -1.3em;
padding:				0 1em 1.3em 0;
}

#container_sidebar .shadow {
background:				url(graphics/bg_sidebarshadow.png) no-repeat bottom center;
padding:				0 0 2.3em;
}

#container_sidebar .content ul {
padding:				0.3em 0 0.2em;
}

#container_sidebar .content li {
background:				url(graphics/main_sprite.png) no-repeat -10px -786px;
color:					#363636;	
margin:					0 0 0 1em;
padding:				0.5em 0.5em 0.5em 1.1em;
}

.white_content {
background:				#FFF;
border:					1px solid #cfcfcf;
font-size:				1.3em;
margin:					1.1em 0 0;
padding:				1.1em 1.2em;	
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

.white_content.topratedcompany { height: 83px; }
.white_content.topratedcompany table {border-style: hidden; margin: 0; }
.white_content.topratedcompany td {background: none; border-style: hidden; padding: 0; }
.white_content.topratedcompany div {margin: 3px auto 0 auto;}

.box.sidebarstarrated table {border-style: hidden; margin: 0; }
.box.sidebarstarrated table td {background: none; border-style: hidden; padding: 0; }
.box.sidebarstarrated div { margin:15px 0 0 14px; }
.box.sidebarstarrated div a { display: block; margin: -5px 0 0 0; }
.box.sidebarstarrated div.header, .box.sidebarstarrated div.content {margin: 0!important; } 


.image_carousel {
background:				#FFF;
border:					1px solid #cfcfcf;
font-size:				1.4em;
height:					171px;
margin:					1.1em 0 0;
padding:				1.1em 1.2em;	
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

#carousel_gallery {
margin:					0 0 0 1.3em;	
}

#carousel_gallery li {
float:					left;
height:					131px;
margin:					0 2em 0 0;
width:					162px;
}

#carousel_gallery li.last {
margin:					0;
}

#recentnews {
background:				#FFF;
border:					1px solid #cfcfcf;
float:					left;
font-size:				1.4em;
height:					auto;
margin:					0.3em 0 0 0;
padding: 0 0 0.6em 0;
width:					608px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

#gallery_controls {
left: 					-18em;
position: 				relative;
top: 					31em;
}

#ol#gallery_controls {
margin:					1em 0;
padding:				0;
height:					28px;	
}

ol#gallery_controls li {
background:				url(graphics/main_sprite.png) no-repeat -10px -395px;
height:					10px;
float:					left;
list-style:				none;
margin:					0 0.2em 0 0.3em;
text-indent:			-9999px;
width:					10px;
}

ol#gallery_controls li.current {
background:				url(graphics/main_sprite.png) no-repeat -20px -395px;
height:					10px;
width:					10px;
}

.star1 {
background:				url(graphics/main_sprite.png) no-repeat -10px -280px;
height:					19px;
margin:					1em 0 0 6em;
text-indent:			-9999px;
width:					121px;
}

.star2 {
background:				url(graphics/main_sprite.png) no-repeat -10px -298px;
height:					19px;
margin:					1em 0 0 6em;
text-indent:			-9999px;
width:					121px;	
}

.star3 {
background:				url(graphics/main_sprite.png) no-repeat -10px -316px;
height:					19px;
margin:					1em 0 0 6em;
text-indent:			-9999px;
width:					121px;	
}

.star4 {
background:				url(graphics/main_sprite.png) no-repeat -10px -334px;
height:					19px;
margin:					1em 0 0 6em;
text-indent:			-9999px;
width:					121px;	
}

.star5 {
background:				url(graphics/main_sprite.png) no-repeat -10px -352px;
height:					19px;
margin:					1em 0 0 6em;
text-indent:			-9999px;
width:					121px;	
}

#container_footer .inner {
color:					#FFF;
margin:					0 auto;
width:					960px;
}

.footer_telephone {
font-size:				1.6em;
line-height:			2.8em;	
text-shadow:			2px 1px 2px #000;
text-transform:			uppercase;
}

.footer_telephone span {
margin:					0 0 0 1.9em;
}

.footer_telephone span.first {
margin:					0 0 0 0.2em;
}

.footer_left {
float:					left;
width:					680px;
}

.footer_right {
float:					right;
width:					280px;	
}

.footer_right address {
color:					#111;
font-size: 				1.8em;
margin: 				2em 0 0;
text-align: 			right;
text-shadow:			1px 0 1px #CCC;
}

#popup_container {
display:				none;
}

.popup_side {
float:					left;	
height:					300px;
width:					298px;	
}

.popup_side:hover {
cursor:					pointer;
 opacity: 				0.8;
-moz-opacity: 			0.8;
-khtml-opacity: 		0.8;
}

#popup_residential {
border-right:			1px solid #222;
}

.popup_enter {
font-size:				1.4em;
padding:				1em;
text-align:				center;
}

#popup_container .header {
background:				url(graphics/popup_header.jpg) no-repeat;
height:					101px;
text-indent:			-9999px;
width:					600px;	
}

.safari .menu li, .safari .nomenu {
line-height:			3.4em;
}

.content_areas {
border-top: 			1px solid #DEDEDE;
color: 					#666;	
padding: 				13px 0 0;
}

#social_top {
height:					33px;
left:					649px;
position:				relative;
top:					-36px;	
width:					315px;
}

#social_top li {
float:					left;
list-style:				none;
margin:					0 0 0 1em;
}

/* LINKS
=============================================== */	
a:link, a:active, a:visited {
color: 					#333; 
cursor:					pointer;
outline:				0;
text-decoration: 		none;
}

a:hover, a:focus {
color: 					#333; 
text-decoration: 		underline;
}

.menu li a {
background:				url(graphics/bg_nav.png) no-repeat right center;
color:					#FFF;
font-weight:			100;
padding:				0 1em;
text-decoration:		none;
}

#container_sidebar .menu li a {
background:				none !important;
color:					#FFF;
font-weight:			100;
padding:				0 !important;
text-decoration:		none;
text-transform:			none !important;
}

.menu li a:hover, #social_top a:hover {
color:					#bbf92c;
text-decoration:		none;
}

.menu #menu-item-27 a, .menu #menu-item-121 a {
padding:				0 1em 0 0;
}

.menu #menu-item-21 a, .menu #menu-item-117 a {
background:				none;
padding:				0 0 0 1em;
}

#container_sidebar .content li a {
color:					#333;
}

#container_sidebar .content li a:focus, #container_sidebar .content li a:hover {
color:					#4FAD11;
text-decoration:		none;
}

#container_sidebar .f1 a {
margin:					0 0 0 5.6em;
}

#container_sidebar .f2 a {
margin:					0 0 0 0.8em;
}

#container_sidebar .f3 a {
margin:					0 0 0 1.3em;
}

#container_sidebar .f4 a {
margin:					0 0 0 3.8em;
}

.popup_enter a {
color:					#FFF;
text-decoration:		none;
}

a.sidebar_backtotop {
background:				url(graphics/main_sprite.png) no-repeat -10px -614px;
display: 				block;
height: 				65px;
margin:					0 0 0 -0.55em; 
text-indent: 			-9999px;
width: 					326px;
}

a.sidebar_backtotop:hover {
opacity: 				0.9;
-moz-opacity: 			0.9;
-khtml-opacity: 		0.9;
}

#container_sidebar .footer a {
background:				url(graphics/main_sprite.png) no-repeat -10px -567px;
color:					#a7d319;
cursor: 				pointer;
font-size:				0.9em;
outline: 				none !important;
padding:				0.4em 0.9em;
text-align: 			center;
text-decoration: 		none;
}

ol#controls li a {
float:				left;
text-decoration:	none;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline:				none;
}	
	
.content .postit a {
display:				block;
height:					184px;
}

#recentnews a {
color:					#5B9D0A;
display:				block;
font-weight:			700;
margin:					0.5em 0 0;
text-decoration:		underline;	
border-top:			1px dotted #BBB;
padding: 5px 0 0 0 !important;
}

#social_top a {
color:					#FFF;
font-size: 				1.6em;
text-shadow: 			1px 1px 1px #000;
padding:				0 0 0 1.4em;
text-transform:			uppercase;
}

#social_top .social_facebook {
background:				url(graphics/icon_facebook.png) no-repeat 0 2px;
	
}

#social_top .social_linkedin {
background:				url(graphics/icon_linkedin.png) no-repeat 0 2px;	
}

#social_top .social_twitter {
background:				url(graphics/icon_twitter.png) no-repeat 0 2px;	
}
	
/* TYPOGRAPHY
=============================================== */
#logo {
background:				url(graphics/main_sprite.png) no-repeat -10px -10px;
height:					46px;
text-indent:			-9999px;
position:				relative;
top:					2.6em;
width:					255px;
}

#popup_overlay h2 {
background:				url(graphics/popup_logo.png) no-repeat;
height:					47px;
margin:					6em auto 0;
text-indent:			-9999px;	
width:					483px;
}

.header_info h2 {
font-size:				2em;
text-shadow:			1px 0 1px #CCC;
}

.footer_left h2 {
color:					#000;
font-size:				2em;
margin:					1em 0 0;
text-shadow:			1px 0 1px #CCC;
}

#container_content .content h1 {
background:				url(graphics/bg_contentheader.jpg) no-repeat center bottom;
font-size:				1.4em;
margin:					0 0 1em;
padding:				0 0 0.3em;	
}

#container_content .content h2 {
color: 					#444;
font-size:				1.2em;
margin:					0 0 1em;
text-transform: 		uppercase;
}

.popup_enter h3 {
font-size:				1.8em;
font-weight:			600;
letter-spacing:			1px;
margin:					0.4em 0 0;
text-transform:			uppercase;
}

#container_sidebar .header h3 {
color:					#FFF;
font-size:				1.1em;
line-height:			3.1em;
font-weight:			100;
padding:				0 0 0 1em;
text-decoration:		none;
text-shadow:			1px 1px 1px #000;
}

#container_content .content h3 {
color:					#57AF0F;
font-size:				1em;
font-weight:			700;
}

#testimonials h4, #recentnews h4 {
color:					#5b9d0a;
font-size:				1.1em;
margin:					1em 0 0.5em 1em;
}

h6 {
background:				url(graphics/main_sprite.png) no-repeat -10px -699px;
height:					46px;
text-indent:			-9999px;
position:				relative;
top:					2.5em;
right:					-2.4em;
width:					255px;
}

#recentnews p {
color:					#3a3a3a;
font-size:				0.9em;
line-height:			1.6em;
margin:					0.4em 1.3em 0.5em;
width:					574px;
}

.recentnews_date {
border-bottom:			1px dotted #BBB;
color:					#999 !important;
margin:					-5px 0 8px 16px !important;
padding:				0 0 5px 0 !important;
}

#container_content .post p {
line-height:			1.7em;	
margin:					0 0 0.8em;
}

#container_sidebar .footer p {
color:					#FFF;
font-size: 				1.1em;
line-height: 			4em;
padding:				0 0 0 1em;
}

.footer_left p {
color:					#283505;
font-size:				1.3em;
line-height:			1.5em;
}

.header_contact span {
color:					#4e6a02;
}

#container_footer span {
font-weight:			400;
}

.header_info h2 span, .footer_left h2 span {
font-style:				italic;
font-weight:			100;
text-decoration:		underline;
}

.popup_description {
color:					#777;
font-style:				italic;
}

.header_contact {
color:					#FFF;
font-size:				1.6em;
margin:					0.3em 0 0;
}

.carousel_info {
color:					#3a3a3a;
font-size:				1.1em;
font-weight:			100;
margin:					0 0 1em;
text-align:				center;	
}

.nomenu {
color:					#FFF;
font-size:				1.6em;
font-weight:			100;
line-height:			3em;
text-align:				center;
text-transform:			uppercase;
text-shadow:			1px 1px 1px #000;
}

#container_content .content strong {
color:					#666;
}

ul.postto {
background: none !important;
border: none !important;
border-top: 1px solid #eaeaea !important; 
height: 27px;
margin: 0 !important;
padding: 0 !important;	
}

.postto li {
background: none;
float: left;
margin: 0 !important;
padding: 13px 20px 0 0 !important;
}

.postto a.twitter {
background:url(graphics/icon_socialpostto.jpg) no-repeat 0-24px; 
padding: 0 0 0 24px;
}

.postto a.facebook {
background:url(graphics/icon_socialpostto.jpg) no-repeat 0 0;
padding: 0 0 0 24px;
}

.postto a:hover { color: #111; text-decoration: none; }