/*
	Jennie Routley  
	http://www.jennieroutley.co.uk
	
	Color1: #000
	Color2: #fff

*/


html {
	height: 100%;
}


body {
	background: url(../images/far_background.png);
	font-size: 80%;
	height: 100%;
}

li {
	color: #fff;
}


.corners {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.about_casestudy a {
	color: #666;

}

.about_casestudy a:hover {
	text-decoration: underline;
}

#container {
	height: 100%;
	float: left;
	font-family: 'Lucida Grande', Arial, sans-serif;
}



#sidebar {
	float: left;
	width: 300px;
	background: url(../images/background_left_new2.png) repeat-y;
	height: 100%;
	position: fixed;
	left: 0;
	z-index: 60;
}


#sidebar img {
		margin-right: 14px;
		margin-top: 60px;
		float:right;
		
}

	#sidebar h3 {
		float: right;
		color: #fff;
		margin-right: 26px;
		margin-left: 30px;
		margin-top: 20px;
		text-align: right;
		line-height: 20px;
		font-weight: lighter;
		
	}
	
	#sidebar h3 span {
		color: #d5dd22;
		font-weight: bold;
	}
	
	#sidebar a {
		color: #fff;
		font-weight: lighter;
	}

#content {
	float: left;
	width: 690px;
	margin-left: 330px;
	_margin-left: 0px;
	z-index: 50;
}

#header {
	overflow: hidden;
}

#header .flash_text {
	clear: right;
			text-shadow: 2px 2px 2px #fff;

}

#header img {
	
	left: 319px;
	top: -25px;
	position: absolute;
}

#header ul#topNav {
	float: right;
	margin-top: 15px;
	margin-bottom: 60px;
	color: white;

}

	#header ul#topNav li {
		float: left;
		margin-right:5px;
		
	}
		#header ul#topNav li.selected a {
			background: url(../images/hover_new.png) no-repeat;
			color: #fff;
		}

			
			
		#header ul#topNav li a {
			display: block;
			text-align: center;
			color: #666;
			padding-top: 7.5px;
			padding-bottom: 7.5px;
			position: relative;
			z-index: 20;
			width: 109px;
			height:30px

		}
		
	
		
			
	#header ul#topNav li a:hover {
			background: url(../images/hover_new.png) no-repeat;
			color: #fff;
		}
		
	
		
	#header h3 {
		font-weight: bold;
		font-size: 17px;
		line-height: 20px;
		color: #666;
		margin-left: 150px;
	}
	
	#header p {
		font-size: 13px;
		color: #666;
		line-height: 17px;
		margin-top: 10px;
		margin-left: 150px;

	}
	
	
	
#banner, #box1, #box2 {
	position: relative;
	width: 730px;
	margin-left: -70px;
	margin-top: 48px;
	z-index: 1;
	height: 364px;
	margin-bottom: 100px;
}

	#box1, #box2 {
		background: white;
		height: 240px;
		width: 730px;
		margin-top: 10px;
		margin-bottom: 70px;
		z-index: 1;
	}
	
	#box1 img.bottom, #box2 img.bottom {
		position: relative;
		margin:  0 0 0 50px;
		z-index: 0;
	}
	



	#banner img.main_image {
		margin: 40px 0 0 55px;
		
	}
	
	#banner img.bottom {
		position: relative;
		margin-left: 50px;
		bottom: 53px;
		margin-top: -1.5em;
		z-index: 0;
	}
	

	
	#banner h1 img, #box1 h1 img, #box2 h1 img {
		position: absolute;
		top: -21px;
		right: 0;
		z-index: 1;
		
	}
	
	#box1 h1 img, #box2 h1 img {
		left: 60px;
	}
	
.boxy {
	float: left;
	width: 365px;
	line-height: 16px;
}

.boxy a {
	display: block;
	padding: 25px;
	height: 70px;
	color: #666;
	font-size: 90%;
	background-color: #ffffff;

	
}


/*.boxy a:hover {
	background: #E4EACA;
} */

.boxy a.left {
	padding-left: 50px;
	padding-right: 10px;

}

.boxy a.right {
	padding-left: 20px;
	padding-right: 20px;
}

.boxy img {
	float: left;
	width: 61px;
	padding: 5px 10px 10px;
}

.boxy h5 {
	text-transform: uppercase;
	padding-top: 3px;
	padding-bottom: 6px;
	margin-left: 81px;
}

.boxy p {
	margin-left: 81px;
}

#content span {
	color:  #d5dd22;
}






#subNav {
	/*position: fixed;*/
	position: fixed;
	z-index: 20;
	top: 210px;
	left: 290px;
}

#subNav ul li {
	height: 121px;
	width: 66px;
	margin-bottom: 10px;
}


#subNav ul li a.web {
	background: url(../images/menu_web.png) no-repeat 0 0;
	text-indent: -9999px;
	height: 121px;
	width: 35px;
	display: block;
}

#subNav ul li a.web:hover {
	background: url(../images/menu_web.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}

#subNav ul li.selected a.web {
	background: url(../images/menu_web.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}


#subNav ul li a.print {
	background: url(../images/menu_print.png) no-repeat 0 0;
	text-indent: -9999px;
	height: 121px;
	width: 35px;
	display: block;
}

#subNav ul li a.print:hover {
	background: url(../images/menu_print.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}

#subNav ul li.selected a.print {
	background: url(../images/menu_print.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}


#subNav ul li a.animation {
	background: url(../images/menu_animation.png) no-repeat 0 0;
	text-indent: -9999px;
	height: 121px;
	width: 35px;
	display: block;
}

#subNav ul li a.animation:hover {
	background: url(../images/menu_animation.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}

#subNav ul li.selected a.animation {
	background: url(../images/menu_animation.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}


#subNav ul li a.illo {
	background: url(../images/menu_illo.png) no-repeat 0 0;
	text-indent: -9999px;
	height: 121px;
	width: 35px;
	display: block;
}

#subNav ul li a.illo:hover {
	background: url(../images/menu_illo.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}

#subNav ul li.selected a.illo {
	background: url(../images/menu_illo.png) no-repeat -35px 0;
	text-indent: -9999px;
	height: 121px;
	width: 40px;
	display: block;
}



#main_holder {
	position: relative;
	float: left;
	background: white;
	width: 610px;
	margin-left: -60px;
	margin-top: 48px;
	z-index: 15;
	padding: 20px 20px 20px 100px;
	margin-bottom: 40px;
}


#main_holder h1 {
		position: absolute;
		top: -20px;
		right: 0;
		z-index: 1;
	}
	
		#main_holder .item .textsection {
			overflow: hidden;
		}
		
	
		#main_holder a.textsection {
			position: absolute;
			bottom: 22px;
			right: 0px;
			padding: 12px 10px 12px 10px;
			background: #666;
			z-index: 11;
			width: 580px;
			text-align: right;
			color: #fff;		
		}
			
			#main_holder img.search {
				position: absolute;
				bottom:26px;
				right: 126px;
				z-index: 40;
			}
		
		
			#main_holder a.textsection:hover {
				color: #ccc;
			}
			
	
		
		#main_holder a.url{
			position: absolute;
			top: 0px;
			left: 20px;
			padding: 10px;
			background: #666;
			z-index: 12;
			text-align: right;
			color: #fff;
		
		}
			
		
		
		
		#main_holder .url a span {
			color: #d5dd22;
		}
		
	
	
	#main_holder img.bottom {
		position: relative;
		margin: 228px 0 0 -35px;
		z-index: 0;
	}
	
	#main_holder .item {
		height: 260px;
		position: relative;
		margin-bottom: 30px;
		width: 601px;
	}
	
	
	#main_holder .item .pic_holder {
				width: 601px;
		}
		
		
	#main_holder .pic_holder img.portfolio {
		z-index: 1;
		position: absolute;
		width: 600px;
		border: 1px solid #ccc;

	}
	
	#main_holder .pic_holder img.mono {
		z-index: 10;
		position: absolute;
		width: 600px;
		border: 1px solid #ccc;

	}
		
	
	
	#main_holder img.type {
		position: absolute;
		z-index: 12;
		bottom: 5px;
		left: -15px;
	}
	
	
