body,input,textarea { font-family:Helvetica,Arial,Verdana,sans-serif; color:#000; font-size:100%;
	

}
body{
	margin:0;
	font-size: 11px;
	color: #252525;
	/*background: url('../images/background-soometa.jpg') repeat;*/
	background-image: url('../images/widget-background.jpg');
}

body.unrendered {
	visibility: hidden;
}

a{
	color: #252525;
}
a:hover{
	color: #f14357;
}

i{
	display: block;clear: both;
}


#logo{
	width:90px;height:40px;position:absolute;top:0;left:50%;
	background: url('../images/widgetpage-elements.png') no-repeat -212px -6px;
	margin-left:-300px;
	display:block;
}

#widget.fs{	margin: 0px 0 0 0px;top: 0px;left: 0px;width: 100%;height: 100%;background-color: white;
}

#widget{
	/*-moz-box-shadow: 0 0 40px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 40px rgba(0,0,0,0.1);
	box-shadow: 0 0 40px rgba(0,0,0,0.1);*/
}

#widget-shadow{
	position:absolute;
	bottom:-25px;
	background-image: url('../images/widget-shadow.png');
	width:762px;
	height:51px;
	left:-78px;
}
#widget.fs #widget-shadow,#widget.widget-full #widget-shadow{display:none}

.widget-emb{
	position: absolute;
	width: 600px;
	height: 424px;
	left: 50%;top: 50%;
	margin: -242px 0 0 -300px;
}
.widget-full{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;top: 0;
	margin: 0px 0 0 0px;
}


#meta {
	
	z-index:10;width: 100%;height: 30%;position: absolute;bottom: 0;
}
body.playermode #meta{height: auto;}

#meta h1{
	pointer-events: auto;
	display: none;
	margin: 0;
	position: absolute;
	bottom:18px;
	left:8px;
	font-size: 24px;
	height: 29px;
	overflow: hidden;
	right: 50px;
}
#meta h2{
	pointer-events: auto;
	margin: 0;
	position: absolute;
	bottom:5px;
	left:8px;
	font-weight: normal;
	font-size: 11px;
	
}

var{display: none;
}


#meta .gradient {
	pointer-events: none;
	display: none;
	background: url('../images/widget-image-gradient.png') repeat;
	position: absolute;bottom: 0;
	width: 100%;height:130px;
	
}
#meta a{pointer-events: auto;text-decoration: none;
color: #252525;
}
#meta a:hover{color: #00f2b9;
}
#meta h2 span.duration{
	margin-left: 6px;
	color:#00f2b9;
	font-weight: bold;
}
#meta h2 span.subscribe{
	cursor: pointer;
	margin-left: 24px;
	position: relative;
}
#meta h2 span.subscribe:hover{color:#00F2B9}
#meta h2 span.subscribe b{
	background: url('../images/widget-elements.png') no-repeat -198px -127px;
	width:10px;height:10px;display: inline;
	position: absolute;
	left:-14px;
	top:1px;
}
#meta h2 span.subscribe:hover b{left:-16px}
#meta #promo{
	display: none;
	position: absolute;
	right: 58px;
	bottom: 5px;
}


#excerpt {
	
	width: 100%
}
body.excerptmode #loading_wrapper, body.excerptmode #meta h2 span.subscribe{display:none}

#cover {
	position: relative;
	width: 100%;height:100%;
	overflow: hidden;

}

#cover .source{position: absolute;top: 8px;left: 8px;
}

#cover-image img{ /* sample!! */
	position: relative;
	width: 100%;
	height: 100%;
	margin-left: 0%;
	margin-top: 0%;
}

#control {
	z-index: 12;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
}
body.playermode #control{z-index:9}
body.excerptmode #control {width:49px;right:0;left:auto}
#play{
	cursor: pointer;
	background-image: url('../images/widget-elements.png');
	background-position:-10px -10px;
	width: 49px;height: 49px;
	position: absolute;
	right: 0;
	bottom: 0;
}
#play:hover{
	background-position: -59px -10px;
}

#play.playing{
	background-position: -10px -59px;
}
#play.playing:hover{
	background-position: -59px -59px;
}

body.playermode #play{
	background-position: -108px -10px;
}
body.playermode #play:hover{
	background-position: -157px -10px;
}

body.playermode #play.playing{
	background-position: -108px -59px;
}
body.playermode #play.playing:hover{
	background-position: -157px -59px;
}

#slider {
	
	height: 15px;
	position: absolute;
	left: 8px;right: 49px;
	bottom: 24px;
}
#slider-before,#slider-after,#slider-before,#slider-pickup {
	position: absolute;
	top: 0;bottom: 0;
	background-image: url('../images/widget-elements.png');
}
#slider-before {background-position: right -165px;
	left: 0;width: 0px;
}
#slider-pickup {background-position: -60px -120px;
	left: 0;
	width: 37px;
	cursor: move;
	position:absolute;
}
#slider-pickup:hover {background-position: -60px -140px;
}
#slider-after {margin-top: 7px;height: 1px;background-color: rgba(128,128,128,0.3);
	left: 37px;right: 0;
}
/*#slider:hover #slider-after {background-color:rgba(228,89,91,0.5)}*/

#events {
	position:absolute;top:0;left:0;right:0;bottom:0;
	overflow:hidden;
	margin:0 19px;
}
#events span {
	position:absolute;width:5px;height:9px;margin-top:5px;
	background: url('../images/widget-elements.png') no-repeat -174px -129px;
}
#events span:hover {
	
	background-position: -174px -119px;
}

#volume, #volume span{
	position: absolute;
	width: 15px;
	height: 12px;
	background: url('../images/widget-elements.png') no-repeat -120px -125px;
}
#volume span{background-position: -135px -125px;width: 12px;
}
#volume span.set{background-position: -150px -125px;
}
#volume {bottom: 5px; right:92px;
}

span#fullscreen{
	position: absolute;
	width: 17px;
	height: 15px;
	bottom: 5px;
	right: 118px;
	background: url('../images/widget-elements.png') no-repeat -151px -140px;
}

a#info{
	position: absolute;
	width: 15px;
	height: 15px;
	bottom: 7px;
	right: 153px;
	background: url('../images/widget-elements.png') no-repeat -150px -140px;
}

#share {

	position: absolute;
	bottom: 5px;
	right: 50px;
	height: 15px;
	vertical-align: bottom;
	line-height: 17px;
	width: 70px;
	color: transparent; /* hide 'share' on past widgets  */
}
#share>a {
	background: url('../images/widget-elements.png') no-repeat -120px -125px;
	width: 15px;height: 15px;
	float: right;
}
#share>a#facebook {
	background-position: -135px -140px;
}
#share>a#twitter {
	background-position: -120px -140px;
}

#excerpt {
	overflow: hidden;
	width: 100%;height: 100%;	
}
#story{
	
	z-index:0;
	position: relative;
	margin-right: 50px;
	left: 0;
	margin-bottom: 170px;
}
#story h1{
	font-size: 40px;margin: 30px 8px;
}

#story q{}

#story .clip{
	margin: 0 0 14px 0;
}
#story .clip.type_text q{
font-size: 17px;
font-style: italic;
font-weight: 100;
margin: 0 0 4px 0;
display: block;
line-height: 21px;
}



#story a{text-decoration: none;
color: #252525;
}
#story a:hover{color: #00f2b9;
}

#story ol,#story ul,#story li{
	margin: 0;padding: 0;
	list-style-type: none;
}

#story ol{
	position: relative;
	margin: 10px 10px 40px 10px;
}

#story li{
	list-style-type: none;
}
#story>ol>li{
	margin: 0 0 0 17%;
}

#story>ol>li img,#story>ul>li img{ /* sample!! */
	position: relative;
	width: 60%;
}

#story label,#story label a{font-size: 10px;margin: 4px 0;
	color: rgba(0,0,0,0.4);
	font-style: normal;
	font-weight: normal;
	letter-spacing:0;

}
#story .layoutn label{
	display: block;
	margin-bottom: 15px;
}

#story img.avatar{
	width: 14px;height:14px;vertical-align: bottom;
	margin: 0 2px 0 4px;
}

#story>ol>span {
	display: block;
	position: absolute;
	left: 0;top: 0;bottom: 0;
	background-size:100%;
	width: 10%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	/*border: 3px solid #252525;*/
}
#story>ol>span.nothumb {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
	background-color: rgba(196,190,174,0.2);
}
#story .scene-meta {

border-top: 1px dashed rgba(0,0,0,0.4);
	margin-left: 14%;
	line-height: 20px;
	font-size: 10px;
	color:rgba(0,0,0,0.4)
}
#story .scene-meta h2{margin: 4px 0;font-size: 10px;font-weight: normal;line-height: normal;
}

#social {
	margin: 8px 8px 8px 14%;
}
#social-on-widgetpage>div, #social-on-widgetpage>iframe, #social>div, #social>iframe{vertical-align:bottom!important}
#social-on-widgetpage{position:absolute;bottom:-40px;left:8px;}
#widget.widget-full #social-on-widgetpage{display:none;}

