/*  --------------- RESET STYLES --------------- */

/* EntirelyPets Pet Supplies
   License: none (public domain)
*/

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

html, body {
	height: 100%;
}

body {
	background: #ffffff;
	font: normal 100% "ep-font1", "ep-font2", Palatino, serif;
	font-weight: 500;
	color: #383734;
}

p {
	line-height: 120%;	
}

.clearfix:after, .container:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.clearfix {
	display: block;
	zoom: 1; /*IE6 and IE7*/
}

.clear {
	clear: both;	
}

a {
	text-decoration: underline;
	color: #383734;
	outline: none;
}

a[href^=tel] { 
	text-decoration: none;
}

.red {
	color:#069;
}

h1, h2 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 2.375em; /*38 / 16*/
	font-weight: 700;	
	color: #423f3b;
	line-height: 130%;
	text-transform: uppercase;
	display: inline-block;
	width: 100%;
	padding-bottom: 0.25em;	
}

h2 {
	font-size: 2em; /*36 / 16*/	
	padding-bottom: 0.35em;
}

h3 {
	font-size: 1.125em; /*20 / 16*/
	color: #F4F4F4;
	text-transform: uppercase;
}

h5 {
	font-size: 1.125em; /*18 / 16*/
	color: #069;
	line-height: 160%;
}

a.top {
	
	font-size: 0.875em; /*14 / 16*/
	padding: 18px 10px;
	color: #59574f;
	line-height: 1;
	position: absolute;
	top: -8px;
	right: 0px;
	background: #ceccc7;
	text-decoration: none;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
	behavior: url(js/PIE.htc);	
}

a.top:hover {
	background: #bcb9b3;	
}

/* --------------- SITE --------------- */

#site-container {
	max-width: 774px;
	margin: 0 auto;
	padding: 2em 0;
}

.container {
	position: relative;
}

section, .testimonial {
	width: 100%;
	padding: 2em 0;
	border-bottom: 1px #666 dashed;
}

.padded-container {
	padding: 2em;
}

/* --------------- HEADER --------------- */

header {
	width: 100%;
	position: relative;
	margin-bottom: 1em;
}

#logo {
	width: 29.56521739130435%; /* 280 - 8px for borders = 272 / 920*/
	float: left;
	text-align: center;
}

nav {
	width: 67.93478260869565%; /*625 / 920*/
	padding: 0.5em 0 0.15em 0;
	float: right;
	background: url(/images/nav_bg.gif) bottom left repeat-x;
}

nav a {
	font-family: ff-dax-compact-web-pro-1,ff-dax-compact-web-pro-2,sans-serif;
	font-size: 1.625em; /*26 / 16*/
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: #373633;
	background: #e1dfdb;
	padding: 16px 0 12px;
	width: 23.9%; /* derived from divider width - should be 23.92 but IE7 no likey cuz it sucks */
	text-align: center;
	float: left;
	line-height: 120%;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
	position: relative; /*IE8 Fix for radius*/
	behavior: url(js/PIE.htc);	
}

nav a:hover {
	color: #fff;
	background: #0f8bb4;
	text-decoration: none;	
}

nav a.doctors:hover {
	background: #fbb215;
}

nav a.services:hover {
	background: #8cac41;
}

nav a.location:hover {
	background: #ed473f;
}

nav .divider {
	float: left;	
	text-align: center;
	width: 1.44%; /*7 / 625*/
}

#csr {
	width: 67.93478260869565%; /*625 / 920*/
	padding: 0.5em 0 0.95em 0;
	float: right;
	border-bottom: 4px solid #0066ab;
}

p.phone-number {
	font-family: ff-dax-compact-web-pro-1,ff-dax-compact-web-pro-2,sans-serif;
	font-size: 1.625em; /*26 / 16*/
	font-weight: 700;
	text-transform: uppercase;
	float: right;
}

