#header { text-align: left; position: relative; height: 80px; top: 0px;  }
#logo { position: absolute; left: 20px; top: 30px; }
#hero { position: relative; border: 0px; background: url("/resources/website/images/homepage_backgrounds.png"); width: 946px; height: 418px;  }

/* Navigation */

#menu { position: absolute; top: 45px; right: 20px; height: 35px; width: 685px; }
#menu li { list-style-type: none; }
#menu ul { list-style: none; padding: 0; margin: 0; }
#menu li { float: left; margin: 0 0.15em; }
#menu li a { font-family:Trebuchet MS; font-weight: normal; font-size: 1.3em; border-right: 1px solid #666666; height: 2em; line-height: 2em; float: left; width: 7em; display: block; color: #ffffff; text-decoration: none; text-align: center; }
#menu li a.last {border: 0px; }
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
} 

/* Hero */
#hero #smiley {position: absolute; bottom: 30px; left: 30px;}
#hero #hero-messaging { position: absolute; bottom: 40px; left: 169px; }
#hero #hero-messaging h1 { font-size: 3.2em; font-weight: normal; }
#hero #hero-messaging h2 { font-weight: normal; width: 452px; font-size: 1.4em; }
#hero #signup { position: absolute; bottom: 39px; right: 60px; }

/* slider menu */
div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 260px;
  width: 927px;
  position: absolute;
  top: 30px;
  left: 7px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 25px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: none;
  margin: 0 auto;
  font-size: 1.6em;
  font-weight: normal;
  color: #333333;
  position: absolute;
  bottom: 1px;
}
a#webmessenger { background: url("/resources/website/images/slider/icons.png"); height: 213px; width: 167px; }
a#webchat {  background: url("/resources/website/images/slider/icons.png"); height: 213px; width: 278px; background-position: -180px 0px; }
a#webrecorder {  background: url("/resources/website/images/slider/icons.png"); height: 213px; width: 172px; background-position: -461px 0px; }
a#desktop {  background: url("/resources/website/images/slider/icons.png"); height: 213px; width: 179px; background-position: -645px 0px; }
a#boards {  background: url("/resources/website/images/slider/icons.png"); height: 213px; width: 179px; background-position: -842px 0px; }
a#webmessenger span { width: 167px;}
a#webchat span { width: 278px;}
a#webrecorder span { width: 172px;}
a#desktop span { width: 179px;}
a#boards span { width: 179px;}

/* Main Content Container */
#main-left { width: 580px; padding-right: 20px; padding-top: 20px; }
#main-right { width: 290px; padding-top: 20px; }

/* features */
#features .feature { float: left; width: 208px; height: 158px; padding: 0px 10px 0px 10px; border-right: 1px solid #ccc; text-align: center; }
#features .feature h3 { color: #747474; font-size: 1.3em; }
#features .feature-last { border-right: 0px; }
.feature-icon { width: 93px; height: 93px; display: block; margin: 0 auto; }
.feature-icon-apps { background: url("/resources/website/images/icons/feature_icons.png"); background-position: -4px 0px;  }
.feature-icon-instant { background: url("/resources/website/images/icons/feature_icons.png"); background-position: -109px 0px;  }
.feature-icon-developers { background: url("/resources/website/images/icons/feature_icons.png"); background-position: -215px 0px;  }
.feature-icon-newsletter { background: url("/resources/website/images/icons/feature_icons.png"); background-position: -322px 0px;  }