/*
	DO NOT change the font size from 0px. It is set that way to fix a design issue, the size of the text for each panel is set later in this document.
*/

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background: #0d1a26 url(dp_layout_img/bg.gif) top left repeat;
	font: 0px Arial, Tahoma, sans-serif;
	/*line-height: 200%;*/
	color: #000;
	/*height:100%;*/
	align: left;
}

#container {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 770px;
	background: url(dp_layout_img/container_bg.png);
	/*height:100%;*/
}

#containerTop {
	margin: 10px auto 0px auto;
	padding: 0px;
	width: 770px;
	height: 20px;
	background: url(dp_layout_img/container_top.png) top left no-repeat;
}

#containerBottom {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 770px;
	height: 20px;
	background: url(dp_layout_img/container_bottom.png) top left no-repeat;
}

#header {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 750px;
	height: 150px;
	background: url(dp_layout_img/header.png) top left no-repeat;
}

/*
	#mainMenu
	Here you can change the font size and face of the text for the menu items.
	If you change the color tag, it will change the color of the seperator characters which is a pipe | by default.
*/
#mainMenu {
	margin: 5px auto 0px auto;
	padding: 0px;
	width: 750px;
	height: 30px;
	background: none;
	font: 17px Arial, Tahoma, sans-serif;
	font-weight: bold;
	color: #6C888A;
}

#subMenu {
	margin: 5px auto 0px auto;
	padding: 0px;
	width: 750px;
	height: 30px;
	background: url(dp_layout_img/menu_bg.png) top left no-repeat;
	font: 14px Arial, Tahoma, sans-serif;
	font-weight: bold;
	text-shadow: #062224;
	color: #fff;
}

#mainMenu ul {
	margin: 0px;
	padding: 0px;
	display: inline;
	list-style-type: none;
}

#subMenu ul {
	margin: 0px;
	padding: 0px;
	display: inline;
	list-style-type: none;
}


#mainMenu li {
	margin: 3px 3px 0px 5px;
	padding: 0px;
	float: left;
	display: inline;
}

#subMenu li {
	margin: 5px 5px 0px 5px;
	padding: 0px;
	float: left;
	display: inline;
}


/*
	#mainMenu a
	If you change the color here, it will change the color of your menu links.
*/
#mainMenu a {
	margin: 0px;
	padding-top: 0px; padding-bottom: 0px;
	padding-left: 1px; padding-right: 1px;
	color: #062224;
	font-weight: bold;
	text-decoration: none;
border-top: 1px dotted #cecece; border-bottom: 2px dotted #ccc;
				border-left: 1px dotted #cecece; border-right: 2px dotted #ccc;

}

a.flag:link, a.flag:visited { border-top: 1px solid #cecece; border-bottom: 2px solid #8a8a8a;
				border-left: 1px solid #cecece; border-right: 2px solid #8a8a8a; }
a.flag:hover { border-bottom: 1px solid #cecece; border-top: 2px solid #8a8a8a;
				border-right: 1px solid #cecece; border-left: 2px solid #8a8a8a; }

#subMenu a {
	margin: 0px;
	padding: 1px;
	/*color: #FF0093;*/
	text-shadow: #000 .1em .1em 0.2em;
	font-weight: bold;
	text-decoration: none;
	/*background: #40575F;*/
	/*border-top: 1px dotted #40575F; border-bottom: 2px hidden #40575F;*/
	/*border-left: 1px dotted #40575F; border-right: 2px dotted #40575F;*/
	color: #fff;

}

/*
	#mainMenu a:hover
	This is the color of the menu links when you hover the mouse over them. Change it to whatever you need.
*/
#mainMenu a:hover {
	color: #FF0093;
border-top: 1px solid #cecece; border-bottom: 2px solid #8a8a8a;
				border-left: 1px solid #cecece; border-right: 2px solid #8a8a8a;
	background: white;

}

#mainMenu a:active {
	color: #FF00A4;
border-bottom: 1px solid #cecece; border-top: 2px solid #8a8a8a;
				border-right: 1px solid #cecece; border-left: 2px solid #8a8a8a;
}



#subMenu a:hover {
/*	color: #FF00A4;*/
	color: #fff;

	text-decoration: underline;

