/*
 * Information
 */
#information {
	float: left;
	width: 500px;
	margin-top: 60px;
	margin-left: 20px;
	padding: 20px 0;
	position: relative;
	
	text-align: right;
	
	background-image: url("images/h1-bg.png");
	background-repeat: no-repeat;
	background-position: 80% 10%;
}

#information .date {
	display: block;
	position: absolute;
	top: 2em;
	right: 1em;
	
	letter-spacing: -.1em;
	font-size: 120%;
	
	text-transform: uppercase;
	
	color: white;
}


#information .breadcrumbs {
	margin-right: 50px;
	
	font-size: 120%;
}

#information .breadcrumbs a,
#information .breadcrumbs { 
	color: white;
}

#information .breadcrumbs ul li {
	float: left;
}

#information .breadcrumbs a {
	padding: 5px;
	
	text-decoration: none;
}

#information .breadcrumbs a:hover {
	background-color: #7B591F;
}


#information .breadcrumbs > li {
	margin-top: 20px;
	padding-top: 40px;
	float: right;
	clear: right;
	
	background-image: url("images/up-white.png");
	background-repeat: no-repeat;
	background-position: 35% 0;
}

#information .breadcrumbs ul li + li:before {
	content: '+';
	
	font-weight: bold;
	
	color: white;
}


#information .breadcrumbs > li:nth-child(4n+1) {
	margin-right: 10px;
}

#information .breadcrumbs > li:nth-child(4n+2) {
	margin-right: 30px;
}

#information .breadcrumbs > li:nth-child(4n+3) {
	margin-right: 50px;
}


#information ol li:nth-child(2n) {
	background-position: 75% 0;

}


















/*
 * Content
 */
#content {
	float: left;
	width: 600px;
	margin: 100px 0 0 75px;
	
	line-height: 150%;
}



/*
 * Text Treatment for Content
 */
#content > p:nth-child(0n+1){
	background-image: url("images/first-line.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 100%;
	padding: 18px 20px 40px;
	margin-left: -20px;
	margin-bottom: -40px;
	text-indent: -50px;
}

#content > p:first-child:first-line {
	font-size: 110%;
}

#content > p:nth-child(0n+1):first-line {
	color: white;
}

#content > p:nth-child(0n+1):before {
	display: block;
	float: left;
	height: 3.5em;
	width: 50px;
	content: " ";
}

#content pre > code {
	background-color: #111;
	color: white;
	
	display: block;
	width: 100%;
	width: 100%;
	padding: 0 20px;
	margin-left: -20px;
	
	font-family: Consolas, Monaco;
	font-size: 80%; 
	
	white-space: pre-wrap;
	word-wrap: break-word;
}


#content p,
#content pre, 
#content ul,
#conent ol,
#content blockquote {
	margin: 1.5em 0;
}

#content ul li {
	display: list-item;
	list-style-type: square;
}

#content ol {
	counter-reset: ol;
}

#content ol li {
	margin: .5em 0 .5em 1.9em;

}

#content ol li:before {
	counter-increment: ol;
	content: counter( ol, decimal-leading-zero ) ".";
	font-family: Consolas, Monaco;
	
	display: block;
	height: 1.4em;
	margin-left: -2.2em;
	margin-bottom: -1.5em;
	margin-top: .1em;
	
	font-size: 80%;
	color: yellow;
}

#content ol li:hover:before {
	color: white;
}

#content h2 {
	margin: 1em 0 .5em -20px;
	padding: .5em 20px;
	width: 100%;
	
	font-weight: bold;
	font-size: 150%;
	line-height: normal;
	background-color: yellow;
}

#content a:hover {
	background-color: white;
}

#content sup {
	vertical-align: super;
	font-size: 80%;
}


#content code {
	font-family: Consolas, Monaco;
	font-size: 85%;
	padding: 4px 3px;
	background-color: rgba(100%,100%,100%,.3);
}

#content a.to-demo {
	display: inline-block;
	padding: 5px;
	background-color: #FF0080;
	color: white;
}

/* Documentation */
#content dl.documentation {
	margin: 1em 0;
	color: #fff;
}

#content dl.documentation dd {
	padding: 1px 20px 1px 140px;
	width: 480px;
	padding-bottom: .5em;
	margin-left: -20px;
	font-size: 80%;
	background-color: #2B2B2B;
	color: #fff;
	
}


#content dl.documentation dt:after {
	color: #555;
	padding: 0 2px;
	font-size: 80%;
	
	display: inline-block;
	position: relative;
	top: -3px;
	
}

#content dl.documentation dt:hover:after {
	color: #fff;
}

#content dl.documentation dt.opened:after {
	content: "\25B4";
}

#content dl.documentation dt.closed:after {
	content: "\25BE";
}

#content dl.documentation dt:hover {
	color: #ddd;
}

#content dl.documentation dt:hover ~ dd {
	background-color: #444;
}

