/*
Theme Name: C2-cc.com
Description: Theme design for C2 from YAMP html Template by Webbografico.com
Author: Dani McDaniel
Author URI: http://anidandesign.com
*/

/*---------------------- 
COLOR SWATCHES 
green #62bb3f;
blue #006599;
lgt blue: #57c6ff;
drk gray: #bdbdbd;
lgt gray: #ccc;

-----------------------*/

/* @override http://www.webbografico.com/yaml/css/style.css */

/* @group reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* @end */

/* @group typography */
body {
	font: 13px/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
}

h1 {
	font-size: 42px;
}

h2 {
	font-size: 34px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

h1,h2,h3,h4,h5,h6 {
	margin: 5px 0;
	font-family: Nevis, Helvetica, Arial, "sans serif";
}

h3.sidebarTitle {
	font-size: 18px;
	text-transform: uppercase;
}

h2.pagetitle {
	font-size: 29px;
	color:  #333;
	margin: 0 0 15px;
	
}
h4.pagetitle { font-weight: normal;  font-size: 26px; }
h3.pagetitle {
	font-size: 18px;
	color:  #333;
	margin: 10px 0 10px;
	
}

#mainContent #portfolio h3 {
     text-transform: uppercase;
     margin-bottom: 20px;
}

	#sidebarInfo h3 {
		padding: 0 30px 0px;		
	}

/* @group colors */
html {
	background: #fff;
}

body {
	color: #333;	
}

h1,h2,h3,h4 {
	color:  #333;
}

h5,h6 {
	color: #006599;
}
#sidebar h3 {
	color: #666666;
}

a:link,
a:visited {	
	color:  #62bb3f;
        text-decoration: none;
}
a:hover, a:active { color: #006599; text-decoration: none; }
/* @end */

/* @end */

/* @group layout */

#wrapper {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#header {
	position: fixed;
	top: 0;
	width: 960px;
	padding: 0 30px;
}

#logo {
	width: 268px;
	height: 125px;
}

.clear {
	clear: both;
}
.portfolioclear { clear: both; height: 150px; }

#mainContent {
	width: 585px;
	margin-left: 320px;
	padding: 0 0 0 20px;
	color:#666;
}

	#mainContent .pageImage {
	padding: 10px;
	background: #cccccc;
	border:  1px solid #bdbdbd;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin: 0;  /*reset the normal image margin */
}
	#mainContent #home,
	#mainContent #portfolio,
	#maincontent #staff,
        #mainContent #capabilities,
	#mainContent #stream,
	#mainContent #altContact {
	float: left; overflow: auto; /* just to ensure all the floating elements inside them are contained by them*/ 
}
#mainContent #portfolio #folio2, 
#mainContent #portfolio #folio3,
	#mainContent #home,
	#mainContent #portfolio,
	#mainContent #staff,
	#mainContent #capabilities,
	#mainContent #stream,
	#mainContent #altContact {
	padding-bottom: 395px; /* distance to make every div a page in common resolution */
	padding-top: 120px !important;  /* height of the header to align the divs to the div#sidebarinfo, for savvy browsers */
	padding-top: 28px; /* for IE6 and below (part of the IE% position fixed hack) */
}

	#mainContent  {
	margin-bottom:395px; /* just to be sure that the last element have enough space after to scroll to the top of the page */
}

	#mainContent .sub {
	margin: 20px 0 60px; overflow: auto;
}
    #mainContent #staff .sub .left { float: left; margin: 0px 0 0; width: 46%; }
    #mainContent #staff .sub .right { float: right; margin: 0px 0 0; width: 46%; }
    
    #mainContent #staff .sub .left img, #mainContent #staff .sub .right img {
     padding: 2px;
     background: #62bb3f;
     border:  1px solid #59ab39;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*	#mainContent #home img,
	#mainContent #portfolio img,
	#mainContent #staff img,
	#mainContent #capabilities img,
	#mainContent #stream img,
	#mainContent #altContact img {
	margin: 5px 10px 5px 0;
        padding: 10px;
	background: #cccccc;
	border:  1px solid #bdbdbd;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}*/

	#mainContent .sub ul {
     list-style: none;
	margin: 0; padding:0;
}
	#mainContent .sub li {
     list-style: none;
     margin: 0; padding: 7px 0;
}
		#mainContent .sub span.client {
		color:  #334c83;
		display: block;
		margin-top: 1.5em;
		text-align: right;
}
		#mainContent .sub p {
		margin-top:10px;
}
          #mainContent .sub p.pdf {
		font-size: 12px;
		margin-top:16px;
		background: url(img/pdf.png) 0% 50% no-repeat;
		padding: 0 0 0 24px;
                height: 22px;
}


