/* ========================================================================================
OnBrand.co.uk: Main Layout 
Version:1.0
Author: Raphael Marsh
Email: raphael@onbrand.co.uk
Last Updated: 02 June 2010
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	/*font-family:"Trebuchet MS", Times New Roman, Times, serif;*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:63.3%;
	margin:0;
	padding:0;
	min-width:931px;
	text-align:left;
	line-height:150%;
	background:#0f1418 url(../images/generic/background.jpg) top center repeat-x;
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em; margin:0;
}
h2 {
	font-size: 2.0em; margin:0;
}
h3 {
	font-size: 1.6em; margin:0;
}
img {
	border:none;
}
p { color:#666666; font-size:120%; margin:0; }
p span.red { color:#e80000 !important; }
ul {
	list-style-type:none; margin:0; padding:0;
}
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { text-decoration:none; }
hr {
	float:left; position:absolute; border:0; height:1px;
}
.clear {
	clear: both; text-indent: -9999px;
}

/* Structure 
=========================================================================================== */
div#wrapper {
	width: 931px; margin: auto; text-align: left;
}
#topbar {
	height:20px; width: 871px; margin: auto; text-align:right; padding:7px 30px 3px 30px;
	/*background:url(../images/generic/topbar.png) bottom center no-repeat; margin-bottom:10px;*/
}
#branding {
	height: 92px; width: 931px; margin: auto; text-align: left;
}
#navigation {
	width: 931px; margin: auto; text-align: left;
}
#pageContent {
	width: 931px; margin: auto; text-align:left; padding-bottom:20px;
}
#header {
	height:206px; margin:0 6px; z-index:50; border-bottom:#ffffff 3px solid;
}	
#branding .logo {
	float:left; position:absolute; width:192px; height:65px; margin-top:12px; margin-left:25px; border:0;
	background:url(../images/generic/onbrand.png) top left no-repeat;
}
#branding .strapline p {
	float:left; position:absolute; display:block; margin-top:58px; margin-left:79px; border:0; font-size:120%;
}



/* Homepage
=========================================================================================== */
#banner {
	width:903px; height:279px; margin:auto; padding:14px;
	background:url(../images/generic/home-banner-bg.png) top left no-repeat;
}
#topbar p {
	font-size:110%; color:#999;
}
#intro {
	float:left; position:relative; display:inline; width:468px; height:232px; margin:auto; padding:25px; text-align:left;
	background:url(../images/generic/home-intro-bg.png) top left no-repeat;
}
	#intro h1 {
		font-size:240%; line-height:160%; font-weight:normal; color:#fff; padding-bottom:5px;
	}
	#intro p {
		font-size:130%; line-height:150%; color:#bababa;
	}
#video {
	float:right; position:relative; display:inline; width:385px; height:254px; margin:auto; padding:13px;
	background:url(../images/generic/home-video-bg.png) top left no-repeat; text-align:center;
}
	#video p {
		font-size:130%; padding:11px; font-style:italic;
	}
	
.featurePanel {
	float:left; position:relative; display:inline; width:342px; height:382px; margin:auto; text-align:left;
	background:url(../images/generic/home-feature-bg.png) top left no-repeat;
}
	.featurePanel h2 {
		font-size:150%; line-height:220%; color:#fff; font-weight:bold;
		padding-left:24px; width:342px; height:46px; text-align:left; margin-top:25px;
		background:url(../images/generic/home-feature-title.gif) top left no-repeat;
	}
	
.featurePanel .feature {
	float:left; position:relative; margin-left:24px; width:280px; padding-bottom:10px; margin-bottom:8px;
	background:url(../images/generic/feature-divider.gif) bottom repeat-x;
}
	.featurePanel .feature.last {
		background:none;
	}
	.featurePanel .feature img {
		float:left;
	}
	.featurePanel .feature .content {
		float:right; position:relative; width:180px;
	}
		.featurePanel .feature .content h3 {
			font-size:120%; line-height:150%; color:#333; padding:2px 0;
		}
		.featurePanel .feature .content p {
			font-size:120%; line-height:150%; color:#454344;
		}
			.featurePanel .feature .content p a {
				color:#d11c23; text-decoration:underline;
			}
				.featurePanel .feature .content p a:hover {
					text-decoration:none;
				}


