/*--------------------------------------
|              CSS RESET
----------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/*--------------------------------------
|              PROPERTIES
----------------------------------------*/

// LESS COLORS

@black: #000000;
@darkgrey: #333333;
@grey: #666666;
@lightgrey: #999999;
@lightergrey: #c4c4c4;
@almostwhite: #e1e1e1;
@white: #fff;
@background: #ffffff;
@contentbg: #f1f1f1;
@link: #333333;
@linkhover: #000000;
@linkborder: #666666;
@linkborderhover: #000000;
@bordercolor: #e6e6e6;

/*--------------------------------------
|              GLOBAL
----------------------------------------*/
body { color: @grey; font-size: 11px; }
a:link, a:visited { color: @link; text-decoration: underline; line-height: 14px; }
a:hover { color: @white; background: @black; text-decoration: underline; line-height: 14px; }
a:active { background: #f7e300; color: @black; }
p { line-height: 14px; padding-bottom: 17px; }

#wrapper { width: 1031px; font-family: Helvetica, Arial, sans-serif; padding-bottom:60px; display:none; }

.col1 { left: 25px; width:220px; }
.col2 { left: 258px; }
.col2-4 { left: 258px; width: 450px; }
.col3 { left: 430px; }
.col4 { left: 601px; }
.col5 { left: 773px; width: 220px; }

h3 { font-weight:bold; color:@darkgrey; font-size:11px; padding-bottom: 15px; }
h3.push { padding-top:10px; }

/*--------------------------------------
|              CONTACT
----------------------------------------*/

#contact { width: 1031px; background: @contentbg; height: 5px; position:relative; }
#contact-info { display:none; position:absolute; top: 20px; }
#contact-info div { position:absolute; }

/*--------------------------------------
|              HEADER
----------------------------------------*/

#header { background: @background; border-bottom: 1px solid @bordercolor; width: 1031px; height: 152px; display:block; position:relative; top:0px; left:0px; }
	#logo { position: absolute; top: 0px; left:0px; }
		#logo a { border:0px; }
	#navigation { position: absolute; }
	#navigation a:link, #navigation a:visited { border:0; text-decoration:none; }
	#navigation a:hover { color: @lightgrey; background: @white; }
	
	/*.nav-item { position:relative; top:37px; width: 162px; height: 44px; float:left; border-bottom: 1px solid @bordercolor; margin-right: 11px; }*/
	.nav-item { position:absolute; top:37px; width: 162px; height: 44px; float:left; border-bottom: 1px solid @bordercolor; }
		.nav-item a { font-weight:bold; text-transform:uppercase; }
		.nav-item span { display:block; position:relative; top:5px; font-size: 10px; }
	.nav-item.last { margin: 0; }
	
	#short-info { position:relative; top: 108px; font-size: 10px; font-weight:bold; z-index:99px; color: @lightgrey; }	
		#short-info div { position:absolute; }
		#short-info p { line-height: inherit; }

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

#content { position:relative; background: @contentbg; float:left; }
	#selected-case  { position:relative; margin-bottom: 1px; float:left; border-bottom: 1px solid @almostwhite; }
	#selected-case #scroll-left a:link, #selected-case #scroll-right a:link { position:absolute; top: 175px; z-index:100; height: 41px; width: 24px; display:block; overflow:hidden; text-indent: -9999px; border:0; }
	#selected-case #scroll-left a:link { background:url(../imgs/arrows_sprite.gif) 0 0; }
	#selected-case #scroll-left a:hover { background:url(../imgs/arrows_sprite.gif) 24px 0; }
	#selected-case #scroll-right a:link { background:url(../imgs/arrows_sprite.gif) 0 41px; right:0px; }
	#selected-case #scroll-right a:hover { background:url(../imgs/arrows_sprite.gif) 24px 41px; right:0px; }
	#selected-case #case-content { height: 385px; width:1031px; overflow:hidden !important; cursor: url("img/hand.cur"), url("img/hand.gif"), move; }
	#selected-case #case-content #case-images { width:20000px; }
	#selected-case #case-content #case-images img { float:left; }
	
	#selected-case #case-information { position:relative; padding-bottom: 30px; padding-top:25px; float:left; }
	#selected-case .col2-4 {width: 420px;}
	#selected-case #case-information div { position:absolute; }
	
	#content #case-listing { display:none; clear:both; float:left; background:url(../imgs/caselisting_bg.gif) top left repeat-y; }
	#content .case { float: left; height: 125px; width: 257px; overflow: hidden; position: relative; margin-right:1px; margin-bottom:1px; }
	#content .case.last { margin-right:0px; }
	#content .case a { text-decoration:none; }
	#content .case .details { color: @white !important; font-weight:bold; font-size: 11px; padding-top: 47px; }
	#content .case .details h4 { text-transform:uppercase; }
	#content .case .details p { font-style:italic; font-weight:normal; color: @grey; padding-top: 3px; }
	
	#content #about-page { width: 1031px; position:relative;  }
	#content #about-image { height: 428px; }
	#content #about-information { height: 125px; padding-top:30px; }
	#content #about-information div { position:absolute; }

/*--------------------------------------
|              FOOTER
----------------------------------------*/

#footer { position:relative; clear:both; border-top: 1px solid @bordercolor; }
	#footer #mt-logo { position:absolute; top: 19px; left:25px; border:0px; }
	#footer #mt-logo a { border:0px; }
	#footer #copyright { position:absolute; top:26px; left:94px; color: @lightergrey; font-weight:bold; }

/*--------------------------------------
|              MOSAIC
----------------------------------------*/

	/*General Mosaic Styles*/
	.mosaic-block {
		float:left;
		position:relative;
		overflow:hidden;
		height: 125px; width: 257px;
		background: url(../imgs/progress.gif) no-repeat center center;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);
	}
	
	.new-tag {position:absolute; z-index:99; padding:3px 5px; background: #f7e300; color: #000; font-weight:bold;}

		.mosaic-backdrop {
			display:none;
			position:absolute;
			top:0;
			height: 125px; width: 257px;
			
		}

		.mosaic-overlay {
			text-align:center;
			display:none;
			z-index:5;
			position:absolute;
			height: 125px; width: 257px;
			background:#111;
			background:url(../imgs/bg-black.png);
		}

			.case .mosaic-overlay {
				opacity:0;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
				filter:alpha(opacity=00);
				background:url(../imgs/bg-black.png);
			}