/*
©2009 

Description : Stylesheet

*/

/*---------------------------------------------- GLOBAL SETTINGS */
html {
	height: 100%;
}

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em; 
	background: url(/art/bg.jpg) no-repeat top center #e9e9e9;
	color: #4b4b4b;
}

/*-------------------------------------------------------- LINK */


a {
	color:#7784a0;
	text-decoration: underline;
}

a:hover {
	color:#4b4b7f;
}

/*---------------------------------------------------- HEADINGS */

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	margin:0pt;
	padding:0pt;
	font-family: Helvetica, Arial, sans-serif;
	letter-spacing: -1px;
}

h1 {
	font-size: 2.2em;
	padding: 0 0 10px 0;
	color: #5b6780;
}

h2 {
	font-size: 1.8em;
	padding: 0 0 8px 0;
}

h3 {
	font-size: 1.4em;
	padding: 0 0 6px 0;
}

h4 {
	font-size: 1.2em;
	padding: 0 0 5px 0;
}

h5 {
	font-size: 1em;
	padding: 0 0 4px 0;
}

h6 {
	font-size: .9em;
	padding: 0 0 2px 0;
}


/*-------------------------------------------------- PARAGRAPHS */

p {
	font-size: 100%;
	line-height: 1.7em;
	padding: 0 0 1.25em 0;
}


/* LISTS -------------------------------------------------------- LISTS */

ul, ol {
	padding:0 0 1.25em 2.5em;
}

#content li { 
	font-size: 100%;
}

/*-- nested lists --*/

#content ul ul {
	padding: 0 0 0 1.5em;
}

#content ol ol {
	padding: 0 0 0 1.5em;
}

/*------------------------------------------------------ LAYOUT */


#container {
	width:960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -123px auto; /* negative value must be the same height as footer (for stickyness) */ 
	background: #fff;
}

#container.home, .home #header {
	background: url(/art/bg.jpg) no-repeat top center #fff;
}

#header {
	position: relative;
	height: 263px;
	display: block;
	width: 960px;
	z-index: 2;
	background: url(/art/header-bg.jpg) no-repeat;
}

.home #header {
	height: 494px;
}

#feature {
	width: 960px;
	height: 370px;
	display: block;
	background: url(/art/featured.jpg) no-repeat;
	position: absolute;
	bottom: 70px;
	z-index: 1;
}

#feature-content {
	position: absolute;
	top: 150px;
	left: 20px;
}

#feature-content p {
	width: 320px;
	font-size: 1.1em;
}

#feature-content p#title {
	width: 348px;
	height: 22px;
	display: block;
	background: url(/art/featured-title.png) no-repeat;
	text-indent: -9999px;
}

#feature-content a {
	width: 134px;
	height: 37px;
	display: block;
	background: url(/art/view-project-btn.png) no-repeat;
	text-indent: -9999px;
	position: absolute;
	top: 130px;
}

#feature-content a:hover {
	background-position: 0 -37px;
}

#logo {
	width: 369px;
	height: 66px;
	display: block;
	position: absolute;
	top: 40px;
	left: 0;
	background: url(/art/logo.png) no-repeat;
	text-indent: -9999px;
	z-index: 2;
}

#contact-info {
		position: absolute;
	top: 160px;
	left: 0;
}

#contact-info span, #contact-info a {
	display: block;
	width: 335px;
	height: 16px;
	text-indent: -9999px;
	background: url(/art/phone-email.png);
}

.home #contact-info {
	top: 40px;
	left: auto;
	right: 0;
	color: #5b6780;
	font-size: 1.1em;
}

#contact-info a, #contact-info strong {
	text-decoration: none;
	color: #383850;
	font-weight: bold;
}
	

#content {
	width: 960px;
	background: #fff;
}

#side-panel {
	width: 336px;
	float: left;
	padding: 0 12px;
	margin: 30px 0 0;
	display: inline;
	background: url(/art/vertical-line.gif) repeat-y top right;
}

.call-to-action.first img {
	margin: -16px 0 0 0;
}

#side-panel-case {
	width: 230px;
	float: left;
	padding: 38px 0 0 0;
	margin: 18px 0 0 0;
	background: url(/art/select-another-case.gif) no-repeat;
}

#side-panel-case ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#side-panel-case li {
	width: 200px;
	padding: 7px 10px 7px 20px;
	background: #f2f2f2;
	margin: 1px 0 0 0;
}

#side-panel-case li.active {
	background: #fafafa;
}

#side-panel-case li.active a {
	text-decoration: none;
	color: #666;
}

a#back-case-btn {
	width: 212px;
	height: 36px;
	text-indent: -9999px;
	display: block;
	background: url(/art/back-case-btn.gif) no-repeat;
	float: right;
	margin: 10px 0 0 0;
	display: inline;
}

