
/* SPU CSS */

/* Main Column elements max width control */
.mainColWrapper span, 
.mainColWrapper p, 
.mainColWrapper ol, 
.mainColWrapper ul, 
.mainColWrapper h1, 
.mainColWrapper h2, 
.mainColWrapper h3, 
.mainColWrapper h4, 
.topTier .bodycopy h2, 
.topTier .bodycopy h3, 
.topTier .bodycopy h4, 
.topTier .bodycopy p, 
.topTier .bodycopy span, 
#centerColumn #trumbacal, 
#mainColMain.col-md-8 table, 
#mainColMain.col-md-8 .MapComponent, 
#mainColMain.col-md-8 .TrumbaCalendarComponent, 
#mainColMain.col-md-8 .form-group, 
#mainColMain .VideoComponent, 
#mainColMain .col-md-8 div.well, 
#mainColMain .col-md-8 table, 
#mainColMain .col-md-8 hr, 
.ui-accordion-content, 
.feedContainer, 
#mainColMain h1, 
#mainColMain h2, 
#mainColMain h3, 
#mainColMain h4, 
#mainColMain h5,
 #mainColMain h6, 
 #mainColMain hr, 
 #mainColMain a, 
 #mainColMain span, 
 #mainColMain p, 
 #mainColMain ul, 
 #mainColMain ol, 
 #mainColMain dl, 
 #mainColMain dt, 
 #mainColMain dd, 
 #mainColMain .jumbotron, 
 #mainColMain .panel, 
 #mainColMain .lead, 
 #mainColMain .Excerpt, 
 #mainColMain .titleExcerptText {
    max-width: 580px;
}


/* Homepage border fix. */
.DepartmentHome .fullWidthBreadCrumbs { 
    border-bottom: 1px solid #757575; 
}


/* Left Nav Size Increase --- Move to global later*/
#leftNav {
    max-width: 95%;
}
#leftNav li { 
    padding: 0px 0px 20px 0px; 
    font-size:15px; 
}  
#leftNav a { 
    max-width: 100%;
}

#leftNav a:hover {
    padding: 0px 5px;
}
#leftNav a.activePage {
    background-color: #f1f1f1;
    padding: 5px 0px;
}

#leftNav a.activePage:hover {
    background-color: #003da5;
    padding: 5px 0px;
}

#leftNav ul>li>ul>li>a {
    color: #000;
    font-size: 15px;
}

.department #leftNav:before {
    width: 100%;
}


/* --------- KEEP TEMPORARILY / MOSTLY FOR CURRENT NAV BUT MAY BE IN CONTENT -----------  (RUN BY UX) */ 
.caps {
    text-transform: uppercase;
}



/* --------- KEEP TEMPORARILY / SOME DETAIL PAGES USE THESE ----------- (RUN BY UX) */

/* Legacy Tabs */
#mainColMain .legacyTabs {
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom:20px;
    width: 100%;
    max-width: 100%;
    clear: both; 
}
#mainColMain .legacyTabs:after {
    content: '';
    display: block;
    padding: 0px;
    width: 100%;
    clear: both; 
}
#mainColMain .legacyTabs li {
    float: left;
    margin-bottom: 0px; 
    list-style:none;
}
#mainColMain .legacyTabs a {
    border: 2px solid #000;
    display: block;
    float: left;
    padding: 8px 15px;
    margin-right: 10px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 10px;
    box-sizing: content-box; 
}
#mainColMain .legacyTabs a:hover {
    background: #003DA5 !important;
    border-color: #003DA5;
    color: #fff; 
}
#mainColMain .legacyTabs li.active a {
    background: #000;
    color: #fff; 
}
.legacyTab sp.clearFloat {
    display: none; 
}
#mainColMain .legacyTabs + p.clearFloat {
    display: none; 
}
#mainColMain .legacyTabs .Excerpt {
    display: none; 
}




/* --------- KEEP TEMPORARILY / MAINLY RIGHT COLUMN FLOATS ----------- (AFFECTS 4 PAGES) REVIEW EACH CLASS IN SECTION */

/* Floated Content */
.videoRightWithCaption {
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 10px 0 10px;
    width: 240px;
}
#rightCallout {
    border: 2px dotted #cc0000;
}
#rightCallout_branded {
    border: 2px dotted #ccc;
}
#rightCallout_branded, #rightCallout {
    padding: 30px;
    margin-bottom: 1em;
    background:#fff;
}
#rightCallout_branded h4 {
	padding: 30px 0 0 0;
}
@media (min-width: 768px) {
    #rightCallout_branded, #rightCallout {
        float: right;
        width: 33.33333%;
        margin-left: 2em;
    }
}
img.alignRight {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}
img.alignLeft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}

.imageRightWithCaption {
    border: 1px solid #ccc;
    padding: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    max-width: 200px;
    float: right;
}
.videoLeftWithText {
    clear: both;
    margin-top: 40px;
    box-sizing: content-box;
    width: 100%;
    min-height: 200px; 
}
.videoLeftWithText .videoLeft {
    float: left;
    margin-right: 20px; 
}
.homepageFeature {
    width: 100px;
    float: right;
    margin: 0 5px 0 18px;
    padding: 0 0 0 0;
}





/* --------- KEEP TEMPORARILY / SUPRESSING BULLETS ON LISTS ----------- */

/* No bullets */
#mainColMain .noBullet {
    padding:0px;
    margin:0px;
}
#mainColMain .noBullet li{
    list-style: none;
}




/* --------- KEEP TEMPORARILY / SLIDESHOWS ----------- ( SHOULD BE REMOVED / MIGRATED ) */

