/* 

STYLE SHEET FOR DAVIDS GRAPHIC DESIGN
Created by Eleonor Tapia
www.eleonortapia.com

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms
	
Notes

*/



/* --------- 1. defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
		text-align: center;
		background: #000000;
		}
		
/*  --------- 2. structure  --------- */

#wrapper {
		width: 960px;
		text-align: left;
		margin: 30px auto;
		background: #FFFFFF;
		}
		
#masthead {
		height: 165px;
		margin: 0 30px;
		}
		
#logo {
		}
		
#navContainer {
		float: right;
		margin-right: 30px;
		}

#content-header-home {
		border-top: 7px solid #d2d6d9;
		border-bottom: 7px solid #d2d6d9;
		height: 280px;
		background: url(../images/promo-bg.gif) repeat-x;
		padding: 20px 30px;
		color: #fff;
}

/*.main-panel2 {
		border-top: 7px solid #d2d6d9;
		border-bottom: 7px solid #d2d6d9;
		height: 128px;
		background: url(../images/panel-bg.gif) repeat-x;
		padding: 0 30px;
		color: #fff;
}*/

#content-header ul {
		float: left;
		margin-left: 260px;
		list-style-type: none;
}

#content-header ul li {
		background: none; 
		display: inline;
}

#content-header ul li a { 
		color: #FFFFFF;
}
	
#content-header {
		position: relative; /* positioning of elements within will be relative to this element */
		border-top: 7px solid #d2d6d9;
		border-bottom: 7px solid #d2d6d9;
		height: 128px;
		background: url(../images/panel-bg.gif) repeat-x;
		padding: 0 30px;
		color: #fff;
}

#content-header-home p.intro {
		top: 85px;
		width: 515px;
		font-size: 1.1em;
		padding-top: .5em;
		padding-bottom: .7em;
}

#content-header-home p.secondary {
		top: 165px;
		width: 515px;
		font-size: 1em;
}

#content-header-home img.btn {
		top: 210px;
		left: 400px;
		margin: 15px 30px 0 0;
}

#content {
		background: url(../images/content-bg.gif) repeat-x #d2d6d9;
		min-height: 345px;
		float: left;
		padding: 0 30px;
}


		
#content2 {
		background: url(../images/content-bg.gif) repeat-x #d2d6d9;
		min-height: 345px;
		float: left;
}

#content3 {
		background: #fff;
		min-height: 345px;
		float: left;
}

#lhs {
		width: 690px;
		padding: 0 0 0 30px;
}

#lhs2 {
		width: 660px;
		padding: 0 30px 0 30px;
}

#rhs {
		width: 238px;
		float: right;
		padding-top: 20px;
		background: #f1f3f4;
}

#main2 {
		background: url(../images/content-bg2.gif) repeat-y!important;
		float:left;}
		
#main3 {
		background: url(../images/content-bg3.gif) repeat-y!important;
		float: left;
		}	
			
.stage {
		border-bottom: 1px solid #CCCCCC;
		padding-bottom: 20px;
		margin-right: 35px;
}

.client_testimonial {
		border-bottom: 1px solid #CCCCCC;
		padding-bottom: 20px;
		margin-right: 35px;
		margin-top: 15px;
}

.portfolio {
		width: 666px;
		background: url(../images/portfolio_bg.jpg) no-repeat;
		min-height: 520px;
		border: 3px solid #d2d6d9; 
		margin-top: 10px;
		margin-bottom: 10px;
		position: relative;
}

.portfolio-name {
		height: 40px;
		background: url(../images/folio-bg.gif) repeat-x;
		border-top: 1px solid #d2d6d9;
		padding: 0 15px; 
		width: 635px;
		position: absolute;
		top: 100%;
}

#portfolio-description {
		padding: 15px 15px 15px 15px;
		margin-top: 50px;
		margin-left: 3px;
		margin-bottom: 20px;
		width: 635px;
		background: #fff;
}

.panel {
		float: left;
		width: 290px;
		padding-right: 10px;
		padding-top: 30px;
		border-right: 2px solid #d2d6d9;
		min-height: 315px;
}

.panel p, .panel2 p, .panel3 p {
		padding-top: .5em;
}

ul.tick, ul.tick {
		padding-top: 0.5em;
		list-style: none;
}

ul.tick li, ul.tick li {
		background: url(../images/tick.gif) no-repeat;
		padding-left: 30px;
		padding-bottom: .5em;
}

.panel2 {
		float: left;
		width: 250px;
		padding-left: 20px;
		padding-right: 10px;
		padding-top: 30px;
		border-right: 2px solid #d2d6d9;
		min-height: 315px;
}

