﻿body 
{
  background-image: url('../images/bg.png'); 
    background-repeat: repeat;     
	margin: 0px;
	/*font-size: 9pt;*/
	color:#000;
	/*font-family: Tahoma; "Lucida Sans Unicode", */
	font:12px/1.7  Verdana, Tahoma, Helvetica, sans-serif;
    background-attachment: fixed;
}

#menubar {
    width: 100%;
    height: 50px;
    background-image: url('../images/menubar.png');
    background-repeat: repeat-x;
    color: ghostwhite;
    background-attachment: fixed;
    margin: 0 auto;
}
#menubar2 {
    width: 100%;
    height: 70px;
    background-color: darkgreen;
    background-attachment: fixed;
    margin: 0 auto;
}

#menubar2 .submenu {
    width: 95%;
    color: gold;
    height: 70px;
    margin:0px auto;
    
}

#menubar2 .submenu .logo {
    width: 95px;
    height: 50px;
    position: relative;
    top: 10px;
    left: 10px;
    float: left;
    background-image: url('../images/tco4.png');
}
#menubar2 .ThreeDText
{
    font: normal 12pt Anklepants Regular;
    color: ghostwhite;
    position: relative;
    top: 2px;
    left: -25px;
    text-align: center;
    text-transform: uppercase;
    
}
#menubar2 .ThreeDLogo {
     font: normal 30pt Anklepants Regular;
     color: #fff;   
    position: relative;
    top: 2px;
    left: -30px;   
    text-align: center;
    text-transform: uppercase;
    
}

