/*
*
* Scaffolding Classes
* -------------------
*
* These blocks contain all of the major structural layout elements, and may be
* either fixed (in which case a maximum with is imposed), or fluid (by default).
*
*
*/


section[id$="Container"]>*, div[class$="Container"]>*
{
    margin: 0 auto;
    padding: 0;
    position: relative; 
}



.clearer{ clear: both; float: none; overflow: hidden; height: 0;}

/* --------------------------------------------------
    :: Reflowing Design Pattern: Row and Column 
----------------------------------------------------*/

.row
{
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    clear: both;
}

.row:after, ul.grid:after
{
    clear: both;
    float: none;
    content: " ";
    height: 0;
    width: auto;
    display: block;
    overflow: hidden;
}

fieldset.column
{
    margin: 0;
    margin-left: 3.2%;
}

.column, .columns {
    float: left;
    margin-left: 3.2%;
    min-height: 1px;
    position: relative;
}

.column:first-child, .rowcontext + .column
{
    margin-left: 0;
}

.row.justify .column + .column:last-child
{
    float: right;
}

.one.column		{ width: 5.4%;}
.two.column		{ width: 14%;}
.three.column	{ width: 22.6%;}
.four.column	{ width: 31.2%;}
.five.column	{ width: 39.8%;}
.six.column		{ width: 48.4%;}
.seven.column	{ width: 57%;}
.eight.column	{ width: 65.6%;}
.nine.column	{ width: 74.2%;}
.ten.column		{ width: 82.8%;}
.eleven.column	{ width: 91.4%;}
.twelve.column	{ width: 100%;}

.push-one		{ left:8.6%;}
.push-two		{ left:17.2%;}
.push-three		{ left:25.8%;}
.push-four		{ left:34.4%;}
.push-five		{ left:43%;}
.push-six		{ left:51.6%;}
.push-seven		{ left:60.2%;}
.push-eight		{ left:68.8%;}
.push-nine		{ left:77.4%;}
.push-ten		{ left:86%;}
.push-eleven	{ left:94.6%;}

.pull-one		{ right:8.6%;}
.pull-two		{ right:17.2%;}
.pull-three		{ right:25.8%;}
.pull-four		{ right:34.4%;}
.pull-five		{ right:43%;}
.pull-six		{ right:51.6%;}
.pull-seven		{ right:60.2%;}
.pull-eight		{ right:68.8%;}
.pull-nine		{ right:77.4%;}
.pull-ten		{ right:86%;}
.pull-eleven	{ right:94.6%;}


img
{
    max-width: 100%;
    height: auto;
}

ul.grid img:first-child
{
    width: 100%;
    height: auto;
    max-width: none;
}

#map img
{
    width: auto !important; 
    max-width: none !important;
}

/* --------------------------------------------------
    :: Reflowing Design Pattern: Grids & Galleries
----------------------------------------------------*/

ul.grid, ul.autogrid
{
    height: auto;
    display: block;
    margin: 0 0 0 -3.2%;
    padding: 0;    
    position: relative;   
}

ul.grid>li
{
    float: left;
    margin-left: 3.2%;
    margin-bottom: 3.2%;
    list-style-type: none;
    padding: 0;   
    position: relative;
}

ul.grid.two>li    { width: 46.8%;  } /* 460px */
ul.grid.three>li  { width: 30.13%; } /* 300px */
ul.grid.four>li   { width: 21.8%;  } /* 220px */
ul.grid.five>li   { width: 16.8%;  } /*175px*/
ul.grid.six>li    { width: 13.44%; } /* 140px */

ul.grid.two>li.double { width: 100%; }
ul.grid.three>li.double  { width: 63.13%; } 
ul.grid.four>li.double { width: 46.8%; }
ul.grid.five>li.double   { width: 36.8%;  } 
ul.grid.six>li.double { width:  30.13%; }

ul.grid>li.header
{
    clear: both;
    width: 100%;
    display: block;
    margin-bottom: 0;
}

ul.grid>li>img
{
    display: block;
    width: 100%;
    height: auto;
}

ul.grid.flush, ul.autogrid.flush
{
    margin-left: 0;
}

ul.grid.flush>li, ul.autogrid.flush
{
    margin: 0;
}

ul.grid.flush.two>li    {  width: 50%;  } /* 460px */
ul.grid.flush.three>li    {  width: 33.32%;  } /* 300px */
ul.grid.flush.four>li    {  width: 24.98%;  } /* 220px */
ul.grid.flush.five>li    {  width: 19.98%;  } /*175px*/
ul.grid.flush.six>li    {  width: 16.65%;  } /* 140px */

ul.grid.flush.two>li.double { width: 100%; }
ul.grid.flush.three>li.double { width: 66.65%; }
ul.grid.flush.four>li.double { width: 50%; }
ul.grid.flush.five>li.double { width: 39.99%; }
ul.grid.flush.six>li.double { width:  33.32%; }





