/* =========================================================================== */
/* Fonts
/* =========================================================================== */
@font-face {
    font-family: 'exoextralight';
    src: url('../fonts/exo/exo-extralight-webfont.eot');
    src: url('../fonts/exo/exo-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo/exo-extralight-webfont.woff') format('woff'),
         url('../fonts/exo/exo-extralight-webfont.ttf') format('truetype'),
         url('../fonts/exo/exo-extralight-webfont.svg#exoextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exoregular';
    src: url('../fonts/exo/exo-regular-webfont.eot');
    src: url('../fonts/exo/exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo/exo-regular-webfont.woff') format('woff'),
         url('../fonts/exo/exo-regular-webfont.ttf') format('truetype'),
         url('../fonts/exo/exo-regular-webfont.svg#exoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exodemibold';
    src: url('../fonts/exo/exo-semibold-webfont.eot');
    src: url('../fonts/exo/exo-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo/exo-semibold-webfont.woff') format('woff'),
         url('../fonts/exo/exo-semibold-webfont.ttf') format('truetype'),
         url('../fonts/exo/exo-semibold-webfont.svg#exodemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* =========================================================================== */
/* Reset
/* =========================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* =========================================================================== */
/* Elements
/* =========================================================================== */
html {
    min-height: 100%;
    background-color: #fff;
    color: #555;
}
body {
    min-height: 100%;
    font-size: 13px;
    font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    line-height: 18px;
    margin-top: 40px;
}
p {
   margin: 0 0 18px; 
}
a {
    text-decoration: underline;
    outline: none;
    cursor: pointer;
    color: #0069aa;
}

/* Headers */
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
h1 {
    font: normal 26px/34px exodemibold, "Trebuchet MS", sans-serif;
    color: #0069aa;
    text-transform: lowercase;
    margin: 40px 0 20px;
}
h1 .sub {
    font: normal 26px/34px exoextralight, "Trebuchet MS", sans-serif;
    color: #888;
}
#page-content h1:first-of-type {
    margin-top: 0;
}
h2 {
    display: block;
    color: #444;
    font: normal 20px/28px exoregular, "Trebuchet MS", sans-serif;
    margin: 40px 0 10px;
    text-transform: uppercase;
    border-bottom: 3px solid #0069aa;
}
h3 {
    display: block;
    color: #0069aa;
    font: normal 14px/20px exoextralight, "Trebuchet MS", sans-serif;
    margin: 30px 0 10px;
    border-left: 5px solid #0069aa;
    padding: 5px 10px;
    background-color: #d3e4f0;
}
h4 {
    font-size: 14px;
    font-weight: bold;
    color: #3c3c3c;
    margin: 10px 0 5px;
}

/* Lists */
ul, ol {
    margin: 24px 0 24px 24px;
    line-height: 18px;
}
ul li {
    list-style: disc;
    margin-bottom: 6px;
}
ol li {
    list-style: decimal;
    margin-bottom: 6px;
}
ul ul,
ul ol,
ol ol,
ol ul {
    margin: 18px 0 18px 24px;
}
img {
    max-width: 100%;
}


/* Tables */
table {
    border: none;
    width: 100%;
    font-size: 12px;
}
thead th {
    background-color: #ddd;
    color: #666;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
}
thead th, thead td {
    border-bottom: 3px solid #999;
}
tbody th {
    font-weight: bold;
    text-align: right;
}
th, td {
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}


/* Code */
code {
    font: bold 11px monospace;
    background-color: #efefef;
    vertical-align: text-bottom;
    color: #aa4543;
    line-height: 1em;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #bbb;
    max-width: 100%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.highlight {
    margin: 20px 0; 
    background: #e4e4e4 url(../images/diag-bg.png);
    padding: 20px;
}
pre {
    margin: 0;
    display: block;
    background-color: #fff;
    padding: 15px;
    border: 1px solid #ccc;
    overflow: auto;
    font: normal 11px/16px #555 "Andale Mono", monospace;
}
pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border: none;
    line-height: 1.7em;
}

/* Horizontal Rules */
hr { border: none; height: 10px; background: #ddd url(../images/diag-bg.png); }


/* Messages */
div[class*=msg-] { 
    margin: 20px 0; 
    background: transparent url(../images/diag-bg.png);
    padding: 20px;
}
div.msg-info { background-color: #eeeac7; color: #ab9b55; }
div.msg-info .msgcontent { border: 1px solid #eed673; }

.msgcontent {
    background-color: #fff;
    padding: 20px;
}
.msgcontent p:last-of-type {
    margin: 0;
}



/* =========================================================================== */
/* Header
/* =========================================================================== */
#header-wrapper {
    width: 100%;
    background-color: #111;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
}
#header-content {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}
#header-content h1 {
    padding: 0 10px 0 50px;
    margin: 0;
    color: #aaa;
    font-weight: normal;
    font-size: 20px;
    text-transform: none;
    display: inline-block;
    width: 300px;
    line-height: 40px;
}
#header-content h1 a {
    text-decoration: none;
    color: #89BC40;
}
#header-content h1 a:hover,
#header-content h1 a:focus {
    color: #777;
}
#header-content h1 strong {
    color: #eee;
}

/* 768 */
@media only screen and (min-width: 768px) {
    #header-content h1 { 
        padding: 0 10px;
    }
}



