/********
 * HERO *
 ********/

#banner {
  background: url(/images/banner_bg.gif) center bottom no-repeat;
  border-bottom: none;
  height: 340px;
  position: relative;
}

h1#logo {
  left: 44px;
  position: absolute;
  top: 30px;
  width: 203px;
}

h1#logo a {
  background: url(/images/logo.gif) left top no-repeat;
  display: block;
  font-size: 0;
  height: 0;
  overflow: hidden;
  padding-top: 110px;
  width: 203px;
}

h2#tagline {
  height: 90px;
  left: 44px;
  overflow: hidden;
  position: absolute;
  top: 165px;
  width: 350px;
}

h2#tagline span {
  background: url(/images/commercially_retail_tagline.gif) left top no-repeat;
  display: block;
  font-size: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  padding-top: 90px;
  position: absolute;
  top: 0;
  width: 350px;
}

h2#tagline span.commercially-retail {
  background-image: url(/images/commercially_retail_tagline.gif);
}

h2#tagline span.advertising-monitoring {
  background-image: url(/images/advertising_monitoring_tagline.gif);
}

h2#tagline span.login {
  background-image: url(/images/login_tagline.gif);
}

#hero {
  height: 300px;
  overflow: hidden;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 400px;
}

#hero img {
  position: absolute;
  top: 0;
  left: 0;
}

#ad_counter {
  color: #aaa;
  font-size: 10px;  
  left: 44px;
  position: absolute;  
  top: 280px;
}

#ad_counter h4.count {
  color: #cb0909;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 2px;
}


/***********
 * CONTENT *
 ***********/

#content {
  background-image: url(/images/home_bg.jpg);
}

#content .pane {
  float: left;
  padding: 20px 7px 0 28px;
  width: 283px;
}

#content .advertising-monitoring-pane {
  width: 291px;
}

#content .login-pane {
  width: 270px;
}

#content .pane h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
}

#content .pane h3 a {
  background: url(/images/commercially_retail_icon.jpg) left top no-repeat;
  display: block;
  height: 65px;
  line-height: 65px;
  padding-left: 70px;
}

#content .pane h3 a:hover {
  background-position: 0 -65px;
}

#content .advertising-monitoring-pane h3 a {
  background-image: url(/images/advertising_monitoring_icon.jpg);
}

#content .login-pane h3 a {
  background-image: url(/images/login_icon.jpg);
}

#content .pane ul {
  border-right: 1px solid #777;
  list-style: none;
  height: 160px;
  margin-left: 40px;
}

#content .pane ul li {
  background: url(/images/bullet.jpg) left center no-repeat;
}

#content .pane ul li a {
  display: block;
  font-size: 14px;
  line-height: 22px;
  padding-left: 22px;
}