@font-face
{
	font-family: 'Gotham Rounded Book';
	src: url('/misc/GothamRnd-Book.ttf');
}
@font-face
{
	font-family: 'Gotham Rounded Light';
	src: url('/misc/GothamRnd-Light.ttf');
}

body
{
	font-family: 'Gotham Rounded Book';
	background-color: white;
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4 {line-height: initial; color: #64989E;}
h2 { margin-top: 2.0rem; }
h2, h3, h4 { margin-bottom: 0.5rem; }
h4 { margin-bottom: 0; }
li { margin: 0.5rem 0.5rem; }


/*
td, th
{
	padding: 0.3rem 0.5rem;
}
table, td, th { border-collapse: collapse; }
table { border-radius: 0.5rem; overflow:hidden; }
tr:nth-child(even) { background-color: #BAB4AE; }
tr:nth-child(odd)  { background-color: #C7C1BA; }
*/


header
{
	color: #695E4A;
	margin: 0;
	background-color: #DBD4CD;
	padding: 0;
	overflow: hidden;
}
#decpattern_above, #decpattern_below
{
	width: 100%;
	background-color: #B7E1E6;
	height: 1.5rem;
	
	background-image: url('/misc/yd_pattern.png');
	/*
	background-image: url('/misc/yd_pattern2.png');
	background-size: 1.5rem;
	*/
}
#decpattern_above { display: none; transform: rotate(180deg); }

header #logo 
{ 
	height: 2rem;
	width: auto;
	display: block;
	float: left;
	margin: 1.5rem;
}
header #locations
{
	margin:  1.5rem;
	margin-bottom: 0;
	float: right;
}
header #locations .locbox
{
	font-size: 80%;
	float: left;
	margin: 0;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
header #locations .locbox p {	margin: 0.1rem 0; }
header #locations .locbox a { font-weight: bold; color: #695E4A; }
nav
{
	clear: both;
	padding: 0 1rem 1rem 1rem;
}
nav img
{
	height: 1.0rem;
	width: auto;
	margin: 0 0.1rem -0.1rem 0.1rem;
	color: pink;
}
.navbutton
{
	display: inline-block;
	font-weight: normal;
	padding: 0.5rem 1rem;
	background-color: #695E4A;
	color: #EEE;
	text-decoration: none;
	margin: 0.2rem 0.3rem;
	text-align: center;
	border-radius: 0.3rem;
	cursor: grab;
}
.navbutton:hover
{
	background-color: #82745C;
	transition: 0.05s;
}
.navbutton:visited
{
	color: #EEE;
}
.bookbutton
{
	background-color: #72AFB6;
	color: white !important;
	/* border-bottom: 0.2rem solid #609399; */
}
.bookbutton:hover
{
	background-color: #80C4CC;
}

@media only screen and (max-width: 50rem)
{
	nav { text-align: center; margin: 0;}
	.navbutton
	{
		width: 12rem;
		overflow: hidden;
		margin: 0.3rem 0.2rem;
	}
	#decpattern_above { display: block; }
	header #logo { float: none; }
	header #locations
	{ 
		margin: 0; 
		text-align: center; 
		width: 100%;
	}
	header #locations .locbox 
	{
		float: none;
		display: inline-block;
		margin: 0.4rem;
	}
	header #locations .locbox a
	{
		font-size: 90%;
	}
}


main
{
	color: black;
	font-family: 'Gotham Rounded Book';
	line-height: 150%;
	margin: 0 auto 0 auto;
	max-width: 60rem;
	padding: 1.5rem 2rem;
}
/* main a { color: #695E4A; font-weight: bold;}
main a:visited { color: #695E4A; } */
main img
{
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	display: block;
	border-radius: 0.5rem;
}

footer
{
	font-size: 80%;
	text-align: center;
	margin: 1rem;
	color: #99896C;
}
footer #admincontrols {opacity: 0; transition: 0.5s;}
footer #admincontrols:hover {opacity: 1;}
footer #admincontrols a {color: black;}


/* Our Team page: dropdown doctors */
main details
{
	display: inline-block;
	margin: 0.5rem;
}
main details summary
{
	width: 10.5rem;
	height: 10.5rem;
	position: relative;
	overflow: hidden;
	font-size: 80%;
	cursor: pointer;
	line-height: 1rem;
}
main details summary span
{
	font-weight: bold;
	background-color: white;
	padding: 0.1rem 0.2rem 0.1rem 0;
	margin: 0;
}
main details summary img
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 0.6rem;
}
main details[open]
{
	display: block;
	background-color: #DBD4CDFF;
	padding: 1rem;
	overflow: visible;
	margin: 0.5rem 0;
	min-height: 12rem;
}
main details[open] summary
{
	display: inline;
	white-space: nowrap;
	overflow: visible;
	width: 12rem;
	height: 12rem;
}
main details[open] summary span
{
	background-color: unset;
	font-size: 1rem;
}
main details[open] summary img
{
	position: initial;
	display: block;
	z-index: 10;
	margin: 0 1rem 1rem 0;
	width: 12rem;
	height: auto;
	border-radius: 0;
	float: left;
}
main details table td
{
	padding-left: 1rem;
}
.doctimes h4
{
	margin: 1rem 0 0.5rem 0; 
}
/* Disable the little drop-down arrow on details tags. Every browser does this differently as of 2019-11 */
body details > summary { list-style: none; }
body details > summary::-webkit-details-marker { display: none; }

/* Team page: tables of times at bottom */
.doctimebox { display: inline-block; margin: 0.5rem 0.5rem 0 0;  }
.doctimebox table { table-layout: fixed;  }
.doctimebox table td { font-size: 80%; line-height: 1rem; padding:0 ;}
.doctimebox table td:first-child { width: 5rem; }
.doctimebox table td:first-child + td { width: 8.2rem;}
.doctimebox table td:first-child + td + td { width: 5rem;}


/* Maps page */
main iframe.map
{
	width: 100%;
	height: 20rem;
	border: none;
	background-color: white;
	border-radius: 0.6rem;
}

/* Parenting page */
iframe.samblog
{
	width: 100%;
	height: 150rem;
	background-color: white;
	border: none;
}

/* Front page */
#fadebox
{
	max-width: 20rem;
	height: auto;
	position: relative;
	float: right;
	margin: 1rem;
	overflow: hidden;
	border-radius: 0.5rem;
}
@media only screen and (min-width: 100rem)
{
	#fadebox
	{
		max-width: 30rem;
	}
}
@media only screen and (max-width: 50rem)
{
	#fadebox
	{
		max-width: 100%;
		width: 100%;
		margin: 0 0 1.5rem 0;
		max-height: 20rem;
		border-radius: unset;
	}
}
#fadebox img
{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}
@keyframes fadepattern1
{ 
 0%   {opacity: 1;}
 25%  {opacity: 1;}
 33%  {opacity: 0;}
 59%  {opacity: 0;}
 66%  {opacity: 0;}
 93%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes fadepattern2
{ 
 0%   {opacity: 0;}
 25%  {opacity: 0;}
 33%  {opacity: 1;}
 59%  {opacity: 1;}
 66%  {opacity: 0;}
 93%  {opacity: 0;}
 100% {opacity: 0;}
}
@keyframes fadepattern3
{ 
 0%   {opacity: 0;}
 25%  {opacity: 0;}
 33%  {opacity: 0;}
 59%  {opacity: 0;}
 66%  {opacity: 1;}
 93%  {opacity: 1;}
 100% {opacity: 0;}
}
.f1 { animation-name: fadepattern1; animation-iteration-count: infinite; animation-duration: 20s; }
.f2 { animation-name: fadepattern2; animation-iteration-count: infinite; animation-duration: 20s; }
.f3 { animation-name: fadepattern3; animation-iteration-count: infinite; animation-duration: 20s; }