@charset "utf-8";
/* CSS Document */

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	letter-spacing:0.8px;
	line-height:18px;
	margin:0px;
	padding:0;
	background:url(../images/top-bg.jpg) top left repeat-x;
}


/**** genral elemnt style and classes ****/

/* to remove border in case we have img contained in an a, and the 2nd line removed the extra space at teh bottom of the img */
img{
	border:none;
	display:block;
}

/* remove extra space at the bottom of an image */
ul li img{
	display:block;
}

/* for the pretty-image(lightbox clone) to remove extra space at the bottom of the image */
div.dark_rounded img{
	display:inline !important;
}

h1, h2, h3, h4, h5, h6{
	margin:20px 0;
}

a{
	color:#d24726;
	text-decoration:none;
	letter-spacing:0px;
	text-shadow: #ddd 1px 1px 0;
	cursor:pointer;
	outline:none;
}

a span{
	display:block;
	float:left;
	padding-right:4px;
	margin-top:0px;
	font-size:14px;
}

a:hover{
	text-decoration:underline;
}

h2{
	font-size:26px;
	font-weight:normal;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.top-margin{
	margin-top:20px !important;
	float:left;
	width:100%;
	clear:both;
}

.bottom-margin{
	margin-bottom:20px !important;
	float:left;
	width:100%;
	clear:both;
}

h3, h4{
	font-size:20px;
	color:#282e27;
	font-weight:normal;
}

h4{
	font-size:18px;
}

p{
	margin:10px 0;
}

.append{
	margin-top:0;
}

.prepend{
	margin-bottom:0;
}

.error{
	color:#d24726;
}

.notice{
	color:#719e7b;
}

/* surround any image with div.img to add an attractive shadow at the bottom plus a border */
div.img img{
	padding:4px;
	border:#ccc 1px solid;
	border-bottom:none;
}

div.img{
	background:url(../images/photo-shadow.gif) bottom center no-repeat;
	padding-bottom:11px;
	margin-bottom:9px;
	width:auto !important;
	float:left;
}

/* surround any image with div.img2 to only a border */
div.img2 img{
	padding:4px;
	border:#ccc 1px solid;
}



/**** general layout, main-menu and header styles ****/

#wrap{
	margin:0;
	padding:0;
	text-align:center;
	width:100%;
}

body.home #wrap{
	background:url(../images/header-bg.jpg) 50% 0 no-repeat;
}

#header{
	height:80px;
	margin:0 auto;
	width:1000px;
	text-align:left;
	background:none;
}

body.home #header{
	background:none;
	height:470px;
}

#logo{
	float:left;
	margin:23px 0 0 0;
	width:196px;
}

#main-menu{
	float:right;
	width:auto;
	margin:0;
	padding:0;
	list-style:none;
}

#main-menu li{
	float:left;
	padding:40px 0px 0 0px;
	text-align:center;
	width:85px;
}

#main-menu li ul{
	margin:30px 0 0 16px;
	padding:5px;
	list-style:none;
	float:left;
	border:#495347 1px solid;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background:#222;
}

#main-menu li ul li ul{
	margin:0;
}

/* an auto generated class by superfish for teh sub-menus  */
.sf-sub-indicator{
	top:5px !important;
}

#main-menu li ul li{
	margin:0;
	padding:0;
	text-align:left;
	width:90%;
}

#main-menu li ul li a{
	padding:4px;
	margin:2px;
	width:100%;
	border-bottom:none;
	font-weight:normal !important;
	color:#ccc !important;
	font-size:12px !important;
	outline:none;
	letter-spacing:0.6px !important;
}

#main-menu li ul li a:hover{
	background:#495347;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#main-menu li.selected{
	background:url(../images/nav_light.gif) 50% top no-repeat;
}

#main-menu li a{
	color:#ccc;
	text-decoration:none;
	font-size:14px;
	letter-spacing:1px;
	text-shadow: #000 1px 1px 0;
}

#main-menu li a:hover, #main-menu li.selected a{
	color:#fff;
	font-weight:bold;
	letter-spacing:0.4px;
}


/* the left(slideshow) and right sides in the header */
#header .left-side, #header .right-side{
	margin-top:78px;
}

#header .left-side{
	clear:left;
	float:left;
	width:527px;
}

#header .right-side{
	float:right;
	width:421px;
}

.gallery{
  position: relative;
  overflow: hidden;
  background-color: #666;
  padding: 0px;

  /* Add height & width properties to fix the size of gallery. */
  height: 317px; 
  width: 526px;
}

