/*
 * Website Base v1.1
 * http://advantage.patternlibrary.beta.moveable.ca/
 *
 * Grid Layout 
*/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.container {
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) { 
    .container { width: 750px; }
}

@media (min-width: 992px) {
    .container { width: 970px; }
}
@media (min-width: 1200px) {
    .container { width: 1170px; }
}

.container:before, .container:after, .row-fluid:before, .row-fluid:after { display: table; content: " "; }
.container:after, .row-fluid:after { clear: both; }

.row-fluid { margin-right: -15px; margin-left: -15px; margin-bottom: 1em;}

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12,
.span-1-sm, .span-2-sm, .span-3-sm, .span-4-sm, .span-5-sm, .span-6-sm, .span-7-sm, .span-8-sm, .span-9-sm, .span-10-sm, .span-11-sm, .span-12-sm,
.span-1-lg, .span-2-lg, .span-3-lg, .span-4-lg, .span-5-lg, .span-6-lg, .span-7-lg, .span-8-lg, .span-9-lg, .span-10-lg, .span-11-lg, .span-12-lg
 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;  
}

.row-fluid img,
[class*=span-] img { width: 100%; }


/* no-stack prevents stacking and will flow items in the grid as per their span's */
.no-stack .span-1, .no-stack .span-2, .no-stack .span-3, .no-stack .span-4, .no-stack .span-5, .no-stack .span-6, .no-stack .span-7, .no-stack .span-8, .no-stack .span-9, .no-stack .span-10, .no-stack .span-11, .no-stack .span-12 { float: left; }

.no-stack .span-12 { width: 100%; }
.no-stack .span-11 { width: 91.66666667%; }
.no-stack .span-10 { width: 83.33333333%; }
.no-stack .span-9 { width: 75%; }
.no-stack .span-8 { width: 66.66666667%; }
.no-stack .span-7 { width: 58.33333333%; }
.no-stack .span-6 { width: 50%; }
.no-stack .span-5 { width: 41.66666667%; }
.no-stack .span-4 { width: 33.33333333%; }
.no-stack .span-3 { width: 25%; }
.no-stack .span-2 { width: 16.66666667%; }
.no-stack .span-1 { width: 8.33333333%; }

.no-stack .span-offset-12 { margin-left: 100%; }
.no-stack .span-offset-11 { margin-left: 91.66666667%; }
.no-stack .span-offset-10 { margin-left: 83.33333333%; }
.no-stack .span-offset-9 { margin-left: 75%; }
.no-stack .span-offset-8 { margin-left: 66.66666667%; }
.no-stack .span-offset-7 { margin-left: 58.33333333%; }
.no-stack .span-offset-6 { margin-left: 50%; }
.no-stack .span-offset-5 { margin-left: 41.66666667%; }
.no-stack .span-offset-4 { margin-left: 33.33333333%; }
.no-stack .span-offset-3 { margin-left: 25%; }
.no-stack .span-offset-2 { margin-left: 16.66666667%; }
.no-stack .span-offset-1 { margin-left: 8.33333333%; }
.no-stack .span-offset-0 { margin-left: 0; }

/* mobile & small viewport */
@media (max-width: 767px) {

    /* if marked with small, the stacking will appear using this for small viewports */
    .span-1-sm, .span-2-sm, .span-3-sm, .span-4-sm, .span-5-sm, .span-6-sm, .span-7-sm, .span-8-sm, .span-9-sm, .span-10-sm, .span-11-sm, .span-12-sm { float: left; }
    .span-12-sm { width: 100%; }
    .span-11-sm { width: 91.66666667%; }
    .span-10-sm { width: 83.33333333%; }
    .span-9-sm { width: 75%; }
    .span-8-sm { width: 66.66666667%; }
    .span-7-sm { width: 58.33333333%; }
    .span-6-sm { width: 50%; }
    .span-5-sm { width: 41.66666667%; }
    .span-4-sm { width: 33.33333333%; }
    .span-3-sm { width: 25%; }
    .span-2-sm { width: 16.66666667%; }
    .span-1-sm { width: 8.33333333%; }

    .span-offset-12-sm { margin-left: 100%; }
    .span-offset-11-sm { margin-left: 91.66666667%; }
    .span-offset-10-sm { margin-left: 83.33333333%; }
    .span-offset-9-sm { margin-left: 75%; }
    .span-offset-8-sm { margin-left: 66.66666667%; }
    .span-offset-7-sm { margin-left: 58.33333333%; }
    .span-offset-6-sm { margin-left: 50%; }
    .span-offset-5-sm { margin-left: 41.66666667%; }
    .span-offset-4-sm { margin-left: 33.33333333%; }
    .span-offset-3-sm { margin-left: 25%; }
    .span-offset-2-sm { margin-left: 16.66666667%; }
    .span-offset-1-sm { margin-left: 8.33333333%; }
    .span-offset-0-sm { margin-left: 0; }
}


