body {
	background: url("../templates/images/bg.gif") top repeat-x;
	background-color: #f6f4f2;
	margin: 0;
	padding: 0;
	font-family: arial, verdana, sans-serif;
	font-size: 80%;
	height: 100%
}

a:link {
	color: #036;
	text-decoration: underline;
}

a:visited {
	color: #636;
}

a:hover {
	color: #933;
	text-decoration: underline;
}

img {
	border: none;
}

h1, h2, h3 {
	color: #036;
	font-weight: bold;
	margin: .5em 0 .5em 0;
	padding: 0;
}

h1 {
	font-size: 1.4em;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.0em;
	font-weight: bold;
}

h4 a {
	text-decoration: none;
}

p {
	margin: 1em 0;
	line-height: 1.4em;
}

form {
	margin: 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

hr {
	clear: both;
	border: 0;
	width: 100%;
	color: #999;
	background-color: #999;
	height: 1px;
	z-index: 10;
	margin-top: 2px !important;
	padding: 0 !important;
}

* html hr {
	margin: 0;
}

.block_as_inline {
	display: inline;
}

#mainHolder {
	background-color: #fff;
	font-size: 1.2em;
	max-width: 1200px;
	width: auto;
	margin: 6px auto;
	padding: 0;
	text-align: left
}

#header, #innerHolder {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

#header {
	height: 100px;
	background-color: #fff;
	margin: 15px 0 0 0;
}

#topMenu {
	height: auto;
	background-color: #036;
	margin: 0;
	padding: 20px 0;
}

#homepage #hero {
	width: auto;
	margin: 0;
}

table#bigHolder {
	margin: 0px;
	border: 0;
	width: 100%;
}

table#bigHolder td {
	padding: 0;
	margin: 0;
	border: none;
	width: 720px;
}

#homepage #content {
	margin: 20px 10px 10px 10px;
	margin-left: 0;
	margin-right: 0;
}

#navAndBranding {
	width: 1080px;
	margin: 10px;
	border: 0;
}
* html #homepage #content {
}
* html #content { 
}

#breadcrumbs {
	margin-top: 10px;
}

/* Fixing page headline and "print,email" alignment issues */ 
div.left, div.right, div#mainpage-titles {
	margin: 0;
	padding: 0 0 10px 0;
}

* html div.left, * html div.right, * html div#mainpage-titles {
	padding: 0 !important;
}

div#mainpage-titles h1#mainpagetitle {
	margin: 0 !important;
	padding: 0 !important;
}

table#contentHolder {
	margin: 0px 0 0 0;
	padding: 0;
	width: 100%;
}

table#contentHolder td {
	padding: 0;
	margin: 0;
	border: none;
	width: 720px;
	text-align: left;
}

table#features {
	margin: 0px 5px 0 0;
	padding: 0;
	width: 720px;
}

table#features td {
	padding: 0;
	margin: 0;
	border: none;
	width: 33%;
	text-align: left;
}

table#features td.left {
	padding: 0 20px 15px 0;
}

table#features td.center {
	padding: 0 10px;
}

table#features td.right {
	padding: 0 0 0 20px;
}

div.news span {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: black;
	background: rgba(0, 0, 0, 0.6);
	padding: 4px;
	color: #fff;
	font-weight:bold;
}
div.news a.news {
	position: relative;
	width: 220px;
	height: 120px;
	 display:block;
}

div.news a:hover {
	text-decoration: underline;
}

#header img#logo {
	float: left;
	margin-left: 0px;
	border: 0;
	width: 123px;
	height: auto;
	padding-left: 10px;
}

#header #headerNav {
	text-align: right;
	margin-right: 10px;
	margin-top: -6px;
	font-size: 13px;
	line-height: 24px;
}

#header span {
	margin: 0 10px;
	color: #bbb;
}

#header #search {
	float: right;
	text-align: right;
	margin-top: 15px;
	margin-right: 10px;
	font-size: 13px;
}

#header #search input {
	margin-bottom: 5px;
	height: 1.5em;
	width: auto;
	display: inline-block;
	padding-top: 0; 
	padding-bottom: 0;
}

#header #search input#keyword {
	border: 1px #999 solid;
}

#header #utility {
	font-size: 13px;
	padding-top: 5px;
}

#bigHolder #quickLinks {
	background-color: #933;
	margin: 0;
}

#bigHolder #quickLinks ul {
	color: #fff;
	padding: 0 0 5px 60px;
	margin: 0;
	margin-left: 20px;
}