#header .right-side h1{
	font-size:48px;
	color:#fff;
	line-height:48px;
	font-weight:normal;
	letter-spacing:0.2px;
	margin-top:-7px;
	margin-bottom:12px;
}

#header .right-side p em{
	font-size:16px;
	line-height:18px;
	color:#fff;
	font-style:normal;
}

#header .right-side p{
	font-size:12px;
	line-height:18px;
	color:#999;
	margin-bottom:16px;
}

/* the .bite create a small block of text used in the header right sidde */
#header .right-side p.bite{
	margin-top:60px;
	width:250px;
}

#header .right-side p.bite strong{
	font-size:14px;
	line-height:20px;
	color:#495347;
}



/**** the content block: contain a page data ****/

div#content{
	background:#fff url(../images/content-bg.png) top left repeat-x;
	float:left;
	width:100%;
	margin:20px 0 0 0;
	padding:0;
}

/* .em represend a section with a bg and shadow border applied to make it standout from the other data content */
div#content div.em{
	background:#eee url(../images/em1-top.png) top left repeat-x;
	width:100%;
	float:left;
	padding-top:10px;
	margin-top:0px;
	border-top:#FFF 1px solid;
}

div#content div.em h2{
	text-align:left;
	width:1000px;
	margin:20px auto;
	margin-bottom:30px;
}

div#content div.em div.img{
	background:url(../images/img-shadow-em.gif) bottom center no-repeat;
}

body.home div#content div.em{
	border-top:none;
}

/* only used inside an .em to create it bottom shadow border we need this structure to be able to add any size of data we desire */
div#content div.em2{
	background:url(../images/em2-bottom.png) bottom left repeat-x;
	width:100%;
	float:left;
	text-align:center;
	padding-bottom:26px;
}

/* any sub-section inside the content section must implement a .block class to specify a seperated block  */
div#content div.block ul{
	margin:0 auto;
	padding:0;
	list-style:none;
	width:1000px;
}

/* only used in porfolio to remove the extra space at top added by .em (use this if the .em/.em2 combo block are the first elem in the content and you want them to stick at bottom of the header; apply the .feature class beside the .em2 class) */
div#content div.featured{
	padding-bottom:36px;
}

div#content div.block ul li{
	float:left;
	width:307px;
	text-align:left;
	margin-right:39px;
}

/* when you have three columns block use this class for the last one */ 
div#content div.block ul li.last_block{
	margin-right:0;
}

div#content div.block p{
	font-size:12px;
	color:#495347;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	letter-spacing:0.6px;
}

/* this is used for elems that follow an .em/.em2 combo block to add extra white space, to make it look better, since .em/.em2 are extended with a shadow at the bottom */
div#content div.after_em{
	margin-top:35px;
	float:left;
	width:100%;
}



/**** footer ****/

#footer{
	background:#222;
	float:left;
	width:100%;
	text-align:center;
	margin-top:60px;
	color:#999;
	font-size:11px;
	padding:30px 0;
	border-top:#fff 1px solid;
}

#footer a{
	text-shadow: #161616 1px 1px 0;
}

#footer #footer_wrapper{
	width:1000px;
	margin:0 auto;
}

#footer ul{
	margin:0;
	padding:0;
	list-style:none;
}

#footer .left-side{
	float:left;
	width:307px;
	margin-right:39px;
	text-align:left;
}

#footer .mid-side{
	float:left;
	width:307px;
	text-align:left;
	margin-right:39px;
}

#footer .mid-side h4.twitter{
	margin:0;
	color:#999;
	background:url(../images/twitter.png) top left no-repeat;
	padding:10px 0 0 45px;
}

#footer .mid-side h4 img{
	float:left;
	margin:0 10px 0 0;
}


/* this is some customization of twitter list style; twitter html is auto generated by the twitter widget (a javascript widget) when page are rendered in the browser */
.twtr-tweet{border-bottom:1px dotted #666 !important; margin:2px 10px !important;}

.twtr-hd{padding-top:0 !important;}

.twtr-tweet:last-child{border-bottom-width:0 !important;}
.twtr-doc{-moz-border-radius:4px !important;-webkit-border-radius:4px !important;border-radius:4px !important; margin-top:0  !important; padding-top:0  !important;}
.twtr-bd{padding:0 1px;}
.twtr-widget .twtr-tweet-wrap{ margin-left:0 !important; padding-left:0 !important; margin-right:0 !important; padding-right:0 !important;}
.twtr-fullscreen .twtr-tweet-wrap{margin-left:0 !important; padding-left:0 !important; margin-right:0 !important; padding-right:0 !important;}
.twtr-timeline{-moz-border-radius:4px !important;-webkit-border-radius:4px !important;border-radius:4px !important; margin:0 !important;}

.twtr-widget .twtr-new-results{text-align:center;padding:3px;margin:0 auto -10px auto;display:block;position:relative;bottom:5px;}
.twtr-results-inner{line-height:1;font-size:100%;padding:4px 0;position:relative;bottom:-2px;width:40%;margin:0 auto;z-index:2;text-align:center;}

#footer .right-side{
	float:left;
	width:307px;
	text-align:right;
}