p.call {
	font-family: Georgia, Times, serif italic;
	font-size: 0.875em;
	font-style: italic;
	float: right;
	width: 200px;
	margin-right: 10px;
	text-align: center;
	line-height: 120%;
}

/* --------------- INTRO --------------- */

#intro-text {
	float: left;
	width: 59.78260869565217%; /* 550 / 920*/
}

#intro-text h1 {
	padding-bottom: 0;
}


#intro-text p {
	font-size: 1.125em; /* 18 / 16*/
}

#intro-graphic {
	float: right;
	width: 36.08695652173913%; /*332 / 920*/
}

/* --------------- ABOUT --------------- */

#about .padded-container {
	background: #fff;	
}

#about h2 {
	color: #8cac41;	
}

#about-text, #about-text a {
	color: #069;
}

/* --------------- TESTIMONIALS --------------- */

.testimonial-text {
	float: right;
	width: 70%; /* 550 / 920*/
	margin-top: 1em;
}

.testimonial-text p {
	padding: 0 6% 0 10%;
	font-family: ff-dax-compact-web-pro-1,ff-dax-compact-web-pro-2,sans-serif;
	font-size: 1.375em; /*22 / 16*/
	font-weight: 300;
	line-height: 140%;
}

.orange-quote {
	background: url(/images/quote_orange.gif) top left no-repeat;	
}

.red-quote {
	background: url(/images/quote_red.gif) top left no-repeat;
}


.testimonial-graphic {
	float: left;
	width: 30%; /*195 / 920*/
	text-align: center;
}

.author {
	font-size: 0.875em; /*14 / 16*/
	font-weight: 400;
}

/* --------------- DOCTORS --------------- */

.slider-container {
	background: #0e8bb4;
	margin-bottom: 14px;
}

.slider-container:last-child {
	margin-bottom: 0;
}

.slider-trigger {
	position: relative;
	cursor: pointer;
	background: #0e8bb4;
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
}

.slider-trigger:hover {
	background: #4aa7c6;	
}

.slider-trigger h3 {
	margin-left: 44px;
	line-height: 120%;
	padding: 10px 0;
}

.trigger-symbol {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 24px;
	height: 24px;
}

.slider-content {
	display: none;
	color: #fff;
	padding: 2.17391304347826%; /*20 / 920*/
	padding-top: 0;
}


/* --------------- SERVICES --------------- */

#services-text {
	float: left;
	width: 70%; /* 550 / 920*/
}

#services-text p {
	padding-bottom: 1em;	
}

#services-text p:last-child {
	padding-bottom: 2em;	
}

#services-graphic {
	float: right;
	width: 30%; /*195 / 920*/
	text-align: center;
}

#services .padded-container {
	background: #0066ab;	
}

#services .columns {
	background: url(/images/services_divider.gif) center top repeat-y;
}

#services-text-1, #services-text-2 {
	width: 48%;
	color: #fff;
	text-align: center;
	font-size: 1.125em; /*18 / 16*/
}

#services-text-1 {
	float: left;
}

#services-text-2 {
	float: right;
}

/* --------------- LOCATION --------------- */

#location-text {
	float: left;
	width: 48%; /* 550 / 920*/
}

#location-text p {
	padding-bottom: 1em;	
}

#location-text p:last-child {
	padding-bottom: 0;	
}

a.map {
	float: right;
	width: 48.3695652173913%; /*445 / 920*/
	margin-top: 6px;
}

.address {
	font-size: 1.125em; /*18 / 16*/ 	
}

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

footer p {
	padding-top: 1em;	
}

/* --------------- MEDIA QUERIES --------------- */

