/*{{{ very basic styles */

body {
	margin:0;
/*	background-color:#fff;*/
	padding:0 0 50px 0;
}

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

a {
	color:#295c72;		
	outline:none;
}

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


.clear, hr {
	clear:both;
	display:block;
	font-size:1px;
	height:10px;
	line-height:10px;
	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;
}

.col50 {
	float:left;
	margin-right:40px;
	width:350px;
}

.feat 	{ width:350px; padding-right:15px; border-right:1px solid #ccc; margin-right:25px; float:left; min-height:100px;}

.last {
	 margin:0 !important; 
	 padding:0; 
	 border:0;
}

.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 li, #content li, #right .smaller li {	
	margin-top:7px;	
}

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

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

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

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

.rounded {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

/*}}}*/


/*{{{ typo */

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

h2 { font-size:22px; }
h3 { font-size:14px;	font-weight:bold; margin-bottom:-8px; color: #111; }
h4 { font-size:14px;	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;	
}

p.more {
	margin:20px 0; 
	color:#666;
}

p.more, p.more a {
	font-size:16px;	
}

.center {
	text-align:center;		
}
/*}}}*/


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

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

#global .wrap {  
	width: 983px;  
	margin:0px auto;	
}


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

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

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

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

#global_jt 			{ background-position:-275px -40px;  }
#global_jt:hover 	{ background-position:-275px -80px;  }
#global_jt:focus  	{ background-position:-275px -120px; }
#global_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: 160px; 
	overflow: hidden; 
	text-indent: -999em; 	
	background-image: url(../img/navi-3.2.png); 
	background-repeat: no-repeat;	
}

.globalnav a.active { 
	cursor: default; 
}

/* 9_171_331_492_652_813_973
 */
/* flowplayer navi */
#fp1 { background-position: 0 0; width: 171px; }
#fp2 { background-position: -171px 0; }
#fp3 { background-position: -331px 0; }
#fp4 { background-position: -492px 0; }
#fp5 { background-position: -652px 0; }
#fp7 { background-position: -813px 0; width: 169px;  }


/* mouseover */
#fp1:hover { background-position: 0 -42px; }
#fp2:hover { background-position: -171px -42px; }
#fp3:hover { background-position: -331px -42px; }
#fp4:hover { background-position: -492px -42px; }
#fp5:hover { background-position: -652px -42px; }
#fp7:hover { background-position: -813px -42px; }

/* mouse pressed */
#fp1:active { background-position: 0 -84px; }
#fp2:active { background-position: -171px -84px; }
#fp3:active { background-position: -331px -84px; }
#fp4:active { background-position: -492px -84px; }
#fp5:active { background-position: -652px -84px; }
#fp7:active { background-position: -813px -84px; }


/* active button */
#fp1.active { background-position: 0 -126px; }
#fp2.active { background-position: -171px -126px !important; }
#fp3.active { background-position: -331px -126px !important; }
#fp4.active { background-position: -492px -126px !important; }
#fp5.active { background-position: -652px -126px !important; }
#fp7.active { background-position: -813px -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; }

/*}}}*/


/*{{{ global elements */

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

#content {
	background:#fff url(../img/content_top.jpg) no-repeat;
	float:left;
	min-height:400px;	
	padding:20px;
	width:748px;
}

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

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


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

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

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

body.tools #right {
	margin-top:0px;
}

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


#footercrumb {
	margin-top:20px;
	border:1px solid #ddd;
	border-width:1px 0;
	padding:5px 20px;
	color:#ccc;
	height:16px;
	background-color:#f7f7f7;
}

#footercrumb a {
	font-size:10px;
	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, #3_2_index #content {
	margin:0;
	padding:0;
	width:100%;	
	background:none;
	margin-top:15px;
}

#download_index #right, #3_2_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;		
}

#bull {
	font-size:60px;
	text-align:center;
	color:#789;
}

/*}}}*/


/*{{{ RIGHT */
#right h3 {
	letter-spacing:0;
}

#rightnav {
	margin:-10px 0 0 5px;
}

#rightnav h3 {
	border-bottom:1px solid #666;
	margin-bottom:5px;
}

#rightnav a {
	display:block;		
	padding:4px 6px;
	border-bottom:1px dotted #ccc;
	text-decoration:none;
}

#rightnav .active a {
	text-decoration:underline !important;
	color:black;
	cursor:default;
}

#rightnav a:hover {
	background-color:#efefef;		
}


