/****************************************
** Theme Name: LINE Website
** Theme URI: http://www.website-dev.line.co.uk
** Description: LINE Website, originally based on the fluid blue theme (http://srinig.com/wordpress/themes/fluid-blue/).
** Version: v0.1
** Author: Zaki Setra
**/

/****************************************
**
** global RESET for CSS for all HTML(*) 
** in all templates. This should allow
** for easier cross browser implementation.
**/
*{
	vertical-align: 		baseline;
	font-weight: 			inherit;
	font-family: 			inherit;
	font-style: 			inherit;
	font-size: 				1.0em;
	line-height: 			1.6em;
	border: 				0 none;
	outline: 				0;
	padding: 				0;
	margin: 				0;
}

/****************************************
**
** Common CSS, applicable for all the 
** templates.
**/
body{
	font:					normal 0.9em arial,sans-serif,verdana;
	color:					#333333; /*just off black(#000000)*/
	border: 				none;	
}

a{
	color:					#333333; /*just off black(#000000)*/
	text-decoration:		underline;
}
a:hover {
	color:					#DB353A; /*LINE brand red*/
}
h1{
	font-size:					2.0em;
	font-weight:				normal;
}

h1.xl{
	font-size:					3.2em;
	font-weight:				normal;
	margin: 					0px 0px 15px 0px;
	line-height:				1.0em;
}
h1.posttitle{
	font-size:					2.8em;
	font-weight:				normal;
	line-height:				1.2em;
	margin: 					0px 0px 15px 0px;
}
h1.posttitle_alternative{
	font-size:					2.8em;
	font-weight:				normal;
	line-height:				1.2em;
	margin: 					0px 0px 15px 0px;
}
h2{
	font-size:					1.3em;
	font-weight:				bold;
	margin: 					0px 0px 10px 0px;
}
h2.xl{
	font-size:					1.5em;
	font-weight:				bold;
	margin: 					0px 0px 10px 0px;
}
#sidebar h3{
	font-size:					1.2em;
	font-weight:				bold;
	margin: 					0px 0px 5px 0px;
	border-bottom:				dotted 1px #DB353A;			
}

h3, h4{
	font-weight:				bold;
}

.red{
	color:						#DB353A;
}

.xs{
	font-size:					0.7em;
}

input, form select{
	/*border:						dotted 1px #cccccc;*/
}
#filter_sector, #filter_industry, #filter_client, #filter_type, #author, #email, #url, #comment {
	border:						dotted 1px #cccccc;
}

strong, b{
	font-weight:				bold;
}

/****************************************
**
** Header style, includes the flash
** banner on the first page & below 
** the buttons on all other pages.
**/
#header{
	position:					relative;
	top:						0px;
	left:						0px;
	padding:					0px;
	margin:						0px;
	width:						100%;
	z-index:					99;
}

/*no underlines for navigation links*/
#header a{
	text-decoration:			none;
}
#header_top{
	position:					relative;
	top:						0px;
	left:						0px;
	padding:					0px;
	margin:						0px;
	width:						100%;
	height:						2px; /*essentially a  2px border @ the top of the page */
	background-color:			#DB353A; /*LINE brand red*/ 
}
#header_center{
	position:					relative;
	clear:						both;
	left:						0px;
	padding:					0px;
	margin:						0px;
	width:						100%;
	text-align:					left;
	height:						76px;
	background-color:			transparent;
	z-index:					99 /*making sure it sits @ the top of the page*/; 
}

/* Create and inner DIV that can be centered */
#header_center_inner{
	position:					relative;
	width:						974px; /*dimentions taken from screen shot*/
	margin:						0px auto 0px auto;
}
/* Now create two DIV's within the header_center that sit side by side*/
#header_center_left, #header_center_right{
	float:						left;
}

/* heder_center_left contains the LINE logo @ the dimentions of 671px by 76px.*/

#header_center_right_top_left, #header_center_right_top_right{
	position:					relative;
	top:						8px;
	font-size:					0.75em;
	font-weight:				bold;
	vertical-align:				center;
	float:						left;
	height:						20px;
}

#header_center_right_top_left{
	position:					relative;
	top:						12px;
}

#header_center_right_top_left a.current_language{
	color:						#DB353A;
}

