/* 
Hammersmiths Shopfitters
Core Styles


Created By  
Rob Wright @ Oyster
www.oyster-creative.co.uk
--------------------------------------------------------


=Generic
--------------------------------------------------------
*/

body {
	margin:0px 0px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	background: #333333 url(../images/layout/body_background.jpg) repeat-y  top center ;
}

a img { border:none;}
a, a:hover{ text-decoration:none;}
a { color:#647A7B; }
a:hover { color: #98A9AA;}

.last {border-bottom:none!important; background:none!important;}


h2, h3, h4, p{
	padding:0px;
	margin:5px  0px 15px;
}

#content #main_content h2, #content  h3{ 
	color:#637A7A;
	margin:20px  0px 0px;
	text-transform:lowercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#content  h3{ margin:15px  0px 0px;}

#content #main_content h1 {
	margin:0px  0px 3px;
	padding-top:10px;
	text-transform:lowercase;
}

h1, h2 , h3 {font-weight:normal; }

h1{	font-size:1.9em;  color:#637A7A;}
h1 span { font-size:0.7em; text-transform:none; display:block; margin:15px 0px 26px;}
h2 { font-size:1.7em; }

h3{	font-size:1.5em;	 }

ul, ol{
	padding:0px;
	color: #666666 ;
	margin:25px 40px;
}

li {
	margin-bottom:5px; 
	line-height:1.50em;
}

p{	line-height:1.60em; }

/*
=Frame
--------------------------------------------------------
*/

#frame {
	width:1006px;
	height:1552px;
	margin:0px auto;
	background:url(../images/layout/frame_background.jpg) no-repeat top center;
	position:relative;

}

#frame h1 {
	padding:0px;
	margin:0px;
}

#frame #logo{
	display:block;
	text-indent:-9000px;
	width:482px;
	height:72px;
	background:url(../images/logo.jpg) no-repeat;
	position:absolute;
	top:80px;
	left:66px;
	overflow:hidden;
}

/*
=Header
--------------------------------------------------------
*/

#header {
	width:693px;
	height:559px;
	margin:0px 0px 0px 288px;
	position:relative;
	z-index:100;
}

#header ul {
	margin:0px;
	padding:0px 0px 0px 40px;
	width:600px;
	height:30px;
	background:#292928;
	position:absolute;
	top:158px;
	left:10px;	z-index:50;
	list-style:none;
}

#header ul li{
	margin:-18px 5px 0px 0px;
	float:left;
	padding:0px 29px 0px 0px;

	display:inline;
	position:relative;
	background:url(../images/layout/navigation_li_background.png) no-repeat top right;
}

#header ul li a{	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#F9F9F9;
	text-transform:lowercase;
	font-size:1.0em;
	display:block;
	margin:17px 0px 0px;
	padding:7px  0px 7px;
	letter-spacing:-0.01em;	
}

#header ul li a:hover, #header ul li a#current_area{	color:#a5b3b5;} 

#header ul li ul{
	top:48px;
	left:-22px;
	width:91px;
	z-index:120;
	height:auto;
	margin:0px;
	visibility:hidden;
	padding:0px 0px  15px;
	background:url(../images/layout/secondary_nav_background.png) no-repeat bottom;
}

#header ul li ul li {
	margin:0px!important;
	padding:0px 0px 0px;
	line-height:12px;
	float:none;	
	display:block;
	background:#292928;
	height:auto;
	clear:both;
}

#header ul li ul li a{
	background:#292928;
	padding:5px 3px 5px 22px;
	margin:0px;	background:#292928;
	font-size:0.89em;
	letter-spacing:0px;
	text-align: left;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;	display:block;
}

#header ul li ul li a:hover{		color:#a5b3b5;}
#header ul li:hover ul{	visibility: visible;}


#header #contact {
	position:absolute;
	top:84px;
	right:60px;
	text-align:right;
}

#header #contact #phone{
	background:url(../images/layout/phone_icon.png) no-repeat 89px 2px;
	padding-left:26px;
	font-size:1.8em;
	line-height:22px;
	color:#d8d9d4;
	margin-bottom:0px;
}

#header #contact #web{
	font-size:1.3em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#d8d9d4;
	margin:0px;
}

#header #flash_image_header{
	width:681px;
	height:364px;
	position:absolute;
	bottom:-1px;
	left:0px;
	z-index:6;
}

#header #flash_image_header img{
	display:block;
	position:absolute;
	bottom:4px;
}

/*
=Content
--------------------------------------------------------
*/

