/*
	Love Live - style.less
	by Chris Lawes (Chris@TheUnit.co.uk)
*/


/*-------------------------------------------------
	{LESS} VARIABLES
-------------------------------------------------*/

@imgfolder: '../../img/';

@sitewidth: 920px;
@gutter: @sitewidth / 23;
@footergutter: 11px;

@black: #333333; // titles & links
@text: #0D0D0D;
@lightgrey: #DCDCDC;
@darkgrey: #828282;

@white: #FFFFFF; // lol

.null{padding: 0; margin: 0; list-style-type: none;}
.clearfix{
	position: relative;
	display: block; float: left;
	width: 100%; clear: both;
	padding: 0; margin: 0;
}
.blockleft{display: block; float: left;}
.hidetext{
	text-indent: -999px; overflow: hidden; 
	font-size: 0.1px; font-size: 0px; 
	direction: ltr; text-align: left;
}
.borders(@var: 4px){
	border-radius: @var;
	-moz-border-radius: @var;
	-webkit-border-radius: @var;
}
.hover-trans{
	zoom: 1;
	filter: alpha(opacity=80);
	opacity: 0.8;
}
.transition{
	-moz-transition: 0.3s; 
	-webkit-transition: 0.3s; 
	transition: 0.3s;
}
.no-transition{
	-moz-transition: none; 
	-webkit-transition: none; 
	transition: none;
}
.border-bottom{
	border-bottom: 1px dotted @darkgrey;
	margin-bottom: @gutter / 4; padding-bottom: @gutter / 4;
}
.border-top{
	border-top: 1px dotted @darkgrey;
	margin-top: @gutter / 4; padding-top: @gutter / 4;
}
.raquo{
	font-size: 15px; color: @lightgrey;
	padding-left: 4px;
	font-weight: normal;
	line-height: 15px;
}

/*-------------------------------------------------
	GLOBAL ELEMENTS
-------------------------------------------------*/

body{
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 13px; color: @text;
}
	a{
		color: @black;
		text-decoration: none;
		font-weight: bold;
		.transition;
		&:hover{
			color: @darkgrey;
			.transition;
		}
	}
	p{margin-bottom: @gutter / 4;}

/*-------------------------------------------------
	GRID LAYOUT
-------------------------------------------------*/

.center{
	position: relative;
	display: block; margin: 0 auto;
	width: @sitewidth;
}
.col_1, .col_2, .col_3{
	.blockleft;
	width: (@sitewidth - @gutter * 2) / 3;
}
.col_left, .col_right{
	.blockleft;
	width: (@sitewidth / 2) - @gutter / 2;
}
	.col_1, .col_2, .col_left{margin-right: @gutter;}
.col_stretch{
	.blockleft;
	width: (@sitewidth / 2) + (@gutter * 3);
	padding: @gutter / 4;
}

/*-------------------------------------------------
	MAIN LAYOUT
-------------------------------------------------*/

