/* symMedia 5 CSS 12-Mar-2010 */
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 */
.scrollable {
	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;}
a.right:hover{ background-position:-30px -30px; }
a.right:active{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
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;
}

/* 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;
}
.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; 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; 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; 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; 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; 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; 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; 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; background: #505050; color: #f8f8f8; }
.darkTip .bottom				{ height: 14px; background: url(notch-dark.png) top center no-repeat; }