@import '../h5bs/css/mixins.less';

@body-text: #ccc;
@red-pop: #FF1D25;
@dark-red: #760818;
@yellow-accent: #FBE98B;
@active-link: #fff;
@title-text: #fff;
@nav-text: #808080;
@border-light: #2a2a2a;
@border-mid: #484848;
@border-dark: #333333;
@map-color: #545454;

/* ----------------------------------------------------------------------------
General Styles
---------------------------------------------------------------------------- */

body {
	color: @body-text;
	
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-size: 75%;

	@media screen and (max-device-width: 1024px) {
		font-size: 80%;
	}

	.radial2gradient(#2d2d2d, #000, 0, 600, center top);
	background-repeat: no-repeat;
	height:100%;
	margin:0;
	padding:0;


	p {
		font-size: 1em;
		line-height: 1.4em;
		margin-bottom: 1em;
	}

	a {
		text-decoration: none;
		color: @nav-text;
	}

	h1, .h1 {
		color: @red-pop;
		font-weight: normal;
		line-height: 1.2em;
		font-size: 1.25em;
		margin-bottom: 5px;
		letter-spacing: 1px;
		a {
			color: @title-text;
		}
	}

	h2, .h2 {
		color: @body-text;
		font-weight: normal;
		line-height: 1.2em;
		font-size: 1.083em /* 13px */;
		letter-spacing: 1px;
		margin-bottom: 10px;
	}

	h3, .h3 {
		color: @yellow-accent;
		font-weight: normal;
		line-height: 1.2em;
		font-size: 1.167em /* 14px */;
		letter-spacing: 1px;
		text-transform:uppercase;
		margin-bottom:3px;
	}

	h4, .h4 {
		color: @red-pop;
		font-weight: normal;
		line-height: 1.2em;
		font-size: 1.083em /* 13px */;
	}
	
}



nav {
	ul {
		display: inline-block;
	}
	li {
		float: left;
		font-size: 1.250em /* 15px */;
		letter-spacing: 3px;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
	}
	a {
		color: @nav-text;
		text-transform: uppercase;
		-webkit-transition: color 0.3s linear;
	}
	a:hover, a.active {
		color: @active-link;
		-webkit-transition: color 0.15s linear;
	}
}

nav.centered {
	width: 100%;
	overflow: hidden;
	
	ul {
		position: relative;
		left: 50%;
		
		
		li {
			position: relative;
			right: 50%;
			padding-left: 20px;
			margin: 5px 0;
		}
		li:first-child {
			padding-left: 0px;
		}
	}
}


/* ----------------------------------------------------------------------------
Master Template
---------------------------------------------------------------------------- */


header {
	margin: 10px 20px 10px 20px;
	
	#logo {
		margin: 30px auto;
	}
	
	overflow:hidden;

	@media screen and (max-device-width: 1024px) {
		margin: 5px 20px;
		#logo {
			margin: 5px auto;
		}
	}
}

#logo {
	background: url(../img/logo-final.png);
	text-indent: -9000px;
	height: 60px;
	width: 480px;
}

#content {
	border-top: 1px solid @border-light;
	margin: 0 20px 20px 20px;
	padding-bottom: 0px;
	/* border-bottom: 1px solid @border-light; */
	padding-bottom:130px;
	
}

nav.pipe {
	margin-top: 20px;
	li {
		float: none;
		display:inline-block;
		font-size: 0.833em /* 10px */;
		padding-left: 10px;
	}
	li:before {
		content: 'ı\00a0\00a0\00a0';
		color: @nav-text;
	}
	li:first-child:before {
		content: '';
		color: @nav-text;
	}
}

nav.secondary {
	padding-bottom: 5px;
	border-bottom: 1px solid @border-light;
	padding-top: 5px;
}
nav.tertiary{
	margin:10px auto 20px auto;
}

footer {
	width: 100%;
	height:130px;
	background:#000;
	position:fixed;
	bottom:0;
	@media screen and (max-device-width: 1024px) {
		height: 60px;
	}

	.footer{
		padding:30px 0;
		border-top: 1px solid @border-light; 
		margin:0 20px 0 20px;
	}
} 


/* ----------------------------------------------------------------------------
Content
---------------------------------------------------------------------------- */


.content-wrapper {
	min-width: 900px;
	max-width: 900px;
	margin: 0 auto 0 auto;
}