.panel3 {
		float: left;
		width: 285px;
		padding-left: 20px;
		padding-right: 10px;
		padding-top: 30px;
		min-height: 315px;
}


#footer {
		background: #606a74;
		color: #9faab4;
		font-size: .8em;
		padding: 15px 30px;
}

#footer .right {
		float: right;
}

#footer .right p {
		text-align: right;}

#fotter .left {
		float: left;
}

#footer p.terms {
		float: left; 
}

.separator {
		clear: both;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}

.clearFix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
		}

/* ---------- 3. links and navigation ---------- */

a {
		color: #9a0002;
		outline: none;
		}
		
a:hover {
		text-decoration: none;
		}
		
#footer a {
		color: #9faab4;
		}
		
#footer a:hover {
		text-decoration: none;
		}
		
		
#navigation {
		
		}

#navigation ul {
		
		}

#navigation li {
		display: inline;
		border-left: 3px solid #d2d6d9;
		padding: 103px 20px 0 0;
		}

#navigation a {
		}

#navigation a:hover {
		}
.nav li a:link, .nav li a:visited {
    position: absolute;
    text-indent: -9000px;
    overflow: hidden;
}

    .nav .corporate a:link, .nav .corporate a:visited {
        background: url(../images/corp_id_btn.gif) no-repeat;
		top: 25px; 
		left: 450px;		
		width: 153px;
		height: 38px;
    }
    .nav .corporate a:focus, .nav .corporate a:hover  {
        background: url(../images/corp_id_btn2.gif) no-repeat;
    }
    .nav .corporate a:active {
        background: url(../images/corp_id_btn2.gif) no-repeat;
    }
    .nav li a.corporate-selected  {
        background: url(../images/corp_id_btn2.gif) no-repeat!important;
    }	
		
    .nav .advertising a:link, .nav .advertising a:visited {
        background: url(../images/advertising_btn.gif) no-repeat;
		top: 25px; 
		left: 620px;		
		width: 110px;
		height: 38px;
    }
    .nav .advertising a:focus, .nav .advertising a:hover {
        background: url(../images/advertising_btn2.gif) no-repeat;
    }
    .nav .advertising a:active {
        background: url(../images/advertising_btn2.gif) no-repeat;
    }
	
    .nav li a.advertising-selected {
        background: url(../images/advertising_btn2.gif) no-repeat!important;
    }
		
    .nav .photography a:link, .nav .photography a:visited {
        background: url(../images/photography_btn.gif) no-repeat;
		top: 25px; 
		left: 750px;		
		width: 110px;
		height: 38px;
    }
    .nav .photography a:focus, .nav .photography a:hover {
        background: url(../images/photography_btn2.gif) no-repeat;
    }
    .nav .photography a:active {
        background: url(../images/photography_btn2.gif) no-repeat;
    }
    .nav a.photography-selected {
        background: url(../images/photography_btn2.gif) no-repeat!important;
    }
	
    .nav .brand a:link, .nav .brand a:visited {
        background: url(../images/brand_des_btn.gif) no-repeat;
		top: 70px; 
		left: 450px;		
		width: 153px;
		height: 38px;
    }
    .nav .brand a:focus, .nav .brand a:hover  {
        background: url(../images/brand_des_btn2.gif) no-repeat;
    }
    .nav .brand a:active {
        background: url(../images/brand_des_btn2.gif) no-repeat;
    }	
	
    .nav a.brand-selected {
        background: url(../images/brand_des_btn2.gif) no-repeat!important;
    }
		
    .nav .packaging a:link, .nav .packaging a:visited {
        background: url(../images/packaging_btn.gif) no-repeat;
		top: 70px; 
		left: 620px;		
		width: 110px;
		height: 38px;
    }
    .nav .packaging a:focus, .nav .packaging a:hover {
        background: url(../images/packaging_btn2.gif) no-repeat;
    }
    .nav .packaging a:active {
        background: url(../images/packaging_btn2.gif) no-repeat;
    }
    .nav a.packaging-selected {
        background: url(../images/packaging_btn2.gif) no-repeat!important;
    }
		
    .nav .illustration a:link, .nav .illustration a:visited {
        background: url(../images/illustration_btn.gif) no-repeat;
		top: 70px; 
		left: 750px;		
		width: 110px;
		height: 38px;
    }
    .nav .illustration a:focus, .nav .illustration a:hover  {
        background: url(../images/illustration_btn2.gif) no-repeat;
    }
    .nav .illustration a:active {
        background: url(../images/illustration_btn2.gif) no-repeat;
    }
    .nav a.illustration-selected {
        background: url(../images/illustration_btn2.gif) no-repeat!important;
    }
	