a#back-case-btn:hover {
	background-position: 0 -36px;
}
	
	

.home #main-content {
	width: 560px;
	float: right;
	padding: 0 20px;
	margin: 20px 0 0;
	display: inline;
}

.home h1 {
	font-size: 2em;
}

#main-content {
	width: 920px;
	padding: 20px;
}

#main-content-case {
	width: 690px;
	float: right;
	padding: 20px;
}

#main-content-case h1 {
	padding: 0;
}

#main-content.case-studies {
	padding: 20px 0;
}

#map {
	float: right;
	margin: 0 0 0 15px;
}

#contact-details {
	width: 310px;
	margin: 0 20px 0 0;
	float: left;
}

.details {
	background: url(/art/vertical-line.gif) repeat-y top right;
	padding: 0 10px 0 0;
}

.details span {
	font-weight: bold;
	color: #383850;
	margin: 0 10px 0 0;
}

#contact-form {
	width: 580px;
	float: left;
}

#contact-form h2 {
	font-size: 1.4em;
	padding: 10px 0;
}

.contactForm {
	background: #f6f6f6;
	padding: 20px;
	display: block;
	float: left;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 540px;
}

.contactForm label {
	width: 250px;
	float: left;
	padding: 4px 0;
}

.contactForm label.error {
	color:#F00;
	position: absolute;
	top: 4px;
	left: 255px;
}

.contactForm input, .contactForm textarea{
	width: 270px;
	float: left;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #cbcbcb;
	background: url(/art/input-bg.png) repeat-x #fff;
}

.contactForm div {
	padding: 0 0 3px 0;
	float: left;
	position: relative;
}

.contactForm button {
	width: 104px;
	height: 42px;
	display: block;
	background: url(/art/submit-btn.png);
	text-indent: -9999px;
	border: 0;
	cursor: pointer;
	float: right;
	margin: 10px 10px 0;
}

.contactForm button:hover {
	background-position: 0 -42px;
}

.contactForm button:active {
	background-position: 0 -84px;
}

#footer {
	background: url(/art/footer-bg.gif) no-repeat top center #171717;
	width: 100%;
	height: 73px;
	display: block;
	padding: 50px 0 0 0;
	color: #666;
	font-size: .95em;
}

#footer a, #footer strong {
	color: #bebebe;
	text-decoration: none;
	font-weight: normal;
}

#footer a:hover {
	color: #eee;
}

#footer-inner {
	width: 960px;
	margin: 0 auto;
}

#copyright {
	float: left;
	background: url(/art/footer-logo.gif) no-repeat 0 4px;
	padding: 0 0 0 60px;
}

#credits {
	float: right;
}

#modal {
	display:none;
}

#modal-content {
	padding: 20px;
	height: 200px;
	color: #CCC;
}

#modal-content a {
	color: #eee;
}
#modal-content a:hover {
	color: #aaa;
}

#modal-content h3 {
	padding: 0 0 20px 0;
}

#case-gallery {
	width: 920px;
	overflow: hidden;
	display: block;
	position: relative;
}
a#view-gallery {
	width: 244px;
	height: 36px;
	display: block;
	background: url(/art/view-gallery-btn.gif) no-repeat 0 0;
	text-indent: -9999px;
	position: absolute;
	top: 20px;
	right: 0px;
}

a#view-gallery:hover {
	background: url(/art/view-gallery-btn.gif) no-repeat 0 -36px;
}

a#back-to-case {
	width: 244px;
	height: 36px;
	display: block;
	background: url(/art/case-studies-btn.gif) no-repeat 0 0;
	text-indent: -9999px;
	position: absolute;
	top: 20px;
	right: 0px;
}

a#back-to-case:hover {
	background: url(/art/case-studies-btn.gif) no-repeat 0 -36px;
}



.case-holder {
	width: 940px;
	display: block;
	margin: 0 0 0 -20px;
	padding: 10px 0 0 0;
	background: url(/art/horizontal-line.gif) no-repeat 20px 0;
}

.gallery-holder {
	width: 900px;
	display: block;
	margin: 0 0 0 -16px;
	padding: 20px 20px 0 20px;
	background: url(/art/horizontal-line.gif) no-repeat 16px 0;

}

.gallery-holder a {
	margin: 0 0 16px 16px;
	float: left;
	display: inline;
	
}

.gallery-holder a img {
	border: 5px solid #ddd;
	padding: 1px;
	background: #fff;
}

.gallery-holder a:hover img {
	border: 5px solid #56617a;
}


