/*******************************************************************
 * TITLE: Color Scheme Stylesheet for Blue Haze                    *
 * URI  : http://www.oswd.org/design/xxx/bluehaze/color-scheme.css *
 * MODIF: 2003-01-05 1608 +0800                                    *
 *******************************************************************/


/* ------------------------------------------------------------------------
   Four basic colors are used to render Blue Haze. These are:
     1. Text Color
     2. Border Color
     3. Background Color (darker)
     4. Background Color (lighter)

   To change the above colors, just edit their respective values below.
------------------------------------------------------------------------ */


/* ###### General Color Scheme ###### */
body, h1, h2, h3, q {
  background-color: #f0e8e8;
  color: #961B1E;
}

.sideBox a, .sideBox a:hover, .sideBox span, .sideBox div,
.sideBoxCallOut a, .sideBoxCallOut a:hover, .sideBoxCallOut span, .sideBoxCallOut div,
#header div, #header div *, #footer *, .headerTitle, .topOfPage {
  color: white;
}

h1, q,  #header, .sideBox, .sideBox div, .sideBoxCallOut, .sideBoxCallOut div
{ /* Border Color: */  border-color: #967D7D; }

#header, .sideBox div, .sideBoxCallOut div, .sideBox .sideBoxTitle
{ /* Background Color (darker): */  background-color: #050505; }

q, .sideBox a, .sideBox span, .sideBoxCallOut a, .sideBoxCallOut span, .sideBoxCallOut, .sideBoxCallOut .text
{ /* Background Color (lighter): */  background-color: #961B1E; }

#bodyText a:link                    { color: #2020ff; }
#bodyText a:visited                 { color: #202060; }
#bodyText a:active                  { color: #202060; }
#bodyText a:hover                   { color: red; border-color: red;}

#headerNav a:link                    { color: #2020ff; }
#headerNav a:visited                 { color: #202060; }
#headerNav a:active                  { color: #202060; }
#headerNav a:hover                   { color: red; border-color: red;}


/* ###### Special Colors ###### */

acronym {
  color: blue;
  border-bottom-color: blue;
}

#footer {
  background-color: #241B14;
}
.sideBox a:hover  {
  background-color: #D92E2E;
}

.questionStyleEven {margin-top: 0em; padding-top: 0em; background: #f6eBeE;}
.questionStyleOdd {margin-top: 0em; padding-top: 0em; background: #e6dBdE; }
.questionStyleEven p {margin-bottom: 0em; padding-bottom: 0em; }
.questionStyleOdd p {margin-bottom: 0em; padding-bottom: 0em; }


/* ###### Menu Highlight ###### */
#home .home, #about .about, #authors .authors, #daily .daily, #comments .comments, #search .search,
#music_albums .music_albums, #music_band-names .music_band-names,
#music_custom .music_custom, #music_custom-submit .music_custom-submit,
#music_band-nationality .music_band-nationality, #music_song-year-debut .music_song-year-debut,
#music_match-song-band .music_match-song-band, #music_which-song-came-first .music_which-song-came-first,
#music_sort-albums .music_sort-albums, #music_band-guess .music_band-guess,
#movies_titles .movies_titles, #movies_match-actor-movie .movies_match-actor-movie,
#movies_directors .movies_directors, #movies_movie-characters .movies_movie-characters,
#movies_older-movie .movies_older-movie, #movies_movie-year-debut .movies_movie-year-debut,
#movies_quotes .movies_quotes, #movies_custom .movies_custom, #movies_custom-submit .movies_custom-submit,
#television_titles .television_titles, #television_show-titles .television_show-titles,
#television_match-actor-tv-show .television_match-actor-tv-show, #television_networks .television_networks, #television_characters-tv-shows .television_characters-tv-shows,
#television_which-show-ran-longer .television_which-show-ran-longer, #television_order-tv-shows-episodes .television_order-tv-shows-episodes,
#television_tv-shows-year-debut .television_tv-shows-year-debut, #television_which-show-debut-first .television_which-show-debut-first,
#television_quotes .television_quotes, #television_custom .television_custom,  #television_custom-submit .television_custom-submit,
#misc_titles .misc_titles, #misc_arcade-games .misc_arcade-games,
#misc_custom .misc_custom, #misc_custom-submit .misc_custom-submit
{
  font-weight: bold;
  background-color: #D92E2E;
}

.warnSection {padding-bottom: 1em; color: red;}

@media print {
	body, h1, h2, h3, q {
	  background-color: white;
	  color: black;
	}


	acronym {
	  color: black;
	  border-bottom-color: black;
	}

	#bodyText a {
	  color: black;
	  border-bottom-color: black;
	}

	#footer {
	  background-color: white;
	}

	.questionStyleEven {margin-top: 0em; padding-top: 0em; background: white;}
	.questionStyleOdd {margin-top: 0em; padding-top: 0em; background: white; }
	.questionStyleEven p {margin-bottom: 0em; padding-bottom: 0em; }
	.questionStyleOdd p {margin-bottom: 0em; padding-bottom: 0em; }
}

/* ##################### used for graphs BEGIN ################# */
   .graph {
		background: #961B1E;
		color: white;
	  	border-color: #967D7D;
   }

   .graph td {
   }

   .graph thead th {
		background: #050505;
		border-top: solid 1px #050505;
   }

   .graph tfoot td {
     border-top: solid 1px #999999;
     color: #666666;
   }

   .bar {
     background-color: white;
     border-left: solid 1px white;
	  color:black;
   }

   .bar div {
     border-top: solid 2px #0077DD;
     background-color: #004080;
     border-bottom: solid 2px #002266;
     color: white;
   }

   .barMatch {
     background-color: white;
     border-left: solid 1px white;
	  color:black;
   }

   .barMatch div {
     border-top: solid 2px #A02226;
     background-color: #800020;
     border-bottom: solid 2px #802226;
     color: white;
   }

/* ##################### used for graphs END ################# */


/* ##################### used for button soup ################# */
/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:406px; height:16px; background:url(socialbook.png) no-repeat; position:relative;}

/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #pic1 {left:0px; top:0px; z-index:20;}
#imap #pic2 {left:24px; top:0px; z-index:20;}
#imap #pic3 {left:48px; top:0px; z-index:20;}
#imap #pic4 {left:72px; top:0px; z-index:20;}
#imap #pic5 {left:96px; top:0px; z-index:20;}
#imap #pic6 {left:120px; top:0px; z-index:20;}
#imap #pic7 {left:144px; top:0px; z-index:20;}
#imap #pic8 {left:168px; top:0px; z-index:20;}
#imap #pic9 {left:192px; top:0px; z-index:20;}
#imap #pic10 {left:216px; top:0px; z-index:20;}
#imap #pic11 {left:240px; top:0px; z-index:20;}
#imap #pic12 {left:264px; top:0px; z-index:20;}
#imap #pic13 {left:288px; top:0px; z-index:20;}
#imap #pic14 {left:312px; top:0px; z-index:20;}
#imap #pic15 {left:336px; top:0px; z-index:20;}
#imap #pic16 {left:360px; top:0px; z-index:20;}
#imap #pic17 {left:384px; top:0px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a {display:block; width:16px; height:16px; text-decoration:none; z-index:20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}

/* move the link background image to position 0 0 when hovered */
#imap a#link1:hover, #imap a#link2:hover, #imap a#link3:hover, #imap a#link4:hover, #imap a#link5:hover {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:250px; display:block; font-family:arial; font-size:12px; background:#F0E8E8; color:#000; padding:5px;}

/* move the span text to a common position at the bottom of the image map */
#imap a:hover span {left:0px; top:-30px;}

/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}
#imap a {border-bottom-style: none;}