.nav2 li a:link, .nav2 li a:visited {
    position: absolute;
    text-indent: -9000px;
    overflow: hidden;
}

    .nav2 .experience a:link, .nav2 .experience a:visited {
        background: url(../images/experience_btn.gif) no-repeat;
		top: 25px; 
		left: 450px;		
		width: 103px;
		height: 38px;
    }
    .nav2 .experience a:focus, .nav2 .experience a:hover {
        background: url(../images/experience_btn2.gif) no-repeat;
    }
    .nav2 .experience a:active {
        background: url(../images/experience_btn2.gif) no-repeat;
    }
    .nav2 li a.experience-selected  {
        background: url(../images/experience_btn2.gif) no-repeat!important;
    }		
	
    .nav2 .process a:link, .nav2 .process a:visited {
        background: url(../images/process_btn.gif) no-repeat;
		top: 25px; 
		left: 580px;		
		width: 117px;
		height: 38px;
    }
    .nav2 .process a:focus, .nav2 .process a:hover {
        background: url(../images/process_btn2.gif) no-repeat;
    }
    .nav2 .process a:active {
        background: url(../images/process_btn2.gif) no-repeat;
    }
    .nav2 li a.process-selected  {
        background: url(../images/process_btn2.gif) no-repeat!important;
    }	
	
    .nav2 .testimonials a:link, .nav2 .testimonials a:visited {
        background: url(../images/testimonials_btn.gif) no-repeat;
		top: 25px; 
		left: 720px;		
		width: 110px;
		height: 38px;
    }
    .nav2 .testimonials a:focus, .nav2 .testimonials a:hover {
        background: url(../images/testimonials_btn2.gif) no-repeat;
    }
    .nav2 .testimonials a:active {
        background: url(../images/testimonials_btn2.gif) no-repeat;
    }
    .nav2 li a.testimonials-selected  {
        background: url(../images/testimonials_btn2.gif) no-repeat!important;
    }	
	
		
/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-family: Helvetica, arial, sans-serif;
		font-size: .9em;
		}

h1, h2, h3, h4, p, ul {
		}

#content-header-home h1 {
		margin-top: 20px;
		margin-bottom: 10px;
		}

#content-header h1 {
		position: absolute; 
		top: 70px; 
		left: 30px;
		}
		
#lhs h1, #lhs2 h1 {
		color: #9a0002;
		font-size: 1.5em;
		padding-top: 1em;
		}	
		
#lhs h2, #lhs2 h2, #lhs h3, #lhs2 h3 {
		color: #9a0002;
		font-size: 1.2em;
		padding-top: .5em;
}

#rhs h4 {
		padding-left: 20px;
		padding-bottom: 20px;
		font-size: 1.2em;
		color: #9a0002;
}
		
.panel h2, .panel2 h2, .panel3 h2 {
		color: #9a0002;
		font-size: 1.2em;
		}

h3 {
		}
		
h4 {
		}
		
p.contact {
		padding-top: 0;
		padding-bottom: 0!important;}

p.location {
		font-variant:small-caps;
		color: #9a0002;
		padding: 0!important;
		}
		
#lhs p, #lhs2 p {
		padding-top: .5em;
		padding-bottom: 1em;
		line-height: 1.2em; 
}

p.client1 {
		font-size: .85em;
		padding-left: 20px;
}

p.client {
		font-size: .85em;
}
		
.stage p {
		padding-bottom: .3em!important;
}

.client_testimonial p {
		padding-bottom: .3em!important;
}

.red {
		color: #9a0002;
}

ul {
		list-style-type: none;
		}
		
ul li {
		background: url(../images/bullet.gif) no-repeat 0 0.3em;
		padding-left: 20px;
}

ol {
		}
		
ol li {
		padding-left: 10px;
		line-height: 1.2em;
		padding-bottom: .5em;
}

#portfolio-description ol {
		margin-top: 10px;
}

#portfolio-description ol li {
		padding-left: 0!important;
		margin-left: 20px!important;
		line-height: 1.2em;
		padding-bottom: .5em;
}

ul.services {
		margin-top: 10px;
}

ul.services li {
		background: url(../images/bullet.gif) no-repeat 0 0.3em;
		padding-left: 20px;
		padding-bottom: .2em;
		margin-left: 35px;
}

.stage ul {
		margin-top: 10px;
}

.stage ul li {
		background: url(../images/bullet.gif) no-repeat 0 0.4em;
		padding-left: 15px;
		padding-bottom: .2em;
		margin-left: 20px;
}

.stage ol {
		margin-top: 10px;
		margin-left: 0;
}

.stage ol li {
		padding-left: 0;
		padding-bottom: .2em;
}

ol {
}

ol li {
		background: none;
		margin-left: 35px;
}

ol li ul {
		margin-bottom: 20px;
		margin-top: 5px;
}

