@charset "utf-8";
/* CSS Document */


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

img {
	border:0;	
	
}
img#bg {
position:relative;
}

table 

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

#flow01content li, #flow01content li, #right .smaller li {	
	margin-top:7px;	
}

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

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

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

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

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

/*}}}*/

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


#global_fp, #global_jt { 
	float: left; 
	height: 34px; 
	width:275px;
	overflow: hidden; 
	text-indent: -999em; 	
	background:#fff url(../img/global/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; }




#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 */


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

#flow01content {
	float:left;
	min-height:400px;	
	padding:20px;
	width:748px;
}


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


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

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

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

body.tools #flow01content 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 */
#flow01content 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;
}

#flow01content h1 strong {
	color:#505050;	
}

/* a little wider title icon for these */
#download_index #content, #3_2_index #flow01content {
	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 #flow01content, #documentation_api #right {
	margin-top:160px !important;	
}

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


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

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

a#demos, a#tutorials {
	background:transparent url(/img/global/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;
}

/*}}}*/



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



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

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


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


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

#flow01content .box, table.listing, .tip {
	border:1px solid #ccc;
	
	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;		
}


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

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


/* skins */
#flow01content .box.dark 									{ background-color:#99a6af; }
#flow01content .box.dark h2 								{ background-color:#586e7b; }
#flow01content .box.light 									{ background-color:#f9f9fa; }
#flow01content .box.light h2 								{ background-color:#d7dde1; }
#flow01content .box.petrol 								{ background-color:#295c72; }
#flow01content .box.petrol h2 							{ background-color:#254558; }
#flow01content .box.petrol.dark, .tip 				{ background-color:#254558; }
#flow01content .box.petrol.dark h2, .tip h2 		{ background-color:#295c72; }
#flow01content .box.ruby 									{ background-color:#e5e7e9; }
#flow01content .box.ruby h2 								{ background-color:#b8128f; }
#flow01content .box.ruby.dark 							{ background-color:#b8128f; }
#flow01content .box.ruby.dark h2 						{ background-color:#552452; }
#flow01content .box.black 									{ background-color:#000000; }
#flow01content .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 */
#flow01content .box.info, #flow01content .box.alert {
	background-image:url(/img/global/info.png);
	background-position:6px center;	
	background-repeat:no-repeat;
	padding:15px 50px;
	font-size:14px;
	color:#555;
}

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


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

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


/*{{{ player */

a.player {	
	display:block;
	width:500px;
	height:340px;
	background:#000 url(/img/global/gradient/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/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;		
}

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

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

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

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

/*}}}*/


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

/* overlay */ 
.overlay, #overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(/img/overlay/white.png);	
}

a.close {
	background:url(/img/overlay/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/forum/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 #flow01content, #index #flow01content {
	margin:0;
	padding:0;
	width:100%;	
	margin-top:15px;
}

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



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

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

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

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


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


#flow01content h1#hero {
	background:url(/tools/img/hero/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;		
}

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

#hero span {
	height:80px;
	position:absolute;	
	margin-top:-7px;
	display:block;
	width:735px !important;
}



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

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

/*}}}*/

@media print {

	body		

	
	#globalnav, #right, #user, .noprint, #breadcrumb {
		display:none;		
	}
	
	#wrap, #flow01content {
		width:98%;		
		margin:0;
	}
	
	#flow01content 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; }