/* $Id */
/**
 * Layout
 */
#navbar ul {
  background: transparent url(images/bg-navigation.png) repeat-x 50% 100%;
}
#header-region {
  min-height: 0;
  background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

#header-region .block {
  display: block;
  margin: 0 1em;
}

#header-region .block-region {
  display: block;
  margin: 0 0.5em 1em;
  padding: 0.5em;
  position: relative;
  top: 0.5em;
}

#header-region * {
  display: inline;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
}

/* Prevent the previous directive from showing the content of script elements in Mozilla browsers. */
#header-region script {
  display: none;
}

#header-region p, #header-region img {
  margin-top: 0.5em;
}

#header-region h2 {
  margin: 0 1em 0 0; /* LTR */
}

#header-region h3, #header-region label, #header-region li {
  margin: 0 1em;
  padding: 0;
  background: none;
}

#wrapper {
  /* background: #edf5fa url(images/body.png) repeat-x 50% 0; */
}

#wrapper #container {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1270px;
  position: relative;
}

#wrapper #container #header {
  height: 140px;
}
 
#banner img {
    width : 100%;
    height : 100%;
}
#banner, #banner-mask {
    position: absolute;
    width : 100%;
    height: 165px;
    left:0;
    top:0;
}
#banner-mask {
/* Removed gradient mask, kept the structure.
   Another kind of mask (i.e. 3D border) might be used later.
  background: transparent url('images/gradient.png') repeat-x scroll 0 100%;
*/
}

#wrapper #container #header #logo-floater {
  position: absolute;
  top:0;
  left: 0;
}

#wrapper #container #header h1, 
#wrapper #container #header h1 a:link, 
#wrapper #container #header h1 a:visited {
  line-height: 200px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

/* logo image */
#wrapper #container #header h1 img {
  padding-top: 0px;
  padding-right: 20px; /* LTR */
  float: left; /* LTR */
  width: 240px;
}

/* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
body.two-sidebars {
  min-width: 980px;
}
/* With 2 columns, require a minimum width of 800px. */
body.sidebar-left, body.sidebar-right {
  min-width: 780px;
}

/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#wrapper #container #center {
  float: left;
  width: 100%;
}

/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
  margin-left: -210px;
}
body.sidebar-right #center {
  margin-right: -210px;
}
body.two-sidebars #center {
  margin: 0 -210px;
}

/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
  margin-left: 210px;
}
body.sidebar-right #squeeze {
  margin-right: 210px;
}
body.two-sidebars #squeeze {
  margin: 0 210px;
}

/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
  margin: 60px 0 0 0;
  width: 210px;
  float: left;
  z-index: 2;
  position: relative;
}

#wrapper #container .sidebar .block {
  margin: 0 0 1.5em 0;
}

#sidebar-left .block {
  padding: 0 15px 0 0px;
}

#sidebar-right .block {
  padding: 0 0px 0 15px;
}

.block .content {
  margin: 0.5em 0;
}

#sidebar-left .block-region {
  margin: 0 15px 0 0px; /* LTR */
}

#sidebar-right .block-region {
  margin: 0 0px 0 15px; /* LTR */
}

.block-region {
  padding: 1em;
  background: transparent;
  border: 2px dashed #b4d7f0;
  text-align: center;
  font-size: 1.3em;
}

/* Now we add the backgrounds for the main content shading */
#wrapper #container #center #squeeze {
  position: relative;
}

#wrapper #container #center .right-corner {
  background: transparent url(images/bg-content-right.png) no-repeat 100% 0;
  position: relative;
  left: 10px;
}

#wrapper #container #center .right-corner .left-corner {
  padding: 60px 25px 0 35px;
  background: transparent url(images/bg-content-left.png) no-repeat 0 0;
  margin-left: -10px;
  position: relative;
  left: -10px;
}
#wrapper #container #center .right-corner .left-corner .between-corners {
  position: relative;
  background: transparent url(images/bg-content.png) repeat-x 50% 0;
  top: -60px;
  padding: 60px 0 0 0;
  margin: 0 15px;
}
#center-inner {
  background-color: #fff;
  margin: 0 -40px;
  padding: 0 40px;
  min-height: 400px;
}
#wrapper #container #footer {
  float: none;
  clear: both;
  text-align: center;
  margin: 4em 0 -3em 0;
  color: #898989;
}

#wrapper #container .breadcrumb {
  position: absolute;
  top: 17px;
  left: 35px; /* LTR */
  z-index: 3;
}

body.sidebar-left #footer {
  margin-left: -210px;
}

body.sidebar-right #footer {
  margin-right: -210px;
}

body.two-sidebars #footer {
  margin: 0 -210px;
}

/**
 * Header
 */
#wrapper #container #header h1, 
#wrapper #container #header h1 a:link, 
#wrapper #container #header h1 a:visited {
  color: #ffcb2b;
  text-shadow: #72621a 0px 1px 3px;
  font-size: 1.5em;
  font-weight: normal;
  font-family: "Comic Sans MS", "URW Chancery L", fantasy;
  text-decoration: none;
}

#wrapper #container #header h1 span.site-name {
  font-weight: bold;
  padding: 0 20px;
}
#wrapper #container #header h1 span.site-slogan {
  line-height: 12px;
  font-style:italic;
  font-size:14pt;
  font-weight: normal;
}


#wrapper #container #header h1 a:hover {
  text-decoration: none;
}

#wrapper #container .breadcrumb {
  font-size: 0.92em;
}

#wrapper #container .breadcrumb, #wrapper #container .breadcrumb a {
  color: #A30000;
}

#mission {
  padding: 1em;
  background-color: #fbfcfd;
  border: 1px solid #e0e5fb;
  margin-bottom: 2em;
}