/*
Chad Williams
Creative Visual Design
http://www.creativevisualdesign.com
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/print.css";

/* COLORS 

	#8BC974 GREEN
	#484848 DARK GREY
	#E7F3E2 LIGHT GREY
	#D56A68 REDISH

*/


/* REUSABLE CLASSES BEGIN */

p {
	font-size:1.2em;
	line-height:1.7em;
	margin-bottom:20px;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 25px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 15px;
}

.img-fltlft {
	float: left;
	margin: 0 20px 15px;
}

.img-fltrt {
	float: right;
	margin-left: 20px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

::selection {
	background: #D56A68; /* Sarari style when text is highlighted */
	color: #000;
	}
	
::-moz-selection {
	background: #D56A68; /* Firefox style when text is highlighted */
	color: #000;
}

strong { font-weight:bold; color:#8BC974; }

h1 {
	color:#860F09; 
	font-size:2.2em; 
	font-weight:bold; 
	padding-bottom:15px;
}
  
h2 {
	font-size:1.8em; 
	font-weight:bold; 
	padding-bottom:10px;
}  

h3 {
	font-size:1.5em; 
	font-weight:bold; 
	padding-bottom:10px;
}
  
h4 {
	font-size:1.2em; 
	font-weight:bold; 
	padding-bottom:10px;
}  

a, input, select { outline:none; }

img.center { margin:0 auto; text-align:center; }
img.border { border:8px solid #484848; }
img.bio { float:left; margin:0 20px 10px 0; }

/* REUSABLE CLASSES END */


html { overflow-y: scroll; }
html, body { height: 100% }

body {
	background:url(/images/bg.jpg) repeat-x #484848;
	color: #e9e9e9;
	font: 62.5% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

#container {
	height: auto !important;
	height: 100%;
	margin: 0 auto -135px; /* this negative bottom margin should equal the height set in the footer class */
	min-height: 100%;
	text-align: left;
	width: 1000px;
}

#header {
	background:url(/images/cvd-header.png) no-repeat;
	height:169px;
}

	#header .logo-print { display: none; }
	
ul#nav {
	margin-top:20px;
}

ul#nav li {
	border-right:1px dotted #000;
	display:block;
	float:left;
	padding:7px;
	text-align:center;
	width:125px;
}

ul#nav li.last { border-right:none; }

ul#nav li a {
	color:#000;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
}

ul#nav li a:hover {
	color:#F14141;
}

#mainContent { 
	background:#E7F3E2; 
	margin:20px 0;
	-moz-border-radius:10px;
	padding:15px;
	-webkit-border-radius:10px;
}

	#mainContent a.link-title { color:#860F09; }
	#mainContent a:hover.link-title { color:#E9E9E9; text-decoration:underline; }
	
	#mainContent a { color:#E9E9E9; }
	#mainContent a:hover { color:#860F09; text-decoration:underline; }

	#mainContent img.logo {
		margin: 0 100px;
	}
	
		#mainContent img.titles { margin-bottom:10px; }
		
		#mainContent ul {
			margin:5px 0 0 25px;
		}
		
		#mainContent ul li {
			margin-bottom:20px;
			list-style:circle;
		}
		
		#mainContent ul.clients-left {
			float:left;
			margin-right:30px;
		}
		
		#mainContent ul.clients-middle {
			float:left;
			margin-right:30px;
		}
		
		#mainContent ul.clients-right {
			float:right;
		}

		#mainContent #company-info-services-contact {
			background:#616161;
			float:left;
			-moz-border-radius:10px;
			padding:15px 15px 0 15px;
			-webkit-border-radius:10px;
			width:450px;
		}
						
			#company-info-services-contact a img { margin: 0 0 10px 27px; }
						
		#mainContent #portfolio { 
			background:#616161;
			float:right;
			-moz-border-radius:10px;
			padding:15px 15px 0 15px;
			-webkit-border-radius:10px;
			width:450px;
		}
	
		#mainContent #recent-post {
			background:#860F09;	
			margin:15px 0 0 0;
			-moz-border-radius:10px;
			padding:15px;
			-webkit-border-radius:10px;
		}
			
			#recent-post a:hover { color:#fff; text-decoration:none; }
			#recent-post ul { margin:0; }
			#recent-post ul li { list-style:none; }
		
		#mainContent #page-info {
			background:#616161;
			float:right;
			-moz-border-radius:10px;
			padding:15px 15px 0 15px;
			-webkit-border-radius:10px;
			width:940px; 
		}
		
			#page-info h2 { color:#D56A68; }
			#page-info h3, h4, h5 { color:#E7F3E2; }
			#page-info h3.emphasis { color:#8BC974; }
			#page-info h2, h3, h4, h5 { padding:10px 0 20px 0; }
			#page-info h5.portfolio-navigation { float:left; padding-bottom:20px; }  
			#page-info h5.portfolio-navigation a:hover { color:#D56A68; }  
			#page-info h5.portfolio-home { float:right; padding-bottom:20px; }  
			#page-info h5.portfolio-home a:hover { color:#D56A68; }  

