/* 	
	UPDATES

	* by Jordan Dobson Oct 17th 2008 - Added CSS for the Hero
	* by Jordan Dobson Nov 3rd 2008 - Added Firefox Enhancements to Drop Downs
	* by Jordan Dobson Dec 15 2009 - Updated Product Rollover Animations for JS & No-JS
	
*/

/* Artist Global */

div#menu p{
	margin-top: 0px; /* Override Global Setting of 15px */
}

h2{
	margin-bottom: 5px;
}

																				/* Product Wrapper */
form{
	width:                   200px;
	overflow:                hidden;
	float:                   left;
	display:                 block;
	margin-right:            50px;
	margin-top:              50px;
}

/***********************************************************
Product Flags
***********************************************************/

/* Tab Containter */
fieldset legend{
	width: 200px;
}

/* Tabs Wrapper */
fieldset legend small{
	width: 200px;
	display: block;
	height: 1.125em;			 /* 18px */
	position: absolute;
	margin-top: -1.125em;		/* 18px */
	overflow: hidden;
}

fieldset legend b,
fieldset legend i{
	height: 1.8em;
	font-size: .625em;
	line-height: 1.9em;
	float: right;
	padding: 0em .2em 0em .3em;
	margin-left: .2em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	text-transform: Uppercase;
	letter-spacing: 1px;
	font-family: arial;
	
	-moz-border-radius-topleft:      5px;
	-moz-border-radius-topright:     5px;
	-webkit-border-top-left-radius:  5px;
	-webkit-border-top-right-radius: 5px;
	border-top-left-radius:          5px;
	border-top-right-radius:         5px;
}

/* FireFox 3 for PC Hack */
html>/**/body fieldset legend b, x:-moz-any-link, x:default { 
	line-height: 1.8em;
}
/* FireFox 3 for PC Hack */
html>/**/body fieldset legend i, x:-moz-any-link, x:default {
	line-height: 1.8em;
}

/* Flag colors */
fieldset legend b{ background-color: orange;  }
fieldset legend i{ background-color: green;   }

/***********************************************************
Product Image & Title Wrapper
***********************************************************/

fieldset a{
	display:             block;
	width:               200px;
	height:              200px;
	overflow:            hidden;
	text-decoration:     none;
	border-top:          1px solid #dfdfdf;
	border-bottom:       1px solid #dfdfdf;
	position:            relative;
}

/***********************************************************
Product Image
***********************************************************/

fieldset a img{
	border:              none;
	float:               none;
	display:             block;
	margin:              0;
	padding:             0;
	background-color:    #eeeeee;
	color:               #999999;
	font-size:           .75em;
}

/***********************************************************
Product Title Wrapper
***********************************************************/

fieldset a span.title{
  position:             absolute;
  bottom:               -150px;                             /* Hide Product Title & Price By Default */
  display:              block;
  width:                180px;
  padding:              10px;
  background-color:     rgba(245,245,245,.90);
  text-align:           center; 
}
fieldset:hover a span.nojs{
  bottom:               0px;                                /* Show Product Title & Price on Rollover */                               
}
/***********************************************************
Product Title Wrapper > Band Name & Product Title Wrapper
***********************************************************/

fieldset a span.title h3{
  color:         #333;
}

/***********************************************************
Product Title Wrapper > Band Name & Product Title Wrapper
***********************************************************/
fieldset a span.title h3,
fieldset a span.title p{
  display:            inline;
  font-size:          14px;
  font-weight:        bold;
}
/***********************************************************
Product Band Name
***********************************************************/
fieldset a span.title h3 i{   /* Band Name */
  font-weight:        bold;
  font-style:         normal;
  color:              #777;
  text-transform:     Uppercase;
  font-size:          9px;
  margin-bottom:      8px;
  display:            none;                                 /* Hide Band Name By Default - Override in MultiArtist CSS */
}

/***********************************************************
Product Price
***********************************************************/
fieldset a span.title p big{
  font-family: arial black;
  font-size: .9em;
  display: block;
  padding-top: 8px;
  color: black;
}

/***********************************************************
Select Option
***********************************************************/
																				/*  Select & Add Button Wrapper */
form span.options{
	background-color: #eeeeee;
	display: block;
	padding: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	vertical-align: middle;
}

form:hover span.options{
	background-color: #dfdfdf;
}
																				/*  Select Element */