/* --------------------------------------------------
    :: Reflowing Design Pattern: Thumblists
-----------------------------------------------------
    A thumblist is basically any list where the
    contained elements typically have a picture (floated left)
    with text (floated right).
----------------------------------------------------*/

ul.thumbList
{
    overflow: hidden;
    height: auto;
    display: block;
    padding: 0;    
    position: relative;	
}

ul.thumbList>li
{
    overflow: hidden;
    height: auto;
    display: block;
    position: relative;
    clear: both;
    margin-bottom: 2%;
}

ul.thumbList>li>*:first-child
{
    float: left;
    margin-right: 2%;
}

ul.thumbList>li>*:first-child + *
{
    float: left;
}

ul.thumbList>li>*:first-child + *>*:first-child
{
    margin-top: 0;
}


/* -------------------------------------------------- 
    :: Fixed Aspect Ratio Box Containers
---------------------------------------------------*/
.fixed-aspect
{
    height: 0;
    position: relative;
}

.fixed-aspect>.fixed-proportions,
.fixed-aspect>iframe

{
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}


.fixed-aspect.widescreen
{
    padding-bottom: 56.25%;
}

.fixed-aspect.half
{
    padding-bottom: 50%;
}

.fixed-aspect.third
{
    padding-bottom: 33%;
}

.fixed-aspect.twothirds
{
    padding-bottom: 66%;
}

.fixed-aspect.fourthirds
{
    padding-bottom: 75%;
}

.fixed-aspect.square
{
    padding-bottom: 100%;
}

/* -------------------------------------------------- 
    :: Mobile Visibility Affordances
---------------------------------------------------*/


.show-on-phone { display: none; }    
.show-on-desktop { display: block; }

.hide-on-phone { display: block; }    
.hide-on-desktop { display: none; }


table.show-on-desktop { display: table ; }
table.hide-on-phone { display: table ; }    


table.show-on-desktop { display: table ; }
table.hide-on-phone { display: table ; }

table tr.show-on-desktop { display: table-row ; }
table tr.hide-on-phone { display: table-row ; }        

table td.show-on-desktop { display: table-cell ; }
table td.hide-on-phone { display: table-cell ; }        

table th.show-on-desktop { display: table-cell ; }
table th.hide-on-phone { display: table-cell ; }        
    


/* Our default mobile breakpoint is 768px. */
@media only screen and (max-width: 768px) 
{

    *[class~="column"]
	{
        display: block !important;
        float: none !important;
        clear: both !important;
        width: auto !important;
		margin-left: 0 !important;
    }    
    
    .hide-on-phone { display: none !important; }
    .hide-on-desktop { display: block !important; }

    .show-on-phone { display: block !important; }
    .show-on-desktop { display: none !important; }



    table.hide-on-desktop { display: table;  }
    table.show-on-phone { display: table;  }

    table tr.hide-on-desktop { display: table-row ; }
    table tr.show-on-phone { display: table-row ; }        

    table td.hide-on-desktop { display: table-cell ; }
    table td.show-on-phone { display: table-cell ; }        

    table th.hide-on-desktop { display: table-cell ; }
    table th.show-on-phone { display: table-cell ; }        
    
    table.linearize-on-phone,
    table.linearize-on-phone tbody,
    table.linearize-on-phone thead,
    table.linearize-on-phone tfoot,
    table.linearize-on-phone tr,
    table.linearize-on-phone td
    {
        display: block;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none;
    }
    
    .inline-on-phone { display: inline !important;}
    .inline-block-on-phone { display: inline-block !important;}
    .block-on-phone { display: block !important;}
    .table-on-phone { display: table !important;}
    .table-row-on-phone { display: table-row !important;}
    .table-cell-on-phone { display: table-cell !important;}
    
    
    
    ul.linearize-on-phone
    {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    ul.linearize-on-phone>li
    {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    ul.grid.two-on-phone>li
    { 
        width: 46.8%; 
    }
    
    ul.grid.six.three-on-phone>li 
    {
        width: 30.13%; 
    }
    
    .row .column[class*="push-"],
    .row .column[class*="pull-"]
    {
        left: auto !important;
        right: auto !important;
    }    
    

ul.grid>li.header
{
    clear: both;
    width: 100%;
    display: block;
}    
	    

}

@media only screen and (max-width: 480px) 
{
    ul.grid.two-on-phone>li,
    ul.grid.three-on-phone>li 
    {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    ul.grid.two-on-phone,
    ul.grid.three-on-phone
    {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
      
}

/* --------------------------------------------------
    :: Utility Classes
----------------------------------------------------*/

.oneline
{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-overflow: ellipsis-word;		
    overflow: hidden;
}

li.oneline
{
    display: list-item;
}

.panel {
    border: 1px solid RGBA(0, 0, 0, 0.1);
    margin: 0 0;
    padding: 1em;
    position: relative;
    top: -1em;
}    

.block
{
    display: block !important;
}

.button.block
{
    text-align: center;
}