/* CONTACT FORM BEGIN */


input, textarea { background:#E7F3E2; border:5px solid #999; padding:10px; width:350px; }
select, .submit { background:#E7F3E2; border:5px solid #999; padding:10px; width:380px; }
.submit:hover { border:5px solid #600; }
input:focus, textarea:focus, select:focus { background:#fff; outline:none; }

form#commentform { margin:20px 0; }
form#commentform p { padding:0 0 0 165px; }
form#commentform div { margin:20px 0; }
form#commentform div h3 { margin:0 0 0 165px; }
form#commentform div input { width:620px; margin:0 0 0 165px; border:none; }
form#commentform div input.submit { width:640px; background:#D56A68; border:5px solid #484848; color:#fff; cursor:pointer; margin-top:10px; } /* Putting those background / border roles back in */
form#commentform div input.submit:active { background:#c00; border:5px solid #900; } /* Putting those background / border roles back in */
form#commentform div input.submit:hover { border:5px solid #600; } /* Putting those background / border roles back in */
form#commentform textarea { border:none; width:620px; height:200px; margin:0 0 0 165px; }

/* CONTACT FORM END */
	
#footer {
	background:#8BC974;
	border-top:1px solid #E7F3E2;
	height:114px;
	overflow:hidden;
	padding:10px;
	text-align:center;	
}

#footer-nav {
	clear:both;
	float:left;
	overflow:hidden;
	width:100%;
}

#footer-nav ul {
	float:left;
	left:50%;
	margin:0 auto 15px;
	padding:0;
	position:relative;
}

#footer-nav ul li {
	float:left;
	padding:0 7px;
	position:relative;
	right:50%;
	}

#footer-nav ul li.last {
	border-right:none;
}

#footer-nav ul li a {
	color:#000;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
}

#footer-nav ul li a:hover {
	color:#F14141;
}


#footer a.wp-login  { text-decoration:none; cursor:default; }
#footer a.wp-login:hover { color:#fff; }

#footer a { color:#E9E9E9; text-decoration:underline; }
#footer a:hover { color:#D56A68; }

#footer p {
	padding: 10px 0;
}

/* STICKY FOOTER */

.footer, .push {
	height: 135px; /* make the height equal to the total height of your footer including border, margin and padding */
}


#respond { margin-top:25px; }

#comments { margin-top:25px; }
.comment-body { min-height:100px; }
.comment-body p { width:800px; display:block;}

/* makes the font size the same as the p tag and give some padding around the commentors name and date posted */
.comment-author, .comment-meta, .comment-prev-next { font-size: 1.2em; padding:5px; }

h3.comment-author { padding:0 0 5px 0; }

img.avatar {
	/*-moz-border-radius-bottomleft:4px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;*/
	background:#484848;
	padding:8px;
	float:left;
	margin-right:20px;
}

ol.comment_list h4 {
	margin:0 0 20px;
}

li.comment { 
	margin-bottom:15px;
	padding:10px;
}

li.even {
    background:#8BC974;
	border:2px solid #E7F3E2;
}

li.odd {
    background:#6DBA50;
	border:2px solid #E7F3E2;
}

li.bypostauthor {
    background:#D56A68;
	border:2px solid #E7F3E2;
}