/* 
	Designed by Greg Reimer
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007, revised March 2009 
   All styles that have been changed are indented
	
	- fixed problem with #content position. before, it was pushed down by a combo for #container padding-top and
	  #content margin-top, but IE collapses these for some reason. Now it's all done with container padding
	- IE6 was messing up display on pages with little conent due to max-height issues
	- new styling added for #calendar div.entry .price
	
	REVISION:
	- fixed a background centering/rounding error bug that sometimes caused the various background images not
	  to line up properly, depending on how wide the viewport is. This problem affected all browsers, and
	  could be seen by slowly changing browser window size: a 1px offset would continually appear and disappear
	
*/

/* main style sheet */

         body {
           margin: 0px;
           padding: 0px;
           background-attachment: fixed;
           color: black;
           text-align: center;
           font-family: arial,helvetica,sans-serif;
           background: #ddd url(/shared/machine/middle_iesux.png) top center repeat-y;
           }

			/* IE hack for some sort of centering/rounding error issue is no longer necessary, if ever it was...
         html>body {
           background: #ddd url(/shared/machine/middle.png) top center repeat-y;
           }*/

a:link { color: #474; }
a:visited { color: #474; }
a:active { color: #474; }
a:hover { color: #474; }

div#accessibility {
  position: absolute;
  font-size: 1px;
  left: -1000px;
  top: -1000px;
  }

			/* NEW!! Several changes here to solve the real centering/rounding error bug, which was present in
				nearly all browsers. Instead of letting the body background show through the #container, the
				container now holds its own background (middle-new.png), as it should. The top background image
				(top.png) has been moved to #banner, whic was previously unused. Solves the bug, and makes more
				sense, anway. */
			
	      div#container {
	         /* background: transparent url(/shared/machine/top.png) no-repeat 50% 0%; */
	         color: black;
	         width: 510px;
	         margin: 0px auto;
	         text-align: left;
	         padding: 160px 238px 0px 0px;		/* NEW!! top was 70px. This replaces for margin-top on #content */
	         position: relative;
	         background: url(/shared/machine/middle-new.png) top center repeat-y;		/* NEW!! opaque bg */
	         }
				
			/* NEW!! All these styles serve to create a box in order to display the bg image */
			#banner {
				position: absolute;		
				height: 161px;
				width: 748px;
				top: 0;			
				left: 0;			
	         background: url(/shared/machine/top.png) no-repeat 50% 0%;		/* NEW!! moved from #container */
				}

         div#navigation {
           position: absolute;
           left: 510px;
           top: 96px;
           width: 230px;
			  z-index: 100;				/* NEW!! places it above #banner */
           }

div#navigation ul {
  margin: 0;
  padding: 0;
  font: bold 14px verdana,sans-serif;
  }

div#navigation li {
  list-style: none;
  display: block;
  margin: 0px;
  white-space: nowrap;
  }
  
			/* NEW!! These changes fix an IE6 expanding box problem that caused an extra 1px space between
				each li */
         div#navigation li a {
           text-decoration: none;
           text-transform: lowercase;
           display: block;
           background: transparent url(/shared/machine/button_darklight.png) no-repeat 0px -44px; 
           font: bold 17px verdana, sans-serif; 
           height: 20px;							/* NEW!! was 19px, but even # is better for vertical centering */
           padding: 10px 10px 12px 50px;		/* NEW!! padding-bottom was 13px. 1px taken from height */
     		  line-height: 20px;						/* NEW!! IE6 needs this to prevent box expanding */
           }

div#navigation li a:link {
  color: #444;
  }

div#navigation li a:visited {
  color: #444;
  }

div#navigation li a:hover {
  color: #090;
  background: transparent url(/shared/machine/button_darklight.png) no-repeat 0px 0px;
  }

div#navigation li a:active {
  color: #444;
  }

         div#emailsignup {
           position: absolute;
           top: 5px;
           right: 33px;
           font: bold 8pt verdana, sans-serif;
           color: #777;
           width: 80%;
           text-align: right;
           z-index: 110;			/* places it above #banner */
           }

div#emailsignup input {
  margin: 0px 0px 0px 7px;
  border: 1px solid #888;
  font: bold 8pt verdana,sans-serif;
  color: #555;
  padding: 2px 3px;
  }

div#emailsignup input[type="text"] {
  background: white url(/shared/machine/input_bg.png) repeat-y 0px 0px;
  }

div#emailsignup input[type="submit"] {
  background: white url(/shared/machine/button_bg.png) repeat-y 0px 0px;
  }

div.entry {
  margin: 20px 0;
  text-align: justify;
  }

div#banner div.photo {
  display: none;
  }

div#banner div.band {
  display: block;
  position: absolute;
  left: 0px;
  top: 40px;
  width: 710px;
  height: 50px;
  white-space: nowrap;
  overflow: auto;
  text-align: left;
  text-transform: uppercase;
  font: bold 17pt impact,verdana,sans-serif;
  color: #777;
  letter-spacing: 5px;
  padding: 0px 0px 0px 40px;
  }

