/*--
    Theme Name: Squeaky Clean
    Theme URI: http://www.joshbroton.com/squeakyclean
    Description: A fast and clean responsive WordPress boilerplate
    Author: Josh Broton
    Author URL: http://www.joshbroton.com
--*/

/*
  ---- ---- ---- ---- VARIABLES ---- ---- ---- ----
*/
// Site Specific Colors
$blue: rgb(51,89,217); //#3359d9
$darkblue: rgb(21,32,87);  //#152057

// Greys
$black: rgb(0,0,0); //#000000
$darkgrey: lighten($black, 25%); //#404040
$midgrey: lighten($black, 50%); //#808080
$lightgrey: lighten($black, 75%); //#bfbfbf
$lightergrey: lighten($black, 90%); //#e6e6e6
$white: rgb(255,255,255); //#ffffff

// Root
$bodycolor: $white;
$textcolor: $black;
$columnmargin: 10px;
$gutter: 20px;
$warningcolor: red;

// Typography
$basefont: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
$basefontsize: 125%;
$baselineheight: 1.2em;
$headingfont: PT Serif, Cambria, Georgia, Times, Times New Roman, serif;
$headinglineheight: 1.35em;
$headingfontweight: bold;
$headingcolor: $darkblue;
$codefont: Monaco, Courier New, monospace;

// Links
$linkcolor: $blue;
$linkhover: darken($linkcolor,5%);
$linkvisited: darken($linkcolor,10%);
$linkfocus: darken($linkcolor,15%);

// Forms
$textboxbackground: $white;
$textboxbordercolor: $lightgrey;
$textboxbordercoloractive: $midgrey;
$textboxborderwidth: 1px;
$textboxborderstyle: solid;
$textboxcolor: $midgrey;
$textboxplaceholdercolor: $lightgrey;
$textboxpadding: $gutter / 4;

$buttonbackground: $linkcolor;
$buttonbordercolor: darken($buttonbackground,10%);
$buttonborderwidth: 1px;
$buttonborderstyle: solid;
$buttoncolor: $white;
$buttonpadding: .25em .75em;

// Tables
$tablebackground: transparent;
$tablestripe: $lightergrey;
$tablefontsize: .875em;
$tablelineheight: 1.4em;
$tableborderwidth: 1px;
$tableborderstyle: solid;
$tablebordercolor: $lightgrey;
$tablehover: $lightgrey;



/*
  ---- ---- ---- ---- MIXINS ---- ---- ---- ----
*/
// Thank you to Andy Clarke for most of these (320 and Up)
// @include text-overflow()
@mixin text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// Gradient Backgrounds
// @include horizontal(COLOR, COLOR)
@mixin horizontal($startColor:$white, $endColor:$lightergrey) {
    background-color: $endColor;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(left, $startColor, $endColor);
    background-image: -moz-linear-gradient(left, $startColor, $endColor);
    background-image: -ms-linear-gradient(left, $startColor, $endColor);
    background-image: -o-linear-gradient(left, $startColor, $endColor);
    background-image: linear-gradient(left, $startColor, $endColor);
    background-repeat: repeat-x;
}

// @include vertical(COLOR, COLOR)
@mixin vertical($startColor:$white, $endColor: $lightergrey) {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-color: $endColor;
    background-image: -moz-linear-gradient(top, $startColor, $endColor);
    background-image: -ms-linear-gradient(top, $startColor, $endColor);
    background-image: -o-linear-gradient(top, $startColor, $endColor);
    background-image: linear-gradient(top, $startColor, $endColor);
    background-repeat: repeat-x;
}

// @include directional(COLOR, COLOR, DEG)
@mixin directional($startColor:$white, $endColor:$lightergrey, $deg:45deg) {
    background-color: $endColor;
    background-image: -moz-linear-gradient($deg, $startColor, $endColor);
    background-image: -ms-linear-gradient($deg, $startColor, $endColor);
    background-image: -webkit-linear-gradient($deg, $startColor, $endColor);
    background-image: -o-linear-gradient($deg, $startColor, $endColor);
    background-image: linear-gradient($deg, $startColor, $endColor);
    background-repeat: repeat-x;
}

