/* ==========================================================================
   Basic Element Formatting
   ========================================================================== */


*
{
    background-repeat: no-repeat;
}


html,
button,
input,
select,
textarea
{
    color: #222;
}

html
{
    font-size: 1em;
    line-height: 1.4;
}


body
{
    color: #333333;
    font: 14px/1.42857 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

body.wait,
body.wait input,
body.wait textarea,
body.wait select,
body.wait button,
body.wait .button,
body.wait .commandbutton
{
    cursor: wait !important;
}

td, th
{
    vertical-align: top;
    text-align: left;
}

::-moz-selection
{
    background: #b3d4fc;
    text-shadow: none;
}

::selection
{
    background: #b3d4fc;
    text-shadow: none;
}

hr
{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video
{
    vertical-align: middle;
}

fieldset
{
    border: solid 1px #ccc;
    margin: 0;
    padding: 10px;
    border-radius: 4px;
}
legend
{
    font-weight:bold;
}

textarea
{
    resize: vertical;
}


input, textarea, select, button
{
    display: inline-block;
    padding: 6px 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}



input[disabled], textarea[disabled], select[disabled], button[disabled], a[disabled]
{
    cursor: not-allowed;
}

input[disabled], textarea[disabled], select[disabled], button[disabled]
{
    background-color: #eee;
    color: #999;
}

input:focus, textarea:focus, select:focus
{
    border-color: #66AFE9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}


input[type="checkbox"], input[type="radio"]
{
    margin-right: 5px;
    vertical-align: middle;
}

input[type="file"]
{
    border:0;
    padding:0;
}

a
{
    color: #333;
}

a:hover
{
    color: #777;
}


label, .label
{
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6
{
    margin: 0px;
}

table[border]
{
    border-collapse: separate;
}

table[border="0"]
{
    border-collapse: collapse;
}




/* ==========================================================================
   Page Layout 
   ========================================================================== */


.page-wrapper
{
    /* this sets the width of the page */
    width: 960px;
    margin: 0 auto;
}

.page-wrapper .page-wrapper
{
    /* ignore nested page wrappers for now*/
    /* also ignore it if we are disabling them */
    width: auto;
    margin: 0;
}




/* page-section's are: header content footer*/

.page-section
{
    clear: both;
    position: relative;
}

.content-container
{
    position: relative;
}

/* This is the overall padding of the site in each section */
.page-section-inner
{
    padding: 10px;
    position: relative;
}

.page
{
    overflow-x: hidden;
}

#header
{
    z-index: 3;
}

#page-body
{
    z-index: 2;
}

#footer
{
    z-index: 1;
}


/* ==========================================================================
    Begin Page columns

    This starts the section for the page columns.  This is very confusing, but this is necessary 
    to get the center column to come first in the markup when adding the padding or borders only 
    the left and right matter add them together

    LC = left column
    RC = right column
    CC = center column

    LC FullWidth = LC width + LC padding + LC borders
    RC FullWidth = RC width + RC padding + RC borders
    ========================================================================== */




.page-column /* page column is for all columns */
{
    padding: 0;
    border: 0;
    position: relative;
    float: left;
}

.column-content
{
    width: 100%;
    padding: 0 10px; /* CC padding:  the left and right padding shoudl match left and right padding of page-section-inner */
}

/* LC FullWidth = 180px*/
.column-left
{
    padding: 0 10px; /* LC padding:  the left and right padding shoudl match left and right padding of page-section-inner */
    width: 160px; /* LC Width */
    right: 200px; /* LC FullWidth  + CC padding */
    margin-left: -100%;
}

/* RC FullWidth = 180px */
.column-right
{
    padding: 0 10px; /* RC padding:  the left and right padding shoudl match left and right padding of page-section-inner  */
    width: 160px; /* RC Width */
    margin-right: -200px; /* RC FullWidth  + CC padding */
}



.page-body-inner
{
    padding-left: 180px; /*  LC FullWidth */
    padding-right: 200px; /* RC FullWidth + CC padding */
}



/* special cases where columns are missing */
.page-body-inner.no-right
{
    padding-right: 20px; /* CC padding */
}

.page-body-inner.no-left
{
    padding-left: 0; /* LC left padding - CC left padding */
}

/* ==========================================================================
   End Page Columns
   ========================================================================== */

#header a.home_link
{
    display: block;
}

.page_heading /* this is the main page title*/
{
    border-bottom: 2px solid #333333;
    margin-bottom: 0.5em;
}



.widget_collection_header
{
    margin-top: 10px;
}

.widget_collection_footer
{
    margin-bottom: 10px;
}





.bleed .content-container:not(.col):not(.no-bleed)
{
    /* there is no standard inner container so the padding has to be applied to the outer */
    /* so we have to subtract the padding from the width */
    width: 940px; /* width minus side padding*/
    padding: 0 10px; /* side padding should match the overall site side padding*/
    margin: 0 auto;
}





.bleed .page-wrapper,
.bleed .content-container.bleed:not(.col):not(.no-bleed)
{
    /* we have to disable the page wrapper on the body to make the body content bleed to the edge */
    width: auto;
    margin: 0px;
}

.bleed .widget.content-container:not(.col):not(.no-bleed)
{
    margin-bottom: 10px;
}

.bleed .column-content
{
    padding: 0px;
}

.bleed .page-body-inner.page-body-inner.no-right
{
    padding-right: 0px;
}




/* ==========================================================================
   End Page Layout 
   ========================================================================== */




/* ==========================================================================
   Helper classes
   ========================================================================== */

.clear
{
    clear: both;
    height: auto !important;
}

.ir
{
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before
{
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden
{
    display: none !important;
    visibility: hidden !important;
}

.show
{
    display: block !important;
    visibility: visible !important;
}

.visuallyhidden
{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus
{
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible
{
    visibility: hidden;
}

.clearfix:before,
.clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

.centered, .text_align_center, .align-center
{
    text-align: center;
}

.text_align_right, .align-right
{
    text-align: right;
}

.text_align_left, .align-left
{
    text-align: left;
}

.nowrap
{
    white-space: nowrap;
}

.responsive-image
{
    max-width: 100% !important;
    height: auto !important;
    
}

.list-unstyled
{
    list-style: none outside none;
    padding-left: 0;
}

.list-inline
{
    list-style: none outside none;
    margin-left: -5px;
    padding-left: 0;
}

.list-inline > li
{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

.center-block
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.pull-left
{
    float: left !important;
}

.pull-right
{
    float: right !important;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print
{
    *
    {
        background: transparent !important;
        background-color:#fff;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited
    {
        text-decoration: underline;
    }


    abbr[title]:after
    {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after
    {
        content: "";
    }

    pre,
    blockquote
    {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead
    {
        display: table-header-group;
    }

    tr,
    img
    {
        page-break-inside: avoid;
    }

    img
    {
        max-width: 100% !important;
    }

    @page
    {
        margin: 0.5cm;
    }

    p,
    h2,
    h3
    {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3
    {
        page-break-after: avoid;
    }

    .page, .page-section, .page-wrapper, .content-container:not(.col)
    {
        width: auto !important;
    }
}



/* ==========================================================================
   Responsive Styles
   ========================================================================== */


/* anything less than or equal to 1023px this would be smaller than 1st gen ipad*/
@media only screen and (max-width: 1023px)
{



    .hidden-md /* hide on medium screens or less*/
    {
        display: none !important;
        visibility: hidden !important;
    }

    .visible-md /*visible on medium screens or less*/
    {
        display: block !important;
        visibility: visible !important;
    }
     .visible-md-inline
    {
        display: inline !important;
        visibility: visible !important;
    }

    .visible-md-inline-block
    {
        display: inline-block !important;
        visibility: visible !important;
    }

}

/* anything less than or equal to 768 wide*/
@media only screen and (max-width: 768px)
{
    #header a.home_link
    {
        position: static;
        margin: 0 auto;
    }




    .page-wrapper, .page-wrapper .page-wrapper
    {
        width: 90% !important;
        margin: 0 5% !important;
    }


    .page-wrapper.page-wrapper-outer
    {
        /* now we ignore the outer wrappers */
        width: auto !important;
        margin: 0 !important;
    }



    .page-column /* page column is for all columns*/
    {
        float: none;
    }

    .page-section-inner
    {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }





    .column-content, .column-left, .column-right
    {
        width: auto !important;
        right: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
    }

    .column-left, .column-right
    {
        /* give some top padding since they are stacking now */
        padding-top: 10px !important;
    }


    .page-body-inner, .page-body-inner.no-right, .page-body-inner.no-left
    {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    td, th
    {
        width: auto !important;
         white-space: normal !important;
    }

    table
    {
        width: 100% !important;
    }

   



    .bleed .content-container:not(.col):not(.no-bleed)
    {
        /* we have to apply the responsive styles from the pager wrapper to the alternate containers */
        width: 90% !important;
        margin: 0 5% !important;
        padding: 0;
    }



    .bleed .page-wrapper,
    .bleed .content-container.bleed:not(.col):not(.no-bleed)
    {
        /* we have to disable the page wrapper on the body to make the body content bleed to the edge */
        width: auto !important;
        margin: 0px !important;
    }

    .bleed .widget.content-container:not(.col):not(.no-bleed)
    {
        margin-bottom: 1.6% !important;
    }


    .bleed .widget_collection > .widget_collection_item:last-child > .widget.content-container:not(.col):not(.no-bleed)
    {
        margin-bottom: 0px !important;
    }


    .hidden-sm /* hide on small screens or less*/
    {
        display: none !important;
        visibility: hidden !important;
    }

    .visible-sm /*visible on small screens or less*/
    {
        display: block !important;
        visibility: visible !important;
    }
    .visible-sm-inline
    {
        display: inline !important;
        visibility: visible !important;
    }

    .visible-sm-inline-block
    {
        display: inline-block !important;
        visibility: visible !important;
    }

}

/* anything less than or equal to 480 wide*/
@media only screen and (max-width: 480px)
{
    .hidden-xs /* hide on extra small screens or less */
    {
        display: none !important;
        visibility: hidden !important;
    }

    .visible-xs /*visible on extra small screens or less*/
    {
        display: block !important;
        visibility: visible !important;
    }


    table, tbody, thead, tfoot, tr, td, th
    {
        display: block;
        width: auto !important;
        clear: left;
        position: relative;
    }


    td[data-title]:before
    {
        content: attr(data-title);
        font-weight: bold;
    }

    td, th
    {
        padding: 1.6%;
        text-align: left !important;
    }
}