/* Set defaults */

*{margin:0px;padding:0px}

html,body{height:100.1%}

body {
	margin-top:0px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#5b5b5b;
	font-size: medium;
}

p,h2,h3{margin-top:0px;margin-bottom:15px}
h2{font-family:Museo, Arial, Helvetica, sans-serif}
h5{font-size:medium}
a:active, a:focus{outline:none}

img{display:block}
img.right{float:right; clear:right; margin: 0px 0px 15px 15px }
img.rightborder{float:right;margin:0px 0px 15px 15px;border:1px solid black}
img.left{float:left; margin: 0px }
.clearboth{clear:both}

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

ul.bulletlist, ol.bulletlist{margin:0px 0px 15px 40px}
dl{margin-bottom:15px}
dt{font-weight:bold;margin:10px 0}
dd{padding-left:30px}



pre{margin-bottom:15px;width:600px;background-color:white;padding:5px;border:2px solid gray;font-size:12px}
pre.scrollbar{overflow-x:scroll}
pre span{color:red;}
code{font-size:medium;margin:0px}
p code{margin:0px}
p.highlight{background-color:#b8b8b8;padding:5px}
p.orange{background-color:#EA9531;padding:5px}
p.battersby{font-family:Battersby,Arial, Helvetica,san-serif;font-size:20pt}
.orange{color:#EA9531}
.web p.highlight{background-color:#EA9531}
h3.divider{border-top:1px solid gray;padding-top:10px}
.entry cite{background-color:#a0a0a0;display:block;text-align:center}
.entry cite.nobg{background:none}


/* Layout divs*/
#outer{
	width:100%;
	margin:0px auto;
	background-repeat: repeat-y;
	background-color:#040405;
	min-width:998px;
	max-width:1290px;
	background-image:   url("images/common/Border_Grad.gif");
	background-position: left top;
}

#container{
	margin: 0px 0px 0px 60px;
	padding:0px 60px 0px 0px;
	background-color:#EEEEEE;
	font-style: normal;
	background-image:   url("images/common/Border_Grad_right.gif");
	background-repeat: repeat-y;
	background-position: right top;
	min-height:100%;
}


 #left_col{width:200px;padding:28px 0px 0px 28px;float:left}
 #nav-menu{width:200px}

		/* Menu styling*/

		#nav-menu ul {list-style-type:none;padding:0px;width:170px}
		
		#nav-menu ul li{position:relative;line-height:0px;z-index:999}/* need z-index for IE6/7 otherwise the child ul displayus underneath in some cases*/
		
		#nav-menu ul li:hover ul{position:absolute;display:block;left:100%;top:0;z-index:10}
		
		#nav-menu ul li a{
		text-decoration:none;
		width:170px;
		display:block;
		text-align:center;
		background: #303030 url("images/buttons/Button_top_exp.gif") repeat-x top left ;
		color:white;
		font-family:Arial, Helvetica, sans-serif;
		font-size:14pt;
		line-height:2em
		}
		
	
		#nav-menu ul ul{display:none;margin:0px;padding:0px;}
		
		body.web #nav-menu ul ul.web, 
		body.blog #nav-menu ul ul.blog, 
		body.photo #nav-menu ul ul.photo,
		body.web #nav-menu ul li:hover ul.web,
		body.blog #nav-menu ul li:hover ul.blog,
		body.photo #nav-menu ul li:hover ul.photo
		{display:block;position:relative;left:0}
		 
		#nav-menu ul ul li a
		{background-image:   url("images/buttons/Button_bottom2.gif");	
		font-size:12pt;
		line-height:1.7em
		}
		
		/*#nav-menu ul ul li a:hover{text-decoration:underline}	*/
		#nav-menu ul a:hover{color:#FFA436}	
		/*#nav-menu ul ul a:hover{color:#FFC641}	*/

		body.home #nav-menu a.home,
		body.consulting #nav-menu a.consulting,
		body.blog #nav-menu a.blog,
		body.web0 #nav-menu a.web,
		body.web1 #nav-menu a.web1,
		body.web2 #nav-menu a.web2,
		body.web3 #nav-menu a.web3,
		body.photo0 #nav-menu a.photo,
		body.photo1 #nav-menu a.photo1,
		body.photo2 #nav-menu a.photo2,
		body.photo3 #nav-menu a.photo3,
		body.photo4 #nav-menu a.photo4,
		body.photo5 #nav-menu a.photo5,
		body.about #nav-menu a.about,
		body.contact #nav-menu a.contact
 		{color:#FFA436}

#header{
	width:100%;
	background-color:#040405;
	background-image:   url("images/common/Header_image5.jpg");
	background-repeat: no-repeat;
	background-position: right center;
}

		#header h1{
			margin:0px 0px 0px 30px;
			font-weight:normal;
			font-size:24pt;
			color:white;
			line-height:3em;
			font-family:Museo,Arial, Helvetica, sans-serif
		}
	
#maintext{margin:0px 15px 0px 230px;padding-top:28px;min-height:400px;}

		#maintext p{margin:0px 15px 15px 0px;}

#footer{
	clear:both;
	border-top:3px double #040405;
	margin-top:20px;
	padding-left:30px;/*to avoid hasLayout issues in IE6 and 7 affecting the para*/
	border-bottom:60px solid #040405;
}

		#footer p {margin:0px; color:gray;line-height:2.5em;width:300px}
		#footer img {margin:5px 30px 5px 0px;float:right;border:none}