#footer .left-side h3{
	color:#aaa;
}

#footer .left-side p{
	color:#666;
}

#footer .left-side p em{
	font-size:12px;
	color:#aaa;
}

#footer .left-side ul li{
	float:left;
	margin-right:10px;
}

#footer .left-side ul li a{
	letter-spacing:0.8px;
}

/* a csmall link at the footer to get you back to the top of the page */
p#top{
	clear:both;
}

p#top a{
	letter-spacing:0.8px;
}

#social{
	width:300px;
	list-style:none;
	margin:0;
	padding:0;
	margin-top:10px;
	float:right;
}

#social li{
	float:right;
	width:auto;
	margin:8px 0 0 8px;
}


/**** blog and single-blog and all pages that style the same way (e.g. about, single-blog) ****/

#side-wrapper{
	width:1000px;
	margin:0 auto;
	background:;
	height:100%;
}

#blog{
	width:654px;
	text-align:left;
	float:left;
	margin-right:39px;
}

#content-right-side{
	float:left;
	width:307px;
}

#blog .blog-header{
	clear:both;
	margin:20px 0 0px 0;
	float:left;
	width:100%;
}

#blog .single-blog .blog-header{
	clear:both;
	margin:20px 0 0px 0;
	float:left;
	width:100%;
}

#blog .single-blog .blog-header h2{
	font-size:42px;
	line-height:40px;
	margin:20px 0 10px 0;
	padding:0;
	letter-spacing:0px;
}

#blog .single-blog .blog-header p.info{
	margin-bottom:30px;
}

#blog .blog-header h2{
	font-size:32px;
	line-height:30px;
	margin:20px 0 0 0;
	padding:0;
	letter-spacing:0px;
}

#blog .single-blog .img2{
	float:left;
}

#blog .single-blog #desc{
	float:left;
	width:100%;
	clear:both;
}

#blog .single-blog #desc p{
	font-size:13px;
	letter-spacing:0.8px;
	line-height:20px;
	margin:20px 0;
	clear:both;
}

#blog .single-blog #desc .item{
	margin-bottom:20px;
	float:left;
	clear:both;
}

#blog .single-blog #desc .item p{
	clear:none;
	margin-top:0;
}

#blog .single-blog #desc h3, #blog .single-blog #desc h4{
	clear:both;
	float:left;
	width:100%;
}

#blog .blog-header h2{
	margin-bottom:10px;
}

/* and item is a post review (picture and photo) */
#blog .item .img{
	float:left;
	width:auto;
	margin-right:20px;
}

#blog .item p{
	float:left;
	width:322px;
	margin-top:0;
}

#blog .item p a{
	font-family:Arial, Helvetica, sans-serif;
}

/* for 2 column pages */
#content-right-side{
	text-align:left;
	margin-top:20px;
}

#content-right-side ul{
	margin:0;
	padding:0;
	list-style:none;
}

#content-right-side ul.nav li{
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:#ccc 1px dotted;
}

#content-right-side ul.stacked li{
	margin-bottom:20px;
	float:left;
	width:100%;
}

#content-right-side ul.stacked li .img2{
	float:left;
	width:auto;
	margin-right:10px;
}

#content-right-side ul.stacked li p{
	margin-top:0;
	line-height:15px;
	letter-spacing:0.6px;
	margin-bottom:4px;
	font-size:12px;
}

#content-right-side ul.stacked li p.info{
	font-size:11px;
	font-style:italic;
}

