/*
Theme Name: Open Circuit Theme
Theme URI: http://www.sdfelectronics.co.uk
Description: The standard theme for SDF Electronics Limited.
Version: 2.0
Author: Stephen Smith
Tags: grey, custom header, fixed width, two columns, widgets

*/

/* Main colours included on this theme: 
		#d40000 - red 
		#cccccc - light grey
		#525252 - dark grey
*/

/* Global Reset of the site */

* {
	margin: 0;
	padding: 0;
}

/* @group Main elements for the overall page layout and style */

/* This part of the stylesheet creates the main block structure of the page
for both the page with a sidebar and a page without a sidebar */

body {
	font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px;
	color: #000000; text-align: center;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #45484d 0%,#000000 100%); /* W3C */
}

#wrapper {
	display: block !important; position: relative !important;
	clear: both !important; overflow: hidden;
	width: 940px; height: 100%;	margin: 5px auto; padding: 0 20px;
	text-align: left;
	background: url(images/background_image.png) repeat-x white;
}

#main {
	display: block; padding: 0;
	margin: 0 auto; padding: 0;
}

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
	
}

	#container.one-column { float: left; margin: 0; width: 100%; }

#content {
	margin: 0 252px 0 10px;
}

	.one-column #content { margin: 0; }

.sidebar {
	display: block; width: 230px;
	float: right; overflow: hidden;
}

/* @end */

/* @group Header Bar Structure */

/* This part of the stylesheet creates the layout of the header section of the website
including the SDF logo and horizontal tracks.

It will also contain the main navigation bar and sub-menu.
*/

#header {
	display: block;	width: 100%; height: 140px; margin: 0; position: relative;
	margin: 5px 0;
}

	#main-chip {
		display: block;	width: 121px; height: 121px; margin: 0;
		background: url(images/sdf_chip.png) no-repeat !important;
		background: url(images/sdf_chip.gif) no-repeat;
		float: left;
	}

/* @group My Group */



/* @end */
		#main-chip a { display: block; height: 100%; width: 100%; }
	
		#main-chip h1 { font-size: 10px; text-indent: -9999px; }
	
	#header-track-left {
		display: block; width: 37px; height: 100%; margin: 0;
		background: url(images/header_track_left.png) no-repeat !important;
		background: url(images/header_track_left.gif) no-repeat;
		position: relative; float: left;
	}
	
	#header-track-main {
		display: block; width: 753px; height: 100%; margin: 0;
		position: relative; float: left;
		background: url(images/header_track_middle.png) repeat-x !important;
		background: url(images/header_track_middle.gif) repeat-x;
	}
	
	#header-track-right {
		display: block; width: 29px; height: 100%; float: left; margin: 0;
		background: url(images/header_track_right.png) no-repeat !important;
		background: url(images/header_track_right.gif) no-repeat;
	}

/* @end */

/* @group Navigation Bar */

/* Stylesheet information for the main navigation bar */

	#navigation-block {
		display: block; width: 100%;
		position: absolute; top: 88px;
	}

	.main-navigation .menu {
		width: 100%; height: 35px;
	}

		.main-navigation .menu ul {
			margin: 0; padding: 0; width: 100%;
			list-style-type: none;
		}

		.main-navigation .menu li {
			display: inline; height: 35px;
			font-size: 14px; text-align: center;
			font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
			position: relative; float: left;
		}

		.main-navigation .menu li a, .main-navigation .menu li a:visited {
			display: block; height: 20px; padding: 7px 15px 0 15px; float: left;
			text-decoration: none; color: #ffffff;
		}

			.main-navigation .menu li a:hover {
				border-bottom: solid 2px #cccccc;
			}

			.main-navigation .menu li.current_page_item a,
			.main-navigation .menu li.current_page_ancestor a {
				border-bottom: solid 2px #d40000;
			}
			
	/* Submenu rules */
	
		#navigation-block ul.sister-pages {
			width: 100%;
			position: relative;
			list-style-type: none;
		}
		#navigation-block ul.sub-menu {
			list-style-type: none;
		}
		
		#navigation-block ul.sub-menu li {
			display: inline; position: relative; float: left;
			font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px;
		}
		
		#navigation-block ul.sub-menu li a,
		#navigation-block ul.sub-menu li a:visited {
			display: block; padding: 3px 8px; float: left;
			text-decoration: none; color: #525252;
		}
		
			#navigation-block ul.sub-menu li a:hover {
				text-decoration: underline;
			}
			
			#navigation-block ul.sub-menu li.current_page_item a {
				color: #d40000; font-weight: bold; text-decoration: none;
			}