/* =========================================================================== */
/* Nav
/* =========================================================================== */
#nav {
    display: none;
    background-color: #222;
    vertical-align: top;
}
#nav ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}
#nav li {
    list-style: none;
    display: block;
    vertical-align: middle;
    margin: 0;
    line-height: 0;
}
#nav a.nav-link {
    color: #fff;
    height: 40px;
}
#nav .nav-link-icon {
    vertical-align: middle;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 5px 0 5px 5px;
    background: transparent url(../images/nav-icons.png) no-repeat 0 0;
}
#nav .nav-link-text {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0px 10px;
    font: normal 11px exodemibold, "Trebuchet MS", sans-serif;
    text-transform: uppercase;
}
#nav a.nav-link:hover,
#nav a.nav-link:focus {
    width: 150px;
    transition: width: .5s;
    background-color: #111;
}
#nav-brevity .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat 0 0; }
#nav-imgin .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat -30px 0; }
#nav-updown .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat -60px 0; }
#nav-pinnd .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat -90px 0; }
#nav-shyft .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat -120px 0; }
#nav-tabletrim .nav-link-icon { background: transparent url(../images/sprites.png) no-repeat -150px 0; }

#brevity #nav-brevity a.nav-link,
#pinnd #nav-pinnd a.nav-link,
#updown #nav-updown a.nav-link,
#shyft #nav-shyft a.nav-link,
#tabletrim #nav-tabletrim a.nav-link,
#imgin #nav-imgin a.nav-link {
    width: 150px;
    color: #fff;
    background-color: #111;
}


/* =========================================================================== */
/* Mobile nav toggle
/* =========================================================================== */
#nav-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    height: 30px;
    width: 30px;
    padding: 5px;
    cursor: pointer;
    background: transparent url(../images/sprites.png) no-repeat 0px -40px;
}
#nav-toggle-label:hover,
#nav-toggle-label:focus {
    background-color: #222;
}
#nav-toggle-input {
    position: absolute;
    left: -99999px;
}

@media only screen and (max-width: 767px) {
    #nav-toggle-input:checked ~ #nav-toggle-label {
        background-color: #222;
    }    
    #nav-toggle-input:checked ~ #nav {
        display: block;
    }    
}

/* 768 */
@media only screen and (min-width: 768px) {
    #nav-toggle-label {
        left: -99999px;
    }
    #nav {
        display: inline-block;
        background-color: transparent;
        position: absolute;
        top: 0;
        right: 0;
    }
    #nav li {
        display: inline-block;
    }
    #nav .nav-link {
        width: 40px;
        display: inline-block;
        overflow: hidden;
        transition: width .5s;
    }
    #nav .nav-link-text {
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        opacity: 0;
        transition: opacity 1s;
    }
    #nav .nav-link:hover .nav-link-text,
    #nav .nav-link:focus .nav-link-text {
        opacity: 1;
        transition: opacity 1s;
    }
    #brevity #nav #nav-brevity a.nav-link,
    #imgin #nav #nav-imgin a.nav-link,
    #pinnd #nav #nav-pinnd a.nav-link,
    #updown #nav #nav-updown a.nav-link,
    #shyft #nav #nav-shyft a.nav-link,
    #tabletrim #nav #nav-tabletrim a.nav-link {
        width: 145px;
        color: #333;
        background-color: #fff;
    }
    #brevity #nav #nav-brevity .nav-link .nav-link-text, 
    #imgin #nav #nav-imgin .nav-link .nav-link-text, 
    #pinnd #nav #nav-pinnd .nav-link .nav-link-text, 
    #updown #nav #nav-updown .nav-link .nav-link-text, 
    #shyft #nav #nav-shyft .nav-link .nav-link-text, 
    #tabletrim #nav #nav-tabletrim .nav-link .nav-link-text { 
        opacity: 1; 
    }
}



