@charset "utf-8";

/* Global
_______________________________________________________________________________________________*/
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, li, address {
	margin:0;
	padding:0;
	list-style-type:none;
	}
	
body {
	color: #000000;
	background: #DDDDDD url(graphics/body.png) repeat-x;
	font: 13px/1.5 "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;
	}

.clear {
	clear:both;
	}
	
.centered, p.centered {
	text-align: center;
	}
	
.right {
	text-align: right;
	}	

.left {
	text-align: left;
	}

.float_right {
	float: right;
	}

.float_left {
	float: left;
	}

.display_none {
	display: none;
	}
	
img, :link img, :visited img {
	border: none;
	}	

.preload {
	visibility: hidden;
	}

.text_indent {
	text-indent: -99999px; 
	}

/* Headings
_______________________________________________________________________________________________*/
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

h1 {
	text-indent: -9999px;
	}

h2 {
	position: relative;
	top: 48px;
	left: 5px;
	color: #111111;
	clear: both;
	line-height:1.2;
	text-indent: -9999px;
	}

h3 {
	float:none;
	clear:both;
	margin: 0.5em 0px 5px 0px;
	font-weight: bold;
	font-size: 130%;
	line-height:1.0;
	color: #666699;
	border-bottom: 1px dotted;
	background: url(graphics/h3_icon.gif) no-repeat left;
	}

h4 {
	color: #CBCF69;
	clear: both;
	margin: 15px 0 15px 0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height:1.2;
	text-indent: -9999px;
	}

h5 {
	font-size: 90%;
	line-height: 1.5em;
	color: #fff;
	letter-spacing: .2em;
	font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
	/*text-decoration: underline;*/
	}

/* Headings Image Replacement
_______________________________________________________________________________________________*/

#home_head {
	background: url(graphics/headers/home_head.gif) no-repeat;
	}

#profile_head {
	background: url(graphics/headers/profile_head.gif) no-repeat;
	}

#skills_services_head {
	background: url(graphics/headers/skills_services_head.gif) no-repeat;
	}
	
#portfolio_head {
	background: url(graphics/headers/portfolio_head.gif) no-repeat;
	}
	
#gallery_head {
	background: url(graphics/headers/gallery_head.gif) no-repeat;
	}

#links_head {
	background: url(graphics/headers/links_head.gif) no-repeat;
	}

#contact_head {
	background: url(graphics/headers/contact_head.gif) no-repeat;
	}

#accessibility_statement_head {
	background: url(graphics/headers/accessibility_statement_head.gif) no-repeat;
	}

#site_map_head {
	background: url(graphics/headers/site_map_head.gif) no-repeat;
	}

#skr_head {
	background: url(graphics/headers/skr_head.gif) no-repeat;
	}

#soapsudcity_head {
	background: url(graphics/headers/soapsudcity_head.gif) no-repeat;
	}

#surreyfireplaces_head {
	background: url(graphics/headers/surreyfireplaces_head.gif) no-repeat;
	}
	
#joannaandjohn_head {
	background: url(graphics/headers/joannaandjohn_head.gif) no-repeat;
	}

#fdp_head {
	background: url(graphics/headers/fdp_head.gif) no-repeat;
	}

#woodfords_head {
	background: url(graphics/headers/woodfords_head.gif) no-repeat;
	}

#form_submitted_head {
	background: url(graphics/headers/form_submitted_head.gif) no-repeat;
	}

#form_not_submitted_head {
	background: url(graphics/headers/form_not_submitted_head.gif) no-repeat;
	}

#portfolio_sidebar_head {
	background: url(graphics/headers/portfolio_sidebar_head.gif) no-repeat center;
	}

#photography_head {
	background: url(graphics/headers/photography_head.gif) no-repeat center;
	}

#download_cv_head {
	background: url(graphics/headers/download_cv_head.gif) no-repeat center;
	}

