/*  

Theme Name: Productum

Version:  2.0.0

Description: Designed by <a href="http://www.markforrester.co.za">Mark Forrester</a>.

Author: WooThemes

Author URI: http://www.woothemes.com

*/



/* Custom styles */

@import "custom.css";



/*------------------------------------------------------------------

[ STYLE.CSS ] Main Stylesheet

--------------------------------------------------------------------



[Table of contents]



1.	RESET



2.	MAIN STYLES

2.a  Tags defaults

2.b  Base layout

2.c  Navigations

2.d  Elements, ID's & Classes



3.	FORMS

3.a  Form styles

3.b  Individual forms



4.	PLUGINS



5.	PRINT





/*------------------------------------------------------------------



1.	RESET

	Global reset for all HTML elements



------------------------------------------------------------------*/



@media handheld, projection, screen, print {



* { font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline }

html { height: 100% }

body { background: #fff; color: #000; font-size: 100.01%; min-height: 101%; text-align: left }

img, fieldset, abbr, acronym { border: 0 }

ul, ol { list-style: none }

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

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

caption, th { text-align: left }

q:before, q:after, blockquote:before, blockquote:after { content: '' }

input, select, textarea, button { font-size: 1em; line-height: normal; width: auto; vertical-align: middle }

textarea { height: auto; overflow: auto }

option { padding-left: 0.6em }

button { background: none; border: 0; cursor: pointer; text-align: center }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: normal; color:#666666; }





} @media handheld, projection, screen {





/*------------------------------------------------------------------



2.	MAIN STYLES

	General definitions



--------------------------------------------------------------------



/*-------------------------------

2.a Tags defaults

---------------------------------

[?] Tags only. No classes or ID's here.

*/

	

body {

	background: #5B2711;

	color: #878787;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 75%;

	line-height: 1.5em;

	text-align: center;

	padding: 0 0 30px;

}



p, ul, ol, table { margin: 0 0 1.33em }



strong { color: #202325; font-weight: bold }

em { font-style: italic }





/* Headlines */

h1 {

	color: #252525;

	font-size: 1.8em;

	font-weight: bold;

	line-height: 1em;

	margin: 0 0 15px;

}



h2 {

	color: #252525;

	font-size: 1.5em;

	font-weight: bold;

	line-height: 1em;

	margin: 0 0 50px;

}

h3 {

	color: #252525;

	font-size: 1.33em;

	font-weight: bold;

	line-height: 1em;

	margin: 0 0 65px;

}

h4 {

	color: #252525;

	font-size: 1.2em;

	font-weight: bold;

	line-height: 1em;

	margin: 0 0 15px;

}

h5 {

	color: #252525;

	font-size: 1em;

	margin: 0 0 15px;

}

h6 {

	color: #252525;

	font-size: .90em;

	margin: 0 0 15px;

}











/* Anchors */

a, a:link, a:visited {

	text-decoration: none;

}

a:hover, a:active, a.active {

	text-decoration: underline;

}





/*-------------------------------

2.b Base layout

---------------------------------

[?] Mostly ID's. Classes & tags allowed.

*/



#wrap {

	margin: auto;

	text-align: left;

	width: 984px;

	position: relative;

}

	#header, #content, #footer, #contentWrap, #footerWrap {

		float: left; display: inline;

		clear: both;

		position: relative;

	}

	#header {

		background: url(images/bg-header.jpg) no-repeat;

		/*height: 136px;*/

height: 195px; width: 980px; margin-left: 2px;

		/*width: 100%;*/

	}

	#home #header {

		height: 195px;width: 980px; margin-left: 2px;

	}

		#logo { margin: 0 }



			#logo a {

				cursor: pointer;

				position: absolute;

				top: 25px; left: 23px;

			}

			#tagline {

				background: url(images/bg-tagline.png);

				-moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;

				color: #fff;

				font-size: 1.33em;

				font-style: italic;

				margin: 0;

				padding: 10px 12px;

				position: absolute;

				top: 31px; right: 22px;

			}

				#tagline a {

					color: #81c3f8;

					text-decoration: none;

				}



	#content {

		background: url(images/bg-content.png) repeat-y;

		width: 100%;

	}

		#contentWrap {

			/*background: url(images/bg-rounded-double.gif) no-repeat 0 bottom;*/ 

			padding: 24px 12px 45px;

			width: 960px;

		}

		#home #contentWrap { padding-top: 15px }



	#footer {

		background: url(images/bg-footer.gif) repeat-y;

		width: 984px;

	}

		#footerWrap {

			background: url(images/bg-rounded-bottom.gif) no-repeat 0 bottom;

			padding: 0 12px 12px;

			width: 960px;

		}





