body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  margin:0px;
  background:#CB4412 url(../images/design/main_bg.jpg) repeat-x 0% 0%;
}

/* Default Styles */

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:16px;
}

h2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:14px;
}

a {color:#107C8D; text-decoration:underline;}
a:hover {color:#000; text-decoration:none;}

a img {
  border:0px;
}

/* End Default Styles */

#shell {
  margin-top:14px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:13px;
  width: 998px;
  position: relative;
  background:url(../images/design/shadow.png) no-repeat 0% 0%;  
}

#innershell  {
  width:970px;
  min-height:506px;
  height:auto;
  _height:506px;
  margin-left:auto;
  margin-right:auto;
  background:#FFFFFF;
}

#header {
  width:970px;
  height:158px;
  padding:1px 0 2px 0;
  background:url(../images/design/banner_top.jpg) repeat-x 0% 0%;
}

#logo {
  position:absolute;
  top:21px;
  left:412px;
  width:171px;
  height:179px;
  z-index:999;
}

*html #logo {
  position:absolute;
  top:21px;
  left:400px;
}

#name {
  float:left;
  width:451px;
  height:113px;
  margin:45px 0 0 0;
  background:url(../images/design/tuatuamai.jpg) no-repeat 0% 0%;
}

#name img {
  width:385px;
  height:50px;
  margin:34px 0 0 15px;
}

#banner {
  float:left;
  width:519px;
  height:113px;
  margin:45px 0 0 0;
  background:url(../images/design/banner.jpg) no-repeat 0% 0%;
}

#holder {
  width:970px;
  min-height:520px;
  height:auto;
  _height:520px;
  margin:0 0 13px 0;
  background:#FFFFFF url(../images/design/holder_bg.jpg) repeat-y 0% 0%;
}

#holder2 {
  width:970px;
  min-height:520px;
  height:auto;
  _height:520px;
  margin:0 0 13px 0;
  background:#FFFFFF url(../images/design/holder2_bg.jpg) repeat-y 0% 0%;
}

#innerholder {
  width:970px;
  background:url(../images/design/innerholder_bg.jpg) no-repeat 0% 0%;
}

#leftpanel {
  float:left;
  width:217px;
  padding:43px 0 0 10px;
  background:url(../images/design/leftpanel_bg.jpg) no-repeat 0% 0%;
}

/* Navigation */
#menu {
  width:212px;
  background:url(../images/design/menu_bg.png) repeat-y 0% 0%;
}

#vipmenuholder {
  width:212px;
  margin:10px 0 0 0px;
}

#vipmenu {
  width:205px;
  margin:0px;
  padding:40px 0 0 0;
  background:#33B6C0 url(../images/design/vipmenu-top.jpg) no-repeat 0% 0%;
}

#menutop {
  width:212px;
  height:14px;
  background:url(../images/design/menu_top.jpg) no-repeat 0% 0%;
}

#menubottom {
  width:212px;
  height:19px;
  background:url(../images/design/menu_bottom.jpg) no-repeat 0% 0%;
}

#vipmenuholder #menubottom {
  width:212px;
  height:19px;
  background:url(../images/design/menu_bottom2.jpg) no-repeat 0% 0%;
}

#nav, #nav ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
  width: 205px;
}

#nav li {
  margin:0px;
  padding:0px;
  position: relative;
  width:205px;
  text-decoration: none;
  list-style-type: none;
}

#nav .vip li {
  margin:0px;
  padding:0px;
  position: relative;
  width:205px;
  text-decoration: none;
  list-style-type: none;
}


#nav li ul {
  margin-top:-24px;
  margin-left:205px;
  padding: 0px;
  position: absolute;
  z-index: 995;
  left: -999em;
}

#nav li a {
  color: #000000;
  text-decoration: none;
  width: auto;
  margin: 0px;
  padding:5px 0 5px 20px;
  display: block;
}

#nav .vip a {
  color: #FFFFFF;
  text-decoration: none;
  width: auto;
  margin: 0px;
  padding:5px 0 5px 20px;
  display: block;
}

