body {
  padding-top: 15px; /*was 70px before*/
  padding-bottom: 15px; /*was 30px before*/
  font-family: 'Bitter', serif;
  color: #FFF;
  background-image: url(images/CRHS-bg-img.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  background-color: #efd5c3
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.dropdown-menu { /*changes dropdown menu bg color*/
	background-color: #583f2a;
}
.navbar-inverse .navbar-nav>.open>a { /*removes box shadow from around button*/
	box-shadow: none;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { /*changes font color in dropdown*/
    color: #FFF;
}

.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover { /*changes bg color of dropdown button in active state*/
    background-color: #6c4d33;
	background-image: none;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container { /*was set to auto*/
  width: 100%;
}

.navbar-collapse { /*changing opacity here makes nav bar dark brown with dark text*/
	background-color: #6c4d33;
	opacity: 1.0;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.navbar {  /*changing opacity here makes nav bar light brown with white text*/
    background-image: none;
	margin-top: 0px; /*can add margin here to push navbar down*/
}

.navbar-inverse { 
    background-color: #6c4d33; /*bg color of nav bar*/
	border-color: #080808;
	border-radius: 0px; /*removes border radius*/
	border-style: none; /*removes border*/
}

.navbar-nav { /* this puts padding to left of items in top nav bar when expanded for view on small devices */
	padding-left: 10px;
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #583f2a; /*this changes bg color of active button*/
	background-image: none; /*this gets rid of dark gray gradient bg*/
	box-shadow: none; /*removes box shadow around button*/
}

.navbar-inverse .navbar-nav>li>a { /*this changes font color of top nav menu*/
    color: #FFF;
	font-size: 16px;
}

.navbar-nav.nav-justified > li{ /*this allows nav-justified style to work, if being used*/
    float: none;
}

.container { /*makes top nav bar 100% width*/
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
}

.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:focus, 
.navbar-inverse .navbar-nav>.open>a:hover { /*changes color of open state button at top of dropdown menu*/
	background-color: #583f2a;
	background-image: none;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { /*changes bg color of dropdown buttons on hover*/
	background-color: #583f2a;
}

.mainheading {
	color: #000;
	font-size: 45px;
	padding-left: 15px;
}
@media screen and (max-width: 767px) {
	.mainheading {
		font-size: 32px;
		padding-left: 15px;
	}
}

p {
	color: #000;
}

.crhs-logo {
	padding: 10px;
}

@media screen and (max-width: 767px) { /* hides CRHS logo below 767px so it can be replace with 2 circles - CRHS logo plus Anniversary Badge */
	.crhs-logo {
		display: none;
	}
}

/* code below could be used if anniv. badge is not in header */
/* @media screen and (max-width: 767px) {
	.crhs-logo {
		width: 150px;
		height: 150px;
	}
} */

.anniv-bnr {
	padding: 10px;
}

@media screen and (max-width: 767px) {
	.anniv-bnr {
		display: none; /* visibility: hidden; works but even though item is hidden, it still takes up space */
	}
}

@media screen and (min-width: 767px) { /* hides 2 circle logos above 767px */
	.crhs-logo-n-anniv-bnr {
		display: none;
	}
}
	
.subheading { /*at very top of page in header graphic*/
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size: 32px;
	font-style: italic;
	padding-left: 15px;
}
@media screen and (max-width: 767px) {
	.subheading {
		font-size: 20px;
	}
}

.header-row {
	padding-bottom: 10px;
}

.row-w-margins {
	margin-left: 10px;
	margin-right: 10px;
}

.body-copy {
	color: #000;
	padding-bottom: 10px;
}

.body-copy a {
	color: #1a3665;
}

.subheading1 { /*sponsors*/
	font-size: 26px;
	font-weight: 700;
}

.subheading2 { /*page titles*/
	font-size: 20px;
	font-weight: 700;
}

.subheading3 { /*page subtitles*/
	font-size: 18px;
	font-weight: 700;
}

.footer-bar {
	width: 100%;
	background-color: #6c4d33;
	padding: 10px;
	min-height: 55px; /*this line and overflow line added to make bar height expand to size of content*/
	overflow: hidden;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
}

.footer-text {
	color: #FFF;
}

/*When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover*/

.footer-text a:link {
	color: #FFF;
	text-decoration: underline;
}

.footer-text a:visited {
	color: #FFF;
	text-decoration: underline;
}

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

.footer-text a:active {
	color: #FFF;
	text-decoration: underline;
	z-index: 1;
}

.pic-btm-left {
	position: fixed;
	bottom: 0;
	left: 0;
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

.pic-btm-right {
	position: fixed;
	bottom: 0;
	right: 0;
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

.iframe-container { /*makes calendar responsive*/
 	position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.iframe-container iframe { /*makes calendar responsive*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-center {
	color: #000;
}

.text-center a {
	color: #1a3665;
}

hr {
	border-color: #000;
}

@media screen and (max-width: 1000px) { /*makes map 100% column width under 1000px*/
.historical-map {
	width: 100%;
}
}

@media screen and (max-width: 455px) { /*makes pic 100% column width under 455px*/
.hundred-perc-width-below-455px {
	width: 100%;
	padding-left: 0px;
}
}

.pad-btm-10px {
	padding-bottom: 10px;
}

.pad-btm-20px {
	padding-bottom: 20px;
}

.pad-btm-n-left {
	padding-bottom: 10px;
	padding-left: 10px;
}

.pad-btm-n-right {
	padding-bottom: 10px;
	padding-right: 20px;
}

.pad-rt-20px {
	padding-right: 20px;
}

.pad-left-10px {
	padding-left: 10px;
}