/*------------------------------------------------------------------------
Style sheet for CVW Web Design [2011]
Author: Clive Walker
Website: http://www.cvwdesign.co.uk
--------------------------------------------------------------------------*/

/* Reset 
--------------------------------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}

fieldset, img {
	border: 0;
}

/* Base rules for html, body 
--------------------------------------------------------------------------*/

html {
	height:100%;
	overflow-y: scroll;
} /* fix for FF/Opera/Safari scrolbar jump*/

body {
	font: 81.25%/1.6 "Segoe UI", Arial, Helvetica, sans-serif;
	background: url(../images/project-paper.png) repeat fixed left top;
	text-align: center;
	color: #333;
}

/* Main layout elements 
--------------------------------------------------------------------------*/

#wrapper {
	margin: 10px auto;
	min-width: 600px;
	text-align: left;
	background-color: rgb(255, 255, 255);
	border-top: 1px solid #999;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #CCC;
	padding: 1px;
}

#outerWrapper {
	margin: 0 auto;
	max-width: 75em; /* see also ie6only.css */
}

#header {
	height: 100px;
	padding: 10px 20px 0 15px;
	background: #69C url(../images/we-love-websites.gif) no-repeat 94% 100%;
	border-bottom: 1px solid #CCC;
}

#column1 {
	width: 25%;
	float: left;
	list-style: none;
	background: #FFF;
	margin-left: 0;
}

#content {
	width: 74%;
	float: right;
	background: #FFF;
}

#mainContent {
	width: 52%;
	margin: 0;
	float: left;
	padding-top: 10px;
	padding-bottom: 20px;
	background: #FFF;
}

#secondaryContent {
	width: 44%;
	display: inline; /* :IE double margin float bug */
	float: right;
	background-color:#FFF;
}

#footer {
	clear: both;
	background:#FFF;
	padding: 1px 1px 20px 15px;
	border-top: 1px solid #DDD;
}

/* Two column pages 
--------------------------------------------------------------------------*/

#contact #secondaryContent, #examples #secondaryContent, #templates #secondaryContent, #portfolio #secondaryContent {
	width: 4%;
}

#contact #mainContent, #examples #mainContent, #templates #mainContent, #portfolio #mainContent {
	width: 92%;
}

/* Link styles 
--------------------------------------------------------------------------*/

a:link, a:visited {
	color: #36C;
	text-decoration: underline;
}

a:hover, a:focus {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.cvw a:link, .cvw a:visited {
	color: #CCC;
	text-decoration: none;
}

.buy a, #secondaryContent .buy a {
	margin-right: 30px;
	padding: 4px;
	background: #F7A531;
	border: 1px solid #EC8B09;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Navigation 
--------------------------------------------------------------------------*/

#menu {
	width: 85%;
	/*width: 200px;*/
	overflow: hidden;
	margin: 0 0 1.5em;
	list-style-type: none;
	/*position: fixed;*/
}

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

#menu li {
	float:left;
	width: 100%;
	margin:0;
	padding: 0
}

#menu a, #menu strong {
	display:block;
	width: 90%;
	padding: 3px 0 3px 20px;
	text-decoration: none;
	background-color:#FFF;
	color: #444;
	border-bottom: 1px #EEE solid;
}

#menu li a {
	width: 90%;
	padding-left: 20px;
	background-color:#FFF;
	color: #444;
	-webkit-transition: background-color .2s ease; /* fade in the bg-color*/
	-moz-transition: background-color .2s ease;
	-o-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

#menu li a:focus, #menu li a:hover, #menu li a:active {
	background-color:#D8A15A;
	color: #FFF;
}

/* Second level */
  #menu li ul li a,  #menu li ul li#active,  #menu li ul li strong,  #menu li ul li span {
	width: 80%;
	padding-left: 40px;
}

#menu li ul li a {
	background-color:#f8f8f8;
	color: #666;
}

#menu li ul li a:focus,  #menu li ul li a:hover,  #menu li ul li a:active {
	background-color:#D8A15A;
	color: #FFF;
}

/* Paddings 
--------------------------------------------------------------------------*/

#secondaryContent {
	padding-top: 25px;
}

#column1 *, #secondaryContent * {
	padding-left: 15px;
	padding-right: 20px;
}

#column1 * *, #secondaryContent * * {
	padding-left: 0;
	padding-right: 0;
}

/* Headings 
--------------------------------------------------------------------------*/

h1, h2, h3 {
	font-weight: normal;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
	color: #D8A15A;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: -1px;
}

h1, h2, h3, h4, p {
	margin: 1em 0 .5em;
}

h1 {
	font-size: 200%;
	margin-top: 0;
}

h2 {
	font-size: 160%;
}

h3 {
	font-size: 140%;
}

h4 {
	font-size: 110%;
}

