﻿/* 
 Global CSS Declarations for AllThingsEben.com
 Copyright (C) Analogue Web Design, LLC. All rights reserved
 Version 2008
*/

@media screen, projection {

  /* GLOBAL RESET */
  html, body, address, blockquote, div, h1, h2, h3, h4, h5, h6, hr, noscript, p, pre, dl, dt, dd, ol, ul, li, table, caption, thead, tfoot, tbody, tr, td, th, form, fieldset, legend, label, a, img, object, q, span, abbr, acronym, del, dfn, em, ins, strong { background: transparent; border: none; font-size: 100%; margin: 0; outline: none; padding: 0; vertical-align: baseline; }
  a { outline: none; text-decoration: none; }
  abbr:hover, acronym:hover { border-bottom: 1px dotted #666; cursor: help; }
  address { font-style: normal; }
  blockquote, q { quotes: none; }
  h1, h2, h3, h4, h5, h6 { font-size: 1em; }
  hr { clear: both; height: 1.2em; visibility: hidden; }
  html { height: 100%; }
  fieldset, img { border: medium none; }
  input, button, select, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
  label { cursor: pointer; }
  ol, ul { list-style: none; }
  :focus { outline: none; }

  /* LAYOUT */
  body { font: 10px/1.5 Arial, Verdana, Geneva, sans-serif; margin: 15px auto; min-width: 960px; min-height: 100%; }
  #container { background: #fff; color: #000; margin: 0 auto; width: 960px; }

  /* HEADER */
  #header { margin-bottom: 12px; }
  #header h1 { background: url(/assets/img/logo.jpg) no-repeat 100% 100%; float: left; width: 400px; margin: 0 36px 0 60px; height: 68px; text-indent: -999em; }
  
  /* MENU */ 
  #menu { color: #666; padding: 0 0 18px 0; text-align: center; }
  #menu li { display: inline; font-size: 1.2em; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
  #menu li a { display: block; float: left; color: #666; padding: 45px 15px 0; }
  #menu li a:hover { color: #c63; }
  #menu li.contact a { border-right: none; }
  
  /* LOCATION */
  #menu li.home a:hover { background: url(/assets/img/home.jpg) no-repeat 50% 0%; }
  #home #menu li.home a { color: #c63; background: url(/assets/img/home.jpg) no-repeat 50% 0%; }
  #menu li.music a:hover { background: url(/assets/img/music.jpg) no-repeat 50% 0%; }
  #music #menu li.music a { color: #c63; background: url(/assets/img/music.jpg) no-repeat 50% 0%; }
  #menu li.fine-art a:hover { background: url(/assets/img/fine-art.jpg) no-repeat 50% 0%; }
  #fine-art #menu li.fine-art a { color: #c63; background: url(/assets/img/fine-art.jpg) no-repeat 50% 0%; }
  #menu li.voice a:hover { background: url(/assets/img/voice.jpg) no-repeat 50% 0%; }
  #voice #menu li.voice a { color: #c63; background: url(/assets/img/voice.jpg) no-repeat 50% 0%; }
  #menu li.contact a:hover { background: url(/assets/img/contact.jpg) no-repeat 50% 0%; }
  #contact #menu li.contact a { color: #c63; background: url(/assets/img/contact.jpg) no-repeat 50% 0%; }
  
  /* CONTENT */ 
  #content { background: url(/assets/img/content.jpg) repeat-y; min-height: 460px; padding: 0 20px; }
  #content a { color: #fff; }
  #content a:hover { text-decoration: underline; }
  
  /* CONTENT-MAIN */
  #content-main { color: #eee; float: right; padding: 12px 0; width: 590px; }
  #content-main div.disc { margin: 0 24px 12px; }
  #content-main div.disc h4 { font-size: 1.4em; margin: 0 24px 6px; text-transform: uppercase; }
  #content-main div.disc form { font-size: 1.2em; margin: 6px 24px; }
  #content-main div.disc form button { background: url(/assets/img/button.gif) no-repeat; border: medium none; color: #036; font-style: italic; font-weight: bold; height: 21px; margin-right: 6px; text-align: center; width: 96px; }
  #content-main div.disc form button:hover { color: #000; }
  #content-main div.disc img { border: 1px solid #666; float: left; margin-right: 15px; }
  #content-main div.disc ul { font-size: 1.4em; margin: 6px 24px; }
  #content-main div.disc ul li a { background: url(/assets/img/play-music.jpg) no-repeat 0% 0%; padding: 1px 0 0 20px; }
  #content-main div.disc ul li a:hover { background-position: 0% 100%; }
  #content-main h3 { color: #fff; font-size: 1.6em; letter-spacing: -1px; margin: 12px 24px; position: relative; text-transform: uppercase; }
  #content-main h3 span { background: url(/assets/img/mess.png) 0% 100%; height: 16px; left: 0; position: absolute; width: 100%; z-index: 100; }
  #content-main h4 { font-size: 1.6em; }
  #content-main p { font-size: 1.4em; margin: 12px 24px; }
  #content-main strong { color: #fff; }
  #content-main ul { font-size: 1.4em; margin: 12px 24px; }
  
  /* CONTENT-SIDEBAR */
  #content-sidebar { background: url(/assets/img/sidebar.jpg) no-repeat; color: #ccc; float: left; min-height: 60px; padding: 60px 0 12px; text-align: right; width: 280px; }
  #content-sidebar address { margin: 0 24px 12px; font-size: 1.6em; }
  #content-sidebar dl { margin: 0 24px 12px; font-size: 1.6em; }
  #content-sidebar dl dd { margin-bottom: 6px; }
  #content-sidebar p { margin: 0 24px 12px; font-size: 1.6em; }
  #content-sidebar p.purchase { line-height: 1.2; margin-top: 24px; }
  #content-sidebar h3 { color: #fff; font-size: 1.6em; margin: 0 24px 12px; }
  #content-sidebar ul { margin: 0 24px 12px; font-size: 1.4em; }
  #content-sidebar ul.play li a { background: url(/assets/img/play-voice.jpg) no-repeat 100% 0%; padding: 1px 20px 0 0; }
  #content-sidebar ul.play li a:hover { background-position: 100% 100%; }
  #content-sidebar form { font-size: 1.2em; margin: 0 24px; }
  #content-sidebar form button { background: url(/assets/img/button.gif) no-repeat; border: medium none; color: #036; font-style: italic; font-weight: bold; height: 21px; width: 96px; }

  /* FORMS */
  #inquiry { font-size: 1.4em; margin: 12px 24px; }
  #inquiry button { background: url(/assets/img/button.gif) no-repeat 0% 0%; border: medium none; color: #036; font-style: italic; font-weight: bold; height: 21px; margin: 0 15px 0 140px; text-align: center; width: 96px; }
  #inquiry button:hover { color: #000; }
  #inquiry label { display: block; float: left; margin-right: 6px; text-align: right; width: 134px; }
  #inquiry input, #inquiry textarea { background: #ccc; border: 1px solid #036; margin-bottom: 6px; padding: 1px; width: 240px; }
  #inquiry input:focus, #inquiry textarea:focus { background: #fff; border: 1px solid #c63; }
  #inquiry small { font-weight: bold; font-size: 0.785em;}
  #inquiry #state { background: #ccc; border: 1px solid #036; margin-bottom: 6px; padding: 0 1px; width: 164px; }
  #inquiry #zip { margin-left: 6px; width: 70px; }
  #inquiry fieldset.isRequired { margin: 12px 0; }
  #inquiry fieldset.isRequired input { background: #999; border: medium none; margin-bottom: 0; width: auto; }
  #inquiry fieldset.isRequired label { color: #fff; display: inline; float: none; width: auto; }
  #inquiry fieldset.isRequired span { display: block; float: left; margin-right: 6px; text-align: right; width: 134px; }
  
  .admin { font-size: 1.4em; margin: 12px 24px; }
  .admin label { display: block; float: left; margin-right: 6px; text-align: right; width: 134px; }
  .admin input, .admin textarea { background: #ccc; border: 1px solid #036; margin-bottom: 6px; padding: 1px; width: 346px; }
  .admin input:focus, .admin textarea:focus { background: #fff; border: 1px solid #c63; }
  .admin input.button { background: url(/assets/img/button.gif) no-repeat 0% 0%; border: medium none; color: #036; font-style: italic; font-weight: bold; height: 21px; margin: 0 15px 0 140px; text-align: center; width: 96px; }
  .admin input.button:hover { color: #000; }
  
  /* VOICE */
  #voice #player { margin: 12px 24px 0; text-align: center; }
  #voice #player #FLVPlayer { background: #000 url(/assets/img/loading.gif) no-repeat 50% 50%; height: 312; width: 400px; }
  #voice #title { text-align: center; margin: 0 24px; }
  #voice #title h4 { margin: 0 auto; width: 400px; }
  #voice #title a { font-size: 1.1em; font-weight: bold; }
  #voice #title a strong { color: #333; font-size: 1.4em; }
  
  /* MUSIC */
  #music #player { font-size: 1.4em; height: 40px; position: relative; margin: 0 24px 12px; width: 232px; }
  #music #player #qtPlayer { position: absolute; top: -1px; }
  #music #player #qtMarquee { background: #333; height: 22px; left: 0; position: absolute; top: 8px; width: 232px; z-index: 50; }
  #music #player #qtControl { display: block; height: 38px; left: 0; position: absolute; top: 0; width: 39px; z-index: 100; }
  #music #player a.play { background: url(/assets/img/player.jpg) no-repeat 0% 0%; }
  #music #player a.play:hover { background-position: 0% 100%; }
  #music #player a.pause { background: url(/assets/img/player.jpg) no-repeat 100% 0%; }
  #music #player a.pause:hover { background-position: 100% 100%; }
  
  /* FINE-ART */
  #fine-art a img { border: 1px solid #000; }
  #fine-art a:hover img { border: 1px solid #fff; }
  #fine-art br { clear: both; }
  #fine-art div.work { display: table; float: left; height: 100px; margin: 0 0 6px 24px; text-align: center; width: 100px; }
  #fine-art div.work a { display: table-cell; vertical-align: middle; }
  #fine-art form { font-size: 1.2em; margin: 6px 24px; }
  #fine-art form button { background: url(/assets/img/button.gif) no-repeat; border: medium none; color: #036; font-style: italic; font-weight: bold; height: 21px; text-align: center; width: 96px; }
  #fine-art form button:hover { color: #000; }

  /* LIGHTBOX */
  #overlay { background-color: #222; height: 500px; left: 0; position: absolute; top: 0; width: 100%; z-index: 90; }
  #lightbox { display: none; left: 0; line-height: 0; position: absolute; text-align: center; width: 100%; z-index: 100; }
  #lightboxImageContainer { background-color: #000; height: 250px; margin: 0 auto; position: relative; width: 250px; }
  #lightboxFrame { padding: 3px; }
  #lightboxLoading { background: url(/assets/img/loading.gif) no-repeat 50% 50%; height: 50%; left: 0%; line-height: 0; position: absolute; text-align: center; top: 40%; width: 100%; }
  #lightboxNav { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; }
  #lightboxPrevLink, #lightboxNextLink { background: transparent url(/assets/img/blank.gif) no-repeat; display: block; height: 100%; width: 49%; }
  #lightboxPrevLink { float: left; left: 0; }
  #lightboxPrevLink:hover { background: url(/assets/img/prev.jpg) no-repeat 0% 15%; }
  #lightboxNextLink { float: right; right: 0; }
  #lightboxNextLink:hover { background: url(/assets/img/next.jpg) no-repeat 100% 15%; }
  #lightboxDataContainer { background-color: #000; color: #fff; line-height: 1.25; margin: 0 auto; }
  #lightboxData { font-size: 1.2em; padding: 0 10px; }
  #lightboxData #lightboxDetails { float: left; text-align: left; width: 70%; }
  #lightboxData #lightboxCaption { font-weight: bold; text-transform: uppercase; }
  #lightboxData #lightboxImageSet { clear: left; display: block; padding-bottom: 3px; }
  #lightboxData #lightboxCloseLink { background: url(/assets/img/close.jpg) no-repeat; float: right; height: 33px; padding-bottom: 3px; width: 80px; }

  /* FOOTER */
  #footer { background: #fff; color: #c63; padding: 10px 20px 15px 0; text-align: right; width: 940px; }
  #footer ul li { display: inline; padding-right: 3px; }
  #footer a { color: #c63; }
  #footer a:hover { color: #666; text-decoration: underline; }  
  
  /* CLASSES */
  .clear:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
  .gallery { font-size: 1.2em; margin: 12px 24px; text-align: center; }
  .gallery strong { font-size: 1.2em; }
  .gallery a img { border: 1px solid #000; }
  .gallery a:hover img { border: 1px solid #fff; }

  /* MSIE 7.0 */
  *+html .clear { height: 1%; }
  *+html #fine-art div.work { margin-bottom: 12px; position: relative; }
  *+html #fine-art div.work a { left: 50%; position: absolute; top: 50%; }
  *+html #fine-art div.work a img { left: -50%; position: relative; top: -50%; }
  
  /* MSIE 6.0 */
  * html .clear { height: 1%; }
  * html #header h1 { margin-left: 30px; }
  * html #content { height: 460px; }
  * html #content-main h3 span { background: url(/assets/img/mess.gif) 0% 100%; }
  * html #content-main div.disc { height: 202px; }
  
}