/* @end */

h1 {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 24px;
	padding: 0 0 10px 0;
}

body, h1, h2, h3, h4, h5, h6, blockquote, p {
	margin: 0; padding: 0;
}

a:link, a:visited {
	color: #336699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #ff0000;
}

a.more {
	background: transparent url(images/more_arrow.png) no-repeat 100% 50%;
	padding-right: 10px;
}

p {
	padding: 5px 0 5px 0;
}


/* @group Image Rules */

img {
	border: none;
}

img.alignleft {
	float: left; clear: left;
	margin: 5px 10px 0 0;
}

img.alignright {
	float: right;
	margin: 5px 0 0 10px;
}

img.centered, img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignright {
	float: right; clear: right;
	margin: 5px 0 0 10px;
}

.alignleft {
	float: left; clear: left;
}

.wp-caption {
	color: #636363;
}

	.wp-caption img { margin: 0; }

/* @end */

/* @group Main Content Area Rules */

.post {
	padding: 5px 0;
}

.post h1 {
	border-bottom: solid 2px #525252;	
}

.post h1, .post h2 {
	width: 675px; padding-left: 3px;
	font: bold 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #d40000; text-align: left;
	
}

.post h3 {
	font: bold 18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #d40000; text-align: left; 
	padding: 10px 0 5px 0;
}

.post h4 {
	font: bold 18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding: 5px 0;
	color: #525252; text-align: left;
}

.entry {
	line-height: 18px; font-size: 14px;
	position: relative; overflow: hidden;
}

p.postmetadata {
	border-top: 1px solid #ccc;
	margin: 10px 0 0 0;
}

	p.postmetadata .align-right { margin-left: 40px; }
	
p.post-date {
	color: #525252; font-style: italic;
	text-align: right;
}

.navigation {
	position: relative; overflow: visible;
	padding: 10px 0 10px 0;
	font-size: 14px; line-height: 18px;
}

	.navigation .prev {
		display: block; position: absolute; left: 0;
		text-align: left;
	}
	
	.navigation .next {
		display: block; position: absolute; right: 0;
		text-align: right;
	}

#error-page ul { list-style-type: none; font-weight: bold; }
	#error-page ul li ul { font-weight: normal; }

.post.sticky {
	display: block; position: relative;
	background-color: #eeeeee;
	border: solid 1px #bbbbbb;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 5px 10px; margin: 5px 0;
}

.sticky div.sticky {
	font-style: italic;	font-weight: normal;
	display: block; position: absolute; right: 10px;
	color: #d40000; font-size: 18px;

}

.post ul li {
	margin: 5px 5px 5px 25px;
	list-style-type: disc;
}

/* @end */

/* @group Product Spec Section */

.spec {
	width: 250px; float: right; clear: right;
	margin: 5px 0 5px 10px;
	font-size: 14px; color: #525252;
	overflow: visible;
}
	.spec h3 {
		color: #d40000;
		border-bottom: solid 2px #525252;
	}
	.spec ul li {
		list-style-type: none;
	}
	
	.spec ul li {
		list-style-type: none;
		margin: 0;
		padding: 5px 0;
		border-bottom: solid 1px #cccccc;
	}

/* @end */

/* @group Product Price Section */

	.price {
		background: #cccccc;
		padding: 10px; margin: 5px 0;
	}
		
		.price h3 {
			padding: 0;
		}
		
		.price h4 {
			color: black;
			padding: 0 10px 5px 10px;
		}
		
		.price p {
			padding: 5px 10px;
		}

/* @end */

/* @group Sidebar Rules */

#sidebar-container {
	display: block;	float: left;
	height: 100%; overflow: hidden;
	font-size: 12px;
}

	
	.sidebar ul {
		list-style-type: none;
		margin: 0; padding: 0 2px;
	}
	
	.sidebar ul li { padding: 10px 0; }
	
	.sidebar ul li h2 {
		margin-bottom: 5px;
		font-size: 20px; color: #525252;
		border-bottom: solid 2px #d40000;
	}

		.sidebar ul ul li { padding: 4px 0; font-size: 12px; }
	
	table#wp-calendar { width: 100%; }

