/*
 ===================================
 Studio (aka Pro Audio)
 ===================================
 web design and template coding for
 Hostbaby Wizard

 by Madeline Ong (http://maddon.net)

 April 2009 
 ===================================  
 
 Additional pre-release cross-browser fixes by Andrew Tay (www.andrewtay.com) July 2009
 These fixes are indented
 
*/

/*===== CSS RESET =====*/
/* Thanks to meyerweb.com for the 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, sup, 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;
 vertical-align: baseline;
}

:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }

ol, ul { list-style: none; }

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: "" ""; }

/*===== MAIN STRUCTURE =====*/

body {
 background: #141414;
 font: 15px/1.6em Georgia, "Times New Roman", serif;
 color: #ffffff;
}

   body {
    line-height: 1.6em;  /* fix for Safari3win, which can't parse this when in combined form */
    }

#accessibility { display: none; }

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

#navigation {
 display: inline;
 float: left;
 width: 220px;
 margin: 0 10px;
 padding-top: 358px;
/* background: url($userphoto) no-repeat 0px 33px; */
 font-variant: small-caps;
 text-transform: lowercase;
 font-size: 1.2em;
 letter-spacing: 0.05em;
}

#emailsignup {
 clear: left;
 float: left;
 width: 220px;
 margin: 0 10px;
 padding: 12px 0 18px 0;
 text-align: center;
 border-bottom: 1px solid #505050;
 line-height: 1.2em;
 font-variant: small-caps;
 text-transform: lowercase;
 font-size: 1.2em;
 letter-spacing: 0.05em;
}

#banner {
 width: 700px;
 margin: 0 10px 40px 250px;
 padding: 0 0 0px 0;
 font-size: 4em;
 line-height: 1em;
 color: #999999;
 font-style: italic;
}

#content { margin: 0 10px 0 250px; width: 700px; }
   
#footer {
 float: right;
 clear: both;
 width: 960px;
 margin: 0 10px;
 padding: 100px 0;
 background: url(/shared/proaudio/headphones.jpg) no-repeat center right;
}

/*===== MAIN STRUCTURE FOR IE6 =====*/

* html #emailsignup {
 _position: static;
 _margin: 0 5px;
}

* html #banner {
 _position: static;
 _top: 40px;
 _left: 40px;
 _margin: 0 10px 0 240px;
}

* html #content {
 _position: static;
 _margin: 0 10px 0 240px;
}

* html #footer {
 _float: left;
}

/*===== NAVIGATION =====*/

#navigation ul { border-top: 1px solid #505050; }

#navigation ul li {
 text-align: center;
 padding: 10px 0 12px 0;
 border-bottom: 1px solid #505050;
 line-height: 1.2em;
}

#navigation a { color: #FFFFFF; text-decoration: none; border: none; }

   /* NEW!! This code expands the active area for each navigation link */

   #navigation li {
    padding: 0 !important;
    }
   #navigation li a {
    display: block;
    padding: 10px 0 12px 0;
    }
    * html #navigation li a {
     _height: 1px;
     }
#navigation a:hover { color: #999999; }

.highlight { color: #999999 !important; }

/*===== BANNER =====*/

.photo { display: none; }

.band {
 width: 700px;
 padding: 65px 0 50px 0;
 border-bottom: 3px solid #505050;
}

/*===== FOOTER =====*/

#footer p {
 width: 320px;
 margin-left: 280px;
 text-align: center;
 color: #999999;
 text-transform: lowercase;
 font-variant: small-caps;
 font-size: 1.1em;
 letter-spacing: 0.05em;
}

/*===== HEADERS =====*/

h1 {
 margin: 18px 0;
 font-size: 2.5em;
 line-height: 1em;
 color: #CCCCCC;
 font-weight: normal;
}

h2 {
 margin: 18px 0;
 font-size: 1.8em;
 line-height: 1em;
 color: #999999;
 font-style: italic;
 font-weight: normal;
}

h3, h3 a {
 margin: 18px 0;
 font-size: 1.1em;
 line-height: 1em;
 color: #CCCCCC;
 font-weight: bold;
 text-decoration: none;
 border: none;
}

span.date {
 margin: 18px 0 18px 20px;
 color: #999999;
 font-size: 14px;
 text-transform: lowercase;
 font-style: normal;
 font-variant: small-caps;
 border-left: 2px solid #505050;
 padding-left: 10px;
}

/*===== GENERAL TAGS =====*/

p { margin: 1.5em 0; }

a {
 color: #cccccc;
 text-decoration: none;
 border-bottom: 1px solid #505050;
}

