/* Warm Friends 2020
color palette:
reinhardt, redr #c52f33;
others, redo #c52f33 (really should be #c41230);
mini-marts, blue #0b2681;
orange: #d9541e (not used); page-header, panel header bg: #e87f37; darker orange font: #c51;
bold yellow: #fff797;
orange gold (panel headers): #f7a722; (bold gold: #f1c40f; medium gold: #f8da6d;)
light yellow bg: #FFD;  ??
light gray: #e5e5e5; med gray: #999; dark/footer gray: #666;
newblue #446cb2;
cream: #FFF4C7;  ??
brown border: #443;
*/
html { font: 1em/1.5 Arial, Helvetica, sans-serif; color: #333; }
body { margin: 0; padding: 0; }

h1, h5 { margin: 0.3em 0 0.2em; font-weight: bold; }
h2 { margin: 0.1em 0 1.0em; }
h1 { font-size: 2.6em; }
h2 { font-size: 1.3em; font-weight: bold; line-height: 1.3; }
h3 { margin: 1.5em 0 1em; font-size: 1.15em; font-weight: bold; }
/*h4 { font-size: 1.0em; background: #eee9c3; } */
h4 { margin: 0.4em 0 0.2em; font-weight: bold; } /* This affects accordian panel heading. */
h5 { font-size: 1em; }
h6 { font-size: 0.8em; color: #999; font-weight: normal; }
p { margin: 0 0 25px; }
td { vertical-align: top; }

/* major sections */
#page, #header, #messages, #lower, #footer { width: 100%; margin: 0 auto; }
#header { position: relative; margin: 0 auto; } /* add max to this max-width: 980px; */
#slider-mobile { display: none; } /* This one IS no longer in the code, (hadn't figured out how to get bootslider to initiate only once). */
.bootslider .bs-container .bs-slide .bs-background img.slider-mobile { display: none; } /* This one IS in the code. */
#main { position: relative; margin: 1px auto 25px; }

#topbar { color: #FFF; }
#topbar ul { padding: 5px 0; text-align: center; margin-bottom: 0; }
#topbar li { display: block; font-size: 1.0em; font-weight: normal; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; padding: 0 2% 0; list-style: none; border-bottom: 1px solid #f1c40f; }
#topbar #topnav a { padding: 10px 0; display: inline-block; }
.navbar { min-height: 25px; margin-bottom: 1px; }
.navbar-nav > li > a { padding-top: 5px; padding-bottom: 5px; }
.navbar-inverse .navbar-nav > li > a { color: #DDD; }
.navbar-inverse-redr { background-color: #c52f33; border-color: #c52f33; }
.navbar-inverse-redo { background-color: #c52f33; border-color: #c52f33; }
#topbar .navbar-toggle { display: block; text-align: center; border: 0px solid transparent; margin: 8px auto; padding: 0; float: none; position: relative; }
#topbar #topnav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: transparent; cursor: pointer; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-inverse .navbar-collapse { border-color: #f1c40f; }
#topnav a:link, #topnav a:visited { color: #FFF; text-decoration: none; }
#topnav a:hover, #topnav a:active { color: #CCC; text-decoration: none; }

/*.alert { background: #FF0; color: #F00; font-weight: bold; font-size: 0.875em; }*/

#header { background: #FFF; }
#header a { text-decoration: none; }
#branding { margin-top: 2em;  margin-bottom: 1.0em; } /* changed 2020 */

#nav { background: #333; border-top: 2px solid #004; border-bottom: 2px solid #004; clear: both; width: 100%; }
#nav ul { margin: 0; padding: 5px 0; text-align: center; }
#nav li { display: inline; font-size: 0.9em; font-weight: bold; margin: 0; padding: 0 6px 0 4px; list-style: none; border-right: 1px solid #006; }
#nav li.last { border: none; }
#nav a:link, #nav a:visited { color: #FFF; text-decoration: none; }
#nav a:hover, #nav a:active { color: #CCC; text-decoration: none; }

/*  NAV  ===========================  background: #826f77; .current { color: #2262AD; } */
/* #access { clear: both;  position: relative; display: block; margin: 0 auto 6px; background: #333; width: 100%; border: 1px solid #014401; z-index: 100; } */
#access { margin-top: 3em; }
#access ul { font-size: 0.95em; list-style: none; margin: 0 auto; padding-left: 0; text-align: center; vertical-align: top; }
#access li { position: relative; display: inline-block; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
#access a { color: #333; display: block; line-height: 1.3em; padding: 0.5em; text-decoration: none; } /* margin: 0 0.1em; */
#access ul ul {	position: absolute; display: none; float: left; margin: 0; top: 3.3em; left: 0; z-index: 99998; }
#access ul ul li {	z-index: 99999; border-bottom: 1px solid #333; }
#access ul ul a { background-color: #666; border-bottom: 1px solid #FFF; color: #eee; font-weight: normal; height: auto; line-height: 1.2em; padding: 5px; width: 135px; } /* border-left: 1px solid #FFF; border-right: 1px solid #FFF; */
#access li:hover > a, #access ul ul :hover > a, #access a:focus { background-color: #EEE; }
#access li:hover > a, #access a:focus { color: #333; }
#access ul li:hover > ul { display: block; }

#access #menu-icon { float: right; display: none; width: 33px; height: 33px; margin-bottom: 3px; background: #666 url(image/menu-icon.png) center; border-radius: 4px; }
a:hover #menu-icon { background-color: #333; }


/*  NEW  ================================================================================================== } */
.highlight { border: 1px solid #333; border-radius: 8px; padding: 10px; 10px; 2px; 10px; margin-bottom: 10px; }
.redr { background: #c52f33; }
.redo { background: #c52f33; }
.orange { background: #e87f37; }
.melon { background: #e9592d; }
.gold { background: #F60; }
.golder { background: #f8a723; }
.rmdark { background: #6b2332; }
.orange.fa-snowflake-o { background: #6FF; }
.blue { background: #0b2681; }
.newblue { background: #446cb2; }
.red { color: #C03; } /* text */
.green { color: #090; } /* text */
.orange-text { color: #c51; }
#topbar li.orange { border-radius: 5px; padding: 3px 1%; }
.w200 { max-width: 200px; }
/*  Bootslider  ===========================  */
/* .bootslider-variableheight { margin-bottom: 0px; } this is already included in the bootslider CSS */
.bootslider { margin-bottom: 0px; } /* Had to add this for the redundant slider-mobile that is not being used but is still read. */
#bootslider p { margin-bottom: 10px; }
#bootslider a:hover { text-decoration: none; }
.bs-slide { height: 450px; }
.mobile { display: none; } /* Don't think this is used. */
.heading { margin: 10px 0 0 0; color: #fff; font-weight: bold; text-shadow: -3px 3px 8px rgba(0,0,0,0.75); font-size: 2.5em; padding-top: 3em; }
.subheading { margin-top: 0; color: #fff; font-weight: 400; text-shadow: -3px 3px 8px rgba(0,0,0,0.85); font-size: 1.5em; }
.heading.dark { color: #36C; text-shadow: -2px 2px 6px rgba(0,0,0,0.5); }
.subheading.dark { color: #039; text-shadow: -2px 2px 6px rgba(0,0,0,0.5); }
/*  Messages  =============================  */
#messages { background: #E6E6E6; padding: 2em 0 1.5em; } /* Home page only */
.messages { margin-top: 10px; margin-bottom: 10px; }
.circle { border-radius: 50%; width: 44px; color: #FFF; padding: 5px 0; float: none; margin: auto; margin-bottom: 10px; }
.message { width: 100%; float: none; margin: auto; padding-bottom: 10px; padding-left: 15px; }
.stacked { max-width: 500px; margin: 0 auto 35px; border-bottom: 1px solid #ccc; }
.nodesc h2 { margin: 0.5em 0 0.5em; }
.messages:after { clear: both; }
#lower { margin: 1em 0; }
/*  Testimonial Carousel  =============================  */
.carousel-content { align-items: center; }
.testimonial { max-width: 600px; margin: 0 auto 35px; border-bottom: 1px solid #f1c40f; }
.testimonial p { margin-bottom: 10px; font-style: italic; }
.attribution { display: block; font-size: 0.75em; text-align: right; }
.carousel-content p.attribution { margin: 0; }
.employ { margin: 25px auto 10px; padding-top: 10px; border-top: 1px solid #EEE; }
.carousel-control { padding-top: 5px; }
.bg-testi { background: #FFF4C7; }
.carousel-control { color: #FFF; } /* To override bootstrap general link color */

.testimonial p.attribution { font-style: normal; } /* not home, testimonials page(s) */
#contact { max-width: 600px; }

/*  TEXT PAGE STYLING  ====================================================================================== } */
/* h2 background */ /* border-top-right-radius: 5px; not used */
.h2bg { background: #999; color: #FFF; padding: 10px 12px 8px; margin-bottom: 25px; }
.rounded { border-top-left-radius: 5px; }
/* To indent paragraphs when h2 has background */
p.pad-side { padding: 0 5px; }
/* To bundle together for text pages, wrap with a div.freeform, h2 background must be applied separately  */
.freeform p { padding: 0 5px; } /* To indent paragraphs for h2 background padding */ /* However, if h2 padding not applied, 5 pixel indent (looks o.k.) */
.freeform img { max-width: 100%; } /* Generally also inside a paragraph tag */
/* Forms */
.form-group { margin-bottom: 10px; }
textarea { border-radius: 4px; width: 100%; }
input { border-radius: 4px; margin-bottom: 5px; }
label { font-weight: normal; }
#EmailHomeOffice { display: none; }
.reqd { background-color: #FFD; }
.nreqd { background-color: #FFF; }
.reqd, .nreqd { padding: 4px; border: 1px solid #999; border-radius: 4px; }
.formpad { padding: 5px 5px 5px 0; }
p.pad-top { padding-top: 15px; }
p.pad-left { padding-left: 50px; }
p.margin-bottom { margin-bottom: 5px; }
/* .input-group { display: inline-block; }
.input-group-addon, .input-group-btn, .input-group .form-control { display: inline; } */

/*  POSTS  ================================================================================================== } */
.post, post-short { margin: 0 30px 20px 0; padding: 15px; }
.post-short { border-bottom: 1px solid #EEE; margin: 0 30px 20px 0; padding: 15px; }
.post img { max-width: 100%; }
.post-thumb img { max-width: 300px; float: left; padding-right: 15px; }
.thumbnail h3 { margin: 10px 8px; }
.thumbnail p { margin-bottom: 10px; }
#lower .thumbnail img { margin-bottom: 5px; }
.post-meta { font-size: 0.9em; font-style: italic; padding-bottom: 15px; }

/*  NAV  ===========================  background: #826f77; .current { color: #2262AD; } */
.page-header { background: #e87f37; color: #FFF; margin: 0; padding: 20px 0 20px; }
.page-header h1 { font-weight: normal; padding-left: 10px; }
h1 small { color: #EEE; }
.breadcrumb { border-radius: 0; border-bottom: 1px solid #FFF; background-color: #FFF; margin-bottom: 30px; padding: 8px 15px; font-size: 0.9em; }
.breadcrumb > .active { color: #333; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: #f7a722; border-color: #f7a722; color: #fff; }
.hours .list-group-item.active, .hours .list-group-item.active:hover, .hours .list-group-item.active:focus { background: #999; border-color: #999; }
.warning .list-group-item.active, .warning .list-group-item.active:hover, .warning .list-group-item.active:focus { background: #c52f33; border-color: #c52f33; }
/* .warning-r .list-group-item.active, .warning-r .list-group-item.active:hover, .warning-r .list-group-item.active:focus { background: #c52f33; border-color: #c52f33; }
.warning-o .list-group-item.active, .warning-o .list-group-item.active:hover, .warning-o .list-group-item.active:focus { background: #c41230; border-color: #c41230; } */
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: #f7a722; color: #fff; }
#content .panel { border-color: #DDD; }
#content li.fa { display: block; line-height: 1.5em; }
#content ul.fa-ul { margin-left: 50px; }
.panel-heading { background-color: #e87f37; border-color: #ddd; color: #FFF; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.panel-heading h4 { padding-top: 2px; }
.collapsed .panel-heading { background-color: #999; border-color: #ddd; color: #FFF; }
.collapsed .panel-heading.golder { background-color: #f8a723; }
.collapsed .panel-heading.redr { background-color: #98012e; }
.collapsed .panel-heading.melon { background-color: #e9592d; }
.collapsed .panel-heading.redo { background-color: #ca171e; }
.collapsed .panel-heading.rmdark { background-color: #6b2332; }
.panel-title { font-size: 18px; }
.panel-heading:hover { background-color: #e87f37; }
.collapsed .panel-heading.golder:hover { background-color: #e87f37; }
.collapsed .panel-heading.redr:hover { background-color: #e87f37; }
.collapsed .panel-heading.melon:hover { background-color: #e87f37; }
.collapsed .panel-heading.redo:hover { background-color: #e87f37; }
.collapsed .panel-heading.rmdark:hover { background-color: #e87f37; }
.panel a:focus { background-color: #EEE; }
.panel-heading:hover h4 { color: #FFF; }
.panel-body { border-top: 1px solid #ddd; padding-bottom: 5px; }
.panel-body p, .panel-body h4 { margin-bottom: 10px; }
p.links { border-top: 1px solid #ddd; padding-top: 5px; margin-bottom: 5px; font-size: 0.9em; } /* where used ??? */
a.list-group-item:hover, a.list-group-item:focus { background-color: #FFD; }
.list-group-item-heading { margin-bottom: 0; margin-top: 0; }
.panel-body table { width: 100%; margin: 0 auto; }
/* #contact-widget .col { min-width: 150px; }
#facebook { padding: 8px 0 0 0; text-align: right; } */

#footer { background: #666; color: #FFF; line-height: 1.3em; } /* margin-bottom: 5px; */
#footer ul { list-style: none outside; margin: 0; padding: 0; }
#footer li { margin-top: 12px; }
#footer p, #footer li { font-size: 0.9em; }
#footer li.fine { font-size: 0.8em; }
#footer h3 { font-size: 1.3em; color: #FFF; font-weight: normal; margin: 25px 0 15px; text-align: center; }
#footer h6 { font-size: 11px; color: #FFF; font-weight: normal; margin: 5px 0; }
#footer .fa { margin-right: 15px; float: left; }
.fa-map-marker { padding: 0 4px; }
.fa-lock { padding: 0 3px; }
#warm { padding: 20px 12px; }

#zip { background-color: #E1D7C4; width: 350px; } /* is this even used? */
#zip td { padding: 0px 15px; background-color: #FFF; }
#ziplist { max-width: 34%; float: left; margin: 10px 0; } /* was 350; 10px 0 10px 10px */
#ziplist table { background-color: #999; border-collapse: inherit; border-spacing: 1px; }
#ziplist td { padding: 0px 15px; background-color: #FFF; }
#map { max-width: 65%; float: right; margin: 10px 0 10px 1%; }

/* General */
.floatleft, .formfloatleft { float: left; margin-right: 1%; }
.floatright, .formfloatright { float: right; margin-left: 1%; }
.clearboth { clear: both; }
.mobile { display: none; }
.center { text-align: center; }
/* .left { text-align: left; } */
.tiny, .caption, .fine { font-size: 0.8em; } /* Tiny used for previous and next links */
h2 small, h3 small { font-size: 80%; color: #666; }
.subnav { font-size: 0.9em; } /* Used in all subnavs */
.indent { margin-left: 40px; }
.upper { text-transform: uppercase; }
.notbold { font-weight: normal; }
.bold { font-weight: bold; }
.padleft { padding-left: 10px; }
.border, .photoborder img, iframe img { border: 1px #333 solid; }
iframe { width: 100%; margin-top: -10px; border: 1px solid #ddd; border-radius: 4px; }
iframe .i4ewOd-pzNkMb-haAclf { background-color: #f7a722; } /* This didn't work, Google MyMap top bar wrong color. */
#m-booked-weather-bl250-23907, #m-booked-weather-bl250-5712 { margin-bottom: 30px; float: left; } /* Reinhardt */
#sidebar iframe { border: none; margin: auto auto 30px; }

/*  LINKS  ================================================================================================ } */
a:link, a:visited { text-decoration: none; }
#content a:link, #content a:visited { text-decoration: underline; }
#content .panel a:link, #content .panel a:visited { text-decoration: none; }
#content .panel-body a:link, #content .panel-body a:visited { text-decoration: underline; }
#sidebar .panel-body a:link, #sidebar .panel-body a:visited { text-decoration: underline; color: #c51; }
#content .messages a:link, #content .messages a:visited { text-decoration: none; }
#content .post-content a.btn, #content .caption a.btn { text-decoration: none; }
#footer a:link, #footer a:visited { color: #FFF; text-decoration: none; }

a:hover, a:active, a:focus { text-decoration: none; color: #c51; }
.panel-body a:hover, .panel-body a:active { text-decoration: none; color: #630; }
#footer a:hover, #footer a:active { color: #CCC; text-decoration: none; }


/* Min widths */
@media (min-width: 480px) {
  #access { margin-top: 4.0em; }
  .thumbnail img { float: left; margin-right: 10px; }
  .circle { padding: 5px 0; float: left; margin-left: 10px; }
  .message { width: 87%; float: left; margin: auto; }
}
@media (min-width: 768px) {
  #topbar li { display: inline; border-bottom: 0; padding: 0 0.85%;}
  #topbar .navbar-toggle { display: none; }
  #access { margin-top: 2em; }
  #access li { height: 54px; vertical-align: middle; }
  #access a { max-width: 120px; min-width: 50px; height: 54px; }
  #access ul ul li { height: auto; }
  #access ul ul a { max-width: 135px; }
  .thumbnail img { float: none; margin: auto; }
  ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
  #messages .circle { float: none; margin: auto; margin-bottom: 10px; }
  #messages .message { width: 100%; float: none; margin: auto; }
}
@media (min-width: 992px) {
  #topbar li { padding: 0 2.5% 0; }
  #access { margin-top: 2.5em; }
  #access a { max-width: 120px; min-width: 100px; }
  #footer1 ul, #footer2 ul, #footer3 ul { margin: auto 30px auto 50px; }
  #messages .circle { float: left; }
  #messages .message { width: 82%; float: left; padding-left: 15px; }
}
@media (min-width: 1200px) {
  #access { margin-top: 3.5em; }
  #access a { max-width: 150px; min-width: 120px; }
  #access ul ul a { max-width: 165px; width: 165px; }
  #footer1 ul, #footer2 ul, #footer3 ul { margin: auto 50px auto 70px; }
}

/* Max widths */
@media screen and (max-width: 1200px){
/*  Bootslider  ===========================  */
	.subheading{ font-size: 1.3em; }
}
@media screen and (max-width: 979px){
/*  Bootslider  ===========================  */
    .heading{ font-size: 2.0em; padding-top: 1.5em; }
    .subheading{ font-size: 1.2em; font-weight: 500; }
    .bs-slide{ height: 350px; }
	#ziplist { max-width: 100%; float: none; margin: 10px auto; }
	#ziplist table { margin: auto; }
	#map { width: 100%; max-width: 100%; float: none; margin: 10px auto;  }
	#map img { width: 100%; text-align: center; margin: auto; }
}
@media only screen and (max-width: 950px) {
	#results .floatright { width: 50%; }
}
@media only screen and (max-width : 767px) {
	#access { position: relative; }
	#access #menu-icon { display: inline-block; }
	#access ul, #access:active ul { display: none; position: absolute; top: 0px; right: 50px; max-width: 160px; padding: 1px; background: #666; z-index: 99997; }
	#access li { width: 100%; padding: 0; margin: 0; }
	#access li a { color: #FFF; border-bottom: 1px solid #FFF; }
	#access:hover ul { display: block; }
	#access ul ul { top: -24px; left: -130px; width: 137px; }
	#access:hover ul ul { display: none; }
	#access ul a, #access ul ul a { width: 135px; }
/*	#slider-home { display: none; }
	#slider-mobile { display: block; width: 100%; }  These are not yet working. */
	.bootslider .bs-container .bs-slide .bs-background img.slider-home { display: none; }
	.bootslider .bs-container .bs-slide .bs-background img.slider-mobile { display: block; width: 100%; height: auto; }
	.page-header h1 { font-size: 1.75em; }
/*  Bootslider  ===========================  */
                .heading { font-size: 1.5em; padding-top: 0em; }
                .subheading { font-size: 1em; }
                .bs-slide { height: 225px; }
				.full { display: none; }
				.mobile { display: block; width: 100%; }
    #bootslider p { line-height: 1.3; }
}
@media only screen and (max-width: 650px) {
    #bootslider p { line-height: 1.2; }
}
@media only screen and (max-width: 600px) {
	h1 { font-size: 1.6em; }
	#access #menu-icon { margin-right: 2%; }
	.col { margin: 1% 0 1% 0; }
	.floatleft { float: none; width: 100%; margin-right: 0; }
	.floatright { float: none; width: 100%; margin-left: 0; }
	.w200 { max-width: 100%; }
	.mobile td, .mobile th, .p2 th, #excel td { font-size: 0.75em; hyphens: auto; }
	.post-thumb img { float: none; max-width: 100%; padding-right: 0; }
	.bgdarker { display: block; }
/*  Bootslider  ===========================  */
                .heading { font-size: 1.1em; }
                .subheading { font-size: 0.8em; }
    #bootslider p { margin-bottom: 1px; }
}
@media screen and (max-width: 479px){
/*  Bootslider  ===========================  */
	.heading { padding-top: 3em; padding-bottom: 1em; }
	.subheading { display: none; }
}
@media only screen and (max-width: 375px) {
	.page-header h1 { font-size: 1.3em; }
}