/* CSS Document */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

html {
	background-color: #cfd0d0;
	background-image: url(/maverick/images/willy/newwilly/bg_screen_05.png);
	background-repeat: repeat-x;
	padding-top: -100px;
}

body {
	background-image: url(/maverick/images/willy/newwilly/bg_page_01.png);
	background-repeat: repeat-y;
	width: 815px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

a:link {
	color: #00c734;
	text-decoration: none;
}

a:visited {
	color: #00c734;
	text-decoration: none;
}

a:hover {
	color: #00FF00;
	text-decoration: none;
}

#Wrapper {
	background-image: url(/maverick/images/willy/newwilly/bg_wrapper_01.jpg);
	height: 100%;
	background-repeat: no-repeat;
}
/* the Top Section div, like the Bottom Section div,  takes both an ID and a class style. The ID covers elements common to all of them and the class adds individual styling. */
#TopSection {
	position: relative;
	width: 757px;
	height: 570px;
	margin-left: auto;
	margin-right: auto;
}

.TopBGHome {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_01.jpg)
}

.TopBGDisco {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_discography_01.jpg)
}

.TopBGRetailers {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_retailers_01.jpg)
}

.TopBGAccs {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_accolades_01.jpg)
}

.TopBGPhotos {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_photos_01.jpg)
}

.TopBGBios {
	background-image: url(/maverick/images/willy/newwilly/bg_topsection_biographies_01.jpg)
}

/* More styles than there would ordinarily be because of the sloping arrangement of the text links in the nav */
#Nav {
	position: absolute;
	width: 192px;
	height: 159px;
	top: 315px;
	left: 82px;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
}

#Nav ul {
	padding-left: 0;
	list-style-type: none;
	position: absolute;
	bottom: 14px;
	right: 0px;
	width: 100%;
}

#Nav ul li {
	font-weight: bold;
	margin-bottom: 2px;
}

#Nav ul li.discography {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-repeat: no-repeat;
	background-position: 178px 0px;
	padding-right: 28px;
	line-height: 14px;
}

#Nav ul li.biographies {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-repeat: no-repeat;
	background-position: 170px 0px;
	padding-right: 38px;
	line-height: 14px;
}

#Nav ul li.retailers {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-repeat: no-repeat;
	background-position: 163px 0px;
	padding-right: 46px;
	line-height: 14px;
}

#Nav ul li.accolades {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-repeat: no-repeat;
	background-position: 157px 0px;
	padding-right: 54px;
	line-height: 14px;
}

#Nav ul li.photographs {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-repeat: no-repeat;
	background-position: 152px 0px;
	padding-right: 61px;
	line-height: 14px;
}

#Nav ul li.discography:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-position: -22px 0; 
}

#Nav ul li.biographies:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-position: -30px 0; 
}

#Nav ul li.retailers:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-position: -37px 0; 
}

#Nav ul li.accolades:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-position: -43px 0; 
}

#Nav ul li.photographs:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_icons_orbs_02.png);
	background-position: -48px 0; 
}

#Nav a:link, #SubRail a:link {
	color: #004a23;
	text-decoration: none;
}

#Nav a:visited, #SubRail a:visited {
	color: #004a23;
	text-decoration: none;
}

#Nav a:hover, #SubRail a:hover {
	color: #00FF00;
	text-decoration: none;
}

/* These next twelve styles handle the five glassy buttons on the right of every page */
#Orbs {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 264px;
	width: 70px;
}

#Orbs ul {
	padding-left: 0;
	list-style-type: none;
}

li.buy {
	background-image:url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	width: 48px;
	height: 49px;
	background-position: 0px 211px;
}

li.buy:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	background-position: 47px 211px;
}

li.latinStreet {
	background-image:url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	width: 48px;
	height: 49px;
}

li.latinStreet:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	background-position: 47px 260px;	
}

li.facebook {
	background-image:url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	width: 48px;
	height: 49px;
	background-position: 0px 113px;
}

li.facebook:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	background-position: 47px 113px;
}

