ul.flat {
 list-style-type:none;
 padding-left:0px;
}
ul.flat li,
ul.graphic li {

	}

ul.flat li a {
	display:inline-block;

}

ul.graphic {
	list-style-type:none;
	padding-left:0px;
	margin-left:0px;
}

/* background-image-based CSS3 example */

ul.graphic {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.graphic li {
	margin-bottom:2px;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
	/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
	
 	display:block;
	TEXT-INDENT: -3000px;
	min-height:22px;
	_width:175px; /* IE 6 */
	text-decoration:none;
	color:#fff;
	height: 100px;
	width: 100px;
	border: 1px solid #666;
	float: left;
	margin-top: 10px;
}

ul.graphic li a.sm2_link {
 /* safari 3.1+ */
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s linear;
 -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
  -o-transition-property: background-color; /* opera 10.5 */
  -o-transition-duration: 0.15s;
}

ul.graphic li a { 
	background-image:url(../image/btn_play.png);
 	background-position: 50%;
 	background-repeat:no-repeat;
 	_background-image:url(../image/btn_play.gif);
	
}/* use a.sm2_link {} if you want play icons showing only if SM2 is supported */

ul.graphic li a.sm2_link:hover {
	_background-image:url(../image/btn_play.gif);
	background-color: #C39;
	background-image: url(../image/btn_play.png);
	background-repeat: no-repeat;
	background-position: 50%;
	color:#fff
}



ul.graphic li a.sm2_paused {
	_background-image:url(../image/btn_play.gif);
	background-color: ;
	background-image: url(../image/btn_play.png);
	background-repeat: no-repeat;
	background-position: 50%;
 
}

ul.graphic li a.sm2_paused:hover {
	_background-image:url(../image/btn_play.gif);
	background-color: #C39;
	background-image: url(../image/btn_play.png);
	background-repeat: no-repeat;
	background-position:50%;
}

ul.graphic li a.sm2_playing,
ul.graphic li a.sm2_playing:hover {
	_background-image:url(../image/btn_pause.gif);
	text-decoration:none;
	background-color: #C39;
	background-image: url(../image/btn_pause.png);
	background-repeat: no-repeat;
	background-position:50%;	
	color: #fff;
}


/* hide button while playing?
ul.graphic li a.sm2_playing {
 background-image:none;
}
*/

body #sm2-container object,
body #sm2-container embed {
 /*
  flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
  include body prefix to ensure override of flashblock.css.
 */

 left:-9999em;
 top:-9999em;
}
@media screen and (max-width: 825px) and (min-width:768px){

	
}

@media only screen and (max-width : 500px) {
ul.graphic li a.sm2_link {	
	height: 50px;
	width: 50px;
}
}