div.entry h2, div.entry h3, div.entry h4 {
  margin: 0 0 10px 0;
  font: bold 16px sans-serif;
  text-align: left;
  }

div#content h2 {
  font-size: 16px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  }

div#content h3 {
  font-size: 14px;
  }

div#content h4 {
  font-size: 12px;
  }

               div#content {
                 width: 430px;
                 margin: 0px 0px 30px 40px; /* was margin-top 90px; IE collapsed this with container padding */
                 padding: 0px 0px 0px 0px;
                 font: normal 11pt arial,sans-serif;
                 color: #454;
                 min-height: 340px;
                 }

					/* NEW!! only IE5 & IE6 can see this hack, so it's reasonably future-proof */
					* html div#content {
                 _height: 340px;		/* NEW!! an IE6 bug makes this behave like min-height, as intended */
                 }
					               
					/* NEW!! This hack fixed problems in IE6, but IE7 can't see it so the problem persisted.
               html>body div#content {
                 margin-top: 90px;
                 }
					  */

div#content h1 {
  position: absolute;
  left: 35px;
  top: 111px;
  margin: 0px;
  padding: 0px;
  font: bold 17px verdana,sans-serif;
  z-index: 100;
  color: #555;
  text-transform: lowercase;
  width: 380px;
  white-space: nowrap;
  overflow: auto;
  height: 50px;
  }

div#content h1:after {
  content:"::";
  }

body.contact div#content ul {
  padding: 0px;
  margin: 10px 0px;
  }

body.contact div#content li {
  display: block;
  padding: 0px 0px 0px 24px;
  margin: 0px;
  background: transparent url(/shared/machine/bullet.png) no-repeat 6px 4px;
  }

form {
  margin:0px;
  }

body.photos dt {
  margin: 0px 0px 0px 0px;
  padding: 15px 0px 0px 20px;
  text-align: center;
  font: bold 10pt verdana,sans-serif;
  background: transparent url(/shared/machine/gallerytop.png) 50% 0px;
  }

body.photos dd {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  text-align: center;
  padding: 5px 0px 10px 0px;
  background: transparent url(/shared/machine/gallerybottom.png) 50% 100%;
  }

body.photos img {
  border: 1px solid #898;
  }

div#footer {
  background: transparent url(/shared/machine/bottom.png) no-repeat -1px 0px;
  padding: 37px 0px 340px 20px;
  width: 510px;
  font: bold 8pt verdana,sans-serif;
  color: #777;
  position: relative;
  left: 0px;
  top: 0px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: auto;
  }

html>body div#footer {
  width: auto;
  }

body.music div#content div.details {
  border: 1px solid #9a9;
  background: transparent url(/shared/machine/eq.png) no-repeat 321px 27px;
  padding: 4px 4px 0px 4px;
  font: bold 10pt sans-serif;
  position: relative;
  }

body.music div#content h3 {
  background: transparent url(/shared/machine/songheader.png) no-repeat 0px 0px;
  margin: 10px 0px 0px 0px;
  color: #ecf5e9;
  font: bold 11px sans-serif;
  padding: 4px 9px;
  width: 308px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 290px;
  }

html>body.music div#content h3 {
  width: 290px;
  }

body.music div#content div.details ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  }

body.music div#content div.details li {
  display: block;
  padding: 0px;
  margin: 0px;
  }

body.music div#content div.details div.artist, 
body.music div#content div.details li a {
  display: block;
  border: 1px solid #9a9;
  font: bold 10px arial,sans-serif;
  text-decoration: none;
  color: #676;
  padding: 4px 6px;
  margin-bottom: 4px;
  width: 314px;
  height: 14px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 302px;
  }

html>body.music div#content div.details div.artist, 
html>body.music div#content div.details li a {
  width: 302px;
  }

body.music div#content div.details div.artist {
  background: #c7cfc4;
  font: bold 11px sans-serif;
  color: #676;
  padding: 3px 6px 2px 6px;
  height: 15px;
  width: 418px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 406px;
  }

html>body.music div#content div.details div.artist {
  width: 406px;
  }

body.music div#content div.details li a {
  background: transparent url(/shared/machine/play.png) no-repeat 99% 50%;
  margin: 4px 0px;
  }

body.music div#content div.details li a:hover {
  background-color: #ecf5e9;
  margin: 4px 0px;
  }

body.press div#content div.entry {
  border: 1px solid #9a9;
  margin: 10px 0px;
  padding: 5px;
  background: transparent url(/shared/machine/lomidhi_iesux.png) no-repeat 100% 100%;
  }

html>body.press div#content div.entry {
  background: transparent url(/shared/machine/lomidhi.png) no-repeat 100% 100%;
  }

body.press div#content div.entry blockquote {
  margin: 0px 0px 5px 0px;
  border: 1px solid #9a9;
  font: normal 10pt verdana,sans-serif;
  text-align: left;
  padding: 5px;
  background: #e2ebdf;
  }