/* Links
_______________________________________________________________________________________________*/
a:link, a:visited {
	border-bottom:1px solid;
	color: #663366;
	font-weight: normal;
	text-decoration:none;
	outline:none;
	}
	
a:hover, a:focus, a:active {
	border-bottom-style: dotted;
	color: #663399;
	}
	
a.imglink:link, a.imglink:visited {
	border:none;
	}
	
a.imglink:hover {
	background:transparent;
	}
	
/* Main Navigation
_______________________________________________________________________________________________*/	
#nav_main {
    float:left;
	clear: both;
	width: 100%;
    min-width: 980px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 110%;
    line-height:normal;
    background: url(graphics/nav_main_ul.gif) repeat-x top;
	}

#nav_main ul {
    margin-left: 25px;
	}

#nav_main a {
    display: block;
	color: #111111;
	}

#nav_main li {
    float:left;
    }

#nav_main a {
	position: relative; /*<IE6 Flickering Links Bg Image Fix*/
    display: block;
    padding: 25px 25px 10px 25px;
	border: none;
	font-weight: bold;
	}

#nav_main a:hover {
	color: #000000;
	background: url(graphics/nav_main_hover.gif) no-repeat right top;
	}

#nav_main #current {
    background:url(graphics/tab_right.gif) no-repeat right top;
    }

#nav_main #current a {
    background:url(graphics/tab_left.gif) no-repeat left top;
	color: #FFFFFF;
    }

#nav_main #current a:hover {
	color: #CCCCCC;
    }

/* Accessibility Buttons
_______________________________________________________________________________________________*/

#accessibility_buttons {
	float: right;
	width: auto;
	white-space: nowrap;
	margin-top: 10px;
	margin-right: 20px;
	}

#accessibility_buttons ul {
	}

#accessibility_buttons li {
	float: left;
	}

#accessibility_buttons a {
	border: none;
	margin-right: 1px;
	}

#accessibility_buttons img {
	border: none;
	}

/* Header
_______________________________________________________________________________________________*/


#header {
	float: left;
	height: 150px;
	width: 100%;
	background: url(graphics/header.gif) repeat-x 0 0;
	}
	
#logo {
	position: relative;
	margin: 82px 0px 0px 50px;
	width: 485px;
	height: 50px;
	background: url(graphics/logo.gif) no-repeat;
	}

#logo img {
	position:absolute;
	bottom:0;
	left:0;
	color: #fff;
	}

#logo a, #logo a:hover {
	border: none;
	color: #fff;
	background: transparent;
	width: 50px;
	height: 50px;
	display: block;
	}

/* Main Content Structure
_______________________________________________________________________________________________*/

#content {
	width: 955px;
	}

#main_content {
	float: left;
	}

#main_content_head {
	position: relative;
	float: left;
	clear: both;
	width: 530px;
	height: 85px;
	padding: 0px 60px 0px 60px;
	background: url(graphics/main_content_head.gif) no-repeat top left;
	}

#main_content_middle {
	float: left;
	clear: both;
	width: 530px;
	padding: 20px 60px 30px 60px;
	min-height: 370px;
	height: auto;
	background: url(graphics/main_content_middle.gif) repeat-y;
	}

#main_content_footer {
	float: left;
	clear: both;
	width: 530px;
	padding: 0px 60px 0px 60px;
	height: 75px;
	/*overflow: auto;*/
	background: url(graphics/main_content_footer.gif) repeat-y;
	text-align:center;
	}

/* Main Content Boxes
_______________________________________________________________________________________________*/


/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

#sidebox_large {
	width: 100%;
	}

.sidebox {
	float: left;
	margin: 0 auto;
	width: 50%; 
	background: url(graphics/sbbody_right.gif) no-repeat bottom right;
	font-size: 100%;
	}
	
.boxhead {
	background: url(graphics/sbhead_right.gif) no-repeat top right;
	margin: 0;
	padding: 0px 0px 0px 0px;
	text-align: center;
	color: #FFFFFF;
	}
	