/* Easy Slider */

#slider {
	position: relative;
	z-index: 1;
	margin-left: 30px;
}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:703px;
		height:364px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1.5em 0;
		padding:0;
		height:28px;
		float: right;
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #fff;
		background:#666;
		color:#fff;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#d5dd22;
		color:#666;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* CASE STUDY PAGES */


/* style to move left padding in a bit for case study pages */
#main_pic {
	margin-top: 30px;
}

#main_pic {
	position: relative;
	width: 600px;
	float: left;
	z-index: 10;
}

.flash_holder {
	background: #ededed;
	overflow: hidden;
	margin-bottom: 20px;
}	



#tasks {
	float: left;
	padding-top: 30px;
	z-index: 2;
}

#tasks ul {
	position: absolute;
	left: 0px;
}

#tasks ul li {
	color: #fff;
	width: 140px;
	padding: 10px 10px 10px 38px;
	margin-bottom: 10px;
	text-align: left;
	background: #666 url(../images/accept.png) no-repeat 7px 5px;
}
	
	
#info {
	position: relative;
	float: right;
	width: 190px;
	margin-top: 30px;
}


	#info h2 {
		text-transform: uppercase;
		color: #666;
		font-size: 1.4em;
		padding-top: 40px;
		line-height: 1.2em;
		font-weight: normal;
		margin-bottom: 20px;
		
	}
	
	#info h3 {
		color: #999;
		line-height: 1.2em;
		font-weight: normal;

	}
	
	#info h4 {
		padding-top: 20px;
	}
	
	#main_holder #info p {
		padding-top: 20px;
		line-height: 1.4em;
		color: #666;
		font-size: 90%;
	}
	
	#info .btns {
		padding: 0 0 30px 80px;
		
	}
	
	.btns a.prev {
		float: left;
		background: url(../images/prev_btn.jpg) no-repeat 0px -46px;
		text-indent: -9999px;
		height: 46px;
		width: 50px;
		display: block;
	}
	
	
	.btns a.prev:hover {
		background: url(../images/prev_btn.jpg) no-repeat 0 0px;
		text-indent: -9999px;
		height: 46px;
		width: 50px;
		display: block;
	}
	
		.btns a.next {
		float: left;
		background: url(../images/next_btn.jpg) no-repeat 0px 0px;
		text-indent: -9999px;
		height: 46px;
		width: 50px;
		display: block;
	}
	
	
	.btns a.next:hover {
		background: url(../images/next_btn.jpg) no-repeat 0 -46px;
		text-indent: -9999px;
		height: 46px;
		width: 50px;
		display: block;
	}
	
	
/* ABOUT PAGE */
body#about #main_holder {
	padding-left: 60px;
	width: 650px;
}

#internal_content {
	float: left;
}

#internal_content a {
	color: #333;
	font-weight: bold;
	font-style: italic;	
}

#internal_content a:hover {
	color:  #A6C44C;
 
}

#internal_content h4 {
	font-size: 24px;
	line-height: 36px;
	color: #666;
	font-weight: lighter;
	margin: 72px 0 10px 0;
}

