@charset "utf-8";
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

body{
	font: 83%/1.4 arial, helvetica, sans-serif;
	background-color: #33383c;
	background-image: url(../img/body_bg.gif);
	background-repeat: repeat-y;
	background-position: center;
}

.main_container{
	background-color: #FFF;
	padding: 2px;
}

.site_header{
	height:80px;
	background:#181e22;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #95a6b1;
	border-bottom-color: #95a6b1;
}
.main_nav{
	height:30px;
	background-color: #14353A;
}

/*social header bar*/
#socialheadercontainer{
	height:35px;
	font-size:11px;
	background-color: #000;
	background-image: url(../img/header/socialbar_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
	color: #000;
	letter-spacing: 1px;
	word-spacing: 20px;
	margin: 0;
	padding: 0;
	}
#socialiconblock {
	margin:0;
	float:right;
	padding: 0;
	width: 85px;
	}
#socialiconblock a{
	margin:0 0 0 0;
	padding:0 0 0 0;
	display:block;
	text-decoration:none;
	float:left;
	color:#999;
	}
#socialiconblock a:hover{
	background-position:right -35px;
	}
#socialiconblock .btn_facebook{
	margin:0 0 0 0;
	padding:0 0 0 0;
	width:34px;
	height:35px;
	text-indent:-9999px;
	background-image: url(../img/header/socialbar_facebook.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
#socialiconblock .btn_twitter{
	width:35px;
	height:35px;
	text-indent:-9999px;
	margin: 0;
	padding: 0;
	background-image: url(../img/header/socialbar_twitter.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

.deep4d #container {
	width: 883px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border: 1px solid #000;
	background-color: #FFF;
	}      /* accounts for white "border" around everything
}
.deep4d #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.deep4d-wide #container {
	width: 100%;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border: 1px solid #000;
	background-color: #FFF;
	color: #FFF;
}




.d4d_content {
	min-height:300px;
	height:100% !important;
	height:300px;
	font-size:90%;
}
.home-container {
	background-color: #4E4E4E;
	float: left;
	width: 867px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #000;
	margin-bottom: 6px;
	font-weight: normal;
	color: #0B2744;
	padding-top: 16px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	border-bottom-color: #000;
	border-bottom-width: 1px;
}

.home-container a:link,.home-container a:visited,.home-container a:active,.home-container a:hover{
	color:#fff;
	text-decoration:underline;
}
.home-left {
	float: left;
	width: 385px;
	height: 385px;
	background-color: #4E4E4E;
	background-image: url(../img/home-left.jpg);
	padding: 0px;
}
.home-left-sub {
	padding-left: 36px;
	padding-top: 36px;
}

.home-right {
	float: left;
	width: 465px;
	background-image: url(../img/home-right.jpg);
	height: 415px;
}
.home-right-sub {
	padding-top: 30px;
	padding-right: 24px;
	padding-bottom: 24px;
	padding-left: 30px;
}




/* FLOATER */
#trailimageid {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 286px;
	height: 1px;
	z-index: 1000;
}

a{
	outline:none;
}

a:link, a:visited, a:active{
	color:#3366ff;
	text-decoration:none;
}

a:hover{
	color:#3366ff;
	text-decoration:underline;
}
.subjects {
	background-image: url(../art/subjects_fill.png);
}


.page_header{
	height:40px;
	line-height:20px;
	font-size:11.5px;
	color:#e8edf3;
	background-color: #010101;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 17px;
}
.tutorial-container {
	background-color: #81919E;
	float: left;
	width: 867px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #000;
	padding: 8px;
	margin-bottom: 6px;
	font-weight: bold;
	color: #0B2744;
}
.tutorial-container-wide {
	background-color: #81919E;
	width: 99.4%;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #000;
	margin-bottom: 6px;
	font-weight: bold;
	color: #0B2744;
	float: left;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-right: 0px;
}


.tutorial-container a:link, a:visited, a:hover, a:active  {
	color: #0B2744;
	text-decoration: underline;
}

.tut-left {
	float: left;
	width: 425px;
}
.tut-right {
	float: right;
	width: 425px;
}
.tut-box a:link, .tut-box a:visited, .tut-box a:active{
	color:#0B3B73;
	text-decoration:underline;
}
.tut-box {
	border: 1px solid #B5F2E1;
	padding: 6px;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
	font-weight: normal;
	color: #0B2744;
	height: 85px;
}


.site_footer{
	width: 853px;
	text-align:left;
	color:#000;
	font-size:11px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #4E4E4E;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 12px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #919191;
}

.site_footer a:link,.site_footer a:visited,.site_footer a:active,.site_footer a:hover{
	color:#fff;
	text-decoration:underline;
}
.site_footer-wide {
	width: 100%;
	text-align:left;
	color:#000;
	font-size:11px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #4E4E4E;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 12px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #919191;
}
#bottom-cover-wide {
	background-color: #33383C;
	height: 600px;
}


.deep4d #footer {
	background:#404A53;
	padding-top: 0;
	padding-right: 16px;
	padding-bottom: 0;
	padding-left: 750px;
	font-size: 11px;
	margin-top: 8px;
	line-height: 20px;
	text-align: right;
	vertical-align: middle;
	color: #FFF;
}
.deep4d #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#wide-footer {
	color: #FFF;
	background-color: #42535E;
	font-size: 11px;
	text-align: right;
	vertical-align: middle;
	padding-right: 16px;
	padding-bottom: 5px;
	padding-left: 750px;
	line-height: 20px;
}



.vid640x480 {
	float: left;
	width: 640px;
	height: 480px;
}
.vid640x480-notes-right {
	float: right;
	width: 215px;
	height: 480px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
}
.tut-logo {
	float: left;
}
.tut-about {
	height: 80px;
}

.vid-large-notes-right {
	float: left;
	width: 450px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
	padding-left: 30px;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: 0px;
}
.vid1024x768 {
	float: left;
	width: 1024px;
	height: 768px;
}
.mp4-large-notes-right {
	float: left;
	width: 450px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
	padding-left: 30px;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: 68px;
}