// Box Styles
// @include rounded(INT)
@mixin rounded($radius:4px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// @include border-radius(INT, INT, INT, INT)
@mixin border-radius($topright:0, $bottomright:0, $bottomleft:0, $topleft:0) {
    -webkit-border-top-right-radius: $topright;
    -webkit-border-bottom-right-radius: $bottomright;
    -webkit-border-bottom-left-radius: $bottomleft;
    -webkit-border-top-left-radius: $topleft;
    -moz-border-radius-topright: $topright;
    -moz-border-radius-bottomright: $bottomright;
    -moz-border-radius-bottomleft: $bottomleft;
    -moz-border-radius-topleft: $topleft;
    border-top-right-radius: $topright;
    border-bottom-right-radius: $bottomright;
    border-bottom-left-radius: $bottomleft;
    border-top-left-radius: $topleft;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

// @include box-shadow(SHADOW DELCARATION)
@mixin box-shadow($shadow:0 1px 3px rgba(0,0,0,.25)) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

// @include drop-shadow(X-OFFSET, Y-OFFSET, BLUR, ALPHA)
@mixin drop-shadow($x-axis:0, $y-axis:1px, $blur:2px, $alpha:0.1) {
    -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
    -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}

// @include opacity(DECIMAL 0-1)
@mixin opacity($opacity:.5) {
    -webkit-opacity: $opacity;
    -moz-opacity: $opacity;
    opacity: $opacity;
}

// @include transition(PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION)
@mixin transition($transition) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

// Object contains floated children
// @include clearfix()
@mixin clearfix() {
    *zoom:1;
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}

// Image Replacement
// @include hide-text()
@mixin hide-text() {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

// Width using calc
// @include width-calc(INT FULL WIDTH, INT MINUS)
@mixin css3-calc($property, $fullvalue, $minus) {
    #{$property}: -moz-calc(#{$fullvalue} - #{$minus});
    #{$property}: -webkit-calc(#{$fullvalue} - #{$minus});
    #{$property}: calc(#{$fullvalue} - #{$minus});
}

// Twelve Column Grid
// @include four()
@mixin onecol() { width:8.3333333333%; padding: 0 2%; }
@mixin twocol() { width:16.6666666667%; padding: 0 2%; }
@mixin threecol() { width:25%;; padding: 0 2%; }
@mixin fourcol() { width:33.3333333333%; padding: 0 2%; }
@mixin fivecol() { width:41.6666666667%; padding: 0 2%; }
@mixin sixcol() { width:50%; padding: 0 2%; }
@mixin sevencol() { width:58.3333333333%; padding: 0 2%; }
@mixin eightcol() { width:66.6666666667%; padding: 0 2%; }
@mixin ninecol() { width:75%; padding: 0 2%; }
@mixin tencol() { width:83.333333333%; padding: 0 2%; }
@mixin elevencol() { width:91.666666667%; padding: 0 2%; }
@mixin twelvecol() { width:100%; padding: 0 2%; }



/*
  ---- ---- ---- ---- RESET STYLESHEET ---- ---- ---- ----
*/
html, body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, time, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1.2;
    font-family: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time {
    display: block;
}

audio[controls], canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



/*
  ---- ---- ---- ---- FONT-FACE DECLARATIONS ---- ---- ---- ----
*/



/*
  ---- ---- ---- ---- ALL VIEWPORTS AND SIZES ---- ---- ---- ----
*/
/* BODY */
@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

html {
    width: 100%;
    height: 100%;
    background: $bodycolor;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: transparent;
    font-family: $basefont;
    font-size: $basefontsize;
    line-height: $baselineheight;
    color: $textcolor;
}


/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: $headingfont;
    font-weight: $headingfontweight;
    color: $headingcolor;
    line-height: $headinglineheight;
    text-rendering:  optimizeLegibility;
}

h1,
.h1 {
    margin-bottom: $baselineheight / 1.75;
    font-size: 2em;
}

h2,
.h2 {
    margin-bottom: $baselineheight / 1.5;
    font-size: 1.5em;
}

h3,
.h3 {
    margin-bottom: $baselineheight / 1.75;
    font-size: 1.25em;
}

h4,
.h4 {
    margin-bottom: $baselineheight / 1.75;
    font-size: 1.125em;
}

h5,
.h5 {
    margin-bottom: $baselineheight / 2;
    font-size: 1em;
}

h6,
.h6 {
    margin-bottom: $baselineheight / 2;
    font-size: 1em;
    font-weight: normal;
}

p,
ol,
ul,
dl,
address {
    margin-bottom: $baselineheight;
    line-height: $baselineheight * 1.2;
}

small {
    font-size: .875em;
}

ul,
ol {
    padding: 0 0 0 $gutter;
}

blockquote {
    margin: 0 $gutter $baselineheight $gutter - 5px;
    border-left: 5px solid $lightgrey;
    font-family: $headingfont;
    font-style: italic;
}

dl,
dd {
    margin-bottom: $baselineheight
}

dt {
    font-weight: bold;
}

b,
strong {
    font-weight:  bold;

    a {
        font-weight: bold;
    }
}

dfn,
em {
    font-style: italic;
}

ins {
    background-color: $lightergrey;
    color: $warningcolor;
    text-decoration: none;
}

mark {
    background-color: $lightergrey;
    color: $warningcolor;
    font-style: italic;
    font-weight: bold;
}

pre,
code,
kdb,
samp {
    padding: $gutter / 4;
    background-color: $lightergrey;
    font-family: $codefont;
    font-size: .875em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

sub,
sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: $baselineheight;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

/* LINKS */
a {
    color: $linkcolor;
    text-decoration: none;
    cursor: pointer;

    &:hover {
        color: $linkhover;
        text-decoration: underline;
        border: 0;
        outline: 0;
    }

    &:visited {
        color: $linkvisited;
    }

    &:focus,
    &:active {
        color: $linkfocus;
        border: 0;
        outline: 0;
    }

    img {
        border: 0;
        outline: 0;
    }
}

/* SELECTION */
::-moz-selection {
    background-color: $midgrey;
    color: $white;
    text-shadow: none;
}

::selection {
    background-color: $midgrey;
    color: $white;
    text-shadow: none;
}

/* ELEMENTS */
hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    background-color: $lightgrey;
}

img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

figure {
    margin-bottom: $baselineheight;
}

figcaption {
    display: block;
    margin: 0 0 $baselineheight 0;
    padding: 0;
    font-weight: normal;
}

/* FORMS */
label {
    font-size: .875em;
    color:$darkgrey;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea,
.textbox {
    display: block;
    width: 100%;
    max-width: 768px;
    padding: $textboxpadding;
    margin-bottom: $baselineheight;
    background-color: $textboxbackground;
    border: $textboxborderwidth $textboxborderstyle $textboxbordercolor;
    color: $textboxcolor;
    font-size: .875em;

    &:active,
    &:focus {
        border-color: $textboxbordercoloractive;
    }
}

input[type="checkbox"],
input[type="radio"] {
    margin: 3px 0;
    padding: 0;
    *width: 13px;
    *height: 13px;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    width: auto;
    heigth: auto;
    background-color: $buttonbackground;
    border: $buttonborderwidth $buttonborderstyle $buttonbordercolor;
    color: $buttoncolor;
    font-size: .875em;
    cursor: pointer;
}

input[type="hidden"] {
    display: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    @include opacity(.5);
    cursor: not-allowed;
}

::-webkit-input-placeholder,
:-moz-placeholder,
:-ms-input-placeholder {
    color: $textboxplaceholdercolor;
    font-size: .875em;
}

/* BUTTON SIZES */
.button-xl {
    padding: .875em 1.75em;
    font-size: 1.25em;
    @include border-radius(6px);
}

.button-lg {
    padding: .5em 1em;
    font-size: 1em;
    @include border-radius(5px);
}

.button-med {
    padding: .375em .75em;
    font-size: .875em;
    line-height: 1em;
    @include border-radius(4px);
}

.button-xs {
    padding: .25em .5em;
    font-size: .75em;
    line-height: .875em;
    @include border-radius(3px);
}

/* TABLES */
table {
    height: 100%;
    width: 100%;
    margin-bottom: $baselineheight / 2;
    background-color: $tablebackground;
    border-spacing: 0;
}

th,
td {
    padding: 0 .5em;
    vertical-align: middle;
    border-top:  $tableborderwidth $tableborderstyle $tablebordercolor;
    line-height: $baselineheight;
    text-align: left;
    font-size: .875em;
}

th {
    font-weight: bold;
}

thead th {
    vertical-align: bottom;
}

thead:first-child tr:first-child th,
thead:first-child tr-first-child td {
    border-top: 0;
}

tbody tr td,
tbody tr th {
    @include transition(background-color .25s 0 ease);
}

tbody tr:hover td,
tbody tr:hover th {
    background-color: $tablehover;
}

.table-striped {
    tbody tr:nth-child(odd) td,
    tbody tr:nth-child(odd) th {
        background-color: $tablestripe;
    }
}

/* PAGE LAYOUT */

#oldIeWarning {
    position: fixed;
    z-index: 1000000;
    width: 100%;
    background-color: red;
    display: none;
    text-align: center;
    color: white;
}

.warning_content {
    width: 80%;
    padding: .5em 10%;
    margin: 0 auto;
}

.warning_content a {
    color: white;
    font-weight: bold;
}

#close_ie_warning {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 20px;
    background: url(images/cancel.png) no-repeat 0 50%;
    text-indent: -100000px;
}

.lt-ie9 #wrapper {
    max-width: 750px;
    margin: 0 auto;
}

