/* -------------------------------------------------------------------------------------- SMALL RESET */
body, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p{
	margin:0;
	padding:0;
	}
ul{list-style:none; }
a{text-decoration:none; color:#666;}
a:hover{text-decoration:none; color:#333;}

img{
	border:none;
}

.clearfix{ clear:both; }

/* -------------------------------------------------------------------------------------- HACKS */

.clear{
	clear:both;
	height:1px;
	}

.inv{ display:none; }

/* -------------------------------------------------------------------------------------- STRUCTURE */

body{
	background:#333333;
	color:#FFF;
	font:normal 11.5px/21px normal;
	font-family:Arial, Helvetica, sans-serif;
	}

/* -------------------------------------------------------------------------------------- HEADINGS */
h1, h2, h3, h4, h5, h6{
	color:#FFF;
	font-family:'Myriad Pro', 'Myriad Pro Bold', Arial, Helvetica, Sans-serif;
	}

h1{	font-size:60px; }
h2{	font-size:48px; line-height:54px;}
h2 span{ 
	clear:both;
	display:block;
	font-size:20px;
	line-height:24px;
}
h3{	font-size:36px;
	margin:0 0 15px 0;
}
h4{	font-size:24px;
	margin:0 0 10px 0; padding:0 0 10px 0;
}
h5{	font-size:18px; margin:0 0 5px 0;}
h6{	font-size:15px; margin:0 0 5px 0;color:#999; display:block;}
span{ 	
    font:normal 11.5px/21px normal;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
	color:#999;
}
span a{ 	
    font-size:9px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
	color:#666;
}
/* --------------- WRAPS STYLES */
.wrapCenter{
	background:url(../images/block_bg.png) repeat-y 50% top;
	height:100%;
}
.wrap_bottom{
	background:url(../images/block_bottom.png) no-repeat 50% top;
	width:100%; height:30px;
}

/* ------------ MAIN */
#main{
}
/* --------------- Header */
#topHeader{
   position:fixed;
   background:#222222;
   height:100px;
   width:100%;
}
#topContent{
	position:relative;
	margin:0 auto;
	width:960px;
}
.leftHead{
	text-align:center;
	position:relative;
	padding-top:10px;
	padding-left:20px;
	float:left;
}

.rightHead{
	position:relative;
	padding-top:20px;
	padding-right:20px;
	float:right;

}
/* ---Author */
#author{
	position:fixed;
	height:40px;
	width:100%;	
	bottom:0;
    left:0;
}
.author{
	position:relative;
	float:right;
	background:#222;
	padding:5px;
}
@media screen{
  body>div#author{
   position: fixed;
  }
}
 