#mainContent #portfolio #folio1, 
#mainContent #portfolio #folio2, 
#mainContent #portfolio #folio3 { overflow: auto; margin: 0 0 250px 0; }

#portfolio img.thumb {
	margin: 5px 0 10px;
}

/* @end */


/* @group staff */

#staff p,
#staff h6 {
	margin-left: 100px;
}

/* @end */

/* @group inPage navigation */

a.verticalNavButton {

	display: block;
	float: right;
	text-decoration: none;
	margin: 30px 0px 20px 0;
	padding: 3px 6px 3px 20px;
	background: #62bb3f url(img/verticalNavButton.png) no-repeat 3px 0;
	line-height: 13px;
	font-size: 11px;
	border:  1px solid #59ab39;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #f2f2f2;
	clear: both;
}

a.up {
	background: #62bb3f url(img/verticalNavButton.png) no-repeat 3px -15px;
	color: #f2f2f2;
}

/* @end */


/* @group sidebar */

#sidebar {
	position: fixed !important; /*every savvy browser*/
	position: absolute; /*IE6 and below (part of the IE% position fixed hack) */
	top: 103px;
	width: 260px;
	padding: 20px 10px 20px 30px;
}
#sidebarInfo a, #sidebarInfo a:visited { color: #666; text-decoration: none; }
#sidebarInfo {
	color: #666;
	margin-bottom: 20px;
	background: #ededed;
	border: 1px solid #dad9d9;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	padding: 10px 10px 10px;
        font-family: Verdana,Geneva,Tahoma,sans-serif;
}
	
	#sidebarInfo ul {
		padding: 0 10px 10px;
}

		#sidebarInfo ul li {
		padding-left: 20px;
}
		
		#sidebarInfo ul li.twitter {
		background: url(img/sidebarInfoIcons.png) no-repeat 0 0;
}

		#sidebarInfo ul li.phone {
		background: url(img/sidebarInfoIcons.png) no-repeat 0 -19px;
}

		#sidebarInfo ul li.email {
		background: url(img/sidebarInfoIcons.png) no-repeat 0 -39px;
}

#copyInfo {
	text-align: center;
	color: #666;
	font-size: 10px;
}

#copyInfo a:link,
#copyInfo a:visited {
	color: #647a86;
	text-decoration: none;
}

#copyInfo a:hover {
	color: #334c83;
}

/* @end */

/* @group mainNav */

#mainNav {
	padding: 0 10px;
	margin-bottom: 20px;
}

	#mainNav li {
	font-family: Verdana,Geneva,Tahoma,sans-serif;
	font-size: 13px;
	height: 25px;
	line-height: 25px;
	margin-bottom: 5px;
}
		
		#mainNav li a:link,
		#mainNav li a:visited {
		display: block;
		padding-left: 30px;
		color:  #fff;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
		/*letter-spacing: 1px;*/
		background: #66cbff;
		border: 1px solid #57c6ff;
		-webkit-border-radius : 4px;
		-moz-border-radius : 4px;
		border-radius : 4px;
}

		#mainNav li a:hover {
		background:  #006599;
		border: 1px solid #015c8b;
		-webkit-border-radius : 4px;
		-moz-border-radius : 4px;
		border-radius : 4px;}

/* @end */


/* @end */

/* @group ajaxMagiQuickContact */

#contactForm {
	padding: 0px; margin: 0; 
}

div#form {
	padding: 0px; margin: 0; 
}

/* @group Ajax Form Responses */


#response{
	display:none;
	padding: 5px 10px;
        margin: 10px 0;
}

	div#form .error {
	border: 1px solid #fcd5da;
	background: #fef1f4;
}

.contactUnknown {
	color: #DE2F2F;
	background: #F9E4E6;
	border: 1px solid #F8ABAC;
	font-size: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.contactWait{
	color: #DE6600;
	background: #F9E3A7;
	border: 1px solid #F9C842;
	font-size: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.contactOk {
	color: #52760D;
	background: #D1F48D;
	border: 1px solid #ACE047;
	font-size: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}


/* @end */

/* @group Alternate ContactForm */
	
	#altContact #contactUs {
	width: 216px;
	float: left;
}

	#altContact h3 {
	color: #666;
}
/* @end */

