menus  {
float : left;
padding : 20px 0;
border-right : 1px solid #5b0013;
width : 16em;
} 

contents  {
padding : 20px 0 0 0;
background-color : #f2f2f2;
margin-left : 19em;
margin-right : 10px;
left:16em;
} 

/* look and feel for embed and email tabs */
#shareTabs { 
	list-style-type:none; 
	padding:0;	
	float:left;
	margin:13px 0 0 0 !important;
}

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

#shareTabs a {
	background:#444 url(img/sharing.png) repeat scroll 2px 3px;
	display:block;
	width: 38px;  
	height: 38px;
	padding:0px;
	margin:0px;	
	-moz-border-radius-topright:3px;
	-moz-border-radius-bottomright:3px;
}

#shareTabs a:hover {
	background-color:#000;
}

#shareTabs a:focus {
	background-color:#444;
}
	
#shareTabs a.current {
	background-color:#567078;
}

#shareTabs #embedTab {
	background-position: 2px -60px;
}

/* container for each pane: video, embed and email */
#panes {
	width:460px;
	float:left;	
	color:#fff;
	position:relative;
	z-index:1;	
	font-family:verdana;
	font-size:12px;
	margin-top:20px;
}

/* embed and email pane */
#emailPane, #embedPane {	
	padding:10px;
	display:none;
	min-height:265px;	
}

/* player container style */
#player {	
	display:block;	
	height:340px;	
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}

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

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


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

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

#panes h2 {
	margin-top:0px !important;		
}

#embedPane textarea {
	height:130px;
	overflow-x:hidden;
	padding:4px;
	color:#123;
}

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



/*{{{ 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 {
	background:url(img/h80.png);
	display:block;
	background-color:#fefeff;
	padding:12px 15px;
	height:46px;
	width:195px;
	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/light.png) no-repeat 0px -69px;
	width:225px;
	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/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/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/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/down.png);	
}

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

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

a.go.disabled {
	visibility:hidden;		
}

/*}}}*/



/* 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(img/hulu.png) repeat-x 0 -4px;
	width:500px;
}

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

div.hulu a.play:hover {
	background-position:10px -105px;	
}

/* pause state */
div.hulu a.pause { 
	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;	
}

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

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

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

/* time display */
div.hulu div.time {
	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 {
	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(img/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;	
}


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

/* 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(img/tabs.png) no-repeat -652px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 111px;
	text-align:center;	
	text-decoration:none;
	color:#000;
	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: -652px -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: -652px -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.w1 			{ background-position: -519px 0; 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; }


/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}


/*{{{  global switch, user account  */

#global {
	height: 34px;
	background: #000 url(img/main.png) repeat-x;
	margin-bottom:25px;
}

#global .wrap {  
	width: 100%;  
	margin:0px 0px;	
}


#global ul { 
	list-style: none; 
	margin: 0; 
	padding: 0;	
	float:left;
}

#global li { 
	float: left; 
	margin: 0; 
	padding: 0; 
	text-indent: 0; 
}

#fp, #jt { 
	float: left; 
	height: 34px; 
	width:275px;
	overflow: hidden; 
	text-indent: -999em; 	
	background:#fff url(img/main.png) no-repeat 0 -40px;
}	

#fp:hover 	{ background-position: 0 -80px;  }
#fp:focus	{ background-position: 0 -120px; }
#fp.active	{ background-position: 0 -160px;	cursor: default; }

#jt 			{ background-position:-275px -40px;  }
#jt:hover 	{ background-position:-275px -80px;  }
#jt:focus  	{ background-position:-275px -120px; }
#jt.active 	{ background-position:-275px -160px; cursor: default; }


#gsearch {
	margin-top:3px;
	float:right;		
}

#gsearch input {
	border:0;
	background:transparent url(img/main.png) no-repeat scroll -9px -237px;
	width:125px;
	padding:4px 10px;
	font-size:11px;
	outline: none;
	position:relative;
	top:1px;
}

#gsearch input:focus {
	background-position:-9px -207px;	
}

#gsearch button {
	border:0;
	background: transparent url(img/main.png) no-repeat scroll -8px -263px;
	text-indent:-999em;
	width:78px;
	height:23px;
	outline:none !important;
}

#gsearch button:hover {
	background-position:-8px -293px;
}
 
#gsearch button:focus {
	background-position:-8px -323px;
}

