/*dare-to-compare.htm*/

/*some demos aren't ready yet, but have placeholders.  search and replace class hide-temp*/
.dare-to-compare .hide-temp {display:none}

.dare-to-compare ul#synth-list li {line-height: 22px; margin-bottom: 10px; background: url("gfx/listbullet_grey.png") no-repeat scroll 2px 7px transparent;}
.dare-to-compare ul#synth-list li strong {color: #494949}
.dare-to-compare ul#midi-vs-rt li {line-height: 22px; margin-bottom: 7px; background: url("gfx/listbullet_grey.png") no-repeat scroll 2px 7px transparent;}
.dare-to-compare ul#midi-vs-rt li strong {color: #494949}

#points-to-remember {border:1px solid grey; padding:0px 10px 10px 10px; margin:30px 20px 10px 20px}

.dare-to-compare h3 {font-size:20px}

.dare-to-compare .genre .demo {margin: 10px 10px 30px 0; border-top: 2px solid #D7D7D7; padding: 20px 0 0 0}
.dare-to-compare .genre .demo:first-child {border-top:none}
.dare-to-compare .genre .demo .audioSmallContainer {border: medium none; cursor: pointer; display: inline-block; height: 17px; left: 0; overflow: hidden;
                                                    position: relative; top: 3px; width: 75px;}
/*note: horizontal positioning of the clip bg is adjusted further, depending on the demo*/
.dare-to-compare .genre .demo .clip {color: #004FC3; cursor: pointer; font-size: 12px; margin: 0 -67px 0 13px;
														   background: url("gfx/audiodemo8.png") no-repeat scroll 226px 1px transparent;
				  	                                       cursor: pointer; font-size: 13px; font-weight: bold; margin: 0; padding: 0 0 0 26px;}
.dare-to-compare .genre .demo h4 {font-size:16px; line-height: 24px; padding:0 0 9px 17px; background: url("gfx/listbullet_link_blue.png") no-repeat scroll 2px 5px transparent}
.dare-to-compare .genre .demo h4 span {margin-left:36px; font-size:14px; font-weight:normal}
.dare-to-compare .genre .demo .combined-audio-demos {font-size:14px; line-height:20px; padding-bottom:10px}
.dare-to-compare .genre .demo .combined-audio-demos .clip {background: url("gfx/audiodemo8.png") no-repeat scroll 328px 1px transparent; font-size:14px}
/*individual song demos*/
.dare-to-compare .genre .demo .full-audio-demos	{font-size:14px; line-height:20px; margin: 6px 27px 6px 27px; border:1px solid grey}
.dare-to-compare .genre .demo .full-audio-demos h5 {font-size:14px; margin: 10px 0 8px 10px; color: #494949;}
.dare-to-compare .genre .demo .full-audio-demos .realtracks-demo {font-size:14px; line-height:20px; padding-bottom:10px}
.dare-to-compare .genre .demo .full-audio-demos .realtracks-demo .clip {background: url("gfx/audiodemo11.png") no-repeat scroll 148px 1px transparent; color:green}
.dare-to-compare .genre .demo .full-audio-demos .midi-demos {margin: 0 0 0 27px}
.dare-to-compare .genre .demo .full-audio-demos .midi-demos h6 {font-size:13px; font-weight:normal}
	/*zoom:1; *display:inline => this allows IE7 to display the list as an inline-block.*/
	.dare-to-compare .genre .demo .full-audio-demos .midi-demos ul {margin: 0 0 16px -1px; list-style:none;}
	.dare-to-compare .genre .demo .full-audio-demos .midi-demos ul li {background:none; padding:0;  width:178px; display:-moz-inline-stack; display: inline-block; zoom:1; *display:inline}
	.dare-to-compare .genre .demo .full-audio-demos .midi-demos .clip {background: url("gfx/audiodemo8.png") no-repeat scroll 96px 1px transparent; padding-left:0}
/*hover*/
.dare-to-compare .genre .demo .combined-audio-demos .clip:hover,
.dare-to-compare .genre .demo .full-audio-demos .realtracks-demo .clip:hover,
.dare-to-compare .genre .demo .full-audio-demos .midi-demos .clip:hover {color:red; background-image: url("gfx/audiodemo9.png")}
.dare-to-compare .genre .demo .full-audio-demos .realtracks-demo .clip:hover {background: url("gfx/audiodemo12.png") no-repeat scroll 148px 1px transparent; color:red}

/*m4a and wma links*/
.dare-to-compare .genre .demo .hidden-links .showlinks {font-weight:normal; margin: 18px 0 16px 26px; font-size:14px}
.dare-to-compare .genre .demo .hidden-links .hidden {display:none; border:1px solid grey; margin: 10px 120px 30px 28px; padding: 16px 16px 0;}
.dare-to-compare .genre .demo .hidden-links .hidden ul {margin: 0 0 16px -1px;}
.dare-to-compare .genre .demo .hidden-links .hidden ul li {background:none; padding:0; margin-bottom:12px}