/* =========================================================================== */
/* Sidebar
/* =========================================================================== */
#sidebar-wrapper {
    padding: 5px;
    margin: 0 0 20px;
    background-color: #efefef;
    border: 1px solid #ccc;
}
.sidebar {
    display: none;
}
.sidebar h2 {
    color: #888;
    border: none;
    font-size: 20px;
    margin: 10px 0 5px;
}
.sidebar h2:first-of-type {
    margin: 0;
}
.sidebar-nav {
    padding: 0 0 0 20px;
    margin: 0;
}
.sidebar-nav li {
    list-style: none;
}
.sidebar-nav ul {
    margin: 5px 0 0 10px;
}
.sidebar-nav a {
    display: block;
    text-transform: none;
    font-weight: normal;
}
.sidebar-nav ul a:before {
    content: '';
    display: inline-block;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: #888;
    margin: 0 3px;
}
/* 768 */
@media only screen and (min-width: 768px) {
    #sidebar-wrapper {
        border-color: transparent;
        background-color: transparent;
        padding: 0;
    }
    #sidebar-nav {
        padding: 0;
        background-color: transparent;
    }
}



/* =========================================================================== */
/* Sidebar toggle
/* =========================================================================== */
#sidebar-toggle-label {
    display: block;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}
#sidebar-toggle-label:before {
    content: '';
    display: inline-block;
    height: 40px;
    width: 40px;
    vertical-align: bottom;
    background: transparent url(../images/sprites.png) no-repeat -40px -40px;
}
#sidebar-toggle-input {
    position: absolute;
    left: -99999px;
}
@media only screen and (max-width: 767px) {
    #sidebar-toggle-input:checked ~ #sidebar-toggle-label:before {
        background: transparent url(../images/sprites.png) no-repeat -80px -40px;
    }
    #sidebar-toggle-input:checked ~ .sidebar {
        display: block;
    }    
}
/* 768 */
@media only screen and (min-width: 768px) {
    #sidebar-toggle-label {
        display: none;
        left: -99999px;
    }
    #sidebar-wrapper {
        position: absolute;
        top: 40px;
        right: 0;
        width: 230px;
        padding-left: 30px;
    }
    .sidebar {
        display: block;
    }
}





/* =========================================================================== */
/* Forms
/* =========================================================================== */
.button-row {
    clear: both;
    margin: 20px 0;
}
.button-group { 
    display: inline-block; 
    margin: 15px 0; 
}
.button-group { 
}
.button { 
    cursor: pointer; 
    font-size: 10px;
    display: inline-block; 
    background-color: #0d85ff; 
    color: #fff; 
    border: none;
    text-decoration: none; 
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 15px; 
    margin: 0;
}
.button:hover,
.button.active { 
    background-color: #0763c1;
}
/* Lightswitches */
input.lightswitch {
    position: absolute;
    left: -9999px;
}
input.lightswitch~label {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}
input.lightswitch~label:before {
    content: '';
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
    height: 20px;
    width: 59px;
    margin-right: 10px;
    border: 1px solid #666;
    background: transparent url(../images/sprites.png) no-repeat top left;
    -webkit-transition: background-position .2s;
    -moz-transition: background-position .2s;
    -o-transition: background-position .2s;
    -ms-transition: background-position .2s;
    transition: background-position .2s;
}
input.lightswitch.onoff~label:before { background-position: 0 -80px; }
input.lightswitch.onoff:checked~label:before { background-position: -41px -80px; }
input.lightswitch.truefalse~label:before { background-position: -100px -80px; }
input.lightswitch.truefalse:checked~label:before { background-position: -141px -80px; }



/* =========================================================================== */
/* Page
/* =========================================================================== */
#page-wrapper {
    width: 100%;
}
#page-content {
    position: relative;
    max-width: 680px;
    padding: 20px 260px 20px 10px;
    margin: 0 auto;
    color: #666;
    line-height: 24px;
}
/* 768 */
@media only screen and (max-width: 767px) {
    #page-content {
        max-width: 960px;
        padding: 20px 10px;
    }
}



/* =========================================================================== */
/* Footer
/* =========================================================================== */
#footer-wrapper {
    margin-top: 100px;
    background-color: #333;
}
#footer-content {
    max-width: 940px;
    padding: 50px 10px;
    margin: 0 auto;
}
#footer-github {
    text-align: center;
    padding: 20px 0;
}
#footer-github a {
    color: #666;
    font: normal 20px/20px "exoextralight", "Trebuchet MS", sans-serif;
    letter-spacing: 3px;
    text-decoration: none;
    display: inline-block;
    height: 40px;
    line-height: 40px; 
}
#footer-github a:before {
    content: '';
    display: inline-block;
    height: 40px;
    width: 40px;
    margin-right: 12px;
    position: relative;
    top: -3px;
    background: transparent url(../images/sprites.png) no-repeat -120px -40px;
    vertical-align: middle;
}



/* =========================================================================== */
/* Utility
/* =========================================================================== */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }