/* 
	(c) Gareth Rimmer 2008
*/
 
body {
	background: #FFFFFF;
	color: #414E56;
	font-size: 12px;
	font-family: "Lucida Grande", Verdana, sans-serif;
	line-height: 160%;
	margin: 0px auto 0px;
	padding: 0px;
	}
	
#container {
	border: 0px solid #0F0 ; /* outline for testing!  */
	width: 800px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
	}
	
	
/************************************************
*	Testing 123...									*
************************************************/	


img.logo_swatch {
	outline: 0px solid red;
	position: absolute;
	left: 0px;
	right: 0px;

	}
	
img.info_swatch {
	outline: 0px solid red;
	position: absolute;
	left: 40px;
	right: 0px;

	}
	
	
/************************************************
*	Fontage										*
************************************************/	

h2 {	
	margin: 25px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
	outline: 0px solid #F00 ; /* outline for testing!  */
	font: normal 22px/25px Palatino, Georgia, "Times New Roman", serif;
	color: #293845;
	}

#mainbody p {
	margin: 5px 0px 10px 0px;
	padding: 0px 0px 0px 0px;	
	}	
	

	
/************************************************
*	Hyperlinks									*
************************************************/

a, a:visited {
	color: #000;
	}
	
a:hover {
	background: #E5EAEB;
	
	}
	
/************************************************
*	Header  									*
************************************************/

#header {	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	outline: 0px solid #F00 ; /* outline for testing!  */
	position: relative;
	}
	
	
#header p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
	font: normal 15px/22px Arial, Tahoma, Verdana, serif; 
	position: absolute;
	right: 0;
	top: 35px;
	text-align: right;
	}
	
#header span {
	color: #AAA;
	}
	
	
/************************************************
*	Navigation bar  							*
************************************************/



#navigation_bar {
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
	outline: 0px solid gray; /* for testing!  */
	border-top: 0px solid #444;
	}
	
#navigation_bar ul {
		
	}

#navigation_bar ul li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
	list-style-type: none; 
	float: left; /* works with the display: block in the link inside it */
	}
	
#navigation_bar ul li a {
	margin: 0px 0px 0px 0px;
	padding: 25px 0px 7px 10px;
	color: #FFF;
	border-right: 1px solid #FFF;
	width: 149px;
	display: block; /* works with the float:left in the containing li to sort out all manner of spacing issues */
	text-decoration: none;
	border-bottom: 5px solid #CCC;
	}
	
#navigation_bar ul li a.last_choice {
	border-right: 1px solid #D9D7AC; /* gets rid of that annoying 1px right border on the last nav link */
	}

	
#navigation_bar ul li a.homelink {
	background: #14212B;
	}
	
#navigation_bar ul li a.aboutlink {
	background: #293845;
	}
	
#navigation_bar ul li a.worklink {
	background: #4F6373;
	}	
	
#navigation_bar ul li a.clientslink {
	background: #8F8164;
	}	
		
#navigation_bar ul li a.contactlink {
	background: #D9D7AC;
	color: #645F7E;
	}			
	
#navigation_bar ul li a:hover {  /* for testing!  */
	border-bottom: 5px solid #999;
	}
	
/* #About-us a.aboutlink, #Our-work .worklink, #Our-clients .clientslink, #Contact-us .contactlink {
	border-bottom: 5px solid #444 !important; 
	
	}*/
		
/************************************************
*	Body 					     		        * 
************************************************/

#mainbody {
	margin: 0px 0px 0px 0px;
	padding: 15px 10px 15px 250px;	
	border: 0px solid #00F; /* outline for testing!  */
	position: relative; /*needed so we can position things inside it with 'position: absolute'.  */
	display: inline-block; /* fixes an OUTRAGEOUS bug in IE7 that doubles the left padding  */
	}


#mainbody h1 {
	font: normal 18px/25px georgia, serif;/* for testing!  */
	}
		
#mainbody ul {
	margin: 10px 0px;/* for testing!  */
	list-style-type: none;
	}
	