nav, header, #main, footer{.clearfix; float: none;}

	nav{
		height: 33px;
		background: @white;
		border-bottom: 1px solid @lightgrey;
		ul{
			.null;
			.center;
			text-align: right;
			margin-top: 15px; margin-bottom: 15px;
			li{
				display: inline;
				a{
					font-size: 13px; 
					font-weight: bold;
					margin: 0 0 0 10px;
					padding: 10px 15px;
				}
				&:last-child a{padding-right: 0;}
				&.active a{color: @darkgrey;}
			}
		}
	}
	
	header{
		height: 127px;
		margin-bottom: (@gutter / 2) + 5px;
		font-size: 16px;
		.header-inside{
			position: relative;
			display: block;
			margin: 0 auto;
			width: @sitewidth; height: 357px;
			.flexslider{
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				.slides{
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					li{
						position: absolute;
						top: 0; left: 0; right: 0; bottom: 0;
					}
				} 
			}
			h1{
				color: @white;
				position: absolute;
				bottom: @gutter / 4; right: 0;
			}
		}
		ul{.null;}
	}
	a#logo{ 
		position: absolute;
		top: 18px; left: 0px;
		width: 248px; height: 126px;
		.hidetext;
		background: url("@{imgfolder}logo.png") top left no-repeat;
		z-index: 99;
	}
	a#white-logo{ 
		position: absolute;
		top: 26px; left: 0px;
		width: 248px; height: 126px;
		.hidetext;
		background: url("@{imgfolder}white-logo.png") top left no-repeat;
		z-index: 98;
	}
		a#phone-logo, .phone-tagline{display: none;}
		.oldie header a#logo{background: url("@{imgfolder}logo-oldie.png") top left no-repeat !important;}
		body.home{
			header{
				height: 345px;
				.header-inside{
					.clearfix;
					a#logo{
						position: absolute;
						top: 26px; left: 0px;
						width: 248px; height: 357px;
						.hidetext;
						background: url("@{imgfolder}logo.png") top left no-repeat;
						&:hover{.hover-trans;}
					}
				}
			}
		}
	#main{
		z-index: 5;
		.center{
			border-top: 1px solid @lightgrey;
			padding-top: 10px;
		}
	}
	footer{
		margin-bottom: 20px;
		z-index: 1;
		padding-top: 1px;
		div.center{
			border-top: 1px dotted @darkgrey;
			padding: 26px 0; margin-top: 37px;
			a.footer-download{
				position: absolute;
				top: 160px; left: 0;
				font-size: 11px;
			}
			div{
				.blockleft;
				&.border-left{
					border-left: 1px dotted @darkgrey;
					padding-left: @footergutter;
				}
				&.wide{
					width: 227px;
						ul.social{
							position: absolute;
							top: 122px; left: 35px;
							padding-bottom: @gutter;
							li{
								.blockleft;
								a{
									.blockleft;
									width: 26px; height: 26px;
									background: @black;
									.borders(13px);
									.hidetext;
									margin: 0 7px 0 0;
								}
								&.nth-child-1 a{background: url("@{imgfolder}icons/social.png") 0 0 @black;}
								&.nth-child-2 a{background: url("@{imgfolder}icons/social.png") -32px 0 @black;}
								&.nth-child-3 a{background: url("@{imgfolder}icons/social.png") -66px 0 @black;}
								a:hover{background-color: darken(@darkgrey, 10%);}
							}
						}
				}
				&.middle{width: 211px;}
				&.thin{width: 135px;}
				ul{
					.null;
					margin: 0 0 @footergutter 0;
					li a{font-weight: normal;}
				}
			}
			a#footer-logo{
				position: relative;
				width: 171px; height: 87px;
				.blockleft;
				.hidetext;
				background: url("@{imgfolder}footer-logo.png") top left no-repeat;
				&:hover{.hover-trans;}
			}
			ul.share{
				.blockleft;
				li{
					.blockleft;
					overflow: hidden;
					margin-right: 4px;
					&.nth-child-1{width: 33px; height: 22px;}
					&.nth-child-2{width: 56px; height: 22px;}
					&.nth-child-3{width: 49px; height: 22px; margin-right: 0;}
				}
			}
		div.newfooter{
			width: 59%;
		}
		}
	}
	body.home footer div.center{margin-top: -1px;}

/*-------------------------------------------------
	CONTENT
-------------------------------------------------*/

h1, h2, h3, h4{
	.null;
	font-size: 12px; font-weight: bold;
	margin-bottom: @gutter / 4;
	color: @darkgrey; text-transform: uppercase;
	letter-spacing: 1px;
	&.clear-top{margin-top: @gutter / 2;}
	span{
		float: right; font-size: 11px;
		strong{.raquo;}
	}
}
	h1.section_title{
		color: @text;
		text-transform: none;
		font-size: 20px;
		letter-spacing: -1px;
		.clearfix;
		margin-bottom: 5px;
	}
#page_title{
	position: absolute;
	top: 112px; right: 0;
	color: @black;
	font-size: 18px;
	text-transform: capitalize;
	font-weight: 400;
	letter-spacing: 0;
}
	.home #page_title{display: none;}

