/*
Title: Media Imagery
Style: General stylesheet
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: January 28, 2009
*/

/* ---[ css reset ]--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1; color: black; background: white}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}


/* ---[ link styles ]--------------------- */
a {color: #666; text-decoration: none}
a:link {color: #666}
a:visited {color: #666}
a:hover {text-decoration: underline}


/* ---[ structure ]--------------------- */
html, body {background: #000 url(images/shell/background.png); height: 100%; min-width: 760px; text-align: center; color: #000; font: normal 13px/1em Arial, Helvetica, sans-serif}
#center-on-page {width: auto; text-align: center}
#container {margin: 0 auto; width: 760px; display: block}
#header {height: 119px; width: 760px}
#navigation-bar {height: 21px; width: 760px; display: block; text-align: left}

	#nav-left {width: 52px; float: left}
	#nav {width: 531px; float: left}
	#nav-right {width: 177px; float: left}


	/* ---[ top navigation dropdowndowns - based on "Son of Suckerfish" ]--------------------- */

	/* all list items */
	#drops, #drops ul {padding: 0; margin: 0; clear: both; float: left; list-style: none; z-index:200 !important}
	#drops a {display: block; width: 148px}
	#drops li {float: left; /*width: 148px*/ /* width needed or else Opera goes nuts */}

	/* second-level lists */
	#drops li ul {background: #183a5e; color: #f1f1f1; position: absolute; left: -999em}

	#drops ul.drop {background: #183a5e; color: #f1f1f1; border: 1px solid #f1f1f1; width: 160px; clear: both; float: left; margin-top: 20px}
	#drops ul.drop li {width: 160px; clear: both; border-top: 0}
	#drops ul.drop a {color: #f1f1f1; font-size: 11px; padding: 6px; text-decoration: none; clear: both; float: left}
	#drops ul.drop a:hover {background: #f1f1f1; color: #183a5e}
	
	/* third-and-above-level lists */
	#drops li:hover ul ul, #drops li:hover ul ul ul, #drops li:hover ul ul ul ul, #drops li.sfhover ul ul, #drops li.sfhover ul ul ul, #drops li.sfhover ul ul ul ul {margin-top: 0; position: absolute; width: inherit; left: -999em}

	#drops li:hover ul, #drops li li:hover ul, #drops li li li:hover ul, #drops li li li li:hover ul, #drops li.sfhover ul, #drops li li.sfhover ul, #drops li li li.sfhover ul, #drops li li li li.sfhover ul {left: 160px; /*width: 160px;*/}

	/* lists nested under hovered list items */
	#drops li:hover ul, #drops li.sfhover ul {left: auto}


	/* ---[ top navigation rollover buttons ]--------------------- */
	#nav a.home, #nav a.about-us, #nav a.services, #nav a.portfolio, #nav a.gallery, #nav a.blog, #nav a.contact-us {float: left; background: url(images/shell/header/navigation.png) no-repeat; height: 21px; text-indent: -999999px}
	#nav a.home {background-position: left top; width: 76px}
	#nav a.home:hover {background-position: left -21px}
	#nav a.about-us {background-position: -76px 0; width: 76px}
	#nav a.about-us:hover {background-position: -76px -21px}
	#nav a.services {background-position: -152px 0; width: 76px}
	#nav a.services:hover {background-position: -152px -21px}
	#nav a.portfolio {background-position: -228px 0; width: 76px}
	#nav a.portfolio:hover {background-position: -228px -21px}
	#nav a.gallery {background-position: -304px 0; width: 76px}
	#nav a.gallery:hover {background-position: -304px -21px}
	#nav a.blog {background-position: -380px 0; width: 76px}
	#nav a.blog:hover {background-position: -380px -21px}
	#nav a.contact-us {background-position: -456px 0; width: 75px}
	#nav a.contact-us:hover {background-position: -456px -21px}


/* ---[ content area ]--------------------- */

#content-area {background: #ffc014 url(images/shell/content/background.jpg) repeat-y}
	#content {background: transparent url(images/shell/content/watermark.jpg) no-repeat; width: 530px; min-height: 310px; float: left; padding: 10px 20px 10px 53px; text-align: justify}
	
		#content a {color: #fff}
		#content a:hover {color: #fff; text-decoration: none; border-bottom: 1px dotted #fff}
		#content p {padding: .35em 0; line-height: 1.35em}

		#content ul {padding: .35em 0 .35em 1em; line-height: 1.35em; list-style-type: none; text-align: left}
		#content li {padding: .35em 0 .35em 1em; background: transparent url(images/icons/square.gif) 0 .8em no-repeat}

		#content .column1 {width: 260px; display: block; float: left; padding-right: 10px}
		#content .column2 {width: 260px; display: block; float: left}
		
		.boxlist {border: 3px double #fff; margin: 10px 0; padding-right: 10px; text-align: left; background: #7f610d url(images/homepage/scrollerBG.png) repeat-x}
			.thumbnail {float: left; border-right: 1px solid #fff; margin-right: 1em}
			.boxlist p {margin-top: 8px}
			.title {font-weight: bold; font-size: 1.15em}
			.subtitle {font-size: 11px}
			.email {font-size: 9px}

		.video {float: right; margin: .35em 0 0 10px}
		.special-link {border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; margin: 1em 0; font-weight: bold}

		#content .hr {font-size: 1px; border-bottom: 1px dotted #000; margin: 10px 0}
		
		#content .border {border: 3px double #fff}
		#content .pad {padding: 10px}
		#content .go-back {clear: both; border-top: 1px solid #fff; padding: 6px 0 6px 16px; margin-top: .5em; background: transparent url(images/icons/arrow.png) 0 .8em no-repeat}

		.scrollerBG {border: 3px double #fff; background: #7f610d url(images/homepage/scrollerBG.png) repeat-x; padding: 10px}
		#scroller {height: 50px; width: auto; margin: 10px 0 0 0; overflow: hidden; color: #fff}

		h1 {font: bold 18px/1em Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; letter-spacing: -1px}
		h2 {font: bold 16px/1em Arial, Helvetica, sans-serif; color: #000; letter-spacing: -1px; padding: .45em 0 .25em 0}
		h3 {font: bold 14px/1em Arial, Helvetica, sans-serif; color: #000; letter-spacing: -1px; padding: .7em 0 0 0}

		/* ---[ content styles ]--------------------- */
		em, .em {font-style: italic}
		strong, .strong {font-weight: bold}
		.big {font-size: 110%}
		.small {font-size: 75%}
		.l {float: left}
		.r {float: right}
		.photoL {float: left; margin: 0 10px .25em 0}
		.photoR {float: right; margin: 0 0 .25em 10px}
		.clear {clear: both; display: block}
		.center {text-align: center}
		.none {padding: 0; border: 0 !Important}


		/* ---[ font colors ]--------------------- */
		.black {color: #000 !Important}
		.blackBG {background-color: #000}
		.white {color: #fff !Important}
		.blue {color: #004b85 !Important}
		.blueBG {background-color: #004b85}
		.yellow {color: #f1ab00 !Important}
		.undone {color: red !Important}


	/* ---[ side navigation ]--------------------- */

	#side-navigation {width: 129px; float: left}
		#media-news {width: 103px; height: 116px; background: #152b50 url(images/shell/side-navigation/media-news-background.png) no-repeat; padding: 6px 13px 10px 13px; text-align: left}
		#press-releases {height: 123px; width: 103px; overflow: hidden; text-align: center}
			a.release {padding: 7px 0; display: block; width: 103px; color: #fff; font-size: 12px; font-weight: bold; text-decoration: none}
			a.release:hover {color: #f1ab00; text-decoration: none; border-top: 1px solid #fff; border-bottom: 1px solid #fff}


/* ---[ footer ]--------------------- */

#footer {background: transparent url(images/shell/footer/background.png) repeat-y; width: 740px; display: block; padding: 10px; font-size: 10px}
#footer a {color: #fff}

#bottom-navigation li, .copyright li {display: inline; border-right: 1px solid #ccc; padding: 0 .5em}
#bottom-navigation ul {margin-bottom: .5em}
#bottom-navigation li {font-size: 12px}

#footer .address {color: #fff; margin-bottom: .5em}
#footer .copyright {color: #fff}


/* ---[ contact form ]--------------------- */

form {margin: 0; padding: 0; font-size: 100%; width: auto}
form fieldset {clear: both; font-size: 100%; border-color: #f1ab00; border-width: 1px 0 0 0; border-style: solid none none none; padding: 10px; margin: 0}
form fieldset legend {font-size: 125%; font-weight: bold; color: #f1ab00; margin: 0; padding: 0 5px}

label {font-size: 100%}
label u {font-style: normal; text-decoration: underline}

input, select, textarea {font-family: Tahoma, Arial, sans-serif; font-size: 100%; color: #000}

textarea {overflow: auto}

form div {clear: left; display: block; width: 500px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}

form div fieldset {clear: none; margin: 0 0 0 350px; padding: 0 5px 5px 5px; width: 350px}
form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
form div.required fieldset legend {font-weight: bold}

form div label {display: block; float: left; width: 140px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}

form div.optional label, label.optional {font-weight: normal}
form div.required label, label.required {font-weight: bold}
form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 170px; height: 1%; padding: 0; margin: 0 0 5px 170px; text-align: left}
form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
form div img {border: 1px solid #000}

p.error {background-color: #f00; background-image: url(images/icon_error.gif); background-repeat: no-repeat; background-position: 3px 3px; color: #fff; padding: 3px 3px 5px 27px; border: 1px solid #000; margin: auto 100px}

form div.error {background-color: #ffffe1; background-image: url(images/required_bg.gif); background-repeat: no-repeat; background-position: top left; color: #f1ab00; border: 1px solid #f00}
form div.error p.error {background-image: url(images/icon_error.gif); background-position: top left; background-color: transparent; border-style: none; font-size: 88%; font-weight: bold; margin: 0 0 0 118px; width: 200px; color: #f00}

form div input, form div select, form div textarea {width: 300px; padding: 1px 3px; margin: 0; border: 1px solid #f1ab00}

form div input.inputFile {width: 311px}
form div select.selectOne {width: 311px; padding: 1px 3px}
form div select.selectMultiple {width: 311px}
form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #cccccc; color: #000; width: auto; padding: 0 6px; margin: 0}
form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: 88%; height: 1%}

form fieldset legend {line-height: 150%}
form input, form select, form textarea {background-color: #fff}

/* form textarea.expanding {overflow: auto; overflow-x: auto; overflow-y: visible} */

div.optional label:before {content: ''}
div.required label:before {content: ''}

form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
form div.wide label {float: none; display: block}
form div label.wide {width: 348px}
form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
form div.notes p, form div small {line-height: 125%}
form div.wide small {margin: 0 0 5px 0}