/*Home page styling*/
#home_leftcol{width:49%;float:left}
#home_rightcol{width:49%;float:right}
#home_leftcol p, #home_rightcol p{margin:0 0 15px 0}

.home_section{padding:0;margin-bottom:15px;overflow:hidden;height:1%;background:white;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);box-shadow:3px 3px 3px rgba(0,0,0,0.7);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.web .home_section{padding:9px;}
.home_section h2{-moz-border-radius:5px 5px 0 0 ;-webkit-border-radius:5px 5px 0 0 ;border-radius:5px 5px 0 0}
.home_section:hover h2 a{color:#FFA436}
.home_section h2,.home_section h3{font-family:Arial, Helvetica, sans-serif;font-size:14pt;color:white;font-weight:normal;padding:7px 0 7px 8px;background:url("images/buttons/Button_top_exp.gif") repeat-x scroll left top #1E1E1E;}
.home_section h2 a, .home_section h3{color:white;text-decoration:none;display:block}
.home_section a img{border:1px solid #040405}
#maintext .home_section p{margin: 0 15px 10px}
.blog_excerpt h2{margin-bottom:0}
.blog_excerpt p{padding:10px 0;font-style:italic}
.blog_excerpt p a{font-style:normal}
.home_section img.rightnomargin{float:right;margin:0 0 10px 15px;display:inline;}
.home_section h3{margin-bottom:0;background-image:none;background-color:#AAAAAA;border:1px solid #040405;border-bottom:none;color:#040405}
.home_section ul{border:1px solid #040405;list-style-type:none;padding:5px 0;}
.home_section li{padding:5px 10px}
 
/* Slide photo page styling */
body.photo h2{margin-bottom:0px}
body.photo img{border: 2px solid white;}

#lightbox{background-color:white;padding:3px;overflow:auto;display:inline-block}/* inline-block for IE6 only to set hasLayout for the div*/

.imagebox_landscape{width:110px;height:74px;float:left;padding:38px 20px 38px 20px;border:1px solid white;background: white url("images/misc/Slide.png") no-repeat;}/* no-repeat and background color for IE6 box model failure*/
body.photo .imagebox_landscape img{width:108px;height:72px;border: 1px solid #040405}
.imagebox_portrait{width:74px;height:110px;float:left;padding:20px 38px 20px 38px;border:1px solid white;background: white url("images/misc/Slide_Portrait.png") no-repeat;}
body.photo .imagebox_portrait img{width:72px;height:108px;border: 1px solid #040405}

/*Other photo page styling*/
body.photo_fixedwidth #outer{width:1290px}/*don't let these pages collapse*/
.blackbox{background-color:#040405;padding:20px 10px;width:860px;}
.blackbox_top{margin-top:15px}
.blackbox_centre{text-align:center;}
.blackbox_centre img{display:inline}
#bigtree{padding-top:40px;}
#threetrees{padding-bottom:40px}
#stives{padding:40px 10px}
 
/* Slideshow page styling */
body.largeimage {
		
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: white;

}

#largeimage_container{
	width:840px;
	height:540px;
	padding:25px 25px 25px 25px;
	margin:0px auto;
	background-color:#040405;
	background-image:   url("images/common/Photo_Border_Grad.gif");
	background-repeat: repeat-y;
}

#image_leftcolumn{
	float:left;
	width:150px;
	height:540px;
	position:relative;
	background-image:   url("images/misc/header_vertical.png");
	background-position: 5px bottom;
	background-repeat: no-repeat;
}


#imageholder_portrait{width:510px;height:510px;float:left;padding:15px;background:#d3d3d3}
#imageholder_landscape{width:510px;height:425px;float:left;padding:100px 15px 15px 15px;background:#d3d3d3;}	
		#imageholder_landscape img{border: 2px solid white;width:506px;height:337px;}
		#imageholder_portrait img{border: 2px solid white;width:337px;height:506px;margin:0px auto}

#imageholder{float:left;background:#d3d3d3;width:540px;height:540px;}
#imageholder img{display:none;border: 2px solid white;}
#imageholder img.active{display:block}
#imageholder img.landscape{margin:100px 0 0 15px}
#imageholder img.portrait{margin:15px auto 0}		
		
#image_rightcolumn{float:left;width:150px;position:relative}

		#image_rightcolumn p{position:absolute;top:300px;margin:0px 5px 0px 10px;width:140px}
		#image_rightcolumn p.copyright{position:absolute;top:480px;left:32px;margin:0px}
		#image_rightcolumn a.button{
		position:absolute;
		top:509px;
		left:15px;
		text-decoration:none;
		font-size:10pt;
		width:118px;
		border: 1px solid white;
		background: #fff url("images/buttons/Button_form.gif") repeat-x center ;
		color:white;
		height:28px;
		line-height:28px;
		text-align:center;
		}
		
		#image_rightcolumn a.arrow, #image_leftcolumn a.arrow{position:absolute;top:60px;left:62px}
		#image_rightcolumn a.arrow img,#image_leftcolumn a.arrow img{border:none}


#image_leftcolumn img, #image_rightcolumn img{border:1px solid white}
img.thumb_land, img.thumb_landscape {width:108px;height:72px;margin: 130px 0px 0px 21px}
img.thumb_portrait{width:72px;height:108px;margin:112px 0px 0px 39px}

#nojavascript{color:#040405;margin-top:-20px;text-align:center;font-weight:bold;margin-top:-50px}


/* Web design page styling*/
body.web img {border: 1px solid #303030;margin-bottom:15px}

#web_3col{margin-bottom:15px;overflow:auto;width:100%/*height:388px*/}
#web_3col img{border: 1px solid #303030;float:left;margin:0px 5% 0px 0px}

#web_2col{margin-bottom:15px;width:100%;}
#web_2col img{border: 1px solid #303030;display:inline;vertical-align:middle;margin:0px 5% 0px 0px}
#web_2col a{vertical-align:middle}


/* Portfolio page */
.portfolio{padding:0 0 15px 0;margin-bottom:15px;font-size:10pt;border-bottom:1px solid #999999;overflow:auto;height:1%}
.portfolio h3{font-family:Museo, Arial, Helvetica, sans-serif;margin-bottom:10px;font-size:14pt}
.portfolio_images{float:left;width:362px;padding:9px;background:white;position:relative;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);box-shadow:3px 3px 3px rgba(0,0,0,0.7);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.portfolio_window{border:1px solid #444444;height:281px;width:360px;overflow:hidden;position:relative;}
.portfolio_images img{margin-bottom:0;border:none}
.portfolio a{float:none}
.portfolio_desc {margin-left:400px}
.portfolio_desc ul{list-style:none;padding:0;margin:10px 0 0 0}
.portfolio_desc li{background:transparent url(/images/misc/icon_check.gif) no-repeat left center;padding:3px 0 3px 20px;}
.rotator{position:absolute;width:960px;top:0;left:0}
body.web .rotator img{float:left;border:none;margin:0}
.paging{position:absolute;bottom:8px;right:-8px;width:178px;height:47px;z-index:100;text-align:center;background: transparent url(/images/misc/paging_bg.png) no-repeat;display:none;line-height:37px}
.paging a{padding:3px 5px;text-decoration:none;color:#ffffff}
.paging a.active{font-weight:bold;background:#333333;border:1px solid #303030;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
.paging a:hover{font-weight:bold}
.portfolio_last{border-bottom:none}

/*Web design home page*/

#portfolio_cycler{float:right;margin:0 0 15px 15px;height:283px;width:362px;padding:9px;background:white;position:relative;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);box-shadow:3px 3px 3px rgba(0,0,0,0.7);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.portfolio_images{float:left;width:362px;padding:9px;background:white;position:relative;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);box-shadow:3px 3px 3px rgba(0,0,0,0.7);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
#portfolio_cycler img{position:absolute;top:9px;left:9px;z-index:1}
#portfolio_cycler img.active{z-index:3}

/*Amended css for tutorial page*/
.entry #portfolio_cycler{float:none;width:506px;height:337px;margin:0 0 15px 0}

#web_services{background-color:white;overflow:auto;height:1%;padding:10px 20px;margin:0 0 15px 0;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);box-shadow:3px 3px 3px rgba(0,0,0,0.7);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
#web_services_left{float:left;width:48%;list-style-type:none}
#web_services_right{float:right;width:48%;list-style-type:none}
#web_services li{background:url(/images/misc/icon_check.gif) no-repeat left 6px;padding-left:20px}

/* Guide page styling*/

body.web img.grey{margin-bottom:15px;border:2px solid gray}

.blog_3col{margin-bottom:15px;overflow:auto;width:100%/*height:388px*/}
body.photo .blog_3col img{float:left;margin:0px 1% 0px 0px;border: 1px solid #303030;}
body.photo .post h2{margin-bottom:15px}/*override h2 margins for guide pages on photography*/
body.photo .entry img{border:1px solid #303030}

.screenshot_right{float:right;margin:0;padding-left:0}

#linkbox{margin-bottom:15px}
#linkbox h4{margin-bottom:15px}
#linkbox p{margin:0px}

/* Wordpress  - general styling*/
.blog h2{font-size:14pt}
.blog h2.pagetitle{font-size:1.5em}
.blog h2 span{font-weight:normal;font-size:10pt}
input{font-family:Arial, Helvetica, sans-serif}
fieldset{border:none}
.entry img.left{margin:0 15px 15px 0}

ol.commentlist, .entry ul{margin-left:40px;margin-bottom:15px;margin-right:15px}
ol.commentlist li{padding:5px}
#maintext .comment-body p{margin-bottom:0}
.commentmetadata a{text-decoration:none;color:black;cursor:default;font-size:smaller}
.comment-edit-link {display:none}

.comment-author-simon{background-color:#EA9531}/*styling for my comments*/
.comment-author-simon cite{font-style:normal;font-weight:bold}
.comment-author-simon a{text-decoration:none;color:black;cursor:default}

/* added to allow use of wordpress standard styles*/
.alignright{float:right}
.alignleft{float:left}

.post{border-bottom:1px solid #686868;margin-bottom:10px;}
.post h2 a{color:black}

.navigation a, #searchform .button {
	font-size:12pt;
	background: #303030 url("images/buttons/Button_form.gif") repeat-x top center ;
	color:white;
	line-height:24px;
	padding:0 10px;
	text-decoration:none;
	}

.navigation a{padding: 3px 10px 4px 25px;background-position:top left}
.navigation span a {padding: 3px 25px 4px 10px;background-position:top right}

/* Wordpress comment form */

#commentform {border:1px solid black;background-color:#D0D0D0;padding:5px 15px 15px 15px;width:510px}
#commentform ul{list-style-type:none}
#commentform li{margin-bottom:5px}
#commentform textarea {color:gray;border:1px solid black;font-size:12pt;font-family:Arial, Helvetica, sans-serif;width:500px;height:100px;padding:0px 3px;margin-top:5px}
body.contact #commentform textarea{margin-top:0}
#commentform input {border:1px solid black;color:gray;font-size:12pt;display:block;padding:0px 3px;width:260px;}
#commentform img {border:none}
#commentform #captcha {border:1px solid black;}
#commentform #submit{background: #303030 url("images/buttons/Button_form.gif") repeat-x center top ;color:white;width:200px}
body.contact #submitbtn {
	width:130px;
	font-size:12pt;
	background: #303030 url("images/buttons/Button_form.gif") repeat-x center top ;
	color:white;
	line-height:28px;
	padding:0 10px;
	border:none;
	margin-bottom:0;
	display:block;
	text-align:center;
	text-decoration:none;
	}
	
#maintext p.hide input{border:none}

/* sidebar styling */
		
#sidebar{margin-top:15px;width:172px}

#sidebar h2{font-size:12pt;margin-bottom:0;text-align:center}
#sidebar ul {margin:0;padding:0;list-style-type:none;} 
#sidebar img{border:none}

.sidebar_element {margin-bottom:15px}

#searchform{width:auto;min-width:100px}
#searchform input#s{width:162px;border:1px solid black;color:gray;font-size:12pt;padding:0px 3px}
#searchform .button {margin:5px auto 0;display:block;border:none;width:130px;height:28px}

#tagcloud div{background-color:white;padding:5px;width:160px}
#tagcloud a{text-decoration:none;color:black}

/* specific sidebar buttons */
.archive li a, a#rss{
		text-decoration:none;
		width:170px;
		display:block;
		text-align:center;
		background: #303030 url("images/buttons/Button_bottom2.gif") repeat-x top left ;
		color:white;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12pt;
		line-height:1.7em;
		position:relative
		}
		
#sidebar select{width:170px;height:1.5em;color:#686868;text-align:center;font-size:12pt;border:1px solid #686868}
#sidebar option{text-align:center;}
		
img.rss {position:absolute;top:4px;left:130px}

/*Contact page*/
#contact #commentform textarea{margin-top:0}
#contact #commentform img{display:inline;vertical-align:bottom;border:1px solid black}
#contact #commentform a{color:black;text-decoration:none;font-size:10pt;margin-left:10px}
#contact #commentform #reload{border:none}
#captcha_item{position:relative;width:260px;background-color:#040405}
#si_flash{position:absolute;left:236px;bottom:45px}
#reload{position:absolute;left:236px;bottom:15px}

/*Consulting page*/
#sectors{float:right;width:200px;border:1px solid #040405;margin-right:15px;display:inline;margin-left:10px}
#sectors h3{background-color:#040405;color:white;padding:5px 0 5px 10px;margin-bottom:0;font-weight:normal}
#sectors ul{list-style-type:none;padding:5px 10px 5px 10px;background-color:white}
#linkedin{display:inline; border:none;margin-bottom:-4px;margin-left:2px}