/* UI & Canvas */
.ui360, .sm2-360ui {position: relative; min-width: 50px; min-height: 50px;}
.sm2-360ui {width:50px; height:50px;}
.ui360,
.ui360 * {float: left; vertical-align: middle;}
.sm2-360ui {position:relative; display:inline-block; float:left; *display:inline;}
.sm2-inline-list {display: block; min-width: 950px;}
.ui360-vis {float: left;}

.sm2-360ui.sm2_playing, .sm2-360ui.sm2_paused {color: #666; z-index:10;}
.ui360 a { /* .sm2_link class added to playable links by SM2 */
 float:left; display:inline; position:relative; color:#000; text-decoration:none; left:3px; top:18px; text-indent:50px;}

.ui360 a.sm2_link {text-indent:0px;}
.ui360 a, .ui360 a:hover, .ui360 a:focus {padding:2px; margin-left:-2px; margin-top:-2px;}
.ui360 a:hover,.ui360 a:focus {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: 16px "DIN-Medium", Helvetica, Arial; color: #666; text-align: center; line-height:50px;}
.ui360 .sm2-timing.alignTweak {text-indent:1px; /* Safari */}

.ui360 .sm2-cover {position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:2; display:none; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* IE 9 won't catch mouse events otherwise. */}

.ui360 .sm2-360btn {position: absolute; display: block; top: 150px; left: 50%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 10px; cursor: pointer; z-index: 3;}
.ui360 .sm2-360data {display:inline-block; font-family: Helvetica;}
.sm2-inline-block .ui360 .sm2-360btn, .ui360 .sm2-360ui.sm2_playing .sm2-360btn, .ui360 .sm2-360ui.sm2_paused .sm2-360btn {width:22px; height:22px; margin-left:-11px; margin-top:-11px;}
.ui360 .sm2-360ui.sm2_playing .sm2-cover, .ui360 .sm2-360ui.sm2_paused .sm2-cover {display:block; color: #666;}
.ui360, .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn {background:transparent url(sm/360-button-play.png) no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABoUlEQVR42sWVu2oCQRhGU/s8gpVYJeQJNkZSbiH4QNuLlQZS21sJayGYaOEFVFDxNiremj9zig2uzk5YQpKFg8PMd75ZZle9E5Ff4e+Ll8tlQuNoPI2vUcCYOdbIxCmm9F5T0YgNMmS/LebSwWdNa7VayXq9ls1mI9vtVna7nQBj5lgjQxYHN7KY3QkiUbDf7+V4PMrpdArBHGtkyOJc3/n1mVaUUl+F5/PZSrABDi4dpmKH3QkixQEHlw5TsccZmsRCoSD1et1ajkuHqdg/HA5GKZPJCOTzeanVasYMLh2mYsXDIGAoDuG6rlSr1WCdBxrcsTIWazgrQiHS6bSRYJ3XDzeq2O/3+9Ltdm9IpVIhstmslEqlUAY36ii8ZrMpjUbjhmQyKeA4jhSLRWMGN+rhOZ1Oh8ANuVxOyuUy40hwo163RK/XeyPQbrdjgYNr/ILAYDB41Gf1wZnFAQfX+iM0HA5fxuPx+2g0Ej22QoYsDq61mGsymTxMp9NX/Sk2yJDFsRZfXpzXbDZ7WiwW3nw+9zUKGDPHGpkL5V//mn7OJyJZApyzeUS5AAAAAElFTkSuQmCC);
 *background-image: url(360-button-play.png); background-repeat: no-repeat;}

.ui360 {/* "fake" button shown before SM2 has started, non-JS/non-SM2 case etc. background image will be removed via JS, in threeSixyPlayer.init() */
 float: left; background-position: 50% 50%; _background:transparent url(sm/360-button-play.gif) no-repeat 50% 50%;}
.ui360 .sm2-360btn-default {background-position:50% 50%; _background:transparent url(sm/360-button-play.gif) no-repeat 50% 50%;}
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {background-position:50% 50%; _background:transparent url(sm/360-button-play.gif) no-repeat 50% 50%;}
.ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn {cursor:pointer;}
.ui360 .sm2-360btn-default:hover, .ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {background:transparent url(sm/360-button-play-light.png) no-repeat 50% 50%; _background:transparent url(sm/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(sm/360-button-pause-light.png) no-repeat 50% 50%; _background:transparent url(sm/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, .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(sm/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 {/* inline player: minor tweak, tighten spacing */margin-right:-2px;}
.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 * {vertical-align:baseline;}

/* larger canvas, spectrum + EQ visualization and other items */
.ui360-vis, .ui360-vis .sm2-360ui, .sm2-inline-list .ui360-vis {/* size of the container for the circle, etc. */width: 300px; height: 340px;}
.ui360-vis {position:relative; /* a little extra spacing */ padding-top:1px; padding-bottom:1px; margin-bottom:-18px; /* approximate "line height" we want */ padding-left:248px; margin-left:0px; background-position:22.6% 50%;}
.sm2-inline-list .ui360-vis {cursor:pointer}
.ui360-vis a {font:14px "DIN-Medium",helvetica,monaco,lucida,terminal,monospace; white-space:nowrap; text-indent:0px; top:46%;}
.sm2-inline-list .ui360-vis a {line-height: 300px; top:auto;}
.ui360-vis .sm2-360ui {margin-left: -300px;}

/* Time Elapsed */
.ui360-vis .sm2-timing { font: bold 24px "DIN Medium",helvetica,monaco,lucida,terminal,monospace; color: #44b2ff; text-align: center; line-height: 300px; text-indent: 0px;}
.sm2-inline-list .ui360-vis, .sm2-inline-list .ui360-vis .sm2-360ui {margin-left: 0px;}
.sm2-inline-list .ui360-vis {margin: 8px 15px 7px 0px; padding-left:0px; background-position:50% 50%; /* initial play button position */}
.sm2-inline-list .ui360-vis .sm2-360ui {}
.sm2-inline-list .ui360-vis a {position:absolute; display:inline; left:0px; bottom:0px; top:1px; width: 300px; /* 2px padding in box */ height:340px; /* dumb vertical hack */ *height: 340px; /* IE is dumb. */ overflow:hidden; font-size: 20px; color:#999; margin: 0; padding: 0; line-height:600px; /* bottom vertical alignment for text */ *line-height:595px; /* IE again */ text-align: center; background: #fafafa;}

.sm2-inline-list .ui360 a:hover {background-color:transparent;}
.sm2-inline-list .ui360-vis:hover .sm2-360ui, .sm2-inline-list .ui360-vis a.sm2_link:hover, .sm2-inline-list .ui360-vis a.sm2_link:active, .sm2-inline-list .ui360-vis a.sm2_link:focus {background-color: transparent;}
.sm2-inline-list .ui360-vis:hover a.sm2_link {background-color: #fafafa; *background-color: transparent;}

/* Use a bigger loading image for this layout */
.ui360-vis .sm2-360btn, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn, .ui360-vis .sm2-360ui.sm2_playing .sm2-360btn {width:60px; height:60px; margin-left:-30px; margin-top:-30px;}
.ui360-vis, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn, .ui360-vis .sm2-360btn-default {background: transparent url(sm/360-button-vis-play.png) no-repeat 50% 50%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Qzg0RTgzNDAzRjRFMTExOUI2Q0JFMjFCRDMzMjI4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjBFMDg2MEY0NjQxMUUxODc3RkUyMzU0MDc0MzlFOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjBFMDg1RkY0NjQxMUUxODc3RkUyMzU0MDc0MzlFOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdGODRFODM0MDNGNEUxMTE5QjZDQkUyMUJEMzMyMjhGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdDODRFODM0MDNGNEUxMTE5QjZDQkUyMUJEMzMyMjhGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+D9qCVQAAA7BJREFUeNrcm22ITFEYx8/si7eNzYq0VtIuLeUtGezW5sN+WWTDelmLWsr9wqJ8oJREWSIsPlzFlresSORlP+wH1KIpeflg5SUJS4QizDJ2/J/uMzVNd9x7dvaMc+apX6e95z/N/OfOPec5zzkbiEajIpWwbTsHzXJQD6aB/qATtIJ94LFQGJZlSemzUjQ7FM0N0Awq2CxFIVgFHoF1QqPISvHOXgLl/5BlgyZQZ7xhxGow06f2IBhouuF6Ce0QMNd0w5MV67UznCOp72O64ZeS+hemGz4voY3wiG604b3gg08tTU2vjTaMDOcTmmrwxUN6GWzOhHmYTN9FMwW0gN8J3W9AA5jv0hc/8BX0YABM20jrFq/AUk4sJoB8vtYB3BL1AFgC1nLiQl96N7gDDvOXF9XZcCy+gdsemn7gFFjo8ksrZ2p4MRLW7ifdgzjqYjYxqN/W8hmWjDKwwqd2JeuNNlynWK+d4UmK9doZzlas187wE8V67QyfU6zXzvB10OZT28Z64+dhyrBCHpoQ60QmGP4snOrmFuGUcuOjk69XsM4t8sAYMNwUwxRdoBEUgRIwndsivt7l8poqcBN8BU/BO16c7LBtO193w7GIchUkxG2yhcZ+cI3vfPznHQG2gnswXWKCYT+xCWzw0BSDqzA9wHTDtKuxzad2LK+9jTY8jwcpv7HMdMPjJPWlmfAMGz8Py0SHitxbZ8NU7fwuoT9juuGPYLtPLSUjTZnwDFOx/4CHhpKWOZZl/dDdcICThiC3gSTZ2EZOLW8Jp5wbi7dgJ5gKs8/9vmnOfzDal03QUYjChMXDIU4lE/PpViaPX0Ml4ffUIXvGI92GC3idG3TpIyO7hLNTUZVkxUSD2DOTpqWWJGbjI8g64+fh2aDSp7aS77LRhhdJ6hebbrhUsV47w38U67Uz/FCxXjvDpxXrtTNMe8cnfWpPCO+9ZiPm4TXggoeG+i1VH6A3DdORhzKeP8cnyY3DPD3Vgva43Lib/67l/rAqw72RWo4Cu8ECkBt3nerGe8CRhKSfFgRnGXr/QcKpN0e0r3jYtj0DzX3hbI3kJnQX8Rr1oktfLCKcM0fS9Uylcl6aTsjS6brBHlKqPjbqssBO5Q5TkXyYTy3VjEeabrhGcqyoNt3waEl9semGZQeaX6YbfqBYr53hZgktnby9YrrhY8I5EOon1gun8GauYcuyIjzytnusaRtUrXzSnmnBNO0OzBLOv/RQ3fgnd1HJ9TiYKJzSqzbxV4ABAFsjwR2tYaGyAAAAAElFTkSuQmCC);
 *background-image: url(sm/360-button-vis-play.png); _background: transparent url(sm/360-button-vis-play.gif) no-repeat 50% 50%; cursor: pointer;
}
.ui360-vis:hover .sm2-360btn, .ui360-vis .sm2-360btn-default:hover, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn:hover {background:transparent url(sm/360-button-vis-play-light.png) no-repeat 50% 50%; _background:transparent url(sm/360-button-vis-play.gif) no-repeat 50% 50%; cursor:pointer;}
.ui360-vis .sm2-360ui.sm2_playing .sm2-360btn:hover, .ui360-vis .sm2-360btn-playing:hover {background:transparent url(sm/360-button-vis-pause-light.png) no-repeat 50% 50%; _background:transparent url(sm/360-button-vis-pause-light.gif) no-repeat 50% 50%; cursor:pointer;}

.ui360-vis {/* non-JS / before-loaded state */background-position: 21% 50%; _background:transparent url(sm/360-button-vis-play.gif) no-repeat 21% 50%;}
.ui360-vis .sm2-360btn-default {/* real button, post-loaded state */_background:transparent url(sm/360-button-vis-play.gif) no-repeat 50% 50%;}
.ui360-vis .sm2-360ui.sm2_dragging .sm2-360btn {visibility: hidden;}

#sm2-container.swf_timedout {border:1px solid #ff3333; -moz-animation-duration: 1s; -moz-animation-name: flashblock; -moz-animation-iteration-count: 5; -webkit-animation-duration: 1s; -webkit-animation-name: flashblock; -webkit-animation-iteration-count: 5; width: 48px; height: 48px;}
#sm2-container.swf_unblocked {}
#sm2-container.swf_unblocked, #sm2-container.swf_loaded {top: auto; left: 0px; bottom: 0px; margin: 0px; width: 6px; height: 6px;}