style.scss

/*!
Theme Name: Child's Play for Thematic
Theme URI: http://scottnix.com/childs-play-responsive-child-theme-for-thematic/
Description: A child theme based on the Responsive Base child theme for the Thematic Theme Framework, powered by SASS/Compass, lean and clean.
Author: Scott Nix
Author URI: http://scottnix.com/
Template: thematic
Version: 0.5.0
Tags: thematic, child-theme, responsive, mobile-first, SASS
*/

// ==========================================================================
// load supporting files (compass, variables, mixins)
// ==========================================================================

@import 'scss/base';

// ==========================================================================
// normalize.css v1.0.1 - necolas.github.com/normalize.css/
// ==========================================================================

@import 'scss/normalize';

// better box model - paulirish.com/2012/box-sizing-border-box-ftw/
*,
*:before,
*:after { 
    @include box-sizing(border-box); 
}

// ==========================================================================
// basic styles
// ==========================================================================

body,
input,
textarea {
    color: $text-color;
    font: $body-font-defaults;
}
body { 
    background: $background-color; 
}
textarea { 
    resize: vertical; 
}
h1 {
    margin: 0 0 0.5417em;
    font-family: $header-font;
    font-size: 3em;
    line-height: 1.0833em;
    color: $header-color;
    text-shadow: $shadow;
}
h2 {
    margin: 0 0 0.7222em;
    font-family: $header-font;
    font-size: 2.25em;
    line-height: 1.4444em;
    color: $header-color;
    text-shadow: $shadow;
}
h3 {
    margin: 0 0 0.8667em;
    font-family: $header-font;
    font-size: 1.875em;
    line-height: 1.7333em;
    color: $header-color;
    text-shadow: $shadow;
}
h4 {
    margin: 0 0 1.0833em;
    font-family: $header-font;
    font-size: 1.5em;
    line-height: 1.0833em;
    color: $header-color;
    text-shadow: $shadow;
}
h5 {
    margin: 0 0 1.1818em;
    font-family: $header-font;
    font-size: 1.375em;
    line-height: 1.1818em;
    color: $header-color;
}
h6 {
    margin: 0 0 1.4444em;
    font-family: $header-font;
    font-size: 1.125em;
    line-height: 1.4444em;
    color: $header-color;
}
a {
    @include transition(color .3s ease-in-out, background-color .3s ease-in-out);
    color: $link-color;
    text-decoration: none;
    &:visited { 
        color: $link-color; 
    }
    &:hover { 
        color: $link-hover; 
    }
    &:focus { 
        color: $link-focus; 
    }
}
p,
pre,
form,
address,
embed,
select {
    margin: 0 0 $spacing;
}
ul {
    margin: 0 0 $spacing;
    list-style: disc;
}
ol {
    margin: 0 0 $spacing;
    list-style-type: decimal;
    ol { 
        list-style: upper-alpha;
        ol { 
            list-style: lower-roman;
            ol { 
                list-style: lower-alpha; 
            }
        }
    }
}
ul ul,
ul ol,
ol ul,
ol ol {
    margin-bottom: 0;
}
dl { 
    margin: 0 1em; 
}
dt { 
    font-weight: bold; 
}
dd { 
    margin: 0 0 $spacing; 
}
abbr, 
acronym { 
    cursor: help; 
}
ins {
    border-bottom: 1px solid $accents-color;
    text-decoration: none;
}
caption { 
    text-align: center; 
}
table {
    margin: 0 0 $spacing;
    border: 1px solid $accents-color;
    border-width: 1px 1px 0;
    text-align: left;
}
tr { 
    border-bottom: 1px solid $accents-color; 
}
th,
td {
    padding: .7em 1.25em;
    vertical-align: top;
}
hr {
    height: 1px;
    margin: 0 0 $spacing;
    border: 0;
    background: $accents-color;
    color: $accents-color;
}
::-moz-selection {
    background: $selection-color;
    color: #f1f1f1;
    text-shadow: none;
}
::selection {
    background: $selection-color;
    color: #f1f1f1;
    text-shadow: none;
}
blockquote {
    margin: 0 1em;
    font-style: italic;
    p {
        padding-left: 1em;
        border-left: 5px solid $accents-color;
    }
    em,
    i,
    cite,
    span {
        font-style: normal;
    }
}

