/* 1. GENERAL
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

body {
   color:#000;
   background:  url(/images/main/bg_sidebar.gif) repeat-y top left;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 62.5%;
   margin:0;
   padding:0;}

* {
   margin:0;
   padding:0;
   list-style-type:none;}

html,body{
 height:100%;}
 
* html #outer{height:100%;margin-left:194px}/* ie 3 pixel jog*/ 

/* 1.1	Headings and paragraphs
-----------------------------------------------------------------------------------------------*/

h1{
 font-size:9px;}
 	
h3{
 background:url(/images/main/bg_musicbars.gif) repeat-x top left;
 height:18px;
 position:relative;
 z-index:10;
 padding: 2px 0 0 21px;}

h3 span{
 text-indent:-9999px;
 overflow:hidden;
 display:block;}
 
h3 span.biography{
 background:url(/images/main/header_biography.gif) no-repeat top left;
 width: 69px;
 height:15px;}

h4{
 text-indent:-9999px;
 overflow:hidden;
 margin: 0 0 15px 0;} 

h4.related-songwriters{
 background:url(/images/main/header_relatedsongwriters.gif) no-repeat top left;
 height:22px;
 width: 139px;}


/* 1.2	Forms
-----------------------------------------------------------------------------------------------*/	
input, textarea, select {
	font-family:Arial, Helvetica, sans-serif;}


/* 1.3	Links
-----------------------------------------------------------------------------------------------*/	
a:link, a:visited {
	color:#7F5785;
	text-decoration: none;}

a:hover, a:active {
 color:#0d1411;}

a.more{
 display:block;
 background:url(/images/main/link_more.gif) no-repeat top left;
 width: 34px;
 height:9px;
 text-indent:-99999px;
 overflow:hidden;}


/* 1.4	Miscellaneous
-----------------------------------------------------------------------------------------------*/	
hr { 
	display: none; }

img {
	border: none; }

fieldset br{
 clear:left;}
 
fieldset{
 border:none;}

.edit {
margin: 0;
padding: 0;
width: 12px;
height: 8px;
}

/* Promos */

#promo-audio {
 width: 211px;
 height: 69px;
 padding-bottom: 15px;
}

#audio-player {
 padding: 45px 0 0 0;
 margin: 0;
}

#audio-title {
 padding: 42px 0 0 7px;
 margin: 0;
 width: 140px;
 float: left;
}

#promo-photos {
 width: 211px;
 height: 69px;
 padding-bottom: 5px;
}

#promo-special-collection {
 width: 211px;
 height: 69px;
 padding-bottom: 15px;
}

#promo-board {
 padding-bottom: 15px;
}

#promo-collaborated {
 padding-bottom: 15px;
}


/* 2. GENERAL ELEMENTS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
.clear {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0;
	overflow: hidden;}
	
.clearfix:after { /* clear floats */
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
.clearfix {display: block;}
/* End hide from IE-mac */

/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* Fluid Layout Styles */
#container{
min-width: 780px;
}

#outer{
 margin-left:194px;
 background:#FFFFEB;
 color: #000000;}

#column-left {
 position:relative;/*ie needs this to show float */
 width:174px;
 float:left;
 padding: 0 0 0 20px;
 margin-left:-194px;/*must be 1px less than width otherwise won't push footer down */
 left:-1px;/* line things up exactly*/}

#left-col-padded {
margin: 10px;
}

#left-col-padded p {
color: #666633;
font-family: Georgia, Times;
font-size: 12px;
}

#column-center{
 margin:-20px 0 0 0;
 position:relative;
 width: 62%;
 float:left;
 padding: 40px 5px 50px 0;
 background:#FFF url(/images/main/bg_divider.gif) repeat-y top right;
 min-height: 500px;
}

#column-right{
 width:37%;
 float:left;
 background:#FFFFEB url(/images/main/bg_divider.gif) repeat-y top left;
 margin-left: -5px;
 padding: 18px 0 0 5px;}

/* Layout */

