/**
 * This makes images have a width relative to the container they are placed in.
 * by default it's 100% of the allowed width within the container.
 */
@import url(http://fonts.googleapis.com/css?family=Corben:bold);
@import url(http://fonts.googleapis.com/css?family=Cabin:bold);
img {
  max-width: 100%;
}
h1 {
  text-align: center;
  margin: 10px 0 20px 0;
  font-size: 4.5em;
  font-family: 'Corben', arial, serif;
  color: #eee;
  text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
}
h2, h3 {
  font-family: 'Cabin', arial, serif;
  color: #333;
}
em {
  font-weight: bold;
}
p {
  font-family: georgia, serif;
  line-height: 1.35em;
  color: #333;
}
.page-header {
  margin-bottom: 0px;
}
.region-inner {
  background: #ddd;
  border: 5px solid #eee;
  margin-bottom: 20px;
  padding: 0 15px 15px 15px;
  -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome */
}
.footer {
  margin-bottom: 30px;
}
.footer .region-inner {
  margin-bottom: 0;
  padding: 15px;
}
.footer p {
  margin: 0px;
  font-size: .75em;
  text-align: center;
}

/**
 * link styling
 */
a {
  text-decoration: none;
  color: #04c;
}
a:hover {
  color: #666;
}
/**
 * Menu Styling
 */
ul a {
  color: #000;
}
ul {
  list-style:none;
  padding: 0;
  margin: 10px 0 10px 0;
  line-height: 1.5em;
}
ul ul {
  margin: 0 7px 0 7px;
}
li {
  padding: 0 7px 0 7px;
  background-color: #ccc;
  text-transform: uppercase;
}
/**
 * Content sizing and position (within grids)
 */
.half-size {
  width: 50%;
}
.third-size {
  width: 33%;
}
.quarter-size {
  width: 25%;
}
.float-left {
  float: left;
  margin-right: 15px;
  margin-bottom: 5px;
}
.float-right {
  float: right;
  margin-left: 15px;
  margin-bottom: 5px;
}

.action {
  font-size: 1.2em;
  background: #333;
  display: block;
  padding: 10px 20px;
  text-transform: uppercase;
  text-align: right;
}
.action p {
  color: #fff;
  margin: 0;
  padding: 3px 0;
}

/**
 * Region priorities
 * 
 * concept
 * regions and inner-region can both have priorities
 * they are used to decide which elements to keep when the
 * viewing devide go from a large viewport to a smaller one.
 * 
 * there are 5 steps always, high, medium, low, decoration
 * always:
 * is content which should always be shown or content where it priority haven't been decided yet.
 * high, medium and low:
 * each of these are different priorities where low will be shown when there is plenty of screen real-estate.
 * decoration:
 * content that is just there to make the page look pretty.
 * 
 */

.prio-always,
.prio-high,
.prio-medium,
.prio-low,
.prio-decoration {
  
}

@media screen and (min-width: 1024px) {
  .footer-left .action,
  .footer-middle .action,
  .footer-right .action {
    background: #666;
  }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .prio-low {
    display: none;
  }
  h1 {
    margin: 10px 0 20px 0;
    font-size: 3em;
  }
  
  .container-12 .main-content {
    width:388px; /* changed it to 8 units instead of 7 */
    left:200px; /* pushing it 4 units instead of 3 */
  }
  .container-12 .sidebar-left {
    width:188px; /* change it to 4 units instead of 3 */
    left:-400px; /* pull it 8 units instead of 7 */
    margin-right: 0; /* this is omega */
  }
  .container-12 .teaser-left {
    width: 588px;
  }
  .container-12 .teaser-left .half-size {
    width: 33%;
  }
  .container-12 .footer-left {
    float: none;
  }
  .container-12 .footer-left .region-inner {
    margin-bottom: 0;
  }
  .container-12 .footer-middle {
    clear:left;
    
    margin-left: 0;
  }
  .container-12 .footer-middle,
  .container-12 .footer-right {
    width:288px;
    margin-top: 15px;
  }
  .action {
    font-size: 1.4em;
  }
  .footer-left .action,
  .footer-middle .action,
  .footer-right .action {
    background: #666;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    margin: 10px 0 20px 0;
    font-size: 2em;
  }
  .action {
    font-size: 1.6em;
    font-weight: bold;
  }
  .footer-left .action,
  .footer-middle .action,
  .footer-right .action {
    font-size: 1em;
    padding: 0 20px;
    clear: both;
  }
  .prio-medium,
  .prio-low,
  .prio-decoration {
    display:none;
  }
}