html, body, h1, h2, h3, h4, ul, li {
  margin: 0;
  padding: 0;
  height: 101%; 
}
h1 img {
  display: block;
}
img {
  border: 0;
}
a {
  color: #464544;
  font-weight: bold;
 
}
a:hover {
  color: #FFA405;
}
.left {
  float: left;
}
.right {
  float: right;
}
.more {
  text-align: right;
}
.clear {
  clear: both;
}

body {
  background: #fff url(/images/page_bg.png) repeat-x;
  text-align: center;
  font: 12px arial, sans-serif;
  color: #464544;
  
  
}


#bodyhome {
  background: url(/images/body_bg.gif) repeat-y;
  width: 100%;
}

html{
  overflow: -moz-scrollbars-vertical;
    
}

/** layout **/
#wrapper {
  text-align: left;
  margin: auto;
  width: 728px;
  position: relative;
 

}

h1 {
  position: absolute;
  top: 46px;
  left: 0;
  height: 43px;
  padding-top: 8px;
  width: 414px;
  text-align: center;
  background: #7A808C;
  color: #ffffff;
  font: 24px "Times new roman", serif;
  font-weight: normal;
}
h1 strong {
  font-weight: normal;
  color: #0E1520;
}
#top-nav {
  position: absolute;
  top: 89px;
  left: 416px;
  width: 314px;
  height: 195px;
  #background: bottom left url() no-repeat;
}
#top-nav ul {
  text-align: center;
  line-height: 32px;
}
#top-nav li {
  display: inline;
  font-size: 12px;
  color: #fff;
}
#top-nav a {
  text-decoration: none;
  font-weight: normal;
  color: #fff;
}
#top-nav a:hover {
  text-decoration: underline;
}


#header a {
  background: url(/images/commtd_header.png) no-repeat;
  background-position: top center;
  position: absolute;
  top: 89px;
  left: 0px;
  width: 726px;
  height: 195px;
}

#header a span {
  visibility: hidden;
}

/** body **/
#spacer {
  height: 285px;
}

#body {
  background: url(/images/body_bg2.JPG) repeat-y;
  width: 100%;
}

#body_nobg {
  width: 100%;
}


#left {
  float: left;
  width: 412px;
}
#left_services {
  float: left;
  width: 724px;
}

#subs-left {
  float: left;
  width: 160px;
  padding-left: 35px;
  padding-bottom: 10px;
  margin-top: 22px;
}
#subs-right {
  float: right;
  width: 145px;
  padding-right: 30px;
  padding-bottom: 10px;
  margin-top: 22px;
}
#subs-left a {
  color: #fff;
}
#subs-left {
  color: #fff;
}
#subs-left h3 {
  color: #000000;
  font: 16px "Times new roman", serif;
}
#subs-left p {
  text-align: justify;
}

#subs-right {
  color: #fff;
}
#subs-right h3 {
  color: #000000;
  padding-left: 20px;
  padding-bottom: 14px;
  font: 16px "Times new roman", serif;
}
#subs-right h4 {
  color: #000000;
  font: 14px "Times new roman", serif;
  margin: 0.6em 0;
}
#subs-right ul {
  margin-top: 1em;
}
#subs-right li {
  list-style: none;
  padding-left: 20px;
  background: 5px 3px url(/images/bullet.gif) no-repeat;
}
#subs-right p {
  text-align: justify;
  margin: 0.6em 0;
}

#right {
  float: right;
  width: 312px;
}

#nav ul {
}
#nav li {
  float: left;
  width: 102px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background: url(/images/tab_lit.gif) repeat-x;
  border-left: 1px solid white;
  list-style: none;
}
#nav a {
  font: 16px "Times new roman", serif;
  color: #ffffff;
  text-decoration: none;
}
#nav a:hover {
  text-decoration: underline;
}
#nav li.drk {
  background: url(/images/tab_drk.gif) repeat-x;
  border-left: none;
  padding-left: 1px;
}
#copyright_top {
  background: #4F4F51;
  color: #fff;
  text-align: center;
  font-size: 11px;
  float: right;
  width: 312px;
  padding: 10px 0;
  margin-bottom: 0px;
}
#copyright_top p {
  margin: 0;
  padding: 0;
}


#contact {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#contact h2 {
  font: 24px "Times new roman", serif;
}
#contact a {
  text-decoration: none;
}
#contact a:hover {
  text-decoration: underline;
}

#visit {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#visit h2 {
  font: 24px "Times new roman", serif;
}
#visit a {
  text-decoration: none;
}
#visit a:hover {
  text-decoration: underline;
}

#about {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#about h2 {
  font: 24px "Times new roman", serif;
}
#about a {
  text-decoration: none;
}
#about a:hover {
  text-decoration: underline;
}

#services {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#services h2 {
  font: 24px "Times new roman", serif;
}
#services a {
  text-decoration: none;
}
#services a:hover {
  text-decoration: underline;
}

#e-commerce {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#e-commerce h2 {
  font: 24px "Times new roman", serif;
}
#e-commerce a {
  text-decoration: none;
}
#e-commerce a:hover {
  text-decoration: underline;
}

#javascript {
  background: #EEEEEE;
  padding: 15px 40px 14px 36px;
}
#javascript h2 {
  font: 24px "Times new roman", serif;
}
#javascript a {
  text-decoration: none;
}
#javascript a:hover {
  text-decoration: underline;
}


#right-i {

  padding: 4px 25px 20px 20px;
}
#right h2 {
  color: #323E51;
  font: 22px "Times new roman", serif;
  margin-bottom: 12px;
}
#right h3 {
  color: #000000;
  font: 14px "Times new roman", serif;
  margin-bottom: 5px;
}
#right p {
  margin-top: 0;
  color: #163348;
}
#right .left {
  margin-right: 4px;
}
#right a {
  color: #163348;
  font-weight: bold;
  text-decoration: none;
}
#right a:hover {
  text-decoration: underline;
}

/** footer **/
#copyright {
  background: #4F4F51;
  color: #fff;
  text-align: center;
  font-size: 11px;
  float: right;
  width: 315px;
  padding: 10px 0;
  margin-bottom: 20px;
}
#copyright p {
  margin: 0;
  padding: 0;
}

/*CSS for example Menu 1*/

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Times;
width: 90%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}


/*CSS for example Menu 2*/

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
  
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(images/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(images/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
  
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

/*CSS for example Menu 3*/

#underlinemenu{
margin: 0;
padding: 0;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}

* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}

#underlinemenu ul li{
display: inline;
}


#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
background: white url(images/menudivide.gif) top right repeat-y;
}

#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}

/*CSS for thumbnail image hovery example*/

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

/*CSS for form example*/

.cssform p{
width: 215px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 145px; /*width of left column containing the label elements*/
border-top: 1px dashed #CC0000;
height: 1%;
}

.cssform label{
font-weight: bold; color: #0000CC; 
float: left;
margin-left: -145px; /*width of left column*/
width: 140px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 215px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

/* This section is for the form on the AJAX demo Quote Form page */

#body_drk {
  background: url(/images/tab_lit.gif) repeat-x;
  width: 100%;
}

div.quote_body {
  background: url(/images/body_bg3.png) repeat-y;
  width: 100%;
  text-align: center;
}

div.quote_form {
  text-align: center;
  width: 100%;
}

div.column {
  text-align: center;
  font-size: 14px;
  float: left;
  width: 120px;
}

div.column_header {
  height: 70px;
}

.list_item {
  text-align: left;
  font-size: 14px;
  float: left;
  width: 100px;
  height: 50px;
  padding: 10px 10px;
  margin-bottom: 0px
}


p.grand_total {
  background: url(/images/body_bg3.png) repeat-y;
  text-align: center;
  font-size: 24px;
  float: left;
  width: 100%;
  padding: 10px 10px;
  margin-bottom: 0px;
}

span.grand_total {
  color: red;
}

div.salesquote {
  font-size: 24px;
  text-align: center;
  padding: 20px 0px 20px 0px;
}

li.widenav {
  float: left;
  width: 312px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background: url(/images/tab_lit.gif) repeat-x;
  border-left: 1px solid white;
  list-style: none;
}
a.widenav {
  font: 16px "Times new roman", serif;
  color: #ffffff;
  text-decoration: none;
}
a:hover.widenav {
  text-decoration: underline;
}