#bigHolder #quickLinks a {
	color: #fff;
	text-decoration: none;
}

#bigHolder #quickLinks a:visited {
	color: #fff;
	text-decoration: none;
}

#bigHolder #quickLinks a:hover {
	color: #fff;
	text-decoration: underline;
}

#bigHolder #quickLinks li {
	margin: .25em 0;
	padding-bottom: 3px;
	background-color: #933;
}

#bigHolder #quickLinks h2 {
	color: #fff;
	padding: 10px 0 0 20px;
	margin: 0;
	margin-left: 20px;
}

#bigHolder #quickLinks h3 {
	margin-top: 2px;
	padding: 5px 5px 5px 15px;
	color: white;
}

#content td ul {
	padding: 1em;
	margin: 0;
	list-style-type: square;
}

#rightCol {
	margin: 0;
}

#rightCol h2 {
	background-color: #036;
	color: #fff;
	padding: 5px 5px 5px 15px;
	margin: 0;
}

#rightCol h3 {
	background-color: #036;
	color: #fff;
	padding: 5px 5px 5px 15px;
	/*margin: 0 0 8px 0;*/
}

#rightCol h4 {
	color: #036;
	font-size: 1.1em;
	padding-bottom: 0px;
	/*margin-bottom: 5px;*/
}

#content h4 {
	color: #036;
	font-size: 1.1em;
	padding-bottom: 0px;
	/*margin-bottom: 5px;*/
}

#footer h4 {
	color: #036;
	padding-bottom: 0px;
	margin-bottom: 5px;
}

#footer h4 a:link {
	color: #036;
}

#footer {
	clear: both;
	color: #333;
	margin-top: 10px;
	background-color: #f6f4f2;
	padding: 5px;
}

#footer a {
	color: #333;
	text-decoration: none;
	/*margin: .1em; */
}

#footer a:hover {
	text-decoration: underline;
}

.footer-social-media-icons {
	margin: 0 -5px;
}

.footer-social-media-icons img {
	margin: 5px;
}

div.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

div.buffer {
	margin: 0;
	padding: 10px;
}

#content {
	margin-bottom: -20px;
}

.CS_Element_LinkBar {
	display: inline;
	border-style: none;
}

.CS_Textblock_Text {
	margin-bottom: 10px;
}

table td table td img {
	border: none !important;
}

table.color-table form {
	padding: 0;
	margin: 0;
}

table.color-table table {
    margin-left: 20px;
}

#amazon p {
	margin: 0px;
	padding: 0px;
}
/* *************** */
/* Utility Styles */
/* ************** */

.clear {
	margin: 0;
	paddding: 0;
	clear: both;
}
/* CLEARFIX: Just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. (source: http://www.positioniseverything.net/easyclearing.html) */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* additional clearfix elements are in ie.css */

.clearfix {
	display: inline-block;
} /* IE fix for Mac */
/* IE fix reset for non-mac \*/ * html .clearfix {
    height: 1%;
} /* End hide from IE-mac */
/* IE hack to fix weird EM bug (http://www.positioniseverything.net/explorer/italicbug-ie.html) */
/* \*/
* html #main {
	overflow: hidden;
	o\verflow: visible;
	width: 100%;
	w\idth: auto;
	he\ight: 1%;
}

/* Callout Boxes */
.caption {
	font-size: 1.0em;
}

.caption a {
	font-size: 1.0em;
}

.image-grey {
	background: #ebebeb;
	border-style: solid;
	border-color: #ccc;
	border-width: 1px 2px 2px 1px;
	margin: 0pt 0pt 1em 1em;
	padding: .3em .6em .6em;
	float: right;
	width: 258px;
}

.image-grey img {
	text-align: center;
}

.image-white {
	padding: 4px;
	float: right;
	margin: 1em;
	width: 258px;
}

.image-white img {
	text-align: center;
	padding: 4px;
}

.credit {
	clear: both;
	display: block;
	font-size: 0.85em;
	margin: 0px 4px 3px 0px;
	text-align: right;
}

.greyBox {
	background: #ebebeb;
	border-style: solid;
	border-color: #ccc;
	border-width: 1px 2px 2px 1px;
	margin: 0pt 0pt 1em 1em;
	padding: .3em .6em .6em;
	float: right;
	width: 258px;
}

.greyBox img {
	text-align: center;
}

.callout{
	background: #f6f6f6;
	border-style: solid;
	border-color: #bbb;
	border-width: 1px;
	margin: 1.2em 0pt 1em 1em;
	padding: .5em;
}

