/* hide any HRs used in the layout, but show them in main content */
hr,
.ahem,
#skip-link {
  display: none;
}
#main hr {
  display: block;
}

/* uncomment these color rules to make the layout easier to see */
/*
#container     { background: #ccc; }
#main          { background: #eee; }
#sidebar-left  { background: #ccf; }
#footer        { background: #cfc; }
#sidebar-right { background: #fcc; }
#navigation    { background: #ffc; }
#header        { background: #cff; }
*/

/* Holy Grail Layout ---------------------------------------------------------
   ref: http://www.alistapart.com/articles/holygrail
   This layout takes advantage of negative margins to float the sidebars to
   either side of the main content. It also floats the navigation above the
   content, but you could just as easily absolutely position it.

   LC stands for Left Column, RC for Right Column

   Obvously, this layout is for left-to-right languages. For a
   right-to-left layout, just swap all the left and rights below.
   */


#outer-wrapper {
  overflow: hidden;
  /* background: #00b8e4 url(../images/body-bg.png) left top repeat-x; */
  background: #00b9e4;
  position: relative;background-attachment:fixed; 
}

#outer-wrapper div.bg {
    z-index: 1;
    position: absolute;
    top: 0;
}

#outer-wrapper div.bg.left {
    width: 402px;
    height: 1493px;
    background: url(../images/body-left.png) left top no-repeat;
    left: 0;
}

#outer-wrapper div.bg.right {
    width: 360px;
    height: 800px;
    background: url(../images/body-right.png) left top no-repeat;
    right: 0;
}

#inner-wrapper {
    z-index: 9999;
    position: relative;
/*  background-image: url('../images/bg/home-pattern.png');
  background-repeat: repeat-x;
  background-position: center top; */
}

#top-wrapper {
  /* box-shadow: 0 16px 16px #333; */
  position: relative;
  /* z-index: 800; */
}

.with-inset-panel #top-wrapper {
  /* box-shadow: 0 0 16px #333; */
}

#inset-panel {
  width: 920px;
  padding: 9px 10px;
  margin: 0 auto;
  background-color: #ccc;
  /* box-shadow: 0 0 16px #333; */
}

#container {
  background-color: #fff;
  /* box-shadow: 0 16px 16px #333; */
  position: relative;
  z-index: 3;
  border-top: 5px solid #00b8e4;
  padding-bottom: 10px;
}

.with-inset-panel #container {
  /* box-shadow: 0 3px 16px #333; */
}


#page {
  width: 960px;
  margin: 0 auto;
  font-size: 12px;
}
#main,
#navigation,
#sidebar-left,
#sidebar-right {
  float: left;
}
.with-navigation #main,
.with-navigation #sidebar-left,
.with-navigation #sidebar-right {
  /*margin-top: 3em;*/       /* NAV height */
}
#navigation {
  height: 3em;           /* NAV height */
  width: 100%;
  margin-right: -100%;
}
#main {
  width: 100%;
  margin-right: -100%;
  margin-top: 10px;
}
.sidebar-left #main-squeeze {
  padding-left: 280px;   /* LC width */
}
.sidebar-right #main-squeeze {
  padding-right: 280px;  /* RC width */
}
.two-sidebars #main-squeeze {
  padding-left: 310px;   /* LC width */
  padding-right: 310px;  /* RC width */
}
#sidebar-left {
  width: 280px;          /* LC width */
  margin-right: -280px;
  margin-left: 10px;
  margin-top: 10px;
}
#sidebar-right {
  float: right;
  width: 280px;          /* RC width */
  margin-left: -280px;   /* RC width */
  margin-right: 10px;
  margin-top: 10px;
}
#footer {
  clear: both;
}
/* IE6 fix */
* html #sidebar-left {
  left: 280px;           /* RC width */
}

#below-body {
  background-color: #fff;
  padding: 0 10px 10px 10px;
  position: relative;
  z-index: 5;
}

#footer-wrapper {
  background-color: #fff;
  height: 40px;
  position: relative;
  z-index: 10;
  border-top: 1px solid #e4e4e4;
}

#footer {
  padding: 5px 20px 0 20px;
}

#bottom {
  height: 100px;
  height: 0 !important;
  /*
  background-color: #fff;
  position: relative;
  z-index: 15;
  background-image: url('../images/bg/bottom.png');
  background-repeat: no-repeat;
  background-position: center top;
  */
}