/* Don't try this at home, kids.  This strictly for developmental
 * purposes.  @imports will be removed when code is minified for
 * production copy.
 */

@import '../global.css';

/* ===============================================
 Basic Stylings
 These will affect every size of the site.
 =============================================== */

a {
	-webkit-transition: all .28s ease;
	-moz-transition: all .28s ease;
	-ms-transition: all .28s ease;
	-o-transition: all .28s ease;
	transition: all .28s ease;
	border: 0;
	outline: 0 !important;
	-webkit-font-smoothing: antialiased;
	font-smooth: always;
}

.container {
	width: 100% !important;
	max-width: 940px;
}

/* Header */
#hd {
	padding: 28px 0;
}

.logo {
	margin: 0 11px 20px;
}

/* Patient Logins */
#logins ul {
	margin: 0;
}

#logins li, #logins li a {
	display: inline-block;
}

#logins li a {
	padding: 6px 10px;
	position: relative;
	font-size: 0.9em;
}

#logins li a#doctor-login {
	margin: 0 0 0 6px;
}

/* Social Media */
#social-media {
	padding: 0 0 17px;
}

#social-media a {
	margin: 0 2px;
	position: relative;
	display: inline-block;
	top: 0;
}

/* Addresses */
address, .address, div.address {
	margin-top: 17px;
	font-size: 1.15em;
}

address a, .address a {
	display: inline-block;
	line-height: 1.5em;
}

address a:hover, .address a:hover {
	text-decoration: none;
}

.address2 {
	margin-top: 12px;
}

address h4, .address h4 {
	font-size: 1em;
	margin-bottom: .25em;
}

address p, .address p  {
	margin: 0;
}

/* Main Nav */
#main-nav {
	text-align: center;
}

#main-nav .trigger {
	padding: 12px 0;
}

#main-nav ul li a {
	padding: 10px 0;
}

#main-nav ul li a:active {
	background: #fff;
}

/* Main Content */
#bd {
	padding: 15px;
}

.staff-photo, .doctor-photo {
	display: block;
	max-width: 80%;
	margin-bottom: 10px;
}

.meet-the-staff #bd article h3, .meet-the-team #bd article h3 {
	clear: both;
}

/* -Google Map Link Fix - Covers Google map with a link so it wont scroll */
.location-page-map-link {
	margin-bottom: 0;
	height: 20px;
	position: relative;
}

.location-page-map-link a {
	display: block;
	position: absolute;
	width: 100%;
	height: 353px;
	z-index: 10;
}

.embed-container {
	height: 300px;
	padding-bottom: 0;
}

/* Home Slideshow */
#home-banner .tagline {
	padding: 20px;
}

#home-banner .tagline h3 {
	margin-bottom: 10px;
	padding-bottom: 9px;
}

/* Callouts */
#callouts .callout {
	margin: 20px 0;
}

#callouts .callout a {
	display: block;
	padding: 12px 15px;
	line-height: 1.25;
}

/* Subnav */
.home #sidebar {
	background: none;
}

#subnav-wrap {
	padding: 15px;
	margin: 20px 0;
}

#subnav a {
	line-height: 1.8;
	padding: 0;
}

/* Footer */
#ft {
	padding: 10px 15px 0;
}

footer h3 {
	margin: 20px 0 5px;
}

footer h4 {
	margin: 13px 0 8px;
}

#ft a {
	line-height: 1.8;
}

/* Sesame link */
.sesame {
	margin: 23px 0 13px;
}
#invisalign-before-after > p, .cycle-detail span {
	display:none;
}
body.sitemap #bd ul li,
body.sitemap #bd ul ul li {
	list-style: none;
}

/* Forms */
.ie9 input[type="checkbox"], .ie9 input[type="radio"],
.ie10 input[type="checkbox"], .ie10 input[type="radio"] {
	border: none !important;
	box-sizing: content-box;
}

/* ===============================================
 Healthgrades
 =============================================== */
#healthgrades-widget {
   display:inline-block;
	position:relative;
	vertical-align:top;
	left:-3px;
}
#healthgrades-widget li {
  margin: -4px 0 0;
}
#healthgrades-widget ul ul {
	margin:-7px 0 0 -162px;
}
#healthgrades-widget ul ul li a {
	width:100%;
}


/* ===============================================
 Tablet / Desktop Stylings
 =============================================== */
