/*
Site Colors
Links: #0071bc/#205493/#4c2c92
Blue:  #202b7d
Green: #5c8e09
Purple:#623182
Black: #343434
*/

.soi-page {
	font-family:"Calibri", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
	/*font-family:"Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif;	*/
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Calibri", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
	}
.ms-rtestate-field h2 {
	xcolor:#5d8e0a;
	color: #222A7D;
}
.soi-content h2, .ms-rtestate-field h2, .ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
	font-family:"Calibri", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
	xcolor:#5d8e0a;
	color: #222A7D;
	font-size:30px;
}
.soi-page a {
  color: #0071bc;
  text-decoration: none; }
  .soi-page a:hover, .soi-page a:active {
    color: #205493;
    text-decoration: underline; }
  .soi-page a:visited {
    color: #4c2c92; }
  .soi-page a:focus {
    box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
    outline: 0; }

.soi-page .soi-footer a, .soi-page .soi-page-breadcrumb a {
  color: #d6d7d9; }
  .soi-page .soi-footer a:hover, .soi-page .soi-footer a:active,
  .soi-page .soi-page-breadcrumb a:hover, .soi-page .soi-page-breadcrumb a:active {
    color: #ffffff; }
  .soi-page .soi-footer a:visited, .soi-page .soi-page-breadcrumb a:visited {
    color: #ffffff; }

.soi-pagetitle {
	background-color:#222A7D; /*205493;/*212b7d 447eb8*/
	color:white;
	border-top: 4px #3996B5 solid;/*5d8e0a */	
	margin-bottom:20px;
}
.navbar {
	margin-bottom:0px;
}
.navbar-brand {
	height:100px;
}
.ms-srch-sbLarge-fullWidth {
	width:auto;
}
/* ===================================================================================
   Local navigation
   =================================================================================== */

.s4-ql 
{
	padding-top:20px;
}
.s4-ql UL.root > LI > .menu-item, .soi-content .ms-quickLaunch h2
{
	background-color:#232228;
	text-transform:uppercase;
	font-weight:normal;
	color:#fff;
	font-size:1em;	
}

.s4-ql ul.root ul > li > a, a.soi-bullet, .soi-content .ms-quickLaunch li .item a
{
	color:#303636;
	padding-left:20px;
	background-repeat:no-repeat;
	background-position:5px 10px;
}
.s4-ql ul.root ul > li > a.selected {
	padding-left:20px !important;
}
.s4-ql ul.root ul > li > a:hover
{
	background-color:#D1DCE7;
}
.s4-ql A.selected
{
	/*color:#000 !important;	*/
	background-color:#799ABA;
	background-image:none;
}
.s4-ql li.static, .soi-content .ms-quickLaunch li .item {
	background-color:#D1DCE7;
}
.soi-content .ms-quickLaunch h2 {
	padding:10px 20px 10px 10px;
	margin:0px;
}
.soi-content .ms-quickLaunch .dfwp-column {
	padding-left:0px;
	float:none;
}
.soi-content .ms-quickLaunch .ms-webpart-chrome-title {
	margin-bottom:0px;
}
.soi-content .ms-quickLaunch .ms-webpart-chrome-title .js-webpart-titleCell {
	display:block;
}
/* ===================================================================================
   /END Local navigation
   =================================================================================== */

.soi-footer {
	xborder-top: 4px #5d8e0a solid;	
	border-top: 4px #3996B5 solid;	
}

.soi-footer, .soi-footer h3 {
	color:white;	
}
.soi-footer-agency {
	background-color:#343434;
}
.soi-footer-state {
	border-top: 1px #212121 solid;
	background-color:#2f2f2f;
}
/* ===================================================================================
   Home Page
   =================================================================================== */

.soi-band-1 {
	xborder-top: 4px #5d8e0a solid;	
	border-top: 4px #3996B5 solid;	
	/*background: #5b5556 url('Images/BandMain.png') no-repeat center center;*/
	background: #fff;
	margin-bottom: -20px;

}

.soi-band-1 .soi-page-title {
	background-color:#212b7d;
}
.soi-band-1 h1 {
	text-align:center;
	color:white;
	
}
.soi-band-2 {
	background: #dfdfdf url('Images/CircuitBoardBackground.png') repeat center center;
	padding-top:20px;
	xborder-top:10px #5d8e0a solid;
	border-top:10px #3996B5 solid;
	xborder-bottom:10px #5d8e0a solid;	
	box-shadow: 0 0 25px rgba(0,0,0,.6);
}
.soi-band-2 blockquote {
	background: url('Images/TransparentBackground.png') repeat transparent fixed;
	color: white;
}

.soi-band-3 {
	xborder-bottom:10px #cfcfcf solid;
}
.soi-band-3 img.media-object, .soi-band-4 img.media-object {
	width:48px;
}
.soi-band-4 {
	/*background: #efefef url('Images/beige-paper.png') repeat center center;*/
	background-color: #fff;
	border-top:3px #3996B5 solid;
	border-bottom:3px #3996B5 solid;
}

.soi-band-7 {
	background: #eee url('Images/light-sketch.png') repeat center center;
}
.soi-band-6 {
	background: #fff;
	border-bottom:3px #cfcfcf solid;
	/*border-top: 3px #202b7d dotted;*/
}
h2.soi-currentfocus-heading {
	color:#353279;
}


.soi-band-1 blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
}
.soi-band-1 blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: #666;
  text-align: center;
}
.soi-band-1 blockquote:after {
  content: "\2013 \2003" attr(cite);
  display: block;
  text-align: right;
  font-size: 0.875em;
  color: #e74c3c;
}

.soi-band-1 .soi-page-title {
	background: rgba(34,46,132,0.8)
}
.soi-band-1 h1 {
	text-align: center;
	color: white;
	text-shadow: 0px 0px 10px rgba(0,0,0,1);
}
.soi-band-1 img {
	width: 100%;
	height: auto;
}
.soi-band-1 > .container {
	width: 100%;
	padding: 0;
}
.soi-band-1 .carousel-caption {
	margin: 0;
	position: absolute;
	right: 8%;
	top: 5px;
	padding: 4px;
	height: 44px
}
.soi-band-1 .carousel-caption > h3 {
	position: absolute;
	right: 8%;
	top: 5px;
}
.soi-band-1 .carousel-description {
	display: none;
	color: #0f0f0f;
	position: absolute;
	text-shadow: none;
	vertical-align: middle;
	right: 8%;
	top: 92px;
	background-color: rgba(255,255,255,.8);
	padding: 5px;
}
.soi-band-1 .carousel-caption a, .soi-band-1 .carousel-caption a:visited, .soi-band-1 .carousel-caption a:active {
	background: url('Images/right-arrow-circular-button.png') no-repeat right center;
	padding: 2px 50px 2px 2px;
	color: #fff;
}
.soi-band-1 .carousel-caption a:hover {
	color: #a8a8a8;
	text-decoration: none;
}
.carousel-inner img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.carousel-caption > h3 {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 4px 4px 9px #000;
	background-color: rgba(0,0,0,.5);
	padding: 4px;
}
.carousel-caption a, .carousel-caption a:visited, .carousel-caption a:active {
	padding: 2px 50px 2px 2px;
	color: #fff;
}
.carousel-caption a:hover {
	color: #a8a8a8;
	text-decoration: none;
}
.carousel .item {
	padding: 0px;
}

/* ===================================================================================
   /end Home Page
   =================================================================================== */

.soi-product-cost {
	font-size:40px;
	color:#cd481f;
}
.link-item a {
	display:block;
}

.soi-4doit {
	font-size:1.3em;
	xcolor:#5c8e09;
	color: #222A7D;
	font-weight:bold;
}

.soi-footer .soi-4doit {
	font-size:1.3em;
	xcolor:#5c8e09;
	color: white;
	font-weight:bold;
}

.soi-videolisting-line1 {
    font-size: 1.2em;
}
.soi-list-blog, .soi-videolisting-row {
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px #5c8e09 solid;
}
.soi-skipnavigationdiv a { 
	position: absolute; 
	display: block; 
	left: -10000px; 
	width: auto; 
	padding: 0 0 0 6px; 
}
.soi-skipnavigationdiv a:focus, .soi-skipnavigationdiv a:active { 
	position: relative; 
	left: 0; 
}
.cbs-pictureOnTopImg {
	max-width:225px;
	max-height:225px;
}

.soi-btn-order-services {
	background-color: #3996B5;
}

.soi-btn-report-problems, .soi-btn-forms {
  background-color: #222A7D;
}

.soi-btn-manage-passwords, .soi-btn-mobile-security {
 background-color: #343434;
}
.soi-btn-contact-us {
	background-color: #3996B5;
}


.soi-nav-categories a:visited {
	color: #0071bc;
}
.soi-nav-categories .thumbnail {
border-color: #0071bc;

}
.soi-nav-categories .media-left {
	text-align: center;
}
.soi-nav-categories .fa-2x {
	width: 42px;
}

div.ellipsis {
   line-height: 1.2em;
   height: 1.2em; 
   overflow: hidden;
   max-width: 450px;   
   }
   


/* ===================================================================================
   Event Rollup styles
   =================================================================================== */
x.xslCal { margin-bottom:5px; padding-bottom:5px; border-bottom:1px #e4e4e4 solid; }
.xslCal .left{width:82px; float:left;}
.xslCal .right span{display:block;}
.xslCal .day{font-size:30px; width:78px; display:block; line-height:35px; text-align:center; background-color:#eaeaf3;}
.xslCal .title{color:#369; display:block; padding-top:3px;}

div.soi-calIcon .soi-calMonth{
	text-transform:uppercase; 
	font-size:.8em; 
	text-align:center; 
	background-color:#eaeaf3;
	padding:3px 5px 3px 5px; 
	width:68px; 
	display:block; 	
}
div.soi-calIcon .soi-calDay{
	font-size:30px; 
	width:78px; 
	display:block; 
	line-height:35px; 
	text-align:center; 
	background-color:#eaeaf3;
}
div.soi-calIcon .soi-calYear{
	text-transform:uppercase; 
	font-size:.8em; 
	text-align:center; 
	background:#222A7D; 
	color:#fff; 
	padding:3px 5px 3px 5px; 
	width:68px; 
	display:block; 	

}

#s4-workspace {
	-webkit-overflow-scrolling: touch;	
}
/* fix mobile nav */

#topnavbar .collapse.in .nav {
	/*display:block;*/
}
#topnavbar .collapse.in .ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
	background-image:none;
}
#topnavbar .collapse.in .nav ul.static >li.dynamic-children > ul.dynamic {
	display:block;
	position:relative;
	top: auto !important;
	border-width:0px;
}
.doit-cps-icons {
	padding-top:20px;
}
.doit-cps-icons p {
	padding-top:10px;
}
.doit-cps-icons a.thumbnail {
    background-color: #253e66;
    color: white;
    text-align: center;
}
/****************************************This is for the Site Locator***********************************/

#map_canvas{
	height: 400px;
	width: 100%;
	border: thin #444 solid;
}