// ==========================================================================
// content styles
// ==========================================================================

#wrapper { 
    background: url(images/bg-tiles.png); 
}
#header {
    position: relative;
    z-index: 2;
}
#branding {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: $spacing 0;
}
#blog-title {
    @extend h1;
    margin: 0;
    padding: 0;
    a { 
        color: $header-color;
        &:hover { 
            color: $link-hover; 
        }
    }
}
#blog-description {
    margin: 0;
    font: $body-font-defaults;
    text-shadow: none;
}
#header-widget {
    margin: $spacing 0 0;
    .widgettitle { 
        display: none; 
    }
    ul,
    address,
    form {
        margin: 0;
    }
}
#access {
    @include pie-clearfix;
    width: 90%;
    margin: 0 auto $spacing;
    background-color: $menu-background;
    box-shadow: 0 0 8px 0 $box-transparency;
}
.menu-button {
    padding: .65em;
    background: $menu-background;
    color: $menu-link-color;
    &:hover {
        @include transition(all .3s ease-in-out);
        cursor: pointer;
        color: $accents-color;
        .icon-bar { 
            @include transition(all .3s ease-in-out);
            background: $accents-color; 
        }
    }
    .icon-bar {
        display: block;
        height: 2px;
        width: 18px;
        margin-top: 2px;
        background: $menu-link-color;
        border-radius: 1px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    }
}
.nav-open {
    color: $accents-color;
    .icon-bar { 
        background: $accents-color; 
    }
}
.access-nav {
    .js & { 
        display: none; 
    }
    ul {
        margin: 0;
        padding: 0;
    }
}
.sf-menu {
    li {
        position: relative;
        display: block;
        border-bottom: 1px solid #f1f1f1;
        background: #ddd;
        &:last-child { 
            border: none; 
        }
        a {
            display: block;
            padding: .5em .35em .5em 1em;
            color: $text-color;
            &:hover {
                padding-left: 1.5em;
                color: $link-hover;
            }
        }
    }
    .has-flyout:after {
        border-color: #000 transparent transparent;
        border-image: none;
        border-style: solid;
        border-width: 5px;
        content: "";
        display: block;
        height: 0;
        position: absolute;
        right: 10px;
        top: 21px;
        width: 0;
        }
    .sub-menu li, .children li {
        border-bottom: none;
        a {
            padding-left: 2em;
            &:hover {
                padding-left: 2.5em;
            }
        }
        li {
            border-bottom: none;
            a {
                padding-left: 3em;
                &:hover {
                    padding-left: 3.5em;
                }
            }
            li {
                border-bottom: none;
                a {
                    padding-left: 4em;
                    &:hover {
                        padding-left: 4.5em;
                    }
                }
            }
        }
    }
}
#main {
    @include pie-clearfix;
    position: relative;
    width: 90%;
    margin: 0 auto;
    clear: both;
}
#container {
    margin: 0 0 $spacing;
}
#content { }
.page-title {
    @extend h6;
    span {
        span { 
            font-style: italic; 
        }
    }
    .meta-nav { font-style: normal; }
}
.hentry { 
    margin: 0 0 $spacing; 
}
.sticky {
    padding: $spacing;
    background: $transparency;
}
.entry-title {
    @extend h2;
    a { color: $header-color;
        &:hover { color: $link-hover; }
    }
}
.entry-meta {
    margin: 0 0 $spacing;
    font-size: 90%;
    color: $helper-text;
    a {
        border-bottom: 1px dotted $helper-link;
        color: $helper-link;
        &:hover { 
            color: $link-hover; 
        }
    }
    abbr {
        border: none;
        cursor: text;
    }
}
.entry-utility {
    [class*="entypo-"]:before {
        padding-right: 1em;
        font-family: 'entypo', sans-serif;
        font-size: 1.3em;
        text-shadow: $shadow;
    }
    @include pie-clearfix;
    clear: both;
    font-size: 90%;
    color: $helper-text;
    a {
        border-bottom: 1px dotted $helper-link;
        color: $helper-link;
        &:hover { 
            color: $link-hover; 
        }
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        padding-left: 2em;
        list-style: none;
    }
}
.edit-link {
    display: block;
    clear: both;
}
#links-page,
#archives-page {
    padding: 0;
    list-style: none;
    overflow: hidden;
}
#author-info {
    margin: 0 0 $spacing;
    overflow: hidden;
    .avatar {
        margin: 0 1em 0;
        float: left;
    }
}