/*-------------------------------

2.c Navigations

-------------------------------*/



/* Page Nav */



#nav {

	height: 36px;

	position: absolute;

	top: 160px; left: 50px;

	z-index: 9999;

        font-family: Georgia,Times New Roman,Trebuchet MS;

}



#nav a {

	display: block;

	line-height: 35px;

	padding: 0 10px;

	z-index: 100;

	font-size: 20px; 

	font-weight:normal; 

	text-transform:none; 

	color: #ffffff;

}



#nav li {

	float: left;

}



/* Style drop down list */



#nav li ul { position: absolute; width: 172px; left: -999em;}

#nav li ul li {	background: url(images/bg-dropdown.png) !important;background: #000; }

#nav li ul li a { line-height: 35px; width: 150px; }

#nav li ul ul {	margin: -26px 0 0 170px; }

#nav li ul ul li a { line-height: 30px; text-transform:none; }

#nav li ul li ul li a { }

#nav li:hover ul, #nav li.sfhover ul { left: auto; }

#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }

#nav li:hover, #nav li.hover { position: static; } /* IE7 Fix */



/* PageNavi */



.more_entries {font-size:11px; padding-bottom:40px; }

.more_entries .wp-pagenavi {clear:both;float: right;}

.more_entries .wp-pagenavi a {text-decoration: none !important;}



.more_entries .wp-pagenavi .current, 

.more_entries .wp-pagenavi .on,

.more_entries .wp-pagenavi a:hover {background: #9f9f9f !important;}



.more_entries .wp-pagenavi a,

.more_entries .wp-pagenavi a:link,

.more_entries .wp-pagenavi a:visited, 

.more_entries .wp-pagenavi .current, 

.more_entries .wp-pagenavi .on,

.more_entries .wp-pagenavi span.pages { background: #EEEEEE;color: #666; padding: 4px !important; margin-left: 4px; border:1px solid #DDDDDD; line-height:24px; }



.more_entries .wp-pagenavi .extend { background:none; border:none; }





/*-------------------------------

2.d Elements, ID's & Classes

-------------------------------*/



div#featuredTxt {

	color: #fff;

	width: 480px;

	position: absolute;

	top: 156px; left: 20px;

}

	#home #header h2 {

		color: #fff;

		font-size: 1.5em;

		text-transform: uppercase;

		margin: 0 0 12px;

	}

	#home #header p {

		font-size: 1.17em;

		line-height: 1.43em;

	}



#home #header ul#featuredNav {

	margin: 0;

	position: absolute;

	width:480px;

	top: 258px; left: 20px;

}

	

	#home #header ul#featuredNav li {

		float:left;

		margin-right:20px;



	}

	

	#home #header ul#featuredNav li a {

		color: #fff;

		font-size: 1.08em;

		font-weight: bold;

		text-transform: uppercase;

		text-decoration: none;

		display: block;

		border-width:1px;

		border-style:solid;

		padding:8px;

		-moz-border-radius: 10px;

		-webkit-border-radius: 10px;

	}



	.stepcarousel {

		position: relative; /*leave this value alone*/

		left: 34px;

		overflow: scroll; /*leave this value alone*/

		width: 390px;

		height: 200px; /*Height should enough to fit largest content's height*/

	}

	.stepcarousel ul.belt {

		position: absolute;

		top: 50px; left: 0px;

	}

	.stepcarousel .panel {

		float: left;

		font-size: .92em;

		line-height: 1.17em;

		text-align: center;

		overflow: hidden;

		width: 122px;

		margin-right: 12px;

	}

	.stepcarousel .panel a {

		color: #fff;

		text-decoration: none;

	}

	.stepcarousel .panel a img {

		border: 1px solid #fff;

		margin: 0 0 8px;

	}

	

	ul#galleryNav {

		width: 460px;

		position: absolute;

		top: 80px; left: 0;

		z-index: 9999;

	}

		ul#galleryNav li#left a, ul#galleryNav li#right a {

			background: url(images/bt-left-right.gif) no-repeat;

			width: 14px; height: 34px;

			position: absolute;

			top: 0; left: 10px;

		}

		ul#galleryNav li#right a {

			background-position: -14px 0;

			top: 0; left: 435px;

		}



