/* START OU CAMPUS, v.10 Styles ----------------------------------------------------------------------*/
/*
Implementation Skeleton v3 - 12/6/18
Add styles to overwrite customer CSS, USE WITH CAUTION.
*/

ol.flex-control-nav.flex-control-paging > li:before {
    content: initial !important;
    counter-increment: initial !important;
    margin-left: initial !important;
    position: initial !important;
}

/*
 * OU SPECIFIC STYLES FOR EDITING
 * @callkw
*/


/**** ETSU COLORS (for easy reference) ****
 * -- primaries --
 * gold =    #FFC72C    rgba(255,199,44,0.1)    hsla(44,100%,59%,1)
 * blue =    #041E42    rgba(4,30,66,0.1)       hsla(215,89%,14%,1)
 * black =   #000       rgba(0,0,0,0.1)         hsla(0,0%,0%,1)
 * white =   #fff       rgba(255,255,255,0.1)   hsla(0,0%,100%,1)
 *
 * --accents: complimentary--
 *   liteBlue =    #5E8AB4       rgba(94,138,180,0.1)       hsla(209,36%,54%,1)
 *   liteGold =    #F8E08E       rgba(248,224,142,0.1)      hsla(46,88%,76%,1)
 *   liteGreen =   #789D4A       rgba(120,157,74,0.1)       hsla(87,36%,45%,1)
 *   liteTan =     #C6AA76       rgba(198,170,118,0.1)      hsla(39,41%,62%,1)
 *
 * --accents: bold--
 *   darkBlue =    #005EB8       rgba(0,94,184,0.1)         hsla(209,100%,36%,1)
 *   darkRed =     #A6192E       rgba(166,25,48,0.1)        hsla(351,74%,37%,1)
 *   darkGreen =   #046A38       rgba(4,106,56,0.1)         hsla(151,93%,22%,1)
 *   darkTan =     #653024       rgba(101,48,36,0.1)        hsla(11,47%,27%,1)
 *
 * --neutral: gray--
 *   darkGray =    #707372      rgba(112,115,114,0.1)    hsla(160,1%,45%,1)
 *   gray =        #9EA2A2      rgba(158,162,162,0.1)    hsla(180,2%,63%,1)
 *   liteGray =    #C7C9C7      rgba(199,201,199,0.1)    hsla(120,2%,78%,1)
 *
 * --neutral: brown--
 *   darkBrown =   #776E64      rgba(119,110,100,0.1)    hsla(39,9%,43%,1)
 *   brown =       #B7A99A      rgba(183,169,154,0.1)    hsla(31,17%,66%,1)
 *   liteBrown =   #D7D2CB      rgba(215,210,203,0.1)    hsla(35,13%,82%,1)
 */


/* CSS GRIDS in EDIT MODE */

/* -- Edit Panel & Mode -- */
.content-grid > main > ouc:div,
    .content-grid > main > [button-class],
    button[class*="ou-click-tip-modal-open"] ~ #content > .content-grid > main > * { grid-column: 2 / 12; }


/*************** Required for wysiwyg **************
 * These styles are necessary alternates for OU wysiwyg Style Drop-Down to work with them.
 * EG: 
 *    list--striped should technically be applied to a <ul> or <ol> tag
 *    however, using the OU Campus wysiwyg's "Styles" drop-down to apply this style
 *    instead applies it to each <li> tag,
 *    and there's no way to make it apply to a parent like <ul> or <ol>
 *    so instead, we write some styles to cater specifically to how the wysiwyg behaves.
 * @callkw
 */
    [label="maincontent"]  > h1, 
    [label="maincontent"] > h2, 
    [label="maincontent"] > h3, 
    [label="maincontent"] > h4, 
    [label="maincontent"] > h5, 
    [label="maincontent"] > h6,
    [class*="ou-"] > h1,
    [class*="ou-"] > h2,
    [class*="ou-"] > h3,
    [class*="ou-"] > h4,
    [class*="ou-"] > h5,
    [class*="ou-"] > h6 
    { 
        color: #041E42;
        margin-bottom: 1.5rem;
    }