.case {
	width: 450px;
	height: 195px;
	display: block;
	background: url(/art/case-bg.gif) no-repeat;
	position: relative;
	float: left;
	margin: 0 0 20px 20px;
	display: inline;
}

.case-info {
	width: 189px;
	padding: 10px 12px;
}

.case-info h2 {
	font-size: 1.5em;
	text-shadow: #fff 0 1px 0;
	padding: 0;
}

.case-info h3 {
	font-size: 1em;
	letter-spacing: 0;
	color: #000;
}

.case-info p {
	font-size: .95em;
	line-height: 1.5em;
}

.case img {
	position: absolute;
	right: 0;
	top: 0;
	border-left: 1px solid #fff;
}

a.view-case-btn {
	width: 176px;
	height: 36px;
	display: block;
	background: url(/art/view-case-btn.gif) no-repeat 0 0;
	text-indent: -9999px;
	position: absolute;
	left: 10px;
	bottom: 12px;
}

a.view-case-btn:hover {
	background: url(/art/view-case-btn.gif) no-repeat 0 -36px;
}

#gallery {
	margin: 0 0 0 -12px;
	width: 708px;
}

#gallery a {
	margin: 0 0 12px 12px;
	float: left;
}

#gallery a img {
	border: 5px solid #ddd;
	padding: 1px;
	background: #fff;
}

#gallery a:hover img {
	border: 5px solid #56617a;
}


/* CONTENT CAROUSEL -------------------------------------- CONTENT CAROUSEL */

#carousel-holder {
	background: url(/art/content-carousel-bg.gif) no-repeat 0 -3px;
	margin: 10px 0;
}

ul.pagination.navigator {
	width: 206px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 6px 0 0 6px;
}

ul.pagination.navigator li {
	list-style: none;
	color: #757575;
}

ul.pagination.navigator li a{
	text-indent: -9999px;
	width: 206px;
	height: 32px;
	background: url(/art/carousel-nav.gif) no-repeat 0 0;
	display: block;
}

ul.pagination a#individuality:hover {
	background-position: -206px 0;
}

ul.pagination .active a#individuality {
	background-position: -412px 0;
}

ul.pagination a#quality {
	background-position: 0 -32px;
}

ul.pagination a#quality:hover {
	background-position: -206px -32px;
}

ul.pagination .active a#quality{
	background-position: -412px -32px;
}

ul.pagination a#experience {
	background-position: 0 -64px;
}

ul.pagination a#experience:hover {
	background-position: -206px -64px;
}

ul.pagination .active a#experience {
	background-position: -412px -64px;
}

ul.pagination a#supervision {
	background-position: 0 -96px;
}

ul.pagination a#supervision:hover {
	background-position: -206px -96px;
}

ul.pagination .active a#supervision {
	background-position: -412px -96px;
}

ul.pagination a#pricing {
	background-position: 0 -128px;
}

ul.pagination a#pricing:hover {
	background-position: -206px -128px;
}

ul.pagination .active a#pricing {
	background-position: -412px -128px;
}


#content-carousel {
	width: 658px;
	color: #fff;
	overflow: hidden;
	display: block;
	position: relative;
	height: 400px;
	margin: 25px;
	float: right;
}

#content-carousel ul {
	list-style: none;
	margin: 0;
	padding: 0;

}

#content-carousel ul li{
	list-style: none;
	float: left;
	width: 658px;
	padding: 0;
	margin: 0;
}

#content-carousel h3{
	font-size: 2.2em;
	padding: 0 0 20px 0;
	text-shadow: #282f40 0 2px 0;
}

#content-carousel ul li img {
	float: right;
	margin: 0 20px 20px 20px;
	display: inline;
	background: url(/art/image-shadow.png) no-repeat bottom left;
	padding: 0 7px 27px 7px;
}

#carousel-footer {
	width: 920px;
	height: 3px;
	background: url(/art/content-carousel-bg.gif) no-repeat;
	clear: both;
}

#testimonial-wrapper {
	margin: 0 0 0 -20px;
	width: 940px;
}

.column {
	float: left;
	margin: 0 0 0 20px;
	width: 450px;
}

.testimonial {
	width: 390px;
	background: url(../art/testimonial-bg.png) no-repeat #e1e1e1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 1px 0px #777;
	-moz-box-shadow: 0px 1px 0px #777;
	box-shadow: 0px 1px 0px #777;
	padding: 30px;
	margin: 0 0 20px;
}

.client {
	font-weight: bold;
}


/* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */

.clear {
	clear: both;
}

.push {
	height:123px;	/* make the height of .push the same as #footer (for stickyness) */
}

.divider {
	width: 100%;
	background:url("/art/horizontal-line.gif") ;
	height: 1px;
	margin: 0 0 10px 0;
}