/* desktop styles - apply the grid system, otherwise stack */
@media (min-width: 768px) {
    .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { float: left; }
    
    .span-12 { width: 100% ; }
    .span-11 { width: 91.66666667% ; }
    .span-10 { width: 83.33333333% ; }
    .span-9 { width: 75% ; }
    .span-8 { width: 66.66666667% ; }
    .span-7 { width: 58.33333333% ; }
    .span-6 { width: 50%; }
    .span-5 { width: 41.66666667% ; }
    .span-4 { width: 33.33333333% ; }
    .span-3 { width: 25% ; }
    .span-2 { width: 16.66666667% ; }
    .span-1 { width: 8.33333333% ; }

    .span-1-md, .span-2-md, .span-3-md, .span-4-md, .span-5-md, .span-6-md, .span-7-md, .span-8-md, .span-9-md, .span-10-md, .span-11-md, .span-12-md { float: left; }

    .span-12-md { width: 100%; }
    .span-11-md { width: 91.66666667%; }
    .span-10-md { width: 83.33333333%; }
    .span-9-md { width: 75%; }
    .span-8-md { width: 66.66666667%; }
    .span-7-md { width: 58.33333333%; }
    .span-6-md { width: 50%; }
    .span-5-md { width: 41.66666667%; }
    .span-4-md { width: 33.33333333%; }
    .span-3-md { width: 25%; }
    .span-2-md { width: 16.66666667%; }
    .span-1-md { width: 8.33333333%; }

    
    .span-offset-12 { margin-left: 100%; }
    .span-offset-11 { margin-left: 91.66666667%; }
    .span-offset-10 { margin-left: 83.33333333%; }
    .span-offset-9 { margin-left: 75%; }
    .span-offset-8 { margin-left: 66.66666667%; }
    .span-offset-7 { margin-left: 58.33333333%; }
    .span-offset-6 { margin-left: 50%; }
    .span-offset-5 { margin-left: 41.66666667%; }
    .span-offset-4 { margin-left: 33.33333333%; }
    .span-offset-3 { margin-left: 25%; }
    .span-offset-2 { margin-left: 16.66666667%; }
    .span-offset-1 { margin-left: 8.33333333%; }
    .span-offset-0 { margin-left: 0; }    
}

@media (min-width: 992px) {
    .span-12 { width: 100% ; }
    .span-11 { width: 91.66666667% ; }
    .span-10 { width: 83.33333333% ; }
    .span-9 { width: 75% ; }
    .span-8 { width: 66.66666667% ; }
    .span-7 { width: 58.33333333% ; }
    .span-6 { width: 50%; }
    .span-5 { width: 41.66666667% ; }
    .span-4 { width: 33.33333333% ; }
    .span-3 { width: 25% ; }
    .span-2 { width: 16.66666667% ; }
    .span-1 { width: 8.33333333% ; }
}

@media (min-width: 1200px) {
        
    .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { float: left; }

    .span-12 { width: 100% ; }
    .span-11 { width: 91.66666667% ; }
    .span-10 { width: 83.33333333% ; }
    .span-9 { width: 75% ; }
    .span-8 { width: 66.66666667% ; }
    .span-7 { width: 58.33333333% ; }
    .span-6 { width: 50%; }
    .span-5 { width: 41.66666667% ; }
    .span-4 { width: 33.33333333% ; }
    .span-3 { width: 25% ; }
    .span-2 { width: 16.66666667% ; }
    .span-1 { width: 8.33333333% ; }

    .span-1-lg, .span-2-lg, .span-3-lg, .span-4-lg, .span-5-lg, .span-6-lg, .span-7-lg, .span-8-lg, .span-9-lg, .span-10-lg, .span-11-lg, .span-12-lg { float: left; }

    /* use a different span for larger views */
    .span-12-lg { width: 100%; }
    .span-11-lg { width: 91.66666667%; }
    .span-10-lg { width: 83.33333333%; }
    .span-9-lg { width: 75%; }
    .span-8-lg { width: 66.66666667%; }
    .span-7-lg { width: 58.33333333%; }
    .span-6-lg { width: 50%; }
    .span-5-lg { width: 41.66666667%; }
    .span-4-lg { width: 33.33333333%; }
    .span-3-lg { width: 25%; }
    .span-2-lg { width: 16.66666667%; }
    .span-1-lg { width: 8.33333333%; }
}

/* equal-height will make all grid span's the same height */
/* for compatibility in IE9 and below, please instantiate equalHeight function in moveable-base.js */
.equal-height { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }    


/* To instantiate for IE9 and below, please see initVerticalAlign() plugin in moveable-base.js */
.vertical-align { align-items: center; justify-content: center; flex-direction: row; 
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6  */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;   
}

@media (min-width: 768px) {
    
    .equal-height-desktop { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

    .vertical-align-desktop { align-items: center; justify-content: center; flex-direction: row; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6  */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; }
}


/* --------------------------------------------------------------- */
/* Tables
/* --------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    
    /* Force table to not be like tables anymore */
	.grid-to-list table, 
	.grid-to-list thead, 
	.grid-to-list tbody, 
	.grid-to-list th, 
	.grid-to-list td, 
	.grid-to-list tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.grid-to-list thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.grid-to-list tr { border-bottom: 1px solid #ccc; padding-bottom: .5em;}
 
	.grid-to-list td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	.grid-to-list td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	.grid-to-list td:before { content: attr(data-title); }
}


/* --------------------------------------------------------------- */
/* - Common styles for responsive and layout
/* --------------------------------------------------------------- */

.desktop-only { display: none; }
.mobile-only { display:block; }

.expand { display: block !important; }
.collapse { display: none !important; }

.relative { position: relative; }

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

.no-border { border: none !important; }

.right { float: right; right:0; }
.bottom { position: absolute; bottom: .8em; }
.center-text { text-align: center; }

/* desktop styles */
@media (min-width: 768px) {
    .desktop-only { display: block; }
    .mobile-only { display:none; }

    .no-padding-desktop { padding: 0; }
    .no-margin-desktop { margin: 0; }
    
    .right-desktop { float: right; right: 0; }
}

.vertical-align-js { visibility: hidden; }