/* Wrapper, shadow, etc. */
body { text-align: center; background: #cfe7b3; margin: 0px; font-size: 1em }
#wrapper { width: 50em; margin: 0em auto }

#left-shadow { width: 10px; height: 60em; float: left; background: url('../img/left-shadow.gif') left bottom }
#right-shadow { width: 10px; height: 60em; float: right; background: url('../img/right-shadow.gif') left bottom }
#bottom-shadow { height: 15px; background: url('../img/bottom-shadow.gif') repeat-x #cfe7b3 }

#content { width: 48.74em; float: left; background: #fff }	/* Padding equivalent to 10px */

/* Left navigation */
#nav { width: 9.25em; padding-left: 1.5em; float: left; background: url('../img/nav-background.gif') top left no-repeat; text-align: left }

#nav #logo { margin: 35px 0px }
#nav #preview-dvd { margin-bottom: 100px }

#nav ul { padding: 0em; margin: 0em; margin-bottom: 30px; width: 90%; list-style-type: none; font: bold 0.75em Arial, sans-serif }
#nav ul li { padding: 1em 0em; border-bottom: 1px dotted #625ca1 }
#nav ul li.bottom { border: none }

#nav a { text-decoration: none; color: #332a86 }
#nav a:hover, #nav a.highlighted, #nav a:visited.highlighted { color: #85ae55 }

#nav ul.subnav { margin: 0em; margin-left: 1.5em; margin-top: 0.2em; list-style-image: url('../img/bullet.gif'); font: normal 0.9em Arial, sans-serif }
#nav ul.subnav li { border: none; padding: 0.2em 0em }

/* Main content area */
#body { width: 37.99em; float: right; background: url('../img/body-background.gif') top right no-repeat }
#body #index p { font: normal 0.75em Arial, sans-serif; text-align: left; padding-left: 5.83em; line-height: 1.5em }
#body #index h1 { font: normal 1.125em Arial, sans-serif; letter-spacing: 0.1em; color: #332a86; font-style: italic; text-align: left; padding-left: 3.89em }

/* Content on secondary pages */
#body #secondary { font: normal 0.75em Arial, sans-serif; text-align: left; padding: 0em 5em 0em 3em; line-height: 1.25em }
#body #secondary h1 { font: 1.5em Arial, sans-serif; text-transform: uppercase; color: #332a86 }
#body #secondary h2 { font: bold 1em Arial, sans-serif; color: #332a86; margin-bottom: 0em; padding-bottom: 0em }
#body #secondary ul { list-style-type: disc; padding-left: 1.2em }

#body #secondary a { color: #332a86 }
#body #secondary a:hover { text-decoration: none }

/* Misc. styles */
.clear-both { clear: both }
.clear-right { clear: right }
a img { border: none }
form { margin: 0em; padding: 0em }
hr { height: 0px; border: none; border-top: 1px dotted #ccc; margin: 15px 0px }

/* 'Subscribe' and text resize areas */
#top-right { float: right; padding: 3em 2em 2em 0em }
* html #top-right { width: 26em }	/* IE6 Hax */

#text-resize { float: right; font: bold 0.7em Arial, sans-serif; color: #332a86; text-align: left }
#text-resize a { display: block; float: left; margin: 3px 3px 0px 0px; border: 1px solid #ccc; width: 2em; height: 2em; background: #fff; text-decoration: none; color: #666 }

#text-resize span.normal { padding: 0.4em 0.7em; display: block }
#text-resize span.large { font-size: 1.2em; padding: 0.25em 0.5em; display: block }
#text-resize span.largest { font-size: 1.5em; padding: 0.1em 0.3em; display: block }

#newsletter { float: right; font: normal 0.7em Arial, sans-serif; text-align: left; padding-right: 3em }
* html #newsletter { padding-right: 0em }	/* IE6 Hax */
#newsletter fieldset { border: none; margin: 0em; padding: 0em }
#newsletter label { color: #332a86; font-weight: bold; padding-bottom: 3px; display: block }
#newsletter input { vertical-align: bottom; background: url('../img/input-background.gif') top left; border: 1px solid #666; padding: 0.2em }
#newsletter button { font-weight: bold; margin-left: 2px; padding: 0.15em 0.7em; background: #ddd; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #666; border-bottom: 1px solid #666; cursor: pointer }
#newsletter button:hover { background: #e6efc2; border:1px solid #c6d880; color:#529214 }
#newsletter button img { vertical-align: middle }

/* Footer */
#copyright { font: normal 0.7em Arial, sans-serif; text-align: right; padding: 4em 2em 1em 5.83em; color: #aaa }

/* Form CSS */
fieldset { border: 0px; display: block }
legend { font-weight: bold }

.label { width: 120px; padding-right: 10px; float: left; font-weight: normal; text-align: left; margin: 6px 0px }
.input { width: 250px; float: left }
.select { width: 200px; float: left }
.textarea { width: 250px; float: left; font-family: sans-serif }

.input, .select, .textarea { margin: 3px 0px; border: 1px solid #ccc; border-top: 1px solid #777; padding: 1px; background: url('../img/input-background.gif') 0px 0px repeat-x #fff }
input.radio { margin: 10px 5px 0px 0px; padding: 1px; float: left; }
span.input, span.select, span.textarea, span.state, span.radio { background: #fff; border: none; font-weight: bold }
.select { padding: 0px }

label.radio { width: 320px; padding-right: 10px; float: left; font-weight: normal; text-align: left; margin: 6px 0px; }

.checkbox { margin: 3px 0px } 
.required { color: #dc5855 }
.error { border: 2px solid #dc5855 }
.clear-left { clear: left; }