#featuredImg {

	height: 346px; width: 480;

	position: absolute;

	top: 33px; right: 0;

	z-index: 9999;

}

	#featuredImg p {

		top: 0; right: 15px;

		position: absolute;

		z-index: 9999;

	}



div#loader {

	background: url(images/loader.gif) no-repeat center;

	height: 346px; width: 480px;

	position: absolute;

	top: 33px; right: 0;

	z-index: 10000;

}



ul#showcase {

	float: left;

	display: inline;

	width: 480px;

	margin: 45px 0 20px -20px;

	padding: 0 0 0 10px;

}

	ul#showcase li {

		float: left;

		display: inline;

		margin: 15px 0 0 20px;

	}

		ul#showcase li a {

			float: left;

			border: 1px solid #d2d2d2;

			width: 98px;

		}

	

			ul#showcase li a img { display: block }





h2.single { font-size: 2.17em; margin-bottom:15px; }

h2.archive { border-bottom: 1px solid #E4E4E4; padding-bottom:15px;}



#sidebar h3, #sidebar2 h3 { font-size: 1.5em }



#sidebar h4, #sidebar2 h4 { margin: 0 0 3px }



#home #sidebar h4, #home #sidebar2 h4 { margin: 0 0 18px }



#sidebar .thumbnail {

	margin-bottom:15px;

	border: 1px solid #e4e4e4;

}



#footerWrap h4 { margin: 0 0 10px }



#footerWrap h3 { padding: 5px 0 5px 0 }



#footerWrap h2 {font-size:1.33em; line-height:1em; padding: 5px 0 5px 0 }



h3#news { background: url(images/ico-news.gif) no-repeat; height: 32px; padding: 5px 0 0 47px; margin-bottom:20px }



h3#photos { background: url(images/ico-photos.gif) no-repeat; height: 32px; padding: 5px 0 0 44px }



h3#twitter { background: url(images/ico-twitter.gif) no-repeat; height: 32px; padding: 5px 0 0 39px }



h3#subscribe { background: url(images/ico-subscribe.gif) no-repeat; height: 32px; padding: 5px 0 0 44px }



h3#popular { background: url(images/ico-press.gif) no-repeat; height: 32px; padding: 5px 0 0 44px }



blockquote p {

	color: #666;

	font-size: 16px;

	font-style: italic;

	line-height: 22px;

}



ul.news li {

	border-bottom: 1px solid #e4e4e4;

	margin: 0 0 15px;

}

	ul.news li h4 {	margin: 0 }

	

#sidebar2 ul.photos {

	width: 240px;

	margin: 0 0 1.5em -20px;

}

	.flickr .flickr_badge_image {

		float: left;

		border: 1px solid #d2d2d2;

		display: inline;

		margin: 0 20px 20px 0;

	}

		.flickr .flickr_badge_image a img { display: block }



 #twitter_update_list {

	background: #e5edf0;

	border: 1px solid #b6ccd4;

	color: #434343;

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 1.17em;

	font-style: italic;

	line-height: 1.43em;

	text-align: center;

	padding: 12px 15px;

}



 #twitter_update_list li {

	margin-bottom:15px;

}



span.website {

	color:#e5edf0;

	font-family:Georgia,"Times New Roman",Times,serif;

	font-size:1.1em;

	font-style:italic;

	line-height:1.43em;

	padding:3px;

	text-align:center;

	background-attachment: scroll;

	background-color: #A3B7BD;

	background-image: none;

	background-repeat: repeat;

	background-position: 0 0;

}



span.website a {

	color:#e5edf0;

}



#searchform #s {

	padding:5px;

	border: 1px solid #cccccc;

	margin-right:5px;

}



#searchform #searchsubmit {

	padding:5px;

	border: 1px solid #cccccc;

	background-color:#000000;

	color:#FFFFFF;

}



#wp-calendar {

	width: 99%;

	padding: 0 0 0px 0;

	margin-bottom: 15px;

}



#wp-calendar caption {

	font-size: 11px;

	text-align:center;

	padding:5px;

	text-transform: uppercase;

}



#wp-calendar thead tr th {

	color: #000000;

	font-size: 14px;

	font-weight: bold;

	padding-top: 10px;

}



#wp-calendar tfoot tr th {

	padding-top: 10px;

}



#wp-calendar th {

	color: #fff;

}



#wp-calendar th, #wp-calendar td {

	padding: 3px;

	text-align: center;

}



#wp-calendar td {

	background: transparent;

}



#wp-calendar td, table#wp-calendar th {

	padding: 3px 0;

}



