/* Utility Classes
These classes can be assigned to markup or shortcodes that accept classes (such as MPD Columns).
They provide useful styles that you might want to use often
--------------------------------------------------------*/
.float-left {
	float: left;
}
.float-right {
	float: right;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: table;
}

.no-shadow { 		-webkit-box-shadow:  none !important;       box-shadow:  none !important;}
.no-border { border: none !important;}
.no-margin, .no-margins { margin: 0 !important; }
.no-side-margin, .no-side-margins { margin-left: 0 !important; margin-right: 0 !important; }
.no-left-margin {margin-left: 0 !important; }
.no-right-margin {margin-right: 0 !important; }
.no-top-margin { margin-top: 0 !important; }
.no-bottom-margin {margin-bottom: 0 !important; }

.font-size-minus-one { font-size: 0.9em;}
.font-size-minus-two {font-size: 0.8em;}
.font-size-minus-three {font-size: 0.7em;}
.font-size-minus-four {font-size: 0.5em;}
.font-size-minus-five {font-size: 0.3em;}

.font-size-plus-one { font-size: 1.25em;}
.font-size-plus-two {font-size: 1.5em;}
.font-size-plus-three {font-size: 2em;}
.font-size-plus-four {font-size: 3em;}
.font-size-plus-five {font-size: 4em;}

/* Keeping Meter & Rhythm:
 * On any element where you a want whole blank line below it with consistent baselines, the margin-bottom must match the line-height for the given element. */
.line-height-one, .lh-one { line-height: 1; margin-bottom: 1em; }
.line-height-two, .lh-two { line-height: 1.2; margin-bottom: 1.2em; }
.line-height-three, .lh-three { line-height: 1.35; margin-bottom: 1.35em; }
.line-height-four, .lh-four  {line-height: 1.5;  margin-bottom: 1.5em; }
.line-height-five, .lh-five {line-height: 1.75; margin-bottom: 1.75em; }
.line-height-six, .lh-six {line-height: 2; margin-bottom: 2em; }

.bigroundcorners {
	border-radius: 0.5em;
}

/* iPad width in Portraid mode reports as 768px;  We want to display regular desktop view for iPad, so make the max-width lower than 768 */

@media screen and (max-width: 800px) { 	.tau, .tau { display: none !important;} }
@media screen and (min-width: 800px) { 	.ph, .phone { display: none !important; }}

/* Use these classes to hide elements above or below a certain resolution */
/* Suggested use is to always use .hide-above or .hide-below classes unless you're trying to support IE 8.
 * For IE 8, the hide statements won't work properly because IE 8 doesn't recognize media queries.
 * Using show-below will cause the items to be hidden on IE 8 and only show up on other browsers when width is less than the given amount.
 * Why not just use show-below on everything?  Answer: Because for show-below to unhide things, it must set the display: property to something explicit.
 * We use display block because that's common for most elements.  However it will break non-block type elements.
 * show-below is absolutely fine to use everywhere as long as you're only using it on DIVs and other block-level elements. (images aren't block level)
 */
.show-below-900 { display: none !important; }
.show-below-800 { display: none !important; }
.show-below-700 { display: none !important; }
.show-below-600 { display: none !important; }
.show-below-500 { display: none !important; }
.show-below-400 { display: none !important; }
.show-below-300 { display: none !important; }

@media screen and  (min-width:900px) { .hide-above-900 { display: none !important; }}
@media screen and  (min-width:800px) { .hide-above-800 { display: none !important; }}
@media screen and  (min-width:700px) { .hide-above-700 { display: none !important; }}
@media screen and  (min-width:600px) { .hide-above-600 { display: none !important; }}
@media screen and  (min-width:500px) { .hide-above-500 { display: none !important; }}
@media screen and  (min-width:400px) { .hide-above-400 { display: none !important; }}
@media screen and  (min-width:300px) { .hide-above-300 { display: none !important; }}

@media screen and  (max-width:900px) { .hide-below-900 { display: none !important; } .show-below-900 { display: block !important;}}
@media screen and  (max-width:800px) { .hide-below-800 { display: none !important; } .show-below-800 { display: block !important;}}
@media screen and  (max-width:700px) { .hide-below-700 { display: none !important; } .show-below-700 { display: block !important;}}
@media screen and  (max-width:600px) { .hide-below-600 { display: none !important; } .show-below-600 { display: block !important;}}
@media screen and  (max-width:500px) { .hide-below-500 { display: none !important; } .show-below-500 { display: block !important;}}
@media screen and  (max-width:400px) { .hide-below-400 { display: none !important; } .show-below-400 { display: block !important;}}
@media screen and  (max-width:300px) { .hide-below-300 { display: none !important; } .show-below-300 { display: block !important;}}


/* Selfclearing Utility Classes 
--------------------------------------------------- */
/* Clearing floats for float containment*/
/* These are set as separate lines each with their own style intentionally */
/* Yes, it is super redundant here in the stylesheet, but it makes viewing properties in the Element Inspector (Chrome) and Firebug (FireFox) a whole lot cleaner
and easier. If they were all lumped together into one definition with commas separating the selectors, you would see a huge mess of selectors in the element inspector! */

.clear:after {	display: table; content: "";}
.selfclear:after {	display: table; content: "";}
.group:after {	display: table; content: "";}
.clearfix:after {	display: table; content: "";}
.format-status {	display: table; content: "";}
.entry-header:after {	display: table; content: "";}
.clear:before {	display: table; content: "";}
.selfclear:before {	display: table; content: "";}
.group:before {	display: table; content: "";}
.clearfix:before {	display: table; content: "";}
.clear:after {	display: table; content: "";}
.selfclear:after {	display: table; content: "";}
.group:after {	display: table; content: "";}
.clearfix:after {	display: table; content: "";}
.format-status {	display: table; content: "";}
.entry-header:before {	display: table; content: "";}
.format-status {	display: table; content: "";}
.entry-header:after {	display: table; content: "";}

/* Force element down below adjacent elements */
.clearline { clear: both; }


/* --------------------- */
/*     BUTTONS           */
/* --------------------- */

div.abutton {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   display: table;
}

a.abutton { 
   display: table;
   vertical-align: middle;
   text-align: center;
}