h3.twitter{
	padding: 15px 0 5px 0; margin: 0;
	border-bottom: 1px dotted @darkgrey;
}

.full-more{text-align: right; padding-top: 10px;}
	a.more{font-size: 11px;}
		a.more span{color: @lightgrey; font-size: 14px !important;}
		.home a.more{.blockleft; margin-top: 10px;}
	a.read-more{display: block;}

// HOME PAGE

body.home #main .center{border-top: none;}

.recent-studies{
	font-size: 11px;
	margin-bottom: @gutter / 2;
	img{
		width: 100%; height: auto;
		border: 1px solid @lightgrey;
		display: block; clear: both;
		margin-bottom: 4px;
		height: 155px;
	}
	a:hover{.hover-trans;}
}

h1.case_studies_title{
	color: @text; font-size: 26px; 
	text-transform: none;
	margin-bottom: @gutter / 2;
}

div.news-post{
	.clearfix;
	padding-bottom: @gutter / 2;
	border-bottom: 1px dotted @darkgrey;
	h2{
		.null;
		margin: 4px 0 12px 0;
		text-transform: none;
		font-size: 16px; font-weight: bold;
		letter-spacing: 0;
	}
	p{
		.null;
		&.tags{
			margin-top: @gutter / 4;
		}
	}
	span{
		color: lighten(@darkgrey, 10%);
		font-weight: bold; font-size: 11px;
	}
	a img{
		.blockleft;
		width: 100px !important; height: 100px !important;
		margin: 5px @gutter / 2 0 0;
	}
}

.media_container{.blockleft; clear: both;}
	.media_container, .media_container iframe{width: 440px; height: 245px;}
body.home .col_right iframe{width: 100%; min-height: 300px;}

.home .news-post{color: lighten(@text, 30%);}
	.col_left h1 a{text-transform: none; letter-spacing: 0px;}
	.news .col_left img{width: 280px; height: auto; margin-left: 159px;}

div.small-post{
	width: 40%;
	.blockleft;
	clear: none;
	border-bottom: none;
	padding-top: @gutter / 2;
}
div.left-post{
	margin-right: 5%; padding-right: 5%;
	border-right: 1px dotted @darkgrey;
}

#twitter_update_list{
	.null;
	li{
		.blockleft;
		width: 30%;
		margin: 0 2% 0 0; padding: 5px 1% 0 0;
		border-right: 1px dotted @darkgrey;
		&:last-child{border-right: none;}
		a{
			color: lighten(@darkgrey, 10%);
			display: block;
			max-width: 130px;
			&:hover{color: @black;}
		}
		span a{
			color: @black;
			display: inline;
			width: none;
			&:hover{color: @darkgrey;}
		}
	}
}

.news .col_left h1 a, .news .col_left h1{font-size: 14px}

.newsletter{
	.blockleft;
	width: 100%;
	margin-top: @gutter / 2;
	padding-bottom: @gutter / 3;
	*{
		.blockleft;
		.null;
		height: @gutter / 2;
	}
	h3{
		float: none;
		margin-bottom: @gutter / 4;
	}
	p{
		.blockleft;
		width: 100%;
		margin-bottom: @gutter / 2;
	}
	label{
		width: 24%;
		padding-top: 2px;
	}
	.input{
		width: 54%;
		border: 1px solid @darkgrey;
		margin: -1px;
		text-indent: 1%;
	}
	.submit{
		width: 20%;
		border: 0;
		padding: 1px 0;
		background: @darkgrey;
		border: 1px solid @darkgrey;
		color: @white;
		margin: -1px -1px -1px 2%;
		height: (@gutter / 2) + 2;
		.transition;
		&:hover{
			color: darken(@white, 10%);
			background: darken(@darkgrey, 10%);
			.transition;
		}
	}
}

// NEWS PAGE