#wp-calendar a {

	text-decoration: underline;

}



#wp-calendar a:hover {

	text-decoration: none;

}



.wp-caption {

	-moz-border-radius-bottomleft:3px;

	-moz-border-radius-bottomright:3px;

	-moz-border-radius-topleft:3px;

	-moz-border-radius-topright:3px;

	background-color:#EEEEEE;

	border:1px solid #DDDDDD;

	padding:4px 0 5px;

	text-align:center;

}

.wp-caption-text {

	padding:3px 0 0;	

	font-size:11px;

}



#footerWrap ul { margin: 0 0 8px }



	#footerWrap h4 {

		color: #2f3032;

		font-size: 1.17em;

		font-weight: bold;

		line-height: 1.43em;

	}

		

		#footerWrap ul li p {

			color:#333333;

			margin:0;

		}

	

	

	#footerWrap ul li {

		margin: 0 0 5px;



	}

	

	#footerWrap ul li ul {

		margin: 0;

	}

	

	#footerWrap ul li.recentcomments {

		padding:5px;

	}



	#footerWrap a {

		display: block;

		padding:5px;

		text-decoration: none;

	}

	

	#footerWrap ul li ul li {

		margin: 5px;

		background-color: #f7f7f7;

		padding:0px;

	}

	

	#footerWrap ul li ul li a {

	font-weight:normal;

	font-size:12px;

	color: #333333;

	padding-left:10px;

	}

	

	#footerWrap ul li ul li ul li a {

	font-weight:normal;

	font-size:11px;

	background-color: #f7f7f7;

	padding-left:10px;

	}

		

	#footerWrap ul li img {

		text-align: center;

	}

		

	#footerWrap ul li.clickready {

		cursor: pointer;

	}

	

	.footer_widget {

		margin-bottom:20px;

	}

	

	#footerWrap .widget_tag_cloud a {

		display:inline !important;

	}





.credits {

	text-align:center;

	padding-top:15px;

	color:#FFFFFF;

}

	

	 .credits a {

		display:inline;

		color:#FFFFFF;

		text-decoration:underline;

	}

	

	 .credits img {

		vertical-align:middle;

	}





/* Blog */



.entry {

	padding-bottom:2em;

	margin-bottom:3em;

	border-bottom:1px solid #E4E4E4;

}



.entry ul li {

	background:transparent url(images/bullet.gif) no-repeat scroll 4px 4px;

	line-height:140%;

	padding:0 0 1em 18px;

}



.entry ol li {

	line-height:140%;

	padding:0 0 1em 0;

	list-style-position: inside;

	list-style-type:decimal;

}



#line_break {

	margin-top:2.5em;

	padding-top:3em;

	border-top:1px solid #E4E4E4;

}



#prevPosts {

	background: #232528;

	width: 460px;

	height: 200px;

	position: relative;

}

	#prevPosts h3 {

		color: #fff;

		height: 32px;

		padding: 5px 0 0 0;

		position: absolute;

		top: 10px; left: 10px;

	}

	