ol li ul li {
		background: url(../images/bullet.gif) no-repeat 0 0.4em;
		padding-left: 15px;
		padding-bottom: .2em;
		margin-left: 0;
}		

.portfolio-name ul {
		list-style-type: none;
		float: right;
		margin-top: 12px;
}

.portfolio-name ul li {
		background: none;
		display:inline;
		padding-left: 0;
}

.portfolio-name ul li a, .portfolio-name ul li a:link {
		text-decoration: none;
		font-weight: bold;
		padding: 5px 10px;
		background: #fff;
		border: 1px solid #CCCCCC;
}

.portfolio-name ul li a:hover {
		color: #FFFFFF;
		background: #9a0002;
		border: 1px solid #CCCCCC;
}

a.red-active {
		color: #FFFFFF;
		background: #9a0002!important;
		border: 1px solid #CCCCCC;
}

#rhs ul {
		list-style-type: none;
}

#rhs ul li {
		background: url(../images/portfolio_thumb_bg.gif) repeat-x;
		height: 107px;
		border-bottom: 1px solid #fff; 
}

#rhs ul li a, #rhs ul li a:link {
		padding: 0 10px 0 0;
}

blockquote {
		padding: 10px 0 10px 0;
		}

blockquote.homepage-testimonial {
		padding: 40px 20px 20px 20px;
		background: url(../images/quote-top.gif) no-repeat left top;
		}
		
blockquote.testimonial {
		padding: 5px 0 5px 0;
		}
		
#rhs ul li:hover {
	background: #D2D6D9;
	cursor: pointer;
}

#rhs ul li:hover img {
	border:4px solid #FFFFFF;
}

#rhs ul li.selected {
	background: #D2D6D9;
}

#rhs ul li.selected img {
	border:4px solid #FFFFFF;
}


/* ---------- 5. images ---------- */

a img {
		border: 0;
		}
		
img.quote {
		float: right;
}

#rhs ul li img {
		float: left;
		border: 4px solid #d2d6d9;
		margin-top: 12px;
		margin-right: 15px;
}

.error, .success {
		float:left; 
		margin-right: 10px;
}
		
/* ---------- 6. tables ---------- */

table {
		}
		
caption {
		}
		
tr {
		}

th, td {
		}
		
th {
		}
		
td {
		}

/* ---------- 7. forms ---------- */	
		
#contact fieldset { 
		width: 600px; 
		padding: 1.5em; 
		margin-top: 20px;
		margin-bottom: 20px; 
		border: 1px solid #000;
		background: #F1F3F4;
}

#contact legend {
		padding: .5em .5em;
		margin-left: -5px;
		color: #fff;
		background: #000;
		font-weight: bold;
		}

#contact label { 
		float: left; 
		clear: left; 
		width: 175px; 
		margin: 0 0 1em 0; 
		padding: .3em .5em; 
		height: 20px;
}

#contact label.mandatory {
		border-right: 3px solid #9A0002;
		height: 20px;}

#contact label.mandatory2 {
		border-right: 3px solid #9A0002;
		height: 195px;
		margin-top: 30px;
}


#contact label.servicetype { 
		float: left; 
		clear:both; 
		padding: 0 .2em; 
}

#contact .service-areas input.check {
		float: left;
		padding: 0;
		}

#contact label.pdfform { 
		float: left; 
		clear:both; 
		padding: 0; 
		margin: 0!important;
}

#contact input.check { 
		float: left; 
		width: auto; 
		margin: 0 1em 1em 0; 
		border: solid 1px #000;
}

#contact input { 
		float: right; 
		margin: 0 1em 1em 0; 
		width: 380px; 
		padding: .2em .2em; 
		height: 20px;
		border: solid 1px #000;
}

#contact textarea { 
		float: left; 
		margin-left: 200px; 
		width: 380px; 
		height: 202px; 
		margin-bottom: 20px; 
		border: solid 1px #000;
}
#contact .button { 
		float: left; 
		padding: .25em 2em; 
		margin-left: 200px; 
		clear: both; 
		width: auto; 
}

#contact .service {
		float: left;
}
		
#contact .service-areas {
		float: left;
		margin-left: 5px;
		margin-top: 5px;
}

#contact .pdf-form {
		float: right;
		margin-right: 225px;
		margin-top: 5px;
}

#contact textarea.enquiry {
		float: left;
		margin-top: -220px;
}

#contact .button {
		border: none;
		width: 100px;
		height: 30px;
		padding: 0;}

#contact p.mandatory-key {
		float: right;
		border-left: 3px solid #9A0002;
		height: 10px;
		padding-left: 10px;
		padding-top: 0;
		margin-bottom: 10px;
		margin-right: 30px;
		clear: both;
		}