#header{
 background:url(/images/main/bg_header.gif) repeat-x top left;
 height:98px;
 margin: 0 0 0 20px;}

#heading{
 background:url(/images/main/bg_heading.gif) no-repeat top left;
 height:46px;
 padding: 0 0 0 19px;}	

#footer{
 border-top:1px solid #A9A9A9;
 padding: 5px 16px;
 color:#666666;
 position:relative;
 //top:-34px;
 margin-bottom:-30px;
 clear:both;
 height:20px;
 border-bottom: 6px solid #000;}


/* 3.1 HEADER
-----------------------------------------------------------------------------------------------
===============================================================================================*/
a.logo{
 background:url(/images/main/logo.gif) no-repeat top left;
 width: 177px;
 height:14px;
 display:block;
 left:-1px;
 color:#666 !important;
 font-size:1em;
 padding: 84px 0 0 0px;
 font-weight:normal;
 float:left;}

a.logo span{
 display:none;}

#header-right{
 float:left;
 width: 530px;}

/* Top Navigation */
ul#top-nav{
 height: 41px;
 margin: 0 0 0 18px;}

ul#top-nav li{
 float:left;}

ul#top-nav li a{
 display:block;
 float:left;
 border-top:6px solid #000;
 padding: 4px 0 0 0;}

ul#top-nav li a:hover{
 border-top:6px solid #999966;}

ul#top-nav li a span{
 display:block;
 text-indent:-99999px;
 overflow:hidden;
 height:8px;}

ul#top-nav li a.inductee span{
 background:url(/images/main/topnav_inducteeexhibits.gif) no-repeat top left;
 width: 109px;}

ul#top-nav li a.about span{
 background:url(/images/main/topnav_aboutshof.gif) no-repeat top left;
 width: 74px;}

ul#top-nav li a.induction span{
 background:url(/images/main/topnav_inductionceremonies.gif) no-repeat top left;
 width: 127px;}

ul#top-nav li a.songwriters span{
 background:url(/images/main/topnav_songwritersfriend.gif) no-repeat top left;
 width: 124px;}

ul#top-nav li a.shoftoday span{
 background:url(/images/main/topnav_shoftoday.gif) no-repeat top left;
 width: 74px;}

/* Search */
#header-search{
position:absolute;
right:0;
 height:17px;
 padding: 24px 13px 0 0;
 z-index:100;}

#header-search a:link {
	color:#59592c;
	text-decoration: none;
        }

#header-search a:hover, a:active {
 color:#0d1411;
}

#search-form{
 width: 177px;
 border:1px solid #797979;
 position:absolute;
 visibility:hidden;
 background:#EBEAD5;
 padding: 10px;
 color:#797979;
 font-size:1em;
 font-family:Arial, Helvetica, sans-serif;
 margin: 0 0 0 -142px;
 z-index:100;}

#search-form input.text{
 border-top:1px solid #8F8F8F;
 border-left:1px solid #CECECE;
 border-right:1px solid #CECECE;
 border-bottom:1px solid #E3E3E3;
 width: 133px;
 color:#797979;
 margin: 0 7px 5px 0;
 float:left;
 vertical-align:middle;
 height:14px;
 padding: 1px;}

#search-form .button{
 float:left;}

#search-form p{
 width: 133px;
 vertical-align:bottom;
 float:left;}

#search-form a.cancel{
 margin: 12px 0 0 0;
 float:right;}

#banner{
 height: 57px;}
 
/* Dropdown menu */

ul#drop-menu{
 margin: 41px 0 0 18px;
 position:absolute;
 width: 568px;
 z-index:30;}

ul#drop-menu li{
 float:left;
 cursor:pointer;}

ul#drop-menu li a{
 float:left;
 display:block;
 cursor:pointer;
 background:#919078;
 margin: 0 3px 0 0;
 padding: 5px 6px;}

ul#drop-menu li a span{
 display:block;
 height:6px;
 position:relative;
 z-index:25;
 text-indent:-99999px;
 overflow:hidden;}

