/*
=============================================
	INCLUDE ALL STYLE SHEETS
=============================================
*/

/*	CSS for Reset */
@import "reset.css";

/*
	html
*/
body
{
	font-family:Arial;
	font-size:100%;
	background:#f4f4f4;
	color:#666666;
}

a:active,
a:link,
a:visited,
a:hover,
a:focus
{
	color:#cc0000;
}

h1,
h3,
h4
{
	font-family:Georgia;
	font-size:600%;
	color:#a0a0a0;
	font-weight:bold;
	letter-spacing:-0.1em;
}

h3
{
	font-size:200%;
	color:#333333;	
	letter-spacing:-0.05em;	
}

h4
{
	font-size:150%;	
	color:#e0e0e0;	
	letter-spacing:-0.05em;	
}

.red
{
	color:#cc0000;
}

.ltblue
{
	color:#5ba2c7;
}

.mdblue
{
	color:#3e81a4;
}

.dkblue
{
	color:#0c5c86;
}

#Core
{
	width:950px;
	height:100%;
	margin:0 auto;
	background:#FFFFFF;
	border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;		
	margin-top:10px;
}

#Title
{
	padding:10px;
	height:60px;
}

#Title h1,
#Title p
{
	float:left;
}

#Title p
{
	font-size:112.5%;
	font-weight:bold;
	margin:65px 0 0 20px;
}

#Content
{
	clear:both;
	padding:10px;	
	margin-top:10px;
}

#Menu
{
	float:left;
	margin-top:20px;
}

#Menu li
{
	height:42px;
	padding:20px 0 5px 20px;
	width:273px;
	font-size:150%;
	font-weight:bold;
	color:#FFFFFF;
	background:transparent url(../images/li-sprite.png) no-repeat;
	background-position:0 -72px;
	cursor:pointer;
}

#Menu li.first{background-position:0 -70px;}
#Menu li.last{background-position:0 -73px;}

#Menu li:hover{background-position:0 -142px;}
#Menu li.first:hover{background-position:0 -140px;}
#Menu li.last:hover{background-position:0 -143px;}

#Menu li.on{background-position:0 -2px;}
#Menu li.first.on{background-position:0 0;}
#Menu li.last.on{background-position:0 -3px;}

#Description
{
	margin-left:100px;
	width:820px;
	height:375px;
	padding:30px 0 0 0;
	background:#f0f0f0;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

#Description,
#Description h4
{
	color:#333333;
}

#Description p
{
	margin-bottom:25px;
}

#Description code,
#Demo code
{
	float:left;
	padding:10px;
	margin:10px 0 0 0;
	font-family:Times;
	font-size:77%;
	background:#FFFFFF;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}


#Description code.huge
{
	font-size:200%;
}

#Description .comment
{
	color:#8cb065;
}

#Demo
{
	clear:both;
	height:220px;
	padding:10px;	
	margin:0 0 10px 0;
	background:#434343;
	margin-top:10px;
	text-align:left;
	color:#e0e0e0;
	border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
}

#Demo h5
{
	color:#FFFFFF;
}

#Demo li
{
	float:left;
	width:220px;
	margin:10px 10px 10px 0;
}

#Demo code
{
	width:200px;
	color:#333333;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	height:120px;
}

#Demo li.link code:hover
{
	background:#EEEEEE;
	cursor:pointer;
}

#Demo code input,
#Demo code select,
#Demo code button
{
	width:180px;
	border:solid 1px #CCCCCC;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:3px;
	margin:1px 0;	
}