.aboutMe #internal_content h4 {
	margin: 22px 0 10px 0;
}
#internal_content h5 {
	font-size: 12px;
	color: #666;
	line-height: 14px;
	font-weight: normal;
	margin: 10px 0;
	float: left;
	width: 240px;
}

	#internal_content h5 span {
		font-size: 16px;
	}
	
	#internal_content p.strip  {
		font-size: 14px;
		border-bottom: 1px solid #D5DD22;
		color: #666;
		clear: both;	
	}
	
	#internal_content img.profilePic {
		margin: 20px 20px 40px 20px;
		float: left;
		width: 263px;
	}
	
	
	.blockText {
		float: left;
		width: 300px;
		padding: 30px 0 20px 20px;
			
	}
	
		.wide {
			width: 468px;
			padding-top: 10px;
			padding-left: 20px;
			margin-left: 10px;
			border-left: 2px solid #ededed;
			margin-top: 10px;
		}
		
		.leftColumn {
			float: left;
			width: 130px;
		}
		
		.leftColumn img.icon {
			margin-left: 60px;
			margin-top: 20px;
			height: 60px;
		}
		
		.leftColumn img.pictureIcon {
			margin-left: 40px;
		}
			
			#internal_content .leftColumn ul {
				margin-top: 60px;
			}
			
			#internal_content .leftColumn h5 {
				font-size: 0.9em;
				margin-top: 20px;
				font-weight: bold;
				color: #fff;
				padding: 8px;
				background: #999;
				width: 110px;
				-moz-border-radius-topright: 5px;
				-moz-border-radius-bottomright: 5px;
				-webkit-border-top-right-radius:5px; 
				-webkit-border-bottom-right-radius:5px; 
				padding-left: 70px;
				margin-left: -70px;
			}
			
		
			#internal_content .leftColumn ul li a {
				display: block;
				text-align: left;
				color: #666;
				padding-top: 5px;
				padding-bottom: 5px;
				padding-left: 20px;
				position: relative;
				margin-left: -10px;
				z-index: 20;
				width: 119px;
				height:20px;
				font-size: 0.9em;
				font-style: normal;
				font-weight: normal;
				background: url(../images/arrow.png) no-repeat 0px 3px;

			}
			
				#internal_content .leftColumn ul li a:hover {
					color: #A6C44C;

				}
				
				#internal_content .leftColumn ul li.selected a {
					color: #A6C44C;

				}
	
		#internal_content p {
			margin-bottom: 10px;
			color: #666;
			font-size: 0.87em;
			line-height: 1.6em;
			clear: both;
				
		}
		
	.process_text {
		float: left;
		width: 360px;
		margin: 10px 0 10px 20px;
	}
	
	.process_section {
		margin: 0 0 10px 0;
		float: left;
		padding: 15px;
		background: #F9F6EF;
	}


h2.caseStudy_title {
	font-size: 24px;
	color: #D5DD22;
	font-weight: normal;
	text-transform: uppercase;
	padding-bottom: 10px;
	border-bottom: 1px solid #ededed;
}

.caseStudy_details {
	width: 600px;
	float: left;
	margin-top: 30px;
}

.caseStudy_details .btns {
	position: absolute;
	top: 32px;
	right: 30px;
}
.about_casestudy {
	float: left;
	width: 350px;
	color: #666;
	margin-top: 10px;
}

	.about_casestudy h3, .wedid h3 {
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.about_casestudy h4 {
		margin-top: 15px;
		
	}
	
	.about_casestudy p {
		font-size: 90%;
		line-height: 1.6em;	
	}
	
.wedid {
	float: left;
	width: 200px;
	margin-left: 50px;
	color: #666;
	margin-top: 10px;
}

.services {
	width: 220px;
	margin-left: 0;
	margin-bottom: 20px;
	
}

	.wedid ul li {
		color: #666;
		font-size: 90%;
		line-height: 1.6em;	
		background: url(../images/accept.png) no-repeat 0 0;
		height: 32px;
		padding-left: 35px;
		line-height: 25px;

	}

	.services ul li {
		font-size: 0.85em;
	}
	.wedid ul.secondColumn {
		margin-top: 35px;
	}

	img.shadow {
		margin-left: -25px;
		
	}
	
	img.sticker {
		position: absolute;
		top: 15px;
		right: 20px;
	}
	
#sidebar #award img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 500;
	margin-top: 0;
}


.logopackage {
	width: 450px;
}

#content span.alert {
	display: block;
	background: #A6C44C;
	color: #fff;
	padding: 10px;
	margin-top: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px; 
	border-radius: 5px;
	}