/* main.css */

/*===============================================*/
/*=================>>> Global <<<================*/
/*===============================================*/

/* ---------- Resets ---------- */
*{
	font-family:Tahoma, Geneva, sans-serif;
}
body{
	padding:0;
	margin:0;
}
strong{
	font-weight:bold;
}

h2, h3, h4, h5, h6{
	letter-spacing:-1px;
	font-weight:normal;
}
h2{
	margin:19px 0 10px 0;
	text-align:center;
	border-bottom:1px double #DFDFDF;
}
h3{
	color:#258300;
	font-weight:bold;
	margin:0 0 0 0;
	padding:0 10px;
}
body#about h3, body#terms h3, body#privacy h3{
	color:#258300;
	font-size:24px;
	font-weight:normal;
	padding:0 0 0 0;
}
h4{
	color:#258300;
	font-weight:bold;
	margin:0 0 10px 0;
}
hr{
	background-color:#DFDFDF;
	color:#DFDFDF;
	height:1px;
	border:0;
	margin: 15px 0;
}
label{
	font-weight:bold;
	color:#258300;
	letter-spacing:-1px;
}
input.text, textarea, input.upload{
	border:1px solid #DFDFDF;
	padding:4px;
	color:#3F3F3F;
	font-size:17px;
}
input.text{
	width:215px;
}
a img{
	border:none;
}
a.clean{
	outline:none;
}

a{
	color:#0085fe;
	text-decoration:none;
}
ul{
	margin-bottom:0px;
}
.separator{
	font-family:Arial;
}

/* ---------- Floats ----------- */
.floatleft{float:left;}
.floatright{float:right;}
.clear,.content{overflow:auto;} /* http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
.clear_old{clear:both;} /* Less semantic version */

/* ---------- Text-Alignment ---------- */
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}

/* ---------- Color Scheme ---------- */
.green{
	color:#258300;
}
.blue{
	color:#0085fe;
}
.red{
	color:#f12d00;
}

/* ------------ Buttons ------------ */
/* http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx */
a.button_red, a.button_blue, a.button_green{ /* Left side */
	display:block;
	float:left;
	height:35px;
	padding:0 0 0 15px;
	color:white;
	border:0;
	background-color:white;
	cursor: pointer;
}
a.button_red span, a.button_blue span, a.button_green span{ /* Right side */
	display:block;
	line-height:30px;
	padding:0 15px 5px 0;
}
a.button_red input, a.button_blue input, a.button_green input{
	padding:0 15px 8px 0;
	border:none;
	color:white;
	font-size:16px;
	border:none;
}

/* Blue */
a.button_blue, button.blue{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 0 -35px no-repeat;
}
a.button_blue span, button span{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 100% 0 no-repeat;
}

/* Green */
a.button_green, button.green{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 0 -105px no-repeat;
}
a.button_green span, button span{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 100% -70px no-repeat;
}

/* Red */
a.button_red, button.red{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 0 -175px no-repeat;
}
a.button_red span, button span{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 100% -140px no-repeat;
}

/* ------------ Columns ------------ */
div.threecol{
	float:left;
	width:300px;
	padding:10px;
}

div.twocol{
	float:left;
	width:460px;
	padding:10px;
}

div.centercol{
	width:460px;
	padding:10px;
	margin:0 auto 0 auto;
}

div.halfcol_l{
	width:225px;
	float:left;
}
div.halfcol_r{
	float:right;
	width:225px;
}
div.sidebar{
	width:280px;
	padding:10px;
	float:left;
}
.column{
	padding:10px;
}

/* ------------ Notification Boxes ------------ */
div.error, div.success{
	padding:20px;
}
div.error{
	background-color:#FFDFDF;
	border:1px solid #E43912;
	color:#E43912;
}
div.error ul{
	margin:0;
	padding-left:15px;
}
div.error h2, div.success h2{
	margin:-15px -15px 10px -15px;
	color:white;
	border:0;
	font-size:18px;
	font-weight:normal;
	padding:10px;
	text-align:center;
	letter-spacing:0;
}
div.error h2{
	background-color:#E43912;
}

div.success{
	background-color:#E4EFE0;
	border:1px solid #258300;
	color:#258300;
	text-align:center;
}
div.success h2{
	background-color:#258300;
}

/*===============================================*/
/*=================>>> Layout <<<================*/
/*===============================================*/

/* ------------------- Header --------------- */
div#header{
	height:100px;
	width:100%;
	background:black url('http://excalo.com/img/sprites_bg.png') scroll 0px 0px repeat-x;
	color:white;
	text-align:center;
}
/* -- Logo -- */
	h1{
	background:transparent url('http://excalo.com/img/sprites.png') scroll 0px -210px no-repeat;
		width:136px;
		height:60px;
		color:white;
		letter-spacing:-3px;
		font-weight:normal;
		font-size:46px;
		text-align:center;
		margin:10px 0 0 10px;
		float:left;
	}
	h1 a, h1 a:visited, h1 a:hover{
		color:white;
		text-decoration:none;
	}
/* -- Menu -- */
	ul#menu{
		margin:30px 0;
		padding:0;
		list-style-type:none;
		float:right;
	}
	li.menuitem{
		display:inline;
		padding:25px;
		background:transparent url('http://excalo.com/img/sprites_bg.png') scroll right -100px no-repeat;
	}
	li#menuitem_last{
		background-image:none;
	}
	ul#menu li a, ul#menu li a:hover, ul#menu li a:visited{
		color:white;
		text-decoration:none;
	}
	body#home a.home, body#order a.order, body#about a.about, body#portfolio a.portfolio, body#contact a.contact, body#terms a.terms, body#privacy a.privacy{
		color:white;
		text-decoration:none;
		border-bottom:1px solid white;
	}
