/**
 * This is a way to quickly add placeholders for
 * popular ad sizes on the web using an html div
 */

// Define Ad Variables
$ad-background-color: #ccc;
$ad-text-color: #666;
$ad-base-font-size: 18px;
$ad-small-font-size: 12px;

// Presenting the Ads
.ad {
    background-color: $ad-background-color;
    color: $ad-text-color;
    font-size: $ad-base-font-size;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;

    &::before {
        box-sizing: inherit;
    }

    /*
     desktop ad sizes
     */

    // <div class="ad wide-skyscraper"></div>
    &.wide-skyscraper {
        height: 600px;
        width: 160px;
        &:before {
            content: "160 x 600 Wide Skyscraper Ad";
        }
    }

    // <div class="ad medium-rectangle"></div>
    &.medium-rectangle {
        height: 250px;
        width: 300px;
        &:before {
            content: "300 x 250 Medium Rectangle Ad";
        }
    }

    // <div class="ad half-page"></div>
    // <div class="ad monster"></div>
    &.half-page,
    &.monster {
        height: 600px;
        width: 300px;
        &:before {
            content: "300 x 600 Half-Page (Monster) Ad";
        }
    }

    // <div class="ad leaderboard"></div>
    &.leaderboard {
        height: 90px;
        width: 728px;
        &:before {
            content: "728 x 90 Leaderboard Ad";
        }
    }

    // <div class="ad billboard"></div>
    &.billboard {
        height: 250px;
        width: 970px;
        &:before {
            content: "970 x 250 Billboard Ad";
        }
    }

    /*
     mobile ad banners
     */

    // <div class="ad mobile-banner"></div>
    &.mobile-banner {
        font-size: $ad-small-font-size;
        height: 50px;
        padding: 15px 20px;
        width: 300px;
        &:before {
            content: "300 x 50 Mobile Banner Ad";
        }
    }

    // <div class="ad mobile-leaderboard"></div>
    &.mobile-leaderboard {
        font-size: $ad-small-font-size;
        height: 50px;
        padding: 15px 20px;
        width: 320px;
        &:before {
            content: "320 x 50 Mobile Leaderboard Ad";
        }
    }

    // <div class="ad mobile-large-banner"></div>
    &.mobile-large-banner {
        font-size: $ad-small-font-size;
        height: 100px;
        width: 320px;
        &:before {
            content: "320 x 100 Mobile Large Banner Ad";
        }
    }

    /*
     less common desktop ad sizes
     */

    // <div class="ad button"></div>
    &.button {
        font-size: $ad-small-font-size;
        height: 60px;
        padding: 10px 20px;
        width: 120px;
        &:before {
            content: "60 x 120 Button Ad";
        }
    }

    // <div class="ad large-button"></div>
    // defunct, only use if specifically asked to do so
    &.large-button {
        font-size: $ad-small-font-size;
        height: 125px;
        width: 125px;
        &:before {
            content: "125 x 125 Large Button Ad";
        }
    }

    // <div class="ad super-leaderboard"></div>
    &.super-leaderboard {
        height: 90px;
        width: 970px;
        &:before {
            content: "970 x 90 Super Leaderboard Ad";
        }
    }

    /*
     old ad sizes

     these sizes are defunct, so only use these
     if you absolutely must
     */

    // <div class="ad skyscraper"></div>
    // defunct, only use if specifically asked to do so
    &.skyscraper {
        font-size: $ad-small-font-size;
        height: 600px;
        width: 120px;
        &:before {
            content: "120 x 600 Skyscraper Ad";
        }
    }

    // <div class="ad large-rectangle"></div>
    // defunct, only use if specifically asked to do so
    &.large-rectangle {
        height: 280px;
        width: 336px;
        &:before {
            content: "336 x 280 Large Rectangle Ad";
        }
    }

    // <div class="ad banner"></div>
    // defunct, only use if specifically asked to do so
    &.banner {
        height: 60px;
        padding: 15px 20px;
        width: 468px;
        &:before {
            content: "468 x 60 Banner Ad";
        }
    }

}