@import url("reset.css");

/* --------------------------------------------------------------------------------------------
 *	Bones.
 */
 
body {
	min-width: 960px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
	font-size: 13px;
	line-height: 18px;
	background: #c7b07b url(../images/bg.jpg);
	color: #0f0b0c;
}

/* Main blocks. */
.main-block {
	padding: 0 0 18px 240px;
	}
	.main-block .greets {
		position: relative;
		height: 162px;
		font: italic 48px "Times New Roman", Times, serif;
		line-height: 220px;
		overflow: hidden;
		}
		.main-block .greets span {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	.main-block h2 {
		position: relative;
		font: bold 36px/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		margin-bottom: 18px;
		overflow: hidden;
		}
		.main-block h2.img-replace span {
			display: block;
			width: 0;
			height: 0;
			overflow: hidden;
			}
			.main-block h2.img-replace img {
				position: absolute;
				width: 100%;
				height: 100%;
				border: none;
			}
	.main-block h3 {
		position: relative;
		font: bold 18px/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		overflow: hidden;
		margin-top: 18px;
		margin-bottom: 18px;
		}
		.main-block h3.img-replace span {
			display: block;
			width: 0;
			height: 0;
			overflow: hidden;
			}
			.main-block h3.img-replace img {
				position: absolute;
				width: 100%;
				height: 100%;
				border: none;
			}
	.main-block p {
		width: 600px;
		position: relative;
		padding-bottom: 18px;
		}
		.main-block p.shadowed {
			text-shadow: #e8d9ac 0 1px 2px;
		}
	.main-block p.highlight {
		position: relative;
		height: 96px;
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 12px;
		}
		.main-block p.highlight span {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent url(../images/we-are-a-digital-agency.gif) no-repeat;
		}
	.main-block ul {
		margin-bottom: 18px;
		}
		.main-block ul li {
			padding-left: 14px;
			background: transparent url(../images/tick.gif) 0 center no-repeat;
		}
	.main-block a:link, .main-block a:visited {
		color: #8f1a11;
		text-decoration: none;
		background: transparent url(../images/link-bg.gif) repeat-x left bottom;
	}
	.main-block a:hover, .main-block a:active {
		color: #0f0b0c;
		background-color: #dfca99;
	}

/* Buttons */
	.main-block a.button {
		position: relative;
		display: inline-block;
		height: 28px;
		line-height: 28px;
		text-decoration: none;
		text-transform: capitalize;
		text-shadow: #000 0 1px 2px;
		color: #fff6d9;
		margin: 8px 10px 18px 0;
		}
		.main-block a.button span {
			display: block;
			margin-right: 13px;
			padding: 0 1px 0 14px;
			background: transparent url(../images/buttons.gif);
			}
			.main-block a.button:link, .main-block a.button:visited {
				background: transparent url(../images/buttons.gif) right -228px;
				color: #fff6d9;
			}
			.main-block a.button:link span, .main-block a.button:visited span {
				background-position: 0 -200px;
			}
			.main-block a.button:hover, .main-block a.button:active {
				background-position: right -328px;
			}
			.main-block a.button:hover span, .main-block a.button:active span {
				background-position: 0 -300px;
				}
				.main-block a.button-feat:link, .main-block a.button-feat:visited {
				background-position: right -28px;
				}
				.main-block a.button-feat:link span, .main-block a.button-feat:visited span {
					background-position: 0 0;
				}
				.main-block a.button-feat:hover, .main-block a.button-feat:active {
					background-position: right -128px;
				}
				.main-block a.button-feat:hover span, .main-block a.button-feat:active span {
					background-position: 0 -100px;
				}
	
.top-block {
	background: transparent url(../images/tape-texture.jpg) repeat-x;
}
.has-header {
	background: transparent url(../images/hline.jpg) 0 35px repeat-x;
}

/* --------------------------------------------------------------------------------------------
 *	Sidebar.
 */
#sidebar {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	min-height: 300px;
	}
	#sidebar #logo {
		position: absolute;
		top: 36px;
		right: 18px;
	}
	
/* --------------------------------------------------------------------------------------------
 *	Featured.
 */
#welcome {
	height: 960px;
	}
	#welcome .greets span {
		background: transparent url(../images/coming-shortly.jpg) no-repeat left bottom;
	}
	
/* Accordion */
#accordion {
	position: relative;
	width: 710px;
	height: 342px;
	margin-top: 18px;
	overflow: hidden;
	}
	#accordion #slides-wrapper {
		position: relative;
		width: 740px;
		height: 342px;
		}
		#accordion .slide {
			position: relative;
			float: left;
			height: 306px;
			margin-right: 10px;
			background: #806f4f;
			}
			#accordion .slide .corner {
				position: absolute;
				width: 6px; height: 6px;
				z-index: 1;
			}
			#accordion .slide .tl {
				top: 0; left: 0;
				background: url(../images/slide-corners.gif) no-repeat;
			}
			#accordion .slide .tr {
				top: 0; right: 0;
				background: url(../images/slide-corners.gif) -6px 0 no-repeat;
			}
			#accordion .slide .bl {
				bottom: 0; left: 0;
				background: url(../images/slide-corners.gif) 0 -6px no-repeat;
			}
			#accordion .slide .br {
				bottom: 0; right: 0;
				background: url(../images/slide-corners.gif) -6px -6px no-repeat;
			}
			#accordion .slide span {
				position: relative;
				display: block;
				height: 292px;
				margin: 6px;
				padding: 1px;
				background: #c7b07b;
				}
				#accordion .slide a {
					position: relative;
					display: block;
					width: 214px;
					height: 290px;
					overflow: hidden;
					background: none;
					background-color: #fff6d9;
					border: 1px #806f4f solid;
					}
					#accordion .slide a img {
						position: relative;
						display: block;
						width: 400px;
						height: 290px;
						left: 50%;
						margin-left: -200px;
					}
		/* Hovered state */
		#accordion .hovered {
			background-color: #66583f;
			}
			#accordion .hovered .tl {
				background-position: 0 -12px;
			}
			#accordion .hovered .tr {
				background-position: -6px -12px;
			}
			#accordion .hovered .bl {
				background-position: 0 -18px;
			}
			#accordion .hovered .br {
				background-position: -6px -18px;
			}
			#accordion .hovered span {
				background: #fff;
			}
			#accordion .hovered a {
				border: 1px #66583f solid;
			}
		/* Details */
		#accordion .slide .details {
			position: absolute;
			left: 50%;
			bottom: -22px;
			margin-left: -110px;
			width: 220px;
			height: 56px;
			background: transparent url(../images/slide-detail-bg.png) no-repeat right bottom;
			display: none;
			}
			#accordion .slide .details span {
				display: block;
				width: 188px; height: 56px;
				margin: 0 16px 0 0;
				padding: 0 0 0 16px;
				text-align: center;
				font: italic 13px/56px Palatino, "Palatino Linotype", "Times New Roman", Times, serif;
				color: #0f0b0c;
				text-shadow: #e8d9ac 0 1px 1px;
				background: transparent url(../images/slide-detail-bg.png) no-repeat; !important
			}

/* --------------------------------------------------------------------------------------------
 *	Clear Fix.
 */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}