#searchForm ul{
	list-style:none;
}

#searchForm ul > li{
	padding: 5px 0;
}

#searchForm label{
	font-weight:bold;
}

#searchResponseOffices{
	width:38%;
}

#officeLocations td ul{
	list-style:none;
}

#officeLocations label{
	font-weight:bold;
	width:251%;
}

label#error.error {
	-ms-name: "Alert";
	padding: 15px;
	margin: 20px 0;
	border-left: 5px #E31C3D solid; 
	background-color: #F9DEDE;
	display:inline-block;
	width:100%;
}


#officeLocations ul li li{
	display:none;
}

#officeLocations ul li label:nth-child(even){
	font-weight:normal;
}

h2#header{
	
	display:none;
}

li.search{
	display:inline-block;
	padding-right:30px;
}

input#searchForOffices{
	position:relative;
	bottom:6px;
}




@media (max-width: 768px) {
	div.ellipsis {
	   line-height: 1.2em;
	   height: 1.2em; 
	   overflow: hidden;
	   max-width: 250px;   
   }
	.navbar-toggle:focus {
		box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
		outline: 0; 
	}
		.ms-core-listMenu-horizontalBox {
		width:100%
	}
	
	#topnavbar li.static > .menu-item {
	
		background-color: #3C95B3;
		color: #fff;
		font-weight: 600;
		padding-left: 20px;
		border-bottom: 1px dotted #e2e2e2;
	}
	
	#topnavbar ul.dynamic {
		display:block;
	}
	#topnavbar ul.dynamic > li {
		border-top: none;
	}
	#topnavbar li.dynamic .menu-item{
		border-bottom: 1px dotted #e2e2e2;
	}
	ul.dynamic {
		background: #f5f5f5;
		border: 0px;
	}
	#topnavbar li.static > .menu-item,
	.static.dynamic-children.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode,
	.additional-background.ms-navedit-flyoutArrow.dynamic-children {
		background-color: #3C95B3;
		color: #fff;
		font-weight: 600;
	}

}