/* Main divs and other global styles 
--------------------------------------------------------------------------*/

p, li {
	font-size: 1em;
}

#secondaryContent h2 {
	font-size: 1.3em;
	margin: 0;
}

#column1 h2 {
	color: #808080;
	font-size: 120%;
	margin-top: 0;
	line-height: 1.1em;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
}

#mainContent p, #secondaryContent p {
	line-height: 1.4em;
	font-size: 100%;
}

#content li {
	margin-left: 20px;
	color: #3688BA;
}

#mainContent li, #terms #secondaryContent li {
	list-style: disc;
	color: #3D76AF;
	margin-right: 10px;
}

#mainContent ul, #terms #secondaryContent ul {
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

#leftColInfo {
	border-top: 4px solid #EDEDE5;
	border-right: 1px solid #EDEDE5;
	border-bottom: 4px solid #EDEDE5;
	border-left: 1px solid #EDEDE5;
	padding-top: 10px;
	margin-bottom: 25px;
	width: 69%;
	margin-left: 15px;
	font-size: 90%;
	color: #7F7F7F;
}

#leftColInfo p img {
	margin-left: 12px;
}

/* Paragraphs
--------------------------------------------------------------------------*/

#mainContent .caption {
	color: #999;
	font-size: 92.3%;
	border-bottom: 1px solid #DFDFDF;
}

.buy {
	padding: 10px;
}

#secondaryContent .sideBox3 .buy {
	border: 0;
}

/* Images 
--------------------------------------------------------------------------*/

.max {
	max-width: 100%;
}

.featured {
	margin-top: 1em;
	border: 5px solid #EDEDE5;
}

.featureImage {
	border: 2px solid #F1DFC7;
}

/* Side boxes 
--------------------------------------------------------------------------*/

#secondaryContent .sideBox, #secondaryContent .sideBox2, #secondaryContent .sideBox3, #secondaryContent .sideBox4 {
	background: #D1E0EF;
	width: 90%;
	padding: 0 10px 0 0;
	margin-bottom: 15px;
	-moz-border-radius: 15px 0 15px 0;
	-webkit-border-radius: 15px 0 15px 0;
	border-radius: 15px 0 15px 0;
}

#secondaryContent .sideBox2 {
	background: #B5E6CD;
}

#secondaryContent .sideBox3 {
	background: #DDF4FF;
}

.highlighted {
	background: #F1F0B4;
	padding: 10px;
}

#secondaryContent .sideBox4 {
	background: #DDDDF4;
	color: #66C;
}

#secondaryContent .sideBox h2, #secondaryContent .sideBox2 h2, #secondaryContent .sideBox3 h2, #secondaryContent .sideBox4 h2, #secondaryContent .sideBox3 h3 {
	color: #4583C0;
	padding: 10px 10px 0;
	border-bottom-style: none;
	font-size: 140%;
}

#secondaryContent .sideBox3 h2 {
	color: #4583C0;
}

#secondaryContent .sideBox3 h3 {
	color: #4583C0;
	padding-top: 0;
	margin-top: 0;
	font-size: 130%;
}

#secondaryContent .sideBox4 h2 {
	background: no-repeat left top;
}

#secondaryContent .sideBox ul, #secondaryContent .sideBox blockquote {
	padding: 10px 5px 10px 0;
	border-top: 1px solid #96B8DA;
	margin-left: 10px;
}

#secondaryContent .sideBox blockquote {
	padding-top: 0;}

#secondaryContent .sideBox2 ul, #secondaryContent .sideBox2 blockquote {
	background: url(../images/closequote2.gif) no-repeat right center;
}

#secondaryContent .sideBox4 ul {
	padding: 10px 5px 10px 0;
	border-top: 1px solid #C2C2EB;
	margin-left: 10px;
}

#secondaryContent .sideBox3 p, #secondaryContent .sideBox4 p {
	padding: 5px 5px 10px 0;
	border-top: 1px solid #A8E2FF;
	margin-left: 10px;
	color: #4583C0;
	margin-top: 5px;
}

#secondaryContent .sideBox4 p {
	border-top: 1px solid #C2C2EB;
	color: #333;
}

/* Toggle list 
--------------------------------------------------------------------------*/

#content ol.message_list li {
	list-style:none;
	margin-left: 10px;
}

.message_head {
	cursor: pointer;
	position: relative;
}

#secondaryContent .sideBox.sideBox3 .message_list li .message_body ul {
	margin-left: 0;
}

.message_list li .message_body ul li {
	padding-bottom: 10px;
	padding-top: 5px;
	border-bottom: 1px dotted #93DCFF;
}

/* Definition list gallery and other image styles
--------------------------------------------------------------------------*/

