html, body
    {
    margin: 0;
    padding: 0;
    background: #fcfff4;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #003300;
    }

div, input, select, textarea { font-family: inherit; }

/* framework */

#Outer { text-align: center; }
#Inner { width: 100%; min-width: 320px; max-width: 1000px; margin: 0 auto; background: #fcfff4; text-align: left; }

/* header */

#HdrOuter { border: 3px solid #003300; padding: 2px; }
#HdrInner { border: 1px solid #003300; text-align: left; position: relative; height: 102px; }
#HdrInner img.logoImage { height: 100px; vertical-align: top; float: left; }
#HdrInner img.logoBrand { height: 75px; vertical-align: top; }
#HdrInner p { font-size: 17px; color: #003300; }
#HdrInner div { position: absolute; top: 0; right: 0; padding: 20px; font-size: 14px; text-align: center; }

/* header - responsive */

@media screen and (max-width: 880px) {
#HdrInner div { display: none; } 
}
@media screen and (max-width: 650px) {
#HdrInner img.logoImage { display: none; }
#HdrInner { text-align: center; }
}
@media screen and (max-width: 475px) {
#HdrInner img.logoBrand { width: 94%; height: auto; }
#HdrInner { height: auto; }
#HdrInner p { display: none; }
}

/* container for LHS/RHS */

#ColOuter { overflow: hidden; }
#RHS { overflow: hidden; }
#LHS { float: left; width: 173px; } /* 3px + 2px + 1px + 2px + 160px + 2px + 1px + 2px */

#Search { display: none; background: #003300; color: #fcfff4; text-align: center; font-size: 14px; padding: 4px; margin-bottom: 2px; }
#Search input { line-height: 20px; font-size: 14px; padding: 1px 3px; width:120px; border: 0; }
#Search input[type="submit"] { line-height: 20px; font-size: 14px; background: #fcfff4; color: #003300; padding: 1px 3px; border: 0; border-radius: 0; width:40px; text-align: center; }

/* responsive */

@media screen and (max-width: 740px) {
#LHS { display: none; }
#Search { display: block; }
}

/* LHS main menu */

ul.mainmenuUL { padding: 0; margin: 3px 0; padding-left:18px; list-style: disc;}
ul.mainmenuUL li a { text-decoration: none; }
ul.mainmenuUL li a:hover { text-decoration: underline; }

/* border container for LHS/RHS */

.container { border: 3px solid #003300; padding: 2px; }
#LHS .container { border-right: 0; }

/* footer panel */

#Footer { border: 1px solid #003300; margin-top: 2px; padding: 10px; text-align: center; }

#FooterNavigation { }
#FooterNavigation h4 { background: #003300; color: #fcfff4; font-size: 14px; font-weight: bold; line-height: 18px; margin: 10px 0 5px 0; padding: 3px 5px; }
#FooterNavigation div { font-size: 14px; text-align: left; line-height: 18px; }
#FooterNavigation a { margin-left: 5px; }

@media screen and (min-width: 550px) {
#FooterNavigation { overflow: hidden; }
#FooterNavigation > div { float: left; width: 30%; padding: 0 1.5%; }
}

/* copyright panel */

#Copyright { border: 1px solid #003300; margin-top: 2px; padding: 10px; text-align: center; }
#Copyright p { margin-bottom: 6px; }

@media screen and (max-width: 550px) {
#Copyright span:first-of-type { display: none; }
#Copyright span { display: block; }
}

/* panels for LHS/RHS */

.panel { border: 1px solid #003300; margin-top: 2px; padding: 10px; }
.panel:first-of-type { margin: 0; }

/* LHS panels have smaller padding */

#LHS .panel { padding: 2px; }

/* h4 in LHS */

#LHS h4
    {
    margin: 2px 0;
    padding: 2px;
    font-size: 14px;
    color: #fcfff4;
    font-weight: bold;
    text-align: center;
    background-color: #003300;
    }
#LHS h4:first-of-type { margin: 0; }

/* advertising links in copyright section */

.advertLinks { font-size: 11px; margin-top: 2px; text-align: center; }
.advertLinks a { font-weight: bold; }

/* banner adverts */

.banner { margin: 4px auto; text-align: center; }

/* primary navivation container */

#NavOuter { background: #003300; border-bottom: 3px solid #003300; margin-bottom: 2px; text-align: center; }
#NavInner { }

/* primary navigation drop menu */

#cssmenu {
  font-size: 15px;
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#cssmenu > ul li#responsive-tab {
  display: none;
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
text-align: left;
z-index: 9999;
  width: 200px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #005000;
    color: #fff;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
color: #fff;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #006600;
}
#cssmenu > ul li a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
    color: #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #006600;
  color: #fff;
}
#cssmenu > ul li.has-sub ul li a { color: #fff; }

#cssmenu > ul li.has-sub ul li a.active,
#cssmenu > ul li.has-sub ul li a:hover {
    background: #008800;
    color: #fff;
}




@media screen and (max-width: 650px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background-color: #003300;
    color: #fff;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #006600;
    color: #fff;
  }
  #cssmenu > ul li {
    display: none;
  }
#cssmenu > ul li a {
  padding: 6px 10px; 
}
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
text-align: center;
font-size: 13px;
    position: static;
    width: 100%;
    background: #005000;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
line-height: 14px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}


/* Make sure they show even if hidden in mobile view by JS */
@media screen and (min-width: 650px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}


/* social buttons */

#LHS .social { margin-left: 7px; }
ul.social { display:inline-block; margin: 0; padding: 0;}
.social li { text-align: center; float:left; display: block; margin: 2px; border: none; width: 34px; height: 34px; background: #555; border-radius: 17px; transition:all 0.2s ease-in; }

.social li:before { display: none; }
.social li a { float:left; display:block; text-indent:-9999px; position:relative; width:100%; height:100%; text-decoration:none; }
.social li a:before { content:""; position:absolute; }
.social a:before { background-image: url(/asset/social.png); background-repeat: no-repeat; width: 22px; height: 22px; top: 6px; left: 6px; background-size: 132px 22px; }

.social .twitter    a:before { background-position:    0px 0; }
.social .facebook   a:before { background-position:  -22px 0; }
.social .pinterest  a:before { background-position:  -44px 0; }
.social .googleplus a:before { background-position:  -66px 0; }
.social .instagram  a:before { background-position: -110px 0; }

.social li:hover { background: #006600; }