@bg-green: #edf4e9;
@body-color: #4c4d4f;
@smallBlockWidth: 140px; 
@smallBlockHeight: 114px; 
@bigBlockWidth: 290px;
@bigBlockHeight: 238px;
@thinBorder: 2px solid #4c4d4f;
@thickBorder: 4px solid #4c4d4f;

html { background: @bg-green; color: @body-color; font-size: 12px; }

#container { /*width: 890px;*/ margin: 0 auto; padding: 0 0 0 30px; overflow: hidden; }

h2 { text-transform: uppercase; font-size: 18px; margin-top: -8px; color: @body-color;  }
ul { padding: 0; list-style: none; margin: 10px 0 0 0; }
li a, li a:visited { color: @body-color; text-decoration: none; }
li a.selected, li a:hover { text-decoration: line-through; }
a { color: @body-color; cursor: pointer; }

#outpanel { width: 100px; background-color: #e6ede2; position: fixed; top: 0; right: 0px; 
	.lng-productions { margin: 10px 0 0 9px; display: block; height: 13px; background: url(../img/overlay-lng-productions-new.png) no-repeat top left; clear: left; float: left; overflow: hidden; width: 72px; text-indent: -99999px; }
	.lng-comingsoon { margin: 10px 0 0 9px; display: block; height: 13px; background: url(../img/overlay-lng-comingsoon-new.png) no-repeat top left; clear: left; float: left; overflow: hidden; width: 72px;
text-indent: -9999px;	}
}

header { float: left; width: 100%; margin-bottom: 30px; width: 890px;
	.logo { margin-top: 20px; float: left; }
	&.home { margin-bottom: 0; background: url(../img/body-bg.jpg) no-repeat top right; }
	#sort-by-item, #sort-by-type { float: left; border-top: @thinBorder; margin: 30px 10px 0 0; padding-top: 10px; }
	#sort-by-item { width: 140px; clear: left; }
	#sort-by-type { width: 190px;
		li { width: 50%; float: left; }
	}

	#about, #contact { float: right; position: relative; overflow: hidden; font-size: 11px; }
	#about { width: 340px; }
	#contact { width: 140px; margin-left: 10px; }
	#about .two-cols, #contact div { display: block; opacity: 0; position: absolute; top: 30px; left: 0; width: 100%; }
	#about h2, #contact h2 { border-top: 2px solid #4c4d4f; padding-top: 2px; margin-top: 146px; margin-bottom: 0; }
	.col { float:left; width: 165px!important; }
	.col:first-child { margin-right: 10px; }
}

#content-hr { border-top: @thickBorder; padding-top: 10px; margin-top: 20px; float: left; width: 100%; }
#content { float: left; width: 890px;
	&.home { width: 100%;  }
	.item { position: relative; margin: 0 0 10px 0; overflow: hidden;
		img { position: absolute; top: 0; left: 0; z-index: 1; opacity: 1; }
		h2 { margin-top: 0px; }
		.info { position: relative; padding: 10px; z-index: 100; opacity: 0; 
			p { margin: 0; color: #fff;}
/*			p.details { margin-bottom: 10px;}*/
			a { color: #fff; font-weight: bold; }
		 }
	}
	.case-study { width: @bigBlockWidth; height: @bigBlockHeight; background-color: #ceebec; float: left; overflow: hidden;
		.info { width: 270px; min-height: 195px;  background: url(../img/case-study-info-bg.png) no-repeat top left; }
	}
	.featured-work { width: @smallBlockWidth; height: @smallBlockHeight; background-color: #ceebec; float: left;
		.info { width: 120px; height: 94px;  background: url(../img/featured-work-info-bg.png) no-repeat top left; }
	}
	.news { width: @smallBlockWidth; height: @smallBlockHeight; background-color: #bee0a9; float: left; color: #4c4d4f; text-decoration: none!important; 
		img { opacity: 0.2; position: absolute; top: 0; left: 0; z-index: -1; }
		p { margin: 0; }
		.news-content { padding: 10px 10px 0 10px; height: 80px; position: relative; 
			p.headline { font-weight: bold; text-transform: uppercase; }
			div.excerpt p { }		
			.read-more { margin-top: 10px; text-transform: uppercase; font-size: 10px; }
		}
		p.date { font-size: 10px; color: #000; padding: 0 10px 10px; text-transform: uppercase; }	
		&.extended { height: @bigBlockHeight; 
			.news-content { height: 208px; }
			p.headline { /*height: 230px;*/ }
		}
	}
	
	.client { float: left; width: 100%; margin-bottom: 20px; 
		.info, .graphics { border-top: 4px solid #4c4d4f; padding-top: 20px; } 
		.info { float: left; width: 340px; 
			p.details { margin: 0; }
			a { color: @body-color; text-decoration: none; }
			a:first-child { text-decoration: underline; }
		}
		.graphics { float: right; width: 540px;
			img { float: left; margin-bottom: 20px; }
		 }
	}
	
	/*News Single Pages - swap the width of the info and image areas
	#news.client { 
		.info { width: 540px; }
		.graphics { width: 320px; }
	}*/
}

footer, #affiliate { float: left; border-top: @thickBorder; padding-top: 10px; margin-top: 0px; margin-bottom: 50px; }
footer { width: 760px; 
	h2 { margin-bottom: 0; }
	ul { float: left; width: 180px; margin-right: 20px; }
	ul:first-child { display: none; }
	li a { text-decoration: none; }	
	li a:hover { text-decoration: line-through; }
}

#affiliate { width: 110px; padding-left: 20px;
	p { margin: 98px 0 10px; }
}

.video { margin-bottom:  20px; } 


/*Stuff for Isotop*/
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}