/* container has a background image  */

a.player {

	display:block;
/*	background:url(/images/splash.png) no-repeat; */
	background-position: left 0px;	
	background-repeat: no-repeat;
	width:500px;
	height:320px;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	text-align: center;
	padding-left: 100px;	
	margin-left: -100px;

}



/* splash image */
a.player img {
	margin-top:80px;
	border:0;	
}

/* info, alert */
#content div.box.info, #content div.box.alert {
	background-image:url(http://www.flowplayer.org/img/global/info.png);
	background-position:6px center;	
	background-repeat:no-repeat;
	padding:15px 50px;
	font-size:14px;
	color:#555;
}

#content div.box.info a {
	font-size:14px;	
}


#content div.box.info.petrol {
	color:#fff;		
}

#content div.box.alert {
	background-image:url(http://www.flowplayer.org/img/global/alert.png);
}

/*}}}*/




#content div.box.code {
	background:#f9f9fa url(http://www.flowplayer.org/img/box/code_lines.png) 0px -3px repeat-y;
	padding:0px 14px 0px 35px;	
}

#content div.box.code h2 {
	margin-left:-40px;
	margin-top:0px;
}


#content table.listing div.box.code {
	padding-left:0px;
	background-image:none;	
	outline:0;
}
/*}}}*/


/*{{{ #content box, listing, div.tip  */

#content div.box, table.listing, div.tip {
	background-color:#f0f1f2;
	
	padding:10px;
	
	
}

#content div.box h2 {
	margin:0px;
	background-color:#c2d0da;
	font-weight:normal;
	font-size:15px;
	line-height:30px;
	padding:0 10px;
	margin:-10px -10px 10px -10px;
}

div.tip {
	background:url(http://www.flowplayer.org/img/global/gradient/h150.png) repeat-x;
}


/* skins */
#content div.box.dark 									{ background-color:#99a6af; }
#content div.box.dark h2 								{ background-color:#586e7b; }
#content div.box.light 									{ background-color:#f9f9fa; }
#content div.box.light h2 								{ background-color:#d7dde1; }
#content div.box.petrol 								{ background-color:#295c72; }
#content div.box.petrol h2 							{ background-color:#254558; }
#content div.box.petrol.dark, div.tip 				{ background-color:#254558; }
#content div.box.petrol.dark h2, div.tip h2 		{ background-color:#295c72; }
#content div.box.ruby 									{ background-color:#e5e7e9; }
#content div.box.ruby h2 								{ background-color:#b8128f; }
#content div.box.ruby.dark 							{ background-color:#b8128f; }
#content div.box.ruby.dark h2 						{ background-color:#552452; }
#content div.box.black 									{ background-color:#000000; }
#content div.box.black h2 								{ background-color:#3C4752; }

/* box font colors */
div.box.dark, div.box.petrol, div.box.black, div.tip,
div.box.dark h2, div.box.petrol h2, div.box.ruby h2, div.box.black h2,
div.box.dark h3, div.tip h2 {
	margin-top:0px;
	color:#fff;	
}

div.box.dark a, div.box.petrol a, div.box.black a { 
	color:yellow;	
}

div.box.petrol samp {
	color:#95D0DF;		
}

/* mouseover tip */
div.tip {
	width:280px;		
	display:none;
	position:absolute;
	z-index:2;
}

div.tip h3 {
	color:#dee7ec;	
}





/*{{{ buttons */

button {
	outline:1px outset #999;	
	border:1px solid #fff;	
	background-color:#222;
	color:#fff;
	height:24px;
	-moz-border-radius:4px;
	-moz-outline-radius:4px;
	cursor:pointer;
	font-size:11px;
}

button em {
	color:yellow;
	font-style:normal;
}

/* button.custom */
button.custom {
	background:transparent url(http://www.flowplayer.org/img/form/btn/normal.png) 0 0 no-repeat;	
	height:34px;	
	width:99px;	
	border:0;
	outline:0;
}

button.custom span {
	position:relative;
	top:-1px;		
}

button.custom.large {
	background-image:url(http://www.flowplayer.org/img/form/btn/large.png);
	width:119px;
}

button.custom.low {
	background-image:url(http://www.flowplayer.org/img/form/btn/low_small.png);
	width:75px;		
	height:26px;
	font-size:11px;
}

button.custom.low.large {
	background-image:url(http://www.flowplayer.org/img/form/btn/low_large.png);
	width:115px;
}

button.custom.low.medium {
	background-image:url(http://www.flowplayer.org/img/form/btn/low.png);
	width:94px;
}

button.custom.low.xlarge {
	background-image:url(http://www.flowplayer.org/img/form/btn/low_xlarge.png);
	width:155px;
}

button.delete {
	background-image:url(http://www.flowplayer.org/img/form/btn/delete.png);
	width:94px;		
	height:26px;
}



button.custom.low span {
	top:-2px;		
}

/* custom buttons */
#loginButton {
	background:url(http://www.flowplayer.org/img/form/btn/login_search.png) no-repeat 0 0;
}

#paypalButton {
	background-image:url(http://www.flowplayer.org/img/commerce/paypal.png);	
	width:105px;
}





/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #666;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(http://www.flowplayer.org/tools/img/tabs/blue.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* overlay dimensions */


div.overlay {
	padding:40px;
	display:none;
	width:480px;
	height:375px;
}

/* generic styling for elements inside overlay */
div.overlay h2, div.overlay a, div.overlay p, div.overlay div {
	font-family:"bitstream vera sans",verdana;
	margin-top:10px;
	color:#fff;
	font-weight:normal;
}

/* initially all panes are hidden */ 

div.panes div.pane {
	display:none;		
}

#panes2 {
	display:none;
}

div.overlay div.close {
	background:url(/images/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px;
	width:35px;
	height:35px;
	cursor:pointer;
}

/* tabs */
#shareTabs {
	list-style:none;
	margin:0 !important;
	padding:0;
	position:absolute;
	top:93px;
	left:14px;
}

#shareTabs li {
	float:left;
	margin:0 !important;
	padding:0;
	list-style-image:none !important;
}

#shareTabs li a {
	background:transparent url(/images/share_tabs.png) no-repeat scroll 0 0;
	display:block;
	height:35px;
	margin:0px;
	padding:0px;
	width:140px;
	text-align:center;
	line-height:35px;
	color:#fff;
	font-size:11px;
	text-decoration:none;
}

#shareTabs li a#emailTab { background-position: 0 -37px; }
#shareTabs li a#embedTab { background-position: -140px -37px; }

#shareTabs li a#emailTab:hover { background-position: 0 -74px; }
#shareTabs li a#embedTab:hover { background-position: -140px -74px; }

#shareTabs li a#emailTab.current { background-position: 0 0; cursor: default; }
#shareTabs li a#embedTab.current { background-position: -140px 0; cursor: default;  }


/* tab panes = containers for tab content */
#panes {
	margin-top:65px !important;
	font-size:12px;
}


#panes input, #panes textarea {
	width:450px;
	font-size:12px;
	font-family:verdana;
	border:1px inset #666;
	padding:2px;
}

#panes textarea {
	padding:4px;
	height:100px;
}

#panes button {
	border:1px outset #ccc;
	cursor:pointer;
	background-color:#f9f9fa;
}

#panes label.left {
	float:left;
	margin-right:15px;
}