@media (min-width: 768px)
{
	.soi-currentfocus .thumbnail {
		min-height:520px;
		background-color: #fff;
	}
	.carousel-inner > .item > a > img, .carousel-inner > .item> img {
			min-height: 140px;
	}
	.ms-srch-sbLarge-fullWidth {
		width:568px;
	}
	   
}



@media (min-width: 992px) {
	.soi-currentfocus .thumbnail {
		min-height:520px;
		background-color: #fff;
	}
	h2.soi-currentfocus-heading {
		font-size:3.5em;
	}
	
	.soi-band-1 .carousel-caption {
		position: absolute;
		right: 8%;
		top: 20px;
	}
	.soi-band-1 .carousel-caption > h3 {
		position: absolute;
		right: 8%;
		top: 20px;
		padding: 13px;
	}
	.soi-band-1 .carousel-description {
		display: inline-block;
		position: absolute;
		right: 8%;
		top: 92px;
		padding: 5px;
	}
	
}
@media (min-width: 1200px)
{
	.soi-currentfocus .thumbnail {
		min-height:470px;
		background-color: #fff;
	}
	.soi-band-1 .carousel-caption {
		position: absolute;
		right: 8%;
		top: 50px;
	}
	.soi-band-1 .carousel-description {
		font-size:1.2em;
	}
	
}

