/*{{{ playlist.css */


/*{{{ general playlist settings, light gray */
div.playlist {

	position:relative;
	overflow:hidden;	 	
	height:285px !important;
}

div.playlist div.clips {	
	position:absolute;
	height:20000em;
}

div.playlist, div.clips {
	width:260px;	
}

div.clips a {
	display:block;
	background-color:#fefeff;
	padding:12px 15px;
	height:46px;
	width:196px;
	font-size:12px;
	border:1px outset #ccc;		
	text-decoration:none;
	letter-spacing:-1px;
	color:#000;
}

div.clips a.first {
	border-top-width:1px;
}

div.clips a.playing, div.clips a.paused, div.clips a.progress {
	background:url(/img/playlist/light.png) no-repeat 0px -69px;
	padding-right:60px;
	border:0;
}
	
div.clips a.progress {
	opacity:0.6;		
}

div.clips a.paused {
	background-position:0 0;	
}

div.clips a span {
	display:block;		
	font-size:11px;
	color:#666;
}

div.clips a em {
	font-style:normal;
	color:#f00;
}	

div.clips a:hover {
	background-color:#f9f9fa;		
}

div.clips a.playing:hover, div.clips a.paused:hover, div.clips a.progress:hover {
	background-color:transparent !important;		 
}
/*}}}*/


/*{{{ petrol colored */

div.clips.petrol a {
	background-color:#193947;
	color:#fff;
	border:1px outset #193947;
}

div.clips.petrol a.playing, div.clips.petrol a.paused, div.clips.petrol a.progress {
	background:url(/img/playlist/dark.png) no-repeat 0px -69px;
	border:0;
}

div.clips.petrol a.paused {
	background-position:0 0;	
}

div.clips.petrol a span {
	color:#aaa;
}

div.clips.petrol a em {
	color:#FCA29A;
	font-weight:bold;
}	

div.clips.petrol a:hover {
	background-color:#274D58;		
} 

div.clips.petrol a.playing:hover, div.clips.petrol a.paused:hover, div.clips.petrol a.progress:hover {
	background-color:transparent !important;		 
}
/*}}}*/


/*{{{ low version */

div.clips.low a {	
	height:31px;
}

div.clips.low a.playing, div.clips.low a.paused, div.clips.low a.progress {
	background-image:url(/img/playlist/light_small.png);
	background-position:0 -55px;
}

div.clips.low a.paused {
	background-position:0 0;	
}


/*}}}*/


/*{{{ go buttons */

a.go {
	display:block;
	width:18px;
	height:18px;
	background:url(/img/playlist/arrow/up.png) no-repeat;
	margin:5px 0 5px 105px;
	cursor:pointer;
}

a.go:hover, a.go.down:hover {
	background-position:0px -18px;		
}

a.go.down {
	background-image:url(/img/playlist/arrow/down.png);	
}

div.petrol a.go {
	background-image:url(/img/playlist/arrow/up_dark.png);		
}

div.petrol a.go.down {
	background-image:url(/img/playlist/arrow/down_dark.png);		
}

a.go.disabled {
	visibility:hidden;		
}

/*}}}*/


/*}}}*/


/*{{{ tabs.css */

ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:29px;
	border-bottom:1px solid #666;	
}

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

ul.tabs a { 
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 111px;
	text-align:center;
	background: url(/img/global/tabs.png) no-repeat -652px 0;
	text-decoration:none;
	color:#000;
	padding:0px;
	margin:0px;	
}

ul.tabs a:hover {
	background-position: -652px -31px;	
	color:#fff;	
}

ul.tabs a:hover samp {
	color:#fff;	
}

ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -652px -62px;		
	cursor:default !important; 
	color:#000 !important;
}


/* width 1 */
ul.tabs a.w1 			{ background-position: -519px -0px; width:134px; }
ul.tabs a.w1:hover 	{ background-position: -519px -31px; }
ul.tabs a.w1.current { background-position: -519px -62px; }

