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

/* Default Styles */

h1 {
  margin:0 0 12px 0;
  padding:0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#004892;
}

h2 {
  margin:0 0 5px 0;
  padding:0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#004892;
}

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

a img {
  border:0px;
}

/* End Default Styles */

#shell {
  margin-left:auto;
  margin-right:auto;
  background:url(../images/design/sand.png) no-repeat 50% 0%;
}

#innershell {
  width:968px;
  margin-left:auto;
  margin-right:auto;
}

#header {
  width:968px;
  height:221px;
  background:url(../images/design/banner.jpg) no-repeat 0% 0%;
}

#logo {
  padding:19px 0 0 352px;
  width:583px;
  height:96px;
}

/* Navigation */
#menu {
  float:right;
  width:776px;
  height:30px;
  margin:20px 21px 0 0;
}

#nav, #nav ul {
  list-style-type: none;
  margin:0 0 0 0;
  padding: 0px;
  /*width: 159px;*/
  font-size:1.0em;
  display:inline;
}

#nav li {
  float: left;
  margin:0px;
  padding: 0px;
  position: relative;
  text-decoration: none;
  list-style-type: none;
  background:url(../images/design/divider.png) no-repeat 100% 0%;
}

*html #nav li {
  background:url(../images/design/divider.jpg) no-repeat 100% 100%;
}

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

#nav li a {
  width: auto;
  margin: 0px;
  padding: 9px 15px 6px 6px;
  color: #2D6111;
  font-weight:bold;
  text-decoration: none;
  display: block;
}

#nav li a:hover {
  width: auto;
  margin: 0px;
  color: #679B9B;
  text-decoration: none;
  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:0 0 0 0;
  padding: 0px;
  width: 169px;
}

#subnav li {
  color: #000000;
  margin-top: 0px;
  margin-left: 1px;
  padding: 0px;
  position: relative;
  width: 144px;
  background:#FFFFFF url(../images/design/spacer.gif) no-repeat 0% 0%;
	border:0px;
}


#subnav li a {
  color: #2D6111;
  text-decoration: none;
  margin: 0px;
  display: block;
  height:19px;
  padding:2px 0 0 8px;
  font-size:1.0em;
  border:0px;
}

#subnav li a:hover {
  color: #679B9B;
  background:url(../images/design/spacer.gif) repeat-x 50%;
  margin: 0px;
  padding:2px 0 0 8px;
  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:#000000; left: -999em; }

/* End Navigation */

#pattern {
  width:968px;
  height:56px;
  background:url(../images/design/pattern.jpg) repeat-x 0% 0%;
}

#holder {
  width:968px;
  margin:6px 0 0 0;
  background:#FFFFFF url(../images/design/holder_bg.jpg) no-repeat 50% 0%;
}

#leftpanel {
  float:left;
  width:220px;
  margin:46px 0 0 0;
}

#insideleftpanel {
  float:left;
  width:113px;
  margin:46px 0 0 0;
}

/* Login */
#login {
  width:206px;
  height:160px;
  margin:0px;
  padding:0 0 0 16px;
  color:#2C311A;
}

#login2 {
  width:205px;
  height:226px;
  margin:0px;
  color:#2C311A;
  background: url(../images/design/logintolearntokelau2.png) no-repeat;
}

*html #login2 {
  background: url(../images/design/logintolearntokelau2.jpg) no-repeat;
}


#login2content { padding: 60px 20px 20px 20px; }

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

#login strong{
  font-size:12px;
  color:#004892;
}

#loginform label{
  display:none;
}

.logininput {
  width:150px;
  margin:7px 0 0 0;
  padding:4px 0 5px 9px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  border-top:1px solid #E9E4D7;
  border-right:1px solid #FFFFFF;
  border-bottom:1px solid #FFFFFF;
  border-left:1px solid #E9E4D7;
  background:#FCF8EF;
}

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

#login a {
  color:#2C311A;
  text-decoration:none;
}

#login a:hover {
  color:#2C311A;
  text-decoration:underline;
}

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

#explore {
  margin:10px 0 20px 8px;
}

/* Register */
#register {
  width:206px;
  height:160px;
  margin:0px;
  padding:13px 0 0 16px;
  color:#2C311A;
}

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

#register strong{
  font-size:12px;
  color:#004892;
}

#registernewsletter label{
  display:none;
}

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

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



#register2 {
  width:205px;
  height:320px;
  margin:0px;
  color:#2C311A;
  background: url(../images/design/registerforupdates2.png) no-repeat;
}

*html #register2 {
  background: url(../images/design/registerforupdates2.jpg) no-repeat;
}

#register2content { padding: 60px 20px 20px 20px; }


#register2learn {
  width:205px;
  height:55px;
  margin:0 0 0 10px;
}

#middlepanel {
  float:left;
  width:512px;
  margin:46px 0 0 0;
  padding:0 4px 0 8px;
  _padding:0 0px 0 0px;
  background:url(../images/design/content_bg.jpg) no-repeat 50% 5%;
}