ul#drop-menu li ul{
 visibility:hidden;
 position:absolute;
 padding: 16px 0 0 0;
 clear:both;
 z-index:20;}

ul#drop-menu li ul li{
 float:none;}

ul#drop-menu li ul li a{
 float:none;
 margin:0;
 border-top:1px solid #A9A9A9;}

ul#drop-menu li:hover ul,
ul#drop-menu li.over ul{
 visibility:visible;}

ul#drop-menu li.earlyamerican a{
 width: 167px; }

ul#drop-menu li.earlyamerican ul{
 width: 179px;
 background:#A85B0E;}

ul#drop-menu li.earlyamerican li a{
 background:#773F00;}

ul#drop-menu li.earlyamerican ul  a:hover{
 background:#A85B0E !important;}

ul#drop-menu li.earlyamerican li a.colonial span{
 background:url(/images/main/nav_earlyamericancolonial.gif) no-repeat top left;}

ul#drop-menu li.earlyamerican li a.revolutionary span{
 background:url(/images/main/nav_earlyamericanrevol.gif) no-repeat top left;}

ul#drop-menu li.earlyamerican li a.slavesongs span{
 background:url(/images/main/nav_earlyamericanslave.gif) no-repeat top left;}

ul#drop-menu li.earlyamerican a span {
 background:url(/images/main/nav_earlyamerican.gif) no-repeat top left;}

ul#drop-menu li.tin a{
 width: 165px;}

ul#drop-menu li.tin ul{
 background:#2C5F71;
 width: 177px;}

ul#drop-menu li.tin ul a{
 background:#204B5A;}

ul#drop-menu li.tin ul a:hover{
 background:#2C5F71;}

ul#drop-menu li.tin a span{
 background:url(/images/main/nav_tin.gif) no-repeat top left;}

ul#drop-menu li.tin a.stage span{
 background:url(/images/main/nav_tinstage.gif) no-repeat top left;}

ul#drop-menu li.tin a.popular span{
 background:url(/images/main/nav_tinpopular.gif) no-repeat top left;}

ul#drop-menu li.tin a.ragtime span{
 background:url(/images/main/nav_tinragtime.gif) no-repeat top left;}

ul#drop-menu li.tin a.blues span{
 background:url(/images/main/nav_tinblues.gif) no-repeat top left;}

ul#drop-menu li.rockroll ul{
 background:#7A4879;
 width:200px;}

ul#drop-menu li.rockroll ul a{
 background:#552D54;}

ul#drop-menu li.rockroll ul a:hover{
 background:#7A4879;}

ul#drop-menu li.rockroll a{
 width: 189px;}

ul#drop-menu li.rockroll a span{
 background:url(/images/main/nav_rockroll.gif) no-repeat top left;}

ul#drop-menu li.rockroll a.original span{
 background:url(/images/main/nav_rockrolloriginal.gif) no-repeat top left;}

ul#drop-menu li.rockroll a.brill span{
 background:url(/images/main/nav_rockrollbrill.gif) no-repeat top left;}

ul#drop-menu li.rockroll a.motown span{
 background:url(/images/main/nav_rockrollmotown.gif) no-repeat top left;}

ul#drop-menu li.rockroll a.contemporary span{
 background:url(/images/main/nav_rockrollcontemporary.gif) no-repeat top left;}

/* 3.2 CONTENT
-----------------------------------------------------------------------------------------------
===============================================================================================*/
#heading h2{
 background:#7F5785;
 border-top:1px solid #AAAAAA;
 border-bottom:1px solid #AAAAAA;
 height:44px;
 color:#BFABC2;
 font-size:4.4em;
 //padding: 0 0 0 10px;
 margin:0;
 text-transform:uppercase;}

#heading h2 span{
 position:relative;
 //top: -4px;
 }

#column-left #pic{
 border-right: 8px solid #6D6B38;}

#content-right p{
 font-size:1.1em;
 color:#373737;
 padding:0 0 22px 0;}

.padded{
 padding: 0 15px 0 20px;}

.recommended-materials{
 border-top:1px solid #E1E1E1;
 padding: 15px 20px 0 25px;}