#rightnav a.plugin {
	padding-left:15px;
	color:#777 !important;
	font-size:11px;
}

#rightnav a.active {
	background-color:#466782;
	color:#fff !important;	
	cursor:default;
}

.tools #rightnav a.active  {
	background-color:#00559E;
}



#biglink {
	display:block;
	font-size:20px;
	padding:5px 15px;
	text-align:center;
	text-decoration:none;	
}

#biglink strong {
	color:#000; 
	letter-spacing:-1px;
	display:block; 
}


#biglink:hover strong {
	text-decoration:underline;		
}

#biglink.current strong {
	text-decoration:none !important;
}
	
#biglink.current {
	cursor:default; 	
	background-color:#efefef;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}


/* #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 .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 .box ul {
	margin:0;
	padding:0;
}

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

#right .box a {
	display:block;
	padding:5px 8px;
	border-bottom:1px solid #ddd;
	text-decoration:none;	
	font-size:11px;
	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 .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;	
}

/*}}}*/


/*{{{ BOXES */


/*{{{ code */

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

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

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

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

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



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

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


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


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

#content .box, table.listing, .tip {
	border:1px solid #ccc;
	background-color:#f0f1f2;
	margin:10px 0 15px 0;
	padding:10px;
	
	/* outline radius */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;	
}

.opera .box, .opera .listing, .opera .tip {
	outline:0 !important;		
}


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

.tip {
	background:url(../img/h150.png) repeat-x;
}


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

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

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

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

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

.tip h3 {
	color:#dee7ec;	
}

/* info, alert */
#content .box.info, #content .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 .box.info a {
	font-size:14px;	
}


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

#content .box.alert {
	background-image:url(../img/alert.png);
}

/*}}}*/


/*}}}*/


/*{{{ 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;
}
 
.error {
	color:darkred;
	font-size:11px;
}

button {
	font-size:12px;		
}

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

/*}}}*/


/*{{{ buttons */

button {
	border-width:1px;
	border-bottom: 0.2em solid #666;
	font-size:1em;
	padding:0.3em 0.6em;
	color:#fff;
	line-height: 1;
	text-shadow: 0 0 0.1em #222;
	cursor:pointer;
	background-color:#5D689A;
	-moz-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5);
	-moz-border-radius:10.2em;	 
	
	-webkit-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5);
	-webkit-border-radius:10.2em;		
}

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

/* button.custom */
button.custom {
	background:transparent url(../img/normal.png) 0 0 no-repeat;	
	height:32px;	
	width:99px;	
	border:0;
	outline:0;
}

button.custom:hover {
	background-position: 0 -34px;		
}

button.custom:active {
	background-position: 0 -68px;		
}

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:24px;
	font-size:11px;
}

button.low:hover {
	background-position: 0 -26px;		
}

button.low:active {
	background-position: 0 -52px;		
}


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:24px;
}

button.delete:hover {
	background-position: 0 -26px;		
}

button.delete:active {
	background-position: 0 -52px;		
}



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


/*}}}*/


/*{{{ tabs */

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

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

.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
.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. */
.tabs .current, .tabs .current:hover, .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 */
.tabs .w1 			{ background-position: -519px 0; width:134px; }
.tabs .w1:hover 	{ background-position: -519px -31px; }
.tabs .w1.current { background-position: -519px -62px; }

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


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

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


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

/*}}}*/


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

.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 {	
	display:block;
	width:500px;
	height:340px;
	background:#000 url(../img/h500.png) repeat-x 0 0;
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	background:-moz-linear-gradient(top, rgba(55, 102, 152, 0.9), rgba(6, 6, 6, 0.9));
	-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}

a.player:hover {
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898));	
}


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

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

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 */ 
.overlay, #overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(../img/white.png);	
}

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

.grippie {
	background:#eee url(../img/grippie.png) no-repeat scroll center 2px;
	border-color:#ddd;
	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;
}

/*}}}*/


#documentation_index #content, #index #content {
	margin:0;
	padding:0;
	width:100%;	
	background:none;
	margin-top:15px;
}

#documentation_index #right, #index #right  {
	display:none;		
} 



/*{{{ footer */


#footerlinks {
	color:#666;
	font-size:10px;
	text-align:center;
	margin-top:-10px;
}

#footerlinks a {
	color:#5F5F5F;
	text-decoration:none;
	font-size:10px;
	margin:0px 5px;	
}