#header_center_right_top_right{
	float:					right;
}

#header_center_right_top_right img{
	position:					relative;
	top:						4px;
}

/* Add the Icon for the JOBS */ 
#header_center_right_top_right #jobs{
	margin:						0px 0px 0px 5px;	
}

/* Add the Icon for the CONTACT */ 
#header_center_right_top_right #contact{
	margin:						0px 0px 0px 5px;	
}

/* The look and feel for the search box */
#header_center_right_bottom .searchBox{
	position:					relative;
	clear:						both;
	height:						26px;
	width:						299px;
	background:					transparent url('images/search_bg.gif') 0px 0px no-repeat;
	text-align:					left;
	top:						18px;
	font-size:					1.1em;
}
/* The look and feel for the text within search box */
#header_center_right_bottom .searchBox #s{
	position:					relative;
	top:						3px;
	left:						5px;
	height:						20px;
	width:						268px;
	background-color:			transparent;
	line-height:				1.0em;
} 
/* Start of CSS for the... > header_bottom which includes the navigational controls */
#header_bottom {
	text-align:					left;
	z-index:					10 /* Make sure this DIV sits underneathe the search box*/;
	background-color:			#000000;
	height:						30px;
	clear:						both;
	font-size:					1.2em;
}

/* Create and inner DIV that can be centered */
#header_bottom_inner {
	position:					relative;
	width:						974px; /*dimentions taken from screen shot*/
	margin:						0px auto 0px auto;
	z-index:					99;
}
/* Skin the default state of the navigation bar */
#header_bottom #navigation{
	position:					relative;
	clear:						both;
	left:						0px;
	width:						100%;
	height:						30px;
	background-color:			#000000;
	line-height:				1.0em;
	z-index:					99;
}

/* Skin the default state of the navigation bar's li */
#header_bottom #navigation li{
	float:						left;
	list-style-type: 			none;
	width:						160px;
	border-right:				solid 2px #FFFFFF;
	
}
#header_bottom #navigation li.top_level{
	height:						30px;
}

/* Skin the default state of the navigation bar */
#header_bottom #navigation li a{
	display:					block;
	color:						#FFFFFF;
	height:						100%;
	text-align:					center;
}

#header_bottom #navigation li a span{
	line-height: 				1.0em;
}








#header_bottom #navigation li ul {
	display:					none;
}
#header_bottom #navigation li:hover ul {
	display:					block;
	border-bottom:				solid 2px #DB353A;
}
#header_bottom #navigation li ul li {
	top: 						0;
	left: 						149px;	
	font-size:					0.85em;
	background-color:			#ffffff;
	width:						156px;
	border-right:				solid 2px #DB353A;
	border-left:				solid 2px #DB353A;
}

#header_bottom #navigation li ul li a {
	display:					block;
	color:						#FFFFFF;
	height:						100%;
	text-align:					left;
	color:						#000000;
	border-bottom:				dotted 1px #DB353A;
	padding:					3px 10px 3px 10px;
}

#header_bottom #navigation li ul li.page-item-718 a,
#header_bottom #navigation li ul li.page-item-40 a,
#header_bottom #navigation li ul li.page-item-2060 a,
#header_bottom #navigation li ul li.page-item-856 a,
#header_bottom #navigation li ul li.page-item-642 a {
	border-bottom:				solid 2px #DB353A;
}






/* Give the home button an extra border to start the block(page-item-647 = home page) */
#header_bottom #navigation #home{
	border-left:				solid 2px #FFFFFF;
}

/* Skin the hover/current state of the navigation bar */
#header_bottom #navigation li a:hover,
#header_bottom #navigation .current_page_item,
#header_bottom #navigation .current_page_parent,
#header_bottom #navigation .current_page_ancestor{
	color:						#FFFFFF;
	background-color:			#DB353A /* The LINE branded RED */; 
}

#header_bottom #navigation li ul li.current_page_item a {
	color:						#FFFFFF;
}

/* Tweek the position of the text */
#header_bottom #navigation span{
	position:					relative;
	top:						6px;
}
/* The look and feel for banner area*/
#header_banner {
	text-align:					left;
	z-index:					10 /* Make sure this DIV sits underneathe the search box*/;
	background-color:			transparent;
	clear:						both;
	z-index:					97;
}