body.news{
	.col_left{ 
		span{
			.blockleft;
			width: 120px;
			margin-right: @gutter;
			img{
				width: 100%; height: auto;
				margin: 0;
			}
		}
		h1{
			.blockleft;
			width: 280px;
			text-transform: none;
			color: @text; letter-spacing: 0px;
			strong{
				color: #828282;
				letter-spacing: 1px;
				font-weight: bold;
				font-size: 11px;
			}
		}
	}
	.col_right img{
		margin-bottom: @gutter;
		width: 100%; height: auto;
	}
	.news-pag{
		position: relative;
		margin-bottom: -@gutter / 2;
		text-align: center;
		ul{
			.null;
			text-align: center;
			margin-top: 6px;
			li{
				display: inline;
				a{
					padding: 0 2px;
					margin: 0 2px;
					&.current-news{color: @darkgrey;}
				}
			}
		}
		a.left-arrow, a.right-arrow{
			position: absolute;
			width: 11px; height: 15px;
			background: url("@{imgfolder}/icons/arrows.gif") top left no-repeat;
			top: 18px;
			.hidetext;
			.no-transition;
		}
			a.left-arrow{
				left: 0px;
				background-position: 0px -15px;
				&:hover{background-position: 0 0;}
			}
			a.right-arrow{
				right: 0px;
				background-position: -11px -15px;
				&:hover{background-position: -11px 0;}
			}
	}
}

body.news .header-inside{overflow: hidden;}

div.news_filter{
	position: absolute;
	top: 125px; right: -19px;
	width: 321px;
	font-size: 14px;
	span{.blockleft; margin-right: @gutter / 4;}
	ul{
		.blockleft;
		.null;
		li{
			.blockleft;
			border-right: 1px solid @darkgrey;
			padding-right: @gutter / 4; margin-right: @gutter / 4;
			a{
				.blockleft;
				&.current_filter{color: @darkgrey;}
			}
			&:last-child{border-right: none;}
		}
	}
}

// CLIENTS PAGE

ul.clients-list{
	.null;
	margin-bottom: @gutter / 2;
	background: darken(@black, 5%);
	padding: 4px 0 4px 4px;
	width: @sitewidth - 4px;
	li{
		.blockleft;
		margin: 8px;
		img{
			.blockleft;
			width: 166px;
			height: auto;
		}
	}
}

.recent-studies{
	.col_1, .col_2, .col_3{
		margin-bottom: @gutter / 2; 
	}
}

// CASE STUDIES