#content > .content-wrapper {
	margin-top: 20px !important;
}

.colContent {
	padding: 0px 20px 0px 0px;
}

.scrollableArea {
	overflow: hidden;

		a {
			&.slideshow-controls {
				// background: red;
				// opacity: 0.0;
				.transition(opacity, .2s, ease-in);
				height: 100%;
				// max-height: 370px;
				// min-height: 110px;
				&.prev, &.next {
					max-height: 370px !important;
					// display: inline-block;
					// height: 100%;
					position: absolute;
					opacity: 0.4;
					z-index: 100;
					&:hover {
						opacity: 1.0;
					}
					.icon {
						display: inline-block;
						position: relative;
						width: 47px;
						height: 52px;
						top: 170px;
					}
				}
				&.dim {
			        opacity: 0.0;
			        display: none;
			    }
				&.prev {
					left: 0px;
					width: 100px;
					.icon {
						background: url(../img/arrow_active_left.png);
						left: 25px;
						// margin: 1em auto;
						padding: auto 0;
					}
				}
				&.next {
					right: 0px;
					width: 100px;
					.icon {
						background: url(../img/arrow_active_right.png);
						left: 25px;
						padding: auto 0;
					}
				}
			}
	}

	@media screen and (max-device-width: 1024px) {
			width: 100%;
			max-height: 550px;
			overflow: auto; 
			-webkit-overflow-scrolling:touch;
			.slideshow-controls {
				display: none;
			}
		}
}


#content .scrollableArea {
	padding-top: 25px !important;
	@media screen and (max-device-width: 1024px) {
		height: 100%;
	}
}
.sroll2{padding-top:0px !important;margin-top:-25px;}
.img-wrap{
	position:relative;
}
.img-wrap .img-overlay{
	position:absolute;
	top:50%;
	width:900px;
	margin-top:-42px;
	background: url(../img/trans-60.png);
	text-align:center;
}
.img-wrap .img-overlay h2{
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:4px;
	margin:30px;
}



.nav-wrap { margin: 50px auto;  }


#follow { 
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
	li { 
		display: inline-block;
		a { 
			position: relative; 
			z-index: 200; 
			color: gray; 
			display: block; 
			float: left; 
			padding: 6px 10px 4px 10px;
			text-decoration: none;
			text-transform: uppercase;
			-webkit-transition: color 0.2s linear;
			width:200px; 
			cursor:pointer;
			text-align:center;
			text-transform: uppercase;
			font-family: proxima-nova, sans-serif;
			font-weight: 400;
			font-size: 1.250em /*15px*/;
			letter-spacing: 3px;
		}
		a:hover { 
			color: black;
			text-shadow: none;
		}
	}
	#magic-line { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 200px; 
		background: #ff151f; 
		z-index: 100; 
	}
}
.follownav{
	.current a { color: #000; }
	.current a:hover { color: #000 !important; }
}
.thirdnav{
	font-size:12px;
	.current a { color: #CCC; }
	a:hover { color: #FFF !important; }
	li{line-height:1.5em;}	
}
.ie6 #follow li, .ie7 #follow li { display: inline; }









#contentGrid {
	display: inline-block;
	position: relative;
	height: 100%;
	max-height: 400px;

	@media screen and (max-device-width: 1024px) {
		height: 100%;
		max-height: 400px;
		// position: absolute;
		// padding-left: 20px;	
		// padding-right: 20px;	
	}
	

	.gridCell {
		margin: 5px;
		float: left;
		display: block;
		
		a {
			font-size: 13px;
			display: block;
		}
		
		.gridOverlay {
			background: rgb(239, 73, 62);
			background: rgba(239, 73, 62, 0.8);
			border-top: 1px solid black;
			//.gradient2(#ef493e, #972d25);
			display: none;
			//background-color: @red-pop;
			z-index: 2;
			color: black;
			position: absolute;
			left: 0;
			bottom: -1px;
			padding: 3px;
			color: #eee;
			font-size: 0.917em /*11px*/;
			line-height: 1.2em;
		}
		img {
			position: relative;
			z-index: 1;
		}
	}
	
	.projectCell {
		opacity: 0;
		width: 116px;
		height: 99px;
	}
	.personCell {
		position: relative;
		opacity: 1;
		height: 125px;
		margin: 0 5px 10px 5px;
	}
	
	
	
	.gridCol {
		float: left;
		display: block;
		margin: 0;
		margin-right: 20px;
		padding-top: 25px;
		opacity: 1;
		height: 400px;
		// @media screen and (max-device-width: 1024px) {
		// 	max-height: 350px;
		// }



		
		dl {
			font-size: 1rem /*12px*/;
			line-height: 1.2em;
		}
		
		dt {
			color: @nav-text;
		}
		dd {
			color: @yellow-accent;
			position: relative;
			top: -1.2em;
			padding-left: 100px;
		}
		h1{
			margin-top:-25px;
			width:900px;
		}
	} 
	
	.text {
		max-width: 400px;
		h3 {
			margin-bottom: 12px;
		}
	}
}

#contentGrid:hover .activeCell {
  opacity: 1.0 !important;
  -webkit-transition: opacity 0.5s linear;
}

#contentGrid:hover .activeCell:hover {
  opacity: 1.0 !important;
  -webkit-transition: opacity 0.2s linear;
}

.wide {
	width: 6000px;
}

.fixed-content {
	padding-top: 20px;
	padding-bottom: 20px;
	/* border-top: 1px solid @border-light; */
	/* border-bottom: 1px solid @border-light; */
}

.text {
	margin-right: 20px;
}

.meta {
	font-size: 0.917em /* 11px */;
}

.pdf{
	display:block;
	text-indent:-9999px;
	background: url(../img/pdf_download.png) no-repeat;
	width:35px;
	height:35px;
}


/* ----------------------------------------------------------------------------
Slides Fader for Slides JS
---------------------------------------------------------------------------- */

#slides{
	margin:10px 0 25px 0;
	.slides_container{opacity:0;}
	overflow:hidden;
}

/* ----------------------------------------------------------------------------
Slider
---------------------------------------------------------------------------- */

.slider {
	position: relative;
	width:100%;
	@media screen and (max-device-width: 1024px) {
		display: none;
	}
	.track {
		position:absolute;
		top:0px;
		width:100%;
		height:5px;
		background-color:@border-dark;
	}
	.handle {
		position:absolute;
		top:-10px;
		left:0px;
		height:5px;
		padding: 10px 0 7px 0;
		width:100px;
		cursor:pointer;
		z-index:99;
		.visibleHandle {
			background-color: @red-pop;
			height: 5px;
			opacity: 0.6;
			-webkit-transition: opacity .2s ease-in-out;
		}
	}
}


/* ----------------------------------------------------------------------------
People
---------------------------------------------------------------------------- */

.person{
	.bio{
		padding-left:0px;
	}
}

/* ----------------------------------------------------------------------------
Offices
---------------------------------------------------------------------------- */

#officeMap {
	margin: 0 auto;
	margin-top: 50px;
	width: 947px;
	height: 367px;
	background: url(../img/map-desktop.png) no-repeat;
	overflow: hidden;
	position: relative;
}

#mapclipper {
	width: 280px;
	height: 367px;
	overflow: hidden;
	position: relative;
	border: 1px solid @border-dark;
	
	
	#mapoffset {
		position: relative;
		width: 947px;
		height: 367px;
	}
}

.target_featured{
	background:url('../img/dot-sprite.png') -26px -4px;
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 2;
	
}
.target_featured:hover {
	background: url('../img/dot-sprite.png') -26px -26px;
}
.officeLocation{
	
	background: url('../img/dot-sprite.png') -4px -4px;
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 2;
}
.officeLocation:hover {
	background: url('../img/dot-sprite.png') -4px -26px;
}

.clickedGradient {
	background-color: #ffe786;
}

.target{ 
	display:none;
}


/* DROPDOWN */
.styled-select select {
	  -webkit-border-radius: 0px;
	  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	  -webkit-padding-end: 20px;
	  -webkit-padding-start: 2px;
	  -webkit-user-select: none;
	  background:url(../img/drop-arrow.png) #FF151F no-repeat 100%;
	  background-position: center right;
	  background-repeat: no-repeat;
	  border: 1px solid #FF151F;
	  color: #000;
	  font-size: inherit;
	  margin: 0;
	  overflow: hidden;
	  padding: 3px 10px;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-size: 1.25em /* 15px */;
	letter-spacing: 3px;
	-moz-appearance: none !important;
	-webkit-appearance: none;
}
.styled-select{
	margin-bottom: 20px;
	overflow: hidden;
text-transform: uppercase;
}