#gallery {
	float: left;
	width: 100%;
	padding: 10px 0;
	background: #FAF3EB;
	margin-bottom: 10px;
}

#gallery dl {
	overflow: auto; /* self-clears floats within */
	width: 85%;
	margin: 10px 5px 10px 10px;
	padding: 0 0 5px;
	border-bottom: 1px solid #EDEDE5;
}

#gallery dt {
	float: right;
	width: 70%;
	margin: 0;
	padding: 0;
	font-size: 130%;
	letter-spacing: 1px;
	color: #627081;
}

#gallery dd {
	margin: 0 0 0 30%;
	padding: 0;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
}

#gallery dl dd.img {
	margin: 0;
}

#gallery dd.img img, #mainContent .sq, #secondaryContent .sq, #secondaryContent .screenshot2 {
	float: left;
	margin: 0 8px 3px 0;
	padding: 4px;
	border: 1px solid #D9E0E6;
	border-bottom-color: #C8CDD2;
	border-right-color: #C8CDD2;
	background: #FFF;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

#gallery dd.img a:hover img, #secondaryContent a:hover .sq, #mainContent a:hover .sq, #secondaryContent a:hover .screenshot2 {
	/*border: 1px solid #89A7C9;*/
	background: #DDE7F0;
}

#mainContent .sq, #secondaryContent .screenshot2 {
	float: none;
}

#gallery .alt dt {
	float: left;
}

#gallery .alt dd {
	margin: 0 98px 0 0;
}

#gallery .alt dd.img img {
	float: right;
	margin: 0 0 0 8px;
}

#secondaryContent #gallery {
	width: 93%;
}

/* Portfolio two-column list 
--------------------------------------------------------------------------*/

#mainContent ul.portfolio {
	list-style: none;
}

#mainContent ul.portfolio li {
	list-style: none;
	float: left;
	width: 49%;
	margin-bottom: 5px;
	padding: 0;
	margin-right: 0;
	margin-left: 0;
}

/* List Gallery 
--------------------------------------------------------------------------*/

#listGallery {
	list-style: none;
	margin-left: 0;
}

#listGallery li {
	margin-left: 5px;
	margin-bottom: 10px;
	float: left;
	font-size: 90%;
	margin-right: 5px;
	list-style: none;
}

#listGallery li a {
	outline: none;
}

#listGallery img {
	display: block;
	border: 3px #E1E1E1 solid;
	margin-bottom: 3px;
}

#listGallery img:hover {
	display: block;
	border: 3px solid #999;
	margin-bottom: 3px;
}

/* Others 
--------------------------------------------------------------------------*/

.fleft {
	float: left;
	margin-right: 10px;
}

.fright {
	float: right;
	margin-left: 10px;
}

.name {
	color: #AC7428;
	letter-spacing: 1px;
}

.new {
	color: #F33;
	font-weight: bold;
}

hr {
	background:#A3CCE4;
	height:1px;
	color:#A3CCE4;
	border:none;
	margin-top: 1em;
	width: 100%;
	margin-bottom: 1em;
}

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

.skype {
	border: 1px dashed #F1DFC7;
	margin-right: 5px;
	float: right;
	margin-top: 0;
	width: 30%;
	padding: 5px;
}

.skype img {
	vertical-align: text-top;
}

.img-top {
	margin-top: 15px;
}

.smaller {
	font-size: 90%;
}

.skiplink {
	display: block;
	position: absolute;
	top:0;
	left: -9999px;
	height: 20px;
	padding: 10px 20px;
	background: #fff;
}

.skiplink:focus, .skiplink:active {
	position: static;
	left: 0;
}

/* hCard 
--------------------------------------------------------------------------*/

div.vcard {
	margin-left: 1px;
}

.street-address {
	display: inline;
}

.region {
	display: block;
}

/* Show-hide sections 
--------------------------------------------------------------------------*/

#newer, #newer h3, #newer h2 {
	margin: 0;
	padding: 0;
}

#newer p {
	border-bottom: 1px solid #A3CCE4;
	padding-bottom: 10px;
}

/* Lifestream/SimplePie 
--------------------------------------------------------------------------*/

div.chunk {
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: solid 1px #EDEDE5;
}

div.chunk a {
	text-decoration: none;
}

div.chunk h4 {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	text-indent: 25px;
}

/* Tables 
--------------------------------------------------------------------------*/

#mainContent table {
	border: 1px solid #EDEDEC;
	padding: 4px;
}

#mainContent table th {
	background: #F8F8F8;
	border-bottom: 1px solid #EDEDEC;
}

#mainContent table td {
	border-bottom: 1px solid #EDEDEC;
}

/* Organic Tabs amended from Chris Coyier http://css-tricks.com
--------------------------------------------------------------------------*/

.js .hide { /*only hide if js class added to html tag, i.e. user has JavaScript ON*/
	position: absolute;
	top: -9999px;
	left: -9999px;
}