#panes label.left input {
	width:180px;
}

#embedPane textarea {
	margin-top:10px;
	height:180px;
	background-color:transparent;
	overflow-x:hidden;
	color:#BBBBBB;
	padding:4px;
	border:1px solid #ddd;
}

/* container for error/success messages */
#info {
	display:none;
}


#index #emailPane, #index #embedPane {
	background:transparent url(http://www.flowplayer.org/img/global/gradient/h500.png) repeat-x;
}


/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.hulu {
	position:relative;
	height:40px;
	
	/* black background with a gradient */
	background:#000 url(/images/hulu.png) repeat-x 0 -4px;
	width:500px;
}

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	display:none;
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(/images/hulu.png) no-repeat 10px -61px;
	cursor:pointer;
	border-right:1px solid #000; 
}


div.hulu a.play {
display:none;
}

div.hulu a.pause {
display:none;
}

/* pause state */
div.hulu a.pause { 
	display:none;
	background-position:11px -148px;
}

div.hulu a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.hulu div.track {  
	left:47px;
	position:absolute;
	cursor:pointer;
	width:285px;
	border-left:1px solid #999;
	height:40px;	
	display:none;
}

/* the draggable playhead */
div.hulu div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:3px;
	height:40px;
	border-right:1px solid #444;
	display:none;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.hulu div.progress, div.hulu div.buffer {	
	position:absolute;
	background-color:#4ff;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:40px;
	display:none;
}

div.hulu div.buffer {
	display:none;
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.hulu div.time {
	display:none;
	position:absolute;		
	width:129px;
	left:330px;
	padding:12px 0;
	text-align:center;
	border:1px solid #999;
	border-width:0 1px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff; 
}

/* total duration in time display */
div.hulu div.time strong {
	display:none;

	font-weight:normal;
	color:#666;
}

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
	position:absolute;
	left:460px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/images/hulu.png) no-repeat 5px -323px;
}

div.hulu a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.hulu a.unmute {
	background-position:5px -235px;	
}

div.hulu a.unmute:hover {
	background-position:5px -279px;	
}