.sb-custom {
  cursor: pointer;
  display: inline;
  position: relative;
  width:  100%;
}
.sparkbox-custom {
  display: none;
}
.no-js .sparkbox-custom {
  display: block;
}

.sb-select:focus {
  -webkit-box-shadow: 0 0 4px 2px #79aed7;
     -moz-box-shadow: 0 0 4px 2px #79aed7;
          box-shadow: 0 0 4px 2px #79aed7;
}
.sb-select {
  background: #FF151F url('../img/drop-arrow.png') no-repeat 100% 50%;
  border: none;
  color: #000;
  left: 0;
  padding: 5px 30px 5px 5px;
  position: relative;
  text-decoration: none;
  top: 0;
  width: 200px;
margin-bottom: 20px;
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-size: 1.25em /* 15px */;
text-align:left;
}
.sb-dropdown {
  background: rgba(0,0,0,.8);
  display: none;
  list-style: none;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-size: 1.25em /* 15px */;
  margin: 0;
  padding: 0px;
  position: absolute;
  top: 1.35em;
  width: 235px;
  z-index: 2;
}
.sb-dropdown a {
  color: rgb(220,220,220);
  display: block;
  padding: 3px;
  text-decoration: none;
-webkit-transition: all 0.2s linear;
text-align:left;
}
.sb-dropdown a:hover{

		background: rgba(255,255,255,.3);
}
.sb-dropdown .selected, .sb-dropdown .selected a {
		color: rgb(0,0,0) !important;
		background: #FF151F;
}



#tiptip_content_not {
	font-size: 0.917em /* 11px */;
	padding: 16px 8px 8px 6px;
	border-bottom: 1px solid #CCC;
	margin-right: 8px;
	margin-bottom: 0px;
	overflow: hidden;
	.tipimg {
		float: left; 
		margin: 5px 20px 10px 0;
	}
	.tipcopy {
		width: 600px; 
		float: left;
	}
}

#tiptip_content_not h3 {

}
#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;


	.tip_top {
		padding-bottom: 5px;
	}

	.tip_bottom {
		padding-top: 5px;
	}

	.tip_right {
		padding-left: 5px;
	}

	.tip_left {
		padding-right: 5px;
	}

}

#tiptip_content {
	font-size: 14px;
	line-height: 14px;
	color: #000;
	padding: 4px 8px;
	background-color: #ffe786;

	box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #0;
	
	h4{
		font-size: 1.167em /* 14px */;
		padding: 10px 0;
	}
}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #ffe786;
	border-right-color: #ffe786;
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
	border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
	border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(0,0,0);
	border-right-color: rgba(0,0,0,0);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
	border-left-color: rgba(25,25,25,0.92);
}





.infoWindow {
	position: absolute;
	display: none;
	opacity: 0;
	z-index: 4;
	
	.info {
		background-color: @dark-red;
		width: 238px;
		height: 100px;
	}
	
	.officeImage, .officeInfo {
		h1 {
			color: white;
			font-size: 11px;
		}
		p {
			color: white;
			font-size: 11px;
		}
		margin: 5px;
	}
	
	.triangle {
		width: 238px;
		height: 25px;
	}
	.upwards {
		background: url(../img/officesTriangleUp.png);
	}
	.downwards {
		background: url(../img/officesTriangle.png);
	}
}

/* ----------------------------------------------------------------------------
Blog
---------------------------------------------------------------------------- */

.post {
	font-size: 1.167em /* 14px */;
	line-height: 1.667em /* 20px */;
	h1 {
		padding-bottom: 20px;
	}
	p {
		font-size: 1em /* 12px */;
		padding-bottom: 10px;
	}
	.meta {
		padding-bottom: 0px;
	}
}

.posts {
	li {
		border-top: 1px solid @border-light;
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom:20px;
	}
	
	li:first-child {
		border-top: 0;
		margin-top: 0;
		padding-top:0;
	}
	
	.article {
		margin-left: 15px;
	}
	
	.meta {
		color: @nav-text;
	}
	h2 {
		padding: 5px 0 10px 0;
	}
	h2 a {
		font-size: 1.5em /* 18px */;
		line-height: 2em /* 24px */;
		color: @red-pop;
		
	}
	img {
		margin-bottom:20px;
	}

	a {
		-webkit-transition: color 0.15s linear;
		font-size: 1em /* 12px */;
		display: block;
		
	}
	a:hover {
		color: @active-link;
	}
}