#watchstory {
	position: absolute;bottom: -80px;right: 10px;
	
	width: 190px;height: 65px;
	background: url('../images/widget-elements.png') no-repeat -10px -210px;
}

#scroll{
z-index: 11;
	width:1px;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	top:10px;
	bottom: 59px;
	right:25px;
	display: none;
}

#scroll #track {
	
	width:15px;height:37px;
	background-color: #00f2b9;
	margin-left:-7px;
	background: url('../images/widget-elements.png') no-repeat -10px -121px;
}
#scroll #track:hover {
	background-position:  -30px -121px;
}

.scrollbar{

	width:7px;background-color:rgba(0,0,0,0.5);position:fixed;margin-top:8px;height:300px;
	padding:1px 0;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	-moz-box-shadow: 1px 1px 0px rgba(153,152,137,0.3);
	-webkit-box-shadow: 1px 1px 0px rgba(153,152,137,0.3);
	box-shadow: 1px 1px 0px rgba(153,152,137,0.3);
}
.scrollbar .track{
	position: absolute;
	background-color:rgba(232,230,210,0.5);width:5px;height:60px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	left:1px;
}




/*

		S T A G E

*/

#stage{position:absolute;overflow:hidden;top:0;width:100%;bottom:49px;
/*
	-moz-box-shadow: 0 0 8px rgba(0,0,0,1);
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,1);
	box-shadow: 0 0 8px rgba(0,0,0,1);
*/
}

#stage_wrapper{width:0;position:absolute;z-index:1;
	width:100%;
	height: 100%;
}

#stage .scene{float:left; width:120px; height:75px;margin:150px 20px 0 0;

/*background-color:rgba(0,0,0,0.1);*/
position:relative;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}

#stage .scene.edit{width:100%;height:100%;margin:0}

#stage .scene .layoutn{background-color: transparent;height: 100%;
}

#stage .scene >div>div{overflow:hidden;position:absolute;color:black;}

#stage .scene.edit .video>img{position:absolute;
	width:120%;height:120%;
	margin-left:-10%;
	margin-top:-10%;
}

#stage .scene .source a{
position:absolute;
bottom:2px;
text-decoration: none;
	line-height: 4px;
	color:rgba(255,255,255,0.6);
	padding: 0 4px;
}


#stage .scene .source{font-size:3px;position:absolute;bottom:0;left:0;right:0;
text-align: left;
height: 40px;
display: block;
background-image: url('../images/gradient-bottom.png');
}

#stage .scene.edit .source a{font-size:9px;line-height: 12px;}
#stage .scene.edit .source a:hover {color:white}

#stage .scene.edit .source img{float:right;margin-left:4px;width:10px;height:10px}

#stage .scene .text .source {background: transparent;}
#stage .scene .text .source a {color:black;right:0}
#stage .scene .text .source a:hover {color:#f14357}

#stage .scene.edit .video>img{position:absolute;
	width:120%;height:120%;
	margin-left:-10%;
	margin-top:-10%;
}
#stage .scene .video>img{position:absolute;
	width:120%;height:120%;
	margin-left:-10%;
	margin-top:-10%;
}



#loading_wrapper{position:absolute;top:50%;left:50%;overflow:hidden}
#loading_wrapper.hide{display:none}
#loading{position:absolute;top:0;left:0;background-color: red;width:100%;height:100%;background: url('../images/widget_loading.png');background-size: 100%;}

#sp_loading_wrapper{position:absolute;top:50%;left:50%;overflow:hidden}
#sp_loading{position:absolute;top:0;left:0;background-color: red;width:100%;height:100%;background: url('../images/widget_loading.png');background-size: 100%;}


/* MORE & SOURCES */

#panel-more {
	position:absolute;
	right:0;
	top:50%;bottom:0;left:auto;
	width:70px;
	background: url('../images/widgetpage-shadow-1.png') no-repeat right center;
	height: 626px;
	margin-top: -342px;
	
}
#panel-more .mask {
	position:absolute;
	right:4px;
	top:0;bottom:0;left:0;
	overflow:hidden;
}
#panel-more.hover {
	width:auto;
	left:50%;
	margin-left:340px;
	
	/*
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-ms-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	-webkit-transition-delay: 2s;
	-moz-transition-delay: 2s;
	-o-transition-delay: 2s;
	-ms-transition-delay: 2s;
	*/
	
}
#panel-more .wrapper {
	background-color:#eae8d9;
	width:240px;
	position:absolute;
	left:0;
	top:50%;bottom:0;
	margin-top:-214px;
	height:424px;
	
	
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;

	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	
	background-image: url('http://content.soometa.com/images/widgetpage-shadow-2.png'); 
	background-repeat:repeat-y; 
	background-position:30px center;
}
#panel-more.hover .wrapper{width:100%;background-position:right center;
}