/* ------------------- Body -------------------- */
div#body{
	width:100%;
	background:transparent url('http://excalo.com/img/sprites_bg.png') scroll 0px -267px repeat-x;
	text-align:center;
}
	div#body div.content{
		text-align:left;
	}
/* ------------------- Footer ------------------ */
div#footer{
	width:100%;
	background:transparent url('http://excalo.com/img/sprites_bg.png') scroll 0px -167px repeat-x;
	color:white;
	padding:10px 0 10px 0;
	text-align:center;
	font-size:14px;
}
div#footer_left{
	width:570px;
	float:left;
	text-align:left;
}
div#footer_right{
	width:200px;
	float:right;
	text-align:right;
}

/* -- Footer Menu -- */
	ul.footermenu{
		margin:0 0 2px 0;
		padding:0;
		list-style-type:none;
		font-weight:bold;
	}
	li.footermenuitem{
		display:inline;
	}
	li.footermenuitem a{
		color:white;
		text-decoration:none;
	}
/* -- Copyright and Validation-- */
	span#copyright, span#validation{
		color:#c6c6c6;
		font-size:13px;
	}
	span#copyright a, span#validation a{
		color:#c6c6c6;
		text-decoration:underline;
	}
	span#validation a{
		text-decoration:none;
	}
div.content{
	width:960px;
	margin:0 auto 0 auto;
	padding:10px;
}

/*===============================================*/
/*========>>> Page-Specific Elements <<<=========*/
/*===============================================*/

/* ------------------- Home ------------------ */

div#subheader{
	width:100%;
	background-color:#dff0ff;
	text-align:center;
	margin-bottom:10px;
}
	div#subheader div.content{
		text-align:center;
	}

body#home div#body{
	background-image:none;
}
img#psd2html{
	font-size:46px; /* Affects size of alt text */
	margin-bottom:-10px;
}
span#absolutelyfree{
	font-size:50px;
	font-weight:bold;
	letter-spacing:-2px;
}
div#buttoncontainer{
	width:230px;
	margin:10px auto 0 auto;
}
body#home div.threecol{
	text-align:center;
}
body#home div.threecol h2{
	margin:0 0 0px 5px;
	padding:16px 0 16px 68px;
	display:inline;
	font-weight:normal;
	letter-spacing:-1px;
	border:0;
}
	div#terms h2{
		background:transparent url('http://excalo.com/img/sprites.png') scroll 0px -270px no-repeat;
	}
	div#portfolio h2{
		background:transparent url('http://excalo.com/img/sprites.png') scroll 0px -334px no-repeat;
	}
	div#contact h2{
		background:transparent url('http://excalo.com/img/sprites.png') scroll 0px -398px no-repeat;
	}
body#home div.threecol p{
	margin:20px 0 0 0;
	padding:0 15px 0 15px;
	text-align:left;
	font-size:17px;
}
div#terms a.button_green, div#portfolio a.button_green, div#contact a.button_green{
	width:75px;
	text-align:center;
	margin:10px 0 0 112px;
}
div#portfolio a.button_green{
	margin-top:73px;
}
div#contact a.button_green{
	margin-top:32px;
}
body#home div#terms{
	margin-bottom:10px;
}

/* ------------------- Order ------------------ */

body#order h3{
	float:left;
	position:relative;
	margin-top:-13px;
	background-color:white;
}
body#order h4{
	float:left;
}
img.opener{
	background-color:white;
	margin:10px 0 0 200px;
	width:18px;
	padding:0 6px 0 6px;
	position:relative;
	float:left;
	display:none;
}
div.config_group{
	border:1px solid #DFDFDF;
	padding:0px 20px 20px;
	margin:10px 0 30px 0;
	color:#3F3F3F;
}
	div.config_group p.description{
		font-weight:bold;
	}
	div.config_group label{
		font-weight:normal;
		color:#3F3F3F;
		letter-spacing:0;
	}
	div.config_group p{
		clear:both;
		margin:20px 0 10px 0;
	}
ul.radiolist{
	margin:0;
	list-style-type:none;
	padding:0;
}
p.form_notes{
	margin:15px 0 15px 0;
	border:1px solid #7FC2FF;
	background-color:#EDF5FD;
	padding:15px;
}
body#order input#name,body#order input#email, body#order textarea#notes{
	width:100%;
}
div#submit{
	width:132px;
	margin:0 auto 0 auto;
}
div#recaptcha_area{
	margin:0 auto 15px auto;
}

/* ------------------- About ------------------ */
body#about p{
	font-size:17px;
}

/* ------------------- Terms ------------------ */
body#terms h4{
	font-size:18px;
}

/* ------------------- Privacy Policy ------------------ */
body#privacy p{
	margin:5px 0 10px 0;
	font-size:17px;
}
body#privacy div#body ul{
	margin:0 0 10px 0;
}

/* ------------------- Portfolio ------------------ */
p.portfolio_description{
	font-size:15px;
	padding:0 15px 0 15px;
	margin:0 0 0 0;
}
a.portfolio_link{
	font-size:13px;
	margin:0 0 0 13px;
	outline:0;
}

/* ------------------- Contact ------------------ */
body#contact input.text{
	width:100%;
}
body#contact textarea{
	width:100%;
	height:259px;
}