/* this makes it possible to add next button beside scrollable */
/* symMedia 5 CSS 14-Oct-2010 */
.symMediaFooter{width:98%;margin-top:10px;float:left;}
div#symmedia5plugin{width:98%;margin:0!important;padding:0 !important;clear:both;}
div#symmedia5player{position:relative;min-height:380px;border:1px solid grey;min-width:660px;margin-bottom:50px;margin-right:auto;margin-left:auto;background-color:black;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
div#symaudioposter{position:absolute;top:10px;left:10px;min-width:640px;min-height:360px;}
.symclearer{clear:both;}
#symtip{display:none;background:transparent url(black_arrow.png);font-size:12px;height:70px;width:160px;padding:25px;color:#fff;}
video{margin:10px;}
audio{position:absolute;bottom:0;left:0;width:100%;}
/* !!! Buttons CSS code Start */
/* this makes it possible to add next button beside scrollable */
div.scrollable {float:left;}
div.scrollable div.items { clear: both; width:20000em; position:absolute; overflow:hidden}
div.scrollable div.items div { float: left; width: 180px;}
div.scrollable div.items img { float: left; }
/* prev,next,prevPage and nextPage buttons */
a.browse{background:url(hori_large.png) no-repeat;display:block;width:30px;height:30px;float:left;margin:40px 10px;cursor:pointer;font-size:1px;}
/* right */
a.right{background-position:0 -30px;margin-right:0px;padding: 0;}
a.right:hover{background-position:-30px -30px;}
a.right:active{background-position:-60px -30px;}
/* left */
a.left{margin-left:0px;padding: 0;}
a.left:hover{background-position:-30px 0;}
a.left:active{background-position:-60px 0;}
/* disabled navigational button */
a.disabled{visibility:hidden !important;}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable{/* required settings */
position:relative;overflow:hidden;width:680px;height:120px;/* custom decorations */
border:1px solid #ccc;background:url(h300.png) repeat-x;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items{/* this cannot be too large */
width:20000em;position:absolute;clear:both;left:0;}
/* single scrollable item */
.scrollable img{float:left;margin:20px 5px 20px 21px;background-color:#fff;padding:2px;border:1px solid #ccc;cursor:pointer;width:100px;height:75px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.scrollable img.hover{border-color:#123;}
/* active item */
.scrollable .active{border:2px solid #000;z-index:9999;position:relative;}
/* Tiny Tips CSS */
.lightTip{}
.lightTip .content{width:160px;padding:10px;border:6px solid #e2e2e2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#ffffff;color:#020202;}
.lightTip .bottom{height:14px;background:url(notch-white.png) top center no-repeat;}
.yellowTip{}
.yellowTip .content{width:160px;padding:10px;border:6px solid #f9e98e;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#fbf7aa;color:#020202;}
.yellowTip .bottom{height:14px;background:url(notch-yellow.png) top center no-repeat;}
.orangeTip{}
.orangeTip .content{width:160px;padding:10px;border:6px solid #f9cd8e;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#fbe3aa;color:#020202;}
.orangeTip .bottom{height:14px;background:url(notch-orange.png) top center no-repeat;}
.redTip{}
.redTip .content{width:160px;padding:10px;border:6px solid #ce6f6f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#f79992;color:#020202;}
.redTip .bottom{height:14px;background:url(notch-red.png) top center no-repeat;}
.greenTip{}
.greenTip .content{width:160px;padding:10px;border:6px solid #a9db66;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#cae8a2;color:#020202;}
.greenTip .bottom{height:14px;background:url(notch-green.png) top center no-repeat;}
.blueTip{}
.blueTip .content{width:160px;padding:10px;border:6px solid #36a4d9;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#90d8f0;color:#020202;}
.blueTip .bottom{height:14px;background:url(notch-blue.png) top center no-repeat;}
.purpleTip{}
.purpleTip .content{width:160px;padding:10px;border:6px solid #8671de;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#a290f0;color:#020202;}
.purpleTip .bottom{height:14px;background:url(notch-purple.png) top center no-repeat;}
.darkTip{}
.darkTip .content{width:160px;padding:10px;border:6px solid #303030;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#505050;color:#f8f8f8;}
.darkTip .bottom{height:14px;background:url(notch-dark.png) top center no-repeat;}
#symPlayListIP video{width:225px;float:left;}
#mediaContent{width:98%;}
#mediaTitles article{display:block;float:left;margin-right:15px;width:250px;height:160px;}
#mediaTitles article header{-webkit-text-size-adjust:none;padding-right:10px;top:10px;display:block;font-size:12px !important;font-variant:small-caps;text-transform:uppercase;overflow:hidden;}
#mediaTitles article a{-webkit-text-size-adjust:none;margin-top:10px;margin-left:5px;padding-right:5px;padding-top:5px;}
#mediaTitles article img{margin-top:3px;font-size:10px;}