/*
Theme Name: freebbble
Theme URI: http://freebbble.com/
Author: Hafiz Rahman
Author URI: http://wplover.com/
Description: :) 
Version: 1.0
*/

/*  
    Adaptive50 responsive layout css framework (based on Less Framework)
    by Hafiz Rahman

    50 is the magic number.
    Each column is 30px wide with 10px margin-left and 10px margin-right.

    Media queries:
    1. Big              24 columns  : 50 * 24   = 1200
    2. Normal           18 columns  : 50 * 18   = 900
    3. Tablet           12 columns  : 50 * 12   = 600
    4. Wide Mobile       8 columns  : 50 * 8    = 400
    5. Mobile            6 columns  : 50 * 6    = 300

*/

/*  Normalize
    ------  */

@import url("normalize.css");

/*  The secret sauce
    Read more at http://paulirish.com/2012/box-sizing-border-box-ftw/
    ------  */

* { box-sizing: border-box; -moz-box-sizing: border-box; }
a { text-decoration: none; }
html { font-family: sans-serif; background: #e1eaf0; background: #c0d0d0; }

#header-wrapper {
    background: rgba(255, 255, 255, 0.97);
    overflow: hidden;
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
    width: 100%;
    z-index: 999;
}
#header-about {
    margin: 0 auto;
    text-align: center;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0 0px 5px 5px;
    color: #333;
    font-size: 14px; 
    line-height: 1.5;
}
#header {
    margin: 0 auto;
    padding: 0 0 5px 0;
}
h1#title {
    font-size: 24px;
    padding-left: 10px; 
}
h1#title a {
    color: #333;
    display: inline-block;
    width: 199px;
    height: 51px;
    background: url("logo-freebbble.png") left top no-repeat;

    /* Image replacement */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#about {
    display: none;
}
#utility {
    padding-top: 25px;
}
#utility #search {
    background: #f0f0f0 url("search.png") 3px top no-repeat;
    border: 1px solid #ddd;
    font-size: 12px;
    height: 32px;
    border-radius: 3px;
}
#utility #search:focus {
    background-color: #fff;
}
#utility .button {
    display: inline-block;
    background: #fecc5f;
    padding: 8px 16px;
}
#a-h {
    border-top: 3px double #ddd;
    font-size: 12px;
    padding: 7px 0 2px;
    text-align: center;
    color: #666;
}
#a-h p {
    margin: 0;
    background: #b2e3f4;
    display: inline-block;
    padding: 3px 7px;
    border-radius: 3px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
    line-height: 1.5;
}
#a-h .a-h-l {
    color: #888;
}
#a-h a {
    text-decoration: underline;
    color: #137193;
    font-weight: bold;
}
.a-h-s {
    padding-left: 5px;
    padding-right: 5px;
}
.a-h-s img {
    vertical-align: bottom;
}
#a-h #top-nav {
    margin: 0;
}
#a-h #top-nav li {
    display: inline-block;
    margin: -7px 0;
    border-right: 1px solid #ddd;
}
#a-h #top-nav li:last-child {
    border-width: 0;
}
#a-h #top-nav li a {
    font-size: 14px;
    padding: 15px 20px;
    display: block;
    text-decoration: none;
    font-weight: 400;
}
#a-h #top-nav li a:hover {
    background: #f0f0f0;
}
#searchform {
}
#searchform #search {
    background: #f0f0f0 url("search.png") 1px 1px no-repeat;
    border: 1px solid #ddd;
    font-size: 12px;
    height: 32px;
    border-radius: 3px;
    padding: 10px 25px 10px;
    width: 95%;
    margin: 0 auto 30px;
    display: block;
}
#searchform #search:focus {
    background-color: #fff;
}
/* Hide ad */
#a-h p {
    display: none;
}

#content {
    margin: 0 auto;
/*    background: url("xgrid.png") left top repeat; */
    overflow: hidden;
    position: relative;
}

#freebbble {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    color: #fff;
    padding: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: #f66a80;
    margin: 0;
}
#freebbble a {
    color: #bd3147;
}
#menu {
    background: #43beec;
    padding: 10px 5px 0 0;
    margin-top: 20px;
    border-radius: 3px;
}
#sidebar-pro {
    border-bottom: 1px solid rgba(255, 255,255, 0.4);
    margin: 20px 0 40px;
}
#sidebar-pro h3 {
    margin-left: 3px;
    margin-top: 0;
}
#sidebar-pro img {
    display: block;
    margin-left: -3px;
    margin-bottom: 10px;
}
#sidebar-pro p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    font-size: 12px;
    padding: 5px 5px 20px 5px;
    margin-top: 5px;
    margin-bottom: 0;
    
}
#sidebar-pro p span a {
    display: inline;
    text-decoration: underline;
}
#menu-type,
#menu-license { 
    width: 100%; 
    padding: 0 5px 10px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
}
#menu h3 {    
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
}
#menu ul { 
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu li {
    margin: 0  0 15px 0;
}
#menu a {
    font-size: 12px;
    color: #dcf3fc;
    display: block;
}
#menu a:hover {
    color: #fff;
}
#count {
    padding-bottom: 20px;
}
#count p {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 10px;
}
#count span {
    display: block;
    color: #fff;
    font-size: 24px;
    margin: 0 auto 10px;
    padding-right: 6px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); 
    width: 67px;
    height: 67px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 67px;
    letter-spacing: 0;
    line-height: 65px;
} 
#freebie-box {
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 10px;
}
#premium-box {
    padding-bottom: 0px;
    margin: 0 auto 0px;
    border-bottom: 1px double rgba(255, 255, 255, 0.5);
    /* display: none; */
    width: 890px;
}
.premium-item {
    position: relative;
}
.premium-label {
    background: rgb(255,175,75); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */

    position: absolute;
    display: inline-block;
    left: -5px;
    top: 15px;
    color: #D64000;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.premium-label:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 4px 3px;
    border-style: solid;
    border-color: #333 #333 transparent transparent;
}
.premium-item-content {
    margin-top: -10px;
}
.premium-item-content h2 {
    padding: 15px 10px 10px;    
    margin: 0;
    text-align: center;
}
.premium-item-content h2 a {
    font-size: 14px;
    color: #435f6d;
}
.premium-item-content p {
    padding: 10px;
    font-size: 12px;
    color: #999;
    margin: 0 auto;
    border-top: 1px solid #eee;
    width: 90%;
    text-align: center;
}
.premium-item-content .meta {
    padding: 10px 0 20px;
    text-align: center;
    width: 100%;
/*   
    position: absolute;
    bottom: 0;
*/
}
.freebie,
.premium-item {
    float: left;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background-color: #fff;
    padding: 0;
    position: relative;
}
.freebie {
    padding: 10px;
}
.freebie img,
.premium-item img {
    width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 3px 3px 0 0;    
}
.freebie img:hover {
    opacity: 0.8;  
}
.freebie-content {
    overflow: hidden;
    position: relative;
}
.freebie-social {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    background: #fafafa;
    padding-top: 7px;
    padding-bottom: 5px;
    text-align: center;
    border-top: 1px solid #fff;
    margin-top: -4px;
}
.freebie h2 {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 0;
    width: 100%;
}
.freebie h2 a {
    color: #435f6d;
}
.freebie .meta {
    float: left;
    width: 100%;
    padding-top: 0;
}
.freebie .creator {
    font-size: 12px;
    margin-top: 7px;
    float: left;
    width: 100%;
    color: #999;
}
.freebie .creator a {
    color: #777;
    background: #eaeaea;
    padding: 3px 5px;
    border-radius: 2px;
}
.freebie .creator a:hover {
    background: #dadada;
    color: #666;   
}
.freebie .date {
    font-size: 12px;
    margin-top: 5px;
    float: right;
    text-align: right;
    color: #999;
    width: 40%; display: none;
}
.freebie .license,
.freebie .type {
    float: left;
    width: 60%;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    margin-top: 5px;
}
.freebie .license a,
.freebie .type a {
    font-size: 12px;
    color: #999;
}
.freebie .meta {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}
.freebie .end {
    position: absolute;
    border-top: 1px solid #eee;
    bottom: 0;
    left: 0;
    padding: 5px 10px 0;
    margin: 0 0px; 
    background: #fafafa; 
    width: 100% !important;
    border-radius: 0 0 3px 3px;
}
.freebie .type span a,
.freebie .license span a {
    color: #555;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    display: block;
    margin-top: 1px;
    font-size: 12px;
    text-transform: none;
}
.freebie .download {
    float: right;
    font-size: 12px;
    padding: 10px 15px;
    margin-top: 3px;
}

/*
 * Single freebie page
 *---------------------------------------------------------*/
.freebie-single {
    background: #fff;
    padding: 20px 20px;
    border-radius: 3px;
    margin-top: 10px;
}
.freebie-single h2 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.freebie-single .freebie-image a {
    display: block;
}
.freebie-single .freebie-image img {
    width: 100%;
}

.freebie-single .what-is-it {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}
.freebie-single .what-is-it a {
    color: #333;
    font-weight: bold;
}
.freebie-single .what-is-it a.button {
    font-size: 12px;
    color: #333;
    padding: 10px 20px;
    line-height: 1.25;
}
.freebie-single .end {
    display: none;
}
h2.subcontent-heading {
    color: #333;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 0;
}


/*
 * Karedock-Free on Single Post
 *---------------------------------------------------------*/
#karedock-free {
    background: #549eb9;
    padding-bottom: 10px;
    border-radius: 5px;
    width: 98%;
    margin: 0 auto;
    box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
}
#karedock-free-content {
    padding: 20px 20px 0;
    border-radius: 3px;
    margin-top: 20px;
    color: #fff;
}
#karedock-free-content #karedock-image {
    float: left;
    width: 30%;
    text-align: center;
}
#karedock-free-content #karedock-image p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin: 5px 0 10px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
   
}
#karedock-free-content img {
    padding: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 1px #000;
}

#karedock-free-content #karedock-content {
    float: right;
    width: 70%;
    margin-top: -15px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    padding: 15px;
}
#karedock-free-content #karedock-content p,
#karedock-free-content #karedock-content ul {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.5;
}
#karedock-free-content #karedock-content ul {
    margin-left: -20px;
}
#karedock-free-content #karedock-content li {
    list-style-type: none;
    background: url('bullet_go.png') left 2px no-repeat;
    padding-left: 20px;
    margin-left: -20px;
    margin-bottom: 5px;
}
#karedock-free-content #karedock-content h2 {
    font-size: 14px;
    margin: 0;
}
#karedock-free form {
    background: #76d5f8;
    padding: 20px 30px;
    border-radius: 3px;
    width: 98%;
    margin: 0 auto;
    position: relative;
}
#karedock-free form:after {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#karedock-free form:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #76d5f8;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}
#karedock-free label {
    font-size: 12px;
    color: #127ba2;
    padding-right: 20px;
    display: block;
    margin-bottom: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
}
#karedock-free #mce-EMAIL {
    background: #fff;
    border: 1px solid #81d0ed;
    font-size: 12px;
    height: 32px;
    border-radius: 3px;
    padding: 0 10px;
    width: 80%;
    margin-bottom: 10px;
}
#karedock-free #mc-embedded-subscribe {
    width: 170px;
    padding: 9px 0;
}
#karedock-free #form-note {
    font-size: 11px;
    margin: 5px 0 0;
    color: #127ba2;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);    
}

#pagination-pro {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border-radius:3px;
    font-size: 12px;
    color: #999;
}
#pagination-pro p {
    margin: 0;
}
#pagination-pro span {
    color: #333;
}
#pagination-pro a {
    text-decoration: underline;
    color: #999;
}
#pagination-pro a:hover {
    color: #333;
}

/*
 * Single generic page
 *---------------------------------------------------------*/
.generic-date {
    margin: -10px 0 0;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
}

.generic-content {
    font-size: 12px;
}
/*
 * Footer
 *---------------------------------------------------------*/
#footer-wrapper {
    background: #64717b;
    padding: 10px 0;
    margin-bottom: -20px;
}
#footer {
    overflow: hidden;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto;
}
#copy,
.browse,
#info {
    float: left;
    padding: 15px;
}
#footer h3 {
    font-size: 14px;
    color: #fff;
}
.browse ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    width: 100%;
    float: left;
}
.browse li {
    margin-bottom: 5px;
    float: left;
    width: 50%;
}
#mailing-list {
    margin: 10px auto;
    background: #f0f0f0 url("gray_jean.png");
    border-radius: 3px;
}

#mc_embed_signup {
    padding: 10px;
    text-align: center;
}
#mc_embed_signup label {
    font-size: 12px;
    margin-bottom: 10px;
    margin-right: 10px;
    color: #777;
    text-shadow: 1px 1px rgba(255, 255, 255, 1);
    background: url("arrow-right.png") right top no-repeat;
    padding-right: 20px;
}
#mc_embed_signup #mce-EMAIL {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 12px;
    height: 32px;
    border-radius: 3px;
    padding: 0 10px;
    display: inline-block;
    width: 250px;
}

#footer a {
    color: #bdcfdc;
}
#footer li a {
    font-size: 12px;
    display: block;
    padding: 0 10px 7px 0;
    color: #bdcfdc;
}
#footer a:hover {
    color: #fff;
}
#nope {
    background: #778590;
    padding: 10px;
    border-radius: 3px;
    color: #fff;
}

/*
 * Single Page styling
 *---------------------------------------------------------*/ 
#page-content {
    background: #fff;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #777;
}
#page-content a {
    color: #ea9712;
    text-decoration: underline;
}
#page-content .entry-title {
    padding: 30px 20px 10px;
    margin: 0 20px;
    color: #666;
    border-bottom: 3px double #eee;
    letter-spacing: -1px;
    text-align: center !important;
}
#page-content h3 {
    margin: 30px 0 0;
    color: #333;
}
#page-content-box {
    background: url("xgrid.png") left top repeat;    
}
#page-content-main {
    float: left;
    width: 800px;
    padding: 10px 40px 0;
}
#page-content-main .full-width {
    padding-top: 20px;
}
#page-content-main img {
    max-width: 700px;
    display: block;
    margin: 20px auto;
    border-radius: 3px;
}
#page-content-asides {
    float: right;
    width: 400px;
    padding: 40px;
    color: #777;
}
#page-content-asides h3 {
    color: #333;
}
#page-content-asides .tldr {
    margin-top: 0;
    font-size: 12px;
    color: #999;
}
#page-content-asides ul {
    margin-left: 0;
    padding-left: 0;
}
#page-content-asides li {
    margin-bottom: 10px;
    line-height: 1.75;
    list-style-type: none;
    background: url("bullet-white.png") left 0 no-repeat;
    padding-left: 24px;
}
#page-content .buy-button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    text-decoration: none;
    color: #C56D08;
    line-height: 1.25;
}
#page-content .ps {
    font-size: 12px;
    background: #f0f0f0;
    padding: 10px 20px;
    border-radius: 3px;
}