#wrapper {
    margin:0px auto;
    /*width: 95%; */
    overflow: hidden;
    background-color: #fff;
    height: auto;
}
 #header {
     height: 300px;
     width: 100%;
     position: relative;
     top: 0px;
     
    /* border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     
      -moz-border-top-left-radius: 10px;
     -moz-border-top-right-radius: 10px;
      -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px; */
   
 }
 #header img {
    
     height: 300px;
 }
 
 #newsbar {
     background-color:#fff;
     width: 100%;
     
     vertical-align: middle;
         
 }
 #messageSection {
     height: 200px;
     width: 100%;     
     margin: 0 auto;
     float: left;
     background-color: #fff;
    
 }
 
 #messageSection .subsections 
 {
     position: relative;
     top: 8px;
     margin: 0 auto;
     width: 31.6%;
     height: 180px;
     float: left;
     border: 1px solid #D6CEB8;
     background-image: url('../images/bg.png');
     background-repeat: repeat;
      border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     
 }
 #messageSection .subsections .tabheader {
     position: relative;
     top: 4px;
     left: 4px;
     right: 3px;
     height: 30px;
     background-color: darkgreen;
    background-image: -webkit-linear-gradient(#91dd70, #55ae2e);
    background-image: linear-gradient(darkgreen, #55ae2e);
    border: 1px solid #5aad35;
     width: 97.7%;
     color: #fff;
     border:1px outset green;
     text-transform: uppercase;

     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     
     -moz-border-top-left-radius: 10px;
     -moz-border-top-right-radius: 10px;
     
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
     
 }
  #messageSection .subsections .tabbody {
     position: relative;
     top: 4px;
     left: 4px;
     right: 3px;
      height: auto;
      width: 98%;
      float: left;
      padding-bottom: 5px;
          
 }
 
 #messageSection .subsections .tabbody img {
     position: relative;
     top: 3px;
     float: left;
     width: 90px;
     height: 100px;
 }
 #messageSection .sp {
     width:12px;
     height: auto;
     float: left;
 }
 
  #content {
     height: auto;
     width: 99%;     
     margin: 0 auto;
     background-color: #fff;
 }
 #content #leftcolumn {
     width: 18%;
     height: auto;
     position: relative;
     left: 1px;
     float: left;
 }
 #content #centercolumn {
     width: 64%;
     height: auto;
     float: left;
 }
 #content #rightcolumn {
     width: 18%;
     height: auto;
     position: relative;
     right: -4px;
     float: left;
 }
 
  #content #centercolumnreg {
     width: 77%;
     height: auto;
     float: left;
 }
 #content #rightcolumnreg {
     width: 23%;
     height: auto;
     position: relative;
     right: -4px;
     float: left;
 }
 
 .smalltab {
     width: 97.9%;
     border: 1px solid #D6CEB8;
     background-image: url('../images/bg.png');
     background-repeat: repeat;
      border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     min-height: 250px;
 }
 .smalltab .tabheader {
      position: relative;
    top: 4px;
    left: 4px;
    right: 5px;
    height: 30px;
    background-color: darkgreen;
    background-image: -webkit-linear-gradient(#91dd70, #55ae2e);
    background-image: linear-gradient(darkgreen, #55ae2e);
    border: 1px solid #5aad35;
    /* background-color: darkgreen; */
    width: 96.7%;
    color: #fff;
    border: 1px outset green;
    text-transform: uppercase;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
 }
 .smalltab .tabbody 
 {
      position: relative;
     top: 4px;
     left: -21px;
     right: 21px;
     width: 98%;
     
 }
 
 .largetab {
     width: 100%;
     height: auto;
     border: 1px solid #D6CEB8;
     background-image: url('../images/bg.png');
     background-repeat: repeat;
       border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
    
 }
 .largetab .tabheader {
      position: relative;
     top: 4px;
     left: 4px;
     right: 5px;
     height: 30px;
      background-color: darkgreen;
    background-image: -webkit-linear-gradient(#91dd70, #55ae2e);
    background-image: linear-gradient(darkgreen, #55ae2e);
    border: 1px solid #5aad35;
     width: 98.5%;
     color: #fff;
     border:1px outset green;
     text-transform: uppercase;
       border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     
     -moz-border-top-left-radius: 10px;
     -moz-border-top-right-radius: 10px;
     
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
 }
 .largetab .tabbody 
 {
      position: relative;
     top: 4px;
     left: 4px;
     right: 3px;
     height: auto;
     width: 98%;
     
 }
 .space {
     height: 1px;
 }
 h2 {
     color: darkgreen;
     text-transform: uppercase;
 }
 /*---------------- Horizontal menu tab----------------------*/
/* style the outer div to give it width */
.menu 
{
    font-size:16pt;padding:0px; margin:0px auto; width:100%;    
    position: relative;top: 0px; 
  }

/* remove all the bullets, bo10ders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;height:50px;background: transparent; }
/*  background:#267cb2 #0066CC*/
/* style the sub-level lists */
.menu ul ul {width: auto;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li 
{
    float:left;height:50px;
    line-height:50px;
    width: auto;
    position: relative;
    left: 10px;
    text-align: center;
 }

/* style the links for the top level */
.menu a {
    display: block;
    width: 135px;
    float: left;
    border-left: 1px solid silver;
    height: 100%;
    font-size: 14px;
    /* text-decoration: none; */
    color: silver;
    /* background: transparent; */
    /* text-transform: uppercase; */
    /* font-weight: bold; */
}

.menu a.last {
      border-right: 1px solid silver;
}
.menu a:active { color:#fff;}
.menu a:hover { color:#fff; background-image:url('../images/menuOver.png');}
.menu a span {position: relative;left:0px;}
.menu a.current {background-image:url('../images/menuOver.png');color: #fff;}

/*   end of menu tab */

/*---------------- Vertical menu tab----------------------*/
/* style the outer div to give it width */
.vrmenu 
{
    font-size:16pt;padding:0px; margin:0px auto; width:95%;    
    position: relative;top: 0px;
    height: auto;
    float: left;
  }

/* remove all the bullets, bo10ders and padding from the default list styling */
.vrmenu ul {padding:0px;margin:0;list-style-type:none;background: transparent;position: relative;top: 5px;  }
/*  background:#267cb2 #0066CC*/
/* style the sub-level lists */
.vrmenu ul ul {width: auto;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.vrmenu ul li 
{
    
    height:auto;
    line-height:20px;
    width: auto;
    position: relative;
    left: 0px;
    
 }

/* style the links for the top level */
.vrmenu a {
    display:block;
    width: auto;
    height:100%;
    font-size:14px;
    text-decoration:none;
    color:#000;
    background:transparent; 
    border-bottom:1px dashed grey;
    
}
.vrmenu a:active { color:darkgreen;}
.vrmenu a:hover { color:darkgreen;}
.vrmenu a span {position: relative;left:0px;}
.vrmenu a.current {color: darkgreen;}

/*   end of menu tab */

.triangle-l {
	border-color: transparent #FFFF66 transparent transparent;
	border-style:solid;
	border-width:10px;
	height:0px;
	width:0px;
	position: relative;
	right: 86px;
	top: 3px;
    float: right;
	/*z-index: -1; /* displayed under bubble */
}
.textboxStyle {
    width: 180px;
    height: 20px;
    border: 1px solid green;
}
.tableStyle1 {
     width: 85%;
            position: relative;
            left: 40px;
    
}
.tableStyle2 {
     width: 100%;
    position: relative;
    left: 20px;
    height: auto;   
}
.errorText {
    
    color: red;
}

.titleRow {
    background-color: #66cc33;
    color: #fff;
    font-weight: bold;
}
#footer {
    height: 50px;
    width: 100%;
    background-color: darkgreen;
    background-repeat:repeat;
    color: ghostwhite;
    position: relative;
    clear: both;
    text-align: center;
}
.latest {
    background-color: #F70000;
width: 150px;
color: #fff;
position: relative;
padding: 3px;
top: 1px;
right: 3px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
height: 100%;
float: right;
    
}

a								{ text-decoration: none; outline: none; }
a img							{ border: none; }

h2								{ font-family: Georgia, Serif; font-size: 36px; text-align: center; 
								  font-weight: normal; }

#page-wrap						{ background: white; width: 960px; margin: 0 auto; 
								  padding: 50px 0; }

#slider							{ background: white url(../images/slider-bg1.jpg); height: 300px; overflow: hidden;
								  position: relative; margin: 0 0;border-left: 3px solid #fff; border-right: 3px solid #fff; width: 100%;}
								  
                                /* DEFAULT is for three panels in width, adjust as needed
                                   This only matters if JS is OFF, otherwise JS sets this. */								  
#mover							{ width: 2880px; position: relative; }

.slide							{ padding: 0px 30px; width: 960px; float: left; position: relative; }
.slide h1						{ font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
								  color: darkgreen; }
.slide p						{ color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img						{ position: absolute; top: 20px; left: 400px; }
#slider-stopper					{ position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
								  padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
								  
.smallerPara {
    text-align:justify; 
    line-height:17px; 
    position:relative; 
    left:30px;
    width: 95%;
}

.btnlogin { width: 80%; }
.btnsignup { width: 80%;}

@media screen and (max-width: 1024px) 
{
    #wrapper {  width:99%;  }
    #menubar2 .submenu { width: 99%; margin: 0 auto; }
    .menu {   width:99%;  } 
  
}
@media screen and (min-width: 1024px)
{
     #wrapper {  width:100%;  }
    
      
  
    #menubar2 .ThreeDText
            {
                font: normal 18pt Verdana Regular;
        color: #fff;
                top: 2px;
                text-align: center;
    text-transform: uppercase;
                
            }
    #menubar2 .ThreeDLogo {
                font: normal 24pt Verdana Regular;
                top: 2px;
                text-align: center;
    text-transform: uppercase;
                
            }
    
}
@media screen and (min-width: 800px) and (max-width: 1024px) 
{
     #wrapper {  width:99%;  }
    #menubar2 .submenu { width: 99%;margin: 0 auto; }
    .menu {   width:99%;  } 
    .menu a { width: 100px; font-size:11px; }
    #menubar2 {
                width: 99%;
                height: 70px;
                background-color: darkgreen;
                background-attachment: fixed;
                margin: 0 auto;
            }
    #menubar2 .ThreeDText
            {
                font: normal 18pt Verdana Regular;
                color: #fff;
                top: 2px;
                text-align: center;
    text-transform: uppercase;
                
            }
    #menubar2 .ThreeDLogo {
                font: normal 24pt Verdana Regular;
                top: 5px;
                text-align: center;
    text-transform: uppercase;
               
            }
     #messageSection { height: 250px; } 
     #messageSection .subsections 
            {  height: 220px; }
}
@media screen and (max-width: 800px) 
{
    #wrapper {  width:99%;  }
    #menubar2 .submenu { width: 99%;margin: 0 auto; }
    .menu {   width:99%;  } 
    .menu a { width: 100px; font-size:11px; }
    #menubar2 {
                width: 99%;
                height: 70px;
                background-color: darkgreen;
                background-attachment: fixed;
                margin: 0 auto;
            }
    #menubar2 .ThreeDText
            {
                font: normal 18pt Verdana Regular;
                top: 2px;
               text-align: center;
    text-transform: uppercase;
                
            }
    #menubar2 .ThreeDLogo {
                font: normal 24pt Verdana Regular;
                top: 2px;
               text-align: center;
    text-transform: uppercase;
                
            }
     #messageSection { height: 250px; } 
     #messageSection .subsections 
            {  height: 220px; }

}
.guide {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
    background-color: darkgreen;
    background-image: -webkit-linear-gradient(#91dd70, #55ae2e);
    background-image: linear-gradient(darkgreen, #55ae2e);
    border: 1px solid #5aad35;
    padding: 7px;
    margin-bottom: 10px;
    cursor: pointer;
    width: 145px;
    border-radius: 3px;
    text-transform: uppercase;
}