/* Create and inner DIV that can be centered */
#header_banner_inner {
	position:					relative;
	width:						974px; /*dimentions taken from screen shot*/
	margin:						2px auto 0px auto;
}


/****************************************
**
** Content style, everything between the
** header and the footer.
**/
#wrapper {
	position:					relative;
	width:						974px; /*dimentions taken from screen shot*/
	margin:						2px auto 0px auto;
	font-size:					1.1em;
}

#content{
	float:						left;
	width:						700px;
	margin:						20px 0px 20px 0px;
}

#content_full, #content_homepage{
	float:						left;
	width:						100%;
	margin:						20px 0px 0px 0px;
}

#content_alternative{
	float:						left;
	width:						460px;
	margin:						20px 0px 20px 0px;
	padding:					0px 36px 0px 36px;

}

/****************************************
**
** Footer style, includes the copyright 
** statement and the follow us links.
**/
#footer{
	position:					relative;
	clear:						both;
	left:						0px;
	padding:					0px;
	width:						100%;
	top:						6px;
}

/* Start of CSS for the... > footer_top which includes the top dropshadow border */
#footer_top{
	position:					relative;
	top:						0px;
	left:						0px;
	width:						100%;
	height:						7px;
	background:					transparent url('images/footer_dropshadow_top.gif') 0px 0px repeat-x;
}

/* Start of CSS for the... > footer_center which includes copyright decleration etc...*/
#footer_center{
	position:					relative;
	width:						974px /* Dimentions taken from screen shot */;
	margin:						5px auto 0px auto;
}

/* Allow the three divs to sit side by side*/
#footer_center_left{
	float:						left;
	width:						430px;
	text-align:					left;
	font-size:					0.7em;
	margin-top:					12px;
}
#footer_center_center{
	float:						left;
	width:						325px;
	text-align:					center;
	margin-top:					5px;
}
#footer_center_right{
	float:						left;
	width:						217px;
	text-align:					right;
	margin-top:					5px;
}

#footer_center_spacer{
	float:						left;
	height:						40px;
	width:						1px;
	background:					transparent url('images/footer_spacer.gif') no-repeat;
}

#footer_center img{
	position:					relative;
	top:						4px;
	margin-left:				2px;
}


/****************************************
**
** Wordpress Specific CSS
**/
.alignleft {
   float: 						left;
   margin: 						5px 5px 5px 5px;
}

.alignright {
   float: 						right;
   margin: 						5px 5px 5px 5px;
}

.post_details  {
	margin-bottom:				10px;
	clear:						both;
}

.post_details span {
	background-color:			#333333;
	color:						#ffffff;
	padding:					0px 4px 1px 4px;
	font-size:					0.7em;
}

.post_details span a {
	color:						#ffffff;
}

.post_details span a:hover {
	color:						#DB353A;
}

.post_title {
	font-size:					1.8em;
	font-weight:				normal;
	margin-bottom:				10px;
}

.post_title_news {
	font-size:					1.7em;
	font-weight:				normal;
	margin-bottom:				10px;
}

.post_title p {
	line-height:				1.2em;
}

.postentry{
	font-weight:				normal;
	margin-bottom:				40px;
}

#post-325 .postentry{
	margin-bottom:				0px;
}

.postentry p, .postentry ul, .postentry object, .postentry img.banner {
	margin-bottom:				20px;
}

.postentry ul{
	margin-left:				40px;
}

.read_more{
	font-size:					0.9em;
}

.post_post_details{
	margin-bottom:				1px;
}
.post_content  {
	margin-bottom:				10px;
}

.post_content img  {
	margin:						10px 10px 10px 0px;
}
.post_post_details span {
	font-size:					0.7em;

}
.seperator{
	position:					relative;
	display:					block;
	width:						100%;
	border-top:					dotted 1px #cccccc;
	clear:						both;
	top:						27px;
	height:						27px;
}