/* style for all forms with id form5 */

	.form5{
		margin:1em 0;
		padding-top:10px;
		}
	.form5 fieldset{
		margin:0;
		padding-top:.5em;
		border:none;	
		border-top:1px solid #f1f1f1;
		}		
	.form5 legend{
		background:#fff;
		padding:0 5px;
		font-style:italic;
		}	
	.form5 p{
		clear:both;
		margin:.5em 0;
		overflow:hidden;
		}	
	.form5 label{
		float:left;
		width:60px;
		display:block;
		text-align:right;
		margin-right:10px;
		}	
	.form5 input, .form5 textarea{	
		margin:0;	
		width:250px;
		border:1px solid #ddd;		
		padding:3px 5px 3px 25px;
		}		
	
	
	.form5 input.name{background:#fff url(../images/form/form_name.gif) no-repeat 5px 50%;}
	.form5 input.email{background:#fff url(../images/form/form_email.gif) no-repeat 5px 50%;}
	.form5 input.web{background:#fff url(../images/form/form_url.gif) no-repeat 5px 50%;}
	.form5 textarea.message{background:#fff url(../images/form/form_note.gif) no-repeat 5px 6px;}
	.form5 input.calculate{background:#fff url(../images/form/calculator.gif) no-repeat 5px 50%;}
	
	
	.form5 textarea{
		height:125px;
		overflow:auto;
		}					
	.form5 p.submit{
		clear:right;
		margin:1em 0;
		padding:.5em 70px;
		border-top:1px solid #f1f1f1;	
		}	
		
	.form5 button{
		height:28px;
		line-height:28px;		
		border-top:1px solid #999;
		border-left:1px solid #999;
		border-right:1px solid #333;
		border-bottom:1px solid #333;
		background:url(../images/form/form_button.gif) no-repeat;
		padding:0 10px 0 25px;
		color:#333;
		cursor:pointer;
		text-align:left;
		font-size:11px;
		font-weight:bold;
		outline:none;
		text-shadow:#ddd 1px 1px 0;
		}				
		
		.form5 #status{
			float:left;
			width:200px;
			display:inline;
			margin-left:70px;
			display:none;
			color:#666;
		}
		
		.form5 .note{
			float:none;
			width:268px;
			padding-left:28px;
			padding-top:3px;
			padding-bottom:3px;
			display:none;
		}
		
		.form5 .optional{
			display:inline;
			float:none;
			width:261px;
			font-size:11px;
			font-style:italic;
			padding-left:5px !important;
			color:#999;
		}
		
		.form5 .info{
			color:#888;
			background:#fff url(../images/form/information.gif) 5px center no-repeat;
			border:none;
		}
		
		.form5 span.error{
			color:#cc3333;
			background:#fff url(../images/form/error.gif) 5px center no-repeat;
			border:none;
			padding-top:1px;
			padding-bottom:2px;
		}
		
		.form5 input.error{
			border-color:#cc3333 !important;
		}
		
		.form5 textarea.error{
			border-color:#cc3333 !important;
		}
		
		.form5 span.passed{
			color:#fff;
			background:#fff url(../images/form/tick.gif) 5px center no-repeat;
			border:none;
			padding-top:2px;
			padding-bottom:2px;
		}
		
		.form5 input.passed{
			border-color:#669966 !important;
		}
		
		.form5 textarea.passed{
			border-color:#669966 !important;
		}
		
		#search form{
			margin:10px 0;
			padding:0;
		}
		
		#search form button{
		height:23px;
		line-height:20px;		
		border-top:1px solid #999;
		border-left:1px solid #999;
		border-right:1px solid #555;
		border-bottom:1px solid #555;
		background:#222;
		padding:2px 2px;
		color:#666;
		cursor:pointer;
		text-align:left;
		font-size:11px;
		font-weight:bold;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 0 4px 4px 0;
	  -webkit-border-radius: 0 4px 4px 0;
		text-shadow:#111 1px 1px 0;
		}	
		
		#search form input{
			border:#666 1px solid;
			color:#999;
			width:140px;
			padding:3px 5px 3px 25px;
			background:#222 url(../images/form/find.png) 5px center no-repeat;
			margin-top:0;
			height:15px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px 0px 0px 4px;
	    -webkit-border-radius: 4px 0px 0px 4px;
		}


/**** the pager (or paginator?) (found at the bottom of the portfolio page and in the single-blog comment section) ****/

	div#content div.block .pager{
		list-style:none;
		padding-top:20px;
	}
	
	div#content div.block .pager li{
		float:left;
		width:28px !important;
		margin:0 2px;
		text-align:center;
		margin-top:80px;
		border:#ccc 1px solid;
		height:20px;
		background:#f6f6f6;
	}
	
	div#content div.block .pager li a{
		display:block;
		text-decoration:none;
		text-shadow: #d9d9d9 1px 1px 0;
	}
	
	div#content div.block .pager li a:hover{
		background:#ccc;
		height:100%;
		color:#fff;
	}
	
	div#content div.block .pager li.selected a{
		background:#ccc;
		height:100%;
		color:#fff;
		border-bottom:#bbb 1px solid;
		border-bottom:#aaa 1px solid;
		border-right:#aaa 1px solid;
		text-shadow: #aaa 1px 1px 0;
	}
	
	div#content div.block .pager li.back, div#content div.block .pager li.next{
		font-size:14px;
		height:20px;
		-moz-border-radius: 4px 0px 0px 4px;
		-webkit-border-radius: 4px 0px 0px 4px;
	}
	
	div#content div.block .pager li.next{
		font-size:14px;
		height:20px;
		-moz-border-radius: 0px 4px 4px 0px;
		-webkit-border-radius: 0px 4px 4px 0px;
	}


