/* CSL Site Framework / GRID, version 6 - 2014 Copyright Capstone Labs, LLC. This source is subject to the MIT License ( http://www.opensource.org/licenses/mit-license.php ).  For more information go to: http://www.capstonelabs.com/ or contact: csl@capstonelabs.com. */
/* This CSS Grid - takes inspiration from numerous sources, implementing Mobile First with incremental enhancements as screen size increases */
/* Usage : Grid is composed of .frame (Full Page boundry), .row (return/Line Boundry), and .cell - (content containers)*/
/* - Cells are sized by amount of screen they contain c1 = 100% ... c3 = 1/3 ...c4 = 1/4  ...c8 = 1/8 with additional multiples (c8x3 = 3/8 of screen) etc. All cells in row should be <= 100% */
/* - At smaller size screens cells go to 100% and stack upon each other unless .mo (mobile .c1 - .c3) or .tb (tablet : .c1 - .c5 ) are added to rows to override this default behavior */
/* - Additions, for: media queries : respond.min.js / for older Browsers (IE 9 & before): jquery.cslCssFix.js / html5.js  */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
header, footer, article, section, aside, video, audio, img, form, ul { display: block; max-width: 100%; margin: 0; padding: 0; height: auto; border: none 0px; }
html, body { padding: 0px; margin: 0px; min-width: 100%; *zoom: 1; min-height: 100%; background-color: #FFF; color: #000; }
body { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; line-height: 1.3em; word-spacing: 0.15em; }
div { display: block; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { display: block; padding: 0px; margin: 2px 0px; line-height: 1.3em; }
h1 { font-size: 4em; }
h2 { font-size: 3em; }
h3 { font-size: 2.5em; }
h4 { font-size: 2em; }
h5 { font-size: 1.75em; }
h6 { font-size: 1.5em; }
p { margin: 5px 0; padding: 0; }
a { color: #3d96d7; text-decoration: none; }
    a:hover { color: #d45555; text-decoration: underline; }
sub, sup { vertical-align:baseline; line-height:0.5; font-size:0.8em; position:relative; }
sup { vertical-align:text-top;margin-top:0.25em;  }
.video { position: relative; padding-bottom: 58%; padding-top: 30px; height: 0; overflow: hidden; }
    .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.center { text-align: center; }
    .center > * { margin: 0 auto; }
.round5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.round10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.round15 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.round20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.round25 { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }

.btn { padding: 5px 10px; border-radius: 10px; display: inline-block; overflow: visible; border: solid 1px #808080; color: #FFF; background-color: #07256b; text-decoration: none; font-weight: bold; }
    .btn.del { background-color: #f00; color: #000; }

.msg { clear: both; margin: auto; padding: 2%; color: #000; width: 80%; border: solid 1px #000; }
    .msg:after { content: ' x '; position: absolute; top: 5px; right: 20px; cursor: pointer; }
    .msg.slide { position: absolute; top: -700px; left: 10%; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: 1s; background-color: #FFF; cursor: pointer; z-index: 9998; }
    .msg.pop { position: absolute; top: 20%; left: 10%; border-radius: 10px; border: 1px solid #000; display: none; background-color: #fff; overflow: hidden; padding: 0px; box-shadow: #808080 5px 5px 12px; z-index: 9998; }
        .msg.pop .title { background-color: #6fa4ca; width: 100%; padding: 10px 20px; cursor: pointer; }
        .msg.pop .content { background-color: #fff; width: 100%; padding: 20px; }
    .msg.success { background-color: #c7facd; }
    .msg.alert { background-color: #f2e8b1; }
    .msg.err { background-color: #e9acac; }
    .msg .opt { clear: both; }
    .msg input[type='submit'] { display: block; width: 100%; text-align: center; padding: 5px 10px; margin: 2px; background-color: #4a7a4f; color: #FFF; border: solid 2px #808080; border-radius: 10px; }
        .msg button:hover, .msg input[type='submit']:hover { background-color: #00ff90; color: #000; }

.frame { width: 100%; margin: 0 auto; position: relative; }
    .frame .row { width: 100%; clear: both; }
        .frame .row .cell { width: 100%; clear: both; padding: 5px; }
        .frame .row.mo .cell { clear: none; float: left; }
        .frame .row.mo .c2 { width: 50%; }
        .frame .row.mo .c3 { width: 33.33%; }
        .frame .row.mo .c3x2 { width: 66.66%; }

.nav { overflow: visible !important; }
    .nav select { padding: 5px; display: block; width: 98%; margin: 0 auto; }
    .nav ul { display: none; }

.form { }
    .form p { overflow: hidden; display: block; clear: both; width: 100%; }
    .form label { width: 100%; float: none; }
    .form select, .form textarea, .form p > input[type='text'], .form p > input[type='password'] { width: 100%; float: none; }
    .form textarea { height: 50px; }
    .form button, .form input[type='submit'] { padding: 9px 25px; margin: 0 auto; background-color: #4a7a4f; color: #FFF; border: solid 2px #808080; border-radius: 10px; }
        .form button:hover, .form input[type='submit']:hover { background-color: #00ff90; color: #000; }
    .form input[type='reset'] { padding: 10px 20px; margin: 0 auto; background-color: #ff6a00; color: #FFF; border: solid 2px #808080; border-radius: 10px; }
        .form input[type='reset']:hover { background-color: #f00; color: #000; }
    .form .submit { width: 100%; text-align: center; }

.pager { clear: both; display: block; margin: 10px auto; overflow: hidden; text-align: center; }
    .pager a { display: inline-block; padding: 5px 10px; margin: 1px; border: solid 1px #000; color: #000; text-decoration: none; }
        .pager a.current { background-color: #3d96d7; }
        .pager a:hover { background-color: #6fa4ca; }

.desk, .tablet { display: none; }
.mobile { display: block; }

@media handheld, only screen and (min-width:501px) {
    body { font-size: 0.8em; }
    .mobile { display: none; }
    .tablet { display: block; }

    .msg { }
        .msg .opt { clear: both; float: right; margin: 5px 15px 5px 5px; }
        .msg input[type='submit'] { display: block; float: left; width: auto; padding: 5px 15px; margin: 0 2px; background-color: #4a7a4f; color: #FFF; border: solid 2px #808080; border-radius: 10px; }

    .frame .row { }
        .frame .row.tb .cell { clear: none; float: left; }
        .frame .row.tb .c2 { width: 50%; }
        .frame .row.tb .c3 { width: 33.33%; }
        .frame .row.tb .c3x2 { width: 66.66%; }
        .frame .row.tb .c4 { width: 25%; }
        .frame .row.tb .c4x2 { width: 50%; }
        .frame .row.tb .c4x3 { width: 75%; }
        .frame .row.tb .c5 { width: 20%; }
        .frame .row.tb .c5x2 { width: 40%; }
        .frame .row.tb .c5x3 { width: 60%; }
        .frame .row.tb .c5x4 { width: 80%; }

    .form { }
        .form label { width: 32%; margin-right: 2%; float: left; }
        .form.lright label { width: 32%; margin-left: 2%; text-align: right; }
        .form select, .form textarea, .form p input[type='text'], .form p input[type='password'] { width: 65%; padding: 4px 0px; float: left; }
        .form p { display: block; overflow: hidden; }
            .form p input[type='file'] { width: 55%; padding: 4px 0px; float: left; }
        .form .lg { width: 100%; }
            .form .lg * { width: auto; float: none; }
            .form .lg textarea { clear: both; width: 100%; float: none; height: 200px; }
}

@media handheld, only screen and (min-width:800px) {
    body { font-size: 0.8em; line-height: 1.3em; }
    .tablet { display: none; }
    .desk { display: block; }

    .frame .row { }
        .frame .row .cell { clear: none; float: left; }
        .frame .row .c2 { width: 50%; }
        .frame .row .c3 { width: 33.33%; }
        .frame .row .c3x2 { width: 66.66%; }
        .frame .row .c4 { width: 25%; }
        .frame .row .c4x2 { width: 50%; }
        .frame .row .c4x3 { width: 75%; }
        .frame .row .c5 { width: 20%; }
        .frame .row .c5x2 { width: 40%; }
        .frame .row .c5x3 { width: 60%; }
        .frame .row .c5x4 { width: 80%; }
        .frame .row .c6 { width: 16.66%; }
        .frame .row .c6x2 { width: 33.32%; }
        .frame .row .c6x3 { width: 50%; }
        .frame .row .c6x4 { width: 66.64%; }
        .frame .row .c6x5 { width: 83.33%; }
        .frame .row .c8 { width: 12.5%; }
        .frame .row .c8x2 { width: 25%; }
        .frame .row .c8x3 { width: 32.5%; }
        .frame .row .c8x4 { width: 50%; }
        .frame .row .c8x5 { width: 62.5%; }
        .frame .row .c8x6 { width: 75%; }
        .frame .row .c8x7 { width: 87.5%; }
        .frame .row .c10 { width: 10%; }
        .frame .row .c10x2 { width: 20%; }
        .frame .row .c10x3 { width: 30%; }
        .frame .row .c10x4 { width: 40%; }
        .frame .row .c10x5 { width: 50%; }
        .frame .row .c10x6 { width: 60%; }
        .frame .row .c10x7 { width: 70%; }
        .frame .row .c10x8 { width: 80%; }
        .frame .row .c10x9 { width: 90%; }

    .nav { }
        .nav ul { display: block; }
            .nav ul > ul { display: none; }
        .nav a { text-decoration: none; }
        .nav > ul { margin: 0px; padding: 0px; display: block; }
        .nav select { display: none; }
        .nav li { }
            .nav li a { padding: 2px; display: block; width: 100%; text-align: left; }
            .nav li:last-child { border: none 0px; }
            .nav li:hover > ul { display: block; position: absolute; }
        .nav ul ul { display: none; background-color: #fff; z-index: 9999; }
            .nav ul ul li { display: block; float: none; clear: both; border-bottom: solid 1px #000; position: relative; min-width: 250px; }
                .nav ul ul li a:not(:only-child):after { content: ''; position: absolute; right: 0px; top: 4px; border: solid 8px transparent; border-left: solid 8px #000; vertical-align: middle; }

        .nav.h { }
            .nav.h li { margin: 0px; padding: 0; float: left; display: block; position: relative; list-style-type: none; }
                .nav.h li a { text-align: center; }
                .nav.h li:hover > ul { top: 28px; left: 0px; min-width: 250px; }
                .nav.h li ul a { text-align: left; }
                .nav.h li ul li:hover > ul { display: block; position: absolute; top: -5px; left: 240px; min-width: 250px; }
                .nav.h li:last-child:hover > ul { right: 0px; }
                .nav.h li:last-child ul li:hover > ul { display: block; position: absolute; top: -5px; left: -250px; min-width: 250px; }

        .nav.v li { list-style: none; display: block; width: 100%; border-bottom: solid 1px #000; position: relative; }
            .nav.v li a:not(:only-child):after { content: ''; position: absolute; right: 0px; top: 4px; border: solid 8px transparent; border-left: solid 8px #000; vertical-align: middle; }
            .nav.v li:hover > ul { top: -5px; left: 250px; min-width: 250px; }

    .form.split p { width: 48%; float: left; padding: 0 1%; clear: none; }
}

@media handheld, only screen and (min-width:1400px) {
    body { font-size: 1em; line-height: 1.3em; }
}

@media handheld, only screen and (min-width:1700px) {
    body { font-size: 1.2em; line-height: 1.3em; }
}


/* -------  Print Based / CSS template --------- */
@media only print {
    html, body { margin: 0px; padding: 0px; background-color: none; background-image: none; color: #000; height: auto; font-size: 0.9em; }
    a { text-decoration: none; color: #000; }
        a:after { content: ' [' attr(href) ']'; }
    .nav { display: none; height: 0px; width: 0px; }
        .nav:before { content: ''; height: 0px; width: 0px; display: none; }
    .footer { display: none; }
    .cell { width: 98%; display: block; float: none; }
        .cell.logo { text-align: center; }
}