body.press div#content div.entry div.caption {
  margin: 0px;
  padding: 5px 8px;
  border: 1px solid #9a9;
  font: normal 8pt arial,sans-serif;
  background: #b2bfb2;
  color: white;
  width: 295px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 279px;
  min-height: 14px;
  }

html>body.press div#content div.entry div.caption {
  width: 279px;
  }

body.press div#content div.entry div.caption a {
  text-decoration: none;
  color: white;
  }

body.press div#content div.entry div.caption a:hover {
  text-decoration: underline;
  }

div#calendar div.entry {
  border: 1px solid #9a9;
  padding: 5px 5px 0px 5px;
  margin: 0px 0px 10px 0px;
  position: relative;
  background: transparent url(/shared/machine/atarrow.png) no-repeat 6px 47px;
  }

html>body div#calendar div.entry {
  background: transparent url(/shared/machine/atarrow.png) no-repeat 5px 46px;
  }

div#calendar div.entry h2, div#calendar div.entry h3 {
  margin: 0px 0px 5px 0px;
  border: 1px solid #9a9;
  font: bold 11px arial,sans-serif;
  padding: 10px;
  min-height: 14px;
  }

div#calendar div.entry h2 {
  background: #c5ccc2;
  width: 260px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 240px;
  }

html>body div#calendar div.entry h2 {
  width: 240px;
  }

div#calendar div.entry h3 {
  margin-left: 40px;
  width: 220px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
  }

html>body div#calendar div.entry h3 {
  width: 200px;
  }

div#calendar div.entry div.details {
  border: 1px solid #9a9;
  position: absolute;
  left: 267px;
  top: 6px;
  height: 75px;
  width: 149px;
  background: #b2bfb2;
  text-align: left;
  }

html>body div#calendar div.entry div.details {
  left: 272px;
  top: 5px;
  }

div#calendar div.entry div.details h4 {
  padding: 10px 0px 0px 10px;
  margin: 0px;
  font: bold 9pt arial,sans-serif;
  }

div#calendar div.entry div.details address {		
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font: italic normal 8pt arial,sans-serif;
  }
					  
					div#calendar div.entry div.details div.price { /* NEW!! adds styling to new .price class */
                 padding: 0px 0px 0px 10px;
                 margin: 0px;
                 font: normal 8pt arial, sans-serif;
					  text-transform: uppercase;
                 }
					
div#calendar div.entry p {
  border: 1px solid #9a9;
  margin: 0px 0px 5px 0px;
  font-size: 9pt;
  padding: 5px 9px;
  }

div.products table {
  border: 1px solid #9a9;
  margin-bottom: 15px;
  font: bold 11px sans-serif ! important;
  }

div.products td {
  padding: 4px;
  }

div.products img {
  border: none;
  }

div.products hr {
  display: none;
  }

div.products div.entry {
  margin: 0px ! important;
  }

div.products div.entry h2 {
  margin: 0px ! important;
  border: 1px solid #9a9;
  background: #b2bfb2;
  padding: 5px 8px ! important;
  font: bold 11px arial,sans-serif ! important;
  }

div.products div.entry p {
  margin: 4px 0px 0px 0px ! important;
  border: 1px solid #9a9;
  background: #cbd6cb;
  padding: 5px 8px ! important;
  font: bold 11px arial,sans-serif ! important;
  }

div.products a {
  color: #474;
  }

div#postForm {
  border: 1px solid #9a9;
  background: transparent url(/shared/machine/faders.png) no-repeat 319px 0px;
  min-height: 296px;
  }

div#postForm label {
  display: block;
  margin: 5px;
  font: bold 10pt arial,sans-serif;
  border: 1px solid #9a9;
  padding: 6px 9px;
  background: #bbc7bb;
  width: 312px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 294px;
  }

html>body div#postForm label {
  width: 294px;
  }

div#postForm input {
  display: block;
  width: 308px;
  height: 22px;
  margin: 5px;
  }

div#postForm textarea {
  display: block;
  width: 308px;
  height: 95px;
  margin: 5px;
  }

body.guestbook div.entry {
  border: 1px solid #9a9;
  padding: 5px;
  margin: 10px 0px;
  }

body.guestbook div.entry h2 {
  border: 1px solid #9a9;
  margin: 0px ! important;
  padding: 5px 8px 5px 8px ! important;
  font: bold 11px arial,sans-serif ! important;
  background: #bbc7bb;
  }

body.guestbook div.entry h3 {
  border: 1px solid #9a9;
  margin: 5px 0px 0px 0px;
  padding: 5px 8px 5px 8px;
  font: bold 11px arial,sans-serif ! important;
  background: #c7d4c7;
  }

body.guestbook div.entry blockquote {
  border: 1px solid #9a9;
  margin: 5px 0px 0px 0px;
  padding: 5px 8px 5px 8px;
  font: normal 13px arial,sans-serif;
  text-align: left;
  }

body.links div#content a {
  color: #474;
  }

#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }