/*
Theme Name: Claremont Design Wordpress
Theme URI: http://calremontdesign.com/
Description: 
Version: 1.1
Author: Lyndon B. Abing
Author URI: http://lyndonabing.com/
Tags: web, websites, development, wordpress, css, xhtml

*/

/* ------------------------------  Common Layout ------------------------------ */
body{
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#CCC;
	background-image:url(images/wallpaper1.jpg);
	background-repeat:no-repeat;
	background-color:#ffcc00;
	/*font: 11px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;*/
	font-family: tahoma, verdana, helvetica, arial;
	font-weight:normal;
	
}

div{
	margin:0;
	padding:0;
}

p{
	margin:0;
	padding:0;
	line-height:1.5em;
	text-align:justify;
}

ul{
	margin:0; 
	padding:0;
}

ul li{
	list-style:disc inside;
}

a{ color:#F60; text-decoration:underline; outline:none;}
a:hover{color:#FC0;}


input[type="text"],select{border:solid 1px #b5ad8d;padding:2px;}

h1,h2,h3,h4{
	padding:0px;
	margin:0;
}

#spacer{
	clear:both;
	height:10px;
	margin:0;
	padding:0;
}

/* !------------------------------  Common Layout ------------------------------ */






/* ------------------------------  Start Layout ------------------------------ */


/************** wrapper **************/
#wrapper{
	margin:0;
	padding:0;
}
/************** wrapper **************/

/************** header ************/

#wrapper #header{
	background-image:url(images/header_bg_transparent.png);
	height:auto;
	width:100%;
	margin:0;
	padding:0;
}

#header #header-container{
	width:992px;
	height:auto;
	margin:auto;
}

#header-container #logo{
	background-image:url(images/claremontdesign_logo.png);
	width:237px;
	height:135px;
}

	#logo h1{
		text-indent:-9999px;
	}

#header-container #nav{
	background-image:url(images/body_nav_bg.png);
	width:992px;
	height:62px;
	margin:auto;
	text-align:center;
}

	#nav #navigation{
		width:635px;
		margin:auto;
		
	}
	
	#nav #navigation li{
		float:left;
		list-style:none;
		text-indent:-99999px;
	}
	
	
		
		#navigation li a{
			outline:none;
		}
		
		#navigation li a:hover{
			background-position:bottom;
		}
		
		#navigation .separator{
			background-image:url(images/btn_separator.png);
			width:2px;
			height:62px;
		}
		
		#navigation .home a{
			background-image:url(images/btn_home.png);
			width:90px;
			height:62px;
			display:block;
		}
		
			#navigation .home-active{
				background-image:url(images/btn_home.png);
				width:90px;
				height:62px;
				display:block;
				background-position:bottom;
			}		
		
		#navigation .whatwedo a{
			background-image:url(images/btn_whatwedo.png);
			width:122px;
			height:62px;
			display:block;
		}
		
			#navigation .whatwedo-active{
				background-image:url(images/btn_whatwedo.png);
				width:122px;
				height:62px;
				display:block;
				background-position:bottom;
			}		

		#navigation .clients a{
			background-image:url(images/btn_client.png);
			width:103px;
			height:62px;
			display:block;
		}
		
			#navigation .clients-active{
				background-image:url(images/btn_client.png);
				width:103px;
				height:62px;
				display:block;
				background-position:bottom;
			}
			
		#navigation .testimonials a{
			background-image:url(images/btn_testimonials.png);
			width:122px;
			height:62px;
			display:block;
		}
		
			#navigation .testimonials-active{
				background-image:url(images/btn_testimonials.png);
				width:122px;
				height:62px;
				display:block;
				background-position:bottom;
			}			
					
		
		#navigation .templates a{
			background-image:url(images/btn_templates.png);
			width:101px;
			height:62px;
			display:block;
		}	
		
			#navigation .templates-active{
				background-image:url(images/btn_templates.png);
				width:101px;
				height:62px;
				display:block;
				background-position:bottom;
			}			
		
		#navigation .blog a{
			background-image:url(images/btn_blog.png);
			width:96px;
			height:62px;
			display:block;
		}
		
			#navigation .blog-active{
				background-image:url(images/btn_blog.png);
				width:96px;
				height:62px;
				display:block;
				background-position:bottom;
			}		
		
		#navigation .contact a{
			background-image:url(images/btn_contact.png);
			width:91px;
			height:62px;
			display:block;
		}
		
			#navigation .contact-active{
				background-image:url(images/btn_contact.png);
				width:91px;
				height:62px;
				display:block;
				background-position:bottom;
			}		
	
	
	
/************** header ************/

/************** container ************/
#wrapper #container{
	width:990px;
	height:auto;
	background-image:url(images/body_bg.jpg);
	margin:auto;
	border-left:solid 1px #727373;
	border-right:solid 1px #727373;
}