form span select{
	width: 140px;
	margin: 0 !important;
	vertical-align: middle;
	font-size: .7125em;
	line-height: 20px;
	height: 20px;
	padding: .3em;
	font-weight: bold;
	-moz-border-radius: 4px;
	color: #666666;
	background-color: #ffffff;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}

/* FireFox 3 for PC Hack */
html>/**/body form span select, x:-moz-any-link, x:default {
	/* Adjust Top Spacing for text */
	padding-top: .2em;
}

/* Select Element > Option Adjustments */
form span select option{
	color: #333333;
	font-size: 120%;
	text-indent: .5em;	
}

form span select optgroup,
form span select option:first-child{
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
	color: #999999;
	text-indent: .5em;
	padding: .25em 0;
}
form span select option + optgroup{
	padding: 0;
}

/*  Input Element */

form span input{
	height:            20px;	
	width:             45px;
	padding-bottom:    2px;
	overflow:          hidden;
	
	margin-left: 	   5px;
	
	line-height:       20px !important;
	
	font-family:       "Arial Black", Arial, Helvetica, Geneva, sans-serif;
	font-weight:       normal !important;
	text-transform:    Uppercase;
	font-size:         .65em;
	letter-spacing:    1px;
	
	text-align:        center !important;
	
	color:             #ffffff;
	background-color:  #0099CC;
	
	vertical-align:    middle;	
	cursor:            pointer;

	-moz-border-radius:    4px;
	-webkit-border-radius: 4px;
	border-radius:         4px !important;
}

fieldset span input:hover{
	background-color: #FF00A7;
}









																				/* Super Feature */
#hero{
	width: 700px;
	height: 200px;
	overflow: hidden;
	position:relative;
	font-family: arial, sans-serif;
	
	background-color: #000;
}
#hero a{
	width: 700px;
	height: 200px;
	display: block;
	overflow: hidden;
	border-width:2px;
	border-style: solid;
	margin: -2px 0 0 -2px;
	
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	-moz-border-radius-bottomleft: 7px;
	-moz-border-radius-bottomright: 7px;
	
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	
	border-color: #ffffff;
	/* this should be same as the page background*/			
	
}
#hero a img{
	display: none;
}
#hero div.details{
	height: 55px;
	position: relative;
	margin-top: -56px;
	border-top-width: 1px;
	border-top-style: solid;
	
	border-color: #666666;			
	
}
#hero h3,
#hero h3 a{
	color: #fff;
}
#hero h3{
	margin:0;
	height: 30px;
	font-size: 20px;
	line-height: 36px;
	padding: 0 165px 0 10px;
	width: 525px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	position: relative !important;
	z-index: 100;	
		
}
#hero h3 a{
	text-decoration: none;
	border: none;
	line-height: 36px !important;
	display: inline !important;
}
#hero .details a{
	display: inline;
	width: auto;
	height: auto;
	background-image: none;
}
#hero .details p{
	margin:0;
	padding: 0;
	width: 100%;
	display:inline;
}
#hero .details p big{
	display: block;
	float: left;
	width: 525px;
	padding: 0 165px 0 10px;

	height: 25px;
	font-size:13px;
	line-height:19px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	position: relative;
	z-index: 100;
	
	color: #999999;			
	
}
#hero .details p big b{
	display:inline;
	font-weight:bold;
	color: #cccccc;
}
#hero .details p big small{
	font-size:10px;
}
#hero .details p b a{
	width: 125px;
	margin: -46px 10px 0px 30px;
	display: block !important;
	background-image: url("/_site/img/btn_overlay_small.png");
	background-position: center center;
	height: 35px !important;
	z-index: 1000;
	margin-left: 535px;
	float: right;
	font-family: "Arial Black", Arial, Helvetica, Geneva, sans-serif;
	font-size: .825em;
	text-transform: Uppercase;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: normal;
	position: relative;
	z-index: 100;
	border: none;
	
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;

	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	
	background-color: #0099CC;
	color: #fff;			
				
}
#hero .details p b a:hover{
	color: #fff;
	background-color: #FF00A7;
}
#hero .details p b a span{
	display: none;
}
#hero hr{
	
	border:none;	

	width: 700px;
	height: 53px;
	margin: 0;
	padding: 0;
	
	position: absolute;
	bottom: 2px;
	left:0;
	z-index: 50;
	
		
	/* These have a tighter radius since they don't exactly math up */
	
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	
	/* these should be the same color */
	background-color: #000000;
	color: #000000;
	
	/* These should be all the same */
	opacity: .75;
	-moz-opacity: 0.75;
	filter:alpha(opacity=75);			
			
}

/* ERROR COLOR & STYLING */

dl.alert{
	width: 700px;
	margin-top: 50px;
}

.alert dd{
	background-color: #ffffff;
}