li.youTube {
	background-image:url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	width: 48px;
	height: 49px;
	background-position: 0px 63px;
}

li.youTube:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	background-position: 47px 63px;
}

li.mySpace {
	background-image:url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	width: 48px;
	height: 49px;
	background-position: 0px 162px;
}

li.mySpace:hover {
	background-image: url(/maverick/images/willy/newwilly/sprite_buttons_orbs_01.png);
	background-position: 47px 162px;
}

#Music {
	position: absolute;
	top: 263px;
	right: 300px;
	height: 60px;
	width: 70px;
	vertical-align: top;
	text-align: right;
}

#Music p {
	font-size: 9px;
	color: #999999;
	/* padding-right: 15px; */
}

/* To house the big spacer that covers the CD BG and which carries the big circle image map */
#LinkHome {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 340px;
	height: 340px;
	z-index: 10;
}

/* These next two styles are unique because they create styles for divs that exist on only two screens -- biographies and photographs. These are the only two pages in which the top section must carry actual HTML content instead of a background image depicting dancers dancing */
#Pix {
	position: absolute;
	top: 314px;
	right: 80px;
	width: 210px;
	height: 260px;
	z-index: 9;
}

#Bios {
	position: absolute;
	top: 215px;
	right: 80px;
	width: 210px;
	height: 260px;
	z-index: 9;
}

.thumb {
	float: left;
	margin-left: 4px;
	margin-bottom: 6px;
	width: 100px;
}

.thumb p {
	font-size: 9px;
	text-align: center;
	color: #40775a;
}

#BottomSection {
	width: 757px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-image: url(/maverick/images/willy/newwilly/bg_bottomsection_01.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

/* 'bs' in the following six styles stands for 'Bottom Section.' These individually style the div by page. The div to which they are applied take both the ID BottomSection AND any one of these six classes. */
.bsRetailers {
	height: 550px;
}

.bsPhotos {
	height: 250px;
}

.bsHome {
	height: 250px;
}

.bsDisco {
	height: 1100px;
}

.bsBios {
	height: 3500px;
}

.bsAccs {
	height: 1400px;
}

#SubRail {
	position: absolute;
	top: 0px;
	left: 46px;
	width: 156px;
	height: 200px;
	font-size: 9px;
	text-align: right;
	padding-right: 10px;
}

#SubRail ul {
	list-style-type: none;
	margin-right: 10px;
}

#SubRail ul li{
	margin-bottom: 5px;
}

/* Where all wriiten content goes */
#Content {
	position: absolute;
	top: 0px;
	left: 218px;
	width: 469px;
	height: 100%;
	padding-left: 38px;
	font-size: 11px;
	color: #40775a;
}

h1 {
	color: #004a23;
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 5px;
}

h2 {
	color: #004a23;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 3px;
}

h2.backToTop {
	position: relative;
	background-image: url(/maverick/images/willy/newwilly/button_orb_backtotop_off_01.png);
	background-repeat: no-repeat;
	background-position: 448px bottom;
}

h2.backToTop:hover {
	position: relative;
	background-image: url(/maverick/images/willy/newwilly/button_orb_backtotop_on_01.png);
	background-repeat: no-repeat;
	background-position: 448px bottom;
}

/* this style creates more space between paragraphs on pages for which that seems appropriate */
.bsAccs h2, .bsDisco h2 {
	margin-top: 20px;
}

h3 {
	color: #004a23;
	font-weight: bold;
	margin-bottom: 2px;
}

#BottomSection p {
	margin-bottom: 9px;
}

#BottomSection img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 3px;
	
}

#BottomSection ul, ol {
	margin-bottom: 9px;
	list-style-position: inside;
}

cite {
	font-weight: bold;
	white-space: nowrap;
}

#Footer {
	width: 757px;
	height: 90px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-left: 285px;
}

#FooterContent {
	width: 469px;
	margin-top: 20px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #739c86;
	font-size: 9px;
	color: #739c86;
	padding-top: 5px;
}

#FooterContent img {
	float: right;
	margin-right: 30px;
}