.boxhead h5 {
	background: url(graphics/sbhead_left.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	text-align: center;
	}
	
.boxbody {
	position: relative; /*Fix for IE6 break-up of left side*/
	background: url(graphics/sbbody_left.gif) no-repeat bottom left;
	margin: 0;
	padding: 20px 30px 31px;
	text-align: center;
	}

/* Main Content Style
_______________________________________________________________________________________________*/

#main_content_head h2 {
	padding: 15px 0px 5px 0px;
	}

#main_content_middle p {
	padding: 5px 0px 5px 0px;
	}
	
#main_content_middle h3 {
	padding: 5px 0px 5px 25px;
	}
	
#main_content_middle img {
	border: 1px solid #000;
	}

#nav_sub {
	padding: 8px 0px 0px 0px;
	color: #666666;
	font-size: 80%;
	}

#nav_sub a, #nav_sub a:visited {
	color: #666666;
	border-bottom-style: dotted;
	}

#nav_sub a:hover, #nav_sub a:focus, #nav_sub a:active {
	border-bottom-style: solid;
	color: #666699;
	}

abbr {
	cursor:help;
	}	

.skills {
	float:left;
	width: 50%;
	}

.skills li {
	padding-left: 20px;
	background: url(graphics/tick_icon.gif) no-repeat left center;
	background-position: 0px .25em;
	}

.skills h3 {
	width: 80%;
	}

/* Link Lists
_______________________________________________________________________________________________*/


#links {
	width: 100%;
	}

#links ul {
	}

#links li {
	padding: 5px 0px 5px 20px;
	background: url(graphics/bulls_eye.gif) no-repeat left center;
	border-bottom: 1px dotted #666699;
	}
	
#links li:hover {
	background: #EEEEEE url(graphics/bulls_eye_hover.gif) no-repeat left center;
	}	

#links li a {
	display: block;
	border-bottom: none;
	}
	
#links li a:hover {
	color: #666699;
	}

#links h3 {
	margin-bottom: 0px;
	border-bottom: 3px double #663366;
	}

	
.link_list_left {
	float:left;
	width: 52%;
	}

.link_list_left ul , .link_list_left h3 {
	margin-right: 30px;
	}


.link_list_right {
	float:right;
	width: 48%;
	}

/* Main Content Back Button
_______________________________________________________________________________________________*/

#back {
	clear: both;
	padding-top: 20px;
	text-align:center;
	}

#back a {
	/*font-weight: bold;*/
	border-bottom: none;
	}

#back ul {
	border-top: 3px double #663366;
	background-color: #EEEEEE;
	padding: 5px;
	overflow: auto;
	}

#back li {
	display: inline;
	padding: 0px 30px 0px 30px;
	vertical-align: middle;
	}

#back #previous a {
	padding-left: 15px;
	background: url(graphics/previous.gif) no-repeat left;
	}

#back #previous a:hover {
	background: url(graphics/previous_hover.gif) no-repeat left;
	}	

#back #next a {
	padding-right: 15px;
	background: url(graphics/next.gif) no-repeat right;
	}
	
#back #next a:hover {
	padding-right: 15px;
	background: url(graphics/next_hover.gif) no-repeat right;
	}	
	
/* Gallery
_______________________________________________________________________________________________*/

div#gallery {
	background-color: #000000;
	border: 1px solid #660033;
	overflow:auto;
	padding: 4px 0px 2px 0px;
	margin-top: 8px;
	}

div#gallery ul {
	height: 100%;
	}

div#gallery li {
	float: left;
	padding: 3px 0px 2px 8px;
	margin: 0;
	}

div#gallery li:hover {
	/*background: url(images/photos_background_hover.gif) no-repeat;*/
	}

div#gallery a {
	position: relative;
	display: block;
	border: none;
	margin: 0;
	padding: 0;
	}

div#gallery img {
	border:  1px solid #ffffff;
	}

