@charset "UTF-8";
img, embed, video { max-width: 100%; height: auto; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width: 100%; }
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 3px; padding-right: 3px; padding-bottom: 3px; background-color: #666; }
#kdheader { clear: none; float: left; margin-left: 0; margin-right: 20%; display: block; background-color: #9A9A9A; }
#headerleft { clear: none; float: left; margin-left: 0;  width: 100%  display: block;
background-color: #9A9A9A; }
#headercenter { clear: none; float: left; margin-left: 0; width: 96%; display: block; background-color: #9A9A9A; padding-left: 2%; padding-right: 2%; font-size: 80%; text-align: center; }
#top { clear: none; float: left; margin-left: 0; width: 100%; display: block; background-color: #9A9A9A; }
#kdnav { clear: both; float: left; margin-left: 0; width: 100%; display: block; background-color: white; }
#content { clear: none; float: left; margin-left: 0; width: 100%; display: block; background-color: #FFFFFF; }
#center { clear: none; float: left; margin-left: 0; width: 90%; display: block; padding-left: 2%; padding-right: 2%; text-align: center; }
.embed-container { height: 715px; width: 100%; overflow: hidden; position: relative; }
.embed-container object { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.embed-container iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#footer { clear: both; float: left; margin-left: 0; width: 96%; display: block; text-align: center; background-color: #9A9A9A; padding-left: 2%; padding-right: 2%; }
/* nav */ 
nav { background-color: #fff; color: #888; display: block; overflow: hidden; width: 96%; padding-left: 2%; padding-right: 2%; }
nav ul { margin: 0; padding: 0; }
nav ul li { display: inline-block; list-style-type: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
nav > ul > li > a > .caret { border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; display: inline-block; height: 0; width: 0; vertical-align: middle; -webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear; -o-transition: color 0.1s linear; transition: color 0.1s linear; }
nav > ul > li > a { color: #fff; display: block; line-height: 56px; padding: 0 24px; text-decoration: none; }
nav > ul > li:hover { background-color: rgb( 40, 44, 47 ); }
nav > ul > li:hover > a { color: #FFF; }
nav > ul > li:hover > a > .caret { border-top-color: #FFF; }
nav > ul > li > div { background-color: #fff; border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 2px 2px -1px #FFF; display: none; margin: 0; opacity: 0; position: absolute; width: 165px; visibility: hidden; z-index: 100; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; }
nav > ul > li:hover > div { display: block; opacity: 1; visibility: visible; }
nav > ul > li > div ul > li { display: block; }
nav > ul > li > div ul > li > a { color: #fff; display: block; padding: 12px 24px; text-decoration: none; }
nav > ul > li > div ul > li:hover > a { background-color: #FFF; }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer { width: 90.675%; }
#LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#kdheader { clear: both; float: left; margin-left: 0; width: 100%; display: block; background-color: #9A9A9A; padding: 5px; }
#headerleft { clear: none; float: left; margin-left: 0; width: 100%; display: block; background-color: #9A9A9A; }
#headercenter { clear: none; float: left; margin-left: 0; width: 96%; display: block; background-color: #9A9A9A; padding-left: 2%; padding-right: 2%; font-size: 105%; text-align: center; }
#center { clear: none; float: left; margin-left: 0; width: 90%; display: block; }
.embed-container { height: 715px; width: 100%; overflow: hidden; position: relative; }
.embed-container object { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.embed-container iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#footer { clear: both; float: left; margin-left: 0; display: block; background-color: #9A9A9A; }
}

/* Desktop Layout: 769px to a max of 1024px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer { width: 88.5%; max-width: 1124px; }
#LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#kdheader { clear: both; float: left; margin-left: 0; width: 100%; display: block; background-color: #9A9A9A; padding: 5px; }
#headerleft { clear: none; float: left; margin-left: 0%; width: 450px; height: 115px; display: block; background-color: #9A9A9A; }
#headercenter { clear: none; float: left; margin-left: 0; width: 50%; height: 115px; display: block; background-color: #9A9A9A; padding-left: 2%; padding-right: 2%; font-size: 105%; text-align: left; }
#center { clear: none; float: left; margin-left: 0; width: 92%; display: block; text-align: center; }
.embed-container { width: 620px; height: 715px; overflow: hidden; position: relative; }
.embed-container object { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#footer { clear: both; float: left; margin-left: 0; display: block; background-color: #9A9A9A; }
}