#panel-more .wrapper>div {clear:both}

#panel-more #morestories h1{margin:18px 12px;background-position:-5px -6px;width:146px;height:14px}

#panel-more #morestories h1.featured{background-position:-5px -57px;}

#panel-more #morestories li,#panel-more #morestories ul{list-style-type:none;margin:0;padding:0}

#panel-more #morestories li:hover {cursor:pointer;background-color:rgba(255,255,255,0.5)}

#panel-more .cover-container {float:left;width:40px;height:34px;position:relative;overflow:hidden;margin:4px 4px 4px 12px;}

#panel-more .cover-container img{position:absolute;}

#panel-more #morestories p {height:28px;padding-top:14px;margin:0}

#panel-more .gotostory {float:left;cursor:pointer;position:absolute;top:0;width:40px;height:34px;
	background-position: -75px -275px;
}
#panel-more .gotostory:hover {
	background-position: -115px -275px;
}

#panel-more #social {position:absolute;margin:0 12px;bottom:4px;}

#panel-more #subscribe {}
#panel-more #follow {margin-bottom:10px;}

#panel-more #subscribe h1,#panel-more #followers h1 {font-size:11px;font-weight:bold;margin:3px 0;padding:0;}

#panel-more #subscribe h1.unfollow {display:none}
#panel-more #subscribe.already_following h1.unfollow {font-weight:normal;display:block}
#panel-more #subscribe.already_following h1.follow {display:none}

#panel-more #followers {width:100%;overflow:hidden;max-height:64px;margin-bottom:10px}
#panel-more #followers img{width:32px;height:32px;margin:0 0 0 1px;padding:0;float:left}
#panel-more #followers img:hover{opacity:0.8}

#panel-more input {
	font-size:11px;
	font-weight:normal;
	padding:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#sources {
	position: absolute;
	width: 100%;
	top: 100%;
	margin-top: -60px;
	color:#6f6f6f;
	font-weight:100;
	background: url('../images/background-dock.jpg') repeat;
	-moz-box-shadow: 0 0 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3);
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	min-height: 60px;
}
#sources h1 {
	position:absolute;
	top: 7px;
	left: 50%;
	margin: 0 0 0 -292px;
	padding:0;
	width: 60px;
	height: 17px;
	background-position:-5px -24px;
}
/*#sources span {
	position:absolute;
	top: 6px;
	left:130px;
	right:80px;
	height:1px;
	display:block;
	border-bottom:1px solid #ebebeb;
}*/
#sources p {
	text-align: center;
	width:600px;
	margin: 20px auto 10px auto;
	padding: 0;
	font-size: 11px;
	line-height: 20px;
}
#sources a {
	margin-left:6px;
	text-decoration:none;
	color:#6f6f6f
}
#sources a:hover {color:#e4595b}

/* background */
#panel-more .gotostory,#panel-more #morestories h1,#sources h1  {
	background-image: url('../images/widgetpage-elements.png');
}


/* MODES */

body.excerptmode #excerpt, 
body.playermode #stage, 
body.playermode #slider, 
body.playermode #volume, 
body.excerptmode #meta h1,
body.excerptmode #meta .gradient,
body.playermode.slider #slider, 
body.playermode #meta h1,
body.excerptmode #meta #promo,
body.playermode #share,body.playermode #info, body.playermode #fullscreen,
body.excerptmode #scroll
{
	display: block;
}

body.playermode #excerpt, 
body.excerptmode #stage, 
body.excerptmode #slider, 
body.excerptmode #volume, 
body.playermode #meta h1,body.playermode #meta .gradient,
body.playermode.slider #meta h1,
body.playermode #slider,
body.playermode #scroll,
body.playermode #meta #promo,
body.excerptmode #share,body.excerptmode #info, body.excerptmode #fullscreen,
body.playermode #scroll

{

	display: none;

}

/* button playing example */


/*

		I N T R O

*/
#intro 
{
	display: none;
	width: 100%;
	position:absolute;
	overflow:hidden;
	top:0;
	bottom:48px;
	background: white;
	z-index:100;
}

#intro p{
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	width:49px;
	height:18px;
	color: transparent;
	background: url('../images/widget-elements.png') no-repeat -206px -10px;
}

#intro_frame 
{
	width: 100%;
	height: 100%;
}