.ou-btn,
    a[data-region-style='button'].ou-btn,
    a[data-region-style='button'].ou-btn.oucEditButton
	/* ,#content > article.content-grid > main > [label="maincontent"] > a */
    {  
		border-radius: 1rem!important;
		display: block!important;
		font-size: 1.2rem!important;
		font-weight: bold!important;
		letter-spacing: 2px;
		line-height: 1.5rem!important;
        margin: 1.5rem auto!important; 
        min-height: 1.5rem!important; 
		text-shadow: -1px -1px 1px hsla(120, 34%, 38%, 1) !important;
        z-index: 1000008!important; 
    }
	/* OU Edit Button */
	#content > .content-grid > main > [button-class="oucEditButton"][label="maincontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="maincontent"],
	#content > .content-grid > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="lowercontent"] { border-radius: 1.5rem!important; box-shadow: 0 0 1rem 1rem #FFF!important; font: normal 400 1.5rem/1.5rem "Courier New", Courier, monospace!important; margin-bottom: 1.5rem!important;width:100%!important;}

	/* Extra "Edit" content in :after element */
	#content > .content-grid > main > [button-class="oucEditButton"][label="maincontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="maincontent"] > .ou-icon-pencil:after,
	#content > .content-grid > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="lowercontent"] > .ou-icon-pencil:after
	{ content: 'EDIT:'; display: inline-block; font:normal bold 1em/1 'Courier New', Courier, monospace; line-height: 1; vertical-align: text-top; }

	/* Hover & Focus states */
		#content > .content-grid > main > [button-class="oucEditButton"][label="maincontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="maincontent"]:hover,
			#content > .content-grid > main > [button-class="oucEditButton"][label="maincontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="maincontent"]:focus,
			#content > .content-grid > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="lowercontent"]:hover,
			#content > .content-grid > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > [data-button-class="oucEditButton"][data-region-style="button"][data-label="lowercontent"]:focus { box-shadow: 0 0 3rem 3rem #FFF!important; }

/* Pad list bullets/numbers or they'll overflow the iframe in edit mode and be hidden. Not useful for the editor. */
.ou-justedit-active li { margin-left: 1.5rem; }

/** HERO AREA 
 * Display a grayed out placeholder for the Hero when in Edit Mode preview panel
 * Also see: /_resources14/19t_ou/editor/19tmaincontent.css
 * which repeats this to show also when user is actually editing the content
 */
 .ou-click-tip-modal-open ~ #content:before 
 {
    align-items: center;
	background-color: hsla(120,2%,78%,1); /* ETSU Lite Gray */
	border: dashed 0.375rem hsla(180,2%,63%,0.8);/* ETSU Gray */
	color: hsla(160,1%,45%,0.8);/* ETSU Dark Gray */
	content: 'Hero Area Disabled in Edit Mode';
	display: flex;
	font-family: "Courier New", Courier, monospace;
	font-size: 1.5rem;
	height: 18rem;
	justify-content: center;
	margin-bottom: 6rem;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 0 hsla(160,1%,90%,0.8);/* ETSU Dark Gray + 45% Lightness (L in HSLA) */
	width: 100%;
	z-index: 2;
 }
.ou-click-tip-modal-open ~ #content .hero,
.ou-click-tip-modal-open ~ #content .hero:before {display:none!important;}

/* xsl table transforms */
.ou-justedit-region table  { table-layout: fixed; /* helps prevent jittery, slow editing on key entry */ }
.ou-justedit-region table [data-snippet*="grid_"] { position: relative; }
.ou-justedit-region table [data-snippet*="grid_"]:before 
{
	color: #046A38;
	display:block;
	position: absolute;
	text-align: center;
	top: -1.5rem;
}
.ou-justedit-region table [data-snippet="grid_oneCol-snippet"]:before { content: 'Fill in your 1-Column Grid Below'; } 
.ou-justedit-region table [data-snippet="grid_twoCol-snippet"]:before { content: 'Fill in your 2-Column Grid Below'; }  
.ou-justedit-region table [data-snippet="grid_threeCol-snippet"]:before { content: 'Fill in your 3-Column Grid Below'; } 
.ou-justedit-region table [data-snippet="grid_fourCol-snippet"]:before { content: 'Fill in your 4-Column Grid Below'; } 
.ou-justedit-region table [data-snippet="grid_fiveCol-snippet"]:before { content: 'Fill in your 5-Column Grid Below'; } 
.ou-justedit-region table [data-snippet="grid_sixCol-snippet"]:before { content: 'Fill in your 6-Column Grid Below'; }       
  