/****************************************
**
** Sidebar style , both let and right columns
**/
#sidebar{
	float:						left;
	width:						219px;
	margin:						30px 0px 20px 0px;
}
#sidebar.sidebar_default{
	position:					relative;
	left:						55px;
}
#sidebar .widget{
	margin: 					0px 0px 20px 0px;
}
#sidebar ul{
	margin: 					0px 0px 0px 10px;
	list-style:					none;

}
#sidebar li{
	font-size:					0.9em;
	margin: 					0px 0px 0px 0px;
}
.sidebar_left h3{
	font-size:					1.2em;
	font-weight:				bold;
	margin: 					0px 10px 5px 0px;
	border-bottom:				dotted 1px #DB353A;			
}
.sidebar_left ul{
	margin: 					0px 10px 0px 0px;
}
#sidebar li.rss{
	background:					transparent url('images/icon_rss.gif') 0px 5px no-repeat;
}
#sidebar li.rss a{
	margin: 					0px 0px 0px 20px;
}
#sidebar li.cat-post-item{
	margin: 					0px 0px 10px 0px;
}

#sidebar ul div ul li ul li.page_item{
	margin: 					0px 0px 10px 0px;
}

#sidebar ul div ul li.page_item a{
	color:				black;
}
#sidebar ul div ul li.page_item a:hover{
	color:				#DB353A;
}
#sidebar ul div ul li.current_page_item a{
	color:				#DB353A;
}
#sidebar ul div ul li.current_page_ancestor a{
	color:				#DB353A;
}

/*Level 1*/
#sidebar ul div ul li ul{
	position:				relative;
	margin:					5px 0px 5px 5px;
	padding:				0px 0px 0px 20px;
	border-left:			dotted 1px #CCCCCC;
}
#sidebar ul div ul li ul li.page_item a{
	color:				black;
}
#sidebar ul div ul li ul li.current_page_item a{
	color:				#DB353A;
}
#sidebar ul div ul li ul li.current_page_ancestor a{
	color:				#DB353A;
}

/*Level 2*/
#sidebar ul div ul li ul li ul{
	position:				relative;
	margin:					5px 0px 5px 5px;
	padding:				0px 0px 0px 20px;
	border-left:			dotted 1px #CCCCCC;
}
#sidebar ul div ul li ul li ul li.page_item a{
	color:				black;
}
#sidebar ul div ul li ul li ul li.current_page_item a{
	color:				#DB353A;
}


/****************************************
**
** Homepage style includes main graphic and 
** body text
**/
#welcome_posts{
	position:					relative;
	width:						637px;
	float:						left;
	margin: 					0px 37px 0px 0px;
	/* height:						398px; */
}
/*main image on home page*/
.wp-image-852{
	position:					relative;
	top:						12px;
	margin: 					15px 0px 0px 37px;				
}

#latest_posts{
	width:						300px;
	float:						left;
	position:					relative;
	top:						6px;
}

#latest_posts_title{
	margin:						12px 0px 12px 0px;
}
#latest_posts_title img{
	position:					relative;
	top:						-4px;
}

#latest_posts_inner{
	border:						dotted 1px #cccccc;	
	height:						405px;
	padding:					0px 20px 0px 20px;
}
#latest_posts_inner a{	
	position:					relative;
	top:						5px;	
	font-size:					0.85em;
}

#post_details_outer{
	clear:						both;
	
}

#latest_posts .post_details{
	margin-bottom:				6px;
}

#latest_posts .post_details span{
	background-color:			#333333;
	color:						#ffffff;
	padding:					1px 4px 1px 4px;
	font-size:					0.7em;
	line-height:				1.0em;
}
#sectors{
	position:					relative;
	clear:						both;
	width:						100%;
	border-top:					dotted 1px #cccccc;
	top:						15px;
}
#sectors a{
	font-size:					0.85em;
}
#sectors a img{
	position:					relative;
	margin: 					0px 0px 3px 0px;
}
#defence_sector, #public_sector, #corporate_sector{
	margin:						17px 0px 0px 0px;
	width:						300px;
	float:						left;
}
#public_sector, #corporate_sector{
	margin-left:				37px;
}


/****************************************
**
** Page Titles to hide
**/
#post-718 .posttitle, #post-14 .posttitle, #post-637 .posttitle, #post-634 .posttitle, #post-642 .posttitle{
		display:				none;
}

/****************************************
**
** Other Content to hide e.g. comments...
**/
ol.commentlist{
	list-style:					none;
	position:					relative;
}
#comment{
	position:					relative;
	width:						100%;
	margin-top:					5px;
}


