/************************** HEADER SUBNAVIGATION ***********************************/
#Container #SubNavigation {
	width: 100%;
	height: 45px;
	overflow: hidden;
	background-image: url("../images/SubNavigationBackground.jpg");
	
	transition: height 1s;
	-webkit-transition: height 1s;
}

#Container.hiddenSubMenu #SubNavigation {
	height: 0px;
}

#Container #SubNavigation ul {
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 1100px;
	margin: 0 auto;
}

#Container #SubNavigation ul li {
	float: left;
	padding: 12px 15px;
	height: 21px;
	
	transition: opacity 0.5s 0.5s;
	-webkit-transition: -webkit-transform 1s 0s, opacity 0.5s 0.5s;
	-webkit-transition-timing-function: ease-out;
}

#Container #SubNavigation ul li.selected {
	background-image: url("../images/SubNavigationPointer.png");
	background-repeat: no-repeat;
	background-position: bottom center;
}

#Container #SubNavigation ul li:first-child {
	width: 190px;
	padding: 12px 20px;
	text-align: center;
}

#Container #SubNavigation ul li:nth-child(2) {
	padding-left: 0;
}

#Container #SubNavigation.outgoing ul li {
	-webkit-transform: translateX(200%);
	opacity: 0;
	
	-webkit-transition: -webkit-transform 1s 0s, opacity 0.5s 0s;
	-webkit-transition-timing-function: ease-in;
}

#Container #SubNavigation.outgoing ul li:first-child {
	-webkit-transform: translateX(-200%);
}

#Container #SubNavigation.outgoing ul li:nth-child(2) {
	-webkit-transform: none;
}

#Container #SubNavigation ul li div.seperator {
	width: 1px;
	height: 100%;
	background-color: #FFF;
}

#Container #SubNavigation ul li a {
	font-family: "CopperplateGothicLightRegular", Verdana, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFF;
	font-weight: lighter;
}

#Container #SubNavigation ul li a:hover {
	color: rgb(63,130,239);
}


/************************** Graphic Overlay ***********************************/
#Container #GraphicOverlay {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(0,0,0,0.2);
	
	transition: opacity 1s, background-color 1s;
	-webkit-transition: opacity 1s, background-color 1s;
}

#Container #GraphicOverlay.hidden {
	visibility: hidden;
	overflow: hidden;
	height: 0;
	width: 0;
	opacity: 0;
}

#Container #GraphicOverlay #OverlayCloser {
	height: 100%;
	width: 100%;
}

#Container #GraphicOverlay #OverlayContainer {
	position: absolute;
	text-align: center;
	padding: 30px;
	background-color: white;
	height: 100px;
	width: 100px;
	top: 0;
	left: 0;
	
	border-radius: 10px;
	box-shadow: rgba(0,0,0,0.7) 0 2px 10px, inset rgba(0,0,0,0.5) 0 -2px 5px;
	transition: height 1s, width 1s, left 1s, top 1s;
	
	-moz-border-radius: 10px;
	-moz-box-shadow: rgba(0,0,0,0.7) 0 2px 10px, inset rgba(0,0,0,0.5) 0 -2px 5px;
	
	-webkit-border-radius: 10px;
	-webkit-box-shadow: rgba(0,0,0,0.7) 0 2px 10px, inset rgba(0,0,0,0.5) 0 -2px 5px;
	-webkit-transition: height 1s, width 1s, left 1s, top 1s;
}

#Container #GraphicOverlay.loading #OverlayContainer {
	transition: height 1s, width 1s;
	-webkit-transition: height 1s, width 1s;
}

#Container #GraphicOverlay #OverlayContainer a {
	width: 30px;
	height: 30px;
	position: absolute;
	left: -15px;
	top: -15px;
	opacity: 0;
	background-image: url("../images/close.svg");
	
	border-radius: 15px;
	box-shadow: rgba(0,0,0,0.5) 0 2px 5px;
	transition: opacity 1s, box-shadow 1s;
	
	-moz-border-radius: 15px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 2px 5px;
	
	-webkit-border-radius: 15px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 5px;
	-webkit-transition: opacity 1s, -webkit-box-shadow 1s;
}

#Container #GraphicOverlay #OverlayContainer:hover a {
	opacity: 1;
	
	box-shadow: rgba(0,0,0,0.5) 0 2px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 2px 10px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 10px;
}

#Container #GraphicOverlay #OverlayContainer #OverlayContent {
	background-image: none;
}

#Container #GraphicOverlay.loading #OverlayContainer #OverlayContent {
	background-image: url("../images/LoadingIndicator.gif");
	background-repeat: no-repeat;
	height: 100px;
	width: 100px;
}

#Container #GraphicOverlay #OverlayContainer #OverlayContent img {
	transition: opacity 1s 1s;
	-webkit-transition: opacity 1s 1s;
}

#Container #GraphicOverlay.loading #OverlayContainer #OverlayContent img,
#Container #GraphicOverlay.hidden #OverlayContainer #OverlayContent img {
	opacity: 0;
	visibility: hidden;
}


/************************** FOOTER COPYRIGHT ***********************************/
#Container #Footer.bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
}

#Container #Footer #Copyright {
	width: 100%;
	position: relative;
	text-align: center;
	overflow: hidden;
	padding: 15px 0;
	
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

#Container #Footer #Copyright a {
	font-family: "CopperplateGothicLightRegular", Verdana, Helvetica, sans-serif;
	font-size: 15px;
	letter-spacing: 5px;
}