#nav li a:hover {
  color: #000000;
  text-decoration: none;
  width: auto;
  margin: 0px;
  background:url(../images/design/rollover.png) repeat-x 0% 0%;
  display: block;
}

#nav .vip a:hover {
  color: #000000;
  text-decoration: none;
  width: auto;
  margin: 0px;
  background:url(../images/design/rollover.png) repeat-x 0% 0%;
  display: block;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li  li.sfhover ul, #nav li li li.sfhover ul { left: auto }

#nav li:hover, #nav li.hover {
  position: static;
}


#subnav, #subnav ul {
  list-style-type: none;
  float:left;
  margin:0px;
  padding:0px;
  width:205px;
  background:#107C8D;	
}

#subnav li {
  margin:0px;
  padding:0px;
  position:relative;
  width:205px;
 	border:0px;
  background:#107C8D;	
	z-index: 995;
}

#subnav li a {
  color:#FFFFFF;
  text-decoration: none;
  margin:0px;
  padding:5px 0 5px 20px;
  display: block;
}

#subnav li a:hover {
  color: #FFFFFF;
  text-decoration:none;
  background:#4CBBC5;
  margin:0px;
  display: block;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul { color:#FFFFFF; left: -999em; }

/* End Navigation */

/* Featurebox */
.featurebox {
  width:212px;
  height:190px;
  margin:7px 0 0 0;
  background:url(../images/design/featurebox_top.png) no-repeat 0% 0%;
}

.featureheading {
  width:201px;
  height:37px;
  margin:2px 0 2px 2px;
  _margin:2px 0 0 2px;
}

.featureboxbody {
  width:201px;
  padding:0 9px 14px 2px;
  text-align:center;
  font-size:11px;
  color:#F36421;
  background:url(../images/design/featurebox_bottom.png) no-repeat 0% 100%;
}

*html .featureboxbody {
  padding:0 9px 10px 2px;
  background:url(../images/design/ie-featurebox_bottom.png) no-repeat bottom left;
}

.featureboxbody img {
  margin:0 0 3px 0;
}

.featureboxbody a {
  color:#F36421;
  font-weight:bold;
  font-size:12px;
  text-decoration:none;
}

.featureboxbody a:hover {
  color:#F36421;
  text-decoration:underline;
}

#registertolearn {
  width: 212px; 
  height:172px; 
  margin:7px 0 0 0;
}


/* End Featurebox */

/* Register */
#register {
  width:212px;
  margin:14px 0 10px 5px;
  color:#E2EFF1;
}

#register strong {color:#FFFFFF;}

#register label{
  display:none;
}

.newsinput {
  width:184px;
  margin:7px 0 0 0;
  padding:4px 0 4px 9px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  border-top:1px solid #60C0C9;
  border-right:1px solid #9BD7DD;
  border-bottom:1px solid #9BD7DD;
  border-left:1px solid #60C0C9;
  background:#60C0C9;
}

.registerbttn {
  width:84px;
  height:22px;
  margin:12px 0 0 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
  border:0px;
  background:url(../images/design/register_bttn.jpg) no-repeat 0% 0%;
}
/* End Register */

#middlepanel {
  float:left;
  width:516px;
  margin:43px 0 0 0;
  position:relative;
  background:url(../images/design/middlepanel_bg.jpg) no-repeat 0% 0%;
}

#insidemiddlepanel {
  float:left;
  width:743px;
  margin:43px 0 0 0;
  position:relative;
  background:url(../images/design/insidemiddlepanel_bg.jpg) no-repeat 0% 0%;
}

#listen {
  position:relative;
  width:119px;
  height:45px;
  margin:-115px 0 0 15px;
  #margin:-115px 0 0 -350px;
  background:url(../images/design/listen_bttn.jpg) no-repeat 0% 0%;
  z-index:550;
}

.filename {
  float:left;
  margin:10px 10px 0 86px;
  color:#FFFFFF;
  z-index:520;
}