.casestudy h2{
	color: @text;
	font-size: 20px;
	letter-spacing: -1px;
	text-transform: capitalize;
}
.casestudy .css_cols ul{padding-left: 20px;}
.casestudyslider{margin-top: @gutter / 2;}
.casestudyslider{
	position: relative;
	.blockleft;
	width: 100% -2px !important;
	ul{
		.blockleft;
		padding: @gutter/4 0 !important;
		background: #000;
	}
	.externalControl{
		.blockleft; clear: both;
		width: 100%;
		text-align: center;
		padding-top: 10px;
		button{
			background: #ccc;
			.borders(6px);
			.hidetext;
			width: 11px; height: 11px;
			border: none;
			.transition;
			&:hover{background: #5E5E5E; .transition;}
		}
	}
	button.casestudyslider-next{
		position: absolute;
		bottom: 0; right: 0px;
		width: 9px; height: 15px;
		border: none;
		.hidetext; color: #fff;
		background: url("@{imgfolder}/icons/arrows.png") top right no-repeat;
		&:hover{background: url("@{imgfolder}/icons/arrows.png") bottom right no-repeat;}
	}
	button.casestudyslider-prev{
		position: absolute;
		bottom: 0; left: 0px;
		width: 9px; height: 15px;
		border: none;
		.hidetext; color: #fff;
		background: url("@{imgfolder}/icons/arrows.png") top left no-repeat;
		&:hover{background: url("@{imgfolder}/icons/arrows.png") bottom left no-repeat;}
	}
}

// OUR WORK

ul.clients-list{
	li{
		position: relative;
		span{
			position: absolute;
			top: 0; bottom: 0;
			left: 0; right: 0;
			background: #fff;
			background: rgba(255, 255, 255, 0.8);
			padding: 5%;
			display: none;
			opacity: 0;
			.transition;
		}
		&:hover span{
			.transition;
			opacity: 1;
			display: block;
		}
		span a:hover{color: #000;}
	}
}

// WHY US

.css_cols{
	-moz-column-width: (@sitewidth - @gutter * 2) / 3;
	-moz-column-gap: @gutter;
	-webkit-column-width: (@sitewidth - @gutter * 2) / 3;
	-webkit-column-gap: @gutter;
	column-width: (@sitewidth - @gutter * 2) / 3;
	column-gap: @gutter;
}

// WHAT WE DO

ul.services{
	.blockleft; .null;
	width: 100%;
	background: @black; color: @white;
	padding: 1.5% 0;
	margin-top: @gutter / 2;
	li{
		.blockleft;
		width: 46% - 1px;
		padding: 0.5% 2%;
		border-left: 1px solid darken(@darkgrey, 15%);
		a{
			color: @white;
			font-weight: normal;
			&:hover{color: @lightgrey;}
		}
	} 
}

.services_box{
	background: lighten(@lightgrey, 10%);
	width: 96%;
	padding: 2%;
	margin-bottom: @gutter;
}
	.services_box .css_cols{
		-moz-column-width: ((@sitewidth - @gutter * 2) / 3) - (@gutter * 2);
		-moz-column-gap: @gutter;
		-webkit-column-width:((@sitewidth - @gutter * 2) / 3) - (@gutter * 2);
		-webkit-column-gap: @gutter;
		column-width:((@sitewidth - @gutter * 2) / 3) - (@gutter * 2);
		column-gap: @gutter;
	}

// ABOUT

ul.lovelive_team{
	.blockleft;
	.null;
	margin-top: @gutter / 2;
	li{
		.blockleft;
		width: 30%;
		margin-right: 4%;
		margin-bottom: @gutter / 2;
		strong{
			display:block; clear: both;
			font-size: 15px;
		}
		img{
			.blockleft;
			width: 80px; height: auto;
			margin: 19px 16px 2px 0;
		}
		br{height: 2px;}
	}
}

.whoweare_image img{width: 107%;}

.whoarewe .col_stretch{
	padding-left: 0;
	padding-right: @gutter;
}

ul.lovelive_team li{.border-top;}

ul.lovelive_team li.person-0, ul.lovelive_team li.person-1, ul.lovelive_team li.person-2{border-top: none; margin-top: 0; padding-top: 0;}

li.person-3, li.person-6, li.person-9, li.person-12{clear: left; float: none;} // fix for people text box heights 
li.person-2, li.person-5, li.person-8, li.person-11{margin-right: 0 !important;}

/*-------------------------------------------------
	MEDIA QUERIES
-------------------------------------------------*/

@media only screen and (max-width: 960px) {
	
	@sitewidth: 100%;
	@gutter: @sitewidth / 23;
	
	.flex-caption, .flex-direction-nav{width: 90% !important;}
	.externalControl, #casestudieslightbox{width: 100% !important;}
	
	.center{
		position: relative;
		display: block; margin: 0 auto;
		padding: 0 @gutter;
		width: @sitewidth - @gutter * 2;
	}
	
	nav ul, header .header-inside{width: @sitewidth;}
		nav ul li:last-child a{padding-right: 15px;}
	
	header .header-inside a#logo{left: @gutter;}
	
	.news .col_left img{width: 100%; height: auto; margin-left: 0;}
	
	.col_1, .col_2, .col_3{
		.blockleft;
		width: (@sitewidth - @gutter * 2) / 3;
	}
	.col_left, .col_right{
		.blockleft;
		width: (@sitewidth / 2) - @gutter / 2;
	}
	.col_stretch{
		.blockleft;
		width: (@sitewidth / 2) + (@gutter * 3);
		padding: @gutter / 4;
	}
		.col_1, .col_2, .col_left{margin-right: @gutter;}
			.col_1 img, .col_2 img, .col_3 img, .col_left img, 
			.col_right img, ul.clients-list li img{width: 100%; height: auto;}
			
			.col_right iframe{width: 100%; min-height: 200px;}
			
	ul.clients-list{width: @sitewidth;}
		ul.clients-list li{width: 18.5%; margin: 1.3% / 2;}
		
	.jcarousel-item img{width: @sitewidth;}
	
	.services_box{
		padding: @gutter / 2;
		width: @sitewidth - @gutter;
		margin-bottom: @gutter;
	}
	
	footer div.center div.middle{width:24%}
	footer div.center div.thin{width: 16%} 
	
}

@media only screen and (max-width: 600px) {body.news .col_left h1{width: auto;}}
@media only screen and (max-width: 690px) {nav ul li a{font-size: 11px !important;}}
@media only screen and (max-width: 580px) {nav ul li a{font-size: 80% !important; padding: 10px;}}
@media only screen and (max-width: 550px) {nav ul li a{padding: 10px; font-size: 70%}}
@media only screen and (max-width: 500px), only screen and (max-device-width: 480px) {
		
	body{width: 480px;}
		body.home header{height: 145px !important; border-bottom: 1px solid #DCDCDC;}
			body.home header .header-inside{height: 145px !important;}
	
	body.home a#phone-logo{ 
		display: block;
		position: absolute;
		top: 18px; left: 4%;
		width: 248px; height: 126px;
		.hidetext;
		background: url("@{imgfolder}logo.png") top left no-repeat;
		z-index: 99;
	}

	@sitewidth: 100%;
	@gutter: @sitewidth / 23;
	
	nav ul li a{padding: 4px 5px; font-size: 79% !important;}
	
	#main .col_left,
	#main .col_right{
		float: none;
		clear: both;
		width: @sitewidth - @gutter * 2;
		margin: 0 auto;
	}
		#main .col_right{margin-top: @gutter;}
	.col_stretch{
		.blockleft;
		width: @sitewidth;
	}
	
	header .flexslider, .col_right object, 
	body.home .col_right h2, .news_filter{display: none !important;}
	
	nav{white-space: nowrap;}
	
	.whatwedo_col{width: @sitewidth;}
	
	body.home .phone-tagline{
		display: block;
		position: absolute;
		width: 55%;
		top: 96px; right: 0;
		font-size: 61%;
	}
	
	footer ul.share{display: none !important;}
	footer div.center div.wide{width: @sitewidth; height: 170px; clear: both;}
		footer div.center div.middle{width: 49%;}
		footer div.center div.thin{width: 21%;}
	
	ul.clients-list{width: @sitewidth;}
		ul.clients-list li{width: 31%; margin: 1%;}
		
	#twitter_update_list{display: none;}

}

p.explore{padding-top: 15px;}

#fancybox-overlay{background-color: #000 !important;}
#fb-root{width: 1px; height: 1px; display: block; visibility: hidden; overflow: hidden;}

/* Browser Wars */

body.casestudy .css_cols{.blockleft; width: 600px; font-weight: normal; font-size: 13px;}
.news .media_container object, .news .media_container iframe{width: 440px; height: 245px;}

.ie7 ul.lovelive_team li, .ie6 ul.lovelive_team li{height: 230px;}
.ie7 nav, .ie6 nav{height: 43px;}
.ie7 h2 span{float: none;}
.ie7 div.externalControl button, .ie8 div.externalControl button{display: none;}
.ie7 .casestudyslider-next, .ie7 .casestudyslider-prev,
.ie8 .casestudyslider-next, .ie8 .casestudyslider-prev{display: block;}
.ie7 .casestudyslider .externalControl, .ie8 .casestudyslider .externalControl{padding-top: 20px;}

.client_video{
	padding: 0;
	width: 600px;
	margin-right: 0;
	iframe{
		max-width: 600px;
		max-height: 500px;
	}
}