/* @end */

/* @group Footer rules */

#footer {
	float: left; clear: both; width: 100%;
	position: relative; overflow: hidden;
	margin: 5px 0 10px 0; padding-top: 5px;
	border-top: 1px solid #525252;
	text-align: left;
}

#footer-container {
	position: relative; overflow: hidden; float: left;
	text-align: left;
	height: 100%; width: 700px;
}

	#footer-container ul {
		display: block; position: relative; overflow: hidden;
		list-style-type: none; margin: 5px 20px;
	}
	
	#footer-container ul:first-child { width: 180px;}
	#footer-container li { margin: 5px 0; }
	
	#menu-first-footer, #menu-second-footer, #menu-third-footer {
	 float: left; position: relative; overflow: hidden;
	 height: 100%;
	}
	
	#footer .company-info {
		display: block; position: relative; float: left;
		color: #525252; overflow: hidden;
	}

/* @end */

/* @group Comments Rules */

.comments-template 

textarea#comment {
	width: 100%;
}

#comment input#submit {
	text-align: right;	
}

.comments-template{
	margin: 20px 0 0;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font: bold 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;	
	color: #525252; font-size: 16px;
	width: 100%; padding-bottom: 5px;
}
	h3#comments { border-bottom: solid 2px #d40000; }

.commentmetadata{
	font-size: 12px; color: #525252;
}

.comments-template p {
	font-size: 14px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}

.comments-template .comment-admin .commentmetadata {
	border-bottom: solid 1px #d40000;}



/* @end */

/* @group Holding Page Rules */

#holding-banner { width: 100%; height: 112px; margin-top: 20px; background-image: url(images/horizontaltrack.gif); }
#holding-logo { width: 112px; height: 112px; margin: 0 auto; background-image: url(images/sdflogo.gif); }

/* @end */

/* @group Follow Us Section Rules */

ul.follow-us a {
	display: block; height: 17px; padding: 3px 0 0 30px;
	background-position: 0 0;
}
	ul.follow-us a:hover { background-position: 0 -20px; }
	
	.follow-us a.rss { background: transparent url(images/follow_us/rss_icon.png) no-repeat; }
	.follow-us a.twitter { background: transparent url(images/follow_us/twitter_icon.png) no-repeat; }
	.follow-us a.facebook { background: transparent url(images/follow_us/facebook_icon.png) no-repeat; }
	.follow-us a.linkedin { background: transparent url(images/follow_us/linkedin_icon.png) no-repeat; }



/* @end */

/* @group Contact Form Style Rules */

#contact-form-area {
	display: block; width: 100%; overflow: hidden;
}
	#contact-form-area .form-section { float: left; padding: 10px; }

/* @end */

/* @group Index page rules for extracts */

.post-thumbnail {
	margin: 5px 20px 5px 0;
	float: left;
}

.extract {
	position: relative; overflow: hidden;
}

p.postmetadata {
}


/* @end */


/* @group FRONTPAGE FEATURE BLOCK */

#feature-block {
	width: 100%; position: relative;
	overflow: hidden;
	margin: 10px 0;
}

.feature-element {
	width: 162px; height: 100%; position: relative; display: block; overflow: hidden;
	float: left; padding: 3px 3px 100px 3px; margin: 0 0 -100px 0;

}

.feature-element a {
	display: block; position: relative;
	width: 100%; height: 100%; overflow: hidden; padding: 0 0 100px 0; margin: 0 0 -100px 0;
	text-decoration: none;
}

.feature-element h3 {
	text-align: center; padding-bottom: 2px;
}

.feature-element a h3 {
	color: #d40000;
	border-bottom: solid 2px #525252;
}

.feature-element a:hover h3 {
	color: #525252; border-color: #d40000;
}

.feature-element a .feature-text,
.feature-element a:hover .feature-text,
.feature-element a:visited .feature-text {
	color: black; padding: 4px 4px 100px 4px;
	margin-bottom: -100px;
}

.feature-element img {
	width: 162px; height: 119px;
}

.feature-element div.post-thumbnail {
	margin: 5px 0;	
}

.feature-element a:hover div.feature-text {
	background-color: #eeeeee;

}
/* @end */