/* A note to any passerbys... I'm well aware that the 
markup and stylesheets on this site are in need of a 
good bit of tiddying up, however I have plans for a new
design in the works and 'prettying up old markup is low
my list right now.

So please excuse the mess! It's not my MO, I promise.

Cheers!
Ryan*/

/*GLOBAL*/
html {
	font-size: 100.1%;
	height: 100%;
	background:#6b635d;
}
body {
	font: 64% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background: url(../images/bg-header-pattern.jpg) repeat-x;
	min-width: 924px;
	height: 100%;
	position: relative;
	color:#fff;
}
form {
	display: inline;
	padding: 0;
	margin: 0;
}
li {list-style: none;}
a {color: #d3dd9d; text-decoration: underline;}
a:hover {text-decoration: none;}
a:focus {outline: none;}
img {
	border: none;
	display: block;
}
h1, h2, h3, h4, h5, h6, ul, p {
	padding: 0;
	margin: 0;
}
.wrapper:after {
	content: "";
	display: block;
	clear: both;
	width: 100%;
	overflow: hidden;
	height: 0;
	font-size: 0;
}
.hidden-text, .black-box h2, .gray-box h3 {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}
.main-holder {
	min-height: 100%;
	position: relative;
	width: 100%;
}
/*CONTAINER*/
.main {
	margin: 0 auto;
	width: 904px;
	position: relative;
	padding: 0 5px;

}
/*HEADER*/
#header {
	background: url(../images/bg-header-full.jpg) no-repeat 50% 0;
	position: relative;
}
#header .main {height: 343px;}/*logo*/
.logo {
	margin: 0;
	position: absolute;
	top: 71px;
	left: 14px;
	background: url(../images/logo-with-accents.png) no-repeat;
	width: 403px;
	height: 137px;
}
.logo a {
	height: 100%;
	width: 100%;
}
/*NAV*/
.main-nav {
	position: absolute;
	left: 275px;
	top: 272px;
}
.main-nav li {
	float: left;
	margin-right: 34px;
}
.main-nav a {
	display: block;
	overflow: hidden;
	height: 31px;
	text-indent: -9999px;
}
.main-nav a.txt-main-nav-home {
	background: url(../images/txt-nav-link-home.gif) no-repeat;
	width: 55px;
}
.main-nav a.txt-main-nav-about-me {
	background: url(../images/txt-nav-link-about-me.gif) no-repeat;
	width: 98px;
}
.main-nav a.txt-main-nav-my-work {
	background: url(../images/txt-nav-link-my-work.gif) no-repeat;
	width: 92px;
}
.main-nav a.txt-main-nav-contact {
	background: url(../images/txt-nav-link-contact.gif) no-repeat;
	width: 89px;
}
.main-nav a:hover, .main-nav li.active a {background-position: 0 100%;}
.txt-making-the {
	width: 545px;
	height: 24px;
	background: url(../images/txt-making-the-internet.gif) no-repeat;
	position: absolute;
	left: 5px;
	bottom: 6px;
}

/*BLACK ROW*/
.black-box {
	background: #202020 url(../images/bg-black-box.gif) repeat-x;
	padding-top: 15px;
}
.black-box .main {background: url(../images/img-green-separator.gif) no-repeat 445px 50%;}

.black-sub-box {
	float: left;
	width: 430px;
}
.black-sub-box-right {float: right;}
.black-sub-box p {
	color: #fff;
	font-size: 135%;
	line-height: 17px;
	text-align: left;
}
.black-sub-box a, .black-sub-box p strong {
	color: #b8c36f;
	text-decoration: none;
	font-weight: normal;
}

.black-sub-box a:hover {text-decoration: underline;}
.black-box h2 {
	width: 100%;
	height: 55px;
}
.black-box h2.txt-hello-there {background: url(../images/txt-hello-there.gif) no-repeat;}
.black-box h2.txt-featured-work {
	background: url(../images/txt-featured-work.gif) no-repeat;
	width: 245px;
}
/*FEATUREe*/
.slide-image {
	float: right;
	margin: -32px -10px 0 10px;
	position: relative;
}
/*GRAY ROW*/
.gray-box {
	background: #6b635d url(../images/bg-gray-box.gif) repeat-x;
	border-top: 2px solid #959887;
	padding: 34px 0 110px;
}
/*THREE COL*/
.three-boxes-holder {overflow: hidden;}
.three-boxes {
	background: url(../images/bg-boxes.gif) repeat-y;
	overflow: hidden;
	width: 100%;
}
.three-boxes-top {
	background: url(../images/bg-boxes-top.gif) no-repeat;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.three-boxes-bottom {
	background: url(../images/bg-boxes-bottom.gif) no-repeat 0 100%;
	width: 107%;
	overflow: hidden;
}

.gray-sub-box {
	float: left;
	width: 220px;
	margin-right: 56px;
	padding: 15px 22px;
}
.gray-sub-box h3 {
	height: 50px;
	width: 100%;
	margin-bottom: 15px;
}
.gray-sub-box h3.txt-what-i-do {background: url(../images/txt-what-i-do.gif) no-repeat;}
.gray-sub-box h3.txt-how-much {background: url(../images/txt-how-much.gif) no-repeat;}
.gray-sub-box h3.txt-why-you {background: url(../images/txt-why-you-need-it.gif) no-repeat;}
.gray-sub-box p {
	font-size: 120%;
	margin-bottom: 15px;
	text-align: left;
}
.title-text:first-letter {font-size: 150%;}
/*LIST ITEMS*/
.bullet-list {
	font-size: 140%;
	color: #d3dd9d;
}
.bullet-list li {
	background: url(../images/img-arrow-bullet.gif) no-repeat 0 6px;
	padding-left: 27px;
	margin-bottom: 15px;
}
.bullet-list a {color: #d3dd9d;}
/*FOOTER*/
#footer {
	background: url(../images/bg-footer.gif) repeat-x 0 -15px;
	height: 55px;
	padding-top: 27px;
	text-align: right;
	margin-top: -83px;
	position: relative;
}
#footer #case {
	width:904px;
	margin:0 auto;
}
#footer #case .host {
	float:left;
	width:87px;
	height:34px;
}
#footer #case .valid {
	float:right;
}
#footer ul {margin-bottom: 8px;}
#footer li {
	padding-left: 12px;
	background: url(../images/img-footer-separator.gif) no-repeat 3px 50%;
	display: inline;
}
#footer li:first-child {
	background: none;
	padding-left: 0;
}
#footer li a {
	color: #a49b9e;
	font-size: 120%;
}
#footer p {
	color: #a49b9e;
	font-size: 120%;
}
#footer p a {color: #b8c46f;}