/* Do not put any @imports in this CSS file. They will not be loaded properly by the 
	preview pane in Titan Admin Theme Create dialog. Put them in the Layout CSS instead. 
*/

/* ==========================================================================================
	There are 4 major sections to this CSS file. 

	1. Block/Freeform Classes
	   This sets up the class names that can be added in the Titan Workstation. They are 
	   positioned at the top so Titan will show them near the top.

	2. Styles of Containers 
	   This is the styling of the "layout containers" that make up the structure of a page. 
	   They are limited to container elements specified in the ASCX files, and not the 
	   content produced by a control, XSL, or Block.

	3. Content in Containers 
	   This is the styling of content elements produced by controls, XSL, and/or blocks. 
	   This provides a modular way of styling content separately from the containers that 
	   constrain the layout of the page.

	4. Block Content  
	   This is the styling specific to base blocks intended to override the crux.css code.

blue links #336699;
========================================================================================== */

/* CSS Custom Properties
	We aren't using these per the spec yet since browsers haven't fully implemented.
	However, to ease development, we are doing replacements as a way to have simple
	global property definitions that can be pushed through a design.
	- Avoid defining properties outside of the :root pseudo class 
	- Avoid defining complex properties. 
	- Avoid using the var function with fallback properties.
*/
:root {
	--breakpoint-phone: 600px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1200px;
	
	--fontfamily-primary: Roboto, sans-serif;
	--fontfamily-secondary: 'FontAwesome';

	--color-brand-primary: #336699;
	--color-brand-primary-hover: #646da8;
	--color-brand-secondary: #646da8;
	--color-brand-secondary-hover:rgba(126,126,115,1) ; 
	
	--color-text-medium: rgba(126,126,115,1);
	--color-text-dark:rgba(51,51,51,1);

	--color-white: rgba(255,255,255,1);
	--color-white-shadow:rgba(255,255,255,0.7);
	--color-light: rgba(237,240,235,1);
	--color-medium: rgba(225,229,218,1);
	--color-dark: rgba(85,85,85,1);
	--color-black: rgba(0,0,0,1);
	--color-black-shadow: rgba(0,0,0,0.2);
}

/* === SECTION 1 ============================================================================ BLOCK/FREEFORM CLASSES */
.StripeDefault {background:var(--color-white);}
.StripeLight {background:var(--color-light); color:var(--color-text-dark);}
.StripeMedium {background:var(--color-medium); color:var(--color-text-dark);}
.StripeDark {background:var(--color-dark); color:var(--color-white);}

