/* -------------------------------------------------------------- 

   E&J Design
   James Carleton, Designer              | james@eandjdesign.com
   Eric Ritchey, Developer               | eric@eandjdesign.com
   Like what you see? Let's get started! | start@eandjdesign.com

-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/plugins/wufoo/form.css";

/* Site
-------------------------------------------------------------- */

	body {
		background: #e4d1ad url('img/bg.png') repeat-y top center;
		margin:0;
		padding:0;
	}
	#container {
		width:1000px;
		background:#fff;
		border:2px solid rgb(74,67,53);
		border:2px solid rgba(74,67,53,0.75);
		margin:160px auto 20px;

		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
	#header {
		position:relative;
		text-align:center;

		/* i'm too tired to figure out why i need to have the borders on...so here's some radius'ed borders to match */
		-moz-border-radius-topleft: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topright: 10px;
		-webkit-border-top-right-radius: 10px;
		border-top:1px solid #fff;
	}
	#header h1 {
		background: url('img/logo.png') no-repeat center center;
		position:absolute;
		top:-150px;
		left:250px;
		width:490px;
		height:273px;
		text-indent:-9999px;
		overflow:hidden;
		z-index:1000;
	}
	#header h2 {
		margin-top:150px;
	}
	#header h2 span {
		display:block;
	}
	#header h2,p,#footer a	{
		color:#6d4d0c;
	}
	#contact-section {
		overflow:hidden;
	}
	#contact-section,	#contact-section #phone,
	#contact-section #keyboard { float:left; }

	#contact-section #phone {
		width:460px;
		text-align:center;
	}
	#contact-section #keyboard	{
		width:540px;
		text-align:center;
	}
	#contact-section h3 span {
		display:block;
		line-height:1.6;
	}
	#contact-section #phone h3,
	#contact-section #keyboard h3	{
		margin-top:250px;
	}	

	#ajax-form {
		display:none;
		font-size:1.5em;
	}
	
	textarea,input {
		-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	}
	input {
		border:0;
	}
	
	button,.btn a {
		text-align:center;
		cursor:pointer;
		background: #6d4d0c url('img/btn-overlay.png') repeat-x;
		display: inline;
		padding: 8px 14px 9px;
		color: #fff;
		text-decoration: none;
		font-size: .8em;
		font-weight: bold;
		line-height: 1;
		border-bottom: 1px solid #222;
		position: relative;

		border-bottom: 1px solid rgba(0,0,0,0.25);
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	}
	button {
		border:0;
		font-family: "Georgia","Times New Roman",serif;
		float:left;
	}
	#form h3.btn {
		display:inline;
		float:left;
		margin:12px 0 0 10px;
		padding:0 0 0 0;
		font-size:.6em;
	}
	button:active,.btn a:active	{ top: 1px; }
	button:hover,.btn a:hover		{ background-color: #3f2d07; }
	#form .btn a.cancel		{ background-color: #444444; }
	#form .btn a:hover		{ background-color: #333333; }
	
	#contact-section				{ background: url('img/or.png')			no-repeat 530px center;	height:340px; margin-bottom:60px; }
	#contact-section #phone 	{ background: url('img/phone.png')		no-repeat center 30px;	height:100%; }
	#contact-section #keyboard	{ background: url('img/keyboard.png')	no-repeat center 60px;	height:100%; }
	#content	{
		clear:both;
		margin:0 40px;
	}
	.oops,.oops p {
		color:#c00;
	}
	#footer {
		background: url('img/footer.png') no-repeat top center;
		height:70px;
		text-align:center;
		padding-top:30px;
		overflow:hidden; 
	}
	.credit {
		font-size:.8em;
		text-align:center;
		margin:0 0 20px 0;
		padding:0;
	}