#container #content{
	padding:7px 5px 0 7px;
	border:solid 0px #FFF;
}

	#content #slideshow{
		border:solid 1px #333;
		width:973px;
		background-color: #000;
	}
	
	#content #slideshow ul li{
	list-style: none;
	}
	
	/* --- content --- */
	#content #row1{
		margin:0;
		padding:0;
		overflow:hidden;
		clear:both;
	}
	
		#row1 li{
		border:solid 0px #CCC;
		background-image:url(images/index_row_bg.jpg);
		width:323px;
		height:300px;
		float:left;
		padding:0;
		margin:0;
		list-style:none;
		margin:0 3px 0 0;
		}


		
		#row1 li p{
			padding:10px 20px 10px 20px;
		}
		
		#row1 li #whoweare{
		color:#fff;
		}
		
		#row1 li #latest{
		padding: 16px;
		}
		
		#row1 li #latest img{
		width: 280px;
		height: 150px;
		border: solid 1px #fff;
		padding: 2px;
		}
		
		#row1 li #latest h2{
		color: #fff200;
		font-size: 15px;
		margin-top: 10px;
		}
		
		#row1 li #latest h3{
		font-size: 12px;
		}
		
		#row1 li .whoweare{
			background-image:url(images/index_h1_whoweare.jpg);
			width:323px;
			height:52px;
			text-indent:-9999px;
		}
		
		#row1 li .latestprojects{
			background-image:url(images/index_h1_latestprojects.jpg);
			width:323px;
			height:52px;
			text-indent:-9999px;
		}
		
		#row1 li .recentpost{
			background-image:url(images/index_h1_recentpost.jpg);
			width:323px;
			height:52px;
			text-indent:-9999px;
		}
		
		
		
		#row1 li #recent_post{
		}	
		
		#row1 li #recent_post{
		padding:10px 20px 10px 20px;
		}	
		
		#row1 li #recent_post h2{
		color: #fff;
		font-size:12px;
		margin-bottom: 10px;
		}	
		
		#row1 li #recent_post h2 a{
		color: #fff200;
		font-size:15px;
		text-decoration: none;
		}	
		
		#row1 li #recent_post h2 a:hover{
		text-decoration: underline;
		}						
		
		#row1 li #recent_post p{
		padding:0;
		background-color: #000;
		color: #898989;
		padding: 10px;
		filter:alpha(opacity=100); /* IE's opacity*/
		opacity: 1;
		line-height: 15px;
		border: solid 1px #252525;
		font-size: 12px;
		}			
		
		

		
		 #row1 li .findoutmore a{
			background-image:url(images/findoutmore.png);
			width:111px;
			height:31px;
			text-indent:-9999px;
			margin-left:20px;
			display:block;
		}
		
		 #row1 li .findoutmore a:hover{
			 background-position:bottom;
		 }
		 
		
	#content #row2{
		margin:0;
		padding:0;
		overflow:hidden;
		clear:both;
	}		

		#row2 li{
		border:solid 0px #CCC;
		background-image:url(images/index_row2_bg.jpg);
		width:323px;
		height:216px;
		float:left;
		padding:0;
		margin:0;
		list-style:none;
		margin:0 3px 0 0;
		overflow:hidden;
		}
		
		#row2 li .services_offerred{
			background-image:url(images/index_h1_services_offered.jpg);
			width:323px;
			height:44px;
			text-indent:-99999px;
		}
		
		#testimonial a{
		text-decoration: none;
		}

		#row2 li .testimonials{
			background-image:url(images/index_h1_testimonials.jpg);
			width:323px;
			height:44px;
			text-indent:-99999px;
		}
		
		#row2 li #testi{
		border: solid 0px #fff;
		padding: 10px 15px 10px 15px;
		}
		
		#row2 li #testi p{
		background-color: #000;
		padding:5px 10px 5px 10px;
		font-size: 12px;
		color: #898989;
		border: solid 1px #252525;
		}
		
		#row2 li #testi h3{
		margin: 5px 0 0 0;
		color: #fff200;
		padding: 0 0 0 10px;
		}
		#row2 li #testi h4{
		font-size: 11px;
		padding: 0 0 0 10px;
		}
		
		#row2 li .contactClaremontDesign{
			background-image:url(images/index_h1_contact_claremontdesign.jpg);
			width:323px;
			height:44px;
			text-indent:-99999px;
		}		
		
		#row2 li .separator{
			background-image:url(images/index_row2_h1_separator.jpg);
			width:323px;
			height:3px;
		}

		
		#row2 li #services{
			padding:5px 20px 0 20px;
		}
		
		#row2 li #services h3{
			text-indent:-99999px;
			margin:0 0 5px 0;
		}
		
		#row2 li #services h3 a:hover{
			background-position:bottom;
		}
		
		#row2 li #services .webdesign{
			background-image:url(images/services_websitedesign.png);
			width:160px;
			height:20px;
			display:block;
		}

		#row2 li #services .ecommerce{
			background-image:url(images/services_ecommerce.png);
			width:160px;
			height:20px;
			display:block;
		}
		
		#row2 li #services .maintenance{
			background-image:url(images/services_maintenance.png);
			width:160px;
			height:20px;
			display:block;
		}	
		
		#row2 li #services .graphic{
			background-image:url(images/services_graphic.png);
			width:160px;
			height:20px;
			display:block;
		}
		
		#row2 li #services .software{
			background-image:url(images/services_software.png);
			width:160px;
			height:20px;
			display:block;
		}		
		
		#row2 li #contacts h2,#about #right h3{
			text-indent:-99999px;
			margin:5px 20px 0 20px;			
		}
		
		#row2 li #contacts .visit_our_office a,#right .visit_our_office a{
			background-image:url(images/icon_home.png);
			width:163px;
			height:26px;
			display:block;
		}
		
		#row2 li #contacts .telehpone a, #right .telephone a{
			background-image:url(images/icon_telephone.png);
			width:163px;
			height:26px;
			display:block;
		}	
		
		#row2 li #contacts .email a, #right .email a{
			background-image:url(images/icon_email.png);
			width:163px;
			height:26px;
			display:block;
		}	
		
		#row2 li #contacts .bookmark a, #right .bookmark a{
			background-image:url(images/icon_bookmark.png);
			width:163px;
			height:26px;
			display:block;
		}			
		
		/*about page*/
		#content #about{
			margin:5px 0 0 0;
			padding:20px 20px 20px 20px;
			background-color:#191919;
			border:solid 1px #272727;
			width:933px;
			background-image:url(images/about_body_bg1.png);
			background-repeat:no-repeat;
			overflow:hidden;
		}
		
		#content #about .separator,#content #client .separator,#content #contact .separator,#content #testimonials .separator{
			background-image:url(images/about_body_separator.jpg);
			width:100%;
			height:2px;
			display:block;
			margin:10px 0 10px 0;
		}
		
		#content #about h1,#content #about h2,#content #about h3{
			margin:0 0 10px 0;
		}
		
		#content #about p{
			margin:0 0 10px 0;
			line-height:20px;
		}
		
				#about #left{
					width:620px;
					height:auto;
					float:left;
					overflow:hidden;
				}
						#left .readmore{
							color:#999;
						}
				
				#about #right{
					float:right;
				}
						
					   #right .contactclaremont{
						   background-image:url(images/contact_claremontdesign.png);
						   width:214px;
						   height:44px;
						   text-indent:-99999px;
					   }
				
					   #left .featured-image{
						   border:solid 1px #343834;
						   margin:0 0 0 0;
						   background-color:#191919;
						   padding:5px;
					   }
					   
					   #left #featured-portfolio{
					   }
					   
					   #left #featured-portfolio p{
						   color:#999;
						   line-height:normal;
					   }
					   
					   #left #featured-portfolio strong{
						   color:#FFF;
					   }
					   
		/*blog page*/
		#content #blog{
			margin:5px 0 0 0;
			padding:20px 20px 20px 20px;
			background-color:#191919;
			border:solid 1px #272727;
			width:933px;
			background-image:url(images/about_body_bg1.png);
			background-repeat:no-repeat;
			overflow:hidden;
		}
		
		#content #blog .separator{
			background-image:url(images/about_body_separator.jpg);
			width:100%;
			height:2px;
			display:block;
			margin:10px 0 10px 0;
		}

				#blog #left{
					width:620px;
					height:auto;
					float:left;
					overflow:hidden;
					border: solid 0px #fff;
				}
						#left .readmore{
							color:#999;
						}
				
				#blog #right{
					float:right;
					border: solid 0px #fff;
					width: 280px;
				}
					
					
				#blog #left h1{
				color: #eee;
				font-size: 17px;
				text-decoration: none;
				}	
				
				#blog #left h4{
				color: #fbaf5d;
				margin-bottom: 10px;
				}	
				
				#blog #left h4 a{
				text-decoration: none;
				}
				
				#blog #left #blog_content{
				line-height: 30px;
				text-align: justify;
				width: 95%;
				overflow: hidden;
				line-height: normal;
				}
				
				#blog #left #blog_content div{
				line-height: normal;
				font-size: 12px;
				font-family: Tahoma, Verdana, Helvetica, sans-serif; 
				}
				
				#blog #left #blog_content div a{
				color:#fff;
				}
				
				#blog #left .readmore{
				color: #959595;
				text-decoration: none;
				}
				
				#blog #left .readmore:hover{
				color: #fff200;
				}
				
				#blog #left #comment_template{
				clear: both;
				}
				
				#blog #left #comment_template input,#blog #left #comment_template textarea{
				margin-bottom: 5px;
				}
				
				#blog #left #blog_content p{
				margin-bottom: 15px;
				}
				
				#blog #left #blog_content img{
				float: left;
				border: solid 1px #252525;
				padding: 2px;
				margin: 0 10px 10px 0;
				}
				
				#blog #left .commentlist{
				border: solid 0px #fff;
				margin: 10px 0 0 0;
				padding: 0;
				}
				
				#blog #left .commentlist li{
				list-style:none;
				margin: 0 0 0 0;
				padding: 5px;
				border: solid 0px #fff;
				margin-bottom: 10px;
				background-color: #252525;
				}

		
		#content #blog #sidebar{
		}
		
		#content #blog #sidebar ul{
		margin-bottom: 20px;
		}
		
		#content #blog #sidebar ul li{
		list-style: none;
		}
		
						#sidebar #search{
						border: solid 0px #fff;
						padding: 0px;
						font-size: 12px;
						}			   
					   					   
					   
		 /*client page*/
		#content #client,#content #testimonials{
			margin:5px 0 0 0;
			padding:20px 20px 20px 20px;
			background-color:#191919;
			border:solid 1px #272727;
			width:933px;
			background-repeat:no-repeat;
			overflow:hidden;
		}
		
				#client .folio{
					padding:10px;
					background-color:#000;
					border:solid 1px #212121;
					margin:5px 0 5px 0;
				}
				
				#client h2{
					color:#FFF;
					text-transform:capitalize;
					font-size:20px;
				}
				
				#client p{
					color:#999;
				}
				
				#client .white{
					color:#FFF;
				}
				
				#client .title, #client .type, #client .description{
					padding:0 5px 0 5px;
				}
				
	
				#client #vertical_status a{
					color:#333;
					text-decoration:none;
				}
				#client #vertical_status a:hover{
					color:#FFF;
				}
				
				#client #show_ecommerce{
					background-image:url(images/client-ecommerce.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_ecommerce{
					background-image:url(images/client-ecommerce.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}
				

				#client #show_flash_website{
					background-image:url(images/client-flash-website.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_flash_website{
					background-image:url(images/client-flash-website.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}
				
				#client #show_flash_banner{
					background-image:url(images/client-flash-banner.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_flash_banner{
					background-image:url(images/client-flash-banner.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}

				#client #show_cms{
					background-image:url(images/client-cms.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_cms{
					background-image:url(images/client-cms.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}
				
				#client #show_website_design{
					background-image:url(images/client-webdesign.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_website_design{
					background-image:url(images/client-webdesign.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}	
				
				#client #show_graphic_design{
					background-image:url(images/client-graphic.png);
					width:933px;
					height:36px;
					background-position:top;
				}

				#client #hide_graphic_design{
					background-image:url(images/client-graphic.png);
					width:933px;
					height:36px;
					background-position:bottom;
				}					
	
		/* ------- testimonials page ------- */
		#content #testimonials{
		}
		

					
		#testimonials #message{
		border: solid 0px #fff;
		margin-bottom: 30px;
		padding: 20px 10px 20px 10px;
		overflow: hidden;
		}
		
		#testimonials #message p{
		}
		
		#testimonials #message h3{
		color:#fff568;
		margin: 10px 0 0 0;
		}
		
		#testimonials #message h4{
		font-size:12px;
		}
		
		#testimonials #message #company_logo{
		width: auto;
		height: auto;
		display: block;
		float: left;
		margin: 0 10px 10px 0;
		padding: 2px;
		border: solid 1px #555555;
		}
		
		#testimonials #message #company_logo img{
		width: 200px;
		}
		
		#testimonials #message #testi{
		border: solid 0px #fff;
		overflow: hidden;
		}
		
		
		/* ------- contact page ------- */
		#content #contact{
			margin:5px 0 0 0;
			padding:20px 20px 20px 20px;
			background-color:#191919;
			border:solid 1px #272727;
			width:933px;
			background-image:url(images/about_body_bg1.png);
			background-repeat:no-repeat;
			overflow:hidden;
		} 
		
		#content #contact #form{
		}
		#content #contact #form input,textarea{
			border:solid 1px #FFF;
			padding:3px;
		}
		
		#content #contact #form tr td{
			padding:5px;
		}
		
		
		
		 /* --- content --- */

#wrapper #container-bottom{
	background-image:url(images/body_bottom.png);
	width:992px;
	height:37px;
	margin:auto;
}
/************** container ************/



/************** footer **************/
#footer{
	width:100%;
	height:auto;
	background-color:#000;
	padding:10px 0 10px 0;
	color:#CCC;
}

#footer #copyright{
	width:992px;
	height:auto;
	margin:auto;
	text-align:center;
}
/************** footer **************/