div#gallery img:hover {
	border: 1px groove #666699;
	}

div#gallery img {
	/*margin: 0px 0px 20px 0px;*/
	}

/* Enquiry Form
_______________________________________________________________________________________________*/


#contact_form {
	margin-left: 5px;
	padding: 0px;
	width: 515px;
	}

input {
	margin: 0;
	padding: 0;
	}

label {
	float: left;
	padding-left: 20px;
	background: url(graphics/arrow_circle.gif) no-repeat left center;
	cursor: pointer;
	}
	
fieldset {
	margin: 0px 0px 5px 0px;
	border: none;
	}

#personal_information input {
	width: 100%;
	}

textarea {
	width: 100%;
	height: 100px;
	}

input:focus, textarea:focus {
	border: 1px solid #666699;
	background: #EEEEEE;
	} 

input#reset {
	background: url(graphics/submit.gif) 0 0 no-repeat;
	float: left;
	width: 80px;
	padding: 8px 0px 9px 0px;
	border: 0;
	cursor:pointer;
	color: #663366;
	text-align:center;
	}

input:hover#reset {
	background: url(graphics/submit_hover.gif) 0 0 no-repeat;
	}

input#submit {
	background: url(graphics/submit.gif) 0 0 no-repeat;
	float: left;
	width: 80px;
	padding: 8px 0px 9px 0px;
	margin-right: 20px;
	border: 0;
	cursor:pointer;
	color: #663366;
	text-align:center;
	}

input:hover#submit {
	background: url(graphics/submit_hover.gif) 0 0 no-repeat;
	}

/* Sub Content Structure (Side Bar)
_______________________________________________________________________________________________*/

#sub_content {
	float: left;
	text-align: center;
	width: 305px;
	}

#sub_content_head {
	float: left;
	clear: both;
	padding: 40px 26px 0px 0px;
	width: 279px;
	height: 45px;
	background: url(graphics/sub_content_head.png) no-repeat top left;
	}

#sub_content_middle {
	float: left;
	clear: both;
	padding: 0px 26px 0px 0px;
	width: 279px;
	background: url(graphics/sub_content_middle.png) repeat-y;
	}

#sub_content_footer {
	float: left;
	clear:both;
	padding-right: 26px;
	width: 279px;
	height: 75px;
	background: url(graphics/sub_content_footer.png) repeat-y;
	}
	
/* Sub Content Style
_______________________________________________________________________________________________*/


#sub_content_middle img {
	border: 3px solid #fff;
	}

#sub_content_middle img a {
	border: none;
	}

#sub_content_middle .word_document {
	float: left;
	width: 90px;
	margin: 5px 0px 0px 31px;
	padding: 100px 0px 0px 0px;
	display: block;
	background: url(graphics/word_download_icon.gif) no-repeat top center;
	
	}

#sub_content_middle .pdf_document {
	float: left;
	width: 90px;
	margin: 5px 0px 0px 32px;
	padding: 100px 0px 0px 0px;
	display: block;
	background: url(graphics/pdf_download_icon.gif) no-repeat top center;
	color: #999999;
	}

#sub_content_middle a {
	color: #999999;
	border: none;
	}

#sub_content_middle a:hover {
	color: #666699;
	text-decoration: underline;
	}

/* Footer
_______________________________________________________________________________________________*/

#footer {
	float: none;
	clear: both;
	width: 100%;
	height: 75px;
	background: url(graphics/footer.png) repeat-x 0 0;
	font-size: 80%;
	text-align: center;
	}

#footer a {
	border-bottom: none;
	}

#vcard {
	float:left;
	width: auto;
	margin-top: 40px;
	margin-left: 20px;
	}



#copyright {
	float: left;
	padding: 40px 0px 0px 225px;
	color: #444444;
	}

#back_to_top {
	float: right;
	width: auto;
	margin-top: 40px;
	margin-right: 20px;
	}

#back_to_top img, #back_to_top a {
	border: none;
	}