#menu div#bsap_1287757 a {
    color: #999;
    font-weight: 400;
    margin: 5px 10px 10px;
    height: 125px;
}

#freebie-nav {
    margin: 40px 0;
    position: relative;
}
.freebie-nav-prev a,
.freebie-nav-next a {
    padding: 30px 20px;
    display: block;
    border: 1px solid #ddd;
    color: #333;
}
.freebie-nav-prev a:before {
    content: "\2190 ";
}
.freebie-nav-next a:after {
    content: "\2192 ";
}
.freebie-nav-prev {
    float: left;
    width: 30%;
}
.freebie-nav-next {
    float: right;
    width: 30%;
    text-align: right;
}
/* #5: Mobile */
@media only screen and (min-width: 300px) {
    #header,
    #content,
    #footer,
    #page-content-main,
    #page-content-asides {
        width: 300px; 
    }
    #page-content-main img {
        max-width: 100%;
    }
    #page-content-asides {
        padding-top: 0;
        padding-bottom: 10px;
        border-top: 1px solid #ddd;
    }        
    #header #title {
        width: 100%;
        text-align: center;
    }
    #header #utility {
        width: 100%;
        padding-bottom: 10px;
    }
    #header #utility #searchform {
        display: block;
        border-width: 0;
        margin: 0 10px 20px;
    }
    #header #utility #search {
        width: 100%;
        padding: 20px 20px 20px 32px;
        background: #f0f0f0 url("search.png") 3px 7px no-repeat;
    }
    #header #utility .button {
        display: block;
        width: 280px;
        padding: 14px;
        margin: 0 10px;
    }
    #a-h #top-nav {
        padding-left: 0;
    }    
    #a-h #top-nav li {
        display: block;
        border-bottom: 1px solid #ccc;
        margin: 0;
        border-right-width: 0;
    }    
    .freebie {
        float: none;
        width: 280px;
        margin: 20px auto;
        height: 370px;
        max-height: 370px;        
    }
    .premium-item {
        float: none;
        width: 280px;
        margin-bottom: 20px;
        margin-left: 10px;
/*
        height: 300px;
        max-height: 300px;
*/                
    }    
    .freebie-single .freebie-content {
        padding: 0;
    }
    .freebie .end {
        width: 260px;
    }
    #sidebar {
        padding-bottom: 20px;
        width: 280px;
        margin: 30px auto 0;
    }
    #menu {
        padding-bottom: 5px;
    }
    #menu h3 {
        float: left;
        width: 60px;    
    }
    #menu #sidebar-pro h3 {
        float: none;
        width: auto;    
    }    
    #menu ul {
        overflow: hidden;
        width: 100%;
    }
    #menu li {
        float: left;
        margin: 10px 20px 0 0;
    }
    #count {
        display: none;
    }
    #page-content {
        margin-top: 20px;
    }    
    #page-content .freebie-sub-form .name {
        width: 100% !important;
        margin-bottom: 20px !important;
    }  
}

/* #4: Wide Mobile */
@media only screen and (min-width: 460px) {
    #header,
    #content,
    #footer,
    #mailing-list,
    #page-content-main,
    #page-content-asides {
        width: 400px;
    }
    #content {
        padding-top: 10px;
    }
    #header #utility {
        width: 100%;
        text-align: center;
    }
    #header #utility #searchform {
        display: inline-block;
        border-right: 1px solid #ddd;
        padding-right: 20px;
        margin-right: 18px;
        margin-bottom: 0;
    }        
    #header #utility #search {
        width: auto;
        background: #f0f0f0 url("search.png") 3px top no-repeat;
        padding: 0 0 0 30px;        
    }
    #header #utility .button {
        display: inline-block;
        background: #fecc5f url("rss.png") 7px 50% no-repeat;
        padding: 8px 16px 8px 24px;
        width: auto;
    }    
    .freebie {
        width: 380px;
        height: 450px;
        max-height: 450px;        
    }
    .premium-item {
        width: 380px;
        /*
        height: 380px;
        max-height: 380px;        
        */
    }    
    .freebie .end {
        width: 360px;
    }
    #sidebar {
        padding-bottom: 20px;
        width: 380px;
        margin: 0 auto -20px;
    }
    #menu {
        padding-bottom: 5px;
    }
    #menu h3 {
        float: left;
        width: 60px;    
    }
    #menu #sidebar-pro h3 {
        float: none;
        width: auto;    
    }        
    #menu ul {
        overflow: hidden;
        width: 100%;
    }
    #menu li {
        float: left;
        margin: 10px 20px 0 0;
    }
    #count {
        display: none;
    }
    #copy,
    .browse,
    #info {
        width: 400px;
    }
           
}


/* #3: Tablet */
@media only screen and (min-width: 720px) {
    #header,
    #content,
    #footer,
    #mailing-list,
    #page-content-main,
    #page-content-asides {
        width: 600px;
    }
    #content {
        padding-top: 10px;
    }
    #header #utility {
        padding-bottom: 20px;
    }
    #header #utility #searchform {
        margin-right: 10px;
    }
    #header #utility #searchform input {
        width: 150px;
    }
    #header #utility .button {
        width: auto;
    }
    #a-h #top-nav {
        margin: 0;
    }    
    #a-h #top-nav li {
        display: inline-block;
        border-bottom-width: 0;
        border-right-width: 1px;
        margin: -7px 0 -7px -3px;
    }    
    .freebie {
        float: left;
        width: 280px;
        margin: 10px;
        height: 360px;
        max-height: 360px; 
        overflow: hidden;       
    }
    .premium-item {
        float: left;
        width: 280px;
        margin: 10px;
        /*
        height: 300px;
        max-height: 300px;        
        */
    }    
    .freebie .end {
        width: 260px;
    }    
    .freebie .meta .type {
        float: left;
        width: 45%;
    }
    .freebie .meta .license {
        float: right;
        width: 45%;
    }      
    #sidebar {
        padding-bottom: 20px;
        width: 580px;
        margin: 0 auto 0;
    }
    #menu {
        padding-bottom: 5px;
    }
    #menu h3 {
        float: left;
        width: 100px;    
    }
    #menu #sidebar-pro h3 {
        float: none;
        width: auto;    
    }        
    #menu ul {
        overflow: hidden;
        width: 450px;
    }
    #menu li {
        float: left;
        margin: 10px 10px 0 0;
    }
    #count {
        display: none;
    }    
    #copy,
    .browse,
    #info {
        width: 300px;
    }
    .freebie-single .freebie-image {
        float: left;
        width: 30%;
        width: 100%;
        text-align: center;
    }    
    .freebie-single .freebie-image img {
        width: auto;
    }
    .freebie-single .freebie-content {
        float: right;
        width: 70%;
        width: 100%;
        margin-top: -15px;
        padding: 20px;
    }    
}

/* #2: Normal */
@media only screen and (min-width: 960px) {
    #header,
    #content,
    #footer,
    #mailing-list {
        width: 900px;
    }
    #page-content-main {
        width: 600px;
    }
    #page-content-asides {
        width: 300px;
        border-width: 0;
    }
    #header #title {
        float: left;
        width: 100%;
        text-align: center;
    }
    #header #bsap_1285775,
    #header #header-thingie {
        float: left;
        width: 100%;
    }
    #header #bsap_1285775 a,
    #header #header-thingie a {
        margin: 0 auto 10px;
        float: none;
    }
    #header #utility {
        float: right;
        width: 400px;
        text-align: right;
    }
    #header #utility #search {
        width: 200px;
    }
    #header #utility .button {
        width: auto;
    }    
    .freebie {
        width: 280px;
        margin: 10px 10px;
        height: 390px;
        max-height: 390px;        
    }
    .premium-item {
        width: 270px;
        margin: 10px 12px;
        height: 400px;
        max-height: 400px;        
    } 
    .freebie {
        width: 410px;
        margin: 15px 20px;
        height: 430px;
        max-height: 430px;
    }
    .premium-item {
        width: 275px;
        margin: 10px 10px 20px;
        height: 380px;      
    }
    .freebie .end {
        width: 310px;
    }
    #sidebar {
        padding-bottom: 20px;
        margin-bottom: 10px;
        width: 880px;
        margin: 0 auto;
    }
    #menu {
        padding-bottom: 5px;
    }
    #menu h3 {
        float: left;
        width: 100px;    
    }
    #menu #sidebar-pro h3 {
        float: none;
        width: auto;    
    }        
    #menu ul {
        overflow: hidden;
        width: 750px;
    }
    #menu li {
        float: left;
        margin: 10px 10px 0 0;
    }
    #count {
        display: none;
    }
    #copy {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* #1: Big */
@media only screen and (min-width: 1200px) {
    #header,
    #content,
    #footer,
    #mailing-list,
    #header-about {
        width: 1200px;
    }

    #header #title {
        float: left;
        width: 300px;
        text-align: left;
    }    
    #header #bsap_1285775,
    #header #header-thingie {
        float: right;
        width: 728px;
        margin: 10px 0;
    }    
    #page-content-main {
        width: 800px;
    }
    #page-content-asides {
        width: 400px;
    }    
    #subscribe {
        width: 1160px;
    }
    #freebie-box {
        width: 900px;
        float: left;
    }
    .freebie {
        width: 410px;
        margin: 10px 40px 10px 0;
        height: 430px;
        max-height: 430px;
    }
    .premium-item {
        width: 275px;
        margin: 10px 10px 20px;
        height: 380px;      
    }
    .freebie .end {
        width: 310px;
    }
    #sidebar {
        float: right;
        width: 300px;
    }
    #menu h3 {
        float: none;
        width: auto;
        padding: 0 10px;
    }
    #menu ul {
        overflow: hidden;
        width: auto; 
     }
    #menu li {
        float: none;
        width: auto;
        padding: 0 10px 0;
    }
    #menu-type li {
        float: left;
        width: 120px;
        margin-right: 10px;
    }
    #menu-type li {
        min-height: 25px;
    }
    #menu li a {
        font-size: 14px;
    }
    #count {
        padding-bottom: 20px;
        display: block;
    }
    #count p {
        text-align: center;
        color: rgba(255, 255, 255, 0.75);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 0 10px;
    }
    #count span {
        display: block;
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        margin: 0 auto 10px;
        padding-right: 6px;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); 
        width: 67px;
        height: 67px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 67px;
        letter-spacing: -1px;
        line-height: 70px;
    } 
    #copy {
        float: left;
        width: 300px;
        border-top-width: 0;
    }    
   
}