header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    padding: .5em;
    background-color: $linkcolor;
    @include clearfix();
}

    .communications {
        display: inline-block;

        a {
            display: inline-block;
            width: 32px;
            height: 32px;
            margin-right: .25em;
            background-repeat: no-repeat;
            background-position: 0 0;
            @include hide-text();
            @include transition(background-position 0.1s ease);

            &.facebook {
                background-image: url(images/facebook.png);
            }

            &.linkedin {
                background-image: url(images/linkedin.png);
            }

            &.twitter {
                background-image: url(images/twitter.png);
            }

            &.googleplus {
                background-image: url(images/googleplus.png);
            }

            &.contact {
                background-image: url(images/contact.png);
            }

            &:hover {
                background-position: 0 -32px;
            }
        }
    }


    #openMenu {
        //display: none;
        float: right;
        padding: .25em;
        font-weight: bold;
        color: white;
    }

/*    nav#mobile {
        display: inline-block;
        float: right;

        select {
            display: inline-block;
            width: auto;
            margin-bottom: auto;
        }

        &.panel {
            position: absolute;
            float: none;
            left: 0;
            right: 0;
            top: 100%;
            background: $blue;

            ul {
                padding: 0;
                margin-bottom: 0;
            }

            li {
                list-style: none;
            }

            a {
                display: block;
                padding: 1em .5em;
                color: white;
                border-top:1px solid lighten($blue, 10%);

                &:hover,
                &:active {
                    @include horizontal(darken($blue, 5%), $blue);
                    font-weight: bold;
                    text-decoration: none;
                }
            }
        }
    }*/

