/* stylesheet for Coriander Package Design */

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong, 
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-size: 100%; vertical-align: baseline; background: transparent; }
body{ line-height: 1; }
blockquote, q{ quotes: none; }
table{ border-collapse: collapse; border-spacing: 0; }
header, nav, article, footer, address{ display: block; }

html, body{ height: 100%; padding: 0; margin: 0; font: 14px Futura, "Century Gothic", CenturyGothic, Arial, sans-serif; color: #fff; background: #d1c6b0;}

img#background{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#container{ height: 100%; width: 100%; position: absolute; z-index: 100;}

header{ width: 100%; height: 140px; background: url(../images/overlay.png); }
#logo{ float: left; }

nav{ float: left; text-align: left; padding: 20px 0 0 30px; font: 11px Futura, Arial, sans-serif; color: #fff; text-transform: uppercase; z-index: 200; }
nav ul{ margin: 0; padding: 0; width: 200px; float: left; }
nav ul li{ list-style-type: none; padding: 2px 0; }
nav a:link,
nav a:visited,
nav a:active{ color: #c3b097; text-decoration: none; }
nav a:hover{ color: #fff; text-decoration: none; }

a:link,
a:visited,
a:active{ color: #3C0F0A; text-decoration: underline; }
a:hover{ text-decoration: underline; color: #841617; }

#social{ float: right; padding: 20px 20px 0 0; width: 30px; }
#social img{ padding: 1px 0; height: 30px; border: none; outline: none; }

#music{ position: relative; top: 25px; z-index: 100; }

#homepage,
#gallery{ position: absolute; top: 140px; width: 100%; height: 480px; overflow: auto; margin: 7px 0 0 0; left: 0px; z-index: 1; }
aside{ position: absolute; top: 140px; margin: 7px 0 0 0; padding-left: 30px; width: 160px; height: 450px; background: url(../images/overlay_gallery.png); z-index: 200; }
aside h3{ padding: 30px 0 10px 0; }
aside ul{ margin: 0; padding: 0; width: 190px; float: left; }
aside ul li{ list-style-type: none; padding: 2px 0; }
aside a:link,
aside a:visited,
aside a:active{ color: #c3b097; text-decoration: none; }
aside a:hover{ color: #fff; text-decoration: none; }

#homepage table,
#gallery table,
#homepage td,
#gallery td{ border-collapse: collapse; border-spacing: 0; padding: 0; }
#gallery #last{ padding-right: 197px; }
#gallery_mcontentwrapper,
#gallery_contentwrapper{ height: 450px !important; }
#gallery table{position: relative; left: 197px; }

#homepage img,
#gallery img{ display: block; margin: -1px 0 0 0; }

.scrollgeneric{ line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; }
.vscrollerbase{ width: 15px; padding: 0 25px; background: url(../images/scrollbar-v.png) left 40px no-repeat; }
.vscrollerbar{ width: 15px; background-color: #3C0F0A; padding: 40px 10px 60px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.hscrollerbase{ height: 21px; width: 200px; left: 200px; }
.hscrollerbar{ height: 11px; top: 4px; width: 20px; background-color: #c3b097; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.vscrollerbar, .hscrollerbar{ padding-left: 13px; padding-right: 213px; z-index: 2; }
.hscrollerbase{ background:  url(../images/overlay.png) 0px -21px repeat-x; }
.hscrollerbasebeg{ height: 21px; width: 14px !important; }
.hscrollerbaseend{ height: 21px; width: 14px; }

#homepage .hscrollerbase{ left: 0; }
#homepage .vscrollerbar, #homepage .hscrollerbar{ padding-right: 13px; }

#page_body{ width: 100%; border: 1px solid transparent; border-width: 1px 0; height: 485px; }

#spotlight{ float: left; margin: 7px 0 0 0; width: 367px; height: 450px; overflow: hidden; z-index: 200; }
#spotlight img{ border-right: 7px solid #d1c6b0; }

#content{ height: 410px; overflow: auto; position: relative; top: 7px; margin: 0 0 7px 0; padding: 20px 40px 20px 50px; z-index: 1; background: #fff; color: #3c0f0a; }
h1{ font: 30px Futura, "Century Gothic", CenturyGothic, Arial, sans-serif; margin-bottom: 10px; }
h3{ padding: 50px 0 0 25px; margin: 0; }
#content p{ margin-bottom: 15px; }

#contact{ width: 485px; }
label{ display: block; float: left; clear: left; width: 150px; padding: 5px; text-align: right; }
input, textarea{ width: 250px; margin: 5px 0; }
.error{ font-size: 9px; font-style: italic; }
#contact img{ display: block; border: 1px solid #737373; margin: 10px 0 0 160px; width: 250px;}
#contact .instructions{ font-size: 9px; margin-left: 160px; }
#submit{ width: auto; margin: 5px 0 5px 160px; }

.kalamazoo_message{ margin: 10px; padding: 20px; font-size: 12px; font-style: italic; color: #fff; background: #3C0F0A; text-align: center; }

footer{ clear: both; font-size: 11px; color: #3C0F0A; text-align: left; padding: 20px 0 0 13px; letter-spacing: 1px; }
footer p{ margin: 0px; }
footer ul{ margin: 0; padding: 0; }
footer ul li{ list-style-type: none; display: inline; margin: 0; padding: 0 10px; }
footer a:link,
footer a:visited{ color: #3C0F0A; text-decoration: underline; }
footer a:hover{ color: #3c0f0a; text-decoration: none; }