/*--------CSS by JM Deldin, http://jmdeldin.com*/
@media screen, projection {

/*--------Basic HTML*/
a { text-decoration: underline }
a, h2, #services h3, strong { color: #ebb42d }
h2, h3 { margin: 0 0 0.4em;  font-weight: bold }
h2 { font-size: 1.8em }
h3 { font-size: 1em }
dl, ol, p, ul { margin: 0 0 1em }
	ul { list-style-type: square }
	li { margin-left: 2em }

/*--------Shell*/
* {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 100%;
}
html {
	background: #000;
	color: #fff;
	font-size: 62.5%;
	text-align: left;
}
body {
	width: 885px;
	margin: 8px auto;
	border: 1px solid #666;
	border-top: 0;
	position: relative;
	font-size: 1.3em;
	line-height: 1.4em;
}
	body, form * { font-family: arial, sans-serif }

/*--------Menus*/
#access {
	width: 13px;
	height: 233px;
	position: absolute;
	top: 124px;
	left: -15px;
	background: url(img/logo_side.png) no-repeat 0 0;
	text-indent: -9999px;
}
h1 a, #menu a {
	height: 116px;
	float: left;
	overflow: hidden;/*gecko*/
	text-decoration: none;/*older gecko*/
	text-indent: -9999px;
}
	h1 a {
		width: 335px;
		background: url(img/logo.png);
	}
	#menu {
		width: 550px;
		float: left;
		list-style: none;
	}
		#menu, #menu li { margin: 0 }
			#menu a { width: 106px }
				#menu a:hover, #default #a_home, #services #a_services, #contact #a_contact { background-position: -106px 0 }
				#a_home { background-image: url(img/menu_home.png) }
				#a_services { background-image: url(img/menu_services.png) }
				#a_portfolio { background-image: url(img/menu_portfolio.png) }
				#a_about { background-image: url(img/menu_about.png) }
				#a_contact { background-image: url(img/menu_contact.png) }
				#menu #a_portfolio, #menu #a_about { width: 116px }
				#menu #a_portfolio:hover, #menu #a_about:hover, #portfolio #a_portfolio, #about #a_about { background-position: -116px 0 }

/*--------Portfolio sub-menus*/
#content #sub_menu {
	margin: 10px 0 30px;
	text-align: center;
}
	#sub_menu li { padding: 0 0.6em 0 }
		#sub_menu li, #pages li {
			margin: 0;
			display: inline;
		}
		#sub_menu a {
			padding: 0 0 6px;
			text-transform: uppercase;
		}
		#sub_menu a, #pages a { text-decoration: none }
		#sub_menu a:hover, #sub_menu .active { background: url(img/sub_menu.png) no-repeat center bottom }
			#sub_menu a.active { font-weight: bold }
	#pages { text-align: right }
		#pages a, #pages strong.active { padding: 4px}
		#pages strong.active { color: #fff; font-size: 130% }
		#pages a:hover { background-color: #000; color: #ebb42d }

/*--------Flash*/
#flash {
	height: 244px;
	border-bottom: 10px solid #ECB32D;
	clear: both;
	display: block;
	overflow: hidden; /*IE6, but a good safety net*/
	/*#*/text-align: center;
}
	/*#*/#default #flash { border: 0 }
	#services #flash {
		margin: -1px;
		border: 1px solid #fff;
	}

/*--------Content Column*/
#content {
	width: 585px;
	float: left;
}
	#content h2, #content h3 { border-bottom: 1px solid #666 }

	#post { padding: 15px 44px 0px 30px }
		#post h2 span {
			float: right;
			font-size: 60%;
		}
/*--------Sections*/
	#default #content h2 { font-size: 1.2em }
	#default #content img { margin: 0 5px 0 0; float: left }

	/*--------Services*/
	#services .index { background: url(img/pear.png) no-repeat right bottom }
		#crumbs {
			margin: 5px 44px 0 0;
			text-align: right;
		}
		#services #post { padding-top: 25px }
			#services h3 { font-size: 1.1em }
			#service_list { margin: 30px 60px 0 0 }
				#service_list li {
					margin: 0 0 20px -1px;
					padding-left: 30px;
					background: #ecb32d url(img/service_arrow.png) no-repeat left center;
					color: #000;
				}
					#service_list #s_ui { margin-right: 5% }
					#service_list #s_logo { margin-right: 10% }
					#service_list #s_print { margin-right: 15% }
					#service_list #s_photo { margin-right: 20% }
					#services #service_list h3 {
						margin: 0;
						padding: 0.4em 0 0;
						border: 0;
						background: url(img/service_corner_top.png) no-repeat right top;

					}
					#service_list li h3, #service_list p { padding-right: 20px; }
					#service_list li p {
						padding-bottom: 0.6em;
						background: url(img/service_corner_bottom.png) no-repeat right bottom;
						line-height: 1.2em;

					}
					#service_list a { color: #962108 }
		.selling_points { margin-left: 30px }
			#content .selling_points h3 {
				margin: 0 0 0 -20px;
				border: 0;
				padding: 0 0 0 20px;
				background: url(img/header_arrow.png) no-repeat left center;
				letter-spacing: 0.03em;
			}
	/*---------Portfolio, about, contact*/
	#portfolio #content, #about #content, #contact #content { width: 100% }
		#portfolio #content { background: #666 url(img/grey_gradient.jpg) repeat-x left bottom }
			#portfolio #post { padding: 0 50px 50px 380px }
				#shot {
					margin-left: -380px;
					background: url(img/header_portfolio.png) no-repeat left center;
					text-align: right;
				}
				#portfolio h3 { border: 0 }
		#about #content { background: url(img/header_about.png) no-repeat 556px center }
			#about #post, #contact #post {
				width: 500px;
				border-right: 1px solid #666;
				padding: 50px 40px 25px 15px;
				background: #666 url(img/grey_gradient.jpg) repeat-x left bottom;
			}
			#about h2, #contact h2 {
				border-bottom: 1px solid #fff;
				color: #fff;
			}
			#about #post img { margin: 20px 0 0 }
		#contact #content { background: url(img/header_contact.png) no-repeat 556px center }
	#recent {
		border-width: 1px 0 1px 4px;
		border-style: solid;
		border-color: #ebb43d;
		padding: 20px 44px 20px 30px;
	}
		#recent h2 {
			margin-bottom: 1em;
			border-color: #ebb42d;
		}
		#recent h3 {
			border: 0;
			text-transform: uppercase;
		}
			#recent h3 a {
				border-bottom: 1px solid;
				display: block;
				color: #ccc;
				text-decoration: none;
			}
				#recent h3 a:hover { color: #ebb42d }
				#recent h3 a span { float: right }

/*--------Side Column*/
#secondary {
	width: 299px;
	border-left: 1px solid #ebb42d;
	background: #666 url(img/grey_gradient.jpg) repeat-x left bottom;
	float: right;
	color: #ccc;
}
	#secondary div { padding: 15px 12px 15px }
		#secondary #featured {
			padding: 0 12px 15px;
			background: url(img/stripe.png) left center;
		}
		#promotion, #get_started {
			border-top: 22px solid #ebb42d;
			clear: both;
		}
			#get_started { padding-bottom: 200px }
		#secondary h2 { margin: 0 0 5px }
			#featured h2, #what h2, #get_started h2 {
				height: 25px;
				text-indent: -9999px;
			}
				#featured h2 {
					margin: 0 -12px 12px;
					background: url(img/header_featured.png) left center;
				}
				#get_started h2 { background: url(img/header_get_started.png) no-repeat left center }
		#secondary img { float: right }
			#secondary #featured img { 
				margin-left: 3px;
				border: 1px solid #ebb42d;
			}
	/*--------Services*/
	#services #secondary { color: #fff }
		#services #secondary div { padding: 0 15px 10px 30px }
			#what { background: url(img/grey_gradient.jpg) repeat-x left bottom }
				#services #secondary #what h2 { background: url(img/header_what_we_do.png) no-repeat left center }
			#get_started { background: url(img/stripe.png) }
			#services #secondary h2 { margin: 10px 0 0 -14px }

/*--------Footer*/
#footer {
	border-top: 1px solid #666;
	padding: 5px 30px;
	background: #1F1F1F url(img/client_login.gif) no-repeat 6px center;
	clear: both;
	position:relative;
	font-size: 0.85em;
	text-align: right;
}

/*--------Forms*/
form *:focus { border-color: #ebb42d }
	#contact #contact_form {	margin: 0 1.2em 2% 0 }
	#footer form {
		position: absolute;
		left: 90px;
		top: 5px;
	}
		fieldset legend, #footer label {
			position: absolute;
			left: -9999px;
			font-size: 0; /*gecko*/
		}
		label { display: block }
			#contact_form input { margin-bottom: 10px }
		input, textarea {
			border: 1px solid #ccc;
			padding: 1px 5px;
			background: #fff url(img/form_input.png) repeat-x 0 0;
			color: #7C90AB;
		}
			#services #contact_form { width: 240px }
			#contact_form input, #contact_form textarea { width: 228px;  }
			#contact #contact_form input { width: 45% }
			#contact #contact_form textarea { width: 100% }
		button {
			border: 1px solid #111;
			padding: 0 5px;
			background: #303031 url(img/form_button.png) repeat-x left top;
			color: #ebb42d;
			font-size: 0.9em;
			font-weight: bold;
		}
			#contact_form button { 
				margin-top: 5px;
				float: right;
			}
		.zemError {
			border-top: 10px solid #962108;
			padding: 10px 0;
			background: #ebb42d;
			color: #000 ;
		}
		.zemError strong { color: #962108 }
}