@media (max-width: 550px) {
	.greyBox {
		display: block;
		width: auto;
		float: none;
		margin: 1em;
	}
}

.white a:link {
	color: #fff;
	text-decoration: none;
}

.white a:visited {
	color: #fff;
}

.white a:hover {
	color: #fff;
	text-decoration: underline;
}
.meetingblockcompact {
}

.imagegallery img {
	padding: 2px 10px 10px 0;
	width: 80px;
	height: 80px;
}

@media (max-width: 500px) {
	.imagegallery img {
		height: auto;
	}
}

.newsIntro {
	font-size: 120%;
	line-height: 125%;
}

/* Brand New Styles */ 

#mobileButtons {
	display: none;
}

	#mobileButtons a img {
		width: 1.1em;
		height: auto;
		margin: -3px 5px 0 0;
	}

.row {
	padding-bottom: 0.9375rem;
}

/* Calendar Stuff */
h2.calendar {
    background-color: #933;
    color:#fff;
    padding:4px;
}

.calendar-list {
    display: block; 
    overflow: hidden; 
    width: 100%; 
}

    .calendar-list-item {
        display: block; 
        overflow: hidden; 
        width: 100%; 
        padding: 10px; 
    }

     .calendar-list-item a {
         font-weight: 800; 
     }

    .calendar-list-item:nth-child(even) {
        background-color: #f1f1f1; 
    }

/* Unordered Lists */
ul.striped {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

    ul.striped li {
        display: block;
        padding: 10px;
    }

    ul.striped li:nth-child(even) {
        background-color: #efefef;
    }

/* row stripes */
.row.row-gray { 
	background-color: #efefef; 
}

@media (max-width: 900px) {
	body {
        background-image: none;
	}

	#mainHolder {
        margin-top: 0;
	}

	#header {
		margin: 0;
		padding-top: 10px;
		height: auto;
		display: block;
		width: 100%;
		overflow: hidden;
	}

	#header img#logo {
		width: auto;
		height: 39px;
	}

	#headerNav, #utility {
		display: none;
	}
	
	#header #search {
		position: absolute;
		top: 60px;
		display: block;
		background: #fff;
		width: 100%;
		z-index: 200;
		max-height: 0px;
		overflow: hidden;
		float: none;
		transition: max-height .3s;
		margin: 0;
	}

	#header #search.search-open {
		max-height: 50px;
		border-bottom: 1px solid #cecece;
	}

	#header #search form {
		padding: 10px;
		display: block;
		overflow: hidden;
		width: 100%;
	}

	#header #search input {
		margin: 0;
		border: 1px solid #cecece;
		line-height: inherit;
	}

	#mobileButtons {
		float: right;
		display: inline-block;
	}

	#mobileButtons a {
		display: inline-block;
		overflow: hidden;
		margin: 5px 5px 0 0;
		padding: 5px 10px;
		color: #333;
      text-decoration: none;
	}

	#topMenu {
		background-color: #fff;
		position: relative;
		height: auto;
		padding: 0;
		margin-top: 10px;
		overflow: hidden;
	}
}

#nav {
	margin: 0;
	padding: 0;
	background-color: #036;
	list-style-type: none;
	display: table;
    width: 100%;
}
#nav, #nav ul {
	padding: 0;
	margin: 0;
    list-style: none;
}

.unit-page #nav {
	position: absolute;
    left: -100000px; 
}

#nav > li {
	display: table-cell;
	float: none;
    text-align: center;
}

#nav > li a {
	color: white;
	font-size: 1.25em;
    text-decoration: none;
}

#nav > li a:hover {
	color: #cccccc;
}

#nav li ul li {
    text-align: left;
}

li#apsSitesMobile,
#nav > li.apsUtilitiesMobile {
    display: none;
}

#nav li li a.js-menu-back-link {
    display: none;
}

#nav li a {
    display: block;
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	margin-left: 3px;
    // z-index: 200;
	max-height: 1500px;
    transition: max-height .5s;
}
* html #nav li ul {
	top: 157px;
    margin-left: 2px;
}/*something different*/
* html #nav li ul, * html #homepage #nav li ul {
	top: 157px;
    margin-left: 2px;
}/*something different*/
#nav li li {
	background: #ccc;
	color: #000;
    width: 10em;
}