/* PromoSapien Sliders */
.psGroup {
    max-width:100%;
    background:#fff;
}
.psGroup #psCaption {
    padding: 10px;
    margin: 0;
}
.psGroup #psControls .button {
    line-height: 1.25em;
    height: 25px;
    width: 25px;
    margin: 5px;
}
.psGroup img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.psGroup caption {
    max-width: 100%;
}
@media (min-width:768px) {
    .psGroup {
        max-width:580px;
    }
}





/* --------- KEEP TEMPORARILY / ACCORDIONS ----------- */

/* Accordions */
#mainColMain .accordion {
    margin-bottom: 5px;
    max-width: 580px;
    position: relative; 
}
.accordion .accHeader {
    display: block;
    width: 100%;
    border: 0px;
    background: transparent;
    text-align: left;
    padding: 0px; 
}
.accordion .accHeader h2, .accordion .accHeader h3, .accordion .accHeader h4 {
    border: 1px solid #bbb;
    border-radius: 2px;
    font-size: 18px;
    display: block;
    margin: 0px;
    padding: 15px;
    padding-right: 30px;
    position: relative; 
}
.accordion .accHeader h2:hover, .accordion .accHeader h3:hover, .accordion .accHeader h4:hover {
    border: 1px solid #000;
    background: #000;
    color: #fff; 
}
.accordion .accHeader h2:after, .accordion .accHeader h3:after, .accordion .accHeader h4:after {
    content: '+';
    position: absolute;
    right: 15px;
    font-size: 30px;
    line-height: 22px;
    top: 30%; 
}
.accordion .accHeader.active h2, .accordion .accHeader.active h3, .accordion .accHeader.active h4 {
    border: 1px solid #000;
    background: #000;
    color: #fff; 
}
.accordion .accHeader.active h2:after, .accordion .accHeader.active h3:after, .accordion .accHeader.active h4:after {
    content: '-';
    right: 19px; 
}
.accordion .accBody {
    display: none;
    border: 1px solid #ccc;
    margin: -2px 0px;
    padding: 30px; 
}





/* --------- KEEP TEMPORARILY / SLIDESHOWS ----------- ( SHOULD BE REMOVED / MIGRATED ) */

/* jQuery.slideRule.css */
.srGroup {
	margin: 0;
	padding: 0;
	font-family: arial, Helvetica, sans-serif; 
	font-size: 14px;
	line-height: 1.5em;
} 
.srGroup #srFrame {
	margin: 0 auto;
	background-color: #EFEFEF;
	border: 1px solid #CCC;
	padding: 10px;
	box-sizing:content-box;
}
.srGroup a {
  outline: none;
}
.srGroup #srControls {
	margin: 0;
	position: relative;
}
.srGroup #srImage {
	border: 0;
	background-color: #EFEFEF;
}
.srGroup #srImage img {
	z-index: 100;
}
.srGroup #srImageContainer {
	background: #666 url('slideRule/load.gif') no-repeat center center;
	position: relative;
	z-index: 1;
	margin-bottom:0px;
}
.srGroup #srImagePrev {
	display: none;
	position: absolute;
	left: 0;
	background: #555 url('slideRule/bigprev.png') no-repeat center center;
	width: 60px;
	height: 80px;
	opacity: .75;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	z-index: 100;
}
.srGroup #srImagePrev:hover {
	cursor: pointer;
}
.srGroup #srImageNext {
	display: none;
	position: absolute;
	right: 0;
	background: #555 url('slideRule/bignext.png') no-repeat center center;
	width: 60px;
	height: 80px;
	opacity: .75;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
	z-index: 100;
}
.srGroup #srImageNext:hover {
	cursor: pointer;
}
.srGroup #srCaption {
	color: #FFF;
	background-color: #555;
	position: absolute;
	bottom: 4px;
	margin: 0;
	padding: 5px;
	opacity: .75;
}
.srGroup #srCaption a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
.srGroup #srCaption a:hover {
	text-decoration: underline;
}
.srGroup #srControls #srThumbs {
	position: relative;
	overflow: hidden;
	margin-bottom: 0px;
}
.srGroup #srControls #srThumbs:hover {
	cursor: pointer;
}
.srGroup #srControls #srThumbs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.srGroup #srControls #srThumbs ul li {
	display: inline;
	margin: 0;
}
.srGroup #srControls #srThumbs img {
	margin: 3px 3px 0 0;
	opacity: .65;
	filter: alpha(opacity = 65);
}
.srGroup #srControls #srThumbs img:hover,
.srGroup #srControls #srThumbs img.active  {
	opacity: 1;
	filter: alpha(opacity = 100);
}
.srGroup #srControls .nav {
	margin-top: 3px;
	width: 30px;
	position: absolute;
	background: #555;
	opacity: .75;
	z-index: 100;
}
.srGroup #srControls .nav:hover {
	cursor: pointer;
}
.srGroup #srControls #srThumbsPrev {
	left: 0;
	display: none;
	background: #555 url('slideRule/prev.png') no-repeat center center;
}
.srGroup #srControls #srThumbsNext {
	right: 0;
	display: none;
	background: #555 url('slideRule/next.png') no-repeat center center;
}
.srGroup #toggleLink {
	margin: 10px 0;
}
.srGroup #toggleLink a {
	float: right;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #CCC;
	margin: 0 0 0 5px;
	width: 100px;
	text-align: center;
	text-decoration: none;
	color: #000;
	font-weight:normal;
}
.srGroup #toggleLink a:hover {
	cursor: pointer;
	text-decoration: none;
}