#content dl.documentation dt:hover ~ dt ~ dd {
	background-color: #2B2B2B;
}

#content dl.documentation dd p,
#content dl.documentation dd li,
#content dl.documentation dd ul,
#content dl.documentation pre {
	margin: .5em 0;
}

#content dl.documentation dd > :first-child {
	margin-top: 0;
}



#content dl.documentation dt {
	float: left;
	margin-top: .2em;
	cursor: pointer;
	padding-top: 5px;
}

#content dl.documentation dt + dd {
	margin-top: .2em;
	padding-top: 5px;
}

#content dl.documentation dd.signature code {
	background-color: transparent;
}

#content dl.documentation .param,
#content dl.documentation .type {
	color: yellow;
}

#content dl.documentation dd.signature .type  {
	display: inline-block;
	width: 150px;
}

#content dl.documentation pre > code {
	width: auto;
}


/* Code Samples */
/* Chili -- comments for all */
#content pre.sample code .css__comment,
.html__comment,
.js__ml_comment,
.js__sl_comment		{ 
	color: #009900; font-style: italic;
}

/* Chili -- html */
#content pre.sample code .html__doctype { color: #888; }
#content pre.sample code .html__ie_style { color: DarkSlateGray; font-weight: bold; }
#content pre.sample code .html__tag_start { color: #0000cc; font-weight: bold; }
#content pre.sample code .html__tag_end { color: #0000cc; }.html__entity { color: blue; }
#content pre.sample code .html__attr_name { color: #F50060; }
#content pre.sample code .html__attr_value { color: purple; }

/* Chili -- css */
#content pre.sample code .css__directive { color: #0000cc; font-weight: bold;}
#content pre.sample code .css__url { color: black; }
#content pre.sample code .css__class { color: #0000cc; font-weight: bold; }
#content pre.sample code .css__id { color: #0000cc; font-weight: bold; }
#content pre.sample code .css__pseudo { color: #F50060; font-weight: bold; }
#content pre.sample code .css__element { color: #0000cc; font-weight: bold; }
#content pre.sample code .css__property { color: #006600; }
#content pre.sample code .css__special { color: #330066; text-decoration: underline; }
#content pre.sample code .css__value { color: #3366FF; }
#content pre.sample code .css__string { color: black; }
#content pre.sample code .css__number { color: black; }
#content pre.sample code .css__color { color: #3366FF; }

/* Chili -- js */

#content pre.sample code .js__string { color: teal; }
#content pre.sample code .js__num { color: black; }
#content pre.sample code .js__reg_exp { color: #663B1B; font-weight: bold; }
#content pre.sample code .js__brace { color: #F50060; font-weight: bold; }
#content pre.sample code .js__statement { color: #000099; font-weight: bold; }
#content pre.sample code .js__error { color: Coral; }
#content pre.sample code .js__object { color: DeepPink; }
#content pre.sample code .js__property { color: Purple; font-weight: bold; }
#content pre.sample code .js__function { color: #0000cc; }
#content pre.sample code .js__operator { color: #0000cc; font-weight: bold; }
#content pre.sample code .js__liveconnect { text-decoration: overline; }




#content pre.plain-source,
#content pre.sample {
	margin: 0;
}

#content pre.plain-source,
#content pre.sample code ol {
	margin: 0 0 0 -20px;
	background-color: white;
	color: #111;
	line-height: 175%;
	font-family: Consolas, Monaco, monospace;
	font-size: 80%;
	padding: .75em 20px;
	width: 100%;
}



#content pre.sample code {
	counter-reset: codeLineNumber 0;
}

#content pre.plain-source {
	overflow: auto;
}

#content pre.sample code ol li {
	margin: 0 0 0 1.6em;
	list-style-type: none; 
	display: block;
	background-color: white;
	padding: 0 .2em;
	border-left: solid 2px #FF0080;
	white-space: pre;
	white-space: -moz-pre-wrap;
	white-space: pre-wrap;
	word-wrap: break-word;
	counter-increment: codeLineNumber;
}



#content pre.sample code ol li:hover {
	background-color: #FFFF55;
}

#content pre.sample code ol li:hover:before {
	color: #FF0080;
}


#content pre.sample code ol li:before {
	content: counter( codeLineNumber, decimal-leading-zero );
	display: block;
	position: absolute;
	margin-left: -1.8em;
	color: #663B1B;

}


#content iframe.demo {
	width: 100%;
	background-color: white;
	border: solid 0 white;
	padding: 0 20px;
	margin: 1em 0 1em -20px;
}

#content .code-sample-button {
	display: inline-block;
	padding: 5px 20px;
	margin-left: -20px;
	margin-right: 30px;
	cursor: pointer;
	font-size: 90%;
	color: #005FD9;
}

#content .code-sample-button:hover {
	background-color: #005FD9;
	color: white;
}

#content .code-sample-button-current,
#content .code-sample-button-current:hover {
	background-color: white;
	color: #005FD9;
}