#nav li li a {
	display: block;
	width: 100%;
	font-size: .9em;
	color: #000;
	text-decoration: none;
	padding: .2em 0 .2em 5px;
	background-color: #ccc;
	border-right: 1px solid #000;
	border-bottom: 1px dashed #666;
	border-left: 1px solid #000;
    border-width: 1px;
}

#nav li li a:hover {
    background: #ddd;
    color: black;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
    z-index: 100;
}

#nav li:hover img {
	position: relative;
    left: -999em;
}

#nav li.sfhover img {
	position: relative;
    left: auto;
}

#leftNav {
    margin: 0;
}

#leftNav a {
	display: block;
	margin: 0;
	padding: 0;
	text-decoration: none;
    color: #000;
}
#leftNav .header {
    background-color: #036;
}

#leftNav .header h3 {
	margin-bottom: 0;
    position: relative; 
}

#leftNav .header h3 a {
	background-color: #036;
	color: white;
	display: block;
	overflow: hidden;
	margin-top: 10px;
    padding: 8px 5px;  
}

#leftNav .header h3 .left-nav-toggle {
    display: none;
}

/* Unit pages don't use header on desktop*/
.unit-page #leftNav .header {
    display: none;
}

#audience-holder #leftNav .header {
    background-color: #c63;
}
#leftNav .header img {
    margin-left: -1px;
}
#leftNav ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 20px 0;
	background: #ccc;
	max-height: 1500px;
    transition: max-height .5s;
}
#leftNav ul ul {
	background-color: #ebebeb;
	background-image: none;
    padding-bottom: 0;
}
#leftNav li {
    height: 100%;
}
#leftNav li a {
	display: block;
	padding: 5px;
    border-bottom: 1px #666 dashed;
}
#leftNav li a:hover {
    background-color: #ddd;
}
#leftNav li li a {
	border-bottom: 1px #ccc solid;
	padding-left: 15px;
	margin: 0;
    background: url(/templates/images/bullet-square.gif) 7px 50% no-repeat;
}
#leftNav li li a:hover {
    background-color: #c8d5df;
}
#leftNav li.on {
	border-bottom: none;
    font-weight: bold;
}
#leftNav li.on li {
    font-weight: normal;
}
#leftNav li.on li.on {
    background-color: #c8d5df;
}
#leftNav li li a.last {
	border-bottom: 0px #ccc solid;
	padding-left: 15px;
	padding-bottom: 2px;
	margin: 0;
    background: url(/templates/images/bullet-square.gif) 7px 50% no-repeat;
}
/** Support for the "iehover-fix.js" **/
#nav iframe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
}
/** end **/

@media (max-width: 899px) {
	.unit-page #leftNav .header {
        display: block;
	}

	#leftNav .header h3 .left-nav-toggle {
		display: inline-block;
		position: absolute;
		right: 5px;
		top: -3px;
		height: 1.5em;
		width: 1.5em;
		text-align: center;
		border-radius: 3px;
        background-color: rgba(255,255,255,.3); 
        background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-433-plus-white.png');
        background-repeat: no-repeat; 
        background-position: center; 
	}

	#leftNav ul {
		max-height: 0;
		padding: 0;
		overflow: hidden;
        transition: max-height .5s;
	}

	#leftNav.open ul {
		max-height: 1500px;
        padding: 10px;
	}

	#leftNav.open .header h3 .left-nav-toggle {
            background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-434-minus-white.png');
	}

	.unit-page #nav {
		position: relative;
        left: 0;
	}
}

@media (max-width: 1050px) {
	#nav > li a {
        font-size: 1.1em;
	}
}