/* @end */

/* @group commonHTML */

pre {
	background: #e3f4ff;
	border: 1px solid #9ed9ff;
	width: 500px;
	margin: 20px 0;
	overflow: auto; 
	padding: 10px;
}

hr {
	height: 1px;
	background-color: #dbe9f1;
	border: none;
	border-bottom: 1px solid #c1d2dc;
	width: 100px;
	margin: 20px auto 30px;
}

sup {
	font-size: 60%;
	vertical-align: top;
}

sub {
	font-size: 60%;
	vertical-align: bottom;
}

cite {
	font-style: italic;
	color: #522222;
}

acronym, abbr {
	cursor: help;
	color: #522222;
}

blockquote {
	display: block;
	background: #f1f9fe;
	border: 1px solid #d6d6d6;
	padding: 10px 40px;
	font-style: italic;
	margin: 20px 0;
}

blockquote span.author {
	display: block;
	margin-top: 1px;
	text-align: right;
	font-size: 80%;
	color: #727272;
	
}

#mainContent ul {
	list-style: none;
	padding: 0; margin: 0;
}

#mainContent ol {
	list-style-type: decimal;
	list-style-position: inside;
	padding-left: 20px;
}

#mainContent dl {
	padding-left: 20px;
        margin: 0 0 10px;
}

#mainContent dl dt {
	font-weight: bold;
	font-style: italic;
}

#mainContent dl dd {
	padding-left: 10px;
}

table {
	border-collapse: collapse;
	border: 1px solid #b6cfde;
	text-align: center;
}

th {
	background-color: #10389a;
	color: #f2f2f2;
	padding: 5px 10px;
}

tr {
	background-color: #ebf6fe;
}

tr.even {
	background-color: #fff;
}

td {
	padding: 2px 10px;
	border-right: 1px solid #a4c5d7;	
}

legend {
	font-size: 110%;
	font-weight: bold;
	color: #424242;
}

 {
	background: #f1f9fe;
	border: 1px solid #b7cddb;
}

input.file {
	background: none;
	border: none;
}

input.button {
	height: 20px;
	line-height: 18px;
	background: #10389a;
	border:  1px solid #5b7fd8;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #f2f2f2;
	font-size: 11px;
	padding: 0 6px 3px;
	margin-top: 10px;
}

label {
	font-style: italic;
	line-height: 2;
}

/*input:focus,
textarea:focus {
	background-color: #f8f8f8;
}*/
/* @end */

/*---------------------------------------------------------------------------------------
BLOG CSS @dani
----------------------------------------------------------------------------------------*/
/*Clears style from smileys---------*/
img.wp-smiley { border: 0px; padding: 0px; margin: 0; }

/* POSTS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#blogwrap { margin: 120px 0 0; }
.post { padding: 0 0 30px 0; margin: 0; }
.post-index { margin:0; }
.post-single { margin:0 0 0 0; }

/* ENTRY  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.entry-content { line-height: 21px; }
.entry-content p { padding: 7px 0; }
.entry-content-single {}
.entry-content-index .left { float: left; padding: 0 10px 0 0; width: 14%; }
.entry-content-index .right { float: right; padding: 0; width: 83%; margin: 0 0 20px 0; }
.entry-content .left img { background: #FED087; border: 1px solid #e3b265; padding: 2px; height: 70px; width: 70px; margin: 5px 0 0 0; }

/* META - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.additional-meta { text-transform: uppercase; margin: 5px 0; }

.entry-meta {   display: block;
		padding: 3px 5px;
                margin: 10px 0;
		color:  #fff;
		font-weight: normal;
		text-decoration: none;
		background: #66cbff;
		border: 1px solid #57c6ff;
		-webkit-border-radius : 4px;
		-moz-border-radius : 4px;
		border-radius : 4px;
}
.entry-meta a, .entry-meta:visited { color: #006599; text-decoration: none; }
.entry-meta a:hover, .entry-meta:active { color: #fff; text-decoration: none; }

#stream .sub .entry-meta ul, #blogwrap .post .entry-meta ul { display: inline; margin: 0; padding: 0; list-style: none; }
#stream .sub .entry-meta li, #blogwrap .post .entry-meta li { display: inline; padding: 0 6px 0 0; margin: 0; list-style: none; }

#main #mainContent #stream .sub .social { margin: 10px 0 0; }
#main #mainContent #stream .sub .social ul { display: inline; margin: 0; padding: 0; list-style: none; }
#main #mainContent #stream .sub .social li { display: inline; margin: 0 4px 0 0; padding: 0; list-style: none; }
#main #mainContent #stream .sub .social li a img { background: none; border: 0; }

/* HEADERS ---------------------------------------------------------------------*/
h2.entry-title { font-size:200%; line-height: 30px; margin: 0; }
h2.index-entry-title, h2.single-entry-title, h2.archive-title, h2.page-title, h2.search { margin: 0 0 10px 0; }
h2.entry-title a, h2.entry-title a:visited { color: #333; text-decoration: none; }
h2.entry-title a:hover, h2.entry-title a:active { color: #62bb3f; text-decoration: none; }

h2#comments, h3#comments, h3#pings { margin: 20px 0 10px; font-size:170%; }

img.alignleft { float: left; margin: 0 7px 2px 0; }
img.alignright { float: right; margin: 0 0 2px 7px;  }
img.aligncenter { text-align: center; margin: 7px auto; display: block; }
img.alignleft, img.alignright, img.aligncenter {
	background: #f5fafd;
	padding:  3px;
	background: #cccccc;
	border:  1px solid #bdbdbd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/* NAVIGATION  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.navigation { width:100%; height:auto; float:left; clear:both; padding: 0px 0px 20px; }
.nav-next {float:right; width:48%; text-align:right;}
.nav-prev {float:left; width:48%; text-align:left;}
#navigation-index {}
#nav-single {}
#nav-prev-single {}
#nav-next-single {}
.comment-nav {}

/*COMMENTS-----------------------------------------------------------*/

/* COMMENTS LIST ---------------------------------------*/
ul.commentlist, ul.pinglist { margin: 20px 0; }
li.comment,li.trackback, li.pingback { margin: 0px 0 20px; padding: 10px; border: 1px solid #dad9d9; background: #ededed; color: #111; line-height: 19px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

li.alt { margin: 0px 0 20px; padding: 10px; border: 1px solid #dad9d9; background: #fff; color: #262626; line-height: 19px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
ul.children { margin: 0 0 0 10px; }

/* STYLES AUTHOR COMMENTS */
ul.commentlist .comment-author-admin { border: 1px solid #62bb3f; background: #fff; color: #262626; }
ul.commentlist .comment-author-admin .gravatar img { padding: 2px; background: #ccc; border: 1px solid #62bb3f; float: right; margin: 4px 0px 10px 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

.gravatar img { padding: 2px; background: #ccc; border: 1px solid #bdbdbd; float: right; margin: 4px 0px 10px 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

/*COMMENT AUTHOR NAME AND DATE*/
.commentmeta { margin: 0 0 10px; text-transform: uppercase;  }
.comment-author-admin .commentmeta, li.alt .commentmeta { margin: 0 0 10px; }
.commentmeta span { font-size: 15px; font-weight: bold; }

/*AWAITING MODERATION*/
.commentwait { margin: 6px 0; font-style: italic; text-transform: uppercase; }


/*REPLY TO COMMENT*/
.reply { padding: 0; text-transform: uppercase; margin: 10px 0 0 0; font-size: 90%; }
.comment-author-admin .reply, li.alt .reply, li.alt .commentwait { }

/* COMMENT FORM */
form#postcomment { margin:15px 0; }

p.commenttext { line-height: 19px; margin: 10px 0; }

/* FORM INPUTS */
div#form textarea, div#form input, input#searchfield, input#author, input#email, input#url, textarea#comment, input#submit, div#form input#sendmail { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: block; border: 1px solid #bdbdbd; background: #ccc; padding: 10px; margin: 0 0 8px; width: 563px; color: #111; font-size: 125%; }
input#submit, div#form input#sendmail { width: 585px; }
input#submit:hover, div#form input#sendmail:hover { color: #111; border: 1px solid #111; cursor: pointer; }
div#form input:focus { border: 1px solid #111; }
div#form textarea { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; }

/* SEARCH FORM ------------------------------------------*/
#search { margin: 25px auto; }
form#searchform {}