#extraPanel {
	float:left; width:210px; height:354px; margin:auto; text-align:left; padding:14px;
	background:url(../images/generic/home-side-bg.png) top left no-repeat;
}




/* Top Navigation 
=========================================================================================== */
#branding ul {
	float:right; position:relative; margin:35px 6px 0 0; font-size:130%; line-height:130%; list-style:none; color:#8e8a94;
}
	#branding ul li {
		float:left; text-align:center; margin:0 4px; font-size:170%;
		font-family:Arial, Helvetica, sans-serif;
		
	}
		#branding ul li a {
			float:left; color:#ccc; font-weight:normal; text-decoration:none; padding:14px 22px 16px 22px;
			
		}
				#branding ul li a.active {
					/* for IE */
					filter:alpha(opacity=60) !important;
					/* CSS3 standard */
					opacity:0.6 !important;
				}
				
				#branding ul li a:hover, #branding ul li a.active {
					color:#000; background:#fff; overflow:hidden; border:0; display:block; text-decoration:none;
					-moz-background-clip:border;
					-moz-background-inline-policy:continuous;
					-moz-background-origin:padding;
					-moz-border-radius-bottomleft:5px;
					-moz-border-radius-bottomright:5px;
					-moz-border-radius-topleft:5px;
					-moz-border-radius-topright:5px;
					/* for IE */
					filter:alpha(opacity=20);
					/* CSS3 standard */
					opacity:0.2;
				}			


/* Portfolio
=========================================================================================== */
.portfolioHolder {
	width:931px; 
}
.portfolioTop {
	padding:9px; width:913px;
	background:url(../images/portfolio/portfolioTop.png) top no-repeat;
}
.portfolioEnd {
	padding:0 9px; width:913px; height:20px; 
	background:url(../images/portfolio/portfolioEnd.png) bottom no-repeat;
}
.portfolio {
	padding:10px;
}
	.portfolio h2 {
		font-family:Georgia, "Times New Roman", Times, serif; font-size:230%; 
		line-height:140%; font-weight:normal; padding:0 0 8px 12px;
	}
.menuItem {
	float:left; width:278px; margin:15px 9px 0 9px;
}
.menuItem.feature {
	width:418px; margin-bottom:20px; margin-top:0;
}
	.menuItem img {
		border:7px #EEE solid; padding:1px;
		-moz-background-clip:border;
		-moz-background-inline-policy:continuous; -moz-background-origin:padding;
		-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; 
		-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px;
	}
		.menuItem img:hover {
			border:7px #CCC solid;
		}
.menuContent {
	float:left; position:relative; display:block; padding:10px 5px;
}
	.menuContent h3 {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:130%; line-height:140%; text-transform:uppercase;
	}
		.menuContent p {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size:120%; line-height:150%; padding-bottom:5px;
		}
			.menuContent p.category {
				font-family:Arial, Helvetica, sans-serif; border-bottom:1px dotted #999; margin-right:10px;
				font-size:100%; line-height:130%; text-transform:uppercase; margin-bottom:8px;
			}
				.menuContent p.category a {
					color:#d11c23; text-decoration:none;
				}
					.menuContent p.category a:hover {
						text-decoration:underline;
					}

.item-holder {
	float:left; position:relative; height:220px;
}
.item {
	float:left; margin:15px 9px 0 9px; width:262px; height:139px;		
	/* required to hide the image after resized */
	overflow:hidden; margin-bottom:10px;
	/* for child absolute position */
	position:relative;
	/* display div in line */
	border-style:solid; border-width:7px; border-color:#eee;
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous; -moz-background-origin:padding;
	-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; 
	-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px;
}
	.item:hover {
		border-color:#ccc;
	}
.item .caption {
	width:238px; height:139px; background:#000; color:#fff; font-weight:bold;
	/* fix it at the bottom */
	position:absolute; left:0; padding:12px; 
	/* hide it by default */
	display:none;
	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.9;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.9;    /* for really really old safari */
	opacity: 0.9;    /* css standard, currently it works in most modern browsers like firefox,  */
	line-height: normal;
}
.item .caption a {
	text-decoration:none; color:#d11c23; display:block;
}
.item .caption p {
	margin:0; font-size:120%; line-height:140%; font-style: normal; color:#fff;
}
	.item p.category {
		font-size:110%; padding:5px 0; color:#999;
	}

