/* Set defaults */

@font-face {
    font-family: 'Museo';
    src: url('/css/fonts/museosans_500-webfont.eot');
    src: url('/css/fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/museosans_500-webfont.woff') format('woff'),
         url('/css/fonts/museosans_500-webfont.ttf') format('truetype'),
         url('/css/fonts/museosans_500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Rokkitt';
    src: url('/css/fonts/rokkitt-webfont.eot');
    src: url('/css/fonts/rokkitt-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/rokkitt-webfont.woff') format('woff'),
         url('/css/fonts/rokkitt-webfont.ttf') format('truetype'),
         url('/css/fonts/rokkitt-webfont.svg#rokkittregular') format('svg');
    font-weight: normal;
    font-style: normal;

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

html,body{height:100.1%}

body {
	margin-top:0px;
	font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
	background-color:#040405;
	font-size: 16px;
}

p,h2,h3{margin-top:0px;margin-bottom:15px}
h2,h3{font-family:Museo, Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;font-weight:normal}
h5{font-size:medium}
a, a:visited, a b {
	color: #329CC9;
	text-decoration: underline;
	cursor: pointer;
}
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 }
img.leftborder{float:left;margin:0px 15px 15px 0px;border:1px solid black;}
.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{color:#444444;font-family:Consolas,'Lucida Console','Bitstream Vera Sans Mono','DejaVu Sans Mono',monospace;;margin-bottom:15px;width:90%;background-color:white;padding:5px 5px 20px 5px;border:2px solid gray;font-size:14px;overflow-x:auto;overflow-y:hidden}/*extra padding bottom because otherwise in IE the scrollbar goes over the bottom line*/
span.code_highlight{color:red;font-weight:bold}
span.code_comment{color:blue;font-weight:bold}
code{font-size:medium;margin:0px}
p code{margin:0px}
p.orange{background-color:#EA9531;padding:5px;color:inherit}
#maintext p.quote{background-color:#EA9531;padding:10px;color:#FFFFFF;font-size:20px;font-family:Museo;overflow:hidden;margin-right:0;}
p.quote span{font-style:normal;padding:10px 0 0 10px;float:right}
p.quote span.quotes{font-style:italic;font-size:30px}
.red{color:red}
h3.divider{border-top:1px solid gray;padding-top:10px}
.entry cite{background-color:#a0a0a0;display:block;text-align:center}
.displaytable{border-collapse:collapse;margin-bottom:15px}
.displaytable th,.displaytable caption{background-color:#666666;color:white;border:1px solid black;padding:5px;font-weight:bold}
.displaytable td{background-color:white;border:1px solid black;padding:5px}
.displaytable td.pass{background-color:#009900;}
.displaytable td.fail{background-color:#CC0000;}
.displaytable caption{border-bottom:none}
.shadow{-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);}
.roundbox{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

/*changelogs*/
#changelog,#variations{margin-bottom:15px}
#changelog h4,#variations h4{font-weight:normal;padding-bottom:5px}/* padding instead of margin here because IE8 loses the margin after the slideToggle*/
#changelog h4.active,#variations h4.active{font-weight:bold;}
#changelog h4.active a,#variations h4.active a{font-weight:normal;}
#changelog h4 span,#variations h4 span,.detail_header span{font-weight:normal}
#changelog h4 span span,#variations h4 span span, .detail_header span span, .expander h3 span span {cursor:pointer;color:blue;text-decoration:underline}
.changelog_detail{background-color:#F5F5F5;padding:5px;margin-bottom:5px}

/*-webkit-box-shadow:0 0 15px #BDBA61;
 stuff for IE*/
#opencart_cycler,
#cycler,
.entry #portfolio_slider,
.portfolio_images,
#portfolio_cycler,
#endless_slider,
#slider,
#web_services,
.web_ad,
.web_ad h2,
#plugin,
#plugin h3,
.home_section,
#nav-menu li
{behavior:url(/PIE.php);position:relative}

@font-face {
	font-family: Nasa;
	src: url('/css/type/nasalization_free-webfont.eot');
	src: local("?"),url("/css/type/nasalization_free-webfont.ttf") format("opentype"), url('nasalization_free-webfont.svg#webfontRWYgkvwR') format('svg');
	font-weight: normal;
	font-style: normal;
}

p.nasa{font-family:Nasa,Georgia, "Times New Roman", Times, serif}

/* Layout divs*/
#outer{
	width:100%;
	margin:0px auto;
	background-repeat: repeat-y;
	background-color:#040405;
	min-width:992px;
	max-width:1620px;
	background-position: left top;
	height:100%
}

#container{
	background-color:#EEEEEE;
	font-style: normal;
	background-repeat: repeat-y;
	background-position: right top;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px;
}

 #left_col{width:187px;padding:28px 0px 0px 28px;float:left}
 #nav-menu{width:187px;margin-bottom:15px}

		/* 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;
		box-shadow:3px 3px 3px rgba(0, 0, 0, 0.7);
		margin-bottom:10px;
		}/* 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-size:14pt;
		line-height:2em;
		-webkit-transition:color 0.2s linear;  
		-moz-transition:color 0.2s linear;  
		-o-transition:color 0.2s linear;
			}
	
		#nav-menu ul ul{display:none;margin:0px;padding:0px;}
		#nav-menu ul ul li{margin:0px;box-shadow:none}
		
		.web #nav-menu ul ul.web, 
		.photo #nav-menu ul ul.photo,
		.web #nav-menu ul li:hover ul.web,
		.photo #nav-menu ul li:hover ul.photo
		{display:block;position:relative;left:0}
		 
		#nav-menu ul ul a
		{background-image:   url("images/buttons/Button_bottom2.gif");	
		font-size:15px;
		}
		
		#nav-menu ul li a:hover{color:#FFA436}	

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

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

		#header h1{
			margin:0px 0px 0px 30px;
			font-weight:normal;
			font-size:24pt;
			color:white;
			line-height:3em;
			font-family:Museo,Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
			letter-spacing:0.015em
		}
		#header h1 a{color:#fff;text-decoration:none}
		#header h1 a .orange{color:#EA9531}
		#menu-toggle{display:none;position:absolute;right:30px;top:20px;cursor:pointer}
	
#maintext{margin:0px 28px 0px 217px;padding-top:28px;min-height:500px;}

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

#push{height:67px;clear:both}

#footer{
	clear:both;
	background-color:#040405;
	height:60px;
	padding-left:30px;/*to avoid hasLayout issues in IE6 and 7 affecting the para*/
}

		#footer p {margin:0px; color:white;line-height:60px;width:300px}

/*Home page styling*/
#home_leftcol{width:49%;float:left}
#home_rightcol{width:49%;float:right}

.home_section{padding:0;margin-bottom:15px;overflow:hidden;height:1%;background:white;}
.web .home_section{padding:9px;}
.home_section:hover h2 a{color:#FFA436}

.home_section h2 a, .home_section h3{text-decoration:none;display:block;-webkit-transition:color 0.2s linear;  
		-moz-transition:color 0.2s linear;  
		-o-transition:color 0.2s linear;
}
.home_section a img{border:1px solid #040405}
#nojs_blog{font-style:normal}
.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{font-weight:normal;padding:7px 8px;margin-bottom:0;background-image:none;background-color:#AAAAAA;border:1px solid #040405;border-bottom:none;color:#040405}
.web .home_section ul{border:1px solid #040405;list-style-type:none;padding:5px 0;}
.web .home_section li{padding:5px}
.blogimage{margin:0 auto;background-color:white;padding:1px;border:20px solid #040405}

/* Slide photo page styling */
.photo h2{margin-bottom:0px}
.photo img{border: 2px solid white;}

#lightbox{background-color:white;padding:3px;overflow:auto;height:1%}/* 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*/
.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;}
.photo .imagebox_portrait img{width:72px;height:108px;border: 1px solid #040405}

/*Other photo page styling*/
.photo_fixedwidth #outer{width:1400px}/*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 */
.largeimage {
		
	font-size: small;
	color: white;

}

#largeimage_container{
	width:840px;
	height:540px;
	padding:25px 25px 25px 25px;
	margin:0px auto;
	background-color:#040405;
}

#image_leftcolumn{
	float:left;
	width:150px;
	height:540px;
	position:relative;
	background-image:   url("images/misc/header_vertical.png");
	background-position: 15px 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_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*/
.web img {border: 1px solid #303030;margin-bottom:15px}
.web .wp-smiley{border:none}

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

/* Portfolio page */
.portfolio{padding:0 0 15px 0;margin-bottom:15px;font-size:10pt;border-bottom:1px solid #999999;overflow:hidden;height:1%}/*pverflow hidden as auto causes scrollbars generated by Cufon rendering*/
.portfolio h3{font-family:Museo, Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;margin-bottom:10px;font-size:14pt;font-weight:normal}
.portfolio_images{float:left;width:362px;padding:9px;background:white;position:relative;}
.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 7px;padding:3px 0 3px 20px;font-size:15px}
.rotator{position:absolute;width:960px;top:0;left:0}
.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;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;}
.portfolio_images{float:left;width:362px;padding:9px;background:white;position:relative;}
#portfolio_cycler img{position:absolute;top:9px;left:9px;z-index:1;display:none}
#portfolio_cycler img.active{z-index:3;display:block}

/*Opencart help page*/
#opencart_cycler{
    float: none;
    height: 337px;
    margin: 0 0 15px;
    width: 506px;padding:9px;background:white;position:relative;
}
#opencart_cycler div{position:absolute;top:9px;left:9px;z-index:1;display:none;background:white;overflow:hidden}
#opencart_cycler div.active{z-index:3}
#opencart_cycler div p {
    background: none repeat scroll 0 0 #000;
    top	:0;
    color: white;
    right: 0;
    margin: 0;
    padding: 4px 2%;
    position: absolute;
	text-align:right
}

#opencart_cycler img{margin:0}

/*Other web pages*/
.web_screenshots,.student_screenshots{
	overflow:hidden
}
.web_screenshots img, .student_screenshots img{
	float:left;
	margin-right:10px
}
.student_screenshots img{
	max-width:30%;
}


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

#cycler{width:300px;height:200px;margin:0 0 15px 0;padding:9px;background:white;position:relative;}
#cycler div{position:absolute;top:9px;left:9px;z-index:1;background-color:white;width:300px;height:200px;text-align:center}
#cycler div.active{z-index:3}
#cycler p{font-size:1.6em;font-style:italic;font-family:Georgia, "Times New Roman", Times, serif;color:#666666;margin:0 0 10px}

/*Css for slider demo*/
.entry #portfolio_slider{width:508px;height:339px;margin:0 0 15px 0;padding:9px;background:white;}
.entry #portfolio_slider #slider_box{border:1px solid #303030;position:relative;height:337px;width:506px;overflow:hidden}
.entry #portfolio_slider img{position:absolute;border:none;left:506px}
.entry #portfolio_slider img.active{left:0}

/*css for endless slider demo*/
#endless_slider{width:508px;height:339px;margin:0 0 15px 0;padding:9px;background:white;}
#endless_slider #slider_box{border:1px solid #303030;position:relative;height:337px;width:506px;overflow:hidden}
#endless_slider #slider_images{position:absolute;left:0;top:0;z-index:1}
#endless_slider #slider_box img{float:left}
#endless_slider #endless_slider_arrows{position:absolute;z-index:2;width:100%;height:100%;display:none}
#endless_slider_right,#endless_slider_left{position:absolute;cursor:pointer;top:50%;margin-top:-28px}
#endless_slider_left{left:10px;}
#endless_slider_right{right:10px;}
#endless_slider img{border:none}

/*css for image and caption slider demo*/
#slider{position:relative;padding:10px;height:150px;width:760px;margin-bottom:15px;background-color:white}
#slider img,#slider div{display:none}
#slider img.active,#slider #slider_box{display:block;position:absolute;left:10px;top:10px;width:500px;height:150px}
#slider div.active, #slider #caption_box{display:block;position:absolute;left:560px;top:10px;width:170px;height:150px;}
#slider img{position:absolute;border:none}
.caption p{margin-top:0;color:gray}

#slider #slider_box{overflow:hidden}
#slider #slider_images{position:absolute;left:0;top:0;display:block}
#slider_images img{display:block}

#slider #caption_box{overflow:hidden}
#slider #slider_captions{display:block;position:absolute;left:0;top:0}
#slider #slider_captions div{display:block;height:150px}

#web_services{background-color:white;overflow:auto;height:1%;padding:10px 20px;margin:0 0 15px 0;}
#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*/

.greybox{margin-bottom:15px;border:2px solid gray;background-color:white;width:190px;padding:10px}
.entry .greybox ul{margin:0;padding:0 0 0 40px}/*attempt to replicate browser default*/
.greybox #menu1{font-family: 'Times New Roman',Times,serif}
.greybox #menu2{list-style-type:none;font-family: 'Times New Roman',Times,serif}
.greybox #menu3,.greybox #menu4,.greybox #menu5,.greybox #menu6,.greybox #menu7,.greybox #menu8,.greybox #menu9,.greybox #menu10{margin:0;padding:0;list-style-type:none;font-family: 'Times New Roman',Times,serif}
.greybox #menu11,.greybox #menu12,.greybox #menu13,.greybox #menu13a,.greybox #menu14,.greybox #menu15,.greybox #menu16{margin:0;padding:0;list-style-type:none;}
.greybox #menu11 ul,.greybox #menu12 ul,.greybox #menu13 ul,.greybox #menu13a ul,.greybox #menu14 ul,.greybox #menu15 ul,.greybox #menu16 ul{margin:0;padding:0;list-style-type:none;}
.greybox #menu12 ul a,.greybox #menu13 ul a,.greybox #menu13a ul a,.greybox #menu14 ul a,.greybox #menu15 ul a,.greybox #menu16 ul a{border:1px solid #888888;border-bottom: none;font-size:12pt;line-height: 1.6em;color:#303030;background-color:#a5a5a5;background-image:none;}
#menu4 a{text-decoration:none}
#menu5 a{text-decoration:none;border:1px solid #303030}
#menu6 a{text-decoration:none;border:1px solid #303030;width:170px;display:block}
#menu7 a{text-decoration:none;border:1px solid #303030;width:170px;display:block;text-align:center}
#menu8 a{text-decoration:none;border:1px solid #303030;width:170px;display:block;text-align:center;font-size:14pt}
#menu9 a{text-decoration:none;border:1px solid #303030;width:170px;display:block;text-align:center;font-size:14pt;line-height:2em}
#menu10 a{text-decoration:none;border:1px solid #303030;width:170px;display:block;text-align:center;font-size:14pt;line-height:2em;background:url(/images/buttons/Button_top.gif) repeat-x left;}
#menu11 a,#menu12 a,#menu13 a,#menu13a a,#menu14 a,#menu15 a,#menu16 a{text-decoration:none;border:1px solid #303030;width:170px;display:block;text-align:center;font-size:14pt;line-height:2em;background:url(/images/buttons/Button_top.gif) repeat-x left;color:white}
#menu13 ul,#menu13a ul,#menu14 ul,#menu15 ul,#menu16 ul{display:none}
#menu16 li{position:relative}
#menu16 li:hover ul{display:block; position:absolute; left:172px; top:0px;}

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

#linkbox{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:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif}
fieldset{border:none}
.entry img{margin-bottom:15px}
.entry img.left{margin:0 15px 15px 0}
.entry h3.orange span{background-color:#EA9531;color:black;padding:3px}

ol.commentlist, .entry ul{margin-left:40px;margin-bottom:15px;margin-right:15px}
ol.commentlist li{overflow:auto;padding-bottom:1px;background-color:white;margin-bottom:10px;-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;}
ol.commentlist .comment-author{padding:5px 10px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background-color:#CCCCCC}
ol.commentlist .comment-meta{padding:2px 10px;}
ol.commentlist p{padding:0 10px }
ol.commentlist pre{margin:0 10px 5px;background-color:#f5f5f5}
#maintext .comment-body p{margin-bottom:5px}
.commentmetadata a{text-decoration:none;color:#999999;cursor:default;font-size:smaller}
.comment-edit-link {display:none}

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

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

.post,.page{border-bottom:1px solid #686868;margin-bottom:10px;}
.post h2 a,.page h2 a{color:black}
.navigation div{margin-bottom:15px}
.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 .right a{background-position:top right;padding: 3px 25px 4px 10px}
.navigation span a {padding: 3px 25px 4px 10px;background-position:top right}

/* Wordpress comment form */

#respond{margin-bottom:15px}
#commentform {border:1px solid black;background-color:#D0D0D0;padding:5px 15px 15px 15px;max-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, Helmet,Helvetica,Freesans, sans-serif;width:97%;height:100px;padding:0px 3px;margin-top:5px}
.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 #nojs_submit{cursor:pointer;border:none;height:28px;color:white;line-height:28px;width:150px;background:url("/images/buttons/Button_form.gif") repeat-x scroll center top #303030}
#commentform #submit{cursor:pointer;border:none;background: #303030 url("images/buttons/Button_form.gif") repeat-x center top ;color:white;width:200px;height:28px;line-height:28px}
	
.contact label span{color:red;font-size:10pt;font-weight:bold}
.contact #commentform li.alert input,.contact #commentform li.alert textarea{border-color:red}
#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-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}

/*About page*/
.about_wrap{overflow:hidden}

/*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}

/*web ad*/
.web_ad{border:1px solid #CA4502;padding:0;margin-top:15px;width:168px;background:white;}
.web_ad h2{color:white;background:#CA4502 url(/images/misc/web_ad_header.jpg) repeat-x top left;padding:5px 0;text-align:center;font-size:14pt;-moz-border-radius:5px 5px 0 0 ;-webkit-border-radius:5px 5px 0 0 ;border-radius:5px 5px 0 0;margin-bottom:0}
.web_ad p{padding:5px;margin-bottom:5px;text-align:center}
.web_ad input{padding:5px}
.web_ad input:active, .web_ad input:focus{outline:none}

/*plugin*/
#plugin{width:610px;background:white;margin-bottom:15px;overflow:auto;padding-bottom:10px}
#plugin h3{font-weight:normal;color:white;background:url("images/buttons/Button_top_exp.gif") repeat-x scroll left top #1E1E1E;padding:5px 0;text-align:center;font-size:14pt;-moz-border-radius:5px 5px 0 0 ;-webkit-border-radius:5px 5px 0 0 ;border-radius:5px 5px 0 0;margin-bottom:0}
#plugin p{margin:0;}
#plugin img{border:none;}
#plugin_desc{float:left;padding:10px 40px 0;width:440px;text-align:center;font-style:italic}
#plugin_media{float:right;width:60px;padding:10px}

#democontainer{position:relative;z-index:1000}
#democontainer img{display:inline;margin-right:10px}

#arcs{background-color:#D0D0D0;padding:10px;width:580px;overflow:hidden;border:1px solid gray;border-bottom:none}
#arcs fieldset{float:left;width:290px}
#arcs label{display:block}
#arcs #submitbtn{padding:2px 5px}
#rainbow{border:1px solid gray;border-top:none;margin-bottom:30px}

/*debugging jQuery page*/
#post-2782 fieldset{
	margin-bottom:15px;
	padding:15px;
	background-color:#D0d0d0
}
#post-2782 #show_console_access{
	display:none;
}

@media (min-width: 1280px){
	#left_col{width:195px}
	#maintext{margin-left:222px}
}

@media (min-width:1500px){
	#left_col{width:200px}
	#maintext{margin-left:227px}
}

/*new home styling*/
.home_portfolio{
	padding:2%;
	height:260px;
	position:relative
}
.home_slide{
	position:absolute;
	width:96%;
	height:260px;
	z-index:1;
	background:black;
	overflow:hidden
}
.home_slide.active{
	z-index:3
}
#maintext .home_portfolio p{
	color:white;
	margin:2% 0 0 2%;
	font-family:Rokkitt,Arial, Helvetica, sans-serif;
	font-size:35px;
	width:45%;
}
.home_image_holder{
	float:right;
	width:65%;
	height:100%;
	position:relative;
	margin-left:10px
	
}
.home_image_holder img{
	border:2px solid white;
}
.home_image1{right:10px;bottom:10px;position:absolute}
.home_image2{left:20%;bottom:10px;position:absolute;display:none}
.home_image3{left:0;bottom:10px;position:absolute;display:none}

.home_fourth{
	padding:2%;
	width:19.5%;
	float:left;
	margin-right:2%;
	height:13em
}
.home_fourth_nomargin{
	margin-right:0
}
.home_fourth_last{
	margin-right:0;
	float:right
}
.home_fourth h2, #latest_post h2{
	font-family:Rokkitt,Arial, Helvetica, sans-serif;
	background: url("/images/common/bg.png") repeat scroll 0 0 #AAAAAA;
	color:#040405;
	font-size:25px;
	font-weight:normal;
	padding:7px 8px;
}
#latest_post{
	width:96%;
	padding:2%
}

@media (max-width: 950px){
/*hitch up the padding and margins, still two columns*/

	.responsive #outer{
		min-width:320px
	}
	.responsive #header h1{
		margin-left:12px
	}
	.responsive #left_col{
		padding:10px 0 0 10px
	}
	.responsive #maintext{
		margin:0 10px 0 197px;
		padding-top:10px
	}
	.responsive #footer{
		padding-left:12px
	}

}

@media (max-width: 880px){
	.responsive #maintext .home_portfolio p{
		font-size:30px
	}
}
@media (max-width: 800px){
/*Remove the header image as it interferes with text*/
/*Tooglable menu*/
	.responsive #header{
		background-image:none
	}
	.responsive #menu-toggle{
		display:block;
		background-color:#EA9531;
		width:40px;
		top:30px;
		right:10px;
		border:none;
	}
	.responsive #left_col{
		float:none;
		width:100%;
		padding:0;
		display:none;
	}
	.responsive #left_col.toggled-on{
		display:block;
	}
	.responsive #nav-menu,.responsive #nav-menu ul, .responsive #nav-menu a{
		width:100%
	}
	.responsive #nav-menu li{
		margin:0
	}
	.responsive .web_ad{
		width:auto;
		margin:5px
	}
	.responsive #maintext{
		margin:0 10px;
	}

	/*Blog*/
	#sidebar{
		display:none
	}
	
}
@media (max-width: 650px){

	.responsive img{
		max-width:90%
	}
	.responsive .portfolio_images img,.responsive #portfolio_cycler img,.responsive #opencart_cycler img{
		max-width:100%
	}
	.responsive #nav-menu li a{
		line-height:40px;
		font-size: 18px
	}
	/*Home*/
	.responsive .home_image1{max-width:95%}
	.responsive .home_image2,.responsive .home_image3{bottom:-1000px}
	.responsive .home_fourth{width:45%}
	.responsive .home_fourth:nth-child(3){margin-right:0}
	
	/*Web portfolio*/
	.responsive .portfolio_images{
		width:262px;
	}
	.responsive .portfolio_window,	.responsive .portfolio_images img{
		width:260px;
		height:203px;
	}
	.responsive .portfolio_desc {
		margin-left: 300px;
	}
	.responsive .paging{
		display:none
	}
	/*About*/
	.responsive .about_wrap .leftborder{
		float:right;
		margin:0 5px 15px 15px
	}

}
@media (max-width: 560px){
/*Shrink the h1 text to fit*/
	.responsive #header h1{
		font-size:24px	;	
		line-height:1.5em;
		padding:0.75em 0
		
	}
	.responsive #menu-toggle{
		top:18px;
		width:35px;
	}
	/*Home*/
	.responsive .home_slide{
		height:240px;
	}
	.responsive .home_portfolio{
		height:240px
	}
	.responsive #maintext .home_portfolio p{
		font-size:25px
	}
	.responsive #portfolio_cycler,.responsive #opencart_cycler{
		float:none;
		width:300px;
		height:235px;
		margin: 0 auto 15px;
	}
	.responsive #portfolio_cycler img ,.responsive #opencart_cycler img{
		width:300px;
		height:235px;
	}
	
}
@media (max-width: 500px){

	.responsive .displaytable{
		width:100%
	}
	.responsive tbody{
		display:block;
	}
	.responsive .displaytable thead{
		position:absolute;
		left:-999em
	}
	.responsive .displaytable tr{
		display:block;
		border: 1px solid #000; 
		margin-bottom:5px
	
	}
	.responsive .displaytable td:before{ 
		content: attr(data-label);
		position: absolute;
		top: 5px;
		left: 5px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;		
		
	}
	.responsive .displaytable td{
		display:block;
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left:50%;
	}
		
	/*Web portfolio*/
	.responsive .portfolio_images{
		float:none;
		margin:0 auto 15px;
	}
	.responsive .portfolio_desc {
		margin-left: 0;
	}
}
@media (max-width: 450px){
/*Shrink the h1 text to fit*/

	.responsive #header h1 span{
		display:inline-block;
		margin-right:55px;
	}
	.responsive #maintext{
		margin:0 5px;
	}
	/*Home*/
	.responsive .home_image_holder{
		width:100%;
	}
	.responsive .home_image1{
		max-width:58%;
		margin:0 auto;
	}
	.responsive #maintext .home_portfolio p{
		position:absolute;
		margin-right:2%;
		width:96%;
	}
	
	/*Websites*/
	.responsive #portfolio_cycler,.responsive #opencart_cycler{
		width:260px;
		height:203px;
	}
	.responsive #portfolio_cycler img,.responsive #opencart_cycler img{
		width:260px;
		height:203px;
	}
	#web_services_left,#web_services_right{
		float:none;
		width:auto
	}
	/*Resources*/
	#home_leftcol,#home_rightcol{
		float:none;
		width:auto
	}

}
@media (max-width: 360px){
/*Shrink the h1 text to fit*/

}

/*TODO: Amend min-width to 320px*/
/* meta tag*/