/* modify the play button on non-autoplay videos */
.vjs-big-play-button {
	width: 2em !important;
	height: 2.3em !important;
	font-size: 1.75em !important;
	left: 45% !important;
	top: 45% !important;
	/*background-color:#D15956 !important;*/
	/*color: white !important;*/
}

/* Styles for the team page */
.soi-team-block {
	border-bottom: 1px solid #e2e2e2;
}

.soi-team-image {
	text-align:center;
	padding-bottom:60px;
	vertical-align: middle;
}

.soi-team-right {
	width:48%;
	float:right;
}
.soi-team-text {
	padding: 20px 0px;
}
.soi-teammember {
	font-family: "open sans condensed", sans-serif;
	font-size: 50px !important;
	line-height: 50px;
	margin: 0px;
}
.soi-teammembertitle {
	 color:#9d9d9d; 
	 font-family:'Sanchez', sans-serif; 
	 display:block; 
	 font-weight:normal; 
	 font-size:18px;  
}
.soi-teamline-sep {
	border-bottom: 4px solid #e4e4e4;
	margin: 10px 0px;
	width: 80px;
}
.soi-teammemberquote {
	padding-top: 10px;
	padding-bottom:5px;
	border-top-style: solid;
	xborder-top-color: #5D8E0A;
	border-top-color: #3996B5;
	border-top-width: 1px;
	border-bottom-style: solid;
	xborder-bottom-color: #5D8E0A;
	border-bottom-color: #3996B5;
	border-bottom-width: 1px;
	margin-bottom: 10px;
}

.soi-TransIconBackground {
	
	background-color: #b672e4;
}

.soi-video-slide {
	min-height: 360px;
}

.thumbnail .soi-sqpicture3LinesContainer > .ms-positionRelative {
	position: auto !important;
}


@media print {

	* {
	    color: #000 !important;
	    text-shadow: none !important;
	    background: transparent !important;
	    box-shadow: none !important;
	  }
	  
	.soi-ribbon-wrapper, .soi-page-breadcrumb, .soi-footer-agency, .soi-footer-state,
	 .ms-quicklaunchouter, hr  {
		display: none;
	}  
	
	header:before { 
    	content: url('Images/SiteLogo.png');
	} 
 
	.soi-article-body  {
		width: 100%; 
		margin: 0; 
		float: none;
	}
	 
	.soi-footer { border-top: 0px }
	
	body {
		font: 13pt Georgia, "Times New Roman", Times, serif;
		line-height: 1.3;
	}
	
	.navbar-header img {
		display:block !important;
	}
	
	h1 {
		font-size: 24pt;
	}
	
	h2, h3, h4 {
		font-size: 14pt;
		margin-top: 25px;
	}    
	 
	a {
	    page-break-inside:avoid
	}
	blockquote {
	    page-break-inside: avoid;
	}
	h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
	     page-break-inside:avoid }
	
	img { page-break-inside:avoid; 
	     page-break-after:avoid; }
	     
	table, pre { page-break-inside:avoid }
	ul, ol, dl  { page-break-before:avoid }
	    
	a:link, a:visited, a {
		background: transparent;
		color: #520;
		font-weight: bold;
		text-decoration: underline;
		text-align: left;
	}
	
	a {
	    page-break-inside:avoid;
	}
	
	a[href^=https]:after {
	      content:" <" attr(href) "> ";
	}
	
	$a:after > img {
	   content: "";
	}
	
	article a[href^="#"]:after {
	   content: "";
	}
	
	a:not(:local-link):after {
	   content:" <" attr(href) "> ";
	}  
 
	.soi-article-body:after {
	content: "\ Copyright © 2020 State of Illinois";
	color: #999 !important;
	font-size: 1em;
	padding-top: 50px;
	}
}