/* Font Sizes: For OU Editor Only, to show correctly */
@media only screen and (min-width: 768px) {
    #content .content-grid main [label="maincontent"] > h1 { font-size: calc(3 * 1rem)  }
	#content .content-grid main [label="maincontent"] > h2 { font-size: calc(2.25 * 1rem) }
	#content .content-grid main [label="maincontent"] > h3 { font-size: calc(1.5 * 1rem) }
	#content .content-grid main [label="maincontent"] > h4 { font-size: calc(1.3 * 1rem) } 
	#content .content-grid main [label="maincontent"] > h5 { font-size: calc(1.15 * 1rem) }
	#content .content-grid main [label="maincontent"] > h6 { font-size: calc(1 * 1rem) } 
                        
    #content .content-grid main [label="maincontent"] > h1, 
		#content .content-grid main [label="maincontent"] > h2, 
		#content .content-grid main [label="maincontent"] > h3, 
		#content .content-grid main [label="maincontent"] > h4 { line-height: 3rem; }
    #content .content-grid main [label="maincontent"] > h5, 
		#content .content-grid main [label="maincontent"] > h6 { line-height: 1.5rem; }
}

/* BREAKOUTS, full-width areas to bust out of the narrow iframe container and go edge to edge IN EDIT PANEL & MODE ONLY */
/* v1: Old way, using breakout css hack *
.ou-click-tip-modal-open + #content > main .ou-justedit-region.mce-edit-focus,
.bottomRow .ou-justedit-region.mce-edit-focus,
[button-class="oucEditButton"] .breakout,
.ou-justedit-region .breakout,
.ou-click-tip-modal-open + #content > main, 
.ou-justedit-region.mce-edit-focus .breakout
.bottomRow .ou-justedit-region.mce-edit-focus .breakout { left: 50%; margin-left: -50vw; margin-right: 50%; min-width: 100vw; padding-left: 12rem; padding-right: 12rem; right: -50vw; }
*/
/* v0: causes floats not to work right in Edit Panel main area
.content-grid > main > [button-class="oucEditButton"][label="maincontent"],*/
.content-grid.sidebar--L > .bottomRow > [button-class="oucEditButton"][label="lowercontent"]
{
	display: -ms-grid;
	display: grid;
	grid-auto-rows: minmax(-webkit-min-content, auto);
	grid-auto-rows: minmax(min-content, auto);
	-ms-grid-columns: (minmax(0, 1fr))[12];
	grid-template-columns: repeat(12, minmax(0, 1fr));
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	grid-column: 1 / 13;
	grid-column-gap: inherit;
}

/* v0: causes floats not to work in Edit Panel for main area
.content-grid.sidebar--L > main > [button-class="oucEditButton"][label="maincontent"] > * {
	-ms-grid-column: 1;
        -ms-grid-column-span: 12;
        grid-column:1 / 13;
}
*/
.content-grid.[class*="sidebar--"] > main > [button-class="oucEditButton"][label="maincontent"] { display: block }

.content-grid > main > [button-class="oucEditButton"][label="maincontent"] > *,
.content-grid.sidebar--L > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > * {
        -ms-grid-column: 3;
        -ms-grid-column-span: 8;
        grid-column:3 / 11;
}
.content-grid > main > [button-class="oucEditButton"][label="maincontent"] > .breakout,
.content-grid.sidebar--L > .bottomRow > [button-class="oucEditButton"][label="lowercontent"] > .breakout {
        -ms-grid-column: 1;
        -ms-grid-column-span: 12;
        grid-column:1 / 13;
}


.bottomRow .ou-justedit-region.mce-edit-focus,
#mce_0 { grid-column: 1/13; width: 100%; }
/* Default / Landing Page Type * /
 * v1: Caused weirdo issue with grids making it impossible to add cards in rows 2+, columns 2+
.content-grid > main > .ou-justedit-region.mce-edit-focus > *:not(.breakout) { padding-left: 16rem!important; padding-right: 16rem!important; }
.content-grid > main > .ou-justedit-region.mce-edit-focus { grid-column: 1/13; min-width: 100vw; padding-left: unset; padding-right: unset; padding-left: 0; padding-right: 0; }
*/
.content-grid > main > .ou-justedit-region.mce-edit-focus { grid-column: 1/13; min-width: 100vw; }
.content-grid > main > .ou-justedit-region.mce-edit-focus > *:not(.breakout)
.content-grid > main > .ou-justedit-region.mce-edit-focus > *:not([id*="mce_"]) { width:88vw;margin:0 auto; }
/* Interior Page Type:
 * these counter the above rule with this for interior pages main area * /
 * v1: Caused weirdo issue with grids making it impossible to add cards in rows 2+, columns 2+
.content-grid > .leftSidebar + main > .ou-justedit-region.mce-edit-focus > * { padding-left: 0!important; padding-right: 0!important; } */
.content-grid > .leftSidebar ~ main > .ou-justedit-region.mce-edit-focus { min-width: unset; }