*html .filename {
 position:absolute;
 top:0;
 left:45px;
 float:left;
 margin:10px 10px 0 43px;
  color:#FFFFFF;
}

#listen2 {
  float:left;
  width:120px;
  height:45px;
  display:block;
  color:transparent;
  background:url(../images/design/listen_bttn.jpg) no-repeat 0% 0%;
  position:relative;
}

*html #listen2 .filename{
  position:absolute;
  top:0px;
  left:80px;
  margin:10px 10px 0 6px;
  color:#FFFFFF;
}

#content {
  width:500px;
  margin:50px 0 0 8px;
  text-align:center;
}

#longcontent {
  width:724px;
  margin:36px 0 0 8px;
}

#longcontent h1 {
  padding:0 0 0 70px;
}

#makesmall {
  width:571px;
  margin:0 0 0 8px;
  padding:0 0 0 65px;
}

#fitit {
  width:600px;
  margin:0 0 0 57px;
}

#insidecontent {
  width:573px;
  margin:36px 0 0 8px;
  padding:0 70px 0 80px;
}

/* Boxs */
#box {
  width:490px;
  margin:10px 0 0 0;
  background:url(../images/design/box_bg.png) no-repeat 0% 0%;
}

#boxbody {
  width:480px;
  margin:0;
  padding:13px 0 0 9px;
}

#boxbottom {
  width:490px;
  height:14px;
  background:#FFFFFF url(../images/design/box_bottom.png) no-repeat 0% 100%;
}

#randhead {
  margin:8px 0 0 -3px;
}

.randomboxs {
  float:left;
  width:155px;
  text-align:center;
}

.randomboxs img {
  margin:0 0 6px 0;
}

.randomboxs a {
  color:#F36421;
  font-weight:bold;
  text-decoration:none;
}

.randomboxs a:hover {
  color:#F36421;
  text-decoration:underline;
}

/* End Boxs */

#rightpanel {
  float:left;
  width:216px;
  margin:38px 0 0 0;
  padding:0 0 0 11px;
}

/* Login */
#login {
  width:206px;
  height:187px;
  margin:0 0 0 -11px;
  padding:13px 0 0 21px;
  color:#E2EFF1;
  background:url(../images/design/login_bg.jpg) repeat-x 0% 0%;
}

#loginform {
  margin:5px 0 12px 0;
}

#login strong{
  color:#FFFFFF;
}

#loginform label{
  display:none;
}

.logininput {
  width:175px;
  margin:7px 0 0 -1px;
  padding:4px 0 5px 9px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  border-top:1px solid #107C8D;
  border-right:1px solid #9BD7DD;
  border-bottom:1px solid #9BD7DD;
  border-left:1px solid #107C8D;
  background:#60C0C9;
}

.loginbttn {
  width:64px;
  height:22px;
  margin:12px 0 0 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
  border:0px;
  background:url(../images/design/login_bttn.jpg) no-repeat 0% 0%;
}

#login a {
  color:#E2EFF1;
  text-dcoration:none;
}

#login a:hover {
  color:#E2EFF1;
  text-dcoration:underline;
}

.forgotpass {
  margin:50px 0 0 0;
}
/* End Login */

#footer {
  width:970px;
  height:83px;
  background:url(../images/design/footer_bg.jpg) repeat-x 0% 0%;
}

#rights {
  width:970px;
  padding:62px 0 0 0;
  color:#8F8F8F;
  text-align:center;
}

#rights a {
  color:#8F8F8F;
  text-decoration:none;
}

#rights a:hover {
  color:#8F8F8F;
  text-decoration:underline;
}

/* Village Box */
#villagebox {
  width:636px;
  margin:90px 0 0 40px;
  background:#EAF3E3 url(../images/design/villagebox_top.jpg) no-repeat 0% 0%;
}

#villageheading {
  width:636px;
  height:72px;
  margin:65px 0 20px 40px;
  background:#EAF3E3 url(../images/design/villagebox_top.jpg) no-repeat 0% 0%;
}

