/* -------------------------------------------------------------------------------------------------
   Set the default values for both the page as a whole, and all the main elements on the page,
   forcing them to start from a common value (negating cross-browser differences) */
body {
  background: white url(../images/elements/background.png) repeat-x 0 0;
  font: normal 10pt Verdana, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0; }
p, form, frameset, div, img, table, tr, td, ul, ol, li, h1, h2, h3, h4, h5 {
  border: 0;
  margin: 0;
  padding: 0; }

/* -------------------------------------------------------------------------------------------------
   Configure all the standard tags (as needed) on the page*/
a, a:link, a:visited {
  color: #516077;
  text-decoration: none; }
a:hover {
  text-decoration: underline; }
a.external:before { content: url(../images/elements/arrow-matrix.gif) }

p {
  text-align: justify;
  margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5 {
  /* font: normal 17pt Georgia, Garamond, Bookman Old Style, Times, Times New Roman, serif; */
  font: bold 15pt Verdana, Tahoma, sans-serif;
  margin: 1em 0 0.5em 0;
  color: #55637A; }
h2 {
  font-size: 13pt;
  margin-top: 0.75em; }
h3 {
  font-size: 11pt;
  margin-top: 0.5em; }
h4 {
  font-size: 10pt;
  margin-top: 0.25em; }
h5 {
  font-size: 9pt;
  margin-top: 0.25em; }

td {
  vertical-align: top; }

tt, pre {
  color: #516077;
  font: normal 9pt monospace; }

ul {
  margin: 5px 0 10px 20px;
  list-style: circle outside url(../../images/elements/arrow-normal.gif); }
li {
  text-align: justify; }

/* -------------------------------------------------------------------------------------------------
   Configure the main/central layers on the page, including the central-positioning layers which
   will hold the headers and the body of the page */
#header, #center {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0; }
#center {
  top: 100px; }
#body {
  position: absolute;
  top: 0;
  left: -300px;
  width: 600px;
  height: auto;
}

/* -------------------------------------------------------------------------------------------------
   Configure image positions within the header (covers our logo as well as the LiveChat icon) */
#logo {
  height: 44px;
  width: 285px;
  position: absolute;
  left: 15px;
  top: 0; }
#livechat {
  height: 44px;
  width: 90px;
  position: absolute;
  left: -300px;
  top: 0; }

/* -------------------------------------------------------------------------------------------------
   Configure the menu/navigation system on the page */
#menu-navigation {
  height: 21px;
  width: 544px;
  position: absolute;
  left: -300px;
  top: 45px; }
#menu-order {
  height: 21px;
  width: 56px;
  position: absolute;
  left: 244px;
  top: 45px; }
#menu-breadcrumbs {
  height: 1em;
  width: 578px;
  position: absolute;
  left: -289px;
  top: 75px;
  font-size: 80%;
  color: #516077; }

/* -------------------------------------------------------------------------------------------------
   Configure the main elements of the sub-menu */
#submenu {
  width: 150px;
  min-height: 125px;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
  border-right: 1px dashed #B2BECC;
  float: left; }
#submenu span.item {
  display: block;
  margin: 0 0 10px 0;
  padding: 0; }
#submenu span.item img {
  margin: 0 4px 1px 0;
  vertical-align: bottom;
  padding: 0; }
#submenu span.extra {
  display: block;
  font-size: 7pt;
  margin: 2px 0 0 15px; }
#submenu span.block {
  display: block;
  margin: 0;
  font-size: 1px; }

/* -------------------------------------------------------------------------------------------------
   Configure the elements in the footer */
img#cards {
  width: 305px;
  height: 25px; }
#footer {
  clear: both;
  margin: 25px 0;
  width: 100%; }
#footer p {
  text-align: right;
  font: normal 8pt Verdana, Helvetica, Arial, sans-serif; }


/* New Image Rollover CSS Elements */
#img-home,
#img-home-sel {
  height: 21px;
  width: 52px;
  background: transparent url(../images/menu/home.png) 0 0 no-repeat; }
#img-home:hover,
#img-home-sel {
  background-position: -54px; }

#img-hosting,
#img-hosting-sel {
  height: 21px;
  width: 65px;
  background: transparent url(../images/menu/hosting.png) 0 0 no-repeat; }
#img-hosting:hover,
#img-hosting-sel {
  background-position: -65px; }

#img-reseller,
#img-reseller-sel {
  height: 21px;
  width: 66px;
  background: transparent url(../images/menu/reseller.png) 0 0 no-repeat; }
#img-reseller:hover,
#img-reseller-sel {
  background-position: -66px; }

#img-support,
#img-support-sel {
  height: 21px;
  width: 67px;
  background: transparent url(../images/menu/support.png) 0 0 no-repeat; }
#img-support:hover,
#img-support-sel {
  background-position: -67px; }

#img-clientarea,
#img-clientarea-sel {
  height: 21px;
  width: 83px;
  background: transparent url(../images/menu/clientarea.png) 0 0 no-repeat; }
#img-clientarea:hover, #img-clientarea-sel {
  background-position: -83px; }

#img-order,
#img-order-sel {
  height: 21px;
  width: 53px;
  background: transparent url(../images/menu/order.png) 0 0 no-repeat; }
#img-order:hover, #img-order-sel {
  background-position: -53px; }

/* New Menu Structure Updates */
#menu-navigation {
  width: 461px; }
#menu-order {
  width: 139px;
  left: 161px; }

/* Drop-Down Menu Elements */
#menu-support,
#menu-clientarea,
#menu-hosting {
  visibility: hidden;
  position: absolute;
  background: white url(../images/elements/menu-dropdown-100.png) no-repeat;
  width: 150px;
  z-index: 100;
  padding: 0;
  margin: 0; }

#menu-hosting {
  background-image: url(../images/elements/menu-dropdown-40.png); }

#menu-support a,
#menu-clientarea a,
#menu-hosting a { 
  font-size: 80%;
  margin: 2px 5px;
  display: block;
}