/* width 2 */
ul.tabs a.w2 			{ background-position: -366px -0px; width:154px; }
ul.tabs a.w2:hover 	{ background-position: -366px -31px; }
ul.tabs a.w2.current { background-position: -366px -62px; }


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

/* width 4 */
ul.tabs a.w4 			{ background-position: -0px -0px; width:194px; }
ul.tabs a.w4:hover 	{ background-position: -0px -31px; }
ul.tabs a.w4.current { background-position: -0px -62px; }


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


@media print{

	#globalnav, #right, #user, .noprint {
		display:none;		
	}
	
	#wrap, #content {
		width:100%;		
		margin:0;
	}
}


div.petrol code span.js__com {
	color:lightgreen;		
}

div.petrol code span.js__string {
	color:#bbc7cf;		
}

div.petrol code span.js__keyword {
	color:#d8c;	
}

div.petrol code span.js__flow { 
	color:#95d0df;
}



/* 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;	
}

/* info, alert */

/*{{{ buttons */

button {
	outline:1px outset #999;	
	border:2px solid #fff;	
	background:#222 url(/img/global/gradient.png) 0 -20px repeat-x;
	color:#fff;
	height:30px;
	-moz-border-radius:5px;
	-moz-outline-radius:5px;
	cursor:pointer;
	font-size:12px;
}

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

/* button.custom */
button.custom {
	background:transparent url(/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(/img/form/btn/large.png);
	width:119px;
}

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

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

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

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

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



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

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

#searchButton {
	background:url(/img/form/btn/login_search.png) no-repeat -100px 0;
}

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


/* span.play */
span.play {
	background:url(/img/player/btn/play.png) no-repeat;
	display:block;
	width:40px;
	height:41px;
	cursor:pointer;
}

span.play:hover {
	background-position:0 -41px;
}

span.play:focus {
	background-position:0 -82px;
}

span.play.large {
	background-image:url(/img/player/btn/play_full.png);
	width:125px;
}

span.play.showme {
	background-image:url(/img/player/btn/showme_full.png);
	width:125px;
}

span.play.again {
	background-image:url(/img/player/btn/watch_again_full.png);
	width:149px;
}


/*}}}*/


/*{{{ tables */

table.listing {
	width:100%;
	background-color:#fff;
}

table.listing td {
	border-bottom:1px solid #ddd;
	padding:5px;	
}


table.listing a:hover {
	color:#000;
}

table.listing a:hover span {
	color:#333;
}

th { 
	background:url(/img/global/gradient/h30.png) 0 0px repeat-x;
	background-color:#c2d0da;
	text-align:left;
	padding:5px; 
	border-bottom:5px solid #fff;
	font-weight:normal;
	font-size:14px;
}

table.listing td img {
	cursor:pointer;		
}

th.sort {
	cursor:pointer;
	background-color:#A2D0DA;
	border-left:1px solid #FFFFFF !important;
}

th.sort.asc, th.sort.desc {
	background-color:#ffD0DA;
}

/* api listings */
th.col1 {
	width:120px;		
}

td.code {
	color:blue;		
	width:120px;	
}

div.type {
	color:#789;
	font-family:"courier new",courier;
}

td.default {
	color:#345;
	width:80px;	
}

td.type {
	color:navy;		
}

td.code em {
	color:#666;
	font-style:normal;
}

td.description {
	color:#333;
	font-size:12px;
}

td.code i {
	font-style:normal;
	color:#666;
}

.pre {
	white-space:pre;	
}

.code strong {
	color:navy;		
}


/*}}}*/


/*{{{ player */

a.player {	
	margin-top:40px;
	display:block;
	background:url(/img/player/splash.png) no-repeat;
	width:425px;
	height:298px;
	padding:0 126px 75px 127px;	
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	/* 
		width:672px;
		height:367px; 
	*/
}

a.player.plain {
	background-position:-125px 0;
	padding:0px;
	margin-top:0px;
}