.CardBackground  {background:rgba(237,240,235,1);border: 1px solid #646da8;border-radius:5px;padding:15px;}
.CardTransparent {}

h1 {font-size:3.2rem; margin-bottom:1.8rem; line-height:1.3; font-weight:700;}
h2 {font-size:2.6rem; margin-bottom:1.5rem; line-height:1.3; font-weight:700;}
h3 {font-size:2.2rem; margin-bottom:1.2rem; line-height:1.3; font-weight:700;}
h4 {font-size:1.8rem; margin-bottom:1.0rem; line-height:1.3; font-weight:700;}
h5 {font-size:1.7rem; margin-bottom:0.8rem; line-height:1.3;}
h6 {font-size:1.6rem; margin-bottom:0.6rem; line-height:1.3;}

/* === SECTION 2 ============================================================================ STYLES OF CONTAINERS */
/* GLOBAL */
.titanDisplay {font-size:62.5%;}
body {-webkit-text-size-adjust:none;}

.titanBody {color:var(--color-text-dark); font-family:var(--fontfamily-primary); font-size:1.6rem; line-height:1.4; font-weight:400;}
.mainBody {color:var(--color-text-dark); font-family:var(--fontfamily-primary); font-size:1rem; line-height:1.2; font-weight:400;}

/* Feature Overlays. note: TitanBlock is so TitanCMS pop up editor does not get the opacity and block user access */
.TitanBlock.FeatureImage{position:relative;} /* wkst - prevent the overlay from bleeding */
.TitanBlock.FeatureImage:before{display:block;content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;opacity:0;}
div[class*="FeatureOverlayDark"]:before{background:var(--color-feature-overlay);}
.TitanBlock.FeatureImage.FeatureOverlayDark10:before{opacity:.10;}
.TitanBlock.FeatureImage.FeatureOverlayDark20:before{opacity:.20;}
.TitanBlock.FeatureImage.FeatureOverlayDark30:before{opacity:.30;}
.TitanBlock.FeatureImage.FeatureOverlayDark40:before{opacity:.40;}
.TitanBlock.FeatureImage.FeatureOverlayDark50:before{opacity:.50;}
.TitanBlock.FeatureImage.FeatureOverlayDark60:before{opacity:.60;}
.TitanBlock.FeatureImage.FeatureOverlayDark70:before{opacity:.70;}
.TitanBlock.FeatureImage.FeatureOverlayDark80:before{opacity:.80;}
.TitanBlock.FeatureImage.FeatureOverlayDark90:before{opacity:.90;}

/* == HEADER */
#headerArea {background:var(--color-light);box-shadow:-2px 2px 0 0 #F9E8CF;}
#headerArea.sticky {box-shadow:-2px 2px 0 0 #F9E8CF;}

/* ==== UTILITY */
#utilityArea {background:#336699;}

/* ==== SEARCH BAR */
.searchArea {background:var(--color-white);}
@media (min-width:1200px){ 
	.searchArea {background:var(--color-white);}
}

/* ==== LOGO */

/* ==== TOP NAV */

#navArea {background:transparent; box-shadow:none;}
#navArea .searchArea {border-radius:3px;}

#navOpener:checked ~ #navArea {background:var(--color-brand-secondary); box-shadow: 0 0 5px var(--color-text-dark);}

/* == CONTENT */
#contentArea {background:var(--color-white);}

/* ==== TOP ZONE */
#topZone {background:none;}

/* ==== PAGE TOOLS */
#pageTools {background:var(--color-white);}


/* ==== TITLE BAR */

/* ==== SIDE NAV */

/* ==== CENTER ZONE */
div.side {border:1px solid var(--color-black-shadow);}

/* == FOOTER */
#footerArea {background-color:#F9E8CF;}
.bottomContent {}

/* == SCROLL TOP */
#scrollTop {border:2px solid var(--color-white); background:var(--color-brand-secondary); border-radius:50%;}
#scrollTop:hover {background:var(--color-brand-secondary-hover);}


/* === SECTION 3 ============================================================================ CONTENT IN CONTAINERS */
/* GLOBAL */
.titanBody a,
.mainBody a {color:var(--color-brand-primary); text-decoration:none;}
.titanBody a:hover,
.titanBody a:focus,
.titanBody a:active,
.mainBody a:hover,
.mainBody a:focus,
.mainBody a:active {color:var(--color-brand-primary-hover); text-decoration:underline;}

.titanBody input,
.titanBody textarea,
.titanBody select {font-family:var(--fontfamily-primary); font-size:1.6rem; line-height:1.4; border-radius:0;}
.mainBody input,
.mainBody textarea,
.mainBody select {font-family:var(--fontfamily-primary); font-size:1rem; line-height:1.2; border-radius:0;}

/* == HEADER */

/* ==== UTILITY */

.titanBody nav.utility a {font-size:1.3rem;}

/* ==== SEARCH BAR */
.searchArea input {background:transparent; border:0; outline:0;}
.searchArea input[type="text"] {color:var(--color-brand-secondary-hover); font-size:1.3rem;}

.searchBar:before {cursor:pointer; color:var(--color-dark); font-family:var(--fontfamily-secondary); content:"\f002"; font-size:2rem;}
.searchBar input.search {cursor:pointer; color:var(--color-dark); text-indent:9000px;font-size:0;}
.searchBar ::-webkit-input-placeholder {color:var(--color-dark);}
.searchBar ::-moz-placeholder {color:var(--color-dark); opacity:1;}
.searchBar :-ms-input-placeholder{color:var(--color-dark);}
.searchBar :-moz-placeholder{color:var(--color-dark);}
.searchBar input[placeholder]{color:var(--color-dark); opacity:1;}

/* ==== LOGO */

/* ==== TOP NAV - caution: checked state could be on at desktop widths. style :checked even at desktop */

#navButton {text-transform:uppercase; text-align:center;}	
#navButton span {font-size:1.2rem; line-height:1rem;}
#navButton span.fa {font-size:2.5rem; line-height:1; cursor:pointer;}
#navButton span.fa:before {font-family:var(--fontfamily-secondary); content:"\f0c9"; }
#navButton:hover * {color:var(--color-brand-primary);}

#navArea > label {outline:0;}
#navOpener:checked ~ #navArea > label {color:var(--color-white);}
#navOpener:checked ~ #navArea > label > #navButton span.fa:before {font-family:var(--fontfamily-secondary); content:"\f00d"; }
#navOpener:checked ~ #navArea #navButton:hover * {color:var(--color-text-medium);}

@media (min-width:1200px){ /* top nav */
	#navArea.stripe {background:var(--color-light); border-bottom:1px solid var(--color-brand-primary);}
}


#navArea nav a {color:var(--color-white); font-size:1.5rem;}
#navArea nav a.current,
#navArea nav a:hover,
#navArea nav a:focus,
#navArea nav a:active {color:var(--color-white); background:var(--color-black);}

#navArea nav > ul > li {border-bottom:1px solid var(--color-white);}
#navArea nav > ul > li > a {text-transform:uppercase; font-weight:700;}

@media (min-width:1200px){ /* top nav */
	#navArea nav > ul > li {border-bottom:none;}
	#navArea nav a {color:var(--color-brand-secondary); font-size:1.5rem;}
	#navArea nav a.current,
	#navArea nav.top .menu > li ul li a:hover{background:transparent; color:#000;text-decoration:none;}
	#navArea nav.top .menu > li ul li a:focus,
	#navArea nav.top .menu > li ul li a:active {background:transparent; color:var(--color-brand-secondary);}
	/* first level */
	#navArea nav.top .menu > li {background:transparent;}
	#navArea nav.top .menu > li:hover > a,
	#navArea nav.top .menu > li:focus > a,
	#navArea nav.top .menu > li:active > a {background:inherit;color:inherit;text-decoration:none;}
	#navArea nav.top .menu > li a span.arrow {border:5px solid transparent; border-top:5px solid var(--color-brand-secondary);}
	#navArea nav.top .menu > li:hover span.arrow,
	#navArea nav.top .menu > li:focus span.arrow,
	#navArea nav.top .menu > li:active span.arrow {border-top:5px solid transparent;}
	/* second level */
	#navArea nav.top .menu > li > ul::before{border:15px solid transparent; border-bottom:15px solid #b2b34d; content: ""; left: 30px; position: absolute; top: -31px;}
	.sticky #navArea nav.top .menu > li > ul::before {border-width: 7px;top: -14px;}
	#navArea nav.top .menu > li > ul {background:var(--color-white); border:1px solid #b2b34d;}
	#navArea nav.top .menu > li.navLast > ul::before {right: 40px;left:auto;}
}

/* == CONTENT */

/* ==== TOP ZONE */
#topZone {position:relative; overflow:hidden; width:100%;}
@media (min-width:1200px){
	#topZone {min-height:10px; max-height: 600px; }
	/* Feature Image/Text Slider */
	#topZone .slides .item {position:relative;overflow:hidden;max-height:600px;}
}

/* ==== PAGE TOOLS */
nav.tools .shareMenu span.arrow {border:10px solid transparent; border-bottom:10px solid var(--color-medium);}
nav.tools .shareIcons {background:var(--color-medium);}

/* ==== TITLE BAR */

/* ==== SIDE NAV */
div.side nav ul a:before {font-family:var(--fontfamily-secondary); content:"\f0da";}
div.side nav a.current {color:var(--color-brand-secondary-hover);}
div.side nav h4{display:none;}
div.side nav a:hover {text-decoration:none;}
/* ==== CENTER ZONE */

/* == FOOTER */
#footerArea .poweredBy{font-weight:normal;font-size:1.2rem; color:#ccc;}
#footerArea .copyright{}
nav.bottom ul, 
nav.bottom a{color:var(--color-brand-primary);}
nav.bottom a:hover, 
nav.bottom a:active, 
nav.bottom a:focus {text-decoration:underline;color:var(--color-brand-primary-hover);}

#footerArea {width: 100%; min-height: 350px; background-color:#F9E8CF; overflow: hidden;}

/* == SCROLL TOP */
#scrollTop {text-align:center;}
#scrollTop span.fa {color:var(--color-white);font-size:4rem;line-height:4.5rem;text-align:center;}


/* === SECTION 4 ============================================================================ BLOCK CONTENT */

.titanBody .FeatureImage {}
.titanBody .FeatureText{color:var(--color-white);}
.titanBody .FeatureText .Button a,.mainBody .FeatureText  .Button a {border:2px solid var(--color-white); background:transparent; border-radius:1px; color:var(--color-white);font-size: 1.4rem;font-weight: 600;text-transform: uppercase;}
.titanBody .FeatureText .Button a:hover, .titanBody .FeatureText .Button a:focus, .titanBody .FeatureText .Button a:active, .mainBody .FeatureText .Button a:hover, .mainBody .FeatureText .Button a:focus, .mainBody .FeatureText .Button a:active {border:2px solid var(--color-white); background:var(--color-white); color:var(--color-brand-primary);}
@media (min-width:1200px) {
	.titanBody .FeatureText h1 {font-size:6rem;}
}

.Circles img {clip-path: circle(39% at 50% 50%);} /* will only work on browsers that support clip-path - that is, not IE */

.StripeDefault .CardBackground .item,
.StripeLight   .CardBackground .item {border:1px solid var(--color-medium);}
.StripeDark    .CardBackground .item {background:var(--color-white);}
.StripeDark    .CardBackground .item h4 a {color:var(--color-brand-primary-hover);}
.StripeDark    .CardBackground .item h4 a:hover,
.StripeDark    .CardBackground .item h4 a:active,
.StripeDark    .CardBackground .item h4 a:focus {color:var(--color-black);}
.StripeDark    .CardBackground .teaser {color:var(--color-text-medium);}

.CardTransparent .item .linkText a,
.CardBackground  .item .linkText a,
.titanBody .Button a,
.mainBody .Button a,
.CenterZone input[type="submit"], 
.CenterZone input[type="button"], 
.Commenting input[type="button"] {border:1px solid transparent; background:var(--color-brand-primary); border-radius:5px; color:var(--color-white); text-align:center; transition:all 0.1s ease; text-decoration:none; cursor:pointer; font-weight:bold; font-size:1.4rem;}

.CardTransparent .item:hover  .linkText a:hover,
.CardTransparent .item:focus  .linkText a:hover,
.CardTransparent .item:active .linkText a:hover,
.CardBackground  .item:hover  .linkText a:hover,
.CardBackground  .item:focus  .linkText a:hover,
.CardBackground  .item:active .linkText a:hover,
.titanBody .Button a:hover, 
.titanBody .Button a:focus, 
.titanBody .Button a:active,
.mainBody  .Button a:hover, 
.mainBody  .Button a:focus, 
.mainBody  .Button a:active,
.CenterZone input[type="submit"]:hover, 
.CenterZone input[type="submit"]:focus, 
.CenterZone input[type="submit"]:active, 
.CenterZone input[type="button"]:hover, 
.CenterZone input[type="button"]:focus, 
.CenterZone input[type="button"]:active, 
.Commenting input[type="button"]:hover, 
.Commenting input[type="button"]:focus, 
.Commenting input[type="button"]:active {background:var(--color-brand-primary-hover); color:var(--color-white); border: 1px solid transparent; text-decoration:none;}

.TitanBlock input[type="button"],
.TitanBlock input[type="submit"] {border:1px solid transparent; background:var(--color-brand-primary); border-radius:5px; color:var(--color-white); text-align:center; transition:all 0.1s ease; text-decoration:none;}
.TitanBlock input[type="button"]:hover,
.TitanBlock input[type="button"]:active,
.TitanBlock input[type="button"]:focus,
.TitanBlock input[type="submit"]:hover,
.TitanBlock input[type="submit"]:active,
.TitanBlock input[type="submit"]:focus {background:var(--color-brand-primary-hover); color:var(--color-white); border: 1px solid transparent; text-decoration:none;}

.DataFilter2 td,.DatePicker td,
.DatePicker table{background:rgb(230,230,230);}
.DataFilter2 td,.DatePicker td{border:1px solid rgb(255,255,255);}
.DataFilter2 td.otherMonth,.DatePicker td.otherMonth{background:rgb(200,200,200);}
.DataFilter2 td.selectedDate,.DataFilter2 td.selectedDate.hasEvent,.DatePicker td.selectedDate,.DatePicker td.selectedDate.hasEvent{background:rgba(90,90,90,.3);border:1px solid rgb(255,255,255);}
.DataFilter2 td.hasEvent,.DatePicker td.hasEvent{background:rgb(90,90,90);}

.TitanBlock input.filterTrigger + div h3 label {background:var(--color-brand-primary); color:var(--color-white);font-size:1.7rem; line-height:1.7rem;}
.TitanBlock input.filterTrigger + div h3 label:hover {background:var(--color-brand-primary-hover); color:var(--color-white);}
div:not(.mainBody) > .TitanBlock input.filterTrigger:checked + div {background:var(--color-medium); box-shadow:none;}
.TitanBlock input.filterTrigger + div .filterClose div span {display:none;}
div:not(.mainBody) > .TitanBlock input.filterTrigger:checked + div .filterClose div:before {font-family:var(--fontfamily-secondary); font-size:3rem; content:"\f00d"; cursor:pointer; }

@media (min-width:1200px) {
	.TitanBlock input.filterTrigger + div, 
	div:not(.mainBody) > .TitanBlock input.filterTrigger:checked + div {background:var(--color-white); border:1px solid var(--color-dark); box-shadow:none;}

	div.side .TitanBlock input.filterTrigger + div,
	div.side .TitanBlock input.filterTrigger:checked + div {border:none;}

	.TitanBlock input.filterTrigger + div h3 label,
	.TitanBlock input.filterTrigger + div h3 label:hover {background:transparent; color:inherit; font:inherit;}
}

div.Accordion div.accordionHeading span.arrow span:first-child {border-left-color:var(--color-brand-primary);}
div.Accordion div.accordionHeading.open span.arrow span:first-child {border-left-color:transparent;border-top-color:var(--color-brand-primary);}
div.Accordion div.accordionHeading span.arrow span + span {display:none;}
div.Accordion .min, div.Accordion .max {font-size: 1.3rem;}

/* Segmented Search */
.smartSearchResults, .SmartRL {background: var(--color-light);}

/* Photo Block */
.PhotoBlock .filmstrip .leftArrow, .PhotoBlock .filmstrip .rightArrow {background:var(--color-brand-primary); border-radius:50%; cursor:pointer; height:4rem; width:4rem; padding:10px 0 0 10px;}
.PhotoBlock .filmstrip .rightArrow {padding:10px 0 0 14px;}
.PhotoBlock .filmstrip .rightArrow::after,.PhotoBlock .filmstrip .leftArrow::after {cursor:pointer; color:var(--color-medium); font-family:var(--fontfamily-secondary); content:"\f053"; font-size:2rem; line-height:2rem;}
.PhotoBlock .filmstrip .rightArrow::after {content:"\f054";}


.whiteButton a {border:#336699 2px solid;background:#fff;
	border-radius:4px;
	color:#336699;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 4px 20px;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;} 
.whiteButton a:hover {background:#646da8;color: #FFF ;text-decoration: none !important;border:#336699 2px solid;}