#example-one {
	background: #EEE;
	padding: 10px;
	margin: 20px 0; /*-moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; */
}

#example-one .nav {
	overflow: hidden;
	margin: 0 0 10px 0;
}

#example-one .nav li {
	width: 97px;
	float: left;
	margin: 0 10px 0 0;
	list-style: none
}

#example-one .nav li.last {
	margin-right: 0;
}

#example-one .nav li a {
	display: block;
	padding: 5px;
	background: #959290;
	color: white;
	font-size: 100%;
	text-align: center;
	border: 0;
}

#example-one .nav li a:hover {
	background-color: #111;
}

.list-wrap {
	padding: 20px 20px 30px;
}

#example-one .sq {
	float: left;
}

#example-one p {
	margin: 0;
	line-height: 1.5;
	border-top: 1px dotted #959290;
	padding-top: 7px;
	padding-bottom: 7px;
}

#example-one .first {
	border-top: none;
}

#example-one ul li.nav-one a.current, #example-one ul.featured li a:hover {
	background-color: #0575f4;
	color: #FFF;
}

#example-one ul li.nav-two a.current, #example-one ul.ecommerce li a:hover {
	background-color: #d30000;
	color: #FFF;
}

#example-one ul li.nav-three a.current, #example-one ul.wordpress li a:hover {
	background-color: #8d01b0;
	color: #FFF;
}

#example-one ul li.nav-four a.current, #example-one ul.featured li a:hover {
	background-color: #FE4902;
	color: #FFF;
}

#example-one ul li.nav-five a.current, #example-one ul.consultancy li a:hover {
	color: #FFF;
	background: #66C;
}

/* Contact form 
--------------------------------------------------------------------------*/

form#contact-form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
	margin: 1.5em 0em;
	padding: 0;
	/*min-width: 500px;*/
	max-width: 100%;
	width: 99%;
	font-size: 100%;
}

form#contact-form fieldset {
	padding: 10px;        /* padding in fieldset support spotty in IE */
	margin: 1em 0 1;
	border: 1px dashed #ADB7DB;
	background: #EDF3FA;
}

form#contact-form label {
	display: block;  /* block float the labels to left column, set a width */
	float: left;
	width: 10em;
	padding: 0;
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right;
}

form#contact-form fieldset legend {
	font-size:1.2em; /* bump up legend font size, not too large or it'll overwrite border on left */
	color: #69c;
	letter-spacing: 1px;
}

form#contact-form input, form#contact-form textarea, form#contact-form select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form#contact-form input#Send {
	padding: 3px;
}

#contact-form #Comments {
	width: 60%; /*wider inputs*/
}

#contact-form #Email, #contact-form #Name/*, #contact-form #Telephone, #contact-form #Question */{width: 50%;}

form#contact-form textarea {
	overflow: auto;
}

form#contact-form small {
	color: #666;
	display: block;
	margin: 0 0 5px 12em; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form#contact-form .required {
	font-weight:bold;
} /* uses class instead of div, more efficient */

form#contact-form br {
	clear:left;
 /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
#contact-form fieldset #submit {
	padding: 0.5em;
}


form#contact-form label.error, form#contact-form .form_error {
	color:#c00;
	font-weight:bold;
	width: 50%;
	margin-left: 11em;
	text-align: left
}

input.error, .form_error_row, select.error {
	border: 1px dashed #F33;
}

input.error, select.error {
	color: #333;
	font-weight: normal;
}

form#contact-form label.error {
	width: 70%;
}


/* Media Queries
--------------------------------------------------------------------------*/

/* Original elastic layout has min-width = 600px, therefore add 599 px media query for smaller devices*/

@media screen and (max-width: 599px) {

#column1, #content, #mainContent, #secondaryContent, #gallery { /*remove floats, set widths*/
	float: none;
	width: 95%;
}

#wrapper {/* reset min-width*/
	min-width: 100px;
}

#mainContent, #secondaryContent { /*change paddings*/
	padding-left: 20px;
}

#secondaryContent .sideBox, #secondaryContent .sideBox2, #secondaryContent .sideBox3, #secondaryContent .sideBox4 {/*change widths, margins*/
	width: 87.5%;
	margin-left: 20px;
	margin-right: 20px;
}

#header {/*change bg image*/
	background: #69C url(../images/we-love-websites2.gif) no-repeat 94% 100%;
}

.screenshot2 {/* change margin on these images*/
	margin-left: 0;
}

form#contact-form label.error {
	margin-left: 0;
}
}

/* Just a few rules to make the form better on smallest screens*/

@media screen and (max-width: 380px) { 

form#contact-form small {
	margin-left: 0;
}

form#contact-form label {text-align: left;}

}