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

/***** h1,h2,h3,p etc. *****/

p {margin-bottom: 10px; line-height: 15px;}
h1 {font-size: 12px; font-weight: bold; margin: 0;}

a:LINK {color:#FFF; text-decoration: none;}
a:VISITED {color:#FFF; text-decoration: none;}
a:HOVER {color:#FFF; text-decoration: underline;}

/***** RESET & BODY *****/

* {margin: 0; padding: 0; border: none; outline: none;}

body, html,#bg, #bg table, #bg td {margin: 0px auto 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; width: 100%; height: 100%; overflow: hidden; }

/***** END BODY *****/	
#lightbox {background:#000; width:100%; height:100%;
filter: alpha(opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
 display:none;
 z-index:10000000;
}


/***** BACKGROUND IMAGE (SCALING ETC.) & PAGE CLASSES *****/

#holder{position:absolute;width:200%;height:100%;top:0;left:-50%}
#holder[id]{display:table}
#holder div{position:absolute;left:0;top:50%}
#holder[id] div{display:table-cell;vertical-align:middle;position:static}
#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode:bicubic;width:100%;visibility:hidden;}
*:first-child+html #holder div{position:absolute}/*force IE 7 back to position:absoulte*/


	/***** body classes *****/

	.aboutpage p, .aboutpage h1 {
	color:#787878;
}
	
	.aboutcontent {
	width: 300px;
	height: 385px;
	float: left;
	margin-left: 110px;
	font-size: 11px;
	color: #787878;
}
	
	/***** end body classes *****/
		
/***** END BACKGROUND IMAGE (SCALING ETC.) & PAGE CLASSES *****/	

/***** CONTENT FORMATTING *****/

/* little black book */

.split {width: 50%; float: left;}

/* end little black book */

/* contact us */
form {margin-top: 20px;}
label {
	float: left;
	margin-right: 10px;
	margin-bottom: 6px;
	line-height: 17px;
	width: 220px;
}
input {margin-right: 18px; height: 13px; padding: 3px; font-size: 11px; color:#8e8e8e; width: 150px; float: right; font-size: 10px;}
textarea { float: right; width: 150px; margin-right: 18px;padding: 3px; font-size: 11px; color:#8e8e8e; height: 80px;font-family: Arial, Helvetica, sans-serif; font-size: 10px;}

.submit {
	float: right;
	clear: both;
	font-size: 9px;
	font-weight: bold;
	color:#8e8e8e;
	background:#FFF;
	margin-right: 61px;
	padding: 2px 3px 2px 3px;
	height: 19px;
	width: 50px;
	font-family: Arial, Helvetica, sans-serif;
}

/***** END CONTENT FORMATTING *****/

/***** CONTAINERS *****/


#cont {position:absolute;width: 100%;height: 100%;top:0;left:0;z-index:0;overflow-x: hidden;}
#maincontainer {width: 1000px; height: 610px; margin: 0 auto; position: relative;}
#bottomcontainer {width: 900px; float: left;}

#logo {width: 235px; height: 110px; float: left; margin: 30px;}

#nav {width: 108px; float: left; margin-left: 67px;}

	/***** navigation *****/
	
	#nav ul {float: left;}
	#nav ul li {list-style: none; line-height: 16px;}
	#nav ul li a {font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; color:#c5b9b2; text-decoration: none; font-size: 11px;}
	#nav ul li a:HOVER {text-decoration: underline;}
	#nav .active {color:#FFF;}
	
	/***** end navigation *****/
	
#content {
	width: 263px;
	height: 385px;
	float: left;
	margin-left: 110px;
	font-size: 11px;
}
#content2 {
	width: 443px;
	height: 385px;
	float: left;
	margin-left: 110px;
	font-size: 11px;
}

#content2 strong
{
	font-size:12px;
}
.blackbook {width: 400px;}

#copyright {width: 500px; float: left; clear: both; margin-left: 67px; margin-top: 20px;}
#copyright img {margin-bottom: -1px;}

/***** END CONTAINERS *****/

/***** GALLERY *****/

#gallery {width: 100%; position: absolute; margin-top: 230px;}

#dock2 {

	width: 100%;

	bottom: 0px;

	position: absolute;

	left: 0px;
	
	margin-top: -300px;

}

.dock-container2 {

	position: absolute;

	height: 110px;

z-index: 999;

	padding-left: 20px;
	width: 100%;

}

a.dock-item2 {

	display: block; 

	font: bold 12px Arial, Helvetica, sans-serif;

	width: 40px; 

	color: #000; 

	bottom: 0px; 

	position: absolute;

	text-align: center;

	text-decoration: none;

}

.dock-item2 span {

	display: none;

	padding-left: 20px;

}

.dock-item2 img {

	border: none; 

	margin: 5px 10px 0px; 

	width: 85%; 

}

/***** END GALLERY *****/

/***** LIGHTBOX *****/

.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;width:372px;
			position: absolute;
			top: 5%;
			left: 55%;
			padding: 8px;
			border: 4px #000;
			right:auto;
			background: url(../images/transparency.png) repeat;
			z-index:1002;
			overflow: hidden;
			
		}
		
		.white_content h1 {
		color:#FFF;
		font-size: 13px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-left: auto;
		margin-right: auto;
		width: 290px;
		}
			
		.white_content h2 {
		color:#FFF;
		font-size: 9px;
		text-align: center;
		width: 290px;
		margin-left: auto;
		margin-right: auto;
		}
		
		a.close {float: right; font-size: 14px; margin-top: -15px;}
		
		.leftalign {float: left; margin-right: 10px; margin-bottom: 10px;}
		
		.white_content p {color:#FFF; width: 400px;}
		.testimonial_title {clear: both;}
		
		
		.testimonial {top: 9%;}
		.testimonial p {width: 370px;}
		
/***** END LIGHTBOX *****/

/***** SCROLLBOX *****/

#motioncontainer {
	width: 100%; /* Set to gallery width, in px or percentage */
	height: 110px; /* Set to gallery height */
	left: 50%;
	margin-top: 360px;
}

#motiongallery {width: 100%;}


/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(../images/cursors/cursor_arrow_left.cur), w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}