#villageheading h1 {
  float:left;
  margin:0px;
  padding:0px;
  color:#FFFFFF;
  text-transform:uppercase;
}

#goback {
  float:right;
  margin:6px 10px 0 0;
  color:#FFFFFF;
  font-weight:bold;
}

#goback a {
  color:#FFFFFF;
  text-decoration:none;
}

#goback a:hover {
  color:#FFFFFF;
  text-decoration:underline;
}

#villagelist {
  width:594px;
  padding:28px 0 0 21px;
}

#villagelist a {
  color:#FFFFFF;
  text-decoration:none;
}

#villagelist a:hover {
  color:#FFFFFF;
  text-decoration:none;
}


#colorbox {
  width:603px;
  height:25px;
  margin:0 0 30px 0;
  padding:7px 0 0 33px;
  position:relative;
  top:20px;
}

#villagebox h1 {
  margin:0px;
  padding:0px;
  color:#FFFFFF;
  text-transform:uppercase;
}

#montage {
  float:left;
  width:381px;
  height:186px;
  margin:0 21px 19px 0;
}

#villagegallery {
  float:right;
  width:192px;
  height:186px;
  font-size:14px;
  font-weight:bold;
  color:#FFFFFF;
  text-align:center;
  background:#107C8D;
}

#villagegallery img {
  margin:6px 0 14px 0;
  border:1px solid #FBE672;
}

#villagemyths {
  width:579px;
  min-height:45px;
  height:auto;
  _height:45px;
  margin:0 0 3px 0;
  padding:15px 0 0 15px;
  color:#FEE873;
  background:#719654 url(../images/design/click2.jpg) no-repeat 100% 100%;
}

#villagemyths h2 {
  margin:0px;
  padding:0px;
  font-size:14px;
  color:#FFFFFF;
  text-transform:uppercase;
}

#villagesongs {
  width:579px;
  min-height:45px;
  height:auto;
  _height:45px;
  margin:0 0 3px 0;
  padding:15px 0 0 15px;
  color:#FEE873;
  background:#F36421 url(../images/design/click3.jpg) no-repeat 100% 100%;
}

#villagesongs h2 {
  margin:0px;
  padding:0px;
  font-size:14px;
  color:#FEE873;
  text-transform:uppercase;
}

#villagebackground {
  width:579px;
  min-height:45px;
  height:auto;
  _height:45px;
  margin:0 0 3px 0;
  padding:15px 0 0 15px;
  color:#FEE873;
  background:#166693 url(../images/design/click1.jpg) no-repeat 100% 100%;
}

#villagebackground h2 {
  margin:0px;
  padding:0px;
  font-size:14px;
  color:#FEE873;
  text-transform:uppercase;
}

.click {
  float:right;
  margin:-46px 0 0 0;
}

.click img {
  width:193px;
  height:60px;
}

#back2map {
  width:594px;
  height:115px;
  margin:20px 0 0 20px;
  text-align:right;
  background:#FFFFFF;
}

#villageboxbottom {
  width:636px;
  height:9px;
  background:url(../images/design/villagebox_bottom.jpg) no-repeat 0% 100%;
}

/* End Village Box */

/* Myths and Legends */
.mythholder {
  margin:0 0 10px 0;
  padding:6px 6px 30px 6px;
  background:url(../images/design/border.gif) no-repeat 0% 100%;
}

.moveleft {
  width:565px;
  display:block;
}

.moveleft #listen2 {
  margin:0 0 0 420px;
}

*html .moveleft #listen2 {
  margin:0 0 0 210px;
}
/* End Myths and Legends */

/* Songs */
.songholder {
  margin:0 0 15px 0;
  padding:0 0 30px 0;
  background:url(../images/design/border.gif) no-repeat 0% 100%;
}

