/* general definitions                    */
html{
	width: 100%;
	height: 100%;
}
body{
	position: relative;
	width: 100%;
	height: 100%;
}
p {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #111111;
	font-weight: bold;
}
p.quote {
	color: rgb(240, 240, 0);
	margin: 0px;
}
*/
h1, h2, h3 {
	font-family: Arial, sans-serif;
	color: #111111;
	font-weight: bold;
}
span, a, ul, ol, table, td, tr, th, tbody, thead, form, fieldset, input, select, hr {
	margin: 0px;
	padding: 0px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #000;
	font-weight: normal;
}
a:link, a:visited { 
	outline: none;
	color: #ffffff;
	font-style: normal;
	text-decoration: underline;  
}  
a:active, a:hover { 
	color: #3d4242;  
}
img {  
	border: 0px;  
}
/******************************************/
/* layout                                 */
#viewport {
	position: absolute;
  	margin-left: 10%;
  	text-align:left;
	overflow: hidden;
	width: 1000px;
	height: 800px;
	background-color:transparent;
	left: 0px;
}
#background{
    position: absolute;
    /*background: transparent url(../img/Clouds8.png) repeat-x;*/
    background-size: 1200px;
    background-position:center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
	left: 0px;
}
#background2{
	position: absolute;
    /*background: transparent url(../img/Clouds-front8.png) repeat-x;*/
	background-size: 1200px;
	background-position:center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
	left: 0px;
}
#midground{
	position: absolute;
    background: transparent url(../img/Static-Background.jpg) repeat-x; /*Road8.png*/
	background-size: 1300px;
	background-position:center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
	left: 0px;
}
#midground2{
	position: absolute;
    background: transparent url(../img/TitleStrap8.png) repeat-x;
	background-size: 1200px;
	background-position:center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
	left: 0px;
	top:-140px;
}
#foreground{
	position: absolute;
	bottom: -230px;
	left: -250px;
	z-index: 301;
    background: transparent url(../img/Stephi-small8.png) no-repeat;
	background-size: 600px;
    background-position-x:inherit;
    margin: 0;
    padding: 0;
    width: 600px;
    height: 650px;
}
#logo{
	position: absolute;
	top: 775px;
	left: 850px;
	z-index: 0;
	background: transparent url(../img/SeguinFF-white.png) no-repeat;
	background-size: 120px;
	margin: 0;
	padding: 0;
	width: 120px;
	height: 64px;
}
#doveLogo{
	position: absolute;
	top: 750px;
	left: 330px;
	z-index: 0;
	background: transparent url(../img/Dove-Seal-Family-Approved.png) no-repeat;
	background-size: 100px;
	margin: 0;
	padding: 0;
	width: 120px;
	height: 120px;
}
* html #midground{background: none;}
* html #foreground{background: none;}
#wrapper{
	position: relative;
	margin: 0px auto 0px auto;
	padding: 100px 0px 0px 0px;
	width: 864px;
	z-index: 200;
}
div.scroll {
	overflow: auto;
	background-color: rgba(255,255,255,0.45);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/75p_white.png');
	position:absolute;
	width:580px;
	height:350px;
	top:0px;
	left:600px;
	border: solid 1px #6d6d6d;
	padding-right: 10px;
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 5px;
	z-index:299px;
}
div.scrollmargin {
	overflow: auto;
	background-color: rgba(255,255,255,0.45);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/75p_white.png');
	position:absolute;
	width:580px;
	height:350px;
	top:0px;
	left:600px;
	border: solid 1px #6d6d6d;
	padding-right: 10px;
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 5px;
	z-index:299px;
}
/******************************************/
/* Navigation Bar                         */
#navbar {
	position:relative;
	z-index:300;
}
#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
/* OLD Gray Bar
	background: #8b8b8b; 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
	background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a);
	border: solid 1px #6d6d6d;
*/
	background: #39495A; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#607B98', endColorstr='#39495A'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#607B98), to(#39495A)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #607B98, #39495A); /* for firefox 3.6+ */
	border: solid 1px #425A73;

}
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: right;
	position: relative;
	list-style: none;
}
/* main level link */
#nav a {
	font-size:14px;
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */
	color: #444;
	border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
	z-index:300;
}
/* sub levels link hover */
#nav ul li .current a, #nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	z-index:300;
}
#nav ul a:hover {
/*OLD Blue Hover
	background: #0399d4 !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba');
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important;
	background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important;
*/
	background: #90101C !important; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#90101C', endColorstr='#520808'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#90101C), to(#520808)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #90101C,  #520808) !important; /* for firefox 3.6+ */
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	z-index:300;
}
/* level 2 list */
#nav ul {
	background: #ddd; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */
	display: none;
	margin: 0;
	padding: 0;
	width: 200px;
	position: absolute;
	bottom: 35px;
	right: 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	float:left;
}
/* drop-up */
#nav li:hover > ul {
	display: block;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
	right: 181px;
	bottom: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topright: 3px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
}
/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}
/******************************************/
/* Image viewer box                         */
/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
 @-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
div.box {
	text-align: left;
	position:absolute;
	width:560px;
	height:370px;
	top:210px;
	left:500px;
	margin: 15px auto 0 auto;
	background: #000;
	overflow: hidden;
	border: 8px solid #000;
	-webkit-box-shadow: #131313 0px 2px 10px;
	-moz-box-shadow: #131313 0px 3px 10px;
	box-shadow: #131313 0px 3px 10px;	
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
	z-index: 1;
}
ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	width: 580px;
	height: 400px;
	overflow: hidden;
}
ul#slider li {	
	position: absolute;
	z-index:2;
}
ul#slider li p {
	position: absolute;
	top:0px;
	left: 0;
	z-index: inherit;
	background: rgba(0, 0, 0, .65);
	width: 100%;
}
ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
	font-size:16px;
	color: #FFF;
}
ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	bottom: 0px;
	background: #000;
	overflow: auto;
	width: 560px;
	z-index:10;
}
ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	border: 1px solid #979797;
	width: 60px;
	display: block;
	overflow: hidden;
	float: right;
	margin: 10px 0px 0px 10px;
	opacity: 0.75;
}
ul#thumb a:hover {opacity: 1;}  
/* Animation for the :target image. Slides the image in. 
@-webkit-keyframes moveTarget {
	0% { left:-700px;}
	100% { left:0px;}
}
*/
ul#slider li:target {
	/*-webkit-animation-name: moveTarget; 
	-webkit-animation-duration: .5s; 
	-webkit-animation-iteration-count: 1;*/
	top:0px;
	left: 0px;
	z-index: 10;
}
/*Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
@-webkit-keyframes moveIt {
	0% {left:0px;}
	50% {left:700px;}
	100% {left:-700px;z-index: 5;}
}*/
ul#slider li:not(:target) {
	/*-webkit-animation-name: moveIt; 
  	-webkit-animation-duration: 1.5s; 
  	-webkit-animation-iteration-count: 1;*/
	top:0px;
	left: 0px;
}