.vcard{
	color:						#666666;
	margin-bottom:				5px;
}	

#avatar_image{
	position:					relative;
	float:						right;
	width:						100%;
	border-bottom:				dotted 1px #cccccc;
	margin-bottom:				10px;
	top:						-10px;
}
#avatar_image img{
	position:					relative;
	float:						right;
}

.your-comment-name input, .your-comment-email input, .your-comment-url input{
	width:						60%;
	position:					relative;
	padding:					2px 5px 2px 5px;
	border:						dotted 1px #cccccc;
}
.your-comment-name, .your-comment-email, .your-comment-url{
	position:					relative;
	padding:					2px 0px 0px 0px;
}

.your-comment-name-label, .your-comment-email-label, .your-comment-url-label{
	position:					relative;
	width:						100px;
}

#comments-form{
		position:					relative;
		margin-top:						10px;
}




/****************************************
**
** look and feel for gallery...
**/
#filters{
	margin-bottom:				10px;
}

#filters h4{
	display: 					block;
	margin-right:				10px;
}

#filters form{
	display: 					inline;
	float:						left;
	margin-right:				5px;
}

#filters form #sector, #filters form #industry{
	width:						140px;
	font-size:					0.75em;
	height:						22px;
}

#filters form #client, #filters form #type{

	font-size:					0.75em;
	height:						22px;
}

/* Skin the default state of the navigation bar's li */
#filters #reset_button{
	float:						left;
}

#filters li{
	list-style-type: 			none;
	height:						22px;
	width:						113px;
	background-color:			#000000;
}

/* Skin the default state of the navigation bar */
#filters li a{
	display:					block;
	color:						#FFFFFF;
	height:						100%;
	text-align:					center;
	text-decoration:			none;
	font-size:					0.8em;
}

#filters li a span{
	line-height: 				1.0em;
}

/* Skin the hover/current state of the navigation bar */
#filters li a:hover{
	color:						#FFFFFF;
	background-color:			#DB353A /* The LINE branded RED */; 
}
/* Tweek the position of the text */
#filters span{
	position:					relative;
	top:						4px;
}

#portfolio{
	clear:						both;
	float:						left;
	
}

#post-42 .postentry p{
	width:						700px;
}

#gallery_info{
	position:					relative;
	float:						left;
	display:					inline;
	width:						230px;
	top:						3px;
	font-size:					1.0em;
	overflow:					hidden;
}

#gallery_description{
	margin-top:					10px;
}

#description_details{
	position:					relative;
	width:						100%;
	height:						25px;
}
#team_title{
	float:						left;
}
#team_description_management{
	float:						right;
}

#gallery_info_alternative{
	float:						left;
	width:						350px;
}

#sidebar .cat-item-3, #sidebar .cat-item-53{
	display:					none;
}

/****************************************
**
** look and feel for The contact form plugin "WordPress Contact Form 7...
**/

#form_left, #form_right{
	width:						330px;
	height:						320px;
	float:						left;
}
#form_right{
	margin-left:				38px;
}

#wpcf7-f1-p718-o1{
	margin-top:					20px;
}

.your-name input, .your-email input, .your-number input, .your-organisation input, .your-role input, .your-url input{
	width:						100%;
	position:					relative;
	padding:					2px 5px 2px 5px;
	border:						dotted 1px #cccccc;
}

.your-message textarea{
	border:						dotted 1px #cccccc;
	width:						100%;
	height:						148px;
}

.file-349{
	border:						dotted 1px #cccccc;
}

#contact_check_box{
	width:						20px;
	float:						left;
}
#contact_check_text{
	float:						left;
	margin-left:				10px;
	width:						300px;
}

#submit #captcha_graphic{
	float:						left;
	width:						84px;
	height:						28px;
}

#submit #captcha_text{
	height:						28px;
	float:						left;
	margin-left:				10px;
	
}
#submit #captcha_text input{

	width:						120px;
	height:						26px;
	border:						dotted 1px #cccccc;
}
#submit #captcha_submit input{
	margin-left:				10px;
	float:						left;
	width:						100px;
	height:						28px;
	background-color:			#000000;
	color:						#ffffff;

}
#submit #captcha_submit input:hover{
	
	background-color:			#DB353A;

}