#content {
	width:650px;
	margin-right:68px;
	display:inline;
	padding-bottom:85px;
	min-height:410px;

	float:right;
	background:  url(../images/layout/content_background.png) no-repeat bottom;
	position:relative;

}

#chart {
	position:absolute;
	left:-235px;
	top:-61px;
	z-index:10;
	width:297px;
	height:534px;
	background:url(../images/color_chart.png) no-repeat;
}

#chart div {
	position:absolute;
	width:160px; 
	height:164px;
	bottom:65px;
	left:75px;
}

/*
=Main Content
--------------------------------------------------------
*/

#content #main_content {
	/*background:url(../images/layout/main_content.png) repeat-x;*/
	padding:15px 82px 10px;
	width:465px;
	max-height:810px;
	overflow:hidden;
	color:#3F3F3F;
}

#content #main_content p#welcome {
	font-size:1.3em;
	margin:20px 0px 30px;
}

#content .background {
	background:url(../images/layout/main_content.png) repeat-x;
}

form  p label input, form p label textarea {
	display:block;
	border:1px solid #CCCCCC;
	font-size:1.0em;
	padding:3px;
	margin-top:3px;
}

form  p label {
	font-size:0.9em;
	display:block;
}

#content #main_content .service_image {
	float:right;
	display:inline;
	padding:1px;
	clear:right;
	margin:-5px -33px 15px 25px;
	background: #F5F5F5 ;
	border:1px solid  #CCCCCC;
}

#content #main_content p .service_image {
	float:none;
	display:block;
	padding:1px;
	margin:10px 0px;
	background: #F5F5F5 ;
	border:1px solid  #CCCCCC;
}


/*Contact Page*/

#content #main_content #address {
	margin-top:30px;
	width:160px;
	float:left;
}

#content #main_content #address strong{
	display:block;
	font-size:1.2em;
	color:#647A7B;
	margin-bottom:5px;
}

#content #main_content #contact_form {
	width:60px;
	margin:30px 0px 0px 20px;
	padding-left:20px;
	border-left:3px solid #DBDDD6;
	float:left;
	min-height:160px;
}

#contact_form p, #contact_form p{ width:270px; 	position:relative;}

#contact_form label input, #contact_form label textarea{
	width:260px;
}

/* News */
#content #main_content #date{
	font-size:1.2em;
	text-transform:none;
	margin: 10px 0px 35px;
}

#content #main_content #news_image{
	float:right;
	display:inline;
	margin:-55px -10px 10px 10px;
	border:1px solid #B4C2C4;
	padding:2px;
	background: #F2F0EE;
}

#content #main_content #news_listing {
	margin-top:45px;
}

#content #main_content #news_listing h3 { text-transform:none;}

#content #main_content #news_listing h3 span{
	font-size:0.6em;
	color:#98A9AA;
	display:block;
	margin:2px 0px 5px;
}

#content #main_content #news_listing p{
	height:80px;
	line-height:16px;
}

#content #main_content #news_listing p img{
	float:left;
	display:inline;
	margin:2px 10px 2px -5px;
	background: #F2F0EE;
	border:1px solid #B4C2C4;
	padding:1px;
}

#content #main_content #news_listing p a{  
	padding-right:17px; 
	margin-top:2px;
	background:url(../images/layout/latest_news.png) no-repeat right 4px;
	display:block;
	padding-bottom:3px;
	border-bottom:2px solid #dbddd6;
	text-align:right;
}

#content #main_content #news_listing #result_pages {
	list-style:none;
	margin:0px;
	padding:0px;
}

#content #main_content #news_listing #result_pages li{
	float:left;
	margin:5px 9px 0px 0px
}
#news_listing #result_pages li a{
	display:block;
	background:#B4C2C4;
	color:#FFFFFF;
	padding:2px 7px;
	float:left
}
#news_listing #result_pages li span{ float:left; display:block; margin-right:6px; }

#news_listing #result_pages li a:hover, #result_pages li a#current_set{	background:#647A7B;}


/*Portfolio */
#portfolio_nav {
	list-style:none;
	margin:0px;
	padding:0px;
}

#portfolio_nav li{ display:inline;  margin:0px 0px 10px}

#portfolio_nav li a{
	text-transform:lowercase;
	margin-right:10px;
	font-size:0.9em;
}

#portfolio_nav li a.current_cat {
	color: #333333
}

#portfolio_listing {
	list-style:none;
	margin:40px 0px 0px -10px;
	padding:0px;
}

#portfolio_listing li { float:left;}