.recommended-materials a.materials-title {
border: 0px;
}

.recommended-materials h4{
 background:url(/images/main/header_recommendedmaterials.gif) no-repeat top left;
 width: 168px ;
 height:18px;}

.recommended-materials a{
 border:1px solid #C2C2C2;
 float:left;
 margin: 0 20px 10px 0;}

.recommended-materials a.more{
 border:none;
 margin-top: 50px;}

#paginate {
padding: 15px 0 20px 0;
}

#paginate span {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}

#quote p {
border-bottom:1px solid #A9A9A9;
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-family:Georgia, Times;
font-size: 9pt;
line-height: 18px;
}

.divider {
border-bottom:1px solid #A9A9A9;
margin: 10px 0 10px 0;
}


/* Section Navigation */

ul#section-nav {
background: #eaebe6;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
margin: 0 0 30px 0;
padding: 0 0 0 22px;
width: 98%;
float: left;
}


ul#section-nav li {
display: inline;
}

ul#section-nav li a{
 display:block;
 float:left;
 padding: 6px 10px 6px 10px;
 height:6px;
border-right: 1px solid #999999;
}

ul#section-nav li a:hover{
 background:#d4d4cb;}

ul#section-nav li a span{
 display:block;
 height:6px;
 text-indent:-9999px;
 overflow:hidden;}
}

ul#section-nav li.on {
 background:#CBCAA9;}


/* Left Column */
ul#sub-nav {
 margin: 0 6px 0 0;}

ul#sub-nav li a{
 display:block;
 border-bottom:1px solid #D6D6D6;
 padding: 6px;
 height:6px;}

ul#sub-nav li a:hover{
 background:#CBCAA9;}

ul#sub-nav li a span{
 display:block;
 height:6px;
 width: 150px;
 text-indent:-9999px;
 overflow:hidden;}

ul#sub-nav li.on {
 background:#CBCAA9;}

ul#sub-nav li a.home span{
 background:url(/images/main/subnav_home.gif) no-repeat top left;}

ul#sub-nav li a.photo-gallery span{
 background:url(/images/main/subnav_photos.gif) no-repeat top left;}
 
 ul#sub-nav li a.special-collection span{
 background:url(/images/main/subnav_special.gif) no-repeat top left;}

ul#sub-nav li a.biography span{
 background:url(/images/main/subnav_biography.gif) no-repeat top left;}

ul#sub-nav li a.discography span{
 background:url(/images/main/subnav_songs.gif) no-repeat top left;}
 
ul#sub-nav li a.timeline span{
 background:url(/images/main/subnav_timeline.gif) no-repeat top left;}

ul#sub-nav li a.audioclips span{
 background:url(/images/main/subnav_audioclips.gif) no-repeat top left;}

ul#sub-nav li a.recommended span{
 background:url(/images/main/subnav_recommended.gif) no-repeat top left;}

ul#sub-nav li a.acknowledgements span{
 background:url(/images/main/subnav_acknowledgements.gif) no-repeat top left;}

/* Right Column */
#column-right .padded{
 padding: 10px 13px;}

#column-right select{
 width: 198px;
 color:#000;
 font-size:1em;} 

.highlight h4{
 background:url(/img/header_purple_discography-highlights.gif) no-repeat top left;
 width: 157px;
 height:22px;}

.highlight{
 border-bottom:1px solid #A9A9A9;
 padding: 0 13px 10px 13px;}

.highlight p strong{
 color:#636363;
 font-size: 8pt;
 display:block;}

.highlight p span{
 color:#636363;
 font-size: 8pt;
 display:block;}

.highlight a{
 font-weight:bold;}


/* 3.3 FOOTER
-----------------------------------------------------------------------------------------------
===============================================================================================*/
#footer a{
 color:#666 !important;}

#footer p{
 position:relative;}

/* SIFR * Do Not Modify *
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.sIFR-flash {
	visibility: visible !important;
	margin: 0;}

.sIFR-replaced {
	visibility: visible !important;}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;}