/* Copyright 2011 Radio Mint Street | Blue Carbon Studios. All Rights Reserved */
@import url(xcs.css);

@media screen, projection {
body {
  min-width: 640px;
}
#main {
  margin-top: 0;
}
/* highlights */
div#crumb {
  padding:0;
  height: 0;
  margin: 0;
}
#home-highlights {
  width: 100%;
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  height: 239px;
  margin: 0;
  overflow: hidden;
}
h2, h3 {
  font-family: 'open sans', arial, sans-serif;
  border: none;
}
#home-highlights h2 {
  color: #222;
  font-size:30px;
  padding: 0;
  margin: 1em 0 0 0;
  line-height:44px;
}
#home-highlights h3 {
  font-size: 18px;
  color: #666;
  margin: 1em 0 0.786em;
}
#home-highlights .top-highlight, #more-highlights {
  margin: 0 auto;
  max-width: 936px;
  overflow: hidden;
  padding: 0 1em;
}
#home-highlights .top-highlight img {
  float: right;
  margin-right: 36px;
  margin-top: 8px;
}
#more-highlights {
  border-bottom: 1px solid #e5e5e5;
  min-height: 11em;
}
#more-highlights div {
  width: 31.5%;
  float: left;
  margin-right: 24px;
}
#more-highlights div.last {
  margin-right:0;
  width: 28%;
}
#more-highlights h2, #more-highlights h3 {
  border: none;
}
#more-highlights h2 {
  margin:30px 0 0 0; 
  position:relative;
}
#more-highlights h3 {
  margin:0 0 8px 0;
  font-size: 1em;
  color: #666;
  font-family: arial, sans-serif;
}

span.home-new {
  color: #CC0000;
  font-family: arial,serif;
  font-size: 10px;
  position: absolute;
  top: -1em;
  padding-left: 0.5em;
}

#home-highlights .top-highlight img.screenshot {
  background: #fff;
  box-shadow: 1px 1px 4px #999;
  -webkit-box-shadow: 1px 1px 4px #999;
  -moz-box-shadow: 1px 1px 4px #999;
}
/* other featured products */
  #home-products {
    float: left;
    width: 65.82%;
  }
  #home-products h2, #home-blog h2 {
    padding-top: 1.2em;
  }
  #home-products ul {
    margin: 1.2em 0 0 0;
    padding: 0;
    list-style: none;
  }
  #home-products li {
    width: 48%;
    display: inline;
    float: left;
    margin: 0 0 .85em 0;
  }
  #home-products li.break {
    clear: left;
    margin-right: 12px;
  }
  #home-products img {
    float: left;
    padding: 0.4em 1em 0 0;
  }
  #home-products li span {
    display: block;
    margin-left: 4.4em;
    margin-right: 2em;
  }
  #home-products p {
    margin: 0 0 0 4.4em;
    float: left;
    display: inline;
  }
  #home-products p a {
    background: url(img/all-products-icon.png) left center no-repeat;
    padding-left: 1.9em;
    display: block; 
    font-weight: bold;
  }
  #home-products em {
    font-style: normal;
    color: #777; 
  }
  a.cta {
    font-weight: bold;
  }
/* google blog */
  #home-blog {
   width: 31.62%;
   float: right;
  }
  #home-blog p {
    color: #777;
  }
}
/* overrides for browsers that understand media queries */
@media all and (color) {
  body {
    min-width: 1px;
  }
  #home-products li.break {
   width: 50%; 
  }
  #home-highlights .top-highlight img {
    width: auto;
    max-width:284px;
  }
  #more-highlights div {
    width: 31.624%;
  }
}
/* smaller screen rules */
@media screen and (max-width: 1002px) {
  
  #home-highlights .top-highlight, #more-highlights {
    width: 720px;
    min-width: 720px;
  }
  #home-highlights .top-highlight p, #home-highlights .top-highlight h2, #home-highlights .top-highlight h3 {
    margin-left:0;
    clear:left;
  }
  #home-highlights img {
    float:none;
  }
  #home-highlights .top-highlight img {
    float:right;
  }
  #home-highlights h2 {
    width: 360px;
    margin: 1em 0 0.5em 0;
  }
  #more-highlights div {
    width: 31%;
  }
  #home-products li, #home-products li.break {
    width: 100%;
  }
}
@media screen and (max-width: 762px) {
  #home-highlights {
    height:auto;
  }
  #home-highlights .top-highlight, #more-highlights {
    width: 484px;
    min-width: 484px;
  }
  #home-highlights .top-highlight img {
    max-width: 120px;
    margin-right:0;
  }
  #home-highlights h2 {
    font-size: 20px;
    line-height: 33px;
    width: auto;
  }
  #home-highlights h3 {
    font-size: 16px;
  }
  #home-blog, #home-products {
    float: none;
    clear: left;
    width:100%;
  }
  #more-highlights {
    height: auto;
  }
  #more-highlights div {
    width: 29.5%;
  }
  #home-blog h2 {
    margin-top: 22px;
  }
}
@media screen and (max-width: 524px) {
  #home-highlights .top-highlight, #more-highlights {
    width: 90%;
    min-width: 90%;
  }
  #more-highlights div, #more-highlights div.last {
    width: 100%;
    float: none;
  }
}