#mainbody ul li {
	padding: 2px 0px 3px 14px;
	background: transparent url(../IMAGES/whatwedo_blob.gif) no-repeat left 7px;

	}
	

/************************************************
*	Footer  									*
************************************************/

#footer {	
	margin: 20px 0px 30px 0px;
	padding: 30px 0px 0px 0px;
	background-color: transparent;
	background-image:  url(../IMAGES/footer_bg.gif);
	background-repeat:repeat-x;
	background-position:  0px 50px;
	outline: 0px solid #666 ; /* outline for testing!  */
	border-top: 0px dotted #666;
	clear: both;
	height: 100px;
	position: relative;
	font: normal 11px/15px Arial, Tahoma, Verdana, serif; 
	text-align: left;
	}

#footer a {
	margin: 0px 0px 0px 0px;
	padding: 0px 3px 0px 3px;
	text-decoration: none;
	color: #414E56;
	}
	
#footer ul {
	margin: 0px 0px 13px 0px;
	padding: 0px 0px 0px 0px;
	}	

#footer ul li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
	list-style-type: none;
	}
	
img.footer_image {
	position: absolute;
	right: 0;
	top: 14px; 	
	}
	

/************************************************
*	Misc  									*
************************************************/
	
	
div.spacer {clear: both}



/************************************************
*	Homepage 									*
************************************************/

#Home #mainbody {
	border: 1px solid #B2B2B2; 
	padding: 0px 290px 15px 20px;	
	background: #ECEAE3 /* url(../IMAGES/frontpage_mainbody_bg_top.gif) no-repeat top left*/;
	-webkit-border-radius: 5px;    /* CSS3 rounded borders for Safari                    */
    -moz-border-radius: 5px;       /* CSS3 rounded borders for Firefox                   */
    border-radius: 5px;
	} 
	
img.front_page_image {
	outline: 0px solid red;
	position: absolute;
	top: 7px;
	right: 0px;
	}

#whatwedoblock {
	margin: 20px 0px 0px 0px;
	padding: 10px 10px 10px 15px;
	outline: 0px solid #0F0; /* outline for testing!  */
	background: #FEFEFE;
	border: 1px solid #C7C7C7
	}

#whatwedoblock h2 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font: normal 12px "Lucida Grande", Verdana, sans-serif;
	}
	
#whatwedoblock ul {
	border: 0px solid #0F0; /* outline for testing!  */
	margin: 6px 35px 0px 0px;
	list-style-type: none;
	float: left;
	
	}
	
#whatwedoblock ul li {
	outline: 0px solid #0F0; /* outline for testing!  */
	padding: 2px 0px 0px 15px;
	background: transparent url(../IMAGES/whatwedo_blob.gif) no-repeat left 7px;	
	font: normal 14px/19px "Lucida Grande", Verdana, sans-serif;
	}
	
.featureblock {
	outline: 0px solid #00F; /* outline for testing!  */
	margin: 15px 5px 50px 10px;
	padding: 46px 10px 0px 0px;
	width: 30%;
	border: 0px solid #FFF;
	float: left;
	}
	
.featureblock p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	}
	
.featureblock a {
	margin: 5px 0px 0px 0px;
	padding: 12px 0px 12px 9px;
	outline: 0px solid #0F0; /* outline for testing!  */
	width: 92%;
	color: #FFF;
	display: block;
	text-decoration: none;
	}
	
.featureblock a.imglink {
	margin: 3px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	}
	
.featureblock a#our_work {
	background: #8C969F url(../IMAGES/our_work_bg.gif) no-repeat left center;
	}
	
.featureblock a#our_customers {
	background: #8C969F url(../IMAGES/our_customers_bg.gif) no-repeat left center;
	}
	
.featureblock a#about_us {
	background: #8C969F url(../IMAGES/about_us_bg.gif) no-repeat left center;
	}
	
.featureblock a:hover {
	text-decoration: underline
	}
	
.hand_made {
	background: transparent url(../IMAGES/featureblock_hand_made.jpg) no-repeat top left;
	}