/*  CSS 3 buttons thanks to http://www.lab.tommasoraspo.com/simple-web-buttoms/index.html */
.button {
    display: inline-block;
    text-decoration: none;
    font: bold 12px/12px sans-serif;
    padding: 8px 11px;
    color: #555;
    border: 1px solid #dedede;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.button.white {
    background: #f5f5f5;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); /*  WebKit */
    background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
    border-color: #dedede #d8d8d8 #d3d3d3;
    color: #555;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    -moz-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
}
.button.white:hover, .button.white.selected {
    background: #f4f4f4;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#f8f8f8)); /*  WebKit */
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    text-shadow: 0 1px 0 #fdfdfd;
    -webkit-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    -moz-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
}

.button.grey {
    background: #bdbdbd;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#aeaeae'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /*  WebKit */
    background: -moz-linear-gradient(top,  #cacaca, #aeaeae);
    border-color: #b5b5b5 #a1a1a1 #8f8f8f;
    color: #555;
    text-shadow: 0 1px 0 #d4d4d4;
    -webkit-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;
    -moz-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;
    box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;    
}
.button.grey:hover, .button.grey.selected {
    background: #c2c2c2;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bcbcbc', endColorstr='#c2c2c2'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#c2c2c2)); /*  WebKit */
    background: -moz-linear-gradient(top,  #bcbcbc, #c2c2c2);
    border-color: #989898 #8e8e8e #878787;
    text-shadow: 0 1px 0 #dadada;
    -webkit-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;
    -moz-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;
    box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;    
}

.button.pink {
    background: #f67689;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78297', endColorstr='#f56778'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f78297), to(#f56778)); /*  WebKit */
    background: -moz-linear-gradient(top,  #f78297, #f56778);
    border-color: #df6f8b #da5f75 #d55061;
    color: #913944;
    text-shadow: 0 1px 0 #f89ca9;
    -webkit-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1;
    -moz-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1;
    box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1;    
}
.button.pink:hover, .button.pink.selected {
    background: #f67c90;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f56c7e', endColorstr='#f78297'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f56c7e), to(#f78297)); /*  WebKit */
    background: -moz-linear-gradient(top,  #f56c7e, #f78297);
    border-color: #c36079 #c25669 #c14e5c;
    text-shadow: 0 1px 0 #f9a6b4;
    -webkit-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e;
    -moz-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e;
    box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e;    
}

.button.orange {
    background: #fecc5f;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda71', endColorstr='#febb4a'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb4a)); /*  WebKit */
    background: -moz-linear-gradient(top,  #feda71, #febb4a);
    border-color: #f5b74e #e5a73e #d6982f;
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;    
}
.button.orange:hover, .button.orange.selected {
    background: #fecb5e;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fec354', endColorstr='#fecd61'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fec354), to(#fecd61)); /*  WebKit */
    background: -moz-linear-gradient(top,  #fec354, #fecd61);
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
    -webkit-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;
    -moz-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;    
}

.button.green {
    background: #b7d770;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cae285', endColorstr='#9fcb57'); /*  IE */

/*
    background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#9fcb57));
    background: -moz-linear-gradient(top,  #cae285, #9fcb57);
*/
    border-color: #adc671 #98b65b #87aa4a;
    color: #5d7731;
    text-shadow: 0 1px 0 #cfe5a4;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4;    
}
.button.green:hover, .button.green.selected {
    background: #b9d972;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8d872', endColorstr='#b9d972'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#b8d872), to(#b9d972)); /*  WebKit */
    background: -moz-linear-gradient(top,  #b8d872, #b9d972);
    border-color: #8bb14d #83a648 #7d9e45;
    text-shadow: 0 1px 0 #d5e8aa;
    -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295;
    -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295;
    box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295;    
}

.button.blue {
    background: #92dbf6;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe4f8', endColorstr='#6fcef3'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#6fcef3)); /*  WebKit */
    background: -moz-linear-gradient(top,  #abe4f8, #6fcef3);
    border-color: #8dc5da #76b7cf #63abc7;
    color: #42788e;
    text-shadow: 0 1px 0 #b6e6f9;
    -webkit-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa;
    -moz-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa;
    box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa;    
}
.button.blue:hover, .button.blue.selected {
    background: #92dbf6;
    border-color: #7caec0 #68a3ba #5a9cb5;
    text-shadow: 0 1px 0 #bee9fa;
    -webkit-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8;
    -moz-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8;
    box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8;    
}

.button.purple {
    background: #dfaeda;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8c4e4', endColorstr='#d494ce'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#e8c4e4), to(#d494ce)); /*  WebKit */
    background: -moz-linear-gradient(top,  #e8c4e4, #d494ce);
    border-color: #bc9db9 #ad89aa #a1799d;
    color: #7b5777;
    text-shadow: 0 1px 0 #eacae6;
    -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;
    -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;
    box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;    
}
.button.purple:hover, .button.purple.selected {
    background: #e0b1db;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#deabd9', endColorstr='#e0b1db'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#deabd9), to(#e0b1db)); /*  WebKit */
    background: -moz-linear-gradient(top,  #deabd9, #e0b1db);
    border-color: #a482a0 #9b7897 #947090;
    text-shadow: 0 1px 0 #ecd0e9;
    -webkit-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;
    -moz-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;
    box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;    
}

.button.teal {
    background: #9cedef;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7f2f4', endColorstr='#7ce7ea'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#b7f2f4), to(#7ce7ea)); /*  WebKit */
    background: -moz-linear-gradient(top,  #b7f2f4, #7ce7ea);
    border-color: #90c6c8 #78bdc0 #65b6ba;
    color: #437b7d;
    text-shadow: 0 1px 0 #bef3f5;
    -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #c9f5f7;
    -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #c9f5f7;
    box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #c9f5f7;    
}
.button.teal:hover, .button.teal.selected {
    background: #9fedf0;
    border-color: #7db9bb #6bb2b5 #5dacaf;
    text-shadow: 0 1px 0 #c5f4f6;
    -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #b7f2f4;
    -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #b7f2f4;
    box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #b7f2f4;    
}

.button.darkblue {
    background: #a5b8c6;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#becbd6', endColorstr='#88a1b4'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#becbd6), to(#88a1b4)); /*  WebKit */
    background: -moz-linear-gradient(top,  #becbd6, #88a1b4);
    border-color: #a2afb8 #8696a1 #6f818f;
    color: #515f6a;
    text-shadow: 0 1px 0 #c4d0d9;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #ced8e0;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #ced8e0;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #ced8e0;    
}
.button.darkblue:hover, .button.darkblue.selected {
    background: #adbfcb;
    border-color: #8996a0 #798791 #6c7a85;
    text-shadow: 0 1px 0 #ced9e0;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #c2cfd8;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #c2cfd8;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #c2cfd8;    
}

.button.black {
    background: #525252;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e5e5e', endColorstr='#434343'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#434343)); /*  WebKit */
    background: -moz-linear-gradient(top,  #5e5e5e, #434343);
    border-color: #4c4c4c #313131 #1f1f1f;
    color: #fff;
    text-shadow: 0 1px 0 #2e2e2e;
    -webkit-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686;
    -moz-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686;
    box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686;    
}
.button.black:hover, .button.black.selected {
    background: #5a5a5a;
    border-color: #2c2c2c #1c1c1c #101010;
    text-shadow: 0 1px 0 #363636;
    -webkit-box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383;
    -moz-box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383;
    box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383;    
}

/*
 * The important stuffs. The ones that you should copy-paste and use.
 */
 .wp-pagenavi {
    text-align: center;
    margin: 0;
    padding-top: 20px;
    width: 100%;
    clear: both;

}
.wp-pagenavi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.wp-pagenavi li {
    display: inline;
}
.wp-pagenavi a,
.wp-pagenavi span {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    margin: 5px 3px;
    padding: 5px 10px;
    display: inline-block;
    border-top: 1px solid #fff;
    color: #717171;
    font-size: 12px;
    text-shadow: white 0 1px 0;
    background-color: #f5f5f5;
}
.wp-pagenavi a:first-child, .wp-pagenavi a.first {
    margin-left: 0;
}
.wp-pagenavi a:last-child, .wp-pagenavi a.last {
    margin-right: 0;
}
.wp-pagenavi a:hover, .wp-pagenavi a:focus {
    border-color: #fff;
    background-color: #fdfdfd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #fefefe, #fafafa);
    /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(top, #fefefe, #fafafa);
    /* FF3.6 */
    background-image: -ms-linear-gradient(top, #fefefe, #fafafa);
    /* IE10 */
    background-image: -o-linear-gradient(top, #fefefe, #fafafa);
    /* Opera 11.10+ */
    background-image: linear-gradient(top, #fefefe, #fafafa);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fefefe', EndColorStr='#fafafa');
    /* IE6–IE9 */
}
.wp-pagenavi a.more {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    border: 0 none !important;
    background: transparent !important;
    margin-left: 0;
    margin-right: 0;
}
.wp-pagenavi .current {
    -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
    -o-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
    border-color: #505050 !important;
    color: #f2f2f2 !important;
    text-shadow: black 0 1px 0;
    background-color: #676767;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5f5f5f), to(#5c5c5c));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #5f5f5f, #5c5c5c);
    /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(top, #5f5f5f, #5c5c5c);
    /* FF3.6 */
    background-image: -ms-linear-gradient(top, #5f5f5f, #5c5c5c);
    /* IE10 */
    background-image: -o-linear-gradient(top, #5f5f5f, #5c5c5c);
    /* Opera 11.10+ */
    background-image: linear-gradient(top, #5f5f5f, #5c5c5c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5f5f5f', EndColorStr='#5c5c5c');
    /* IE6–IE9 */
}

.center-this {
    text-align: center;
    background: #f0f0f0 url("gray_jean.png");
    padding: 20px 10px;
    margin-top: 20px;
    border-radius: 1px;
    clear: both;
    border: 1px solid #ddd;
}
.center-this span {
    display: inline-block;
}
.center-this span a {
    color: #333;
    text-decoration: underline;
    font-size: 12px;
}
.onp-sociallocker {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.centered {
    text-align: center;
    margin-top: 0;
}
.clearfix:before,
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    overflow:hidden;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}

#freebie-box div.sharedaddy div.sd-block {
    border-width: 0;
    margin-top: 5px;
}

#socialbutts iframe {
    display: inline-box;
    width: 100px;
    height: 30px !important;
}


#md-inline-widget {

}
.mighty-deals-widget {
    border-width: 0 !important;
    padding-left: 10px !important;
}

/* Ribbon */
.ribbon {
   font-size: 18px;
   /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

   width: 75%;
   
   position: relative;
   background: #ba89b6;
   background: #97c4c4;
   color: #316b6b;
   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
   text-align: center;
   padding: 1em 2em; /* Adjust to suit */
   margin: 1em auto 2em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
   content: "";
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #76bcbc;
   z-index: -1;
}
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
}
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   content: "";
   position: absolute;
   display: block;
   border-style: solid;
   border-color: #5d9999 transparent transparent transparent;
   bottom: -1em;
}
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }


.body-ggg {
    text-align: center;
    padding: 30px 0 0;
}

#cse-search-box {
    padding: 0 10px;
    font: 14px Arial, Helvetica, sans-serif;
}
#cse-search-box input {
    margin: 0 0 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

#sidebar #PDI_container7597712 .pds-box {
    margin: 0 auto;
    width: 90%;
    border-radius: 3px;
    border-width: 0;
    padding: 20px;
}
#sidebar #PDI_container7597712 .pds-box .pds-vote-button {
    text-align: center;
    border-radius: 3px;
    width: 100%;
    margin-left: 0;
}

#sidebar #bsap_1292171 {
    margin: 10px auto 30px !important;
    clear: both !important;
    float: left;
}

#at4-recommended {
    background: #64717b !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

h3.at-recommended-label {
    color: #fff !important;
    font-weight: bold;
}

.at4-recommended .at4-recommended-item {
    border-width: 0;
    height: 300px;
}
.at4-recommended .at4-recommended-item .at4-recommended-item-caption {
    height: auto;
}

#featured-freebie {
    width: 1200px;
    margin: 10px auto -20px;    
}

/* Hide this on screens < 720px */
@media only screen and (max-width: 720px) {
    #featured-freebie {
        display: none;
    }
}

#featured-freebie img {
    width: 100%;
    height: 150px;
}
#page-content .download-link:before {
    content: 'Download';
}
#page-content .download-link {
    display: inline-block;
    text-decoration: none;
    font: bold 12px/12px sans-serif;
    padding: 8px 11px;
    color: #555;
    border: 1px solid #dedede;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    background: #fecc5f;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda71', endColorstr='#febb4a'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb4a)); /*  WebKit */
    background: -moz-linear-gradient(top,  #feda71, #febb4a);
    border-color: #f5b74e #e5a73e #d6982f;
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; 
    
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    text-decoration: none;
    color: #C56D08;
    line-height: 1.25;
    margin: 30px 0;
}

#page-content .download-link:hover {
    background: #fecb5e;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fec354', endColorstr='#fecd61'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fec354), to(#fecd61)); /*  WebKit */
    background: -moz-linear-gradient(top,  #fec354, #fecd61);
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
    -webkit-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;
    -moz-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;    
}

.darken {
    background: #333 !important;
    text-align: center;
    color: #aaa;
    font-size: 14px !important;
    margin-top: 45px;
}

.boomkrak-banner{
    width: 258px;
    position: absolute;
    left: 50%;
    margin-left: -129px;
    height: 81px;
    overflow: hidden;
}

.boomkrak-banner img:first-child{
    display: block;
}
.boomkrak-banner img:last-child{
    display: none
}

.boomkrak-banner:hover img:first-child{
    display: none;
}
.boomkrak-banner:hover img:last-child{
    display: block;
}

@media screen and (max-width: 959px){
    .freebie-nav-prev,
    .freebie-nav-next{
        width: 100%;
    }
    .boomkrak-banner{
        position: static;
        width: 100%;
        margin: 0;
    }
    .boomkrak-banner img{
        margin: 0 auto;
    }
}