#insidemiddlepanel {
  float:left;
  width:720px;
  margin:46px 0 0 0;
  padding:0 4px 0 8px;
  _padding:0 0px 0 0px;
  background:url(../images/design/content_bg.jpg) no-repeat 50% 20%;
}

#authmiddlepanel {
  float:left;
  width:720px;
  margin:0px;
  padding:46px 4px 0 8px;
  _padding:46px 4px 0 8px;
  background:url(../images/design/content_bg.jpg) no-repeat 50% 20%;
}

#insidemiddlepanel2 {
  float:left;
  width:680px;
  margin:46px 0 0 0;
  padding:0 4px 0 48px;
  _padding:0 0px 0 40px;
  background:url(../images/design/content_bg.jpg) no-repeat 50% 20%;
}

#content {
  min-height:450px;
  height:auto;
  _min-height:450px;
  margin-left:auto;
  margin-right:auto;
}

#insidemiddlepanel2 #content {
  width:636px;
}

#listen {
  float:right;
  width:117px;
  height:51px;
  margin:-40px 0 0 -10px;
  background:url(../images/design/listen.jpg) no-repeat 0% 0%;
}

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

*html .filename {
  float:left;
  margin:20px 10px 0 40px;
  color:#FFFFFF;
  z-index:520;
}

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

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

#flash {
  margin:35px 0 19px 2px;
}

#rightpanel {
  float:left;
  width:220px;
  margin:46px 0 0 0;
}

#videos {
  width:205px;
  margin:0 0 0 8px;
  text-align:center;
}

#boxes {
  width:205px;
  height:533px;
  margin:4px 0 0 8px;
  background:url(../images/design/box_bg.jpg) no-repeat 50% 0%;
}

.box {
  width:205px;
  margin:3px 0 0 0;
}

.box img {
  margin:0px;
}

.box a img {
  margin:0 0 0 15px;
}

#footer {
  width:968px;
  height:159px;
  color:#575757;
  text-align:center;
  background:url(../images/design/footer_bg.jpg) no-repeat 0% 0%;
}

#rights {
  padding:128px 0 0 0;
}

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

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

/* Village Box */
#insidemiddlepanel #villagebox {
  margin:30px 0 0 40px;
}

#villagebox {
  width:636px;
  margin:30px 0 0 0px;
  background:#F9F7E6 url(../images/design/villagebox_top.jpg) no-repeat 0% 0%;
}

#villageheading {
  width:636px;
  height:72px;
  margin:0 0 20px 0px;
  background:#F9F7E6 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:#133456;
}

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

#villagemyths {
  width:579px;
  min-height:45px;
  height:auto;
  _height:45px;
  margin:0 0 3px 0;
  padding:15px 0 0 15px;
  color:#FEE873;
  background:#49A9BF 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:#609BDF 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:#024A94 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:95px;
  margin:40px 0 0 20px;
  text-align:center;
}

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

/* End Village Box */

/* 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;
}

#fitit {
  width:613px;
  margin:0 0 0 23px;
}
/* End Gallery/Video */

/* Myths and Legends */
.mythholder {
  margin:0 0 10px 0;
  padding:6px 6px 30px 6px;
  background:url(../images/design/border.jpg) 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.jpg) 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 */

/* Login Css */
#secure {width:350px;}
#secure p {text-align:left;}
.securelabel{float:left; padding-top: 4px; width: 90px;}

.loginnamefield {
  float:left;
  width:100px;
  margin:0 5px 0 0;
  padding:3px 0 0 0;
}

.logininputfield {
  float:left;
  width:180px;
  padding:2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000000;
  border:1px solid #000;
  background:#FCF8EF;
}

.loginnamefield label {
  display:none;
}

.securebttn {
  margin:10px 0 0 105px;
  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 {
  width:700px;
  margin:0 0 10px 0;
  padding:0 0 40px 0;
  background:url(../images/design/border.jpg) no-repeat 0% 100%;
}

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

.learningbox2 {
  width:700px;
  margin:0 0 10px 0;
  padding:0 0 40px 0;
  background:url(../images/design/border.png) no-repeat 0% 70px;
}

.learningbox2 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 */



.learningcategory { float: left; width: 700px; height: 60px; margin-bottom: 3px; background: url(../images/design/fboxpattern.png) repeat-x; }
.learningcategory a { text-decoration: none; color: #FEE873; width: 700px; height: 60px; display: block; }
.learningcategory a:hover { text-decoration: none; color: #FFF; width: 700px; height: 60px; display: block; }
.learningboxname { cursor: pointer; font-size: 16px; font-weight: bold; float: left; padding: 20px; display: inline; }
.learningboxclick { cursor: pointer; font-size: 16px; font-weight: bold; float: right; padding: 20px; display: inline; }