/***********************************************
  HTML Element Styles
 ***********************************************/

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 75%;
  font-family: verdana, arial, sans-serif;
  color: #555;
  background: #C1CEDB url(../images/body_bg.jpg) repeat-x top center;
  background-attachment: fixed;
}

a {
  color: #6B87B4;
}

a:hover {
  color: #012868;
}

p {
  line-height: 20px;
  margin: 10px 0 20px 0;
}

h1 {
  clear: both;
  font-size: 160%;
  font-weight: normal;
  letter-spacing: -2px;
  color: #003B9B;
  background: url(../images/h1_bg.jpg) no-repeat bottom left;
}



/***********************************************
  Main site layout
 ***********************************************/

#siteBox {
  width: 665px;
  margin: 0 auto;
}



/***********************************************
  Top Menu
 ***********************************************/

#menuBox {
  float: left;
  width: 665px;
  min-height: 39px;
  height: auto !important;
  height: 39px;
  margin-bottom: 10px;
  background: url(../images/shape_bottom.png) no-repeat bottom center !important;
  background: url(../images/shape_bottom.gif) no-repeat bottom center;
}

#menu {
  float: left;
  width: 640px;
  height: 39px;
  vertical-align: bottom;
  text-align: right;
}

#menu a {
  float: right;
  font-size: 150%;
  letter-spacing: -1px;
  text-decoration: none;
  padding: 8px 8px;
  color: #AFBDCF;
}

#menu a span {
  padding: 4px 10px 4px 4px;
}

#menu a:hover,
#menu a.active {
  padding: 4px 13px 12px 3px;
  color: #003B9B;
  background: url(../images/menu_left.gif) no-repeat top left;
}

#menu a:hover span,
#menu a.active span {
  background: url(../images/menu_right.gif) no-repeat top right;
}


/***********************************************
  Header Image
 ***********************************************/

#headerImg {
  margin-bottom: 10px;
  clear: both;
}



/***********************************************
  Large white content blocks:
  ----------------------------------------------
  You can have as many of these as you want,
  just make sure that they include the .top
  and .bottom so they have rounded edges.
 ***********************************************/

.block {
  float: left;
  text-align: left;
  width: 665px;  
  background: url(../images/content_bg.gif) repeat-y top center;
}

.top {
  float: left;
  width: 665px;
  height: 20px;
  background: url(../images/shape_top.gif) no-repeat top center;
}

.bottom {
  float: left;
  width: 665px;
  height: 30px;
  margin-bottom: 10px;
  background: url(../images/shape_bottom.gif) no-repeat bottom center;
}


.block div.left {
  float: left;
  width: 465px;
  padding: 0 10px;
}

.block div.right {
  float: right;
  width: 155px;
  padding: 0 15px 0 10px;
}


/***********************************************
  Footer Layout
 ***********************************************/

#footer {
  float: left;
  width: 665px;
  margin: 0 0 10px 0;
  font-size: 90%;
  line-height: 16px;
  color: #6B87B4;
}

#footer div.left {
  float: left;  
  text-align: left;
  margin-left: 10px !important;
  margin-left: 5px;
  width: 380px;
}

#footer div.right {
  float: right;
  text-align: right;
  margin-right: 10px;
  width: 260px;
}



/***********************************************
  Generic Display Classes
 ***********************************************/

img.left {
  float: left;
  padding: 5px 10px 5px 5px;
}

img.right {
  float: right;
  padding: 5px 5px 5px 10px;
}

a.bigLink {
  display: block;
  padding: 3px 0;
  font-size: 120%;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none;
}

a.bigLink img {
  border: 0;
  vertical-align: middle;
}