.clear {
	clear:both;	
}
.folioimg {
	/* allow javascript moves the img position*/
	position:absolute; border:0;
}


p.description {
	font-family: Georgia,'Times New Roman',Times,serif; line-height:140%; 
	padding-top:8px; margin:12px; width:270px !important;
}





.searchresult_pagination {
	float:right; position:relative; display:block; padding:3px; background:#eee; width:885px;
	-moz-background-clip:border; -moz-background-inline-policy:continuous;
	-moz-background-origin:padding; -moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px; border: solid 1px #ccc;
}
.pagination {  
	font-size:120%; float:right;
}       
.pagination a {
    text-decoration:none; background:#ececec; border:solid 1px #ccc; color:#666;	
}
	.pagination a, .pagination span {
		float:left; display:block; padding:0.4em 0.6em; margin:0 2px; min-width:1em; text-align:center;
		-moz-background-clip:border; -moz-background-inline-policy:continuous;
		-moz-background-origin:padding; -moz-border-radius-bottomleft:3px;
		-moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px;
		-moz-border-radius-topright:3px;
	}
		.pagination a:hover {
			background:#ccc; color:#fff; border: solid 1px #ccc;
		}
		.pagination .current {
			background:#d11c23; color:#fff; border: solid 1px #8e0005;
		}
			.pagination .current.prev, .pagination .current.next{
				color:#999; border-color:#ccc; background:#fff;
			}
			



.menuItem a {
	display:block; position:relative;
}
	.menuItem a img {
		position:relative; z-index:1;
	}
	.menuItem span {
		display:block; width:278px; position:absolute; z-index:2; top:0px;
	}
		.menuItem span img:hover {
			padding:8px; border:0 !important;
		}







/*#portfolio {
	width:899px; height:560px; background:url(../images/portfolio/portfolio-bg.jpg) bottom left no-repeat;
}*/

#information {
	float:right; display:inline; width:225px; margin:30px 0 20px 0;
}
	#information p {
		font-size:120%; line-height:150%; color:#333333;
	}
		#information p a {
			color:#2692d0 !important;
		}
		#information p.blue {
			color:#2692d0 !important;
		}
		#information p.red {
			color:#a60005 !important;
		}
			#information ul li {
				float:left; padding:5px 2px; border-bottom:1px dotted #666;
			}
				#information ul li p.tab {
					float:left; width:50px; color:#a60005;
				}
				#information ul li p.content {
					float:right; width:140px; color:#333333;
				}
		
		#information #textBox {
			padding:0 10px 25px 2px; margin-bottom:20px; border-bottom:1px dotted #666666;
		}
		.featurePanel #textBox {
			width:325px; height:290px; outline:none; 
		}


/* Scroll Bar Styles
=========================================================================================== */
.scrollgeneric {
	line-height:1px; font-size:1px; position:absolute; background:none; width:11px;
}
.vscrollerbase, .vscrollerbar {
	width:15px; top:0px;
}
.vscrollerbar {
	left:0px; 
}
.hscrollerbase, .hscrollerbar {
	height:15px; left:0px;
}
.hscrollerbar {
	top:0px;
}
.vscrollerbar, .hscrollerbar {
	padding: 5px; z-index: 2; background:#063;
}

.vscrollerbarbeg {
	width:10px; height:auto; cursor:pointer;
	background:url(../images/generic/vscroller2.gif) 0px -9px;
}

.vscrollerbarend {
	width:10px; height:9px;
	background: url(../images/generic/vscroller2.gif);
}
.vscrollerbase {
	width:10px; background:#f0f0f0; float:right; margin-right:-20px;
}
.vscrollerbar {
	padding:0px; background-color:#8F9793;
}


/* Portfolio Tabs
=========================================================================================== */
.shadetabs{
	padding:3px 0; margin:1px 0 0 0; list-style-type:none; text-align:left;
}
	.shadetabs li {
		display:inline; margin:0; font-size:110%;
	}
		.shadetabs li a {
			text-decoration:none; position:relative; z-index:1; padding:3px 7px; background:#ececec;
			margin-right:3px; border:2px solid #CCC; color:#999; outline:none;
			/*background:url(../images/portfolio/shade.gif) top left repeat-x;*/
		}
		.shadetabs li a:hover{
			text-decoration:underline; color:#2d2b2b;
		}
		.shadetabs li a.selected { 
			color:#000;
			position:relative; top:0px;	border-bottom-color:#fff; background:#fff;
			/*background-image:url(../images/portfolio/shadeactive.gif);*/
		}
			.shadetabs li a.selected:hover{ /*selected main tab style */
				text-decoration:none;
			}
.tabcontent {
	display:none;
}


/* Portfolio Scroll Div
=========================================================================================== */
#portfolioScroller {
	float:left; position:relative; display:inline; width:880px; height:143px; margin:auto; padding:17px 25px 15px 26px; text-align:left;
	background:url(../images/portfolio/portfolio-scrollbg.png) top center no-repeat;
}

#portfolioScroller a.prev, #portfolioScroller a.next, #portfolioScroller a.prevPage, #portfolioScroller a.nextPage {
	float:left; display:inline; width:12px; height:77px; margin:15px 0 0 5px; cursor:pointer; font-size:1px;
	background:url(../images/portfolio/left.gif) left center no-repeat;
}
	#portfolioScroller a.prev:hover, #portfolioScroller a.next:hover, #portfolioScroller a.prevPage:hover, #portfolioScroller a.nextPage:hover {
		background-position:-12px 0;		
	}
	#portfolioScroller a.next, #portfolioScroller a.nextPage {
		background:url(../images/portfolio/right.gif) left center no-repeat;
	}
	#portfolioScroller a.prev, #portfolioScroller a.next {
		margin-top:22px;	
	}
	/* Side arrows disable when reach end of scroll */
	#portfolioScroller a.disabled {
		visibility:hidden !important;		
	}

div.projects {
	float:left;	position:relative; overflow:hidden; width:825px; height:116px; padding:5px 5px;
}
	.projects .thumbs {	
		position:absolute; width:20000em; clear:both; margin:3px;
	}
		.projects .thumbs div {
			float:left; cursor:pointer; margin:0 6px 0 6px;
		}
		

	


/* Homepage Anim Banner
=========================================================================================== */
.pics {
	float:left; position:relative; padding:0; overflow:hidden; width:902px; height:280px; display:inline;
	background:url(../images/generic/homeheader-bg.jpg) no-repeat;
}
	.pics p {
		font-size:120%; line-height:130%; color:#b6d9e2; padding-bottom:18px; border-bottom:#638a9e 1px dashed;
	}
		.pics p a {
			color:#b6d9e2; text-decoration:underline;
		}
			.pics p a:hover {
				color:#ffffff; text-decoration:none
			}

	
/* Homepage Anim Banner Navigation
=========================================================================================== */
#nav-holder { 
	float:right; position:relative; display:inline; margin:-43px 7px 0 0; z-index:100;
}
#nav li { 
	float:left;
}
#nav a { 
	color:#325d78; font-size:130%; display:block; padding:7px 12px 9px 12px; text-decoration:none; z-index:0; border:2px solid #c6c6c6;
	background:#dee1e3 url(../images/generic/headerNav-but.gif) no-repeat; margin-left:3px; text-align:center;
}
	#nav a.activeSlide { 
		color:#ffffff !important; border:2px solid #8b9a33;
		background:#a3b24b url(../images/generic/headerNav-roll.gif) no-repeat; 
	}
	#nav a:focus { outline: none; }


.step  {
	width:874px; height:251px; padding:14px;
}
	.step.one  {
		background:url(../images/generic/step01-bg.jpg) top left no-repeat;
	}
		.step.one h2  {
			font-size:10%; width:280px; height:68px; text-indent:-5000px; margin:10px 0 25px 3px;
			background:url(../images/generic/stepone-h2.gif) top left no-repeat;
		}
		.step.one h3  {
			color:#e2c970; font-size:160%; line-height:150%; font-weight:normal; width:320px; margin:0 0 35px 3px;
		}
		
	.step.two  {
		background:url(../images/generic/step02-bg.jpg) top left no-repeat;
	}
		.step.two h2  {
			font-size:10%; width:253px; height:74px; text-indent:-5000px; margin:10px 0 0 3px;
			background:url(../images/generic/steptwo-h2.gif) top left no-repeat;
		}
		.step.two h3  {
			font-size:160%; line-height:150%; font-weight:normal; width:300px; margin:0 0 35px 3px;
		}
		
	.step.three  {
		background:url(../images/generic/step03-bg.jpg) top left no-repeat;
	}
		.step.three h2  {
			font-size:10%; width:338px; height:68px; text-indent:-5000px; margin:10px 0 25px 3px;
			background:url(../images/generic/stepthree-h2.gif) top left no-repeat;
		}
		.step.three h3  {
			font-size:160%; line-height:150%; font-weight:normal; width:300px; margin:0 0 35px 3px;
		}
			


/*
html, body {
	background:#fff;
}
#wrapper {
	width:897px; margin-top:-25px;
}
#masthead, .type, #sitemeta {
	display:none;
}
#main {
	width:600px;
}
#sidebar {
	float:right; width:250px; margin-right:0;
}
#sidebar section {
	padding:10px;
}
#txtSearch {
	width:200px; background:#e6edf3;
}
#likes li img {
	border:0; width:210px;
}
article {
	margin:0 10px; padding: 10px 10px 20px 0;
}
h2 {
	margin-bottom:10px;
}
p, li {
	font-size:17px; line-height:22px;
}
li a {
	line-height:32px;
}
.media object, article .media {
	width:560px;
}
footer {
	border-top: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #fff; padding:5px 0 7px 0;
}
*/

			



	
	
/* Footer
=========================================================================================== */
#footer {
	width:100%; text-align:left;
	background:#1a262f url(../images/generic/footer-bg.jpg) top center no-repeat;
}
#rip {
	width:100%; height:29px; background:url(../images/generic/footer-rip.png) top repeat-x;
}
#footer-content {
	width:931px; margin:auto; height:auto !important; padding:20px 0 20px 0;
}
	#footer-content img.logo {
		position:absolute; margin:-9px auto 0 300px;
	}
#footer-links {
	width:auto; padding-bottom:25px; margin:0; 
}
	#footer-links p {
		color:#8e8a94; font-size:130%; line-height:160%;
	}
.footer-column {
	float:left; width:auto; display:inline; padding-left:10px; height:170px;
}
	.footer-column a {
		color:#889923; text-decoration:none;
		display: block; margin:0; padding:0 0 2px 0;
	}
		.footer-column a:hover {
			color:#ffffff; text-decoration:underline;
		}
	.footer-column ul {
		margin-top:4px; padding:0 0 6px 0px; font-size:130%; line-height:130%; list-style:none; color:#8e8a94;
	}
		.footer-column ul li {
			float:left; width:170px;
		}
			.footer-column ul li a {
				float:left; color:#8e8a94; font-weight:normal; padding:4px 8px 6px 7px; text-decoration:none;
			}
				.footer-column ul li a:hover {
					color:#2692d0; background:#fff; overflow:hidden; border:0; display:block; text-decoration:none;
					-moz-background-clip:border;
					-moz-background-inline-policy:continuous;
					-moz-background-origin:padding;
					-moz-border-radius-bottomleft:3px;
					-moz-border-radius-bottomright:3px;
					-moz-border-radius-topleft:3px;
					-moz-border-radius-topright:3px;
				}
	
	.footer-column.one {
		width:250px;
	}
		.footer-column.one p.flash {
			height:20px;
		}
	.footer-column.two {
		float:left; position:relative; width:140px; margin-left:100px; margin-right:10px;
		background:url(../images/generic/footer-divide.png) top left no-repeat;
	}
	.footer-column.three {
		float:left; position:relative; width:160px;
		background:url(../images/generic/footer-divide.png) top left no-repeat;
	}
	.footer-column.four {
		float:right; position:relative; width:190px;
		background:url(../images/generic/footer-divide.png) top left no-repeat;
	}
		
	
#OBFooter {
	width:100%; background:#000; padding:16px 0;
}
	#OBFooter .inner {
		width:916px; margin:auto; text-align:left;
	}
		#OBFooter .inner p {
			font-size:130%; color:#666;
		}