/**
 * @file
 * Positioning for a fixed-width, desktop-centric layout.
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

/**
 * Center the page.
 *
 * If you want to make the page a fixed width and centered in the viewport,
 * this is the standards-compliant way to do that.
 */
section
 {
  width:100%;
  overflow:hiddenl
  clear:both;
  float:none;
 }
 
#section-header
 {
  height:122px;
 }
 
.one-fifth
 {
  display:inline-block;
  width:19.5%;
  vertical-align:top;
 }
 
.two-fifths
 {
  display:inline-block;
  width:39.5%;
  vertical-align:top;
 }
 
#front-row-1 .block,
#front-row-2 .block
 {
  border-style:solid;
  border-width:1px;
  border-color:#d8d7d5;
  background:#ffffff;
  width:21.9%;
  padding:0px;
  margin-left:20px;
  margin-right:20px;
  display:inline-block;
  position:relative;
 }
 
#front-row-1 .block
 {
  overflow:hidden;
 }
 
#front-row-2 .block
 {
  height:350px;
  width:25%;
  overflow:hidden;
 }

#front-row-2 img.frontblock-img
 {
  height:200px;
 }
 
#page,
.inner,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  clear: both;
}

.block .inner
 {
  width:100% !important;
 }
 
#slideshow img
 {
  width:100%;
  height:auto;
 }

/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
  padding-left: 10px;
  padding-right: 10px;
  border-left: 0 !important;
  border-right: 0 !important;
  word-wrap: break-word;
  *behavior: url("/path/to/boxsizing.htc");
  _display: inline;
  _overflow: hidden;
  _overflow-y: visible;
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  *position: relative;
  *zoom: 1;
}
#header:before,
#header:after,
#main:before,
#main:after,
#footer:before,
#footer:after {
  content: "";
  display: table;
}
#header:after,
#main:after,
#footer:after {
  clear: both;
}

/* Navigation bar */
#main {
  /* Move all the children of #main down to make room. */
  padding-top: 1em;
  position: relative;
}
#navigation {
  /* Move the navbar up inside #main's padding. */
  height: 3em;
  width: 1200px;
  padding-left:0px;
  padding-right:0px;
}

#slideshow
 {
  height:470px;
 }
 
.not-front #slideshow
 {
  height:auto !important;
 }

/**
 * The layout when there is only one sidebar, the left one.
 */

/* Span 4 columns, starting in 2nd column from left. */
.sidebar-first #content {
  float: left;
  width: 825px;
  margin-left: 360px;
  margin-right: -1200px;
  padding-left: 15px;
  padding-right: 0px;
}

/* Span 1 column, starting in 1st column from left. */
.sidebar-first .region-sidebar-first {
  float: left;
  width: 345px;
  margin-left: 0px;
  margin-right: -360px;
  padding-left: 0px;
  padding-right: 15px;
}

/**
 * The layout when there is only one sidebar, the right one.
 */

/* Span 4 columns, starting in 1st column from left. */
.sidebar-second #content {
  float: left;
  width: 825px;
  margin-left: 0px;
  margin-right: -840px;
  padding-left: 0px;
  padding-right: 15px;
}

/* Span 1 column, starting in 5th column from left. */
.sidebar-second .region-sidebar-second {
  float: left;
  width: 345px;
  margin-left: 840px;
  margin-right: -1200px;
  padding-left: 15px;
  padding-right: 15px;
}

/**
 * The layout when there are two sidebars.
 */

/* Span 3 columns, starting in 2nd column from left. */
.two-sidebars #content {
  float: left;
  width: 450px;
  margin-left: 360px;
  margin-right: -840px;
  padding-left: 15px;
  padding-right: 15px;
}

/* Span 1 column, starting in 1st column from left. */
.two-sidebars .region-sidebar-first {
  float: left;
  width: 345px;
  margin-left: 0px;
  margin-right: -360px;
  padding-left: 0px;
  padding-right: 15px;
}

/* Span 1 column, starting in 5th column from left. */
.two-sidebars .region-sidebar-second {
  float: left;
  width: 345px;
  margin-left: 840px;
  margin-right: -1200px;
  padding-left: 15px;
  padding-left: 0px;
}

/* Media queries */
@media screen and (max-width: 1199px) and (min-width: 980px)
 {
  /* 980px */
  #page, #navigation, .region-bottom, .inner
   {
    width:980px;
   }
  #slideshow
   {
    width:980px;
    height:383;
   }
  .sidebar-first #content
  {
   width: 671px;
   margin-left: 294px;
   margin-right: -980px;
  }
 .sidebar-first .region-sidebar-first
  {
   width: 279px;
   margin-right: -294px;
   }
  .sidebar-second #content
  {
    width: 671px;
    margin-right: -686px;
  }
 .sidebar-second .region-sidebar-second
  {
   width: 279px;
   margin-left: 686px;
   margin-right: -980px;
  }
  .two-sidebars #content
  {
   width: 362px;
   margin-left: 294px;
   margin-right: -686px;
  }
 .two-sidebars .region-sidebar-first
  {
   width: 279px;
   margin-right: -294px;
  }
 .two-sidebars .region-sidebar-second
  {
    width: 279px;
    margin-left: 686px;
    margin-right: -980px;
  }
 .region-footer
  {
   font-size:0.8em !important; 
  }
  #front-row-1 .block, #front-row-2 .block
   {
    width:22.9%;
    margin-left:10px;
    margin-right:10px;
   }
  img.frontblock-img
   {
    height:130px !important; 
   }
  #front-row-2 .block
   {
    height:290px;
   }
 }
@media screen and (max-width: 979px) and (min-width: 768px)
 {
  /* 768px */
  body { font-size:0.9em; }
  #page, #navigation, .region-bottom, .inner
   {
    width:768px;
   }
  #slideshow
   {
    width:768px;
    height:300px;
   }
  .sidebar-first #content
  {
   width: 531px;
   margin-left: 230px;
   margin-right: -768px;
   padding-left:7px;
  }
 .sidebar-first .region-sidebar-first
  {
   width: 223px;
   margin-right: -230px;
   padding-right:7px;
   }
  .sidebar-second #content
  {
    width: 531px;
    margin-right: -538px;
    padding-right:7px;
  }
 .sidebar-second .region-sidebar-second
  {
   width: 223px;
   margin-left: 538px;
   margin-right: -768px;
   padding-left:7px;
  }
  .two-sidebars #content
  {
   width: 294px;
   margin-left: 230px;
   margin-right: -538px;
   padding-left:7px;
   padding-right:7px;
  }
 .two-sidebars .region-sidebar-first
  {
   width: 223px;
   margin-right: -230px;
   padding-right:7px;
  }
 .two-sidebars .region-sidebar-second
  {
    width: 223px;
    margin-left: 538px;
    margin-right: -768px;
    padding-left:7px;
  }
 #block-search-form input.form-text
  {
   width: 70% !important;
  }
 #navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited
   {
    font-size:1em !important;
   }
 #front-row-1 .block, #front-row-2 .block
   {
    width:23%;
    margin-left:5px;
    margin-right:5px;
   }
  img.frontblock-img
   {
    height:100px !important; 
   }
  #front-row-1 .block
   {
    height:225px !important;
    font-size:0.9em;
   }
  #front-row-2 .block
   {
    height:260px;
    font-size:0.9em;
   }
 }
@media screen and (max-width: 767px)
 {
  /* 480px */
  #page, #navigation, .region-bottom, .inner
   {
    width:480px;
    overflow:hidden;
   }
  #content,
  .sidebar #content,
  .sidebar,
  #slideshow,
  .block
   {
    width: auto !important;
    margin-left:0px !important;
    margin-right:0px !important;
    float:none !important;
    clear:both !important;
    overflow:hidden;
   }
  #slideshow
   {
    height:188px;
   }
  .nivo-caption
   {
    font-size:0.7em !important;
    line-height:1em !important;
   }
  .nivo-caption h1,
  .nivo-caption h2,
  .nivo-caption h3
   {
    font-size:0.9em;
   }
  #section-header
   {
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
   }
  #logo,
  #name-and-slogan
   {
    line-height:normal !important;
    height:auto !important;
    float:none !important;
   }
  #logo img
   {
    margin-top:10px;
    margin-bottom:10px;
   }
  .one-fifth,
  .two-fifths
   {
    display:block;
    width:100%;
    text-align:center;
   }
  .block
   {
    text-align:center;
   }
  #front-row-1 .block, #front-row-2 .block
   {
    width:49% !important;
    font-size:0.8em;
   }
 }
@media screen and (max-width: 479px)
 {
  /* 320px */
  #page, navigation, .inner
   {
    width:320px;
   }
  #slideshow
   {
    height:125px;
   }
  #name-and-slogan
   {
    font-size:1em !important;
   }
  #block-search-form input.form-text
  {
   width: 70% !important;
  }
  img.frontblock-img
   {
    height:100px !important; 
   }
  #front-row-1 .block, #front-row-2 .block
   {
    width:48% !important;
    height:220px !important;
    font-size:0.8em;
   }
  #front-row-2 .block
   {
    height:270px !important;
   }
 }