/* 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.
========================================================================================== */

/* 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.
	blue primary rgb(0, 102, 153)
	light blue primary-hover: rgba(51,153,255,1)
	red rgba(213,0,50,1)
	dark red(151,27,47,1)
	accent red (125,33,43,1)
*/
:root {
	--breakpoint-phone: 600px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1200px;
	
	--fontfamily-primary: 'Open Sans', sans-serif;
	--fontfamily-secondary: 'FontAwesome';

	--color-brand-primary: rgba(0,102,153,1);
	--color-brand-primary-hover: rgba(99,174,249,1);
	--color-brand-secondary: rgba(151,27,47,1);
	--color-brand-secondary-hover: rgba(213,0,50,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(230,230,230,1);
	--color-dark: rgba(55,55,55,1);
	--color-black: rgba(0,0,0,1);
	--color-black-shadow: rgba(0,0,0,0.2);
}

/* === SECTION 1 ============================================================================ BLOCK/FREEFORM CLASSES */
.StripeDefault {background:rgba(255,255,255,1);}
.StripeLight {background:rgba(237,240,235,1); color:rgba(51,51,51,1);}
.StripeMedium {background:rgba(230,230,230,1); color:rgba(51,51,51,1);}
.StripeDark {background:rgba(55,55,55,1); color:rgba(255,255,255,1);}

.CardBackground  {}
.CardTransparent {}

.RedBlock h4{background:rgba(125,33,43,1); color:#fff;padding:10px;}
.RedBlock {background:rgba(151,27,47,1); color:#fff;}
.RedBlock p{padding:10px;}
h1 {font-size:3.2rem; margin-bottom:1.8rem; line-height:1.3; font-weight:700;font-family: 'Bitter', serif;}
h2 {font-size:2.6rem; margin-bottom:1.5rem; line-height:1.3; font-weight:700;font-family: 'Bitter', serif;}
h3 {font-size:2.2rem; margin-bottom:1.2rem; line-height:1.3; font-weight:700;font-family: 'Bitter', serif;}
h4 {font-size:1.8rem; margin-bottom:1.0rem; line-height:1.3; font-weight:700;color:rgba(125,33,43,1);font-family: 'Bitter', serif;}
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;}

.customFooter h1,.customFooter h2,.customFooter h3,.customFooter h4{color:rgba(230,230,230,1);}

	.whiteButton a{background: #fff;border-radius:1px; padding: 10px;color:rgba(125,33,43,1);}

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

.titanBody {color:rgba(51,51,51,1); font-family:'Open Sans', sans-serif; font-size:1.6rem; line-height:1.4; font-weight:400;}
.mainBody {color:rgba(51,51,51,1); font-family:'Open Sans', sans-serif; font-size:1rem; line-height:1.2; font-weight:400;}


/* == HEADER */
#headerArea {background:rgba(237,240,235,1);}
#headerArea{border-bottom: solid 5px  rgba(158,27,48,1);}


/* ==== UTILITY */
#utilityArea {background:rgba(151,27,47,1);}

/* ==== SEARCH BAR */
.searchArea {background:rgba(230,230,230,1);}
@media (min-width:1200px){ 
	.searchArea {background:rgba(230,230,230,1);}
}

/* ==== LOGO */

/* ==== TOP NAV */

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

#navOpener:checked ~ #navArea {background:rgba(151,27,47,1); box-shadow: 0 0 5px rgba(51,51,51,1);}

/* == CONTENT */
#contentArea {background:rgba(255,255,255,1);}

/* ==== TOP ZONE */
#topZone {}

/* ==== PAGE TOOLS */
#pageTools {background:rgba(255,255,255,1);}
.email,.print{font-size:0;}
.print a::before{content: " \f02f ";font-family: "FontAwesome"; margin-right:3px;font-size: 1.5rem;}
.email a::before{content: " \f003 ";font-family: "FontAwesome";	margin-right:3px;font-size: 1.5rem;}
.email a:hover,.print a:hover{text-decoration:none!important;}


/* ==== TITLE BAR */

/* ==== SIDE NAV */

/* ==== CENTER ZONE */
div.side {border:1px solid rgba(0,0,0,0.2);}

/* == FOOTER */
#footerArea {background:rgba(125,33,43,1);}

.bottomContent {color:rgba(255,255,255,1);background:rgba(158,27,48,1) url("images/biimages/BadgerInstLogoFooter.png") no-repeat 80% 50%;}

/* == SCROLL TOP */
#scrollTop {border:2px solid rgba(255,255,255,1); background:rgba(151,27,47,1); border-radius:50%;}
#scrollTop:hover {background:rgba(213,0,50,1);}


/* === SECTION 3 ============================================================================ CONTENT IN CONTAINERS */
/* GLOBAL */
.titanBody a,
.mainBody a {color:rgba(0,102,153,1); text-decoration:none;}
.titanBody a:hover,
.titanBody a:focus,
.titanBody a:active,
.mainBody a:hover,
.mainBody a:focus,
.mainBody a:active {color:rgba(99,174,249,1); text-decoration:underline;}

.titanBody input,
.titanBody textarea,
.titanBody select {font-family:'Open Sans', sans-serif; font-size:1.6rem; line-height:1.4; border-radius:0;}
.mainBody input,
.mainBody textarea,
.mainBody select {font-family:'Open Sans', sans-serif; font-size:1rem; line-height:1.2; border-radius:0;}

/* == HEADER */

/* ==== UTILITY */

.titanBody nav.utility a {font-size:1.3rem;color:rgb(230, 230, 230);}

/* ==== SEARCH BAR */
.searchArea input {background:transparent; border:0; outline:0;}
.searchArea input[type="text"] {color:rgba(213,0,50,1); font-size:1.3rem;}

.searchBar:before {cursor:pointer; color:rgb(126, 126, 115); font-family:'FontAwesome'; content:"\f002"; font-size:2rem;}
.searchBar input.search {cursor:pointer; color:rgb(126, 126, 115); text-indent:9000px;font-size:0;}
.searchBar ::-webkit-input-placeholder {color:rgb(126, 126, 115);}
.searchBar ::-moz-placeholder {color:rgb(126, 126, 115); opacity:1;}
.searchBar :-ms-input-placeholder{color:rgb(126, 126, 115);}
.searchBar :-moz-placeholder{color:rgb(126, 126, 115);}
.searchBar input[placeholder]{color:rgb(126, 126, 115); 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;color:rgba(0,102,153,1);}	
#navButton span {font-size:1.2rem; line-height:1rem;color:rgba(55,55,55,1);}
#navButton span.fa {font-size:2.5rem; line-height:1; cursor:pointer;}
#navButton span.fa:before {font-family:'FontAwesome'; content:"\f0c9";  }
#navButton:hover * {color: rgba(126,126,115,1);}

#navArea > label {outline:0;}
#navOpener:checked ~ #navArea > label {color:rgba(255,255,255,1);}
#navOpener:checked ~ #navArea > label > #navButton span.fa:before {font-family:'FontAwesome'; content:"\f00d"; }
#navOpener:checked ~ #navArea #navButton:hover * {color: rgba(126,126,115,1);}

@media (min-width:1200px){ /* top nav */
	#navArea.stripe {background:rgba(237,240,235,1); border-bottom:1px solid rgba(0,102,153,1);}
}


#navArea nav a {color:rgba(255,255,255,1); font-size:1.5rem;}
#navArea nav a.current,
#navArea nav a:hover,
#navArea nav a:focus,
#navArea nav a:active {color:rgba(255,255,255,1); background: rgba(126,126,115,1);}

#navArea nav > ul > li {border-bottom:1px solid rgba(255,255,255,1);}
#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:rgba(55,55,55,1); font-size:1.5rem;}
	#navArea nav a.current,
	
	#navArea nav.top .menu > li ul li a:hover,
	#navArea nav.top .menu > li ul li a:focus,
	#navArea nav.top .menu > li ul li a:active {background:transparent; color:rgb(0, 102, 153);}
	/* 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:rgba(0,102,153,1);text-decoration:none;}
	#navArea nav.top .menu > li a span.arrow {border:5px solid transparent; border-top:5px solid rgba(151,27,47,1);}
	#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 rgba(0,102,153,1);}
		#navArea nav.top .menu > li.navLast ul::before { left: auto; right: 50px;}
	/* second level */
	#navArea nav.top .menu > li > ul::before{border:15px solid transparent; border-bottom:15px solid rgba(230,230,230,1); 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:rgba(230,230,230,1); border:1px solid rgba(230,230,230,1);}
}

/* == CONTENT */

/* ==== TOP ZONE */

/* ==== PAGE TOOLS */
nav.tools .shareMenu span.arrow {border:10px solid transparent; border-bottom:10px solid rgba(230,230,230,1);}
nav.tools .shareIcons {background:rgba(230,230,230,1);}

/* ==== TITLE BAR */

/* ==== SIDE NAV */
div.side nav ul a:before {font-family:'FontAwesome'; content:"\f0da";color:rgb(158, 27, 48);}
div.side nav a:hover{text-decoration:none!important;}
div.side nav a.current {color:rgba(55,55,55,1);}

/* ==== CENTER ZONE */

/* == FOOTER */
#footerArea a {color:rgba(99,174,249,1);}
#footerArea a:hover{color:rgba(0,102,153,1);}
#footerArea .copyright,

nav.bottom ul {font-size:1.5rem;color:#fff;}
nav.bottom a, 
nav.bottom a:hover, 
nav.bottom a:active, 
nav.bottom a:focus {color:rgba(255,255,255,1);}
#footerArea .poweredBy{font-size:1rem;color:#999;}
.customFooter {}

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


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

.titanBody .FeatureImage {}
.titanBody .FeatureText{color:rgba(255,255,255,1);background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0;}
.titanBody .FeatureText .Button a,.mainBody .FeatureText  .Button a {border:2px solid rgba(255,255,255,1); background:transparent; border-radius:1px; color:rgba(255,255,255,1);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 rgba(255,255,255,1); background:rgba(255,255,255,1); color:rgba(0,102,153,1);}
@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 rgba(230,230,230,1);}
.StripeDark    .CardBackground .item {background:rgba(255,255,255,1);}
.StripeDark    .CardBackground .item h4 a {color:rgba(99,174,249,1);}
.StripeDark    .CardBackground .item h4 a:hover,
.StripeDark    .CardBackground .item h4 a:active,
.StripeDark    .CardBackground .item h4 a:focus {color:rgba(0,0,0,1);}
.StripeDark    .CardBackground .teaser {color:rgba(126,126,115,1);}

.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:rgba(0,102,153,1); border-radius:1px; color:rgba(255,255,255,1); text-align:center; transition:all 0.1s ease; text-decoration:none; cursor:pointer;}

.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:rgba(99,174,249,1); color:rgba(255,255,255,1); border: 1px solid transparent; text-decoration:none;}

.TitanBlock input[type="button"],
.TitanBlock input[type="submit"] {border:1px solid transparent; background:rgba(0,102,153,1); border-radius:1px; color:rgba(255,255,255,1); 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:rgba(99,174,249,1); color:rgba(255,255,255,1); 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:rgba(0,102,153,1); color:rgba(255,255,255,1);font-size:1.7rem; line-height:1.7rem;}
.TitanBlock input.filterTrigger + div h3 label:hover {background:rgba(99,174,249,1); color:rgba(255,255,255,1);}
div:not(.mainBody) > .TitanBlock input.filterTrigger:checked + div {background:rgba(230,230,230,1); 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:'FontAwesome'; font-size:3rem; content:"\f00d"; cursor:pointer; }

@media (min-width:1200px) {
	.TitanBlock input.filterTrigger + div, 
	div:not(.mainBody) > .TitanBlock input.filterTrigger:checked + div {background:rgba(255,255,255,1); border:1px solid rgba(55,55,55,1); 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:rgba(0,102,153,1);}
div.Accordion div.accordionHeading.open span.arrow span:first-child {border-left-color:transparent;border-top-color:rgba(0,102,153,1);}
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: rgba(237,240,235,1);}