#comments-submit #captcha_submit input{
	margin-top:					10px;
	margin-bottom:				10px;
	float:						left;
	width:						100px;
	height:						28px;
	background-color:			#000000;
	color:						#ffffff;

}
#comments-submit #captcha_submit input:hover{
	
	background-color:			#DB353A;

}

.wpcf7-response-output{
	visibility:					visible;
	clear:			both;
	margin:						10px 30px 10px 10px;
}

.wpcf7-display-none{
	visibility:					hidden;
}

div.wpcf7-mail-sent-ok {
	color: 					#398f14;
}

div.wpcf7-mail-sent-ng {
	color: 					#DB353A;
}

div.wpcf7-spam-blocked {
	color: 					#DB353A;
}

div.wpcf7-validation-errors {
	padding:				3px 10px 3px 10px;
	color: 					#000000;
	background-color:		#DB353A;
}

.wpcf7-not-valid-tip-no-ajax{
	display:					none;
}

#address{
	clear:						both;
}

#london_address, #sheffield_address, #zurich_address{
	float:						left;
	width:						180px;
}

#sheffield_address, #zurich_address{
	margin-left:				70px;
}


/****************************************
**
** look and feel for case study page
**/

.resources a{
	display:					block;
	height:						37px;
	background:					transparent url('images/icon_pdf.gif') 3px 3px no-repeat;
	width:						200px;
	background-color:			#cccccc;
	margin-bottom:				5px;
}
.resources_alt a{
	display:					block;
	height:						37px;
	background:					transparent url('images/icon_pdf.gif') 3px 3px no-repeat;
	width:						340px;
	background-color:			#cccccc;
	margin-bottom:				5px;
}

.resources a span{
	position:					relative;
	display:					block;
	left:						40px;
	top:						5px;
}

.resources_alt a span{
	position:					relative;
	display:					block;
	left:						40px;
	top:						5px;
}

.border-grey{
	border:						solid 3px #cccccc;
}
.image-top{
	margin-bottom:				20px;
}
.column_1_of_1{
	float:						left;
	width:						100%;
	margin-top:					20px;
}
.column_1_of_2{
	float:						left;
	width:						380px;
}
.column_2_of_2{
	float:						left;
	width:						300px;
}

.column_1_of_2_alternative, .column_2_of_2_alternative{
	float:						left;
	width:						340px;
}

.column_1_of_3, .column_2_of_3, .column_3_of_3{
	float:						left;
	width:						220px;
}
.column_2_of_2, .column_2_of_3, .column_3_of_3{
	margin-left:				20px;
}

.related_info{
	position:					relative;
	clear:						both;
	display:					block;
	top:						20px;
}

.related_text{
	float:						left;
}
.our_work_link{
	float:						right;
}


/****************************************
**
** look and feel for map on how to find us page
**/
#map_canvas_outer{
	position:				relative;
	display:				block;
	width: 					720px; 
	height: 				300px;
}
#map_canvas_inner{
	border:					solid 3px #cccccc;
}

#map_canvas{
	width: 					100%; 
	height: 				300px
}

.find_us{
	clear:					both;
	position:				relative;
	margin-top:				30px;
}

/****************************************
**
** look and feel for the Awards page
**/
.thumb_and_text_thumb{
	position:					relative;
	float:						left;
	height:						100%;
	width:						170px;
	margin-right:				20px;
}
.thumb_and_text_text{
	position:					relative;
	float:						left;
	height:						100%;
	width:						510px;
	margin-bottom:				40px;
}

.quote{
	float:						left;
	height:						100px;
	background-color:			#ededed;
	width:						330px;
	margin-top:					10px;
	margin-left:					10px;
	font-size:					0.9em;
}
.quote a{
	display:					block;
	margin:						5px 5px 5px 10px;
}

#wpcf7-f4-p2060-o1{
	position:					relative;
	top:						20px;
	clear:						both;
}
.quote_top{
	height:						36px;
	width:						100%;
	background:					transparent url('images/quote_top.jpg') top left no-repeat;
}
.quote_bottom{
	height:						36px;
	width:						100%;
	background:					transparent url('images/quote_bottom.jpg') top right no-repeat;
}

.postmetadata, .nocomments{
	display:					none;
}