a.player.small {
	background:url(/img/player/splash_small.png) no-repeat;
	height:186px;
	padding:0pt 24px 45px;
	width:251px;
	float:left;
	margin-right:30px;
	
	/* 
		width:375px;
		height:232px; 
	*/
}

a.player.small.plain {
	background-position:-24px 0;
	padding:0px;		
}

a.player.black {
	background-image:url(/img/player/splash.png);
}

/* play button */
a.player img {
	margin-top:115px;	
}

a.player.plain img {
	margin-top:113px;	
}

a.player.small img {
	margin-top:60px;		
}

a.player p {
	margin-bottom:-15px;
	padding-top:0px;
}

/*}}}*/


/*{{{ info, overlay, grippie */

/* overlay */ 
div.overlay, #overlay {
	padding: 25px 40px 40px 40px;	
	width:500px;  
	display:none;
	background-image:url(player-bkg.png);	
}

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

#overlay_player { 		
	display:block;
	height:350px;
}

div.grippie {
	background:#EEEEEE url(/img/forum/grippie.png) no-repeat scroll center 2px;
	border-color:#DDDDDD;
	border-style:solid;
	border-width:0pt 1px 1px;
	cursor:s-resize;
	height:9px;
	overflow:hidden;
}

#right li a span {
	display:block;
	margin-top:2px;
	color:#333;
	font-size:11px;
}

#right li a.selected span {
	display:block;
	margin-top:2px;
	color:yellow;
}

/*}}}*/


/*{{{ home */

#index #content {
	background:none;
	width:768px;
	margin:0px;
	padding:0px;
}

#index #right {
	width:210px;
	float:right;
	margin:-1px  0;	
}

h1#logo {
	background:transparent url(/img/home/logo.png) no-repeat;
	width:480px;
	height:126px;
	margin:30px 0pt 46px 25px;	
	float:left;
	text-align:right;
}

h1#logo em {
	display:none;		
}

h1#logo span {
	position:relative;
	top:32px;		
	font-size:22px;
}


a#download {
	display:block;
	background:transparent url(/img/home/download.png) no-repeat;
	width:159px;
	height:44px;
	overflow: hidden; 
	text-indent: -999em; 
}

a#download:hover {
	background-position:0 -44px ;		
}

a#download:focus {
	background-position:0 -88px ;		
}

a#download.small {
	height:35px;	
}

a#download.small:hover {
	background-position:0 -34px ;		
}

a#download.small:focus {
	background-position:0 -68px ;		
}

#tab_panes {
	background:url(/img/home/bottom.png) no-repeat;
	position:relative;
	top:-1px;
	height:450px;	 
	overflow:hidden;
}

#items {
	position:absolute;
	width:9999em;
}

#items div.item {
	padding:10px 30px;
	width:700px; 
	float:left;
	color:white;
	display:none;
}

#items div.item h2 {
	margin-top:20px;
	color:white;
}

#items a.player {
	background:url(/img/home/splash.jpg) no-repeat;
	padding:0 0 30px 0;
	height:300px;
	width:425px;
	float:left;
	margin:12px 0 0 0;
}

#items div.col {
	float:right;
	width:240px;
	margin:0px;
}

#items p.more {
	font-weight:bold;
	font-size:12px;
	margin-top:40px;
}

#items div.clips {
	float:left;
	margin-top:10px;
}

#items pre code {
	line-height:14px;	
}

/* tabs */
ul#tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0 !important; 
}

ul#tabs li { 
	float:left; 
	margin:0; 
	padding:0; 
	text-indent:0; 
	list-style-image:none;
}

#content ul#tabs li a { 
	display:block;
	height: 33px;  
	overflow: hidden; 
	text-indent: -999em; 
	width: 189px; 
	background: url(/img/home/tabs.png) no-repeat;
	padding:0px;
	margin:0px;
}