#wrapper {
    padding-top: 60px;
}

section.main {
    width: 100%;
    max-width: 1180px;
    margin:0 auto;
}

    .logo {
        max-width: 300px;
        margin: 0 auto;
    }

    nav.primary {
        display: none;
    }

    .content {
        @include twelvecol();
    }

        .image_size_info {
            font-size: .75em;
            font-style: italic;
            text-align: center;
        }

        .image_wrapper {
            margin-bottom: 20px;
            padding: .5em;
            padding-bottom: 0;
            border: 1px solid $lightgrey;
        }

    .next_event {
        margin-top: 2em;

        h2 {
            margin-bottom: .125em;

            a {
                font-weight: bold;
            }
        }

        time {
            font-weight: bold;
            font-style: italic;
            font-size: .75em;
        }

        .location_wrapper {
            font-weight: bold;
            margin:.75em 0;

            a {
                font-weight: bold;
            }
        }
    }

    .hdiv {
        @include twelvecol();
        margin: 2em 0;

        div {
            height: 1px;
            background-color: $lightgrey;
        }

    }

    .sidebar {
        text-align: center;
        font-size: .875em;

        article {
            @include twelvecol();
            margin-bottom: 2em;

            header,
            .body {
                border: 2px solid $midgrey;
            }

            header {
                border-bottom:0;
            }

            .body {
                border-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        header {
            padding: .5em 0;
            background-color: $midgrey;

            h3 {
                margin-bottom: 0;
                color: white;
            }
        }

        .body {
            padding: 5%;
        }
    }

        .upcoming {
            .body {
                border-left: 10px solid $lightergrey;
                padding: 5%;
                text-align: left;
            }

            .title {
                font-size: 1.25em;
                font-weight: bold;
            }
        }

        .sponsors {
            a {
                display: block;
                margin-bottom: 1em;
                padding-bottom: 1em;
                border-bottom: 1px solid $lightgrey;

                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: 0;
                }
            }
        }

        .meeting_location {
            a {
                font-weight: bold;
            }
        }

    footer.main {
        padding: 2em;
        background-color: $blue;
        color: white;
        text-align: center;

        a {
            color: white;
            font-weight: bold;
        }
    }



@media only screen and (min-width:48em) {
    html,
    body {
        @include vertical(#bbe5f5, lighten(#bbe5f5, 10%));
        min-height: 100%;
    }

    #wrapper {
        padding-top: 48px;
        max-width: 1180px;
        margin: 0 auto;
        background-color: white;
    }

    .logo {
        width: 100%;
        height: 168px;
        max-width: 100%;
        background: url(images/header.jpg) no-repeat top left;

        h1 {
            padding-right: 20px;
            text-align: right;
        }
    }

    nav.primary {
        display: block;
        margin-top: -4px;
        background-color: black;

        ul {
            margin-bottom: 0;
        }

        li {
            display: inline-block;
            list-style: none;

            a {
                display: inline-block;
                padding: .5em;
                font-weight: bold;
                font-size: 1.125em;
                color: white;
            }
        }

        .current a {
            color: $linkcolor;
        }
    }

    section.main {

    }

    .sidebar {
        @include clearfix();

        article {
            float: left;
            @include sixcol();
        }

        .sponsors {
            float: right;
        }
    }

    footer.main {
        padding: 1em;
    }
}

@media only screen and (min-width:61.9em) {
    body {
        font-size: 100%;
    }

    .hdiv {
        display:none;
    }

/*    section.main {
        @include clearfix();
        padding: 2% 0;
    }

        .content {
            float: right;
            @include eightcol();
        }

        .sidebar {
            float: left;
            @include fourcol();

            article {
                float: none;
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }

            .sponsors {
                float: none;
                margin-left: 0;
            }
        }*/

/*    section.main {
        display: table;
        padding: 2% 0;
    }

        .content {
            display: table-cell;
            @include eightcol();
        }

        .sidebar {
            display: table-cell;
            @include fourcol();

            article {
                float: none;
                @include twelvecol();
            }

            .sponsors {
                float: none;
                @include twelvecol();
            }
        }*/

/*    section.main {
        display: -webkit-flex;
        -webkit-flex-flow: row nowrap;
        padding: 2%;
    }

        .content {
            -webkit-order: 2;
            -webkit-flex: 1 1 39%;
        }

        .sidebar {
            -webkit-order: 1;
            -webkit-flex: 1 1;

            article {
                float: none;
                @include twelvecol();
            }

            .sponsors {
                float: none;
                @include twelvecol();
            }
        }*/
}