// images
// ==========================================================================

@import 'scss/images';

// comments
// ==========================================================================

@import 'scss/comments';

// navigational
// ==========================================================================

.page-link,
.comment-navigation {
    margin: 0 0 $spacing;
    clear: both;
    font-weight: bold;
    word-spacing: 0.5em;
    a {
        padding: 0.4em 0.65em;
        background: $transparency;
        &:hover {
            background-color: darken($transparency, 20%);
        }
    }
    a,
    span { 
        margin-right: 0.5em; 
    }
}
.paginated-comments-links { 
    margin-top: $spacing; 
}
.button,
input[type="submit"] {
    position: relative;
    display: inline-block;
    float: right;
    margin: 0 5px;
    padding: 7px 10px;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
    @include background-image(linear-gradient(#333, #222));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        2px 2px 3px rgba(0, 0, 0, 0.3);
    line-height: 18px;
    color: $menu-link-color;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0, 0.75);
}
.button:hover,
input[type="submit"]:hover {
    top: 2px;
    left: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.075);
}

// asides, sidebars & widget-ready areas
// ==========================================================================

.aside {
    word-wrap: break-word;
    overflow-wrap: break-word;
    ul,
    section {
        list-style: none;
        padding: 0;
        ul { 
            margin: 0 0 $spacing 1em;
            li { 
                padding: 1px 0; 
            }
            ul { 
                margin-bottom: 0; 
            }
        }
    }
    img { 
        max-width: 100%; 
    }
    table { 
        border: none; 
    }
    thead,
    tbody {
        border: 1px solid $accents-color;
    }
    th,
    td {
        border-right: 1px solid $accents-color;
        padding: .15em .5em; 
    }
    tfoot {
        tr { 
            border: none; 
        }
        td { 
            border-color: transparent; 
        }
    }
    #searchform input { 
        width: 100%; 
    }
}
.widget_tag_cloud { 
    margin: 0 0 $spacing; 
}
#searchsubmit { 
    display: none; 
}
#primary { 
    margin-bottom: $spacing; 
}
.widgettitle {
    @extend h4;
    border-bottom: 1px solid $accents-color;
    padding:.5em 0;
    a { 
        color: $header-color;
        &:hover { 
            color: $link-hover; 
        }
    }
}
#content .aside { 
    margin: 0 0 $spacing; 
}
#footer {
    margin-top: $spacing;
    clear: both;
}
#subsidiary {
    width: 90%;
    margin: 0 auto;
    padding: $spacing 0 0;
    #footer-widget {
        width: 100%;
        margin :0;
        clear: both;
    }
}
#siteinfo {
    width: 90%;
    margin: 0 auto;
    padding: $spacing 0;
    clear: both;
}

// overriding css above - specific pages, templates
// ==========================================================================

// page templates
.page-template-template-page-fullwidth-php {
    #container {
        width: 100%;
        margin-right: 0;
    }
    #content,
    #comments {
        width: 100%;
    }
}

// attachments
.attachment-jpeg,
.attachment-png {
    #content,
    #container {
        width: 100%;
        margin: 0;
    }
    .main-aside { 
        display: none; 
    }
}

// internet explorer (old IE, 6, 7 and 8 fixes)
// ==========================================================================

@import 'scss/internet-explorer';

// plugins
// ==========================================================================

@import 'scss/plugins';

// helper classes - html5boilerplate.com
// ==========================================================================

@import 'scss/helper-classes';

// media queries
// ==========================================================================

@import 'scss/media-queries';

// print styles - html5boilerplate.com
// ==========================================================================

@media print {
    @import 'scss/print-styles';
    // custom additions
    .aside,
    #access
    .menu,
    .navigation {
        display: none;
    }
}