p.post_meta { font-size:11px; color:#333333; }



p.post_meta span { background: url(images/post_meta_bg.jpg) no-repeat; padding: 3px 0 3px 21px; }



div#comments {}



	ol.commentlist { margin-bottom: 3em; border-top:1px solid #E4E4E4; }

	

		ol.commentlist li.odd {background-color:#f4f4f4;}

		

		ol.commentlist li h4 { margin-bottom: 0; }

		

		ol.commentlist li { padding:1.5em; border-bottom:1px solid #E4E4E4; position: relative; }



			ol.commentlist .avatar { float: right; display: inline; margin: 0 0 1.5em 1.5em; padding:4px; background-color:#ffffff; border: solid 1px #E4E4E4; }



			ol.commentlist li cite { font-size: 1.3em; font-weight:bold }

			

			ol.commentlist li .comment-meta { font-size: .92e; margin-bottom:1em }

			

		ol.commentlist ul.children li { position:relative; margin:1.5em 1.5em 0 1.5em; }

		

		ol.commentlist .odd ul.children li { background-color:#ffffff; }

		

		ol.commentlist .odd ul li ul.children li { background-color:#F4F4F4; }

		

	#respond #author, #respond #email, #respond #url, #respond #comment {

		border: 1px solid #cccccc;

		padding:5px;

	}

	

	#respond label {

		padding:5px;

		margin-left:5px;

	}

	

	

	



/*------------------------------------------------------------------



3.	FORMS

	Styles for forms only



--------------------------------------------------------------------



/*-------------------------------

3.a Form styles

-------------------------------*/



input.text, select.select, textarea.textarea

{

	border: 1px solid #B6CCD4;

	color: #000;

	padding: 6px;

}

input.text { width: 195px }

select.select { width: 200px }

textarea.textarea { height: 10em; width: 446px }



select.select.free {	width: auto }



button.button {

	color: #000;

	height: auto; width: auto;

	line-height: normal;

	white-space: nowrap;

}



input.submit {

	color: #000;

	cursor: pointer;

	padding: 0;

}





/* General forms */

form.form { /* nothing here */ }



	form.form ol.fieldset {	list-style: none }

	

		form.form ol.fieldset li.field {

			margin: 0 0 1em;

			position: relative;

		}

			form.form ol.fieldset li.field label {

				font-weight: bold;

				display: block;

			}

			

	form.form p.submit { /* nothing here */ }





/* Search forms where button and text input are next to each other  */

form.search { /* nothing here */ }



	form.search p.fields { margin: 0 }



		form.search p.fields input, form.search p.fields button {

			display: inline;

			vertical-align: middle;

		}



		

/*-------------------------------

3.b Individual forms

-------------------------------*/



form#newsletter {

	margin-bottom: 1.5em;

	position: relative;

}

	form#newsletter p.fields input.text {

		border: 1px solid #b6ccd4;

		padding: 9px 30px 9px 7px;

		width: 180px;

	}

		form#newsletter p.fields button {

			background: url(images/ico-newsletter.gif) no-repeat;

			width: 17px; height: 22px;

			border: none;

			position: absolute;

			top: 6px; right: 10px;

			z-index: 9999;

		}





/*------------------------------------------------------------------



4.	PLUGINS

	Predefined utilities



--------------------------------------------------------------------



/*-------------------------------

Utility classes

-------------------------------*/



.l { text-align: left }

.c { text-align: center }

.r { text-align: right }



.wrap, .col { float: left;	display: inline; position: relative; }

.wrap { clear: both }



.clear { clear: both }

.fl { float: left }

.fr { float: right }

.hide, .hidden, .skip { display: none }

.nomargin { margin-bottom: 0 !important }

.noborder { border: 0 !important }

.top { margin-top: 0 !important }



.hr { background: #ccc; height: 1px; margin: 1.5em 0; }

.hr hr { display: none }



.replace, .br { display: block; font-size: 1%; line-height: 0; text-align: left; text-indent: -10000px; }

.opacity { -moz-opacity: 0.95; opacity: 0.95; filter: alpha(opacity = 95); }

.rounded { -moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }



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



.fix {

	clear:both;

	height: 1px;

	margin: 0 0 -1px;

	overflow: hidden;

}



/* Align */



.aligncenter {

	margin: 10px auto 20px auto;

	display: block;

}



.alignleft {

	margin: 10px 20px 8px 0;

	float: left;

}



.alignright {

	margin: 10px 0px 8px 20px;

	float: right;

}







/*-------------------------------

"Bars" navigation

---------------------------------

[?] EXAMPLE



Home | Services | About | Contact	*/



ul.bars li {display: inline; margin-left: -4px;}

ul.bars li.first {border: 0 !important;}

ul.bars li:before {content: "|"; padding: 0 4px;}

ul.bars li:first-child:before {content: ""; padding: 0 4px 0 0;}





} @media print {



/*------------------------------------------------------------------



5.	PRINT

	Styles for print



------------------------------------------------------------------*/



body { background: none; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10pt }

code, pre { font-family: "Courier New", Courier, mono }

img { float: left; clear: left; page-break-inside: avoid; page-break-after: avoid }



a, a:link, a:visited { color: blue; text-decoration: underline }



blockquote, table, pre { page-break-inside: avoid }

ul, ol, dl  { page-break-before: avoid }

h1, h2, h3, h4, h5, h6 { display: block; font-weight: bold; page-break-after: avoid }



#footer, .ad, #nav, .nav, form, .skip { display: none }



h1 { font-size: 3em; margin: .67em 0; }

h2 { font-size: 2em; margin: .83em 0; }

h3 { font-size: 1.5em; margin: 1em 0; }

h4 { font-size: 1em; margin: 1.33em 0; }

h5 { font-size: 0.92em; margin: 1.67em 0; }

h6 { font-size: 0.83em; margin: 2.33em 0; }





/*------------------------------------------------------------------

	END CSS

------------------------------------------------------------------*/



}/* end @media */