#portfolio_listing li a {
	display:block;
	width:143px;
	border:1px solid #ebe9e6;
	padding:5px;
}

#portfolio_listing li a:hover {	border:1px solid #dbddd6;}

#portfolio_listing li a strong{
	display:block;
	padding:7px 8px;
	font-weight:normal;
}

#portfolio_listing li a strong span{
	display:block;
	font-size:0.8em;
	color:#9c9d9d;
}

#portfolio_listing li a img{
	display:block;
	background: url(../images/layout/project_image_background.png) no-repeat;
	padding:4px;
}

#content #main_content #project_info{
	font-size:0.9em;
	text-transform:none;
	margin: 5px 0px 45px;
	color:#8D877D;
}

#content #main_content #project_details h3 {	font-size:1.2em;}

#content #main_content #project_details .project_image {
	float:right;
	display:inline;
	padding:1px;
	margin:0px 0px 5px 5px;
	background: #F5F5F5 ;
	border:1px solid  #CCCCCC;
}

#project_details #project_gallery {
	list-style:none;
	margin:12px 0px;
	border-top:2px solid #dbddd6;
	padding:14px 0px 0px;
}

#project_details #project_gallery li {
	float:left;
	margin:0px 4px 10px 4px;
}

#project_details #project_gallery li a{
	display:block;
	padding:1px;
	background:#FFF;
	border:1px solid  #CCCCCC;
}

#project_details #project_gallery li a:hover{	background:#B4C2C4;}

#project_details #project_gallery li a img{	width:80px;	display:block; }

/* Image Pop up*/

.gallery_image {
	z-index:300;
	width:320px;
}
.gallery_image .tip-top {
	height:11px;
	background:url(../images/layout/gallery_top.png) no-repeat;
}

.gallery_image .tip {	background:#292928; padding:0px 10px 20px;}

.gallery_image .tip .tip-title {
	width:300px;
	position:absolute;
	bottom:10px;
}	

.gallery_image .tip-bottom {
	height:11px;
	background:url(../images/layout/gallery_bottom.png) no-repeat;
}

/*
=Secondary Content / Latest News
--------------------------------------------------------
*/

#secondary_content, #latest_news {
	width:220px;
	height:220px;
	position:absolute;
	top:-333px;
	left:-230px;
	z-index:11;
}


/* Latest News
--------------------------------------------------------
*/
#content #latest_news  {	color:#FFF;}

#content #latest_news h2 {
	color:#FFF;
	text-transform:lowercase;
	font-size:1.8em;
	font-weight:normal;
	margin:25px 18px 5px;
}

#content #latest_news p {
	font-size:0.9em;
	margin:5px 8px 15px 18px;
}

#content #latest_news strong, #content #latest_news a{ 	display:block;}

#content #latest_news a{  
	padding-left:17px; 
	background:url(../images/layout/latest_news.png) no-repeat 0px 4px;
	color:#FFF; 
}

#content #latest_news a:hover{ color:#A7B6B7; }

/* Footer
-----------------------------------------------------------
*/

#footer {
	width:651px;
	margin-right:93px;
	position:relative;
	display:inline;
	float:right;
	margin-top:-35px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#footer ul {
	list-style:none;
	margin:0px 0px 0px 70px;
	padding:5px 0px 0px 5px;
	width:166px;	
	height:34px;
	background: url(../images/layout/footer_ul_background.png) no-repeat;
}

#footer ul li{
	display:inline;
	color:#FFF;
	margin:0px 8px 0px 8px;
}

#footer ul li a{
	color:#FFF;
	position:relative;
	z-index:13;
	font-size:0.7em;
	text-transform:uppercase;
}

#footer ul li a:hover{	color:#637A7A;}

#footer p{
	position:absolute;
	top:0px;
	font-size:0.9em;
	color:#333333;
	right:60px;
	font-weight:bold;
}

#footer p a{ color:#333333;}

#footer p a:hover{	color:#637A7A;}


/*Oyster */
#oyster {
	display:block;
	width:170px;
	height:26px;
	overflow:hidden;
	text-indent:-4000px;
	position:absolute;
	bottom:35px;
	right:30px;
}

/* Errors
-----------------------------------------------------------
*/


.error {
	font-size:0.9em;
	padding-left:22px;
	padding-bottom:5px;
	background: url(../images/layout/error.jpg) 0px 3px  no-repeat;
	border-bottom:1px dashed #CCCCCC;

}

.error_image {
	position:absolute;
	right:-50px;
	top:24px;
}