/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
********************************************************
* modify 12/26/2012 / http://www.3d-hobby-art.de/
*/

/* #Base 960 Grid
================================================== */
.container{position:relative;width:960px;margin:0 auto;padding:0}
.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px}
.row{margin-bottom:20px}
.column.alpha,.columns.alpha{margin-left:0}
.column.omega,.columns.omega{margin-right:0}
.container .one.column,.container .one.columns{width:40px}
.container .two.columns{width:100px}
.container .three.columns{width:160px}
.container .four.columns{width:220px}
.container .five.columns{width:280px}
.container .six.columns{width:340px}
.container .seven.columns{width:400px}
.container .eight.columns{width:460px}
.container .nine.columns{width:520px}
.container .ten.columns{width:580px}
.container .eleven.columns{width:640px}
.container .twelve.columns{width:700px}
.container .thirteen.columns{width:760px}
.container .fourteen.columns{width:820px}
.container .fifteen.columns{width:880px}
.container .sixteen.columns{width:940px}
.container .one-third.column{width:300px}
.container .two-thirds.column{width:620px}
/* Offsets */
.container .offset-by-eight{padding-left:480px}

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  #footer,#wrapper{width:778px}
  .container{width:768px}
  .container .column,.container .columns{margin-left:10px;margin-right:10px}
  .column.alpha,.columns.alpha{margin-left:0;margin-right:10px}
  .column.omega,.columns.omega{margin-right:0;margin-left:10px}
  .alpha.omega{margin-left:0;margin-right:0}
  .container .one.column,.container .one.columns{width:28px}
  .container .two.columns{width:76px}
  .container .three.columns{width:124px}
  .container .four.columns{width:172px}
  .container .five.columns{width:220px}
  .container .six.columns{width:268px}
  .container .seven.columns{width:316px}
  .container .eight.columns{width:364px}
  .container .nine.columns{width:412px}
  .container .ten.columns{width:460px}
  .container .eleven.columns{width:508px}
  .container .twelve.columns{width:556px}
  .container .thirteen.columns{width:604px}
  .container .fourteen.columns{width:652px}
  .container .fifteen.columns{width:700px}
  .container .sixteen.columns{width:748px}
  .container .one-third.column{width:236px}
  .container .two-thirds.column{width:492px}
  /* Offsets */
  .container .offset-by-eight{padding-left:384px}
}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
.header {
 height: 150px;
 }
  #footer,#footer-bottom{-webkit-border-radius:0;-moz-border-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}
  #footer{margin-bottom:0}
  body{background:#000!important}
  #footer,#wrapper{width:320px;-webkit-box-shadow:none;box-shadow:none}
  #nav-top {
    background: none !important;
    height: 37px;
    border-bottom: 3px solid #B92507;
    margin-bottom: 15px;
}
    #nav-top {
    float: none;
  }
    .js #top-menu,
  #nav-top ul li a {
    display: none;
  }
  .js .selectnav{display:block}
  .container{width:300px}
  .container .columns,.container .column{margin:0}
  .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:300px}
  /* Offsets */
  .container .offset-by-eight{padding-left:0}
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #footer,#footer-bottom{-webkit-border-radius:0;-moz-border-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}
  #footer,#wrapper{width:440px;-webkit-box-shadow:none;box-shadow:none}
  .container{width:420px}
  .container .columns,.container .column{margin:0}
  .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:420px}
}

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}
/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}
/* You can also use a <br class="clear" /> to clear columns */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}