@charset "utf-8";
/* CSS Document */

@import url("reset.css");

/* ------ ([ Global Styles ]) ------ */

html {width: 100%; height: 100%;}

body {
	background: #fff;
	padding: 0; margin: 0 0 30px 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
	font-size: 11px;
	line-height: 1.2em;
	display: block;
	width: 100%; height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

h1 {
	letter-spacing: 6px;
	font-weight: normal;
	font-size: 14px;
}

/* ------ ([ Layout Styles ]) ------ */

.wrapper {
	width: 840px;
	position: relative; display: block;
	margin: 0 auto;
}

.header {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	display: block;
	height: 100px;
	border-bottom: 1px solid #cdcccb;
}

.logo {
	position: absolute;
	bottom: 10px; left: 0;
}

.content {
	width: 100%; height: 410px;
	display: block;
	position: relative;
	margin: 150px 0 0 0;
	border-bottom: 1px solid #cdcccb;
	float: left; clear: both;
}

.leftCol {
	width: 175px; height: 386px;
	display: block;
	position: relative;
	padding: 0 38px 0 0;
	float: left;
    overflow:auto;
}

.leftCol .text {
	width: 175px;
	display: block;
	position: absolute;
	top: 30px; left: 0;
}

.contentLoad {
	background: #fff no-repeat center center url(../images/ajax-loader.gif);
	position:absolute; top: -10px; left: 0;
	width: 100%; height: 100%;
	display: block; z-index: 997;
}

.ajaxLoad {
	background: #fff no-repeat center 200px url(../images/ajax-loader.gif);
	position:absolute; top: -10px; left: 0;
	width: 100%; height: 100%;
	display: block; z-index: 998;
}

#ajaxArea {
	display: block; position: relative;
  width: 100%; height: 100%;
	z-index: 1;
	padding: 0 0 45px 0;
}

/* ------ ([ Navigation Styles )] ------ */

.navigation {
	position: absolute;
	bottom: 10px; right: 0;
}

.navigation ul li {
	text-align: right;
	list-style: none;
	margin: 5px 0 0 0;
}

.navigation ul li a {
	color: #999;
	font-weight: 200;
	letter-spacing: 6px;
	text-decoration: none;
	font-size: 14px;
	text-transform: lowercase;
	padding: 0; margin: 0;
}

.navigation ul li a:hover, .navigation ul li a.active {
	color: #333;
}

/* ------ ([ Gallery Styles ]) ------ */

.gallery1 {
	width: 627px; height: 400px;
	position: relative;
	float: right;
}

.gallery1 .galleryFrame {
	width: 627px; height: 380px;
	position: absolute; top: 0; left: 0;
	background: #fff;
}

#layer1, #layer2, #layer4, #layer5 {
	position: absolute;
	top: 0; left: 0;
	/* width: 627px; height: 380px; */
	display: block;
}

#layer3 {
	position: absolute;
	bottom: -22px; left: -212px;
	width: 49px; height: 9px;
	display: block;
}

.selector {
	position: absolute;
	right: 0; bottom: 0;
	height: 9px;
	text-align: right;
	display: block;
}

.selSquare {
	width: 9px; height: 9px;
	display: block;
	border: 1px solid #cdcccb;
	margin: 0 0 0 2px;
	float: left;
	background: #fff no-repeat top left url(../images/selSquare.jpg);
	cursor: pointer;
}

.left_arrow, .right_arrow, .left_arrow_disabled, .right_arrow_disabled {
	display: block;
	margin: 1px 2px 0 2px;
	float: left;
	width: 9px; height: 9px;
	cursor: pointer;
	background: no-repeat url(../images/arrows.jpg)
}

.left_arrow, .left_arrow_disabled {background-position: left 1px; margin: 0;}
.right_arrow, .right_arrow_disabled {background-position: right 1px;}

.left_arrow_disabled, .right_arrow_disabled {cursor: default;}

.left_arrow:hover {background-position: left -8px;}
.right_arrow:hover {background-position: right -8px;}

.logoNav {
  width: 100%;
	float: left; clear: both;
	text-align: center;
	margin: 20px 0 40px 0;
}

.browserIE7 .logoNavHolder {
	position: relative;
	top: 20px;
}

.logoNavHolder span {
	height: 20px;
	margin: 0 40px 10px 0;	 float: none; clear: none;
	display: inline-block;
	cursor: pointer;
	filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
}

.logoNavHolder span:hover {
	filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
}

.logoNavHolder {
	width: 100%;
	float: left; clear: both;
	display: block;
	margin: 20px 0 0 0;
}

#leftLogo {
	position: relative;
	/*top: -8px;*/
}

.splash {
	display: block;
	width: 285px; height: 148px;
	background: top left no-repeat url(../images/splash.jpg);
}

.splash:hover {
	background-position: left -152px;
}

.video_button {
	position: absolute; bottom: 0; left: 0;
	display: none;
	cursor: pointer;
    color: #979797;
    border: 1px solid #979797;
    font-size: 12px;
    font-family: arial;
    padding: 3px 7px;
    min-width: 135px;
    text-align: center;
}

.video_button:hover {
    color: #2f2f2f;
    border-color: #2f2f2f;
}

#featuredVideo1 {
    bottom: 27px;
}

#video_wrapper {
	position: absolute;
	display: none;
	top: 0; left: 0;
	width: 627px; height: 380px;
	background: #fff;
}

#retina{
	/* The Retina effect */
	background:url('../images/logo.jpg') no-repeat center center white;
	border:2px solid white;

	/* Positioned absolutely, so we can move it around */
	position:absolute;
	height:180px;
	width:180px;
    z-index: 9999;

	/* Hidden by default */
	display:none;

	/* A blank cursor, notice the default fallback */
	cursor:url('../images/blank.cur'),crosshair;

	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	-webkit-box-shadow:0 0 5px #777;
	box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

	/* CSS3 rounded corners */
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	border-radius:90px;
}

#retina.chrome{
	/* A special chrome version of the cursor */
	cursor:url('../images/blank_google_chrome.cur'),default;
}