/*	background: #8EAAAC;
border-top: 1px dotted #FF0093; border-bottom: 2px solid #40575F;
				border-left: 1px dotted #FF0093; border-right: 2px solid #40575F;
*/

	text-shadow: #FF0093 .2em .2em 0.1em;

}


#subMenu a:active {
	color: #ffff00;
	/*border-bottom: 1px dotted #40575F; border-top: 2px solid #40575F;*/
	/*border-right: 1px dotted #40575F; border-left: 2px solid #40575F;*/

	text-shadow: #FF0093 .2em .2em 0.1em;

}


#extraMenu {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 750px;
	height: 30px;
	background: none;
	font: 14px Arial, Tahoma, sans-serif;
	font-weight: bold;
	font-style:italic;
	color: #CFCCCD;
}

#extraMenu ul {
	margin: 0px;
	padding: 0px;
	display: inline;
	list-style-type: none;
}

#extraMenu li {
	margin: 0px 11px 0px 11px;
	padding: 0px;
	float: left;
	display: inline;
}

#extraMenu a {
	margin: 0px;
	padding-top: 0px; padding-bottom: 0px;
	padding-left: 1px; padding-right: 1px;
	color: #284446;
	font-weight: bold;
	text-decoration: none;
border-top: 1px dotted #cecece; border-bottom: 2px dotted #ccc;
				border-left: 1px dotted #cecece; border-right: 2px dotted #ccc;

}

#extraMenu a:hover {
	color: #FF0093;
border-top: 1px solid #cecece; border-bottom: 2px solid #8a8a8a;
				border-left: 1px solid #cecece; border-right: 2px solid #8a8a8a;
	background: white;

}

#extraMenu a:active {
	color: #FF00A4;
border-bottom: 1px solid #cecece; border-top: 2px solid #8a8a8a;
				border-right: 1px solid #cecece; border-left: 2px solid #8a8a8a;
}


#sideMenu {
	width: 235px;
	font: 14px Arial, Tahoma, sans-serif;
	font-weight: bold;
	color: #CFCCCD;
}

#sideMenu p {
	margin-left: 0em;
	margin-top: 1em;
	margin-bottom: .5em;
	/*margin: 0px;*/
	padding: 0px;
	text-align: left;
	align: left;
	margin-right: -3em;
}

#sideMenu ul {
	/*width: 235px;*/
	list-style-type: none;
}

#sideMenu li {
	/*width: 235px;*/
	margin: 0px 0px 5px -30px;
	/*margin: 0px;*/
	padding: 0px;
	/*float: left;*/
	/*display: list-item;*/
}

#sideMenu a {
	font: 12px Arial, Tahoma, sans-serif;
	margin: 0px;
	padding-top: 0px; padding-bottom: 0px;
	padding-left: 1px; padding-right: 1px;
	color: #fff;
	background: #40575F;
	font-weight: bold;
	text-decoration: none;
border-top: 1px dotted #666; border-bottom: 2px dotted #40575F;
				border-left: 1px dotted #666; border-right: 2px dotted #40575F;

}

#sideMenu a:hover {
	color: #FF0093;
border-top: 1px solid #cecece; border-bottom: 2px solid #8a8a8a;
				border-left: 1px solid #cecece; border-right: 2px solid #8a8a8a;
	background: white;

}

#sideMenu a:active {
	color: #FF00A4;
border-bottom: 1px solid #cecece; border-top: 2px solid #8a8a8a;
				border-right: 1px solid #cecece; border-left: 2px solid #8a8a8a;
}




/*
	#bodyContainer
	You can change the font here. This will change the font for the left panel and the body panel.
*/
#bodyContainer {
	position: relative;
	float: left;
	left: 0px;
	margin: 0px auto 0px auto;
	display: inline;
	padding: 0px;
	width: 750px;
	background: url(dp_layout_img/body_bg.png);
	font: 13px Arial, Tahoma, sans-serif;
	/*height:100%;*/
}

#bodyContainerPhotos {
	position: relative;
	float: left;
	left: 0px;
	margin: 0px auto 0px auto;
	display: inline;
	padding: 0px;
	width: 750px;
	background: url(dp_layout_img/body_bg_photos.png);
	font: 13px Arial, Tahoma, sans-serif;
	/*height:100%;*/
}