/**** comments section in the single-blog (i seperated this section from the single-blog style cause it's long) ****/

	#blog #comments{
		clear:both;
		padding:10px;
		border:#ddd 1px solid;
		background:#f9f9f9;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		width:97%;
	}
	
	#blog #comments h2{
		margin:10px 0 20px 0;
		width:100%;
	}
	
	#comments_header{
		width:100%;
	}
	
	#comments_header p{
		float:right;
		margin-top:4px;
	}
	
	#comments #comments_header .pager{
		width:100%;
	}
	
	#comments #comments_header .pager li{
		margin-top:0px !important;
		margin-bottom:10px !important;
		width:16px !important;
		height:18px !important;
		line-height:16px;
	}
	
	.comment{
		clear:both;
	}
	
	#comments .comment{
		margin-top:0px;
		padding:8px;
		border-bottom:#e9e9e9 2px dotted;
	}
	
	#comments .odd{
		background:#e9e9e9;
	}
	
	#comments .comment p{
		margin:0px;
		padding:0;
	}
	
	#comments .comment p.comment_footer{
		margin-top:8px;
		color:#666;
	}
	
	#comments form{
		margin:44px 0 16px 0;
	}
	
	#comments form fieldset{
		border-top:#ddd 1px solid;
	}
	
	#comments form legend{
		background:none;
	}
	
	#comments form .submit{
		margin-left:70px;
		width:80px;
		padding:0;
		background:none;
	}
	
	#comments form .submit input{
		padding:2px 0;
		margin:0px 0;
		width:80px;
		color:#666;
		cursor:pointer;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	}
	
	#comments form .submit input:hover{
		background:#ddd;
		border-color:#ccc;
		color:#444;
	}
	
	#comments .comment_actions{
		float:right;
		display:none;
		width:auto;
	}
	
	#reply_form{
		position:absolute;
		margin-top:0;
		padding-top:0;
		background:#eee;
		border:#ccc 2px solid;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		display:none;
		width:370px;
	}
	
	#reply_form form{
		margin-top:0;
	}
	
	#reply_form h5{
		font-family:14px;
		background:#ccc;
		border-bottom:#999 1px solid;
		margin:0;
		padding:2px 5px;
		cursor:move;
	}
	
	#reply_form h5 img{
		float:right;
		cursor:pointer;
	}
	
	#comments .comment_actions .reply{
		padding-right:10px;
		padding-left:20px;
		background:url(../images/form/email_go.png) top left no-repeat;
	}
	
	#comments .comment_actions .report{
		padding-left:20px;
		background:url(../images/form/report.png) top left no-repeat;
	}
	
	
/**** the tag cloud in the blog and the single blog pages ****/

	#tag_cloud{
		list-style:none;
		margin:0;
		padding:0;
	}
	
	#tag_cloud li{
		float:left;
		padding:1px 6px; !important;
		margin:2px !important;
		width:auto  !important;
		background:#ccc;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
	
	#tag_cloud li a{
		color:#fff;
		text-shadow: #999 1px 1px 0;
	}
	
	#tag_cloud li.important a{
		color:#fff;
		text-shadow: #666 1px 1px 0;
	}
	
	#tag_cloud li.important2 a{
		color:#fff;
		text-shadow: #333 1px 1px 0;
		font-weight:bold;
	}
	
	#tag_cloud li.important3 a{
		color:#fff;
		text-shadow: #000 1px 1px 0;
		font-weight:bold;
		letter-spacing:0.8px;
	}
	
	#tag_cloud li.important{
		background:#999;
	}
	
	#tag_cloud li.important2{
		background:#666;
		padding:1px 8px;
	}
	
	#tag_cloud li.important3{
		background:#333;
		padding:1px 10px;
	}