body {
	height: 100%;	
	color: #000000;
	font-family: arial, sans-serif;
	margin: 0px auto; 
	padding: 0px;
	font-size: 11px;
	background: url(../images/body-gradient-orange.gif);
	background-attachment: scroll;
}



#container {
	 width:768px;
   	 margin:0px auto;
}


/* Header */



#header h1, #header p {
	margin: 0;
}

#header h1 {
	float: left;
	color: rgb(255,102,0);
	font-size: 30px;
}

#header p {
	float: left;
	padding: 17px 0 0 10px;
	font-size: 16px;
	font-weight: bold;
}

#header a {
	text-decoration: none;
	color: #F79F1A;
}



#banner{
	clear: both; 
	float: left;
	width: 770px;
	height: 300px;
	border: 0px;
        background: url(../images/banner.jpg);
	background-repeat:no-repeat;		

}

#bannerchinese{
	clear: both; 
	float: left;
	width: 770px;
	height: 300px;
	border: 0px;
        background: url(../images/learn-chinese.jpg);
	background-repeat:no-repeat;		

}


#bannerone {

}

/*----------------------------*/
/* Topbar */
/*----------------------------*/
#topbar {clear: both; font-family: verdana, arial, sans serif; font-size: 1.0em;}
#topbar ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(255,51,0); border-bottom: solid 1px rgb(255,51,0); background-color: rgb(255,102,0); font-weight: bold;}	
#topbar li {display: inline; list-style: none; margin: 0px; padding: 0px;}
#topbar li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(255,51,0); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
#topbar a:hover, .topbar a.selected {background-color: rgb(255,204,102);color: rgb(0,0,0); text-decoration: none;}
.buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255); font-size: 12px; color:rgb(153,0,0);}


/*----------------------------*/
/* Sidebar */
/*----------------------------*/
#sidebar {overflow: hidden; float: left; width: 160px; min-height: 500px; color: rgb(255,255,255); font-size:10px;}
#sidebar ul {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 0px rgb(255,204,102); background-color: rgb(255,153,51);}	
#sidebar ul h3 {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; border-top: solid 1px rgb(255,51,0); border-bottom: solid 1px rgb(255,51,0);background-color: rgb(255,102,0); color: rgb(0,0,0); text-transform: uppercase; font-weight: bold; font-size: 110%;}
#sidebar li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-right: solid 0px rgb(255,51,0); border-left: solid 1px rgb(255,51,0); color: rgb(0,0,0); text-decoration: none; font-size: 110%;}
#sidebar li a:hover, .sidebar li a.selected {border-left: solid 3px rgb(255,102,0);  background-color: rgb(255,204,102);color: rgb(0,0,0); text-decoration: none;}

/*----------------------------*/
/* Connet with us */
/*----------------------------*/
#social {padding:10px 0px 10px 0px;}
#social h3{padding:0px 0px 0px 0px; color:#000000;}

/*----------------------------*/
/* highlight */
/*----------------------------*/
#highlight {padding:0px 5px 0px 2px;}
#highlight p a{padding:0px 5px 0px 2px; color: rgb(204,51,0);text-decoration: underline;}
#highlight a:hover {background-color:rgb(255,204,102); color: rgb(0,0,0);}
#highlight h3{padding:0px 10px 0px 10px;}

/*----------------------------*/
/* Content */
/*----------------------------*/
.buffer {width: 770px; height:20px; border: solid 0px rgb(255,153,51);
border-bottom: solid 0px;}
.buffer p{padding-left:180px; padding-top:10px;color:#000000;}
.buffer a {color: rgb(204,51,0);text-decoration: underline;}
.buffer a:hover {background-color:rgb(255,204,102); color: rgb(0,0,0);}

#wrapper {
	width: 770px; 
	margin: -20px 0px 0px 0px;
	padding: 0px; 
	background: url(../images/background_layout_2.gif) top left repeat-y;
	border: solid 0px rgb(255,153,51);
        border-top: solid 0px;
}
#page {margin-top:20px; }
#content {float: right; width: 575px; min-height: 500px; padding-right: 15px; padding-left: 10px; color: rgb(0,0,0); font-family:verdana,arial,sans-serif; font-size: 120%;background-color: rgb(255,255,255);}
.emotion { text-align: center; color: rgb(231,51,51); font-weight: bold; font-size: 160%;}
#content a{color: rgb(204,51,0);text-decoration: underline;}
#content a:hover {background-color:rgb(255,204,102); color: rgb(0,0,0);}
#content img {border:0px;}
p {margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.5em;}


blockquote {
	margin: 15px;
	padding-top: 20px;
 	padding-left: 35px;
 	padding-right: 30px;
  	background: #fceab8 url(../images/quote.gif) no-repeat 5px 10px !important; 
	background-position: 8px 10px; 
	border: 1px solid #ff3300; 
}


/* Paragraphs */

h1 {margin: 1.0em 0px 0.5em 0px;  font-size: 140%;}
h2 {margin: 1.0em 0px 0.5em 0px; font-size:14px; color: #d83900;  font-family:Verdana; font-weight:normal;}
h3 {margin: 1.0em 0px 0.5em 0px;  font-size: 140%;}


/*--------------------*/
/* 6.3 - Footer Area  */
/*--------------------*/
#footer {
	width: 770px;
	
	margin-bottom: 20px;
	text-align: center;
	font-size: 12px;
	background-color: rgb(255,102,0);
	color: rgb(255,255,255);
}

#footer p {margin: 0px; padding: 0px; text-align: center; line-height: 1.3em; font-size: 110%;}
#footer p a{color: #ffffff;}
#footer p a:hover{background-color: rgb(255,204,102);color: rgb(0,0,0)}

ul#footnav {
  margin : 0;
  padding: 25px 25px 0px 25px;
}

ul#footnav li {
  display : inline;
}

ul#footnav li a {
padding : 0 5px;
color: #ffffff;
}

ul#footnav li a:hover {
background-color: rgb(255,204,102);color: rgb(0,0,0);
}

.loginform {width:160px;margin:0px 0px 0px 0px; border:solid 0px rgb(90,27,35); background-color:#cefe81;}
.loginform p {clear:both; margin:0; padding-left:5px;color:#000000;}
.loginform fieldset {width:140px; border:none;padding-left:5px;}
.loginform label.top {float:left; width:100px; margin:0 0 2px 5px; font-size:110%;}
.loginform label.right {float:left; width:100px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
.loginform input.field {width:145px; margin:0 0 5px 2px; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.loginform input.button {float:left; width:5.0em; margin:10px 0 5px 2px; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:#000000; font-size:110%;}
.loginform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);font-weight: bold;}
.loginform select.field {width:145px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform select.combo {width:145px; margin:0 0 4px 2px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform textarea.textarea{margin:0 0 4px 2px;}

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}