.mldetailview { display:block; position:relative; width:586px; height:384px; overflow:hidden; }
.mldetailview.disabled { display:none; }
.mldetailview > .layer { display:none; }
.mldetailview > .canvas { display:block; position:absolute; width:586px; height:340px; background-color:#DAECF8; left:0; bottom:0; overflow:hidden; /* background-color:#DAECF8; */ }
.mldetailview > .canvas > .layer { display:block; position:absolute; margin: 0 0 0 93px; width:400px; height:340px; left:0px; bottom:0px; opacity:0; filter:alpha(opacity=0); }
.mldetailview > .canvas > .layer.anim-fixed { opacity:1; filter:alpha(opacity=100); }
.mldetailview > .controller { display:block; position:absolute; width:100%; height:34px; left:0; top:0; overflow:hidden; background-color:#A3D0ED; }
.mldetailview > .controller > .label { display:block; position:absolute; width:90px; line-height:34px; bottom:0; left:0; top:0; background-color:#68B2E1; color:white; text-indent:25px; text-transform:uppercase; }
.mldetailview > .controller > .slider { display:block; position:absolute; bottom:0; left:90px; right:0; top:0; bottom:0; }
.mldetailview > .controller > .slider > .markers { display:block; position:absolute; left:10px; top:10px; right:10px; bottom:10px; background-color:white; }
.mldetailview > .controller > .slider > .markers > .marker { display:block; float:left; width:14px; height:14px; background-color:#DAECF9; cursor:pointer; }
.mldetailview > .controller > .slider > .handle { display:block; position:absolute; left:0; top:0; width:54px; bottom:0; background:#007CCC url('../images/claddings/btn-play-pause-drag.png') no-repeat left top; cursor:pointer; }
.mldetailview > .controller > .slider > .handle.pause { background-position: left center; }
.mldetailview > .controller > .slider > .handle.drag { background-position: left bottom; }