.lyricsArea {
  width:635px;
  height:200px;
  margin:10px 0 0 0;
  overflow:auto;
  scrollbar-face-color: #FFFFFF;
  scrollbar-highlight-color: #F6F6F6;
  scrollbar-shadow-color: #999999;
  scrollbar-3dlight-color:transparent;
  scrollbar-arrow-color: #555555;
  scrollbar-track-color: #F6F6F6;
  scrollbar-darkshadow-color: #FFFFFF;
}

.closeit {
  display:none;
}

/* End Songs */

/* Families */
.familiesholder {
  float:left;
  width:180px;
  height:100px;
  margin:0 10px 10px 0;
  padding:6px;
  border:1px solid #8F8F8F;
}
/* End Families */

/* Gallery/Video */
.galleryitem {
  float:left;
  margin:0 5px 5px 0;
  padding:4px;
  background:#CBE4E1;
}

.galleryitem a img {
  border:0px;
}

.picgalleryitem {
  float:left;
  margin:0 10px 10px 0;
  padding:4px 4px 3px 4px;
}

.picgalleryitem img {
  border:1px solid #FBE672;
}
/* End Gallery/Video */

/* Login Css */
#secure {width:350px;}
#secure p {text-align:left;}
.securelabel{float:left; padding-top: 4px; width: 90px;}
.logininputfield {
  float:left;
  width:180px;
  padding:2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  border:1px solid #117C8E;
  background:url(../images/design/reg-gradient.jpg) repeat-x 0% 0%;
}

.securebttn {
  margin:10px 0 0 90px;
  padding:2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
  border:1px solid #117C8E;
  background:url(../images/design/reg-gradient.jpg) repeat-x 0% 0%;
}
/* End Login Css*/

/********************************* LiveValidation *************************************/

.learningbox {
  margin:0 0 10px 0;
  padding:0 0 40px 0;
  background:url(../images/design/border.gif) no-repeat 0% 100%;
}

.learningbox h3 {
  margin:0px;
  padding:0px;
  font-size:14px;
  font-weight:bold;
}

.test {
  text-indent:-999px;
}

.close {
  width:100px;
  padding:10px 0 0 0; 
  cursor:pointer
}

.liveinput{
  float:left;
  width:150px;
  margin-top:2px;
  padding:2px;
  border:1px solid #aaaaaa;
  background:#FFFFFF url(../images/design/inputBg.gif) top left no-repeat;
}

.liveinput2{
  float:left;
  margin:2px 0 0 10px;
  border:1px solid #aaaaaa;
  background:#FFFFFF url(../images/design/inputBg.gif) top left no-repeat;
}

.LV_valid {
  color:#00CC00;
  background:url(../images/design/tick.png) no-repeat 0% 50%;
}
	
.LV_invalid {
	color:#CC0000;
	background:url(../images/design/cross.png) no-repeat 0% 50%;
}
	
.LV_validation_message{
  float:right;
    height:16px;
    width:280px;
    font-weight:bold;
    margin:0 0 0 5px;
    padding:4px 0 0 16px;
}
 
  
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
    /*border: 1px solid #00CC00;*/
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
    border: 1px solid #CC0000;
}

/********************************* LiveValidation *************************************/

/* Registration Form */

#mainerror {
  font-weight:bold;
  color:#117C8E;
}

.e {
  float:left;
  margin:0 0 0 15px;
  padding:4px 0 0 0;
  font-weight:bold;
  color:#117C8E;
}

#regform2 .label {
  float:left;
  width:130px;
  padding:4px 0 0 0;
}

.regfield {
  float:left;
}

.reginput {
  width:180px;
  padding:2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  border:1px solid #117C8E;
  background:url(../images/design/reg-gradient.jpg) repeat-x 0% 0%;
}

.regformbttn {
  margin:10px 0 0 0;
  padding:2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
  border:1px solid #117C8E;
  background:url(../images/design/reg-gradient.jpg) repeat-x 0% 0%;
}

/* End Registration Form */

.nothing {
  clear:both;
  margin:0px;
  padding:0px;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */