/***********PAGE*-*WIDE***********/

.center {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.clearingDiv {
	clear:both;
	height:0;
}

#ContentContainer {
	margin:0 -1em -1em -2em;
	padding:1em 2em 1.5em 2em;
	background-color:white;
}

#ContentContainer #PageTitle {
	color:#305e85;
	text-transform:uppercase;
	font-size:1.25em;
}

#ContentContainerMain {
	margin:0 -1em -1em -2em;
	padding:2em 1.5em 1.75em 1.5em;
	background-color:white;
}

.COPP-two-col {
	padding-left:0;
	padding-right:1.25em;
}

#ControlBar_ControlPanel {
	z-index:1000;
}

H3, H4, H5, H6, DT  {
    color:#507EA5;
	margin-top:0;
	margin-bottom:0.25em;
}
H4 {
	font-size:1.1em;
}

.Normal {
	font-size:1em;
}

ol, ul {
	list-style:none;
}
ol.decimal {
	list-style:decimal;
}

#pagecontent-wrapper {
	background-color:transparent;
	margin-top:8em;
	margin-bottom:-2em;
	padding-bottom:0;
}
#pagecontent-wrapper #ContentContainer a,
#pagecontent-wrapper #ContentContainer li a {
	color:#507EA5;
	text-decoration:none;
}
#pagecontent-wrapper #ContentContainer a:hover,
#pagecontent-wrapper #ContentContainer li a:hover {
	color:#734C16;
	text-decoration:underline;
}
#pagecontent-wrapper #ContentContainer a:visited,
#pagecontent-wrapper #ContentContainer li a:visited {
	color:#897A67;
	text-decoration:none;
}

#pagecontent-wrapper h2 {
    font-size:medium;
	font-weight:600;
	letter-spacing:1px;
    color:#FFFFFF!important;
	text-transform:uppercase;
}

/*****************************************************************/


/***********HEADER***********/

#AgencyBanner {
	line-height:normal;
	background-color:rgba(255,255,255,0.75);
	margin:-2.1em -1em -2.25em -2em;
}
#AgencyBanner .nav-bar {
	height:2em;
	border:0;
	padding-top:0;
	margin-top:0;
}
#AgencyBanner .nav-bar li {
	background-color:#507EA5;
	border:0;
	padding:0.5em 0 0 0;
	height:2em;
}
#AgencyBanner .nav-bar li a {
	color:#FFFFFF;
	font-size:0.8em;
	text-align:center;
	line-height:1.2em;
}

#AgencyHeader {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}


#AgencyLogo img {
	max-width:175px;
	margin:1.3em 0 1em 1.5em;
}

	
#AgencyMotto {
	font-size:1.5em;
	font-family:Georgia,"Times New Roman",serif;
	font-style:italic;
	letter-spacing:1px;
	padding:1em 1em 0.75em 0;
	margin-left:1.5em;
}


#AgencyName {
	padding:0;
	margin-left:1.5em;
	margin-bottom:1em;
}
#AgencyName a{
	font-family:Georgia,"Times New Roman",serif;
	font-size:2.5em;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
}

 
#AgencyMotto a,
#AgencyName a {
	color:#305e85;
	background-color:transparent;
	text-decoration:none;
}
#AgencyMotto a:hover,
#AgencyName a:hover {
	text-decoration:none;
	color:#5584aa;
}
	
.menuPane {
	margin:0;
	padding:0;
	border:0;
	width:100%;
}


#SiteMenu {
	position:relative;
}

#SiteMenu li #menuitem a {
	max-width:100%; 
	letter-spacing:1px;
	text-align:center;
	position:absolute;      
	top:50%;
	transform:translate(0, -50%)
}


#template-header-wrapper {
	background-color:#EAF5FF;
	color:#FFFFFF;
}



/*****************************************************************/



/***********SIDE BAR***********/


#cpp_intro #portrait {
	padding:0 0 1em 1em;
	float:right;
	max-width:150px;
}
#cpp_intro p {
	line-height:1.2; 
	text-decoration:none; 
	font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
	font-weight:normal; 
	font-size:0.95em;
	padding-left:0.5em;
}
#cpp_intro figcaption {
	padding-top:0.25em;
	text-align:center;
}

/***************************/


/***********MENU BOXES ************/
/*****ONLY change items that have been commented for change*****/
.mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(99, 130, 56, 0.7); /*This changes the green background area on hover*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin: 2.325em 0em 0em 0em; /*This changes how high the green box shows. ONLY change this if the blue head area is
increased in size. */
}
/*View-First items show how the items are when first viewing the page*/
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.view-first h2{
}

.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
margin: 1em 0em;
}

.view-first a.info {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
margin: 1em 0em;
}

.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";g
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}

.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.view-first:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

/* VIEW items are the items you see when hovering over the menu item.*/
.view {
width: 100%;
margin-bottom: 1em;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff; /*This background image may be changed but keep in
mind this will load if the other fail to work/load */
}

.view img {
display: block;
position: relative;
}

.view h2 {
text-transform: uppercase; /* You may change to lowercase or normal */
color: #fff; /*You may change the color of the text. Keep in mind your header background color*/
text-align: center!important; /*You may change align to left or right */
position: relative;
font-size: 1.75em; /*You may change this but keep in mind it will need an adjustment in the header background */
padding: 0.5em; /*Spacing around the header will affect the background area and mask will need adjusted */
background: rgba(57, 94, 120, 0.9); /* You may change this to any color – this is standard DoA blue */
margin: 0em;
}

.view p {
font-family: Georgia, serif; /*This is the font type for the description text*/
font-style: italic;
font-size: 1em;
position: relative;
color: #fff; /*This color can be changed. Keep in mind the background color you have for your mask */
margin: 2.5em 0; /*This number may be adjusted to fit your text – larger number means more gap */
}

.view a {
font-family: Georgia, serif; /*This is the font type for the description text*/
font-style: normal!important;
font-size: 1em;
position: relative;
color: #fff; /*This color can be changed. Keep in mind the background color you have for your mask */
margin: 2.5em 0; /*This number may be adjusted to fit your text – larger number means more gap */
}

.view .mask {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
  display: block;
}

.view a.info { /*This section controls the “Go Now” as a link*/
display: inline-block;
text-decoration: none !important;
color: #fff !important; /*This should be the initial color of “Go Now” button text*/
text-align: center;
position: relative;
font-size: 1em; /*This changes the font size but keep in mind it will effect your other items*/
margin: 1em 0; /*This adjusts the area outside the box*/
padding: 1em; /* This adjusts the area inside the box */
  width: 100% !important; 
  height: 100% !important;
  top: 0;
  left: 0;
}

.view a.info:hover {
  color: #fff !important; /*This changes the “Go Now” to green on hover*/
  text-decoration: none !important;
}

.view .nomask{ /*This section allows the header to show when not hovered*/
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}

/*****************************************************************/


img.watermark {
    width: auto;
    height: 50%;
	max-height: 100%;
    position: absolute;
    bottom: auto;
    right: 0;
    left: 0;
    z-index: 0;
    opacity: .25;
    margin: 0 auto;
	padding:1em;
}

/********** PAGEFOOTER **********/

#pagecontent-wrapper #pagefooter {
	clear:both;
	margin:0 -1em 0 -2em;
	padding-left:0.5em;
	background-color:#507EA5;
}

#pagecontent-wrapper #pagefooter a {
	color:#CCCCCC;
	text-decoration:none;
}
#pagecontent-wrapper #pagefooter a:hover {
	text-decoration:underline;
	color:#FFFFFF;
}
#pagecontent-wrapper #pagefooter a, 
#pagecontent-wrapper #pagefooter p {
	color:#D9D9D9;
	font-size:0.9em;
}

#pagecontent-wrapper #pagefooter h2 {
	color:#EAF5FF;
	margin-bottom:0.25em;
	letter-spacing:1px;
	font-weight:normal;
}
#pagecontent-wrapper #pagefooter h3 {
	color:white;
}

#pagecontent-wrapper #pagefooter li {
	color:lightgray;
	letter-spacing:1px;
}
#pagecontent-wrapper #pagefooter ul {
	margin-left:0.5em;
}


#pagecontent-wrapper #pagefooter #dnn_Contact {
	padding-left:1em;
	border-right:thin solid white;
}
#pagecontent-wrapper #pagefooter #dnn_FeaturedLinksBlock {
	padding:0;
	margin-left:3em;
}
#pagecontent-wrapper #pagefooter #dnn_HighlightsBlock {
	padding:0;
}

ul#social {
    list-style: none;
    margin: 20px 0 0 0;
	margin-left: 0em!important;
    padding: 0;
}
ul#social li.facebook, ul#social li.twitter {
    display: inline-block;
}
ul#social li a img {
    display: block;
    height: 20px;
}
ul#social li a:hover img {
    opacity: .5;
    filter: alpha(opacity=50);
}

/*****************************************************************/


/*******************MEDIA QUERIES*******************/

@media only screen and (max-width:1493px){ /* 	width at which campaign finance disclosure gets to one line*/
	#longmask{
		margin-top:3.1em; /*This changes how high the green box shows. ONLY change this if the blue head area is
			increased in size.*/
	}
}


@media only screen and (max-width:768px){

	#AgencyBanner {
		line-height:normal;
		background-color:rgba(255,255,255,0.75);
		color:#EAF5FF;
		margin:0.5em -1em 0 -1em;
		text-align:center;
	}

	#AgencyBanner .nav-bar li {
		border-bottom:2px solid white;
		height:1em;
	}
	
	#AgencyLogo img {
		margin:auto;
		padding-top:1em;
		padding-bottom:15px;
		display:block;
		max-width:125px;
	}
	
	#AgencyMotto {
		font-size:15px;
		text-align:center;
		padding:0;
		margin-left:0;
	}
	
	#AgencyName {
		margin-left:0;
	}
	#AgencyName a {
		font-family:Georgia,"Times New Roman",serif;
		font-size:25px;
		font-weight:bold;
		text-align:center;
		text-transform:uppercase;
	}

	#ContentContainer {
		margin:11em 0 0 0;
		padding-top:2em;
		padding-bottom:0.5em;
	}

	#ContentContainerMain 	{
		margin:11em 0 0 0;
		padding-top:2.5em !important;
		padding-bottom:0.5em;
	}

	#cpp_intro #portrait figure img, 
	#cpp_intro #portrait figure figcaption {
		padding:0;
		margin:auto;
		display:block;
		max-width:75%;
	}
	
	#longmask {
		margin-top:2.05em;
	}
	
	.nav-bar li a {
		height:1em;
		margin:0;
		padding:0;
		border:0;
	}
	
 	#pagecontent-wrapper {
		margin:0;
		padding-bottom:0;
		height:auto;
		background-position:center;
		background-size:20%;
	}
		
	#pagecontent-wrapper #dnn_sidePane {
		margin-top:1em;
	}
	
 	#pagecontent-wrapper #PageTitle {
		margin:1.5em 0.5em 0.5em 0;
		padding:0;
	}
	
	#pagecontent-wrapper #pagefooter {
		width:100%;
		margin:0;
	}
	
	#pagecontent-wrapper #pagefooter #dnn_Contact,
	#pagecontent-wrapper #pagefooter #dnn_FeaturedLinksBlock,
	#pagecontent-wrapper #pagefooter #dnn_HighlightsBlock {
		padding:0;
		margin-top:1em;
		margin-left:2em !important;
		border-right:none;
	}
	
	#pagecontent-wrapper #pagefooter #dnn_HighlightsBlock {
		margin-bottom:0.75em;
	}
	img.watermark {
		height:auto;
		max-height: 100%;
	}

}


@media only screen and (max-width:1331px){
	/* removed 2019-05-08
	#AgencyBanner .nav-bar li {
		height:3em;
	}
	*/
	
	.clearingDiv {
		height:0;
		margin:0;
	}
	
	#ContentContainer {
		padding-top:0.5em;
	}
	#ContentContainerMain {
		padding-top:1.5em;
	}

}

@media only screen and (max-width:1761px){
	#AgencyBanner .nav-bar li {
		height:3em;
	} 
}


@media only screen and (max-width:1285px){
	#AgencyBanner .nav-bar li {
		height:4em;
	}
}

@media only screen and (max-width:768px){
	#AgencyBanner .nav-bar li {
		height:3em;	} 
	
}