/*  I have used Sass (sass-lang.com) to generate my css. The css file is sort of a mess because of it, so look at the style.scss file instead (it's self explanitory)  */

/* Main Styles */
html { background: #7dbfd9 url(../_img/bg.jpg) center -20px repeat-x; }

#container {
	width: 1000px;
	margin: 0px auto;
}

h1, h2, h3, h4, h5, h6 { font-family: Segoe UI, Helvetica, Arial, sans-serif; font-weight: normal; }

li { margin-left: 16px; }

img.left { float: left; clear: left; margin: 6px 6px 6px 0; }
img.right { float: right; clear: right; margin: 6px 0 6px 6px; }

/* Header Styles */
#header { margin: 0; background-image:url(../_img/header.jpg) }
#header h1 {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 44px;
	line-height: 28px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	padding-top: 80px;
	padding-left: 20px;
	margin-bottom: 70px;
	font-style: italic;
}#header h2 {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 40px;
	line-height: 28px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	padding-top: 80px;
	padding-left: 20px;
	margin-bottom: 70px;
	font-style: italic;
}#header h3 {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: strong;
	font-size: 36px;
	line-height: 28px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	padding-top: 80px;
	padding-left: 20px;
	margin-bottom: 70px;
	font-style: italic;
}
#header h4 {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 36px;
	line-height: 28px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	padding-top: 80px;
	padding-left: 20px;
	margin-bottom: 70px;
	font-style: italic;
}
#header h5 {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 28px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	padding-top: 80px;
	padding-left: 20px;
	margin-bottom: 70px;
	font-style: italic;
}
#header #nav { list-style: none; margin: 0; height: 48px; background: #0E5172; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; -webkit-background-clip: padding-box; -moz-box-shadow: 0px 0px 5px black; -o-box-shadow: 0px 0px 5px black; -webkit-box-shadow: 0px 0px 5px black; box-shadow: 0px 0px 5px black; }
#header #nav li { margin: 0; float: left; position: relative; }
#header #nav li a { display: block; height: 48px; line-height: 48px; padding: 0 24px; color: #fefefe; float: left; text-decoration: none; font-size: 16px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
#header #nav li a:hover { background: #157CAE; }
#header #nav li a.current { background: #fefefe; color: #444; }
#header #nav li:first-child a { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; -webkit-background-clip: padding-box; }
#header #nav li ul { margin: 0; list-style: none; width: 300px; background: #106187; position: absolute; top: 48px; left: -99999em; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-background-clip: padding-box; -moz-box-shadow: 0px 0px 5px black; -o-box-shadow: 0px 0px 5px black; -webkit-box-shadow: 0px 0px 5px black; box-shadow: 0px 0px 5px black; }
#header #nav li ul li { float: none; }
#header #nav li ul li a { float: none; }
#header #nav li ul li:first-child a { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; }
#header #nav li ul li:last-child a { -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-background-clip: padding-box; }
#header #nav li:hover ul { left: 0; }

/* Content Area Styles */
#content {
	background: #fefefe;
	padding: 12px 24px 24px 24px;
	width: auto;
	overflow: auto;
	-moz-box-shadow: 0px 0px 5px black;
	-o-box-shadow: 0px 0px 5px black;
	-webkit-box-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 5px black;
}
#content #main { float: left; width: 592px; margin-right: 24px; }
#content #sidebar { float: left; width: 296px; }

/* Breadcrumb Navigation Styles */
#breadcrumb { height: 48px; background: #fff; border-top: 1px solid #f6f6f6; font-family: Segoe UI, Helvetica, Arial, sans-serif; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-background-clip: padding-box; }
#breadcrumb ul { list-style: none; margin: 0; height: 48px; }
#breadcrumb ul li { margin: 0; line-height: 48px; float: left; }
#breadcrumb ul li a { display: block; height: 48px; padding: 0 48px 0 24px; background: url(../_img/breadcrumb.png) top right no-repeat; color: #444; text-decoration: none; float: left; }
#breadcrumb ul li a:hover { color: #222; text-decoration: underline; }
#breadcrumb ul li:last-child a { background: none; }

/* Image Gallery Styles */
#gallery { width: 924px; overflow: auto; }
#gallery a { display: block; float: left; margin: 0 12px 12px 0; }
#gallery a:hover img { opacity: 0.8; }

/* Album List Styles */
#albums { list-style: none; }
#albums li { float: left; margin: 0 48px 24px 0; width: 110px; height: 182px; }
#albums li img { display: block; margin-bottom: 6px; }

textarea { width: 566px; height: 144px; }

/* Footer Styles */
#footer { margin-top: 24px; }
#footer p { text-align: center; margin: 0; color: #fff; font-weight: bold; }
#footer p a { color: #fff; }