#remember {
	width:15px;
	padding:0px;
	background-color:transparent;
	position:relative;
	top:1px;
}



.acc {
	position:relative;
	left:45px;
}

.acc a {
	font-size:10px;	
	padding:10px 8px;
	display:block;
	text-decoration:none;
	color:#fff !important; 
}

.acc a:hover, .acc a.active {
	background:#000;
	color:yellow;
}

.account {
	background:#000 url(img/h150_reverse.png);
	_background-image:none;
	padding:0 10px;
	width:140px;
	float:left;
	margin-right:15px;	
	
	-moz-border-radius:10px;
	-moz-border-radius-topleft:0;
	-moz-border-radius-topright:0;	
	-moz-box-shadow:0 0 13px 0 #333;
	
	-webkit-border-radius:10px;
	-webkit-border-top-right-radius:0;
	-webkit-border-top-left-radius:0;	
	-webkit-box-shadow: 0 0 13px #000;		
}

#signup {
	display:none;
	background-position: 0 77px;
	z-index:2;
}

.account, .account a {
	font-size:10px !important;
	color:#ccc;			
	text-decoration:none;
}

.account a:hover {
	text-decoration:underline;	
}

.account input {
	font-size:10px;
	border:1px solid #999;	
	padding:2px 6px;
	background-color:#ddd;
	color:#666;
	width:125px;
	outline:none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.account input:focus {
	background-color:#fff;
	color:#000;
}

.account button {
	border:1px solid #ccc;
	background:#666;
	-moz-border-radius:3px;
	font-size:10px;
	color:#fff;		
	cursor:pointer;
	height:20px;
	padding-top:0px;
}

.account p {
	margin:8px 0;
	font-size:10px !important;
}

.account .error {
	padding:5px 10px;			
	width:140px;
	margin:1px -10px;
	color:#fff;
	background:#c10;
	display:none;
	
	-moz-border-radius-bottomleft:8px;
	-moz-border-radius-bottomright:8px;
	-webkit-border-radius-bottom-left:8px;
	-webkit-border-radius-bottom-right:8px;
}


#loginscroll {
	position:relative;
	height:190px;
	overflow:hidden;
	width:165px;
	display:none;
	z-index:2;
}

#loginscroll div {
	position:absolute;
	width:999em;	
}

.account label {
	cursor:pointer;
	display:block;	
}
/*}}}*/


/*{{{ flowplayer & jquery Tools navi */

/* global navigations */
.globalnav {  
	width: 982px; 
	height: 30px; 
	margin: 10px auto; 
	position: relative; 
	text-align: left; 
	height: 38px !important;
	z-index: 1;	
	clear:both;
}

.globalnav a { 
	float: left; 
	height: 38px; 
	line-height: 38px; 
	width: 138px; 
	overflow: hidden; 
	text-indent: -999em; 	
	background-image: url(img/navi-fp.png); 
	background-repeat: no-repeat;	
}

.globalnav a.active { 
	cursor: default; 
}


/* flowplayer navi */
#fp1 { background-position: 0 0; width: 146px; }
#fp2 { background-position: -146px 0; }
#fp3 { background-position: -284px 0; }
#fp4 { background-position: -422px 0; }
#fp5 { background-position: -560px 0; }
#fp6 { background-position: -698px 0; }
#fp7 { background-position: -836px 0; width: 146px;  }


/* mouseover */
#fp1:hover { background-position: 0 -42px; }
#fp2:hover { background-position: -146px -42px; }
#fp3:hover { background-position: -284px -42px; }
#fp4:hover { background-position: -422px -42px; }
#fp5:hover { background-position: -560px -42px; }
#fp6:hover { background-position: -698px -42px; }
#fp7:hover { background-position: -836px -42px; }

/* mouse pressed */
#fp1:active { background-position: 0 -84px; }
#fp2:active { background-position: -146px -84px; }
#fp3:active { background-position: -284px -84px; }
#fp4:active { background-position: -422px -84px; }
#fp5:active { background-position: -560px -84px; }
#fp6:active { background-position: -698px -84px; }
#fp7:active { background-position: -836px -84px; }


/* active button */
#fp1.active { background-position: 0 -126px; }
#fp2.active { background-position: -146px -126px !important; }
#fp3.active { background-position: -284px -126px !important; }
#fp4.active { background-position: -422px -126px !important; }
#fp5.active { background-position: -560px -126px !important; }
#fp6.active { background-position: -698px -126px !important; }
#fp6.active { background-position: -698px -126px !important; }
#fp7.active { background-position: -836px -126px !important; }


/* jQuery Tools navi */
#nav2 a {
	width: 192px; 
	background-image: url(img/navi-jqt.png);	
}

#jqt1 { background-position: 0 0; width: 203px !important; }
#jqt2 { background-position: -203px 0; }
#jqt3 { background-position: -395px 0; }
#jqt4 { background-position: -587px 0; }
#jqt5 { background-position: -779px 0; width: 203px !important; }


/* mouseover */
#jqt1:hover { background-position: 0 -42px; }
#jqt2:hover { background-position: -203px -42px; }
#jqt3:hover { background-position: -395px -42px; }
#jqt4:hover { background-position: -587px -42px; }
#jqt5:hover { background-position: -779px -42px; }

/* mouse pressed */
#jqt1:active { background-position: 0 -84px; }
#jqt2:active { background-position: -203px -84px; }
#jqt3:active { background-position: -395px -84px; }
#jqt4:active { background-position: -587px -84px; }
#jqt5:active { background-position: -779px -84px; }


/* active button */
#jqt1.active { background-position: 0 -126px; }
#jqt2.active { background-position: -203px -126px !important; }
#jqt3.active { background-position: -395px -126px !important; }
#jqt4.active { background-position: -587px -126px !important; }
#jqt5.active { background-position: -779px -126px !important; }

/*}}}*/


/*{{{ very basic styles */

body {
	margin:0;
	background-color:#fff;
	background:url(img/bgbcc.jpg) no-repeat center 300px;
	padding:0 0 0 0;
}

body, p, div, a {
	font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana,arial,sans-serif;
	font-size:12px;
}

a {
	color:#DDDDDD;		
}

a.external {
	background:transparent url(img/external.png) no-repeat scroll right 0;
	padding-right:15px;		
}


div.clear, hr {
	clear:both;
	display:block;
	font-size:1px;
	height:0pt;
	line-height:1px;
	margin:0pt;
	padding:0pt;
}

hr {
	margin:-5px 0px 5px 0;
	border:1px solid #ccc;
	border-width:1px 0 0 0;
}

.col {
	float:left;
	margin-right:20px;
}

#content div.col50 {
	float:center;
	margin-right:0px;
	width:350px;
}

.last {
	margin-right:0px !important;		
}

div.col h2 {
	margin:0 0 5px 0;		
}

img {
	border:0;		
}

table {
	border-collapse:collapse;		
}

a:active {
  outline:none;
}

:focus, button {
  -moz-outline-style:none;
}

#content ul li, #content ol li, #right ul.smaller li {	
	margin-top:7px;	
}

#content ul li, #right ul.smaller li {
	list-style-image:url(img/bullet.png);
}

#right ul.smaller {
	margin-top:20px;
}

#right ul.smaller li a.selected {
	cursor:default;
	color:#000;
	font-weight:bold;
}

body.ie7 #content ul, body.ie7 #content ol {
	margin-left:50px;
}

/*}}}*/


/*{{{ typo */

h1, h2, h3, h4 {
	font-weight:normal;
	letter-spacing:-1px;
	color:#444; 
	margin:35px 0 -5px 0;
}

h2 { font-size:22px; }
h3 { font-size:18px;	}
h4 { font-size:16px;	margin-top:20px; }

h1 em, h2 em, h3 em, h4 em {
	font-style:normal;
	color:rgb(45, 90, 195);
}

ul, ol, p, table {
	margin:10px 0px;		
}

samp {
	color:#112699;		
}

.first {
	margin-top:0px;		
}

.lower {
	margin-top:20px !important;		
}

.higher {
	margin-top:40px !important;	
}

.red {
	color:#bf0d00;	
}

.blue {
	color:#2D5AC3;	
}


/*}}}*/


/*{{{ global elements */

#wrap {
	margin:10px auto;
	width:982px;		
}

#right {
	float:right;
	width:180px;
}

#content, #right {
	margin-top:150px;		
}

/* demos special features */
#demos_index #content {
	background:none;
	margin:12px 0 0 95px;
	padding:0;
	width:795px;		
}

#demos_index #right {
	margin-top:163px	
}

#tools_index #content {
	background:none;
	margin-top:0px;
	padding:0px;
	width:795px;
}

#tools_index #right {
	margin-top:355px;	
}

body.tools #content, body.tools #right {
	margin-top:250px;
}

body.tools #content h1 {
	height:345px;
	text-indent:-999em;
	top:-339px;
	margin-bottom:-339px;
	z-index:-1;
}

#breadcrumb {
	color:#999;
	font-size:11px;
	position:relative;
	top:-5px;	
	margin-bottom:-20px;
}

#breadcrumb strong, #blog #right li a strong {
	font-weight:normal;		
}
	
#breadcrumb a {
	font-size:11px;
	text-decoration:none;	
}


/* title */
#content h1 {
	background-repeat:no-repeat;
	padding:15px 0 0 95px;
	letter-spacing:-1px;
	font-size:28px;
	height:90px;
	position:relative;
	top:-146px;
	margin:0px 0 -140px 0;
	color:#809198;
	font-weight:bold;
	width:870px;
}

#content h1 strong {
	color:#505050;	
}

/* a little wider title icon for these */
#download_index #content {
	margin:0;
	padding:0;
	width:100%;	
	background:none;
	margin-top:15px;
}

#download_index  #right {
	display:none;		
}



/* move API tabs lower */ 
#documentation_api #content, #documentation_api #right {
	margin-top:160px !important;	
}

#documentation_api #content h1 {
	top:-160px;	
}


#plugins_index h1 {
	padding-top:22px;		
		top:-147px;
	margin-bottom:-125px;
}

#content h1 em {
	display:block;
	font-size:20px;
	color:#808080;
	margin-top:-2px;
	font-weight:normal;
}

a#demos, a#tutorials {
	background:transparent url(img/demos_tutorials.jpg) no-repeat 0 0;
	display:block;
	float:left;
	height:77px;
	margin-bottom:15px;
	overflow:hidden;
	text-indent:-999em;
	width:180px;
}

a#demos:hover, a#demos.selected {
	background-position:0 -78px;
}

a#tutorials {
	background-position:0 -156px;
}

a#tutorials:hover, a#tutorials.selected {
	background-position:0 -234px
}

a#demos.selected, a#tutorials.selected {
	cursor:default;		
}

#footer {
	font-size:11px;
	color:navy;	
}

#footer a {
	color:#666;
	text-decoration:none;
	font-size:11px;
	margin:0px 5px;	
}

#footer a:hover {
	text-decoration:underline;
	color:#123;
}
/*}}}*/


/*{{{ BOXES */


/*{{{ code */

pre, code, .code {
	font-family:'andale mono','bitstream vera sans mono','lucida console','courier new';
	font-size:12px;
	line-height:16px;
}

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



#content div.box.code {
	background:#f9f9fa url(img/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 {
	outline:1px solid #999;
	border:2px solid #fff;
	background-color:#f0f1f2;
	margin:10px 0 15px 0;
	padding:10px;
	
	/* outline radius */
	outline-radius:4px;
	-moz-outline-radius:4px;
	-webkit-outline-radius:4px;	
}

#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(img/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;	
}

/* info, alert */
#content div.box.info, #content div.box.alert {
	background-image:url(img/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(img/alert.png);
}

/*}}}*/



/*{{{ #right box */

#right .box {
	width:181px;
	margin:-1px 0 7px 0;
}

#right h2 {
	background:url(img/sidenav.png) no-repeat;
	font-size:12px;
	height:16px;
	line-height:16px;
	margin:0px;
	padding:6px 10px;
	display:block;
	text-decoration:none;
	color:#000;
	letter-spacing:0px;
}

#right h2.ruby {
	background-position:0 -255px;	
	color:#fff;	
}

#right h2.active {
	background-position:0 -192px;	
	color:#fff;		
	height:17px;
}


#right .inside, #right div.box ul {
	background:url(img/sidenav_strip.jpg) no-repeat;
}

#right .gradient {
	background:#f0f6f7 url(img/h300.png) repeat-x;	
	margin:0 3px;	
	padding:6px 8px;
}

#right .gradient.ruby {
	background:#fff url(img/h150.png) repeat-x;
}

#right .clear {
	background:url(img/sidenav.png) no-repeat 0 -353px;
	height:10px;	
}


/* box content */
#right div.box ul {
	margin:0;
	padding:0;
}

#right div.box li {	
	list-style-type:none;		
}

#right .box a {
	display:block;
	padding:6px 8px;
	border-bottom:1px solid #999;
	text-decoration:none;	
	font-size:12px;
	margin:0px 3px;
}

#plugins_index #right .box a {
	padding:4px 8px;
	font-size:11px;
}

#right .box a:hover {
	background-color:#efefef;
	color:black;
}



#right .box a.selected, #right .box a.selected:hover {
	background-color:#666;
	color:#fff;
	cursor:default;
}

#right div.box input.text {
	width:150px;		
}

/* mini plugin icons */
span.icon {
	display:block;
	width:24px;
	height:24px;
	float:left;
	margin:-3px 8px 0 -4px;
	background:url(img/plugins_small.png);
}

span.icon.js {
	background-position:0 -25px;	
}

span.icon.streaming {
	background-position:0 -50px;	
}

span.icon.tools {
	background-position:0 -74px;	
}

/*}}}*/


/*}}}*/


/*{{{ forms */
form {
	margin:10px 0;		
}

input.text, textarea {
	padding:3px 4px;
	border:1px inset #ccc;
	font-size:12px;
	-moz-border-radius:3px;
	margin-top:2px;
}

textarea {
	width:98%;
	height:200px;
	padding:6px;
	font-size:13px;
	overflow:auto;
}

select {
	font-size:11px;	
	border:1px inset #ccc;
	padding:2px;
}	

td.label {
	width:120px;
	color:#809198;
}

.help {
	font-size:11px;
	color:#666;
}

.help a {
	font-size:11px;	
}

td.help {
	padding-left:10px;		
}

p.less {
	color:#555;		
}

.jform input, .jform textarea, .jform select, input.readmode {
	border:0px;
	color:#000;
	cursor:pointer;
} 

.jform textarea {
	border:1px outset #ddd;	
}

input.readmode {
	text-decoration:underline;			
}

.jform input.editmode, .jform textarea.editmode {
	border:1px inset #ccc;		
	text-decoration:none;		
	cursor:default;
}
 
div.error {
	color:darkred;
	font-size:11px;
}

button {
	font-size:12px;		
}

td.blank {
	border:0;
	height:30px;
}

/*}}}*/


/*{{{ 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(img/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/large.png);
	width:119px;
}

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

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

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

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

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



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

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

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


/* span.play */
span.play {
	background:url(img/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/play_full.png);
	width:125px;
}

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

span.play.again {
	background-image:url(img/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/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/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/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/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:40px;	
	width:576px;  
	display:none;
	background-image:url(img/white.png);	
}

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

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

div.grippie {
	background:#EEEEEE url(img/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;	
}

#downloadInfo  {
	float:right;
	margin:60px 36px 0pt 0pt;
	text-align:center;
	color:#555;
	font-size:11px;	
}

#downloadInfo a {
	font-size:11px;		
}

h1#logo {
	background:transparent url(img/logo-3.1.jpg) no-repeat scroll 0 0;
	float:left;
	height:131px;
	margin:25px 0 46px 25px;
	text-align:right;
	width:490px;
}

h1#logo em {
	display:none;		
}

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


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

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/main.jpg) no-repeat 0 -98px;
	position:relative;
	top:-1px;
	height:448px;	 
	overflow:hidden;
	width:757px;
}

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

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

#items #first {
	background:url(img/main.jpg) no-repeat 0 -546px;		
	height:425px; 
	padding-top:50px;
}

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

#items a.flowplayer {
	display:block;
	background:transparent url(img/h500.png) repeat-x;
	height:320px;
	width:430px;
	float:left;
	text-align:center;
	margin:20px 20px 0 0;
}

#items a.flowplayer img {
	margin-top:120px;		
}

/* old flash version */
#items a.flowplayer h2, #items a.flowplayer a {
	font-size:20px;
	color:#fff;
}

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

#items #first a.flowplayer {
	width:460px;		
	margin:0px;
}


#items #first div.col {
	width:165px;		
}

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

#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; 
}

#player3 object {
	z-index:10000;		
}

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/main.jpg) no-repeat;
	padding:0px;
	margin:0px;
}

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

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


/* right picks */
#right div.pick {
	background: url(img/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.blank 		{ background-image: url(img/blank.png); }
#right div.pick.book 		{ background-image: url(img/book.png); }
#right div.pick.release 	{ background-image: url(img/release.png); }                        
#right div.pick.screens 	{ background-image: url(img/box/right/screens.png); }
#right div.pick.flash 		{ background-image: url(img/flash.png); }
#right div.pick.js 			{ background-image: url(img/js.png); }
#right div.pick.tools 		{ background-image: url(img/tools.png); }
#right div.pick.streaming 	{ background-image: url(img/streaming.png); }
#right div.pick.jstools 	{ background-image: url(img/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,
#right div.pick.tools h3, #right div.pick.tools h4, #right div.pick.tools p
{
	padding-left:15px;
	padding-right:76px;
}

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

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


/* mask */
#exposeMask {
	background-color: #123;
	color: #fff;
	text-align: center;
	padding-top:0px;
}

#exposeMask p {
	font-size: 20px; 
	width:640px;		
	margin:0px auto;
}

#exposeMask span {
	color:yellow;	
}


/* custom controlbar */
#homeControls {
	width:430px;
}

#homeControls div.track {
	width:215px;		
}

#homeControls div.time {
	left:260px;	
}

#homeControls a.mute, #homeControls a.unmute {
	left:390px;
}

#index #emailPane, #index #embedPane {
	background:transparent url(img/h500.png) repeat-x;
}

/*}}}*/


/*{{{ blog  */

div.blogImage {
	width:85px;
	height:85px;
	float:right;
	margin:5px 0 30px 50px;
	background-repeat:no-repeat;
}

div.blogImage.book 		{ background-image: url(/img/title/book.png); }
div.blogImage.release 	{ background-image: url(/img/title/release.png); }                        
div.blogImage.screens 	{ background-image: url(/img/title/screens.png); }
div.blogImage.flash 		{ background-image: url(/img/title/flash.png); }
div.blogImage.js 			{ background-image: url(/img/title/javascript.png); }
div.blogImage.streaming { background-image: url(/img/title/streaming.png); }
div.blogImage.jstools 	{ background-image: url(/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;	
}



/*}}}*/


/*{{{ tools  */
.tools #right a {
	color:#00559E;		
}

#tools_index #right {
	margin-top:355px;	
}

body.tools #content, body.tools #right {
	margin-top:250px;
	padding-left:10px;
}

body.tools #breadcrumb {
	margin-bottom:-15px;
	top:-35px;		
}


body.tools #content h1 {
	height:320px;
	text-indent:-999em;
	top:-339px;
	margin-bottom:-339px;
	z-index:-1;
}


#content h1#hero {
	background:url(img/plain.jpg) no-repeat -31px 16px;
	font-size:75px;
	letter-spacing:-3px;
	padding:151px 0 0 217px;
	text-transform:uppercase;
	height:185px;
	color:#055499;
	text-indent:0;
	line-height:45px;
	position:relative;
	width:735px !important;		
}

#content h1#hero em {
	text-transform:none;
	letter-spacing:0;
	font-size:22px;
	color:#000;
}

#hero span {
	background:transparent url(img/letters.png) repeat-x 0 0;
	height:80px;
	position:absolute;	
	margin-top:-7px;
	display:block;
	width:735px !important;
}

#tools_demos_index #right {
	display:none;		
}
	
#tools_demos_index #content, #setup_index #content {
	width:100%;
	background-image:none;
	padding:0px;
	float:none;
	margin-top:25px;
}


h1 i {
	color:#BF17A2;
	font-style:normal;	
}

/* #right release notes list */
#notes {
	margin:15px 0 30px 13px;		
}

#notes p {
	background:transparent url(/img/bullet_8x8.png) no-repeat scroll 0 3px;
	padding:0 0 2px 15px;
	font-size:11px;
	margin:0px;
}

#notes a {
	font-size:11px;
	color:#666;
}

#notes a:hover {
	color:#000;
}

#notes a.active {
	color:#000;
	text-decoration:underline !important;
}

#twitter {
	font-size:11px;	
	width:190px;
}

#twitter p {
	border-bottom:1px dotted #ccc;
	padding:7px 5px;		
	cursor:pointer;
	color:#666;
	margin:0px;
}

#twitter p:hover {
	background-color:#EDF0F3;
	color:#000;
}

#twitter em {
	font-style:normal;				
}

#twitter span {
	display:block;
	font-weight:bold;
	color:#33ccff;
}

/*}}}*/

@media print {

	body {
		padding:0;		
	}
	
	#globalnav, #right, #user, .noprint, #breadcrumb {
		display:none;		
	}
	
	#wrap, #content {
		width:98%;		
		margin:0;
	}
	
	#content h1 {
		padding:0;
		margin:0;
		top:0;		
	}
}