#bodyTop {
	position: relative;
	float: left;
	left: 10px;
	margin: 10px auto 0px auto;
	display: inline;
	padding: 0px;
	width: 750px;
	height: 14px;
	background: url(dp_layout_img/body_top.png) top left no-repeat;
}

#bodyBottom {
	position: relative;
	float: left;
	left: 10px;
	margin: 0px auto 10px auto;
	display: inline;
	padding: 0px;
	width: 750px;
	height: 14px;
	background: url(dp_layout_img/body_bottom.png) top left no-repeat;
}

/*
	#leftPanel
	The font for this left panel is inherited from the #body id. However if you want to have a different color or font
	text here, you may add the color or font tags.
*/
#leftPanel {
	float: left;
	left: 10px;
	margin: 0px auto 0px 0px;
	display: inline;
	padding: 5px;
	width: 235px;
	height: 100%;
	vertical-align: middle;
	color:#ccc;
	font-size:9px;
	font-style:italic;
	/*text-align:center;*/
}

#leftPanel2 {
	color:#ccc;
	font-size:9px;
	font-style:italic;
	text-align:center;
}

/*
	#bodyPanel
	The font for this body panel is inherited from the #body id. However if you want to have a different color or font
	text here, you may add the color or font tags.
*/
#bodyPanel {
	float: right;
	margin: 0px 0px 0px auto;
	display: inline;
	padding: 5px;
	width: 485px;
	text-align:left;
}

#footer {
	clear: both;
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 750px;
	height: 65px;
	background: url(dp_layout_img/footer.png) top left no-repeat;
}

#footer a {
	margin: 0px;
	padding: 1px;
/*	background: #40575F;
	border-top: 1px dotted #40575F; border-bottom: 2px hidden #40575F;
	border-left: 1px dotted #40575F; border-right: 2px dotted #40575F;
*/
}

#footer a:hover {

	color: #fff;
	text-decoration: underline;
	text-shadow: #FF0093 .2em .2em 0.1em;

}

#footer a:active {
	color: #ffff00;
	/*border-bottom: 1px dotted #40575F; border-top: 2px solid #40575F;
	border-right: 1px dotted #40575F; border-left: 2px solid #40575F;
	*/
	text-shadow: #FF0093 .2em .2em 0.1em;

}


/*
	#copyright
	You can change the font or color of the copyright text by modifying those tags here.
*/
#copyright {
	margin: 0px;
	padding: 17px;
	color: #fff;
	font: 11px "Century Gothic", Courier, monospace;
	text-align: right;
}

#copyright a {

	text-shadow: #000 .1em .1em 0.2em;
	font-weight: bold;
	color: #fff;
}


#copyright a:hover {

	color: #fff;
	text-decoration: underline;
	text-shadow: #FF0093 .2em .2em 0.1em;

}

#copyright a:active {
	color: #ffff00;
	text-shadow: #FF0093 .2em .2em 0.1em;

}


#cdLink p {
	margin: 0px;
}

#cdLink a {
	font-size: 12pt;
}


#contactForm p {
	align: right;
}



/*
------------------------------------------------------------------------------------------------------
	The following tags are not required for the design and you may modify them however you wish.
	You may want to change the color in the h1 and h2 tags as well as the tag labeled h3, h4, h5, h6.
	I have set images to have a padding around them and be displayed in block mode, you may change this.
	I have also set the default link styles in the a tags. If you want to learn more about CSS and how
	it works, visit this page: http://www.w3schools.com/css/default.asp. It's got some great information
	on each property of CSS.
------------------------------------------------------------------------------------------------------
*/

p {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	align: left;
}

li {
	text-align: left;
}

h1 {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 2em;
	color: #273538;
	width: 100%;
	align: left;
	/*text-align: left;*/
}

h2 {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 1.5em;
	color: #3656b0;
	align: left;
	/*text-align: left;*/
}

h3 {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 1.3em;
	color: #3656b0;
	align: left;
	/*text-align: left;*/
}

h4, h5, h6 {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 14;
	color: #3656b0;
	align: left;
	/*text-align: left;*/
}

img {
	display: block;
	margin: 7px;
	padding: 0px;
}

a {
	color: #143390;
	text-decoration: underline;
}

a:hover {
	color: #3656b0;
}

a:active {
	color: #6a88dc;
}