@import url("normalize7.css");
/* basic default settings -------------------------------------------------- */
html,
body { margin: 0; padding: 0; position: relative; font: 16px Arial; line-height: 1.5; }
/* BASE FONT SIZE: For this to work well, font-sizes, margins, padding, positioning, etc should be defined in 'em' wherever possible */
@media only screen and (max-width: 1300px) { body { font-size: 16px; } }
@media only screen and (max-width: 1150px) { body { font-size: 15px; } }
@media only screen and (max-width: 1024px) { body { font-size: 14px; } }
@media only screen and (max-width: 940px) { body { font-size: 13px; } }
@media only screen and (max-width: 850px) { body { font-size: 12px; } }
@media only screen and (max-width: 782px) { body { font-size: 16px; } } /* 782 based on WP mobile menu flip */
a { color: inherit; }
a img { border: none; /* force IE compliance */ }
img { max-width: 100%; height: auto; vertical-align: bottom; /* prevents space caused by the difference between the text baseline and text bottom */ }
/* fix for Chrome */
td > img { max-width: none; }
input[type="file"] { border: thin solid #abadb3; }
iframe { border: none; }
/* common utility classes -------------------------------------------------- */
/* The following rule prevents content wrapping under a floated element. A value for "overflow" other than "visible" creates a new block formatting context (see http://www.w3.org/TR/CSS2/visuren.html#block-formatting ); The display rules fix IE not working in some cases */
.vertical-clear { overflow: auto; display: inline-block; display: block; }
/* make bottom of element clear floated child elements */
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clear { clear: both; }
.float-right { float: right; z-index:1; }
.float-left { float: left; z-index:1; }
/* There isn't a direct way to gray scale in IE 10-11; see utility.js for work around */
.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ filter: grayscale(100%); filter: gray; /* IE6-9 */ }
/* the following vertical alignment styles depend on the height of the containing element */
.valign-middle { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.valign-bottom { position: relative; top: 100%; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
/* justifying last and/or only line */
.fulljustify { text-align: justify; margin-bottom: -1.25em; } /* pull following block up, overcoming the "ghost" space caused by the following rule */
.fulljustify:after { content: ""; display: inline-block; width: 100%; }
/* make a pseudo ordered list out of non-li elements */
.ordered-list-item { counter-increment: list-item-counter; }
.ordered-list-item:before { content: counter(list-item-counter, decimal); }
/* columns - to use, add column class and width class defined below */
.dhcolumn { float: left; box-sizing: border-box; margin: 0 0 1em 0; vertical-align: top; }
.dhcolumn + .dhcolumn { margin-left: 2.65%; }
/* remove outer margins from first and last inner elements */
.dhcolumn :first-child { margin-top: 0; }
.dhcolumn :last-child { margin-bottom: 0; }
/* can use a tag to separate column rows */
.dhcolumn + br { clear: left; }
/* default column style classes */
.width-100 { width: 100%; }
.width-90 { width: 89.735%;}
.width-80 { width: 79.47%; }
.width-75 { width: 74.35%; }
.width-70 { width: 69.205%;}
.width-67 { width: 65.8%; }
.width-60 { width: 58.94%; }
.width-50 { width: 48.65%; }
.width-40 { width: 38.41%; }
.width-33 { width: 31.55%; }
.width-30 { width: 28.145%;}
.width-25 { width: 23%; }
.width-20 { width: 17.88%; }
.width-10 { width: 7.615%; }
/* use additional class when it's useful to adjust at tablet sizes */
/* might need to adjust the media queries based on site design */
/* 782 based on WP mobile menu flip */
@media only screen and (max-width:782px) {
/* anything can be converted into a 100% column (the margin is removed) */
.tablet-100 { width: 100%; }
.dhcolumn.tablet-100 { margin-left: 0; }
/* corrects for new margins due to rows of 3, 4, or 5 becoming rows of 2 (note that will still cause a row break, so conversion may not be perfect) */
.tablet-50 { width: 48.65%; }
.dhcolumn.tablet-50:nth-of-type(2n + 1) { margin-left: 0; }
/* intended to convert 30/70, 25/75, 20/80, 10/90 columns to wider small column (existing row breaks still apply) */
.tablet-67 { width: 65.8%; }
.tablet-60 { width: 58.94%; }
.tablet-40 { width: 38.41%; }
.tablet-33 { width: 31.55%; }
/* hide item on tablet sizes */
.tablet-hide { display:none; }
/* purposely ignored as not useful */
.tablet-90 { }
.tablet-80 { }
.tablet-75 { }
.tablet-70 { }
.tablet-30 { }
.tablet-25 { }
.tablet-20 { }
.tablet-10 { }
}
/* use additional class when it's useful to adjust at phone sizes */
/* might need to adjust the media queries based on site design */
/* 568 based on iphone 5 landscape */
@media only screen and (max-width:568px) {
/* anything can be converted into a 100% column (the margin is removed) */
.phone-100 { width: 100%; }
.dhcolumn.phone-100 { margin-left: 0; }
/* corrects for new margins due to rows of 3, 4, or 5 becoming rows of 2 (note that will still cause a row break, so conversion may not be perfect) */
.phone-50 { width: 48.65%; }
.dhcolumn.phone-50:nth-of-type(2n + 0) { margin-left: 0; }
/* intended to convert 30/70, 25/75, 20/80, 10/90 columns to wider small column (existing row breaks still apply) */
.phone-67 { width: 65.8%; }
.phone-60 { width: 58.94%; }
.phone-40 { width: 38.41%; }
.phone-33 { width: 31.55%; }
/* hide item on phone sizes */
.phone-hide { display: none; }
/* purposely ignored as not useful */
.phone-90 { }
.phone-80 { }
.phone-75 { }
.phone-70 { }
.phone-30 { }
.phone-25 { }
.phone-20 { }
.phone-10 { }
}
.button { display: inline-block; padding: 0.5em 2em 0.7em; text-decoration:none; }
.button-small { padding:.2em 1em; font-size:.9em; }