@media screen and (max-width: 920px) {
	
	#site-container {
		width: 100%;
		padding: 1em 0;
	}
	
	.container {
		width: auto;
		margin: 0 20px;	
	}
	
	.padded-container {
		padding: 1em;
		margin: 0 4px;
	}
	
	header {
		margin-bottom: 0em;
	}
	
	#logo {
		border: none;
		width: 100%;
		float: none;
	}
	
	#phone, p.phone-number, p.call {
		width: 100%;
		float: none;
	}
	
	p.phone-number {
		text-align: center;	
	}
	
	nav {
		width: 100%;
		float: none;
	}
	
	nav .container {
		width: auto;
		margin: 0 4px;	
	}
	
	nav a {
		font-size: 1.5em; /*24 / 16*/
	}
	
	/* --------------- DOCTORS --------------- */
	
	.slider-container {
		width: auto;
		margin: 0 4px 10px 4px;
	}
	
	/* --- TESTIMONIALS --- */
	
	.testimonial-text p {
		padding: 0 0 0 12%;
		font-size: 1.255em; /*20 / 16*/
	}
}

@media screen and (max-width: 800px) {
	
	p {
		line-height: 140%;	
	}
	
	h2 {
		padding-bottom: 0.25em;
	}
	
	/* --- INTRO --- */
	
	#intro-text {
		float: none;
		width: 100%;
		margin-bottom: 2em;	
	}
	
	#intro-graphic {
		float: none;
		width: 100%;
		text-align: center;	
	}
	
	/* --- TESTIMONIALS --- */
	
	.testimonial-text p {
		font-size: 1.255em; /*20 / 16*/
	}
	
	
}

@media screen and (max-width: 600px) {
	
	/* --- DOCTORS --- */
	
	.bio-pic {
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.bio-pic-container {
		display: inline-block;	
	}
	
	.bio-text {
		float: none;
		width:100%;
	}
	
	/* --- SERVICES --- */
	
	#services-text {
		float: none;
		width: 100%;
	}
	
	#services-graphic {
		display: none;	
	}
	
	/* --- LOCATION --- */

	#location-text {
		float: none;
		width: 100%
	}
	
	#location-text p:last-child {
		padding-bottom: 1.5em;	
	}
	
	a.map {
		float: none;
		width: 100%;
		display: block;
		text-align: center;
	}
	
	/* --- TESTIMONIALS --- */
	
	.testimonial-text {
		margin-top: 0px;
	}
	
	.testimonial-text p {
		display: none;
	}
	
	.testimonial-graphic {
		float: none;
		width: 100%;
		text-align: center;
	}
}


@media screen and (max-width: 480px) {
	
	#logo {
		padding-bottom: 1em;
	}
	
	nav {
		padding: 1em 0 1em 0;
	}
	
	nav .container {
		margin: 0 10px;	
	}
	
	
	nav a {
		font-size: 1.0625em; /*17 / 16*/
		text-decoration: underline;
		padding: 0.5em 0;
		width: 25%;
		text-align: center;
		outline: none;
	}
	
	nav .divider {
		display: none;
		float: none;	
	}
	
	
	
	a.top {
		top: 0px;
		padding: 14px 6px;
	}
	
	/* --- INTRO --- */
	
	#intro-text p {
		font-size: 1.0625em; /*17 / 16*/ 
	}
	
	/* --- ABOUT --- */
	
	#about h5 {
		display: none;	
	}
	
	/* --- DOCTORS --- */
	
	.slider-trigger h3 {
		font-size: 1em; /*20 / 16*/
		margin-left: 40px;
	}
	
	.trigger-symbol {
		top: 8px;
		left: 10px;
		width: 22px;
		height: 22px;
	}
	
	/* --- SERVICES --- */
	
	#services .columns {
		background: none;
	}
	
	#services-text-1, #services-text-2 {
		width: 100%;
		float: none;
		font-size: 1em;
	}
	
	/* --- LOCATION --- */
	
	.address {
		font-size: 1.0625em; /*17 / 16*/ 	
	}
	
	
}


@media screen and (max-width: 380px) {
	a.top {
		top: -2px;
		font-size: 0.75em;
		padding: 12px 6px;
	}
}

@media screen and (max-width: 320px) {
	a.top {
		top: -4px;
	}
}