@media (max-width: 900px) {
	#nav {
		display: block;
		background-color: transparent;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 1s;
        /*border-top: 1px solid #cecece;*/
        border-bottom: 1px solid #cecece;
	}

    #nav.nav-pull-left {
        /* left: -100%; */
        /* position:absolute; */
    }
	#nav.nav-open {
		height: auto;
        max-height: 1200px;
	}

	#nav li {
		display: block;
		width: 100%;
        text-align: left;
	}

	#nav > li.apsUtilitiesMobile {
        display: block;
	}

	#nav li a {
		color: #555;
		padding: 12px 10px;
		border-top: 1px solid #cecece;
        position: relative;
	}

	#nav li a:hover {
        background-color: #efefef;
	}

    #nav li:first-child > a {
        /*border-top: none;*/
    }

    li#apsSitesMobile,
    li#apsUtilitiesMobile {
        display: block;
	}

    #nav li ul,
    #nav li:hover ul,
    #nav li.sfhover ul {
		display: block;
		overflow: hidden;
		background-color: #fff;
		position: absolute;
		left: 100%;
		width: 100%;
		margin-left: 0;
		top: 0;
        /* bottom: 0; */
		transition: left .3s;
        /*border-top: 1px solid #cecece;*/
        border-bottom: 1px solid #cecece;
	}

	#nav li ul.open-menu {
        left: 0;
        width: 100%; 
        height: auto;
        z-index: 1000;
	}

    #nav li ul li,
    #nav li li a {
		width: 100%;
		background: transparent;
		color: #555;
        border: none;
	}

	#nav li li a {
		padding: 12px 10px;
		border-top: 1px solid #cecece;
        font-size: 1.1em;
	}

	li.has-child > a:after {
		content: '';
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid #cecece;
		position: absolute;
		right: 10px;
        top: 18px;
	}

	#nav li li a.js-menu-back-link {
		padding-left: 20px;
        display: block; 
	}

	#nav li li a.js-menu-back-link:before {
		content: '';
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-right: 5px solid #cecece;
		position: absolute;
		left: 10px;
        top: 18px;
	}
}

div.news-feature-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	margin: 0 -10px 10px -10px
}

div.news {
	margin: 0 10px 10px 10px;
	flex-grow: 1
}

div.news a.news {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	font-size: .9em
}

div.news a.news img {
	width: 100%;
	height: auto
}

.collapse-box {
	overflow: hidden;
	margin-bottom: 10px;
	position: relative
}

.collapse-box h3 a.collapse-box-toggle, .collapse-box h4 a.collapse-box-toggle {
	display: none;
	position: absolute;
	right: 5px;
	height: 1.5em;
	width: 1.5em;
	text-align: center;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.3);
	background-image: url("../images/glyphicons_free/glyphicons/png/glyphicons-433-plus-white.png");
	background-repeat: no-repeat;
	background-position: center
}

.collapse-box h4 a.collapse-box-toggle {
	background-image: url("../images/glyphicons_free/glyphicons/png/glyphicons-433-plus.png");
	background-size: .8em;
	background-color: rgba(100, 100, 100, 0.3);
	height: 1.2em;
	width: 1.2em
}

/* Scrollable tables */
/* Based on http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/ */
.scrollable.has-scroll {
    position:relative;
    overflow:hidden; /* Clips the shadow created with the pseudo-element in the next rule. Not necessary for the actual scrolling. */
}
.scrollable.has-scroll:after {
    position:absolute;
    top:0;
    left:100%;
    width:50px;
    height:100%;
    border-radius:10px 0 0 10px / 50% 0 0 50%;
    box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25);
    content:'';
}
/* This is the element whose content will be scrolled if necessary */
.scrollable.has-scroll > div {
    overflow-x:auto;
}

/* Add scrollbar on webkit browsers */
.scrollable > div::-webkit-scrollbar {
    height:12px;
}
.scrollable > div::-webkit-scrollbar-track {
    box-shadow:0 0 2px rgba(0,0,0,0.15) inset;
    background:#f0f0f0;
}
.scrollable > div::-webkit-scrollbar-thumb {
    border-radius:6px;
    background:#ccc;
}

@media (max-width: 900px) {
	.collapse-box {
		max-height: 2.75em;
		transition: max-height 1s
	}

	.collapse-box h3, .collapse-box h4 {
		height: 2.2em
	}

	.collapse-box h3 a.collapse-box-toggle, .collapse-box h4 a.collapse-box-toggle {
		display: inline-block
	}

	.collapse-box h4 {
		background-color: rgba(255, 255, 255, 0.9);
		padding: 6px
	}

	.collapse-box p {
		padding: 0 6px
	}

	.collapse-box.open {
		max-height: 1200px
	}

	.collapse-box.open h3 a.collapse-box-toggle {
		background-image: url("../images/glyphicons_free/glyphicons/png/glyphicons-434-minus-white.png")
	}

	.collapse-box.open h4 a.collapse-box-toggle {
		background-image: url("../images/glyphicons_free/glyphicons/png/glyphicons-434-minus.png")
	}
}


/* Reset Table Styles -- REMOVE WHEN TABLE CLEANUP IS DONE */
table, caption, tbody, tfoot, thead, tr, th, td, tbody th, tbody td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

td {
	padding: 5px;
}

table {
	display: table;
	min-width: 0;
	width: 100%;
}

tbody tr:nth-child(even) {
	background-color: initial;
}

/* END Reset Table Styles -- REMOVE WHEN TABLE CLEANUP IS DONE */