#content #tabs li #t1 { background-position: 0 0; }
#content #tabs li #t2 { background-position: -189px 0; }
#content #tabs li #t3 { background-position: -378px 0; }
#content #tabs li #t4 { background-position: -567px 0; width:192px;}

#content #tabs li #t1:hover { background-position:      0 -33px; }
#content #tabs li #t2:hover { background-position: -189px -33px; }
#content #tabs li #t3:hover { background-position: -378px -33px; }
#content #tabs li #t4:hover { background-position: -567px -33px; }

#content #tabs li.active a	  {cursor:default; }
#content #tabs li.active #t1 { background-position:      0 -66px; }
#content #tabs li.active #t2 { background-position: -189px -66px; }
#content #tabs li.active #t3 { background-position: -378px -66px; }
#content #tabs li.active #t4 { background-position: -567px -66px; }


/* right picks */
#right div.pick {
	background: url(/img/box/right/blank.png) no-repeat;
	width:214px;
	height:152px;
	margin:0px 0 12px 0 !important;
	cursor:pointer;
}

#right a {
	text-decoration:none !important;		
}

#right div.pick h4 {
	padding:15px 15px 0 85px;
	font-size:11px;
	color:#666;
	margin:0px;
}

#right div.pick h3 {
	padding:0px 15px 0 85px;
	font-size:13px;
	color:#000;
	margin:3px 0px;
}

#right div.pick p {
	padding:5px 15px 0 85px;
	font-size:12px;
	color:#666;
	margin:0px;
}

/* --- VISUALIZATIONS --- */


/* images */
#right div.pick.book 		{ background-image: url(/img/box/right/book.png); }
#right div.pick.release 	{ background-image: url(/img/box/right/release.png); }                        
#right div.pick.screens 	{ background-image: url(/img/box/right/screens.png); }
#right div.pick.flash 		{ background-image: url(/img/box/right/flash.png); }
#right div.pick.js 			{ background-image: url(/img/box/right/js.png); }
#right div.pick.streaming 	{ background-image: url(/img/box/right/streaming.png); }
#right div.pick.jstools 	{ background-image: url(/img/box/right/jstools.png); }


/* book & screens are left justified */
#right div.pick.book h3, #right div.pick.book h4, #right div.pick.book p,
#right div.pick.screens h3, #right div.pick.screens h4, #right div.pick.screens p
{
	padding-left:15px;
	padding-right:76px;
}

/* release */
#right div.pick.release h3, #right div.pick.release h4 {
	padding-left:15px;		
}
	
#right div.pick.release p {
	padding:15px 15px 0 90px;	
}

#right div.pick.screens h3 {
	padding-right:92px;	
}
	

/*}}}*/


/*{{{ blog  */

div.blogImage {
	background:url(/img/title/jstools.png) no-repeat;
	width:85px;
	height:85px;
	float:right;
	margin:5px 0 0 15px;
}

div.blogImage.book 		{ background-image: url(http://static.flowplayer.org/img/title/book.png); }
div.blogImage.release 	{ background-image: url(http://static.flowplayer.org/img/title/release.png); }                        
div.blogImage.screens 	{ background-image: url(http://static.flowplayer.org/img/title/screens.png); }
div.blogImage.flash 		{ background-image: url(http://static.flowplayer.org/img/title/flash.png); }
div.blogImage.js 			{ background-image: url(http://static.flowplayer.org/img/title/javascript.png); }
div.blogImage.streaming { background-image: url(http://static.flowplayer.org/img/title/streaming.png); }
div.blogImage.jstools 	{ background-image: url(http://static.flowplayer.org/img/title/tools.png); }


div.blogImage.release, div.blogImage.book, div.blogImage.screens {
	float:left;
	height:150px;
	margin:5px 0pt 0pt -12px;
	width:178px;		
}

div.blogImage.book {
	height:165px;	
}

div.blogImage.screens {
	margin:5px 0pt 0pt -10px;
	width:178px;	
}



/*}}}*/