/* ---Content */
#main .content{
	margin:0 auto;
	min-height:100%;
	width:960px;
}
#main .inside{
	width:880px;
	padding-top:150px;
	padding-left:40px;
}
.inside strong{ color:#999; font-size:12px; }/* theme file */




p,pre,ol,ul, dl{ 
    padding-bottom:20px;
     color:#CCCCCC; 
 }
li{ 
	list-style:outside; 
	margin-left:20px; 
}

ul.arrowList { 
	clear:both; 
	margin:0;
	margin-left:10px; 
	padding:0 0 20px 0; 
	color:#CCCCCC;
 }
 
ul.arrowList li { 
	background:url(../images/l2.png) no-repeat left 0.3em;
	padding-left:25px;
	list-style:none;
	margin-left:0px;
	line-height:22px;
	width:700px;
 }
 
ul.starlist { 
clear:both;
margin:0;
margin-left:10px;
padding:0 0 20px 0;
color:#CCCCCC; }

ul.starlist li { 
	background:url(../images/l1.png) no-repeat left 0.3em;
	padding-left:25px;
	list-style:none;
	margin-left:0px;
	line-height:22px;
	width:700px;
 }
 
ul.plusList { 
clear:both;
margin:0;
margin-left:10px;
padding:0 0 20px 0;
color:#CCCCCC; }

ul.plusList li { 
	background:url(../images/l3.png) no-repeat left 0.3em;
	padding-left:25px;
	list-style:none;
	margin-left:0px;
	line-height:22px;
	width:700px;
 }

ol li { list-style:decimal; margin-left:20px; }
dl dt { font-weight:bold; padding-bottom:10px; }
dl dd { padding-bottom:10px; margin-left:0px; }

.note{
	background:url(../images/pencil.png) no-repeat left 0.3em;
	color:#666;
	font:italic 14px/24px Georgia, "Times New Roman", Times, serif;
	padding:12px 0px 3px 32px;
}
.hint{
	background:url(../images/hint.png) no-repeat left 0.3em ;
	color:#666;
	font:italic 16px/26px Georgia, "Times New Roman", Times, serif;
	padding:12px 0px 3px 35px;
}
.section{
	margin:0;	
	margin-bottom:30px;
}
.section .title{
	width:880px;
	margin-bottom:10px;
	padding-bottom:1px;
	background:url(../images/underline_dotted.png) repeat-x left bottom;
}
.section .desc{
	margin-left:10px;
	width:860px;
}
.section .subSection{
	margin-bottom:25px;
	padding-bottom:5px;
	background:url(../images/ud.png) repeat-x left bottom;
}
.code{
	background-color:#FFC;
	padding:2px;
	border:#999 thin dotted;
	color:#333;
	width:auto;
	margin-bottom:5px;
}

.xmlCode{
	background:url(../images/xmls/xml.jpg) repeat-y #FFF;
    padding:2px;
	padding-left:45px;
	border:#999 thin dotted;
	font-size:10px;
	color:#006;
	width:500px;
	margin-bottom:5px;
}

#menu{
    font-size:18px;
    color:#FFF;
	font-family:'Myriad Pro', 'Myriad Pro Bold', Arial, Helvetica, Sans-serif;
	padding-left:40px;
	padding-top:60px;
	float:left;
}

.sf-menu {
	line-height: 100%;

	}
.sf-menu li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}


/* main level link */
.sf-menu a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px;
	margin: 0;

}

.sf-menu a:hover {
	color: #CCC;
}

/* main level link hover */
.sf-menu .current a, .current, .sf-menu li:hover > a {
	color: #0099CC;
}

/* sub levels link hover */
.sf-menu ul li:hover a, .sf-menu li:hover li a {
	border: none;
	color: #FFF;
}

.sf-menu ul a:hover {
	color: #0099CC !important;
}

/* dropdown */
.sf-menu li:hover > ul {
	display: block;
}

/* level 2 list */
.sf-menu ul {
	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	background:#222;
	color:#FFF;
	font-family:'Myriad Pro', 'Myriad Pro Bold', Arial, Helvetica, Sans-serif;
	font-size:14px;
}
.sf-menu ul li {
	float: none;
	margin: 0;
	padding: 0;
}

.sf-menu ul a {
	font-weight: normal;
}

/* level 3+ list */
.sf-menu ul ul {
	left: 181px;
	top: -3px;
}



/* clearfix */
.sf-menu:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.sf-menu {
	display: inline-block;
} 
html[xmlns] .sf-menu {
	display: block;
}
 
* html .sf-menu {
	height: 1%;
}

/*  */

#previewBoxs{
	width:800px;
	margin:30px;
	height:300px;	
}

.pb1{
	background-color:#222;
	float:left;
	height:100%;
	width:250px;
}
.pb2{
	
	background-color:#222;
	height:100%;
	float:left;
	margin-left:25px;
	width:250px;
}
.pb3{
	background-color:#222;
	float:right;
	width:250px;
	height:100%;
}

.pb1 p,.pb2 p, .pb3 p{
	background-color:#333;
	width:235px;
	color:#FFF;
	margin:5px;;
	padding:3px;
	text-decoration:none;
	font-size:10px;
	line-height:12px;
	min-height:60px;
}

.pb1 img,.pb2 img, .pb3 img{
	margin:5px;
}




#previewBoxs .pb1:hover,
#previewBoxs pb1:focus {
   background-color:#0099ff;
}


#previewBoxs .pb2:hover,
#previewBoxs pb2:focus {
   background-color:#FFCC00;
}


#previewBoxs .pb3:hover,
#previewBoxs pb3:focus {
   background-color:#FF0000;
}