a:hover { color: #505050; }

a img { border: none; }

img { padding: 3px; border: none; }

ul, li { list-style-type: none; margin: 0; padding: 0; }

dt { font-weight: normal; }

dd { margin-bottom: 16px; }

/*===== FORMS =====*/

input, textarea {
 background: transparent;
 border: 1px solid #505050;
 color: #ffffff;
 padding: 5px;
 font: 15px/1.6em Georgia, "Times New Roman", serif;
}

input[type=submit] {
 background: #505050 !important;
 font-variant: small-caps !important;
 padding: 4px !important;
 margin: 0 10px;
}

  /* NEW!! This new code allows input boxes to change color on hover, fixes in IE6/7 button size problem,
   and help IE6 keep up with better browsers. Since IE6 doesn't recognize input[type=submit], and none
   of the buttons have IDs, settings must be applied to all inputs, and then reverted for non-buttons. */

  input, textarea {
   line-height: 1.25; /* overrides earlier setting; fixes submit in ie, tighter spacing in guestbook */
   }
   
  /* this affects both the entry box and the button */
  #emailsignup input {
   margin-left: 10px;
   }
  #emailsignup input,
  #postForm input {
   background: #505050;
   }
   #emailsignup input:hover, 
   #postForm input:hover {
    background: #444 !important;
    border-color: #444;
    }
  /* this is the entry box */
  #emailsignup input#list_email {
   margin-left: 0;
   }
  #emailsignup input#list_email,
  #postForm input#gbname,
  #postForm input#gbaddress,
  #postForm input#security_code {
   background: transparent;
   border-color: #505050;
   } 
   #emailsignup input#list_email:hover,
   #postForm input#gbname:hover,
   #postForm input#gbaddress:hover,
   #postForm input#security_code:hover {
    background: transparent !important;
    }

/*===== SPECIFIC TAGS =====*/

.notes { margin: 0 0 0 10px; }

.details { margin: 0 0 14px 10px; }

.details ul, .details li { list-style: circle inside; }

.name { font-weight: bold; font-size: 14px; }

blockquote {
 border-left: 5px solid #505050;
 padding-left: 10px;
 margin: 6px 0 0 0;
 margin: 0 100px;
 font-size: 0.9em;
}

.caption {
 border-left: 5px solid #505050;
 padding-left: 10px;
 margin: 0 0 10px 0;
 font-size: 0.9em;
}

.artist { font-style: italic; }

.details .caption { border: none; padding: 0; margin: 0; }

.entry .caption {
 border: none;
 text-align: right;
 margin: 10px 100px 30px 100px;
 font-style: italic;
}

.entry .caption a { font-weight: normal; }

/*===== contact page =====*/

.contact .entry { margin-bottom: 14px; }

.contact .entry ul { margin-left: 14px; }

/*===== calendar page =====*/

.calendar .entry { margin-bottom: 20px; }

address { font-style: italic; }

.calendar .entry p { margin: 0 0 0 10px; color: #FFFFFF; }

.calendar .details {
 border-left: 5px solid #505050;
 padding-left: 10px;
 color: #CCCCCC;
}

.news_dash { display: none; }

/*===== guestbook page =====*/

body.guestbook #postForm {
 border: 1px solid #505050;
 padding: 9px;
 margin: 16px 0;
 padding-left: 40px;
}

body.guestbook #postForm label, body.guestbook #postForm input { display: block; }

body.guestbook #postForm input { height: 16px; /* for IE5 mac */ }

/* hide real value from IE5 Mac \*/
body.guestbook #postForm input { height: auto; }
/* end hack */

body.guestbook #postForm input, body.guestbook #postForm textarea { width: 600px; margin-bottom: 12px; display: block; }

#guestbook h2, #guestbook h3 { margin: 5px 5px 5px 50px; }

#guestbook .entry { margin-bottom: 20px; }

.guestbook form { margin: 0; /* browser constistency */ }

.guestbook #gbcomment {
 height: 100px !important; /* browser constistency */
 margin-bottom: 0 !important; /* browser constistency */
}

.guestbook #gbimage { position: absolute; margin-top: 20px; }

.guestbook .security_code_label { margin-top: 17px; margin-left: 120px; }

.guestbook #security_code { margin-left: 120px; width: 180px !important; }

/*===== products page =====*/

body.products div.products h2, body.products div.products p { margin: 0; }

body.products div.products .entry { border-bottom: 1px solid #cccccc; padding-bottom: 4px; }

body.products div.products form table {
 border-collapse: collapse;
 border-top: 1px solid #cccccc;
 border-left: 1px solid #ccc;
 margin: 0;
}

body.products div.products form table td, body.products div.products form table th {
 padding: 3px;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
}

body.products div.products form table th {
 font-weight: bold;
 text-align: center;
 background: #FFFFFF;
}

/* for the links page */
body.links dt h3 a { font-size: 1em; font-weight: normal; }

#splashimage { text-align: center; margin: 100px auto; }

#splashimage a img { border: 0; }