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

/*
	 Organic Tabs
	 by Chris Coyier
	 http://css-tricks.com
*/
body{
	font-family: Segoe UI,Arial,Helvetica,sans-serif;

}
body {
	margin:0;
	font-family: Segoe UI;
	font-size:13px;
	line-height:18px;;
	color:#fff;
	background-image: url(../img/bg.jpg);
	background-repeat:no-repeat;
	background-color:#000;
	background-position:top center; 
}
p {color:#fff; }
* { margin: 0; padding: 0; }

html { overflow-y: scroll; }

.banner{
width:100%;
text-align:center;
height:531px;
}


/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */

#example-one { padding: 0px; margin: 0 0 0px 0; }

/*#example-one .nav { overflow: hidden; }
#example-one .nav li { 
display:table;
float:left;
width:31.335%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box
 }
#example-one .nav li { width: 252px; float: left; margin: 0 14.5px 0 0; }
#example-one .nav li.last { margin-right: 0; }*/

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 188px; float: left; margin: 0 16px 0 0; }
#example-one .nav li.last { margin-right: 0; }
	
#example-one .nav li a { 
display: block; 
padding: 8px; 
background: #424242; /*tab bg color */
color: white; 
font-size: 18px; 
font-family: Segoe Light; 
line-height: 1.2; 
height: 178px;
}
#example-one .nav li.nav-one a:hover { background-color: #00849d; }
#example-one .nav li.nav-two a:hover { background-color: #ba1d48; }
#example-one .nav li.nav-three a:hover { background-color: #d34827; }
#example-one .nav li.nav-four a:hover { background-color: #64be46; }

#example-one ul { list-style: none; margin: -15px 0px 0px 0; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #fff; } /*table row setting*/

#example-one ul li:last-child a { border: none; }

#example-one ul li.nav-one a.current, #example-one ul.featured li a:hover { background-color: #00849d; color: white; border: none; text-decoration:none; font-weight:bold; }
#example-one ul li.nav-two a.current, #example-one ul.core li a:hover { background-color: #ba1d48; color: white;  border: none; text-decoration:none; font-weight:bold;}
#example-one ul li.nav-three a.current, #example-one ul.jquerytuts li a:hover { background-color: #d34827; color: white; text-decoration:none; font-weight:bold; }
#example-one ul li.nav-four a.current, #example-one ul.jquerytuts li a:hover { background-color: #64be46; color: white; text-decoration:none; font-weight:bold; }
.a_none{text-decoration:none; font-weight:bold;}



/* Specific to example two */
.list-wrap {  padding: 0px;  }
#example-two .list-wrap { padding: 0px; }

#example-two ul { list-style: none;  margin: -10px 0px 0px 0; }
#example-two ul li a { display: block; border-bottom: 1px solid #ccc; padding: 4px; color: #fff; }
#example-two ul li a:hover { background: #333; color: white; }
#example-two ul li:last-child a { border: none; }

#example-two .nav { overflow: hidden; }
#example-two .nav li { width: 100%; float: left; margin: -30px 0px 0 0; }
#example-two .nav li.last { margin-right: 0; }
#example-two .nav li a { display: block; padding: 5px; background: #666; color: white; font-size: 10px; text-align: center; border: 0; }

#example-two li a.current,#example-two li a.current:hover { background-color: #eee !important; color: black; }
#example-two .nav li a:hover, #example-two .nav li a:focus { background: #999;}



/********************************************
               Font style
********************************************/
.tit1{ font-size:28px; line-height:28px;  color:#FFCC00;}
.tit2{ font-size:18px; line-height:24px;  color:#fff;}
.tit3 {
color:#FFFFFF;
font-size:20px;
font-family: Segoe UI;
line-height:20px;
}
.tit5 {
font-style:italic;
color:#01d7ff;
font-size:20px;
font-family: Segoe UI;
line-height:50px;
}
.tit6{
font-style:italic;
color:#FFFFFF;
font-size:14px;
font-family: Segoe UI;
line-height:18px;
}

.tit7 {
	font-size: 14px;
	font-style: italic;
	color: #FFCC00;
}

.tit8 {
	font-size: 14px;
	font-style: italic;
	color: #999999;
}

.tit9 {
color:#01d7ff;
font-size:14px;
font-family: Segoe UI;
font-weight:bold;
}

/********************************************
               Table style
********************************************/
.tb_blue{width:800px; height:24px; background-color:#00849D; color:#fff; font-size:20px; padding:5px; text-align:left;}
.tb_pink{width:800px; height:24px; background-color:#ba1d48; color:#fff; font-size:14px; margin:5px; text-align:center;}
.tb_orange{width:799px; height:24px; background-color:#d34827; color:#fff; font-size:14px; margin:5px; text-align:center;}
.tb_green{width:800px; height:24px; background-color:#64be46; color:#fff; font-size:20px; padding:5px; text-align:left;}
.tb_bios{width:25%}
.tb1{height:35px;}
.tb2{width:352px;}
.tb6{height:46px; vertical-align:middle; text-align:center;}

/***************spec*****************/
.spec{ padding:0px; margin:0 0 0px 0; border-collapse: collapse; width:100%;}
.tb_3{width:10%; color:#fff; text-align:center; background-color:#666; border-bottom:solid 1px #000; border-right:solid 1px #000;}
.tb_4{width:30%; color:#fff; padding:3px; text-indent:15px; background-color:#888; border-bottom:solid 1px #000;}
.tb_5{width:20%; text-align:center; color:#fff; border-bottom:solid 1px #777; border-left:solid 1px #777;}
a{color:#000;}
.tb_4:hover{color:#000;}
tr.over td {color:#000; background-color:#FFCC00;}
.tb_6{width:20%; color:#fff; text-align:left; background-color:#666; border-bottom:solid 1px #000; border-right:solid 1px #000; padding-left:10px;}
.tb_6:hover{color:#000; background-color:#FFCC00;}



.col1{
width:35px;
}
.col2{ text-align:left;}



/********************************************
               Table style
********************************************/

pre{
	display:block;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:800px;
}

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}