*
{
  border: 0;
  margin: 0;
  padding: 0;
}

.hide
{
  position: absolute;
  left: -10000px;
  top: -10000px;
}

.clear
{
  clear: both;
}

/*==============================================================================
 Image Replacement
 http://wellstyled.com/css-replace-text-by-image.html
==============================================================================*/
.image-replacement,
.image-replacement-container
{
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.image-replacement span,
.image-replacement-target
{
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

a.image-replacement span,
a .image-replacement-target
{
  /* Make IE7 display the correct cursor */
  cursor: pointer;
  cursor: hand;
}

/* To use:
 * 
 * <div class="myclass image-replacement">
 *   Content
 *   <span></span>
 * </div>
 * 
 * .myclass, .myclass span {
 *   background-image: url(/images/myimage.gif);
 *   height: 100px;
 *   width: 200px;
 * }
 */

/*==============================================================================
 Framework
==============================================================================*/
body
{
  font-family: Helvetica, Arial;
  margin: 0;
  padding: 0;
  text-align: center;
}

div.framework
{
  margin: 0 auto;
  text-align: left;
  width: 899px;
}

/*==============================================================================
 Header
==============================================================================*/
h1,
h1 span
{
  background-image: url(../images/header.jpg);
  height: 225px;
  width: 899px;
}

/*==============================================================================
 Navigation
==============================================================================*/
div.navbar
{
  height: 23px;
  width: 899px;
}

div.navbar ul li
{
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  float: left;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
}

div.navbar ul li a
{
  color: #fff;
  display: block;
  height: 22px;
  line-height: 22px;
  text-decoration: none;
  /* When there were 5 ... width: 180px; */
  width: 225px;
}

div.navbar ul li.nav1
{
  background: #ab0634;
}

div.navbar ul li.nav1 a:hover
{
  color: #e2b9b4;
}

div.navbar ul li.nav2
{
  background: #7373a8;
}

div.navbar ul li.nav2 a
{
  /*width: 179px;*/
  width: 224px;
}

div.navbar ul li.nav2 a:hover
{
  color: #d0cfe1;
}

div.navbar ul li.nav3
{
  background: #c34c34;
}

div.navbar ul li.nav3 a:hover
{
  color: #e6b09c;
}

div.navbar ul li.nav4
{
  background: #916182;
}

div.navbar ul li.nav4 a:hover
{
  color: #cfbac6;
}

/*
div.navbar ul li.nav5
{
  background: #ada698;
}

div.navbar ul li.nav4 a:hover
{
  color: #d6d1ca;
}
*/

/* Submenus */
div.navbar ul ul
{
  display: none;
  position: absolute;
}

div.navbar ul ul li
{
  font-size: 11px;
  float: none;
  text-align: left;
}

div.navbar ul ul li a
{
  color: #FFF;
  height: 26px;
  line-height: 26px;
  padding: 0 5px;
  text-decoration: none;
  text-transform: uppercase;
  width: 215px;
}

div.navbar ul li.nav3 ul
{
  background: #c34c34;
}

div.navbar ul li.nav4 ul
{
  background: #916182;
}

/*==============================================================================
 Intro text
==============================================================================*/
div.intro
{
  font-size: 16px;
  line-height: 1.5em;
}

div.intro p
{
  margin: 1em 20px;
}

div.intro,
div.intro a
{
  color: #999;
}

/*==============================================================================
 Boxes
==============================================================================*/
div.box-bg
{
  background: #c63f4e url(../images/box-bg.png) repeat-y;
  margin-left: 20px;
  margin-right: 20px;
}

div.box1
{
  float: left;
  width: 415px;
}

div.box2
{
  float: right;
  width: 415px;
}

div.box1 div.box-header a,
div.box1 div.box-header a span
{
  background-color: #a2032a;
  background-image: url(../images/box1-header.png);
  background-repeat: no-repeat;
  height: 60px;
  width: 100%;
}

div.box2 div.box-header a,
div.box2 div.box-header a span
{
  background-color: #67679f;
  background-image: url(../images/box2-header.png);
  background-repeat: no-repeat;
  height: 60px;
  width: 100%;
}

div.box-content
{
  color: #fff;
  font-size: 12px;
  line-height: 2em;
  padding: 0 15px;
}

div.box-content h2
{
  font-size: 13px;
  font-weight: bold;
}

div.box-content h2 a
{
  text-decoration: none;
}

div.box-content h2 a:hover
{
  text-decoration: underline;
}

div.box-content h2, p
{
  margin: 0.75em 0;
}

div.box-content a
{
  color: #fff;
}

div.box-footer
{
  background: url(../images/box-footer.png) repeat-y;
  clear: both;
  height: 24px;
  width: 100%;
}

/*==============================================================================
 Footer
==============================================================================*/

div.footer
{
  font-size: 14px;
  font-weight: bold;
  height: 30px;
  padding: 1em 0;
  text-align: center;
}

div.footer,
div.footer a
{
  color: #999;
}

div.footer a:hover
{
  color: #666;
}

div.footer strong
{
  font-weight: normal;
  padding-left: 1em;
}

div.footer strong.first
{
  padding-left: 0;
}