body {
  padding-top: 220px; /* put content below header nav bar */
  padding-bottom: 30px;
  background-color:#f0ecdc;
  font-family: Times New Roman, Times, serif;
}

.photo-gallery-thumbs {
	width:50%;
	float:left;
}

.info-sheet {
	float:left;
	width: 100px;
	margin:20px;
}
.photo-goes-hundred-percent-mobile {
	width:400px;
	float:left;
	margin:0 20px 20px 0;
}

.covermagazines {
	padding: 15px 0 15px 0; 
	text-align: center;
	width: 100%;
	display: block;
}
.magazine {
	width: 90px; 
	padding: 0 15px 0 15px;
	
}
.addwidth {
	width: 108px;
}

/* START begin of outter wrapper for 2 columns with the appointment request on the right */

@media (min-width:1200px) {
	.container {
		width:1070px
		}
     .appointment {
		 width:220px;
		 float:left;
		 display: block;
	 }
	 .outterwrapper {
		 width: 1290px;
		 margin:0 auto;
	}
}
@media screen and (max-width:992px) {
	.container {
		width:100%;
		}
     .appointment {
		 display: none;
	 }
	 .outterwrapper {
		 width: 100%;
		 margin:0 auto;
	}
}
@media screen and (max-width:770px) {
	.container {
		width:100%;
		}
     .appointment {
		 display: none;
	 }
	 .outterwrapper {
		 width: 100%;
		 margin:0 auto;
	}
}

/* END begin of outter wrapper for 2 columns with the appointment request on the right */



 @media (min-width:780px) {
	Addign this so the drop down opens on hover vs click 
.dropdown:hover .dropdown-menu {
    display: block;
    /* margin-top: 0; // remove the gap so it doesn't close */
 }



.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
	visibility: hidden;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

}




@media screen and (max-width:992px) {
	body {
  padding-top: 200px; /* put content below header nav bar */
}
.photo-gallery-thumbs {
	width:50%;
	float:left;
}
}

@media screen and (max-width:770px) {
	body {
  padding-top: 100px; /* put content below header nav bar */
}
	.covermagazines {
	display: none;
}
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
  
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

.main-container-padding-bg {
		background-color:#fff;
		padding: 20px;
		margin-right: auto;
    	margin-left: auto;
		width:100%;
}

.navbar {
	color: #6D3D3C;
}


a {
	color: #6D3D3C;
}

h1 {
	color: #6D3D3C;
}
h2 {
	color: #6D3D3C;
}
h3 {
	color: #6D3D3C;
}
h4 {
	color: #6D3D3C;
}

div.img-dec {
	background: url(/images/css_shadow.gif) no-repeat bottom right;
	clear: right;
	float: right;
	margin: 0 0 15px 25px;
	padding: 0;
	position: relative;
}

div.img-dec img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}

div.img-ilus {
	background: url(/images/css_shadow.gif) no-repeat bottom right;
	margin: 10px 5px;
	padding: 0;
	position: relative;
	float: left; 
}

div.img-ilus img {
	background-color: #fff;
	border: 1px solid #9E8785;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
	vertical-align: bottom;
}

/* Custom colors for NAV BAR */

.navbar {
     background-image: linear-gradient(#ceb984, #ceb984 60%, #ceb984);
     background-repeat: no-repeat;
     border-bottom: 1px solid #ceb984;
     box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
     border-radius: 0px;
}

.navbar-default {
     background-color: #ceb984;
     border-color: #ceb984;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus ,
.navbar-default .navbar-nav > li > a {
     color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
     color: #FFF;
     background-color: #ceb984;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ceb984;
}

.navbar-default .navbar-toggle {
    border-color: #ceb984;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    color: #FFF;
    background-color: #6D3D3C;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a {
    background-image: linear-gradient(to bottom, #6D3D3C 0px, #6D3D3C 100%);
    background-repeat: repeat-x;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.25) inset;
}

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
    text-shadow:none;
}
.navbar-inverse .navbar-nav > li > a {
    color: #6D3D3C;
}

.navbar-inverse .navbar-brand {
    color: #6D3D3C;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #6D3D3C;
}
.navbar-inverse .navbar-toggle {
    border-color:#ceb984;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #ceb984;
	border:#fff 1px solid;
}


/* search box contents */
.thirds {
	width: 33%;
	float:left;
	text-align:center;
}
.navbar-brand {
	display:none;
	
}
.header-desktop-bgimage {
	background-image: url("/images/header_bg_18.jpg");
	width:100%;
}
.desktop-crutchfield-header {
	width: 1024px;
	margin: 0px auto;
	position:relative;
	
}
/*  START     our staff        */
.our-staff-photo {
	margin: 0 1em 1em 0;
	width: 27%;
	float:left;
}
.our-staff-photo-w {
	width:90%;
}
.our-staff-bio {
	width: 68%;
	float:left;
	margin:0 0 20px 0;
}

@media screen and (max-width:992px) {
.navbar-brand {
	display:block;
	
}
.desktop-crutchfield-header {
	display:none;
}

}

@media screen and (max-width:770px) {
	.thirds {
	width: 45%;
	float:left;
	text-align:center;
}
.navbar-brand {
	display:block;
	
}
.desktop-crutchfield-header {
	display:none;
}
.photo-gallery-thumbs {
	width:50%;
	float:left;
}
}

@media screen and (max-width:570px) {
	.thirds {
	width: 100%;
	float:left;
	text-align:center;
}
.navbar-brand {
	display:block;
	font-size:105%;
	border:1px solid #ccc;
	width: 80%;
	
}
.desktop-crutchfield-header {
	display:none;
}
.photo-gallery-thumbs {
	width:100%;
	float:left;
}
}

/* magazine pdfs footer */ 
.mag-min-height {
	min-height:130px;
}

/* overwrites */
.navbar-nav>li>a {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	margin: 10px 0;
}
..photo-goes-hundred-percent-mobile {
	width:100%;
	float:left;
	margin:0 20px 20px 0;
}


@media screen and (max-width:320px) {
	.our-staff-photo {
	margin: 0 1em 1em 0;
	width: 100%;0
	float:left;
}
.our-staff-photo-w {
	width:90%;
}
.our-staff-bio {
	width: 100%;
	float:left;
}
.photo-gallery-thumbs {
	width:100%;
	float:left;
}
.navbar-brand {
	display:block;
	font-size:90%;
	
	
}
}



/* START          Turn on <br > in Crutchfield Dermatology logo in header of website in smaller breakpoints */
@media screen and (max-width:320px) {
	.crutchfield-logo {
		width:24px;
	}
.br-logo-name {
		display:block;
		float:left;
	}
.logo-name {
		display:none;
		float:left;
	}

}

@media screen and (max-width:570px) {
.crutchfield-logo {
		width:26px;
	}
.br-logo-name {
		display:block;
		float:left;
	}
.logo-name {
		display: none;
		float:left;
	}
.covermagazines {
	visibility: hidden;
}
}

@media screen and (max-width:770px) {
	.crutchfield-logo {
		width:28px;
	}
.logo-name {
		display:block;
		float:left;
	}
.br-logo-name {
		display:none;
		float:left;
	}
}
@media screen and (max-width:992px) {
	.crutchfield-logo {
		width:30px;
	}
.logo-name {
		display:block;
		float:left;
	}
.br-logo-name {
		display:none;
		float:left;
	}

}
/* END         Turn on <br > in Crutchfield Dermatology logo in header of website  in smaller breakpoints */