@media only screen and (min-width: 48em) {
	
	#healthgrades-widget ul ul {
	margin:-7px 0 0 -162px;
}


	/* Parent Elements */
	.row > .col {
		border: 0px solid rgba(0,0,0,0);
		display: block;
		float: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-moz-background-clip: padding-box !important;
		-webkit-background-clip: padding-box !important;
		background-clip: padding-box !important;
		margin-left: 4.16666666666667%;
	}

	.row > .col:first-child {
		margin-left: 0%;
	}
	/* 12 Column Grid */
	.row > .col.span1 {
		width: 4.5138888888889%;
	}
	.row > .col.span2 {
		width: 13.194444444444%;
	}
	.row > .col.span3, .row > .col.quarter {
		width: 21.875%;
	}
	.row > .col.span4, .row > .col.third {
		width: 30.555555555556%;
	}
	.row > .col.span5 {
		width: 39.236111111111%;
	}
	.row > .col.span6, .row > .col.half {
		width: 47.916666666667%;
	}
	.row > .col.span7 {
		width: 56.597222222222%;
	}
	.row > .col.span8 {
		width: 65.277777777778%;
	}
	.row > .col.span9 {
		width: 73.958333333333%;
	}
	.row > .col.span10 {
		width: 82.638888888889%;
	}
	.row > .col.span11 {
		width: 91.319444444444%;
	}
	.row > .col.span12, .row > .col.full {
		width: 100%;
	}
	.row > .col.offset1 {
		margin-left: 8.6805555555556%;
	}
	.row > .col.offset2 {
		margin-left: 17.361111111111%;
	}
	.row > .col.offset3 {
		margin-left: 26.041666666667%;
	}
	.row > .col.offset4 {
		margin-left: 34.722222222222%;
	}
	.row > .col.offset5 {
		margin-left: 43.402777777778%;
	}
	.row > .col.offset6 {
		margin-left: 52.083333333333%;
	}
	.row > .col.offset7 {
		margin-left: 60.763888888889%;
	}
	.row > .col.offset8 {
		margin-left: 69.444444444444%;
	}
	.row > .col.offset9 {
		margin-left: 78.125%;
	}
	.row > .col.offset10 {
		margin-left: 86.805555555556%;
	}
	.row > .col.offset11 {
		margin-left: 95.486111111111%;
	}

	.logo {
		margin: 0;
	}

	address, .address, div.address {
		margin: 0;
	}

	.address2 {
		margin: 0;
	}

	.header-content {
		padding-right: 15px;
	}

	/* Logins */
	#logins li a {
		padding: 3px 8px;
		font-size: 0.75em;
	}

	/* Home Slideshow */
	#home-banner {
		height: 356px;
		z-index: 5;
	}

	#home-banner .home-slideshow {
		position: absolute;
		top: 0;
		right: 0;
		width: 940px;
	}

	#home-banner .tagline {
		position: absolute;
		padding: 40px 22px 0 20px;
		z-index: 10;
		width: 31%;
		height: 316px;
	}

	/* Main Content Section */
	#bd {
		padding-top: 30px;
		padding-bottom: 25px;
	}

	.back-to-top {
		margin: 0;
	}

	.staff-photo, .doctor-photo {
		display: inline-block;
		float: right;
		margin: 0 0 20px 20px;
		max-width: 100%;
	}

	/* Subnav */
	#sidebar {
		margin-top: 10px;
	}

	#subnav-wrap {
		padding: 15px;
		margin: 0 0 8px;
	}

	#subnav a {
		font-size: 1.05em;
	}

	/* Footer */
	#ft a {
		font-size: 1em;
	}

	.ft-logo {
		margin-top: 20px;
	}
}

/* ===============================================
 Desktop Stylings
 =============================================== */
@media only screen and (min-width: 64em) {

	/* Header */
	.header-content {
		padding-right: 0;
	}

	address, .address, div.address {
		margin-bottom: 20px;
	}

	#logins li a {
		font-size: 0.95em;
	}

	/* Navigation */
	#main-nav {
		width: 940px;
		height: 55px;
		padding: 0 21px;
		position: absolute;
		top: -32px;
		left: -21px;
	}

	#main-nav ul li, #main-nav ul li a, #main-nav ul ul li a {
		background: none !important;
	}

	#main-nav ul li {
		float: none;
	}

	#main-nav ul li a {
		padding: 11px 6px;
	}

	#main-nav ul ul {
		left: -5px;
		padding: 8px 0 10px;
		text-align: left;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
		-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
		-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
	}

	#main-nav ul ul li {
		margin: 0;
	}

	#main-nav ul ul li a {
		padding: 7px 15px;
		line-height: 1.35;
	}

	/* Main Content */
	#bd {
		padding: 30px 0;
	}

	/* Google Map Link Fix - Removes styles applied earlier for mobile/tablet fix */
	.location-page-map-link {
		height: auto;
	}

	.location-page-map-link a {
		display: inline;
		position: relative;
		width: auto;
		height: auto;
	}

	.embed-container {
		height: 0;
		padding-bottom: 45%;
	}

	/* Callouts */
	body.home #sidebar {
		padding-top: 10px;
	}

	#callouts .callout:first-child {
		margin-top: 0;
	}

}