/**** COLORS ****/
/** FONT COLORS **
* -- primaries --
* gold = #FFC72C rgba(255,199,44,0.1) hsla(44,100,59,100)
* blue = #041E42 rgba(4,30,68,0.1)
* black = #000 rgba(0,0,0,0.1)
* white = #fff rgba(255,255,255,0.1)
*
* --accents--
* green = #6CC24A rgba(108,194,74,0.1)
* purple = #615E9B rgba(97,94,155,0.1)
* gray = #888B8D rgba(136,139,141,0.1)
* liteGreen = #D2D755 rgba(210,215,85,0.1)
* liteBlue = #41B6E6 rgba(65,182,230,0.1)
* red = #D14124 rgba(209,65,36,0.1)
* tan = #DFD1A7 rgba(223,209,167,0.1)
* offBlack = #101820 rgba(16,24,32,0.1)
*/
/** FLUID & RESPONSIVE TYPOGRAPHY & EM/REM UNITS
* TuT: https://css-tricks.com/snippets/css/fluid-typography/ */
html { font-size: 15px;line-height:1.5rem; }
@media screen and (max-width: 60em) {
html, body { font-size: calc(15px + 6 * ((100vw - 320px) / 680)); }
}
@media screen and (min-width: 60.1em) {
html, body { font-size: 1.05rem; }
}
/** FONTS **/
@font-face {
font-family: 'Norwester';
src: url('//www.etsu.edu/ehome/fonts/norwester/norwester.eot'); /* IE9 Compat Modes */
src: local('Norwester'),
local('Norwester-Regular'),
url('//www.etsu.edu/ehome/fonts/norwester/norwester.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//www.etsu.edu/ehome/fonts/norwester/norwester.woff2') format('woff2'), /* Super Modern Browsers */
url('//www.etsu.edu/ehome/fonts/norwester/norwester.woff') format('woff'), /* Pretty Modern Browsers */
/* url('//www.etsu.edu/ehome/fonts/norwester/norwester.ttf') format('truetype'), /* Safari, Android, iOS */
url('//www.etsu.eduehome/fonts/norwester/norwester.otf') format('truetype'), /* Safari, Android, iOS */
url('//www.etsu.eduehome/fonts/norwester/norwester.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/** font display types **/
.norwester, .display, .card, .text__norwester, .text__display {font-family:Norwester,Helvetica-Neue, 'Helvetica Neue',Helvetica,Arial,sans-serif;}
.sans, .sans-serif, .sansserif, .sanserif, html, body, .text__sans {font-family:Helvetica-Neue, 'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:normal;}
.serif, .text__serif {font-weight:normal;}
.code, .mono, .text__mono, #header #nav__secondary input[type="text"], #switch__int-ext [data-action="aria-switch"]:before {font-family:Menlo,Consolas,Monaco,'Courier New',monospace;}
.fontawesome, #hp-int__row3 ul li a:not( [href*='etsu.edu'] ):not( [href^='#'] ):not( [href^='/'] ):after, #header #nav__secondary li[role="alert"]:after, #header #nav__secondary li[role="alert"] .submenu .title:before, #hp-int__row1 #hp-int__events h2 > a:after {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
/** LINKS **
* cited below in common element colors */
a:link, a:active {text-decoration:underline;}
a:focus, a:hover, a:visited {text-decoration:none;}
a .fa {text-decoration:none;}
/** BACKGROUNDS **/
body {
background-color:#fff;
background:#fff url(//www.etsu.edu/_images/background_images/noise.png) repeat 0 0;
background: url(//www.etsu.edu/_images/background_images/noise.png) repeat 0 0, -webkit-linear-gradient(top, #FFF 62%,rgba(255,199,44,0.1) 138%) no-repeat fixed;
background: url(//www.etsu.edu/_images/background_images/noise.png) repeat 0 0, linear-gradient(to bottom, #FFF 62%,rgba(255,199,44,0.1) 138%) no-repeat fixed;
height: 100%;
}
/* Alt. Darker Background Noise *
body {background:#fff url(//www.etsu.edu/_images/background_images/noise_litegrey.png) repeat 0 0;} */
/** BUTTONS
* Overrides of picnic.css default colors **/
/** Default: ETSU Blue Button with Gold Text **/
.label, [data-tooltip]:after, button, .button, [type=submit], .dropimage,
#internal .label, #internal [data-tooltip]:after, #internal li:not(#switch__int-ext) button, #internal input[type=submit],
#internal .dropimage {background:#041E42;color:#FFC72C;}
/** Success: Green button with white text **/
.success.label, .success[data-tooltip]:after, button.success, .success.button,
.success[type=submit], .success.dropimage,
#internal .success.label, #internal .success[data-tooltip]:after, #internal button.success, #internal .success.button,
#internal .success[type=submit], #internal .success.dropimage {background:#6CC24A;color:#fff;}
/** Warning: Yellow/Orange button with white text **/
.warning.label, .warning[data-tooltip]:after, button.warning, .warning.button,
.warning[type=submit], .warning.dropimage,
#internal .warning.label, #internal .warning[data-tooltip]:after, #internal button.warning, #internal .warning.button,
#internal .warning[type=submit], #internal .warning.dropimage {background:#F5A623;}
/** Error: Red button with white text **/
.error.label, .error[data-tooltip]:after, button.error, .error.button,
.error[type=submit], .error.dropimage,
#internal .error.label, #internal .error[data-tooltip]:after, #internal button.error, #internal .error.button,
#internal .error[type=submit], #internal .error.dropimage {background:#D14124;}
/** Pseudo Button: ETSU light gray button with etsu black text **/
.pseudo.label, .pseudo[data-tooltip]:after, button.pseudo, .pseudo.button,
.pseudo[type=submit], .pseudo.dropimage {color: #101820}
/** Special Button: ETSU lite blue/turquoise button with ETSU primary blue text **/
#internal button.special {background:#41B6E6;color:#041E42;}
/** Abbreviations **/
abbr[title] {vertical-align: baseline;}
abbr[title].noUnderline {border-bottom:none;}
/** ***************************************** COMMON ELEMENTS ************************************ **/
.text__gold, #logo h5, .box__blue, #hp-int__row3 h3 a:link, #hp-int__row3 h3 a:visited, #hp-int__row3 h3 a:active, .card.card__gold > a, nav .burger:hover, nav .burger:focus {color:#FFC72C;}
.text__blue, .box__gold, a, a:link, a:visited, .card.card__gold > a, .card.card__blue:hover > a, .card.card__blue:focus > a, .cards > .card > a:hover > h3, .cards > .card > a:focus > h3 {color:#041E42;}
.text__black, a:hover, a:focus, a:active {color:#000;}
.text__white, #hp-int__row3 h3 a:focus, #hp-int__row3 h3 a:hover, #hp-int__row3 ul li a:focus, #hp-int__row3 ul li a:hover, #header #nav__secondary label.border__blue:hover, #header #nav__secondary label.border__blue:focus, .card.card__blue > a, #header #nav__secondary #etsusearch label.border__blue.text__center, .cards > .card > a > h3 {color:#FFF;}
/** accent colors **/
.text__green, .text__success {color:#6CC24A!important;}
.text__purple {color:#615E9B;}
.text__gray, #footer p {color:#888B8D;}
.text__liteGreen {color:#D2D755;}
.text__liteBlue, .text__info {color:#41B6E6;}
.text__red, .text__error {color:#D14124;}
.text__tan, .text__alert, #hp-int__row3 li a:link, #hp-int__row3 li a:visited, #hp-int__row3 li a:active {color:#DFD1A7;}
.text__offBlack, #footer p.footer_txt {color:#101820;}
/** BACKGROUND-COLORS */
.bkgd__gold, .box__gold, .card__gold, .card__blue:hover, .card__blue:focus, .cards > .card > a > h3:nth-child(even), .cards > .card > a:hover > h3, .cards > .card > a:focus > h3 {background-color:#FFC72C;}
.bkgd__blue, .box__blue, #header #nav__secondary label.border__blue:hover,#header #nav__secondary label.border__blue:focus, .card__blue, .card__gold:hover,.card__blue, .card__gold:focus, #header #nav__secondary #etsusearch label.border__blue.text__center, nav .burger:hover, nav .burger:focus, .cards > .card > a > h3 {background-color:#041E42;}
.bkgd__black {background-color:#000;}
.bkgd__white, nav .burger ~ .menu {background-color:#FFF;}
.bkgd__liteGray {background-color:#888B8D;}
.bkgd__darkGray {background-color:#101820;}
.bkgd__liteBlue {background-color:#41B6E6;}
.bkgd__tan {background-color:#DFD1A7;}
.bkgd__darkGreen {background-color:#6CC24A;}
.bkgd__liteGreen {background-color:#D2D755;}
/** BORDERS & Colors **/
.border__gold, #hp-int__row3, #header #nav__secondary label.border__blue:hover, .card__gold, .card__blue:hover {border:solid 1px #FFC72C;}
.border__blue, .button__blue, .button__gold:hover, .button__gold:focus, .card__blue, .card__gold:hover, .card__blue, .card__gold:focus {border:solid 1px #041E42;}
.border__black {border:solid 1px #000;}
.border__white {border:solid 1px #FFF;}
/** accent colors **/
.border__green{border:solid 1px #6CC24A;}
.border__purple {border:solid 1px #615E9B;}
.border__gray {border:solid 1px #888B8D;}
.border__liteGreen {border:solid 1px #D2D755;}
.border__liteBlue {border:solid 1px #41B6E6;}
.border__red {border:solid 1px #D14124;}
.border__tan,.box__gold {border:solid 1px #DFD1A7;}
.border__offBlack, .box__blue {border:solid 1px #101820;}
.border__none, abbr[title].border__none {border:none!important;}
.border__transparent, #internal nav .menu > li > a {border: solid 1px transparent;}
/** COMPLETE BOXES **
* Cited here, but pieced together by citing necessary styles with the above common individual styles
* for easier maintenance (I think) @KWC **/
.box__gold, .box__blue {box-sizing:border-box;padding:0.25rem 0.5rem;}
.box__gold {}
.box__gold.gradient-tb {background:#FFC72C;
background: linear-gradient(#FFF 0%, #FFC72C 100%);
background: -moz-linear-gradient(top, #FFF 0%, #FFC72C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#FFC72C));
background: -webkit-linear-gradient(top, #FFF 0%,#FFC72C 100%);
background: -o-linear-gradient(top, #FFF 0%,#FFC72C 100%);
background: -ms-linear-gradient(top, #FFF 0%,#FFC72C 100%);
background: linear-gradient(to bottom, #FFF 0%,#FFC72C 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#FFC72C',GradientType=0 );
}
.box__blue {}
.box__blue.gradient-tb {background:#041E42;
background: linear-gradient(#003876 0%, #041E42 60%);
background: -moz-linear-gradient(top, #003876 0%, #041E42 60%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003876), color-stop(60%,#041E42));
background: -webkit-linear-gradient(top, #003876 0%,#041E42 60%);
background: -o-linear-gradient(top, #003876 0%,#041E42 60%);
background: -ms-linear-gradient(top, #003876 0%,#041E42 60%);
background: linear-gradient(to bottom, #003876 0%,#041E42 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003876', endColorstr='#041E42',GradientType=0 );
}
.box__blue a:link, .box__blue a:visited, .box__blue a:active,
.box__blue__tb-gradient a:link, .box__blue__tb-gradient a:visited, .box__blue__tb-gradient a:active {color:#fff;text-decoration:underline;}
.box__blue a:hover, .box__blue a:focus,
.box__blue__tb-gradient a:hover, .box__blue__tb-gradient a:focus {color:#FFC72C;text-decoration:none;}
/** BUTTONS (custom, non-picnic.css outline versions). Cited here, but mostly built using the above styles. */
.button__blue {}
.button__gold {}
/** TEXT ALIGNMENTS **/
.text__center, .text__center .card {text-align:center;}
.text__left {text-align:left;}
.text__right {text-align:right;}
/** UPPER/LOWER Case Capitalization, Small Caps, etc. Variants **/
.text__uppercase {text-transform:uppercase;}
.text__lowercase {text-transform:lowercase;}
.text__capitalize {text-transform:capitalize;}
.text__smallcaps {font-variant:small-caps;}
.text__smaller {font-size:0.8em;}
.text__bigger {font-size:1.2em;}
.text__display {font-size:calc(0.5em + 2vmin);}
/** SHOW / HIDE: for showing or hiding items based on screensize
* NOTE: Cited here only, see cooresponding Media Query for styles **/
.hide__mobile {}/* max-width: 60em */
.hide__tablet {}/* min-width: 60.1em */
.hide__desktop {}/* min-width: 90.1em */
.hidden {height:0;visibility:hidden!important;width:0;}/* For things like Skip Nav that are for accessibility/screen readers only */
/** FLOATS **/
.float__left,.float__right {display:block;}
.float__left {float:left;margin-right:0.5rem}
.float__right {float:right;margin-left:0.5rem;}
.clearfix:before, .clearfix:after, .float__left:after, .float__right:after, nav:before, nav:after, nav .menu:before, nav .menu:after, #nav__primary:before, #nav__primary:after, #nav__secondary:before, #nav__secondary:after, #header #nav__secondary #etsusearch label[for="q"]:before, #header #nav__secondary #etsusearch label[for="q"]:after { content:'';display: table; }
.clearfix:after, .float__left:after, .float__right:after, nav:after, nav .menu:after, #nav__primary:after, #nav__secondary:after, #header #nav__secondary #etsusearch label[for="q"]:after { clear: both; }
/** IMAGES & VIDEOS RESPONSIVE SIZING **
* SRC: https://css-tricks.com/almanac/properties/o/object-fit/ **/
.object-fit__fill {-o-object-fit:fill;object-fit:fill;}
.object-fit__contain {-o-object-fit:contain;object-fit:contain;}
.object-fit__cover {-o-object-fit:cover;object-fit:cover;}
.object-fit__none {-o-object-fit:none;object-fit:none;}
.object-fit__scale-down {-o-object-fit:scale-down;object-fit:scale-down;}
/** LISTS **/
.list__none, .list__pretty, .list__inline, #nav__primary ul, #nav__secondary ul, .hp-int__tabs__linkLists ul, #hp-int__row3 h3 + ul {list-style:none outside;margin:0;padding:0;}
.list__none > li > ul, .list__pretty > li > ul, .list__inline > li > ul, #nav__primary > ul > li > ul, .hp-int__tabs__linkLists > ul > li > ul {list-style-type:square;padding-left:1.5rem;}
/* alternating row striping, aka prettylist */
.list__pretty li, .hp-int__tabs__linkLists li {border:solid 1px transparent;padding:0.15rem;}
.list__pretty li:nth-child(odd), .hp-int__tabs__linkLists li:nth-child(odd) {background-color:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.04);}
.list__pretty li > a + .fa {padding-left:0.5rem;}
ol { counter-reset: fancy-counter;list-style:none outside; }
ol > li { font: 300 1.1em/1.5 Norwester,sans-serif;position: relative;}
ol > li:before { content: counter(fancy-counter)')';counter-increment:fancy-counter;font: 400 1.25rem/1 Norwester,sans-serif;left:-2rem;position: absolute;top: 0;}
ol > li ol > li:before {content: counter(fancy-counter)'.';color:#4A4A4A;font-size:1.25rem;font-weight:200;left:-1.5rem;}
ol > li p {margin:0;padding: 0 2rem 1rem;}
ol > li > h4+p:first-letter {color:#000;float:left;font-size:5rem;line-height:1;margin:-.2em 0 -.1em -.2em;padding:0;}
/* inline list, crazy handy */
.list__inline {}
.list__inline > li, nav .menu > div > ul > li > ul > li, nav .menu > div > ul > li > ul > li > a {display:inline-block;}
/** indented lists */
.list__indent > li {list-style:none outside;padding-left:0.75rem!important;}
/** ICONS **/
a[target="_blank"]:after {font-family:FontAwesome;display:inline-block;opacity:0.38;padding:0 0.25rem;vertical-align:middle;}
/* external link **/a[target="_blank"]:after {content: '\f08e';}
/** CARDS
* See Media Queries for additional responsive card styles **/
.cards {}
.card {/** build into picnic.css */}
.card__blue, .card__gold {/** See box styles at top **/overflow: visible;}
.card.card__blue > a, .card.card__gold > a {text-decoration:none;}
.card.card__blue, .card.card__gold {line-height:1;padding-bottom: 1.25rem;}
.card.card__blue:after, .card.card__gold:after {content:'';}
.card.card__blue img, .card.card__gold img {padding-bottom:1.25rem;}
.cards > .card {background-size:cover;background-repeat:no-repeat;background-position:center;min-height:16rem;overflow:visible;}
.cards > .card a {display:block;height:100%;position:relative;width:100%;}
.cards > .card > a > h3 {background-color:rgba(4,30,68,0.62);bottom:0;font-weight:normal;min-height:3.5rem;position:absolute;width:100%;}
.cards > .card > a:link > h3, .cards > .card > a:visited > h3, .cards > .card > a:active > h3 {text-shadow: 1px 1px 0 #101820;}
.cards > .card > a:hover > h3, .cards > .card > a:focus > h3{padding-bottom:2rem;text-decoration:underline;text-shadow:none;}
.cards > .card > a:hover:after, .cards > .card > a:focus:after {content:'';background-image:url('data:image/svg+xml;utf8,');background-position: bottom center;background-repeat:no-repeat;background-size:contain;bottom:-2px;left:15%;height:1.5rem;max-height:38%;position:absolute;width:70%;}
/** MARGINS */
.centered {margin-right:auto;margin-left:auto;}
/** PADDING */
.pad__em__1 {padding:1em}/** Inherits the containing block's font size. Therefore, wackiness may ensue **/
.pad__rem__5 {padding:5rem}/** rem is BEST: Adheres to the body font size **/
.pad__rem__4 {padding:4rem}
.pad__rem__3 {padding:3rem}
.pad__rem__2 {padding:2rem}
.pad__rem__1 {padding:1rem}
.pad__rem__half {padding: 0.5rem;}
.pad__rem__quarter {padding: 0.25rem;}
.pad__rem__eighth {padding: 0.125rem;}
.pad__rem__3lr {padding-right:3rem;padding-left:3rem}/* Padding on Left & Right (lr) Only */
.pad__rem__2lr {padding-right:2rem;padding-left:2rem}
.pad__rem__1lr {padding-right:1rem;padding-left:1rem}
.pad__rem__3tb {padding-top:3rem;padding-bottom:3rem}/* Padding on Top & Bottom (tb) Only */
.pad__rem__2tb {padding-top:2rem;padding-bottom:2rem}
.pad__rem__1tb {padding-top:1rem;padding-bottom:1rem}
/** Switches */
/** --------------------------------------------------------------------
ARIA Switch Button
The ARIA switch button is styled via the [data-action="aria-switch"]
attribute. This attribute is used instead of the [role="switch"]
attribute so styles may be used even when no JavaScript is available.
GIT: https://github.com/scottaohara/aria-switch-button
PEN: https://codepen.io/BowingRice/pen/wXJPVZ
--------------------------------------------------------------------- */
[data-action="aria-switch"] {background:transparent;border:1px solid transparent;border-radius: 1rem;display: inline-block;font-size: 0.7rem;padding:0;position: relative;transition: background .1s ease-in-out;white-space: normal;}
[data-action="aria-switch"]:after {/* border-radius: 1rem;border: 1px solid transparent;bottom: 0px;content: "";left: 0px;pointer-events: none;position: absolute;right: 0px;top: 0px;transition: all .2s ease-in-out;*/}
[data-action="aria-switch"]:not([disabled]):hover,
[data-action="aria-switch"]:not([disabled]):focus {background-color:transparent;border:solid 1px #FFF;box-shadow:inset 0 0 0.5rem rgba(136,139,141,0.38);opacity:1;}
[data-action="aria-switch"]:not([disabled]):active {color: #fff;}
[data-action="aria-switch"]:not([disabled]):hover:after,
[data-action="aria-switch"]:not([disabled]):focus:after {/* border: 1px solid #FFC72C;bottom: -4px;left: -4px;right: -4px;top: -4px; */}
[data-action="aria-switch"] span {border-radius: 0.9rem;display: inline-block;margin: 0 0.1rem;padding: 0.1rem;pointer-events: none;text-transform: uppercase;}
[data-action="aria-switch"][aria-checked="true"] span:first-child {background:#6CC24A;margin: 0;color: #000;}
[data-action="aria-switch"][aria-checked="false"] span:first-child, [data-action="aria-switch"][aria-checked="true"] > span:last-child {color:#101820;}
.no-js [data-action="aria-switch"]:not([aria-checked]) span:last-child,
[data-action="aria-switch"][aria-checked="false"] span:last-child {background: #9B9B9B;margin: 0;}
[data-action="aria-switch"]:not([aria-checked]), [data-action="aria-switch"][aria-checked="false"]{border:solid 1px transparent;opacity:0.62}
/** TABLES **/
th {background-color:#041E42;color:#FFC72C;letter-spacing:1px;text-transform:capitalize;}
tbody tr > td:nth-child(even) {background-color:rgba(136,139,141,0.1);}
/** TRIANGLES / ARROWS **
* NOTE:
* .arrow is created using css borders, which works great unless the container box is multi-line
* But use .triangle for multi-line objects (text falls to a second line, etc)
* It uses an SVG (vector) triangle instead that can flex in size and be responsive to multi-line items
* allowing it to grow if needed
*/
/* for single line items */
.arrow__top__white, .arrow__right__white, .arrow__bottom__white, .arrow__left__white {position:relative;}
.arrow__top__white:after, .arrow__right__white:after, .arrow__bottom__white:after, .arrow__left__white:after, .card.card__blue:after, .card.card__gold:after {border:solid 1rem transparent;content:'';height: 0;pointer-events: none;position: absolute;width: 0;z-index: 6;}
.arrow__top__white:after {border-top-color:#fff;top:-1px;left:45%;left:calc(50% - 1rem);}
.arrow__right__white:after {border-right-color: #fff;right:-1px;top:0;}
.arrow__bottom__white:after, .card.card__blue:after, .card.card__gold:after {border-bottom-color:#fff;bottom:-1px;left:45%;left:calc(50% - 1rem);}
.arrow__left__white:after {border-left-color: #fff;left:-1px;top:0;}
/* for multi-line items (eg. a headline adjust from 1 line to 2 lines on smaller screens) */
.triangle__right__white {padding-right:0.75em;position:relative;}
.triangle__right__white:after {content:'';background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:center;background-size:contain;height:100%;min-height:1em;max-height:100%;position:absolute;right:-0.2em;top:0;width:1em;}
.arrow__bottom__white {}
.triangle__bottom__white:after {bottom:0;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:center;background-size:contain;content:'';height:100%;min-height:1em;max-height:100%;position:absolute;width:1em;}
/** HORIZONTAL RULES (fancy ones, going from thin to thick to thin, chiaroscuro if you will) */
hr, .hr,
.hr__left2right,
#hp-int__row2 #hp-int__announcements h4:after {
content: "";height: 1px;
width: 100%;display: block;margin:0.5rem;padding: 0;border-width: 0;color: #888B8D;
}
hr, .hr {
background-color:#888B8D;
background: -webkit-linear-gradient(to right, #FFFFFF 0%, #EEEEEE 15%, #888B8D 50%, #EEEEEE 85%, #FFFFFF 100%);
background: -moz-linear-gradient(to right, #FFFFFF 0%, #EEEEEE 15%, #888B8D 50%, #EEEEEE 85%, #FFFFFF 100%);
background: -o-gradient(to right, #FFFFFF 0%, #EEEEEE 15%, #888B8D 50%, #EEEEEE 85%, #FFFFFF 100%);
background: -ms-linear-gradient(to right, #FFFFFF 0%, #EEEEEE 15%, #888B8D 50%, #EEEEEE 85%, #FFFFFF 100%);
background: linear-gradient(to right, #FFFFFF 0%, #EEEEEE 15%, #888B8D 50%, #EEEEEE 85%, #FFFFFF 100%);
}
.hr__left2right {
background-color:transparent;
background: -webkit-linear-gradient(to right, #000 0%,#101820 32%, #888B8D 62%,transparent 100%);
background: -moz-linear-gradient(to right, #000 0%,#101820 32%, #888B8D 62%,transparent 100%);
background: -o-gradient(to right, #000 0%,#101820 32%, #888B8D 62%,transparent 100%);
background: -ms-linear-gradient(to right, #000 0%,#101820 32%, #888B8D 62%,transparent 100%);
background: linear-gradient(to right, #000 0%,#101820 32%, #888B8D 62%,transparent 100%);
}
.hr__centered,
#hp-int__row2 #hp-int__announcements h4:after {
background-color:transparent;
background: -webkit-linear-gradient(to right, transparent 0%, #888B8D 32%, #101820 50%, #888B8D 62%, transparent 100%);
background: -moz-linear-gradient(to right, transparent 0%, #888B8D 32%, #101820 50%, #888B8D 62%, transparent 100%);
background: -o-gradient(to right, transparent 0%, #888B8D 32%, #101820 50%, #888B8D 62%, transparent 100%);
background: -ms-linear-gradient(to right, transparent 0%, #888B8D 32%, #101820 50%, #888B8D 62%, transparent 100%);
background: linear-gradient(to right, transparent 0%, #888B8D 32%, #101820 50%, #888B8D 62%, transparent 100%);
height:1px;margin:0;padding:0;
}
hr.vertical {width:1px;min-height:5em;height:100%;
background-color:#888B8D;
background: -webkit-linear-gradient(to top, #FFFFFF 0%, #DDDDDD 15%, #888B8D 50%, #DDDDDD 85%, #FFFFFF 100%);
background: -moz-linear-gradient(to top, #FFFFFF 0%, #DDDDDD 15%, #888B8D 50%, #DDDDDD 85%, #FFFFFF 100%);
background: -o-gradient(to top, #FFFFFF 0%, #DDDDDD 15%, #888B8D 50%, #DDDDDD 85%, #FFFFFF 100%);
background: -ms-linear-gradient(to top, #FFFFFF 0%, #DDDDDD 15%, #888B8D 50%, #DDDDDD 85%, #FFFFFF 100%);
background: linear-gradient(to top, #FFFFFF 0%, #DDDDDD 15%, #888B8D 50%, #DDDDDD 85%, #FFFFFF 100%);
}
/** RIBBONS **/
.ribbon {background: #041E42;color: #fff;
font-size: 1.75rem!important;/* If you want to use a different font size you may have to play with the position of the ribbon elements */
margin: 2em auto 3em;padding: 1em 2em;position: relative;text-align: center;width: 50%;}
.ribbon:before, .ribbon:after {border: 1rem solid rgba(4,30,68,0.62);bottom: -0.5rem;content: "";display: block;position: absolute;z-index: -2;}
.ribbon:before {border-left-color: transparent;border-right-width: 1rem;left: -1rem;}
.ribbon:after {border-left-width: 1rem;border-right-color: transparent;right: -1rem;}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {border-color: #000 transparent transparent transparent;border-style: solid;bottom: -0.5rem;content: "";display: block;position: absolute;z-index:-1;}
.ribbon .ribbon-content:before {border-width: 0.5rem 0 0 1rem;left: 0;}
.ribbon .ribbon-content:after {border-width: 0.5rem 1rem 0 0;right: 0;}
/** ***************************************** HOMEPAGE ************************************ **/
/** HOMEPAGE Custom Styles **/
#content {margin: 1rem auto 0;max-width: 80%;overflow:visible;}
/** NAVIGATION:
* See Media Queries for the majority of Navigation Styles. MOBILE is default */
#header nav#intNavElement {background: transparent url(//www.etsu.edu/_images/logos/etsu-logo_inline2_0padding.svg) no-repeat 0.5rem 0.5rem;background-size:25%;}
#header #nav__primary .brand #header__logo {display:none;}
nav .menu > div > ul > li > a {text-transform:capitalize;}
nav .menu > div > ul > li > a:link {text-decoration:none;}
nav .menu > div > ul > li > a:hover, nav .menu > div > ul > li > a:focus {text-decoration:underline;}
#header #nav__secondary li[role="alert"] span#adviscount {background-color:#D14124;border-radius:1rem;color:#FFF;display:inline-block;font-size:0.7rem;padding:0 0.1rem 0.1rem;position:absolute;text-align:center;}
#header #nav__secondary #switch__int-ext {animation:fadein__faded 0.25s ease-out;padding-right:1.5rem;}
#header #nav__secondary li[role="alert"] .submenu .title {border-bottom: solid 1px #9B9B9B;color:#D14124;padding:0.75rem 0 0.5rem;text-align:center;text-transform:uppercase;}
#header #nav__secondary li[role="alert"] .submenu .title:before {content:'\f071\00a0';}
/** homepage row #1, student feature **/
#hp-int__row1 {}
#hp-int__row1 #hp-int__video {position:relative;}
/* v0: Glow effect on hover:
#hp-int__row1 #hp-int__video #hp-int__video__bkgd:hover, #hp-int__row1 #hp-int__video #hp-int__video__bkgd:focus {animation: glow__pulse 2.5s infinite alternate;}*/
#hp-int__row1 #hp-int__video #hp-int__video__bkgd:before {background-color: #FFC72C;border: solid 1px #DFD1A7;border-bottom: none;color: #041E42;content:'\00a0#ETSUfootprints\00a0';display: block;font: normal 1.5em/1.25 Norwester,Arial,sans-serif;left: -44%;position:absolute;text-align:center;text-shadow: -1px 1px 0 #FFE94E;top:40%;transform:rotateZ(-90deg);width: 100%;z-index:5;}
#hp-int__row1 #hp-int__video__bkgd {background-repeat:no-repeat;background-position:center;background-size:cover;height:100%;}
#hp-int__row1 a:hover #hp-int__video__bkgd, #hp-int__row1 a:focus #hp-int__video__bkgd {border: solid 1px #FFC72C;box-shadow: 0 0 10rem #FFC72C;}
#hp-int__row1 a:hover #hp-int__video__bkgd:before, #hp-int__row1 a:focus #hp-int__video__bkgd:before {box-shadow: 0 0rem 3rem #041E42, inset 0 -0.5rem 1rem #F5A623;}
#hp-int__row1 #hp-int__video > a {cursor:pointer;display:block;height:100%;position:relative;width:100%;}
#hp-int__row1 #hp-int__video > a:link,#hp-int__row1 #hp-int__video > a:visited,#hp-int__row1 #hp-int__video > a:hover,#hp-int__row1 #hp-int__video > a:active {text-decoration:none;}
#hp-int__row1 #vidtop-content {}
#hp-int__row1 a:hover #vidtop-content {border-color:#000;}
#hp-int__row1 #vidtop-content h2 {background-color: #041E42;background-color:rgba(4,30,68,0.8);border: solid 1px transparent;border-top:none;bottom:0;color:#fff;font-size:1em;line-height:1;margin:0 auto;min-width:100%;padding:1rem 0.5rem;position:absolute;text-align:left;text-shadow:0 0 0.5rem #000;text-transform: capitalize;z-index:4;}
#hp-int__row1 a:hover #vidtop-content h2 {border-color:#FFC72C;box-shadow: inset 0rem 2rem 7rem -3rem #000;text-decoration:underline;}
/** homepage row #1, events (3UP) **/
#hp-int__row1 #hp-int__events {overflow: visible;}
#hp-int__row1 #hp-int__events > .border__gray {border-radius: 0 0 0 1rem;}
#hp-int__row1 #hp-int__events h2 {margin-bottom:-0.1rem}
/* v0: Arrows standardized under general *
#hp-int__row1 #hp-int__events h2 a:after {border-style: solid;border-width:1em;border-color: transparent #fff transparent transparent;height: 0;margin-left: -5px;pointer-events: none;position: absolute;right:0;top:0;width: 0;z-index: 6;}*/
#hp-int__row1 #hp-int__events h2 > a {font-size:0.75rem;margin:0.7rem 0.25rem 0 0;}
#hp-int__row1 #hp-int__events h2 > a:after {content:'\00a0\f073';}
#hp-int__row1 #hp-int__events ul {list-style:none;margin:0;max-width: 100%;padding:0;}
#hp-int__row1 #hp-int__events ul > li {min-height:23rem;padding-bottom:0;padding-left:0;overflow:hidden;}
/** v1: Works good, smooth, but has issues citing background size at responsive sizes */
#hp-int__row1 #hp-int__events ul > li a {display:block;/* v1: background-repeat:no-repeat;background-position:center;background-size:140%;*/height:100%;overflow:hidden;position:relative;width:100%;/* v1:transition:background 0.3s ease-out;*/}
#hp-int__row1 #hp-int__events ul > li .event__image {display:block;background-repeat:no-repeat;background-position:center;background-size:cover;height:100%;position:absolute;width:100%;transform:scale3d(1,1,1);
/* v1:
-webkit-transition:scale3d 0.3s ease-out, filter 0.3s ease-out;-moz-transition:scale3d 0.3s ease-out, -moz-filter 0.3s ease-out;-moz-transition:scale3d 0.3s ease-out, filter 0.3s ease-out;-ms-transition:scale3d 0.3s ease-out, -ms-filter 0.3s ease-out;transition:scale3d 0.3s ease-out, -o-filter 0.3s ease-out;transition:scale3d 0.3s ease-out, filter 0.3s ease-out, -webkit-filter 0.3s ease-out; */
transition:all 0.4s ease-in;}
/* v1:
#hp-int__row1 #hp-int__events ul > li:focus a, #hp-int__row1 #hp-int__events ul > li:hover a {background-size:200%;} */
#hp-int__row1 #hp-int__events ul > li:focus .event__image, #hp-int__row1 #hp-int__events ul > li:hover .event__image {-webkit-filter: contrast(2);-moz-filter: contrast(2);-ms-filter: contrast(2);-o-filter: contrast(2);filter: contrast(2);transform:scale3d(1.5,1.5,1.5);}
#hp-int__row1 #hp-int__events ul > li a > .event__info {background-color:rgba(4,30,68,0.6);color:#fff;text-shadow: 1px 1px 0 #101820;}
#hp-int__row1 #hp-int__events ul > li:focus a > .event__info, #hp-int__row1 #hp-int__events ul > li:hover a > .event__info {background-color:rgba(4,30,68,0.9);padding-bottom:1rem;}
#hp-int__row1 #hp-int__events ul > li:nth-child(even) a .event__info {background-color:rgba(255,199,44,0.8);}
#hp-int__row1 #hp-int__events ul > li:focus:nth-child(even) a .event__info, #hp-int__row1 #hp-int__events ul > li:hover:nth-child(even) a .event__info {background-color:rgba(255,199,44,0.9);}
#hp-int__row1 #hp-int__events ul > li:nth-child(even) a h3, #hp-int__row1 #hp-int__events ul > li:nth-child(even) a p {color:#041E42;text-shadow:1px 1px 0 #FFC72C;}
#hp-int__row1 #hp-int__events ul > li a > .event__info {bottom:0;display:block;max-height:0;min-height:3.5rem;padding: 0.25rem 0.5rem 0;overflow:hidden;position: absolute;width: 100%;}
#hp-int__row1 #hp-int__events ul li h3, #hp-int__row1 #hp-int__events ul li p {margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;}
#hp-int__row1 #hp-int__events ul > li:focus h3, #hp-int__row1 #hp-int__events ul > li:focus p, #hp-int__row1 #hp-int__events ul > li:hover h3, #hp-int__row1 #hp-int__events ul > li:hover p {overflow:visible;white-space:normal;}
#hp-int__row1 #hp-int__events ul > li a:focus h3, #hp-int__row1 #hp-int__events ul > li a:hover h3 {text-decoration:underline;}
#hp-int__row1 #hp-int__events ul > li p {font-size:0.9rem;}
#hp-int__row1 #hp-int__events ul > li:focus a .event__info, #hp-int__row1 #hp-int__events ul > li:hover a .event__info {max-height:100%;}
/** homepage row #2, sidebar/academic calendar/notifications **/
#hp-int__row2 {}
#hp-int__row2 #hp-int__calendar {}
#hp-int__row2 #hp-int__calendar > .border__gray {border-radius: 0 1rem 0 0;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed {}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul {}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li {font-weight:normal;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;margin:0;min-height:4rem;padding:0.5rem;word-wrap: break-word;overflow-wrap: break-word;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal {font-size:0.8rem;line-height:1;margin-left:-0.5rem;min-width:3rem;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal span {color:#4A4A4A;display:block;font-weight:bold;margin:0 auto;text-align:center;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal .month {margin-bottom:0.25rem;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal .calendar-text { margin-top: .3em; }
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li a {cursor:pointer;display:block;height:100%;min-height:3rem;position:relative;width:100%;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li:hover {border-color:#FFC72C;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li:hover span {color:#101820;}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal .month {}
#hp-int__row2 #hp-int__calendar #hp-acad-calfeed ul li .miniCal .date {}
#hp-int__row2 #calendar__extra__links {margin:1rem 0;justify-content:space-between;max-width:100%;padding:0;}
#hp-int__row2 #calendar__extra__links li {background-color:rgba(4,30,68,0.62);border:solid 1px #41B6E6;border-radius:0.25rem;color:#fff;font-size:0.8rem;max-width:30%;padding:1.5%;}
#hp-int__row2 #calendar__extra__links li:hover {background-color:rgba(4,30,68,1);}
#hp-int__row2 #calendar__extra__links li a {color:#fff;display:block;height:100%;position:relative;text-decoration:none;width:100%;}
#hp-int__row2 #calendar__extra__links li a:hover {color:#FFC72C;text-decoration:underline;}
#hp-int__row2 #calendar__extra__links li a .fa {line-height:1.2;}
#hp-int__row2 #hp-int__announcements {}
#hp-int__row2 #hp-int__announcements h4 {background-position:8% 35%;background-repeat:no-repeat;background-size:25%;font-size:1.2rem;line-height:1.2;padding:1rem 0 0;}
#hp-int__row2 #hp-int__announcements h4 a {display:block;height:100%;min-height:5rem;padding-left:38%;position:relative;width:100%;}
#hp-int__row2 #hp-int__announcements h4 a:link, #hp-int__row2 #hp-int__announcements h4 a:visited {text-decoration:none;}
#hp-int__row2 #hp-int__announcements h4 a:hover {color:#101820;text-decoration:underline;}
/** homepage row #2, TABS: Student / Graduate / Faculty & Staff / Medicine & Pharmacy **/
#hp-int__tabs {}
#internal #hp-int__tabs .tabs label.pseudo.button.toggle {background-color:#041E42;border:solid 1px transparent;border-bottom:none;border-radius: 0.2em 0.2em 0 0;box-shadow:0 0 1rem #fff;color:#FFC72C;font-size:1rem;opacity:0.38;padding:0.3rem 0.1rem;position:relative;text-transform:lowercase;white-space:pre-line;vertical-align:text-bottom;}
#internal #hp-int__tabs .tabs input[type=radio]:checked + label.pseudo.button.toggle {background-color:#FFF;border:solid 1px #FFC72C;border-bottom:none;color:#000;font-size:1.25rem;font-weight:bold;letter-spacing:0;line-height:1;margin-bottom:7px;opacity:1;padding:1.5rem 0.3rem;text-decoration:underline;text-transform:uppercase;z-index:5;}
#internal #hp-int__tabs .tabs:hover label.pseudo.button.toggle {opacity:0.62}
#internal #hp-int__tabs .tabs:hover label.pseudo.button.toggle:hover {opacity:1;}
#hp-int__tabs .row {top:-12px;z-index:1;}
#hp-int__tabs .row > article {background-color:#fff;border: solid 1px #FFC72C;padding:2rem 1rem;}
#hp-int__tabs .row > article > ul {justify-content:space-around/* IE11 */;justify-content:space-evenly/* everything else */;max-width:100%;max-width:calc(100% + 0.6em);}
#hp-int__tabs .row > article > ul:first-child {margin-left: -0.6em;}
#hp-int__tabs .tabs .flex h3 + ul {margin-top:0.5rem;}
#hp-int__tabs .tabs .flex h3 + ul li {padding-left:1rem;}
/** Faculty/Staff News in Faculty/Staff Tab **/
#internal #homepagenews {}
#internal #homepagenews #hpnewsList {/** Copy of PicNic.css .flex class */
display: -ms-flexbox;display: flex;margin-left: -0.6em;width: calc(100% + .6em);flex-wrap: wrap;transition: all .3s ease;}
#internal #homepagenews #hpnewsList > p {text-align:center;}
#internal #homepagenews #hpnewsList > p a {display:block;font-weight:bold;}
#internal #homepagenews #hpnewsList > p > .rss_imgspan {display:block;max-height:9rem;overflow:hidden;padding:0.25rem;}
#internal #homepagenews #hpnewsList > p > .rss_imgspan > img {margin-top:-1rem;}
/** See additional styles in Desktop Media Queries. */
/** homepage row #3, SITE LINKS **/
#hp-int__row3 {border-left:none;border-right:none;box-shadow:inset 0 0 1rem #101820;max-width:100%;padding:1% 5%;}
#hp-int__row3 h3 {}
#hp-int__row3 h3 a {}
#hp-int__row3 h3 + ul {font-size:0.8rem;}
#hp-int__row3 h3 + ul li {}
#hp-int__row3 h3 + ul li a {}
#hp-int__row3 ul li a:link, #hp-int__row3 ul li a:visited, #hp-int__row3 ul li a:active {text-decoration:none;}
#hp-int__row3 ul li a:focus, #hp-int__row3 ul li a:hover {text-decoration:underline;}
#hp-int__row3 ul li a:not( [href*='etsu.edu'] ):not( [href^='#'] ):not( [href^='/'] ):after {content:'\00a0\f14c';opacity:0.38;}
/** FOOTER **/
#footer {padding:1rem 2rem 5rem;}
#footer p {font-size:0.8rem;}
#footer p.footer_txt {font-size:1.1rem;}
/** *************************** ANIMATIONS ******************************** **/
/** fade-in effect */
/* invisible to visible */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* faded to full opacity */
@-webkit-keyframes fadein__faded { from { opacity: 0.62; } to { opacity: 1; } }
@keyframes fadein__faded { from { opacity: 0.62; } to { opacity: 1; } }
/* Gentle Fade In */
@-webkit-keyframes gentleLoad {0% {opacity:0;} 100% {opacity:1;}}
@keyframes gentleLoad {0% {opacity:0;} 100% {opacity:1;}}
/* Gentle Fade Out */
@-webkit-keyframes gentleFade {0% {opacity:1;} 100% {opacity:0;}}
@keyframes gentleFade {0% {opacity:1;} 100% {opacity:0;}}
/** enlarge background-image effect */
@-webkit-keyframes enlargeBackground { from { background-size: 170%; } to { background-size: 200%; } }
@keyframes enlargeBackground { from { background-size: 170%; } to { background-size: 200%; } }
/** Alt Enlarge */
.enlarge, .enlarge3D, .enlarge__noShadow, .enlarge3D__noShadow { transition: all .2s ease-in-out; }
.enlarge:hover, .enlarge:focus,
.enlarge__noShadow:hover, .enlarge__noShadow:focus { transform: scale(1.1);z-index:6; }
/** ENLARGE via 3D Transforms: Best if works b/c it uses the GPU for smooth 60fps animations, no CPU */
.enlarge3D:hover, .enlarge3D:focus,
.enlarge3D__noShadow:hover, .enlarge3D__noShadow:focus {-moz-transform:scale3d(1.05,1.05,1);-webkit-transform: scale3d(1.05,1.05,1);-o-transform: scale3d(1.05,1.05,1);-ms-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);z-index:6;}
.enlarge:hover, .enlarge:focus,
.enlarge3D:hover, .enlarge3D:focus {}
/** SMOOTH HEIGHT INCREASE **/
.animate__height,
#hp-int__row1 #hp-int__events ul > li a > .event__info,
#internal #homepagenews #hpnewsList > p > .rss_titlespan a {-webkit-transition: max-height 0.3s ease-out;-moz-transition: max-height 0.3s ease-out;-o-transition: max-height 0.3s ease-out;-ms-transition: max-height 0.3s ease-out;transition: max-height 0.3s ease-out;}
.animate_height:hover, .animate_height:focus,
#hp-int__events ul > li:hover a .event__info, #hp-int__events ul > li:focus a .event__info,
#internal #homepagenews #hpnewsList > p:hover > .rss_titlespan a, #internal #homepagenews #hpnewsList > p:focus > .rss_titlespan a { -webkit-transition: max-height 0.3s ease-in;-moz-transition: max-height 0.3s ease-in;-o-transition: max-height 0.3s ease-in;-ms-transition: max-height 0.3s ease-in;transition: max-height 0.3s ease-in; }
/** ALT: Smooth Padding Bottom Increase */
.animate__padding-bottom, li.card a h3 {-webkit-transition: padding-bottom 0.1s ease-out;-moz-transition: padding-bottom 0.1s ease-out;-o-transition: padding-bottom 0.1s ease-out;-ms-transition: padding-bottom 0.1s ease-out;transition: padding-bottom 0.1s ease-out;}
.animate__padding-bottom:hover, li.card a:hover h3 {-webkit-transition: padding-bottom 0.1s ease-in;-moz-transition: padding-bottom 0.1s ease-in;-o-transition: padding-bottom 0.1s ease-in;-ms-transition: padding-bottom 0.1s ease-in;transition: padding-bottom 0.1s ease-in;}
/** GLOW, Pulsing */
@keyframes glow__pulse {
from { box-shadow: 0 0 10rem 0rem #fff;}
to { box-shadow: 0 0 20rem 20rem #fff; }
}
/** ROTATION **/
.rotate__90CW {-webkit-transform:rotate3d(0,0,0,90deg);transform:rotate3d(0,0,0,90deg);}
@keyframes spin {
from { -webkit-transform: rotateZ(0deg);transform: rotateZ(0deg); }
to { -webkit-transform: rotateZ(360deg);transform: rotateZ(360deg); /* boooo opera */-o-transition: rotate(3600deg); /* works */ }
}
/** TRANSITIONS **/
/* all
* NOTE: using all puts alot of strain on the CPU and causes frequent repaints
* Use with caution and performance in mind
* Try to use more specific targeted setting instead
* Bonus points for using 3D transitions hack, which throws the job to the GPU at 60fps */
.transition__250ms {transition: all .25s;}
.transition__500ms {transition: all .5s;}
.transition__750ms {transition: all .75s;}
.transition__1s {transition: all 1s;}
/* scaleZ */
.transition__scaleZ__250ms {transition: scaleZ .25s;}
.transition__scaleZ__500ms {transition: scaleZ .5s;}
.transition__scaleZ__750ms {transition: scaleZ .75s;}
.transition__scaleZ__1s {transition: scaleZ 1s;}
/** *************************** MEDIA QUERIES ******************************** **/
/** *** Mobile & smaller tablets *** **/
@media only all and (max-width: 60em) {
.hide__mobile {display:none;height:0;visibility:hidden;width:0;}
#header {}
#header nav#intNavElement {background-color:#fff;}
nav .show ~ .menu {width:89%}
nav .burger ~ .menu > * {margin:0;padding:0;}
nav .menu {float:none;top:0;-webkit-transform:none;transform:none;}
nav label.burger {bottom: -1000em;cursor: pointer;display: inline-block;margin: 0;}
nav .menu > div form, nav .menu > div ul, nav .menu > div > ul > li, nav .menu > div h1 {display:block}
#nav__primary ul, #nav__secondary ul, .hp-int__tabs__linkLists ul, #hp-int__row3 h3 + ul {width:100%;}
nav #nav__primary > ul.menu li a, nav #nav__secondary > ul.menu {padding-left:1rem;}
nav #nav__secondary .menu > li > a {font-weight:bold;text-transform:uppercase;}
nav .menu > div > ul > li > ul {list-style-type:square;padding-left:1rem;}
nav .menu > div > ul > li > ul > li {display:inline-block;font-size:0.8rem;line-height:1.5;}
nav .menu > div > ul > li > a {display:block;height:100%;position:relative;width:100%;}
#header #nav__secondary {padding-bottom:0.5rem;}
#header #nav__secondary #etsusearch {display:block;margin:0.25rem auto 0.5rem;position:relative;width:100%;z-index:12;}
#header #nav__secondary #etsusearch input#q {max-width:90%;}
#header #nav__secondary #etsusearch label[for="q"], #header #nav__secondary #etsusearch input#q, #header #nav__secondary #etsusearch label.border__blue.text__center {display:block;margin:0 auto 0.25rem;}
#header #nav__secondary #etsusearch label.border__blue.text__center {color:#fff;border-radius:0.25rem;max-width:62%;}
#header #nav__secondary #etsusearch label.border__blue.text__center:hover {color:#FFC72C;}
#header #nav__secondary li[role="alert"] #alertLink {display:inline;}
#header #nav__secondary li[role="alert"] span#adviscount {right:1rem;}
#header #nav__secondary li[role="alert"] .fa, #header #nav__secondary li[role="alert"] .submenu {display:none;}
#header #nav__secondary li[role="alert"]:after {content:'\00a0\f14c';opacity:0.38;}
#nav__secondary > ul > li > ul {padding-left:1rem;}
#nav__secondary > ul > li > ul > li {padding-right:1rem;}
#nav__secondary > li > a {font-weight:bold;}
#header #nav__secondary #switch__int-ext {}
#header #nav__secondary #switch__int-ext button {display:block;margin:1rem auto 0;}
#header #nav__secondary #switch__int-ext:before {border-bottom: 1px solid #4A4A4A;margin-bottom: 0.25rem;}
[data-action="aria-switch"] > span > .fa.fa-university:after, [data-action="aria-switch"] > span > .fa.fa-globe:after {font-size:0.6rem;}
[data-action="aria-switch"] > span > .fa.fa-university:after {content:'\00a0On-Campus\00a0';display:inline;}
[data-action="aria-switch"] > span > .fa.fa-globe:after {content:'\00a0Off-Campus\00a0';display:inline;}
#switch__int-ext [data-action="aria-switch"][aria-checked="true"]:before, #switch__int-ext [data-action="aria-switch"][aria-checked="false"]:before {color:#4A4A4A;content:'\00a0Viewing Options\00a0\25bc'!important;display:block;}
#header #nav__primary {background-color:#041E42;padding-top:1rem;}
#header #nav__primary:after {background-color:#041E42;height:100vh;left:0;margin:0;padding:0;position:absolute;width:113%;}
/* v1: works so-so
#header #nav__primary .brand .logo {animation:gentleLoad 0.75s ease-out;height:2rem;left:-12.5rem;left:-42vmin;position:absolute;top:-27.5rem;top:-91vmin;} */
#header #nav__primary .brand #header__logo{}
#header #nav__primary > ul li a {letter-spacing:1px;}
#header #nav__primary > ul li a:link,#header #nav__primary > ul li a:visited, #header #nav__primary > ul li a:active {color:#fff;}
#header #nav__primary > ul li a:hover,#header #nav__primary > ul li a:focus {color:#FFC72C;}
/* v1: Nav was revised and these are needed again
#header #nav__primary > ul li:nth-child(1),#header #nav__primary > ul li:nth-child(2),#header #nav__primary > ul li:nth-child(3),#header #nav__primary > ul li:nth-child(5) {display:none;height:0;width:0;visibility:hidden;} */
#content {margin-top:6rem;}
#hp-int__row1 #hp-int__video {display:block;width:100%;}
#hp-int__row1 #hp-int__video:before {left:-20%;top:30%;width:50%;}
#hp-int__video #hp-int__video__bkgd {min-height:23rem;}
.cards > .card {width:100%;}
.cards > .card > a:hover > h3:after, .cards > .card > a:focus > h3:after {bottom:-62%;left:35%;height:100%;position:absolute;width:30%;}
/** Faculty Staff Tab: News */
#internal #homepagenews #hpnewsList > p {width: 50%;}
}
/** *** TABLET *** **/
@media only all and (min-width: 60.1em) {
.hide__tablet {display:none;height:0;visibility:hidden;width:0;}
/** LISTS **/
.list__inline > li {white-space:pre-line;}
.list__none, .list__pretty, .list__inline, #nav__primary ul, #nav__secondary ul, .hp-int__tabs__linkLists ul, #hp-int__row3 h3 + ul {list-style:none outside;margin:0;padding:0;}
/** NAV **/
#header nav#intNavElement {background: none;box-shadow: 0 0 1rem rgba(4,30,68,0.38);}
nav label.burger {display: none}/** Hide the Hamburger */
/** homepage row #0, header & primary naviagations **/
#header {margin:0 0 3rem;}
#header nav form[action="/search"] {max-width:33%;max-width:32vw;position:relative;white-space:nowrap;}
#header #nav__primary {-webkit-backface-visibility: hidden;background:transparent;height:5.5rem;margin-top:0;position:relative;}
#header #nav__primary.scrolled {-webkit-backface-visibility: hidden;border-bottom: 1px solid #fff;border-bottom-color:rgba(255,255,255,0.9);height:2.5rem;font-size:0.8rem;position:fixed;text-shadow:1px 1px 0 #fff;top:0;width:100%;}
#header #nav__primary.scrolled:hover {background-color:#fff;box-shadow: -1rem 2rem 62vh 100vh rgba(255,255,255,0.8),0 0 62vh 62vh rgba(255,255,255,0.5);height:3rem;padding-top:0.25rem;}
#header #nav__primary.scrolled, #header #nav__primary.scrolled > * {transition:none;}
#header #nav__primary {transition:height 0.3s ease-in, box-shadow 0.3s ease-in;-webkit-backface-visibility: hidden;}
#header #nav__primary > * {transition:font-size 0.3s ease-in;-webkit-backface-visibility: hidden;}
#header #nav__primary.scrolled {transition:height 0.3s ease-out, box-shadow 0.3s ease-out;-webkit-backface-visibility: hidden;}
#header #nav__primary.scrolled > * {transition:font-size 0.25s ease-out;-webkit-backface-visibility: hidden;}
#header #nav__primary.scrolled:after { background:inherit;bottom:0;box-shadow: inset 0 0 0 5rem rgba(255,255,255,0.8);content:'';filter: blur(0.25rem);height:120%;left:-10%;overflow:hidden;position:absolute;right:0;top:-16%;width:120%;z-index:-1; }
#header ul > li > ul {text-shadow:none;}
#header #nav__primary h1 {filter: drop-shadow(-1px 1px 0 #fff);}
#header #nav__primary .brand {clear:both;height:5.5vw;max-height:5rem;max-width:39%;max-width:39vmin;z-index:6;}
#header #nav__primary.scrolled .brand {max-height:100%;max-width:30%;max-width:30vmin;}
#header #nav__primary .brand a {display:block;height:100%;position:relative;width:100%;}
/* v2:
#header #nav__primary .brand .logo {animation:gentleLoad 0.75s ease-out;transition:height 0.25s ease-out;-webkit-backface-visibility: hidden;width:100%;}
#header #nav__primary.scrolled .brand .logo {height:2.25rem;margin-top:0;transition:height 0.1s ease-out;-webkit-backface-visibility: hidden;vertical-align: text-top;}
#header #nav__primary.scrolled:hover .brand .logo {height:2.75rem;transition:height 0.1s ease-out;-webkit-backface-visibility: hidden;}
#header #nav__primary .brand .logo #fallback__logo {background:transparent url(//www.etsu.edu/ehome/images/logo.png) no-repeat center;background-size:100%;min-height:2rem;min-width:10rem;}
*/
#header #nav__primary > .menu > li, #header #nav__primary > .menu > li > a, #header #nav__primary > .menu > li > a:after,#header #nav__primary.scrolled > .menu > li {font-size:1rem;letter-spacing:0;padding:0 0.25rem;}
#header #nav__primary .brand #header__logo{animation:gentleLoad 0.75s ease-out; background: transparent url(//www.etsu.edu/_images/logos/etsu-logo_inline2_0padding.svg) no-repeat left center;background-size: contain;color:transparent;display:block;/*transition:height 0.25s ease-out;-webkit-backface-visibility: hidden;*/width:100%;}
#header #nav__primary .brand #header__logo strong, #header #nav__primary.scrolled .brand #header__logo strong {color:transparent;visibility:hidden;}
#header #nav__primary > .menu {padding-top:1rem;}
#header #nav__primary.scrolled > .menu {padding-top:0.25rem;}
#header #nav__primary.scrolled:hover > .menu {line-height:3;padding-top:0;transition:line-height 0.1s ease-out;-webkit-backface-visibility: hidden;}
/*#header #nav__primary > .menu > li {font-size:1.5rem;letter-spacing:1px;padding:0 1rem;}*/
#header #nav__primary.scrolled > .menu > li {font-size:1rem;letter-spacing:0;padding:0.5rem 0.25rem 0;}
#header #nav__primary > .menu > li:after {content:'/';display:inline;font-size:inherit;position:relative;vertical-align:baseline;}
#header #nav__primary > .menu > li:last-child:after{content:'';display:none;visibility:hidden;}
/** BOTH Primary and Secondary Nav's **/
nav .menu {}
nav .menu li {line-height:1.25;margin:0;position:relative;white-space:nowrap;vertical-align:baseline;}
nav .menu:hover > li, nav .menu:focus > li {opacity:0.62;}
nav .menu > li:hover, nav .menu > li:focus {opacity:1;}
nav .menu > li > a {display:inline-block;font-weight:normal;height:100%;padding:0.5rem;position:relative;width:100%;z-index:6;}
nav .menu > li:hover > a {background-color:#fff;box-shadow:0 0 5rem rgba(4,30,68,0.1);}
nav .menu > li .submenu {animation: fadein 0.25s ease-out;background-color:#fff;box-shadow:0 0 5rem rgba(4,30,68,0.8);display:none;font-size:0.9rem;min-width:10rem;opacity:0;position:absolute;right:0;transition: all 0.5s ease;visibility:hidden;}
nav .menu li .submenu > li {display:block;margin:0;padding:0;}
nav .menu li .submenu > li > a {display:block;height:100%;padding:0.5rem;position:relative;width:100%;}
nav .menu li .submenu li:hover {cursor:pointer;}
nav .menu li a:focus + .submenu, nav .menu li .submenu li:focus-within {cursor:pointer;}
nav .menu li .submenu li:focus-within a {outline:none;}
nav .menu li:hover > ul, nav .menu li ul:hover, nav .menu li ul:focus {display:block;opacity:1;visibility:visible;}
nav .menu li:focus-within > ul {display:block;opacity:1;visibility:visible;}
nav .menu li .submenu > li:hover a:hover, nav .menu li .submenu > li a:focus {background-color:#041E42;color:#FFC72C;}
nav .menu li .submenu > li:hover a, nav .menu li .submenu > li:focus a {color:#FFC72C;display:block;height:100%;position:relative;width:100%;}
nav .menu li .submenu > li a:hover, nav .menu li .submenu > li a:focus {text-decoration:underline;}
nav .menu li .submenu > li a:link, nav .menu li .submenu > li a:visited, nav .menu li .submenu > li a:active {text-decoration:none!important;}
nav .menu li .submenu > li:hover a[target="_blank"]:after {animation:fadein__faded 0.25s forwards;}
/**
* (UN)hover intent
* makes dropdowns more forgiving
* TUT: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/
* http://www.positioniseverything.net/css-dropdowns-red.html
*/
nav .submenu:before{content:'';height:110%;left:-5%;position:absolute;top:-3%;text-align:left;min-width: 12rem;width:110%;
/* TEST IT: border: 1px solid red;background: red;*/
}
#header > nav > .menu {margin-right:-0.6em;margin-left:-0.6em}
#header > nav {height:auto;position:relative;}
#header > nav > .menu {float:none;}
#header #nav__primary.scrolled > .menu {margin-top: 0;}
#header #nav__primary > .menu, #header #nav__secondary > .menu, #header > nav > .menu, #nav__primary > .brand {top:0;-webkit-transform:none;transform:none;}
#header #nav__secondary {box-shadow: 0 -0.5rem 2rem rgba(4,30,68,0.15);height:2.5rem;margin:0;position:relative;z-index:7;}
#header #nav__secondary #etsusearch {}
#header #nav__secondary #etsusearch label {display:inline;}
#header #nav__secondary #etsusearch label[for="q"] {transition:width 0.25s ease-out;}
#header #nav__secondary #etsusearch label[for="q"]:hover,#header #nav__secondary #etsusearch label[for="q"]:focus, #header #nav__secondary #etsusearch label[for="q"]:active {width:28rem;z-index:9;}
#header #nav__secondary #etsusearch input#q:focus {box-shadow: inset 0 0 0.75rem rgba(65,182,230,0.5),0 0 38vw 38vw #FFC72C, 0 0 100vw 100vw #041E42;font-size:1.5rem;height:3rem;}
#header #nav__secondary #etsusearch input#q:focus + label.border__blue.text__center {height:3rem;}
#header #nav__secondary #etsusearch input#q:focus:before {content:'';width:43rem;}
#header #nav__secondary #etsusearch label[for="q"]:after {content:'';float:left;height:1rem;width:28.5rem;}
#header #nav__secondary input[type="text"] {height:1.75rem;max-width:24vw;}
#header #nav__secondary #etsusearch label.border__blue.text__center {padding:0.1rem 0;vertical-align:middle;white-space:nowrap;}
#header #nav__secondary label .fa {vertical-align:text-top;}
#header #nav__secondary label.border__blue:hover {}
#header #nav__secondary span#adviscount {left:-0.5rem;top:0.25rem;z-index:11;}
#header #nav__secondary .burger {margin-left:3rem;padding:0 0.5rem;}
#header #nav__secondary #switch__int-ext button:hover:before, #header #nav__secondary #switch__int-ext button:focus:before {color:#101820;}
#header #nav__secondary #switch__int-ext button {display:block;margin:0 auto;}
[data-action="aria-switch"] > span {color:#9B9B9B;letter-spacing:-0.4rem;}
[data-action="aria-switch"] > span > .fa {color:#000;letter-spacing:0;text-indent:5px;}
#switch__int-ext [data-action="aria-switch"][aria-checked="true"]:before, #switch__int-ext [data-action="aria-switch"][aria-checked="false"]:before {color:#4A4A4A;content:'';display:block;font-size:0.7rem;left:-1rem;line-height:1.2;overflow:visible;position:absolute;text-align:center;text-transform:uppercase;top:-1rem;width:100%;white-space:nowrap;}
#switch__int-ext [data-action="aria-switch"][aria-checked="true"]:before {color:#32631D;content:'On-Campus\00a0';}
#switch__int-ext [data-action="aria-switch"][aria-checked="false"]:before {content:'Off-Campus';}
#header #nav__secondary > .menu.list__inline > li:nth-child(-n+2) {margin:0 1rem;top:-0.3rem}/* Targets First 2 */
/**
* HAMBURGER MENU OPTIONS, low carb and what not.
#header #nav__secondary .burger:after {content:'MENU';display:block;font-size:0.5rem;} *
#header #nav__secondary .burger:before {content:'\2261';display:block;font-size:0.5rem;}/** HTML Special Character for Hamburger: ≡
**/
#hp-int__video, #hp-int__events {min-height:27rem;}
#hp-int__row1 #hp-int__video #hp-int__video__bkgd:before {left: -50%;top:40%;}
#hp-int__row1 #hp-int__video__bkgd {border-radius: 0 0 1rem 0;}
#hp-int__row1 #vidtop-content h2 {border-radius:0 0 1rem 0;font-size:2.25vmin;padding:1.5rem 0 1.5rem 1rem;}
#hp-int__row1 #hp-int__events h2 > a {font-size:1rem;margin: 0.4rem 1rem 0 0;}
#internal #hp-int__tabs .tabs label.pseudo.button.toggle {letter-spacing:0;padding:0.3rem;text-transform:capitalize;}
#internal #hp-int__tabs .tabs input[type=radio]:checked + label.pseudo.button.toggle {padding:1rem 0.5rem;}
/** Faculty Staff Tab: News */
#internal #homepagenews #hpnewsList > p {width: 33.3%;}
}
/** DESKTOP **/
@media only all and (min-width: 90.1em) {
.hide__desktop {display:none;height:0;visibility:hidden;width:0;}
#header #nav__secondary span#adviscount {max-width:1.25rem;left:-0.75rem;top:0.25rem;}
#header #nav__secondary #switch__int-ext:before, nav .menu > div > ul > li > a {text-transform:uppercase;}
[data-action="aria-switch"] > span {color:#000!important;letter-spacing:0px;}
[data-action="aria-switch"] > span > .fa.fa-university:after {content:'\00a0On-Campus\00a0';display:inline;}
[data-action="aria-switch"] > span > .fa.fa-globe:after {content:'\00a0Off-Campus\00a0';display:inline;}
#switch__int-ext [data-action="aria-switch"][aria-checked="true"]:before, #switch__int-ext [data-action="aria-switch"][aria-checked="false"]:before {color:#4A4A4A;content:'Viewing Options'!important;left:0;letter-spacing:2px;}
#header #nav__primary > .menu > li, #header #nav__primary > .menu > li > a, #header #nav__primary > .menu > li > a:after,#header #nav__primary.scrolled > .menu > li {font-size:1.1rem;letter-spacing:1px;padding:0 0.5rem;}
#header #nav__primary > .menu > li {font-size:1.5rem;letter-spacing:1px;padding:0 1rem;}
#header #nav__primary > .menu > li:first-child {padding-left:0;}
#header #nav__primary > .menu > li:last-child {padding-right:0;}
#internal #hp-int__tabs .tabs label.pseudo.button.toggle {margin-left:0.5rem;margin-right:0.5rem;}
#internal #hp-int__tabs .tabs label.pseudo.button.toggle:nth-of-type(1) {margin-left:1rem;}
#internal #hp-int__tabs .tabs input[type=radio]:checked + label.pseudo.button.toggle {font-size:2rem;letter-spacing:1px;margin-left:1rem;padding-left:1rem;padding-right:1rem;}
#hp-int__tabs .row > article {border-radius: 1rem;}
#internal #hp-int__tabs .tabs label.pseudo.button.toggle {white-space:normal;}
/**
* RAYS on Hover for Footprint Feature
#hp-int__video:after {display:none;height:150%;position: absolute;left:-20%;top: -15%;width:150%;z-index:-1;}
#hp-int__video:hover:after {animation: spin 4000ms infinite linear;background: url(//www.etsu.edu/_images/background_images/rays.svg) 0 0 no-repeat;
content:'';display:block;
/* microsoft ie * /
animation-name: spin;
animation-duration: 40000ms; /* 40 seconds * /
animation-iteration-count: infinite;
animation-timing-function: linear;}
*/
/** Faculty/Staff News in Faculty/Staff Tab **/
#internal #homepagenews #hpnewsList > p {/** Copy of PicNic.css .four-1200 class for desktop (1200px+) */
margin-bottom:4rem;position:relative;width: 25%;
}
#internal #homepagenews #hpnewsList:hover > p {opacity:0.62;}
#internal #homepagenews #hpnewsList:hover > p:hover{opacity:1;}
#internal #homepagenews #hpnewsList > p > .rss_imgspan {max-height:10rem;}
#internal #homepagenews #hpnewsList > p > .rss_titlespan {padding:0.25rem;}
#internal #homepagenews #hpnewsList > p > .rss_titlespan > a.rss_hyperlink {color:#101820;max-width:100%;padding:0.25rem;position:absolute;text-decoration:none;}
#internal #homepagenews #hpnewsList p .newstagline {color:#4A4A4A;font-size:0.9rem;}
#internal #homepagenews #hpnewsList p .newstagline a.rss_readmore {color:#041E42;font-size:1.1rem;}
#internal #homepagenews #hpnewsList p a.rss_readmore:link, #internal #homepagenews #hpnewsList p a.rss_readmore:visited, #internal #homepagenews #hpnewsList p a.rss_readmore:active {text-decoration:none;}
#internal #homepagenews #hpnewsList p:hover a.rss_readmore, #internal #homepagenews #hpnewsList p:focus a.rss_readmore {color:#101820;text-decoration:underline;}
/* Animation on Hover */
#internal #homepagenews #hpnewsList > p > .rss_titlespan a.rss_hyperlink {max-height:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#internal #homepagenews #hpnewsList > p:hover > .rss_titlespan a.rss_hyperlink {background-color:rgba(255,255,255,0.8);bottom:3rem;max-height:8rem;overflow:hidden;padding-bottom:3rem;text-shadow:0 1px #fff;text-overflow:ellipsis;white-space:normal}
#internal #homepagenews #hpnewsList > p .newstagline {display:block;max-height:1.5rem;visibility:hidden;}
#internal #homepagenews #hpnewsList > p:hover .newstagline {max-height:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;visibility:visible;}
#internal #homepagenews #hpnewsList > p .newstagline a.rss_readmore {bottom:0;max-height:1.5rem;position:absolute;width:100%;visibility:visible;}
}
/** BIG DESKTOP **/
@media only all and (min-width: 110.1em) {
#header #nav__primary > .menu > li, #header #nav__primary > .menu > li > a, #header #nav__primary > .menu > li > a:after,#header #nav__primary.scrolled > .menu > li {font-size:1.75rem;}
}
/** *************************** IE 10 & 11 HACKS *************************** **/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}