/* @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;
}

/* @group colors */

html {
	background: #e2e2e2 url(img/siteBg.jpg) no-repeat;
}

body {
	color: #424242;	
}

h1,h2,h3,h4 {
	color:  #be2f2f;
}

h5,h6 {
	color: #424242;
}
#sidebar h3 {
	color: #666;
}

a:link,
a:visited {	
	color:  #be2f2f;
	
}
/* @end */

/* @end */

/* @group layout */

#wrapper {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#header {
	position: fixed;
	top: 0;
	width: 960px;
	padding: 0 30px;
}

#logo {
	width: 260px;
	height: 90px;
}

.clear {
	clear: both;
}

#mainContent {
	width: 580px;
	margin-left: 320px;
	padding: 0 30px;
	color:#666;
}

	#mainContent .pageImage {
	padding: 10px;
	background: #fff;
	border:  1px solid #e2e2e2;
	-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 #common,
	#mainContent #altContact {
	float: left; /* just to ensure all the floating elements inside them are contained by them*/ 
}

	#mainContent #home,
	#mainContent #portfolio div,
	#mainContent #staff,
	#mainContent #common,
	#mainContent #altContact {
	padding-bottom: 395px; /* distance to make every div a page in common resolution */
	padding-top: 110px !important;  /* height of the header to align the divs to the div#sidebarinfo, for savvy browsers */
	padding-top: 18px; /* for IE6 and below (part of the IE% position fixed hack) */
}

	#mainContent  {
	margin-bottom:0px; /* just to be sure that the last element have enough space after to scroll to the top of the page */
}

	#mainContent .sub {
	margin-top: 20px;
	float: left;
	width: 250px;
	padding: 20px 20px 0;
}

	#mainContent img {
	float: left;
	margin: 5px 10px 5px 0;
	background: #fff;
	padding:  3px;;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

		#mainContent .sub span.client {
		color:  #be2f2f;
		display: block;
		margin-top: 1.5em;
		text-align: right;
		
}

		#mainContent .sub p {
		margin-top:10px;
}

h3.pagetitle {
	font-size: 18px;
	color:  #be2f2f;
	margin: 0 0 10px;
	
}

		#mainContent #portfolio h3 {
		text-transform: uppercase;
		margin-bottom: 20px;
}
/* @group type1 portfolio with three little thumb */

.longDesc {
			margin-left: 320px;
}

h4.longDesc {
	margin-bottom: 10px;
	font-size: 16px;
	color:  #be2f2f;
	text-transform: capitalize;
}
			#mainContent #portfolio div.smallThumbs div.folioAssets {
			width: 270px;
			float: left;
			margin: 0;
			padding: 0 25px 0 0 !important; /* take care of the !important padding to #portfolio div*/
			
}

	#portfolio ul.thumbs,
	#portfolio ul.shortDesc {
	list-style-type: none;
	margin-bottom: 20px;
	float: left;
	padding: 0;
}

		#portfolio  ul.thumbs li {
		display: inline;
		float: left;
		margin: 0 20px 0 0;
}

		#portfolio ul.shortDesc li {
	margin-bottom: 5px;
}

	#portfolio img.thumb {
	margin: 5px 0 10px;
}

		

/* @end */

/* @group type2 portfolio with one big thumb */

			#mainContent #portfolio div.bigThumb div.folioAssets {
			width: 270px;
			float: left;
			margin: 0;
			padding: 0 25px 0 0 !important; /* take care of the !important padding to #portfolio div*/
			
}

	
	#portfolio div.bigThumb ul.shortDesc {
	float: left;
	padding: 0 25px 0 0;
	margin-top: 20px;
}

	div.bigThumb h4.longDesc {
	margin-top: 290px; 
}

	#mainContent div.BigThumb img.onlyThumb {
	margin: 0 !important;
}
				
/* @end */

span.shortDesc {
	font-style: italic;
	font-size: 12px;
}

span.shortDesc strong {
	font-style: normal;
	color: #424242;
}


/* @group staff */

#staff p,
#staff h6 {
	margin-left: 100px;
}



/* @end */

/* @group inPage navigation */

a.verticalNavButton {
	display: block;
	float: right;
	text-decoration: none;
	margin: 40px 20px 0 0;
	padding: 3px 6px 3px 20px;
	background: #be2f2f url(img/verticalNavButton.png) no-repeat 3px 0;
	line-height: 13px;
	font-size: 11px;
	border:  1px solid #aa2020;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #f2f2f2;
	
}

a.up {
	background: #be2f2f 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: 90px;
	width: 260px;
	padding: 20px 30px;
}

#sidebarInfo,
#contactForm {
	margin-bottom: 20px;
	background: #fff;
	border:  1px solid #e2e2e2;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 10px 10px 10px;
	
}

	#sidebarInfo h3 {
		padding: 0 30px 10px;		
	}
	
	#contactForm h3{
		padding: 0 30px;
}
	
	#sidebarInfo ul {
		padding: 0 10px 10px;
}

		#sidebarInfo ul li {
		padding-left: 20px;
}
		
		#sidebarInfo ul li.address {
		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: #a2a2a2;
	font-size: 11px;
}

#copyInfo a:link,
#copyInfo a:visited {
	color: #828282;
	text-decoration: none;
}

#copyInfo a:hover {
	color: #be2f2f;
}

/* @end */

/* @group mainNav */

#mainNav {
	padding: 0 10px;
	margin-bottom: 20px;
}

	#mainNav li {
	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:  #ddd;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		background:  #6F1111;
		border: 1px solid #837575;
		-webkit-border-radius : 4px;
		-moz-border-radius : 4px;
		border-radius : 4px;
}

		#mainNav li a:hover {
		background:  #3c1010;
		border: 1px solid #837575;
		-webkit-border-radius : 4px;
		-moz-border-radius : 4px;
		border-radius : 4px;}

/* @end */


/* @end */

/* @group ajaxMagiQuickContact */



#contactForm {
	padding: 10px 20px;
}

div#form {
	margin: 0;
}

	div#form label {
	display: block;
	padding: 0 10px;
	font-size: 12px;
}

	div#form input {
	background: #f2f2f2;
	border: 1px solid #ddd;
	height:  1.2em;
	margin-bottom: 5px;
	width: 100%;
	color: #666;
	font-size: 13px;
}

	div#form textarea {
	width: 218px;
	height: 7em;
	background: #f2f2f2;
	border: 1px solid #ddd;
	color: #666;
	font-size: 13px;
}

	div#form input:focus,
	div#form textarea:focus {
	background: #f8f8f8;
}

	div#form input#sendmail {
	display: block;
	margin: 5px 0 10px 160px;
	width: 60px;
	height: 20px;
	line-height: 20px;
	background: #be2f2f;
	border:  1px solid #aa2020;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #f2f2f2;
	font-size: 12px;
	padding: 0 6px 3px;
}

/* @group Ajax Form Responses */


#response{
	display:none;
	padding: 5px 10px;
}

	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 #contactForm {
	width:  540px;
	height:  310px;
	float: left;
}

	#altContact #contactUs {
	width: 216px;
	float: left;
}

	#altContact h3 {
	color: #666;
}

	#altContact #contactMap {
	float: right;
	width: 250px;
	height: 250px;
	margin: 0 20px;
	padding: 0;
	border: 1px solid #c8c8c8;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	
}
/* @end */

/* @end */

/* @group commonHTML */

pre {
	background:  #f2f2f2;
	border: 1px solid #ddd;
	width: 500px;
	margin: 20px 0;
	overflow: auto; 
	padding: 10px;
}

hr {
	height: 1px;
	background-color: #e6e6e6;;border: none;
	border-bottom: 1px solid #d6d6d6;
	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: #e6e6e6;
	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-type: disc;
	list-style-position: inside;
	padding-left: 20px;
}

#mainContent ol {
	list-style-type: decimal;
	list-style-position: inside;
	padding-left: 20px;
}

#mainContent dl {
	padding-left: 20px;
}

#mainContent dl dt {
	font-weight: bold;
	font-style: italic;
}

#mainContent dl dd {
	padding-left: 10px;
}

table {
	border-collapse: collapse;
	border: 1px solid #d6d6d6;
	text-align: center;
}

th {
	background-color: #a51e1e;
	color: #f2f2f2;
	padding: 5px 10px;
}

tr {
	background-color: #eee;
}

tr.even {
	background-color: #fff;
}

td {
	padding: 2px 10px;
	border-right: 1px solid #d6d6d6;	
}

legend {
	font-size: 110%;
	font-weight: bold;
	color: #424242;
}

input,
textarea {
	background: #f2f2f2;
	border:  1px solid #d2d2d2;
}

input.file {
	background: none;
	border: none;
}

input.button {
	height: 20px;
	line-height: 18px;
	background: #be2f2f;
	border:  1px solid #aa2020;
	-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 */