.sidebar{
	a{
		-webkit-transition: color 0.15s linear;
	}
	a:hover{	
		color: @active-link;
	}
	h3{
		margin-bottom: 10px;
		border-bottom: 1px solid @border-light;
		padding-bottom: 5px;
	}
	ul{
		margin-bottom: 25px;
	}
	.categories li{
		margin-bottom: 6px;
	}
	.articles li{
		margin-bottom: 10px;
		.meta{
			color: gray;
		}
	}
}

/* ----------------------------------------------------------------------------
Home
---------------------------------------------------------------------------- */

.strip {
	width: 9000px;
	height: 210px;
	opacity: 0.0;
	ul {
		 margin: 0;
		 padding: 0;
		 height: 210px;
		 position: absolute;
	}
	ul:hover li {
		 opacity: 0.3 !important;
		 -webkit-transition: opacity 0.5s linear;
	}
	li {
		 float: left;
		 margin: 0px;
		 margin-left: 20px;
		 opacity: 1.0;
		 -webkit-transition: opacity 0.5s linear;
		 position: relative;
		 width: auto;
		 cursor: pointer;
		p {
			font-size: 0.917em /* 11px */;
			letter-spacing: 1px;
			color: #eee;
			margin: 0;
			padding: 5px 10px 5px 10px;
		}
		h2 {
			font-family: proxima-nova, sans-serif;
			font-size: 1.083em /* 13px */;
			color: #eee;
			text-shadow: 1px 1px #9a2f28;
			margin: 0;
			padding: 5px 10px;
		}
		.captionOverlay {
			position: absolute;
			left: 0px;
			width: 100%;
			display: none;
			z-index: 10;
			h2{
				background: rgb(239, 73, 62);
				background: rgba(239, 73, 62, 0.8);
			}
			p{
				background: rgba(255, 255, 255, 0.5);
				color:#000;
				font-weight: bold;
			}
		}
		.awardOverlay{
			position: absolute;
			width: 100%;
			padding: 8px 0px;
			text-align: center;
			top: 42%;
			display: block;
			background: url(../img/trans-60.png);
			color: #FFF;
			z-index: 11;
			text-transform: uppercase;
			font-size: 1em /* 12px */;
			font-weight: normal;
		}
	}
	ul:hover li:hover {
		 opacity: 1.0 !important;
		 -webkit-transition: opacity 0.2s linear;
	}
	li:first-child {
		 margin-left: 0px;
	}
	.badge {
		float: right;
		font-family: proxima-nova, sans-serif;
		font-size: 1.083em /* 13px */;
		color: #eee;
		text-shadow: 1px 1px #9a2f28;
		padding: 3px 5px;
		margin: 3px 5px 2px 5px;
		background: rgba(255, 255, 255, 0.4);
		.border-radius(6px);
		letter-spacing: 1px;
	}
}


li img {
	margin: 0px;
	padding: 0px;
	-webkit-box-shadow: 0 0 0 0 @border-light;
}
li .overlay {
	 z-index: 10;
	 position: relative;
}
.strip.top {
 	position: fixed;
	top: -220px;
	li .captionOverlay {
		bottom: 2px;
	}
}
.strip.bottom {
	 position: fixed;
	 bottom: -220px;
	li .captionOverlay {
		top: 0;
	}
	li .overlay {
		top: 0;
		h2 {
			top: -170px;
		}
	}
}
#menu {
	 opacity: 0.0;
	 position: absolute;
	 z-index: 1001;
	.layer1 {
		 background: url(../img/tagline.png);
		 width: 731px;
		 height: 110px;
		 position: absolute;
		 background-position: center -10px;
		 background-repeat: no-repeat;
		 top: 20px;
	}
	.layer2 {
		opacity: 0.0;
		width: 731px;
		height: 101px;
		position: absolute;
	}
}

/* ----------------------------------------------------------------------------
user-content
---------------------------------------------------------------------------- */

.user-content ul,
.user-content ol {
	padding: 0px 0px 0px 0px;
	margin-bottom: 1em;
	font-size: 1em /* 12px */;
	line-height: 1.4em;
}

.user-content ul li,
.user-content ol li
{
	text-indent: 0px;
	margin-left: 15px;
}

.user-content ul li {
	list-style: disc;
}

.user-content ol li {
	list-style: decimal;
	margin-left: 12px;
}