.customers {
	background: transparent url(../IMAGES/featureblock_customers.jpg) no-repeat top left;
	}

.experience {
	background: transparent url(../IMAGES/featureblock_experience.jpg) no-repeat top left;
	}

.featureblock h2 {
	display: none;
	} 
	
	
	
/************************************************
*	About us									*
************************************************/
	
	
/* rotator in-page placement */
div#rotator {
	position:relative;
	height:280px;
	}
	
/* rotator css */
div#rotator ul li {
	float:left;
	position:absolute;
	padding:0;
	background-image: none;
	}
 
div#rotator ul li.show {
	z-index:500;
	}

	
/************************************************
*	Our work									*
************************************************/

.gallery img {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}
	
.gallery a img {
	border: 3px solid #FFF;
	}
	
.gallery a:hover img {
	border: 3px solid #AAA;
	}



/************************************************
*	Our clients									*
************************************************/

blockquote {	
	margin: 20px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	background: transparent url(../IMAGES/quote_top_bg.gif) no-repeat top left;
	}

#mainbody blockquote p {
	margin: 0px 0px 0px 0px;
	padding: 10px 60px 0px 55px;
	line-height: 150%;
	color: #5B666D;
	}
	
cite {
	padding: 2px 55px 10px 55px;
	display: block;
	background: transparent url(../IMAGES/quote_bottom_bg.gif) no-repeat bottom left;	
	}	
	
/************************************************
*	Contact us									*
************************************************/	

/*
.box_contact {
	margin: 10px 20px 15px 0px;
	padding: 0px 20px 0px 0px;
	outline: 0px solid #00F;
	width: 42%;
	float: left;
	}
	
.box_contact h2 {	
	margin: 0px 0px 13px 0px;
	}
*/
	
#form_contact {
	outline: 0px solid #00F; /* outline for testing!  */
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: transparent url(../IMAGES/form_top_bg.gif) no-repeat top left;	
	}

#table_contact {
	outline: 0px solid #0F0; /* outline for testing!  */	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	background: transparent url(../IMAGES/form_bottom_bg.gif) no-repeat bottom left;	
	}

#table_contact td {
	margin: 0px 0px 0px 0px;
	padding: 10px 15px 0px 15px;
	}
	
.form_element {
	padding: 5px 5px 5px 5px;
	border: 1px solid #AAA;
	width: 300px;
	font-size: 12px;
	}
	
.contactinfo_container {
	margin-top:15px;
	margin-bottom: 30px;
	padding-bottom:25px;
	overflow:hidden;
	border-bottom: 1px dotted #BBB
	}
	
.contactinfo_main {
	width: 290px;
	float: left;
	}
	
.contactinfo_main p{
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 145%;
	}
	
.contactinfo_secondary {
	width: 235px;
	float: right;
	}
	
	
.wide_image {
	margin-bottom:15px;
	border: 1px solid #BBB;
	}
	
/************************************************
*	Easter Eggs!								*
************************************************/

.easteregg {
	margin: 0px 0px 0px 0px;
	padding: 15px 10px 15px 100px!important;
	width: 80%;	
	}
	

/************************************************
*	iPhone		!								*
************************************************/
	
	
/* iPhone 4 */
@media (max-device-width: 480px) {

#mainbody {
    padding: 15px 0px 15px 0px;
  }
  
img.logo_swatch {
    position:static;
	}
	
img.info_swatch  {
    display:none
	}
	
blockquote  {
    width:70%;
    }
    
 h2 {font-size:28px}

.contactinfo_main {
	width:60%;
	margin-bottom: 20px;
	}
	
.contactinfo_secondary {
	float:none;
	width:60%
	}
}
	
	

/************************************************
*	404											*
************************************************/	
	
#fourohfour img.footer_image {
	display: none	
	}
	
#fourohfour hr {
	clear:both;
	height:40px;
	border:0;
	border-bottom: 1px dotted #888;
	margin-bottom: 15px;
	}