#footerlinks a:hover {
	text-decoration:underline;
	color:#123;
}

#pick {
	background: url(../img/blank.png) no-repeat;
   width:186px;
   height:126px;
   margin:15px 15px 0 0;
   padding:13px;
   cursor:pointer;
   float:left;
   display:block;
   font-size:12px;
   color:#666;
   text-decoration:none;
}

#pick strong {
   font-size:13px;
   color:#000;
   margin:0;
   display:block;
  	margin-bottom:5px;
}

#pick .blue {
	font-size:16px;		
}


#footer h2 {
	text-align:center;		
	margin:15px 0 -5px 0;
	font-weight:bold;
	color:#003670;
	font-size:15px;	
}

#twitter {
	border-bottom:1px dotted #999;
	padding:15px 0; 
	height:90px;
}

#tweets {
	float:left;		
	width:900px;
}

.tweet {
	float:left;
	width:190px; 
	margin-right:30px;
}

.tweet a {
	font-size:11px;
}
.tweet p {
	font-size:11px;
	color:#222;	
	height:55px;
}

.tweet .time {
	font-size:11px;
	color:#b8b8b8;		
}

.tweet.clickable {
	cursor:pointer;	
}

#follow {
	display:block;
	width:74px;
	height:74px;
	background:url(../img/twitter.png) no-repeat -4px -4px;
	text-indent:-999em;
	float:right;
	margin-top:10px;
}

#follow:hover {
	background-position:-4px -78px;		
}


#follow:focus {
	background-position:-4px -151px;		
}

.tools #pick {
	background-image:url(../img/tools.png);
	padding-right:90px;
	width:115px;
}
/*}}}*/


/*{{{ blog  */

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

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


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

.blogImage.book {
	height:165px;	
}

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



/*}}}*/


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

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

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


body.tools #content h1 {
	height:320px;
	text-indent:-999em;
	top:-330px;
	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, #demos_index #right {
	display:none;		
}
	
#tools_demos_index #content, #setup_index #content, #demos_index #content, #plugins_index #content {
	width:100%;
	background-image:none;
	padding:0px;
	float:none;
	margin-top:25px;
}


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

#oldTools {
	background-color:#315274;
	color:#fff;
	font-size:18px;
	padding:10px;
	text-align:center;
}

#oldTools a {
	color:yellow;
	font-size:18px;	
}

/*}}}*/

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

/* Generics */

.DlHighlight {
  background-color: #f8f8f8;
  font: 12px monospace;
  line-height:16px;
}

.DlHighlight pre { margin: 0; padding: 0; }

.DlHighlight .keyword { color: #00f; font-weight: bold; }

.DlHighlight .builtin { color: #22c; }

.DlHighlight .string { color: #006BCF; }
.DlHighlight .string .before, .DlHighlight .string .after { color: #878787; }

.DlHighlight .regexp { color: #b2c; }
.DlHighlight .regexp .before, .DlHighlight .regexp .after { color: #509; font-weight: bold; }

.DlHighlight .comment { color: #282; }
.DlHighlight .comment .before, .DlHighlight .comment .after { color: #baa; }

.DlHighlight .hashkey { color: #a51; }

.DlHighlight .hasharrow { color: #f00; }

.DlHighlight .paren { font-weight: bold; }

.DlHighlight .operator { color: #077; }

.DlHighlight .error { background-color: #c00; color: #fff; }

.DlHighlight .defun { font-weight: bold; }

.DlHighlight .line-numbers {
  float: left;
  margin-left: -4.5em;
  width: 3em;
  text-align: right;
  color: #999;
  font: 0.9em tahoma,verdana,sans-serif;
  padding-top: 0.05em;
}
.DlHighlight .line-numbers:after { content: "." }

/* XML */

.DlHighlight .xml-tag-close .before { color: #52a; }

.DlHighlight .xml-entity { color: #b2a; }
.DlHighlight .xml-entity .before, .DlHighlight .xml-entity .after { color: #607; }

/* CSS */

.DlHighlight .css-class { color: #000; font-style: italic; }
.DlHighlight .css-pseudo-class { color: #777; }
.DlHighlight .css-id { font-weight: bold; }
.DlHighlight .css-color-spec { color: #a51; }
.DlHighlight .css-length { color: #a19; }
.DlHighlight .css-length .after { font-weight: bold; }
.DlHighlight .css-declaration-kw { font-weight: bold; }
.DlHighlight .css-comma { color: red; }