body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
		display: block;
    	background: #000;
    	margin: 0; 
    	padding: 0;
    	text-align: center;
		color: #fff;
    }
    #container { 
    	width: 1297px;
		height: 1052px;
    	background: #000;
    	text-align: left;
		position: absolute;
		top: 5%; 
	    left: 50%;
		margin: -250px 0 0 -648px;
    } 
	/* body and container end */
    #header { 
		width: 1297px;
		height: 410px;
		background:url(images/header.jpg) bottom center no-repeat #000;
		padding: 0;
		margin: 0 auto;
    } 
	/* header end */
    #left {
    	float: left;
    	width: 220px;
		height: 572px; 
		background:url(images/left_bg_open.jpg) top right no-repeat #000;
    	padding: 0;
		text-align: right;
		vertical-align:middle;
    }
	#left p.skip {
		display: block;
		width: 100px;
		height: 20px;
		margin: 0;
		position: relative;
		top: 270px; 
	    left: 105px;
	}
	#left p.skip a{
		display: block;
		width: 100px;
		height: 20px;
		padding: 0;
		margin: 0;
	}		
	#main { 
		float: left;
		width: 857px;
		height: 572px;
    	margin: 0 auto;
    	padding: 0;
		background: #000;
    } 
    #right {
    	float: left;
    	width: 220px;
		height: 572px;                                                
		background:url(images/right_bg.jpg) top left no-repeat #000;                                             
		padding: 0;
    }
	/* main divs end */
	.mframe 
	{
		width: 100%;
		height: 100%;
		border: 1px solid #000;
		overflow: auto;
		margin: 0 auto;
    	padding: 0;
	}
	/* mframe end */
    #footer { 
		width: 1297px;
		height: 264px;
    	padding: 0;
		background:url(images/footer.jpg) top center no-repeat #000;
    } 
    .fltrt {
    	float: right;
    	margin-left: 0;
    }
    .fltlft {    	
		float: left;
    	margin-right: 0;
    }
    .clearfloat {                                                
    	clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
	
	

/* General warning: Beta-ish. Code could be a bit cleaner. */
.ui360,
.ui360 * {
 position:relative;
 top:92px;
 left:80px;
}

.ui360,
.sm2-360ui {
 /* size of the container for the circle, etc. */
 width:50px;
 height:50px;
}

.ui360 {
 position:relative;
 /* a little extra spacing */
 padding-top:1px;
 padding-bottom:1px;
 margin-bottom:-18px; /* approximate "line height" we want */
 margin-left:42px; /* 50px, with a few off */
}

.ui360 a {
 line-height:50px;
}

.sm2-360ui {
 margin-left:-50px;
}

.ui360 {
 width:auto;
 text-align:right;
}

.ui360,
.ui360 * {
 vertical-align:middle;
}

.sm2-360ui {
 position:relative;
 display:inline-block; /* firefox 3 et al */
 float:left; /* firefox 2 needs this, inline-block would work with fx3 and others */
 *float:left; /* IE 6+7 */
 *display:inline;
 *clear:left;
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
 /* bump on top when active */
 z-index:10;
}

.ui360 a.sm2_link { /* this class added to playable links by SM2 */
 position:relative;
}

.ui360 a {
 color:#000;
 text-decoration:none;
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
 padding:2px;
 margin-left:-2px;
 margin-top:-2px;
}

.ui360 a:hover,
.ui360 a:focus {
 background:#eee;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 -khtml-border-radius:3px;
 border-radius:3px;
 outline:none;
}

.ui360 .sm2-canvas {
 position:absolute;
 left:0px;
 top:0px;
}

.ui360 .sm2-timing {
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 margin:0px;
 font:1px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 color:#000;
 text-align:center;
 line-height:50px;
}

.ui360 .sm2-timing.alignTweak {
 text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
}

.ui360 .sm2-cover {
 position:absolute;
 left:0px;
 top:0px;
 z-index:2;
 display:none;
}

.ui360 .sm2-360btn {
 position:absolute;
 top:50%;
 left:50%;
 width:22px;
 height:22px;
 margin-left:-11px;
 margin-top:-11px;
 cursor:pointer;
 z-index:3;
}

.ui360 .sm2-360btn-default {
}

.ui360 .sm2-360data {
 display:inline-block;
 font-family:helvetica;
}

.ui360 .sm2-360ui.sm2_playing .sm2-cover,
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
 display:block;
}

/* this could be optimized a fair bit. */

.ui360 .sm2-360btn-default {
 background:transparent url(playerimg/360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(playerimg/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(playerimg/360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(playerimg/360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
 background:transparent url(playerimg/360-button-play-light.png) no-repeat 50% 50%;
 _background:transparent url(playerimg/360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360 .sm2-360btn-playing:hover {
 background:transparent url(playerimg/360-button-pause-light.png) no-repeat 50% 50%;
 _background:transparent url(playerimg/360-button-pause-light.gif) no-repeat 50% 50%;
 cursor:pointer;
}


.ui360 .sm2-360ui.sm2_playing .sm2-timing {
 visibility:visible;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui .sm2-timing,
.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing {
 /* paused + dragging */
 visibility:visible;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
x.ui360 .sm2-360btn-playing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
 /* don't let pause button show on hover when dragging (or paused and dragging) */
 background:transparent;
 cursor:auto;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background:transparent url(playerimg/icon_loading_spinner.gif) no-repeat 50% 50%;
  opacity:0.5;
  visibility:visible;
}

/* inline list style */

.sm2-inline-list .ui360,
.sm2-inline-block .ui360 {
 position:relative;
 display:inline-block;
 float:left;
 _display:inline;
 margin-bottom:-15px;
}

.sm2-inline-list .ui360 {
 margin-bottom:0px;
}

.sm2-inline-block .ui360 {
 margin-right:8px;
}

.sm2-inline-list .ui360 a {
 display:none;
}

/* annotations */

ul.ui360playlist {
 list-style-type:none;
}

ul.ui360playlist,
ul.ui360playlist li {
 margin:0px;
 padding:0px;
}

div.ui360 div.metadata {
 display:none;
}

div.ui360 a span.metadata,
div.ui360 a span.metadata * {
 /* name of track, note etc. */
 vertical-align:baseline;
}

   
    <!--[if IE 5]>
    <style type="text/css"> 
     #left { width: 220px; height: 572px; }
     #right { width: 220px; height: 572px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
     #left,  #right { padding-top: 0; }
     #main { zoom: 1; }
    </style>
    <![endif]-->