/* rec-styles.css */

img + p {margin-top: 10px;} 

#back-top a {
    background-color: #f24b27;
    color: #FFF;
}

a {word-wrap: break-word;}


/* --------------------- */
/* PAGE BACKGROUND IMAGE */
/* --------------------- */

body {
    background-image: url('/rec/Resources/Images/grey.png')!important;
    background-repeat: repeat!important;
    background-attachment:fixed!important; 
}

/* used to display background on parallax pages */
.background-rec {
    background-image: url('/rec/Resources/Images/grey.png')!important;
    background-repeat: repeat!important;
    background-attachment:fixed!important;
}

.parallax {
    /* Set height */ 
    height: 300px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---------- */
/* FONT SIZES */
/* ---------- */

h1,
#program-detail h1,
#section-header h1 {
    font-size: 48px;
    font-weight: 400;
}

h2 {
    font-size: 40px; 
    font-weight: 400;
    color: black;
}

h3 {
    font-size: 30px;
    font-weight: 400;
    color: black;
}

h3 a.white {
    font-size: 30px;
    font-weight: 400;
    color: white;
}

h4 {
    font-size: 24px;
    font-weight: 400;
    color: black;
}

/* matches .lead properties */
.home-service-icons p,
.mpia a,
.mpia p,
.section-rec a,
.section-rec ol,
.section-rec ul,
.section-rec li a,
.background-rec p, 
.fluid-slider p, /*used in section landing pages */
#section-header p, 
.section-rec p, 
.section-rec td,
.section-rec th,
#water-safety p { 
    font-size:16px;
    font-weight:300;
    line-height:1.5;
    }

.section-rec th {font-weight: 600;}

/* matches .lead properties */
@media (min-width:768px){ 
    .home-service-icons p,
    .mpia a,
    .mpia p,
    .section-rec a,
    .section-rec ol,
    .section-rec ul,
    .section-rec li a,
    .background-rec p,
    .fluid-slider p, /*used in section landing pages */
     #section-header p,
    .section-rec p, 
    .section-rec td,
    .section-rec th,
    #water-safety p {font-size:20px;}
}

/* used in class listings for Aquatics, Camps, Classes */
.class-headers h3 {margin-bottom: 5px;}
.class-headers h3, 
.class-headers h3 a {color: #024a59;font-size: 24px;}

h2.theme1, h3.theme1 {
    color: #fff;
    background-color: #024a59;
    padding: 5px 10px;
}


h2.theme2, h3.theme2, p.theme2 {
    color: #fff;
    background-color: #027b90;
    padding: 5px 10px;
}

h2.theme3, h3.theme3, p.theme3 {
    color: #fff;
    background-color: #f24c27;
    padding: 5px 10px;
}

/* -------------- */
/* SLIDER SECTION */
/* -------------- */

/* Slider Color Themes */
    
.theme1,
.section-rec.theme1 {background-color: #ffffff;}

.theme1 .list-group-item { /* button colors */
    background-color: #0065bd;
    border: 2px solid #ffffff;
}

    .btn-theme1 {background-color: #024a59; color: #FFF;}
    .btn-theme1:hover {background-color: #404040; color: #FFF;}

.theme2,
.section-rec.theme2 {background-color: #024a59;}

.theme2 .list-group-item { /* button colors */
    background-color: #027b90;
    border: 2px solid #024a59;
}

    .list-group-theme2 {margin-bottom: 0;}

    .list-group-theme2 .list-group-item { /* button colors, like /facilities/seniorcenters/holidaypark.html */
        background-color: #027b90;
    	border-bottom: 2px solid white;
	}
	.list-group-theme2 .list-group-item:last-child {border-bottom: none;}

    .btn-theme2 {background-color: #027b90; color: #FFF;}
    .btn-theme2:hover {background-color: #404040; color: #FFF;}
	
.theme3 {background-color: #024a59;}
.theme3 .list-group-item { /* button colors */
	background-color: #f24b27;
	border: 2px solid #024a59;
}

	.list-group-theme3 .list-group-item { /* button colors, like /youthdevelopment/teenworks.html */
		background-color: #f24b27;
		border: 2px solid white;
	}

    .btn-theme3, .btn-theme3:visited {background-color: #f24b27; color: #FFF; }
    .btn-theme3:hover {background-color: #404040; color: #FFF;}
	a.btn-theme3 {font-size: 24px;} /* for contrast / accessibility */

	/* used here: /activitiesandprograms/tripstours/ */
    .section-rec.section-rec-theme3 {color: white; background-color: #024a59;}
    .section-rec.section-rec-theme3 .panel {background-color: transparent;}
    .section-rec.section-rec-theme3 .panel img {width: 280px; height: 280px;}   
    .section-rec.section-rec-theme3 .panel h3 {color: white; background-color: #027b90; padding: 5px 10px; text-align: center;}

/* white text against theme-color background */
.theme-text h2,
.theme-text h3,
.theme-text p,
.theme-text a,
.theme-text li {color: white;}
.theme-text a {text-decoration: underline;}


/* -------------------------------------------- */
/* Fluid Slider - used on section landing pages */
/* -------------------------------------------- */

.fluid-slider h1 {color: #0065bd;}

@media (min-width:1490px) {
    .fluid-slider .slider-crop { /* some images need this cropping to keep image centered */
        position: relative;
        top: -130px;
    }
}

@media (min-width:1200px) {
    .fluid-slider .carousel-inner {height:  500px!important;}
}

@media (min-width:768px) and (max-width:991px) {
    .fluid-slider .carousel-inner {height:  500px!important;}
}

.fluid-slider {color: #0065bd;}
.fluid-slider .col-md-4 {
	padding: 0 30px 0 15px;
    text-align: center;
}
.fluid-slider .list-group {
	margin-left: auto;
	margin-right: auto;
	}

@media only screen and (max-width: 1199px) {
    .fluid-slider .col-md-4 {
		padding: 0 30px;
	}
}


/*check to see if slider-fac is still used */
@media only screen and (min-width: 992px) { 
	#slider-fac .col-md-8 {padding-right: 0;}
}
@media only screen and (max-width: 991px) {
	#slider-fac .col-md-8 {margin-bottom: 20px;}
}
		
/* Slider button group */

.fluid-slider .list-group,
.list-group.list-group-theme3 {max-width: 280px;}
	
.fluid-slider .list-group-item:first-child,
.list-group-theme2 .list-group-item:first-child,
.list-group-theme3 .list-group-item:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.fluid-slider .list-group-item:last-child,
.list-group-theme2 .list-group-item:last-child,
.list-group-theme3 .list-group-item:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.fluid-slider .list-group-item, 
.list-group-theme2 .list-group-item,
.list-group-theme3 .list-group-item {text-align: center;}

.fluid-slider .list-group-item a,
.list-group-theme2 .list-group-item a,
.list-group-theme3 .list-group-item a {color: white;font-size: 24px; font-weight: 700;}

.fluid-slider .list-group-item a:hover, 
.list-group-theme2 .list-group-item a:hover,
.list-group-theme3 .list-group-item a:hover {text-decoration: none;}

.fluid-slider .list-group-item:hover,
.list-group-theme2 .list-group-item:hover,
.list-group-theme3 .list-group-item:hover {background-color: #404040;}


/* --------- */
/* Carousels */
/* --------- */

.slider,
.membership-pass {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.membership-pass .col-sm-3 {margin-bottom: 20px}
@media only screen and (min-width: 998px) {
    .membership-pass .col-sm-3 {margin-bottom: 0px}
}

.slider .col-md-8 {margin-bottom: 20px;}
@media only screen and (min-width: 998px) {
    .slider .col-md-8 {margin-bottom: 0px;}
}

.slider + p, #rec-fac-carousel + p, 
#rec-fac-carousel + .row {margin-top: 20px;}

.carousel-images .carousel-indicators { /* positions indicators at image bottom */
    top: auto;
    bottom: 10px;
	width: 20%;
	padding-left: 0;
	margin-left: -10%;
	background-color: rgba(0,0,0,.5);
}

@media (max-width: 767px) { /* positions indicators at image bottom */
    .carousel-images .carousel-indicators {
        top: auto !important;
        bottom: 10px !important;
    }
}

.carousel-images .carousel-control {
	background-color: rgba(0,0,0,.7);
	top: 45% !important;
}

.carousel-images .carousel-control.left {
    left: 0;
}

/* --------------- */
/* SUB PAGE LAYOUT */
/* --------------- */

/* Sub-pages & Events landing page */

#program-detail h1 {
    padding:  5px;
    margin: 8px 0 20px 0;
    border-top-right-radius: 10px;  
    border-top-left-radius: 10px;  
    background-color: #f24c27;

    border-bottom:5px solid #024a59;
    color:  white;}
    
#program-detail h1 + img.hero {
    border-radius: 0 0 10px 10px;
	margin-top: -20px;
}

#program-detail img.hero + p,
#program-detail img.hero + .row {margin-top: 20px;}

#section-header img {margin-bottom: 20px;}

/* General styles */


.section-rec {   /* for each page content sub-section */
    border: 1px solid #CCC;
    background-color: white;
    margin: 10px 0 30px 0;
    padding: 20px;
}

.fluid-container .section-rec {margin: 20px 0;} /* used in sections with colored background, like /camps/aquasports.html */

.section-rec p + div.row {margin-top: 40px;}

p + div.row.slider {margin-top: 15px;} /* facility detail pages: for spacing between address and slider */

.section-rec .row + .row {margin-top: 20px;}

.rec-margin-top-20 {margin-top: 20px;}
.rec-margin-left {margin-left: 10px;}
.rec-margin-bottom {margin-bottom: 10px;}
.rec-margin-bottom-20 {margin-bottom: 20px;}

/* to make equal-height columns */
@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}


/* Aquatics landing page */

#water-safety, #water-safety-aq-ctr {background-color: #f24b27; padding-bottom: 10px; margin-bottom: 10px;}
#water-safety h2, #water-safety h3 {color: white; text-align: center;}
#water-safety p {color: white; font-size: 24px; font-weight: 700;}
#water-safety .btn {background-color: #024a59; border-color: #024a59; color: white; font-weight: 700;}
#water-safety .btn:hover {background-color: #404040;}

/* Aquatics detail pages */

.aquatics .ar-nav-pills li.active a, 

.aquatics .ar-nav-pills li.active a:focus, 
.aquatics .ar-nav-pills li.active a:hover {
    background-color: #024a59;
}

.aquatics .row.aq-background h3 {background-color: #027b90; padding: 5px 10px;}
.aquatics .row.aq-background h3,
.aquatics .row.aq-background h3 a {color: white; font-size: 24px;}

/* Panels */

.panel {border-radius: 4px;
}
/* panel-theme1 example: /aquatics/competitiveprograms.html */
.panel.panel-theme1 {border-color: #024a59;}
.panel-theme1 .panel-heading, .aquatics .scuba-box {background-color: #024a59; border-color: #024a59;}
.panel-theme1 .panel-heading h2 {color: white; margin: 0;}
.panel-theme1 .onecol-panel {max-width: 350px; margin-right: 15px;} /* for images */
.panel-theme1 a + p {margin-top: 10px;}

/* panel-theme2 */
.panel.panel-theme2 {border-color: #027b90;}
.panel-theme2 .panel-heading {background-color: #027b90; border-color: #027b90;}
.panel-theme2 .panel-heading h2 {color: white; margin: 0;}

/* panel-theme3 */
.panel.panel-theme3 {border-color: #f24b27;}
.panel-theme3 .panel-heading {background-color: #f24b27; border-color: #f24b27;}
.panel-theme3 .panel-heading h2 {color: white; margin: 0;}


.aquatics .scuba-box p, .aquatics .scuba-box a {color: white;}

/* Accordion */

.accordion-aq .panel-heading {background-color: #027b90;}
.accordion-aq .panel-default .panel-heading-link a, 
.accordion-aq .panel-default .panel-plus-link a {
    color: white;
}
.accordion-theme1 .panel-heading {background-color: #027b90;}
.accordion-theme1 .panel-heading-link a, 
.accordion-theme1 .panel-plus-link a {
    color: white;
}

.accordion-theme2 .panel-heading {background-color: #024a59;}
.accordion-theme2 .panel-heading-link a, 
.accordion-theme2 .panel-plus-link a {
	color: white;
}

/* Accordion on facility pages */

.accordion-rec-fac .panel-collapse {padding: 0;}
.accordion-rec-fac .panel-collapse > .panel-body {
	padding: 15px 0 0 0;
}
.accordion-rec-fac .panel.panel-theme2 {border-radius: 4px;}

.accordion-rec-fac .panel-theme2 > .panel-body {padding-top: 0;}
.accordion-rec-fac .panel-plus-link {padding: 0px 10px;}
.accordion-rec-fac .panel-group .panel > .panel-heading.panel-plus-link a.collapsed:before {font-size: 30px;}
.accordion-rec-fac .panel-group .panel > .panel-heading.panel-plus-link a:before {font-size: 30px;}
.accordion-rec-fac .panel-plus-link h2 {font-size: 40px; display: inline;}
@media screen and (min-width:768px) {
	.accordion-rec-fac .panel-plus-link h2 {font-size: 40px;}
}
.accordion-rec-fac thead {background-color: #f5f5f5;}

/* TABLES */

.table-theme1 caption { /* uses h2 styles */
        font-size: 40px;
        font-weight: 400;
        line-height: 120%;
        color: #000;
}
.table-theme1 th {
        background-color: #024a59;
        color: white;
}

/* Classes landing page */

.landing-features img {
	height: 220px; 
	width: 200px;}
@media (min-width:992px) and (max-width:1199px) { 
        .landing-features img {
			height: 180px; 
			width: 180px;
	}
}

.camps h2, .landing-features h3 {
	text-align: center; 
	color: white; 
	background-color: #024a59; 
	padding: 5px 0;}
.landing-features .panel-default {border-color: #CCC;}


/* Therapeutic Rec landing page, Class detail pages - benefits section */

.tr-landing-features h3, 
.class-benefits h3 {color: white;}

.class-benefits h3 {
	text-align: center;
	background-color: #f24b27; 
	padding: 5px 0;
}

.tr-landing-features .panel-default, 
.class-benefits .panel-default {
    margin-top: 30px;
    border-color: #027b90;
    background-color: #027b90;
    color: white;
    border-radius: 10px;
}

.tr-landing-features .panel-body,
.class-benefits .panel-body {
	padding: 10px;
}


/* ----- Checkboxes, like on /aquatics/safetytraining.html ----- */

.fa-ul.checkboxes-rec >li {margin-left: -10px;}
.fa-ul.checkboxes-rec .fa-check-square {background-color: white; color: #f24c27;}

/* ----- for text-based bulleted lists ----- */

ul.text-based li {margin-bottom: 5px;}
ul.text-based li:last-child {margin-bottom: 0;}

/* ----- for nested text-based lists. Ex = Coffield Rec Center Facility Features ----- */
ul.text-based li ul {margin-top: 10px; list-style-type:disc;}
ul.text-based li ul li {margin-bottom: 0px;}

/* ----- adds separator line between li elements ----- */
ul.li-bottom-border li {border-bottom: 1px solid silver;}
ul.li-bottom-border li:last-child {border-bottom: none;}

/* ----- list-group-items - removes top and side borders ----- */

.list-group-border-bottom {margin-bottom: 0;}

.list-group-border-bottom .list-group-item {
    border-top: none;
    border-right: none;
    border-left: none;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
}

.list-group-border-bottom .list-group-item:last-child {border: none;}

/* ----- for tabs, like on aquatics/swimlessons.html ----- */
.with-nav-tabs {margin-top: 20px}
.with-nav-tabs .panel-heading {
    padding: 10px 15px 0 15px;
    border-bottom: none;}

.with-nav-tabs .panel-heading a {color: #555;}
@media (max-width:768px){ 
	.with-nav-tabs .panel-heading a {font-size: 24px;}
}

.with-nav-tabs.panel-default .nav-tabs > li > a:hover {color: #777; background-color: #ddd;}

.with-nav-tabs img {margin-bottom: 40px;}

/* ----- Events section ----- */

.event-details {margin: 20px -15px;}

@media (max-width: 991px) {
    .event-details .panel {margin-top: 20px;}
}

.program-panels div.col-md-6,
.program-panels div.col-md-4,
.program-panels div.col-xs-6 {
    margin-bottom: 30px;
}

/* ----- Register Now button, like on /aquatics/safetytraining.html and camp pages ----- */
.btn.btn-register-now {background-color: #f24c27; color: white; margin-bottom: 20px;}
.btn.btn-register-now:hover {background-color: #024a59;}
.btn.btn-register-now img {margin-top: 5px;}

/* ----- Sports landing page and sports sub-pages ----- */

.sports-panels h3 {
    background-color: #f24b27;
    padding: 10px;
    margin: 0;
}
.sports-panels div:hover h3 {background-color: #024a59;}
.sports-panels h3 a:hover {text-decoration: none;}

@media (max-width: 767px) {
    .sports-panels h3 a {font-size: 22px;}
}

#rec-sports-carousel {max-height: 400px; overflow: hidden;}

#rec-sports-carousel .item img {object-fit: cover;}

#rec-sports-carousel + p {margin-top: 20px;}
#rec-sports-carousel + p.sports-division {margin-top: 0;} /* used on sports detail pages with one division only */


.ar-nav-pills.sports-panels li a {
    background-color: #F3F3F3;
    border-bottom: thick solid #f24b27;
}

.ar-nav-pills.sports-panels li a:hover {
    background-color: #404040;
    color: white;
}
	
.ar-nav-pills.sports-panels li.active a,
.ar-nav-pills.sports-panels li.active a:active, 
.ar-nav-pills.sports-panels li.active a:focus,
.sports-division {
    background-color: #027b90;
	color: white;
}

/* ----- for Sports Links include file ----- */
.sports-resources {text-align: center;}
.sports-resources div {margin-bottom: 20px;}
.sports-resources img {border:  1px solid #CCC; border-radius: 10px;}
/* ----------------------------- */

table.league-important-dates th {background-color: #f24b27;}

.sports-league-info,
.sports-team-mgr-info {text-transform: uppercase;}

.sports-league-info-bkg {
	color: white;
	background-color: #ccc;
	text-align: center;
	font-size: 18px;
	padding: 10px 0;
}

.sports-division {
	border-bottom: thick solid #f24b27;
	padding: 10px;
}

.btn-sports {
    text-transform: uppercase;
    text-align: left;
    font-size: 24px;
}

/* ----- Senior Centers ----- */

.senior-center-staff .col-md-3 img {margin-top: 25px;} /* for staff photo */

/* ----- Youth Dev landing page ----- */

.youth-dev-panels img {
    border:1px solid #CCC;
    margin: 20px auto 10px auto;
    padding: 15px;}
    
.youth-dev-panels {text-align: center;}

p.yd-quote { /*for pull quotes on Youth Development pages */
    text-align: center;
    font-size: 30px;
    margin: 20px auto;
}

/* ----- Excel Beyond the Bell location listings ----- */

.ebb-list h2 {font-size: 24px;}
.ebb-list p, .ebb-list a {font-size: 14px;}
.ebb-list p {padding-bottom: 10px; border-bottom: 1px solid silver;}
.ebb-list p:last-child {border-bottom: none;}


/* ----- for bxslider, use class="section-bxslider" to hold text ----- */

@media (max-width:991px){ 
    .section-bxslider p {margin-bottom: 42px;} /*creates space below text for slider controls */
}

.bx-wrapper .bx-viewport {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bx-viewport {height: 100% !important;} /* enlarge to fit all content vs. cutting it off */

.bxslider-controls .bx-prev,
.bxslider-controls .bx-next {top: -40px;}

.bxslider-controls .bx-prev {background-color: #024a59; right: 46px;}
.bxslider-controls .bx-prev:hover {background-color: #404040;}
.bxslider-controls .bx-next {background-color: #024a59; right: 10px;}
.bxslider-controls .bx-next:hover {background-color: #404040;}

/* Swim Center slider */
.bxslider li {text-align: center;}

/* ===================================
RecAlert and Guide-Register includes
======================================*/
@media (min-width:768px) {
 #guide-register, #recalert {width:720px;}
}
@media (min-width:992px) {
 #guide-register, #recalert {width:940px;}
}
@media (min-width:1200px) {
 #guide-register, #recalert {width:1140px;}
 }
 
#recalert img {margin-top: 20px;}

#guide-register h2 {
    font-family: "Lato", "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #027b90;
    margin-top: 0;
    margin-bottom: 0;
}

#guide-register hr {
    border-top: 1px dotted gray; 
    margin-top: -1px;
}

#guide-register a.btn-block:first-child {margin-top: 20px;}
#guide-register a.btn-block + p {margin-top: 20px;}


/* ----- FACILITY LISTING PAGES ----- */

.fluid-container.theme1.facility-content {margin-top: 20px; color: white;}
	
.facility-list {text-align: center;}
	
.facility-list h2 a {font-size: 24px; font-weight: 400;}

@media only screen and (max-width:992px) {
    .facility-list .col-md-4 {margin-bottom: 40px;}
	}

/* ----- FACILITY INFORMATION SECTION - Recreation and Senior Center detail pages ----- */
.fac-info {padding: 10px;}
.fac-info h3, .fac-info a, .fac-info li, .fac-info p {color: white;}

/* for facility lightbox gallery */
#gallery #links img {width: 24%; margin-bottom: 5px;}

/* -------------- */
/* Press Releases */
/* -------------- */

#ctl00_MainContent_PanelHeaderblue .main-header {background-color: #f24c27;}

#aspnetForm .alert-info {
    background-color: #f1f1f1;
    border: solid 1px #ddd;
    color: #000;
}

#aspnetForm .btn-ar.btn-primary {
    background-color: #024a59;
    border: 1px solid #024a59;
    font-weight: bold;
    background-image: none;
}

/* ------ */
/* FOOTER */
/* ------ */

#footer-rec {
    background-color: #404040;
	margin-top: 20px;
	padding-bottom: 15px;
	}

#footer-rec h4, #footer-rec p, #footer-rec li, #footer-rec a{
	color: #fff;}

#footer-rec a:hover {
	color: #88bec5;}

#footer-rec li {margin-bottom: 5px;}

#footer-rec #mc-copyright {
    color: #FFF;
    letter-spacing: 2px;
    margin: 15px 0 5px 0;
    text-align: center;
    }
    
.goog-te-gadget { /* text on Google Translate widget */
    color: #d0d0d0;
}
.goog-te-combo { /* text in language dropdown */
    color: black;
}

/* ------------- */
/* ACCESSIBILITY */
/* ------------- */

#header-rec a:focus,
#header-rec a:focus img,
#header-rec input,
#header-rec button,
.theme1 .list-group-item a:focus {outline-color: #fef9b3 !important;}