/* FOR ACTIVE TRAINING: encourage editors not to use multiple H1 tags
 * Flag multiple h1 tags in main content area
 * Show an error message using :before
 * And the fix using :after 
 * but only on the backend, not published,
 * so editors hopefully see it while editing 
 #content > article.content-grid > main > ouc:div > h1:nth-child(4)
 */
.ou-justedit-region h1, [label="maincontent"] h1,/* Edit Panel */
.ou-justedit-active h1:nth-child(n+2)/* Edit Mode */
{
    animation: fadeinout--gentle 2s 2s infinite;
    color: #A6192E;
    text-decoration: line-through;
}

    [label="maincontent"] h1:before,
	[label="maincontent"] h1:after,
	.ou-justedit-active h1:nth-child(n+2):before, 
	.ou-justedit-active h1:nth-child(n+2):after 
    {
        display: inline-block;
        font-family: "Courier New", Courier, monospace;
        font-size: 1.2rem;
        line-height: 1.5rem;
        position: relative;
        text-decoration: none;
        white-space: pre;
        width: 100%;
        word-break: keep-all;
    }

    [label="maincontent"] h1:before,
	.ou-justedit-active h1:nth-child(n+2):before 
    {

		color: #A6192E;
        content: 'OOPS, There\2019s a Problem: \A Multiple Heading 1 Tags are highly discouraged. \A Google will penalize this webpage\2019s search ranking if you leave it.';
		margin-bottom: 1.5rem;
    }

    [label="maincontent"] h1:after,
	.ou-justedit-active h1:nth-child(n+2):after
    {
		color: #046A38;
        content: 'HOW TO FIX IT: \A 1) In the editor, highlight the offending headline \A text above (red with a line through it), \A 2) Then change the \2018Heading 1\2019  to a \2018Heading 2\2019  \A in the WYSIWIG toolbar. \A 3) Pat yourself on the back for doing the right thing.';
		margin-top: 1.5rem;
    }
	
	/* Exceptions to the 1 h1 rule. This will likely have an ID to easily target by w/o the need for the !important tag. */
	#breakout--newsHero h1:before, #breakout--newsHero h1:after,
	#displacedHeader > h1:before,
	#displacedHeader > h1:after {content:unset;}

/* .box--error.page__alert COVID-19 Page Alerts.
 * Hidden in main.css at the bottom with this:
 * .box--error.page__alert { display: none!important; height:0!important; width: 0!important; visibility: hidden!important; }
 * But Editors need to see them to remove them.
 * So we want to show them in Preview and Edit modes
 * Orignally removed at Dr. Noland's request.
 * SEE: /main.css last line for live page code that's hiding it.
 * @callkw, 5-26-22020 */
.box--error.page__alert, /* Preview Panel (works b/c it loads ou-styles.css, and live pages dont) */
[label="maincontent"] .box--error.page__alert,/* Edit Panel */
.ou-justedit-active .box--error.page__alert/* Edit Mode */
{
	 display: block!important; visibility: visible!important;
}

/* END OU CAMPUS, v.10 Styles ----------------------------------------------------------------------*/

/* START OU CAMPUS, v.11 Styles ----------------------------------------------------------------------
 * Pub. Date: 11-9-20
 * NOTE: several OU elements contain colons. You can easily target them in CSS selector by escaping the colon.
 * EG: ouc\:component[name="component-name"]{ ... styles here ... }
 *
 * EDIT MODE Parent Selectors
 * These selectors are only available in EDIT mode. Prepend to selectors to target them in EDIT mode.
 *     - #mce_0
*/
/* CARDS */
main ouc\:component[id="ou-card-data-container"] .float--left,
main ouc\:component[id="ou-card-data-container"] .float--right {max-width:45%;min-width:25%;}

/*!
 * Reveal broken links. 
 * Nice Developer Experience (DX). Highlights some common broken link types in red
 * since this stylesheet is only set to load if the page isn't published, 
 * these red links will only show when logged into the CMS in Preview and Edit modes.
 * /
a[href="#"],
a[href*="#-"],
a[href*="lorem-ipsum"] { box-shadow: inset 0 0 1.5rem magenta; color: red!important; } */

/* END OU CAMPUS, v.11 Styles ----------------------------------------------------------------------*/

/* 2023t Template */
[role="dialog"] [class*=button--]:before {display:none!important;}
.grid.twoCol [class*=card] .info-img-link img { min-height:1px;}

/* EDITING in DARK MODE */
@media (prefers-color-scheme: dark) 
{/* dark mode */
	.ou-justedit-underlay + #mce_0 {background-color:#000!important;}
	.ou-justedit-underlay + #mce_0 * {color:#A2A9AD!important;filter:none!important;}
}