/* Layout Structure ***/

#wrap {
	width: 825px;
	margin: 75px auto 0px auto;
}

#header {
	height: 204px;
}

#testimonial {
	float: left;
	width: 251px;
	padding: 0px 0px 0px 16px;
}

#content {
	float: right;
	width: 485px;
	padding: 32px 44px 16px 27px;
}

/* Graphical Elements ***/

body {
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-position: top center;
}

#header h1, #header p {
	text-indent: -99999px;
	font-size: 0px;
	float: left;
}

#navigation {
	float: right;
	margin: 146px 26px 0px 0px;
	height: 58px;
	width: 519px;
}

#main {
	background-image: url('../images/content-background.png');
	background-repeat: repeat-y;
	background-position: top center;
}

#main-bottom {
	height: 89px;
	background-repeat: no-repeat;
	background-position: top center;
	display: block;
}

/* Typography & Colors ***/

body {
	background-color: #7c715c;
	color: #666;
	font-family: 'Lucida Sans', Verdana, Sans-Serif;
	font-size: .8em; /* Make Default Font 14px */
}

a, a:visited {
	color: #f27b21;
}

#content p {
	line-height: 1.8em;
}

#content p a, #content p a:visited {
	white-space: nowrap;
	font-size: 1.4em;
	font-family: Georgia, Serif;
	padding: 3px 5px;
}

#content p a:hover {
	text-decoration: none;
}

/* Color Changes ***/

#orange #content p a, body#orange #content p a:visited {
	color: #f27b21;
}

#orange #content p a:hover {
	background-color: #f27b21;
	color: #fff !important;
}

#orange #header {
	background-image: url('../images/orange-top.jpg');
}

#orange #main-bottom {
	background-image: url('../images/orange-bottom.png');
}



#green #content p a, body#green #content p a:visited {
	color: #89a822;
}

#green #content a:hover {
	background-color: #89a822;
	color: #fff !important;
}

#green #header {
	background-image: url('../images/green-top.jpg');
}

#green #main-bottom {
	background-image: url('../images/green-bottom.png');
}



#blue #content p a, body#blue #content p a:visited {
	color: #58bfed;
}

#blue #content p a:hover {
	background-color: #58bfed;
	color: #fff !important;
}

#blue #header {
	background-image: url('../images/blue-top.jpg');
}

#blue #main-bottom {
	background-image: url('../images/blue-bottom.png');
}



/* Testimonial Setup ***/

#testimonial p {
	text-indent: -99999px;
}

#testimonial div {
	display: none;
	width: 251px;
	height: 339px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	margin-bottom: 12px;
}

#testimonial div.active {
	display: block;
}

/* Testimonial Images ***/

#orange #testimonial div.t1 {
	background-image: url('../images/testimonials/orange-1.jpg');
}

#orange #testimonial div.t2 {
	background-image: url('../images/testimonials/orange-2.jpg');
}

#orange #testimonial div.t3 {
	background-image: url('../images/testimonials/orange-3.jpg');
}

#green #testimonial div.t1 {
	background-image: url('../images/testimonials/green-1.jpg');
}

#green #testimonial div.t2 {
	background-image: url('../images/testimonials/green-2.jpg');
}

#blue #testimonial div.t1 {
	background-image: url('../images/testimonials/blue-1.jpg');
}

#blue #testimonial div.t2 {
	background-image: url('../images/testimonials/blue-2.jpg');
}


/* Navigation ***/

#navigation a, #navigation a:visited {
	display: block;
	float: left;
	height: 58px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#orange #navigation a {
	background-image: url('../images/orange-nav.jpg');
}

#green #navigation a {
	background-image: url('../images/green-nav.jpg');
}

#blue #navigation a {
	background-image: url('../images/blue-nav.jpg');
}

#navigation a#live {
	width: 147px;
	background-position: 0px 0px;
}

#navigation a#work {
	width: 160px;
	background-position: -147px 0px;
}

#navigation a#expand {
	width: 211px;
	background-position: -307px 0px;
}

/* Navigation Hovers ***/

#orange #navigation a#work:hover {
	background-position: -518px;
}

#orange #navigation a#expand:hover {
	background-position: -678px;
}

#green #navigation a#live:hover {
	background-position: -518px;
}

#green #navigation a#expand:hover {
	background-position: -665px;
}

#blue #navigation a#live:hover {
	background-position: -518px;
}

#blue #navigation a#work:hover {
	background-position: -665px;
}

/* Stylized Button/Links ***/

#buttons a, #buttons a:visited {
	display: block;
	float: left;
	height: 31px;
	background-repeat: no-repeat;
	text-indent: -99999px;
	margin: 0px;
}



#orange #buttons {
	padding-top: 8px;
}

#orange #buttons a {
	background-image: url('../images/orange-buttons.gif');
}

#orange #buttons a.b1 {
	width: 92px;
	background-position: 0px 0px;
}

#orange #buttons a.b1:hover {
	background-position: -485px 0px;
}

#orange #buttons a.b2 {
	width: 83px;
	background-position: -92px 0px;
}

#orange #buttons a.b2:hover {
	background-position: -577px 0px;
}

#orange #buttons a.b3 {
	width: 128px;
	background-position: -175px 0px;
}

#orange #buttons a.b3:hover {
	background-position: -660px 0px;
}

#orange #buttons a.b4 {
	width: 96px;
	background-position: -303px 0px;
}

#orange #buttons a.b4:hover {
	background-position: -788px 0px;
}

#orange #buttons a.b5 {
	width: 86px;
	background-position: -399px 0px;
}

#orange #buttons a.b5:hover {
	background-position: -884px 0px;
}


#green #buttons a {
	background-image: url('../images/green-buttons.gif');
}

#green #buttons a.b1 {
	width: 85px;
	background-position: 0px 0px;
}

#green #buttons a.b1:hover {
	background-position: -485px 0px;
}

#green #buttons a.b2 {
	width: 122px;
	background-position: -85px 0px;
}

#green #buttons a.b2:hover {
	background-position: -570px 0px;
}

#green #buttons a.b3 {
	width: 85px;
	background-position: -207px 0px;
}

#green #buttons a.b3:hover {
	background-position: -692px 0px;
}

#green #buttons a.b4 {
	width: 101px;
	background-position: -292px 0px;
}

#green #buttons a.b4:hover {
	background-position: -777px 0px;
}

#green #buttons a.b5 {
	width: 92px;
	background-position: -393px 0px;
}

#green #buttons a.b5:hover {
	background-position: -878px 0px;
}



#blue #buttons a {
	background-image: url('../images/blue-buttons.gif');
}

#blue #buttons a.b1 {
	width: 92px;
	background-position: 0px 0px;
}

#blue #buttons a.b1:hover {
	background-position: -485px 0px;
}

#blue #buttons a.b2 {
	width: 115px;
	background-position: -92px 0px;
}

#blue #buttons a.b2:hover {
	background-position: -577px 0px;
}

#blue #buttons a.b3 {
	width: 104px;
	background-position: -207px 0px;
}

#blue #buttons a.b3:hover {
	background-position: -692px 0px;
}

#blue #buttons a.b4 {
	width: 108px;
	background-position: -311px 0px;
}

#blue #buttons a.b4:hover {
	background-position: -796px 0px;
}

#blue #buttons a.b5 {
	width: 66px;
	background-position: -419px 0px;
}

#blue #buttons a.b5:hover {
	background-position: -904px 0px;
}