/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

body {
	background-color: #fff;
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 400;
	font-size: 1em;
	color: #000;
}

.supercontainer {
	position: relative;
	float: left;
	width: 100%;
	z-index: 1;               /* z-index only works on positioned elements */
	margin-bottom: 20px;
}

.halfdivider {
	float: left;
	width: 100%;
	height: 1px;
	margin: 40px auto;
}
.halfdivider div {
	width: 50%;
	margin: 0px auto;
}

.fulldivider {
	float: left;
	width: 100%;
	height: 1px;
	margin: 20px auto;
}

.gray { border-top: 1px solid #bebebe; }

header {
	padding: 20px 0px 10px 0px;
	text-align: center;
	margin: 0px !important;
}

header .logo {
	position: relative;
	margin-top: -50px;
	z-index: 2;
}

header.home .logo {
	margin-top: -40px;
}

header .logo img {
	max-width: 90px;
}

header h1 {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;  /* specify h font or some browsers will inherit a attributes from basic h*/
	line-height: 30px;
	margin: 0px auto;
	text-align: center;
}
	
header h1 a {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: .8em;
	color: #000 !important;
	text-decoration: none;
	text-shadow: 0 0 1px rgba(0,0,0,0.2);
}

header h2 {
	margin: 15px auto 0px auto;
	padding-top: 6px;
	width: 40%;
	text-align: center;
	line-height: 30px;
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.4em;
	letter-spacing: .2em;
	color: #000 !important;
	text-decoration: none;
	border-top: 1px solid #bebebe;
}



/* NAV */

nav.supercontainer {
	background-color: #59b34d;
	position: relative;
	height: auto;
	z-index: 2;	            /* z-index only works on positioned elements */
	padding: 0px;
	margin-bottom: 0px;
}

ul#nav, ul#nav ul {
	padding: 0px;
	margin: 0px;
	text-align: center;
}

ul#nav {
	width: 80%;
	margin: 0px auto;
}

ul#nav li {
	position: relative;
	display: inline-block;
	padding: 10px 40px;
	line-height: 44px;
	margin-bottom: 0px;
	cursor: pointer;
}


ul#nav li a {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 500;
	font-size: 1.1em;
	color: #fff;
	text-decoration: none;
	letter-spacing: .3em;
	text-transform: uppercase;
	display: block; 
	height: 44px;
}

ul#nav li:hover {
	background-color: #7fde72;
}

ul#nav li:hover > a {
	color: #000;
}

ul#nav ul { 
	position: absolute;
	top: 64px;
	left: -9999px;
	padding: 5px 0px 5px 0px;
	background-color: #f3f3f3;
	border-top: 0;
	/*-moz-box-shadow:    2px 2px 2px 0px #adaeae;
  	-webkit-box-shadow: 2px 2px 2px 0px #adaeae;
  	box-shadow:         2px 2px 2px 0px #adaeae;*/
}



/* subnav */
ul#nav li:hover ul {
	left: 0px;
}

ul#nav ul li {
	padding: 0px 28px;
	white-space:nowrap;
	display: block;
	text-align: left;
}

ul#nav ul li a {
	font-family: 'Roboto', Arial, sans serif;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: .1em;
	color: #6b6c6e;
	text-transform: uppercase;
}

ul#nav ul li a:hover {
	color: #000;
}

/* phone bar */

.supercontainer.phonebar {
	background-color: #f1f1f1;
	text-align: center;
	padding: 10px 0px;	
}

.supercontainer.phonebar a {
	font-size: 1.5em;
	text-decoration: none;
	font-weight: 700;
	margin-left: 10px;
}

/* FOOTER */

footer.supercontainer {
	background-color: #339127;
	color: #a5e69d;
	margin-bottom: 0px;
	padding: 40px 0px;
}

footer .ftrLinks {
	float: left;
	margin: 20px 140px 20px 0px;
}

footer .ftrLinks:nth-child(4n) {
	margin-right: 0px;
}

footer .ftrLinks h4 {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: .05em;
	color: #fff;
	margin-bottom: 30px;
}



footer .ftrLinks a,
footer .ftrLinks li {
	color: #a5e69d;
	font-family: 'Roboto', Arial, sans serif;
	font-size: 1.1em;
	font-weight: 300;
	text-decoration: none;
	line-height: 25px;
}

footer .ftrLinks li {
	font-weight: 400;
}

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

footer .ftrLinks a.contactInfo {
	font-weight: 400;
	color: #fff;
	
}

a.social {
	margin-right: 20px;
}

.lowerfooter {
	width: 100%;
	float: left;
	border-top: 1px solid #59b34d;
	padding-top: 50px;
}

.copyright {
	
	width: 30%;
	float: left;
	margin-bottom: 5px;
	color: #6cc860;
	font-family: 'Roboto', Arial, sans serif;
	font-size: 1em;
	font-weight: 300;
}

.copyright a {
	color: #a5e69d;
	font-family: 'Roboto', Arial, sans serif;
	font-size: 1em;
	font-weight: 300;
	text-decoration: none;
	line-height: 25px;
}

.copyright a:hover {
	color: #fff;
	text-decoration: underline;
}

.affiliations {
	width: 60%;
	float: right;
	text-align: right;
}

.affiliations img {
	max-height: 60px;
	margin-left: 20px;
}

/* #Page Styles
================================================== */

/* HOME */




/* hero or slideshow */

.slideshow img {
	width: 100%;
}

.sectionHdr {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.8em;
	letter-spacing: .1em;
	margin: -40px auto 40px auto;
	padding: 20px;
	/*border: 1px solid #b7b7b7;*/
	background-color: #fff;
	text-align: center;
	color: #333;
	max-width: 250px;
}

.horizBar {
	border-top: 1px solid #b7b7b7;
	width: 40%;
	margin: 0px auto;
	height: 1px;
}

/* our services */

.services {
	background-color: #f1f1f1;
	padding: 70px 0px 30px 0px;
}

.services .sectionHdr {
	background-color: #f1f1f1;
	margin: -40px auto 10px auto;
	
}

.servicesBlock {
	float: left;
	margin: 20px 34px;
}

h2.servicesText {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 300;
	font-size: 1.5em;
	color: #555;
}

.servicesBlock img {
	width: 100%;
	max-width: 350px;
}


/* welcome  */
.about {
	background-color: #fff;
	padding: 40px 0px 10px 0px;
}


.aboutBlock {
	width: 90%;
	margin: 0px auto;
	padding-bottom: 60px;
}

.aboutImg {
	float: left;
	margin: 0px 40px;
	width: 25%;
}

.aboutImg img {
	width: 100%;
	max-width: 300px;
	border: 1px solid #bebebe;
}

.aboutText {
	float: left;
	border-left: 1px solid #bebebe;
	margin: 0 0 60px 0px;
	padding: 0px 0px 0px 40px;
	width: 60%;
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 300;
	font-size: 1.1em;
	line-height: 34px;
	letter-spacing: .05em;
	color: #000;
}

p.sig {
	font-weight: 700;
	font-size: .9em;
}

p.sig span {
	color:#990000;
}

/* green dentistry */
.green {
	background-color: #f1f1f1;
	padding: 60px 0px 30px 0px;
	margin-bottom: 0px;
}


.greenBlock {
	width: 100%;
	margin: 0px auto;
	padding-bottom: 60px;
}

.greenImg {
	float: left;
	margin: 0px 10px;
	width: 25%;
}

.greenImg img {
	width: 100%;
	max-width: 300px;
}

.greenText {
	float: left;
	margin: 0 0 10px 0px;
	padding: 0px 0px 0px 50px;
	width: 65%;
}

.greenText p {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 29px;
	letter-spacing: .05em;
	color: #000;
}

.greenText p a {
	color: #339127;
	text-decoration: underline;	
}

.greenText p a:hover {
	color: #000;
}

.greenText h3 {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.8em;
	margin-bottom: 15px;
	color: #339127;
}

/* call for appointment */

.appointmentbar {
	background-color: #59b34d;
	padding: 40px 0px;
	margin-bottom: 0px !important;
	text-align: center;
}

.appointmentbar p {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.8em;
	margin-bottom: 25px;
}

.appointmentbar a {
	margin: 0px 30px;
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 400;
	font-size: 1.8em;
	line-height: 29px;
	color: #fff;
	text-decoration: none;
}

.appointmentbar a:hover {
	color: #c3fcbc;
}






/* STATIC */

#static {
	
}

#static h2 {
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.7em;
	color: #000;
	margin: 10px 0px;
	letter-spacing: .1em;
	line-height: 30px;
}

#static h3.pagehdr {
	background-color: #f1f1f1;
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.7em;
	color: #000;
	margin: 10px 0px 30px 0px;
	padding: 15px 10px 10px;
	letter-spacing: .05em;
	line-height: 30px;
}

#static h4 {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 700;
	font-size: 1.3em;
}

#static h4 a {
	color: #59b34d;
}

#static h4 a:hover {
	color: #000;
}

#static .hdrimg {
	width: 100%;
	margin-bottom: 20px;
}

#static p {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 300;
	font-size: 1.1em;
	color: #000;
	letter-spacing: .04em;
	margin: 0px 0px 20px 0px;
	line-height: 2em;
}

#static p.subtitle {
	clear: both;
	font-weight: bold;
	margin-top: 20px;
}

#static p a {
	color: #59b34d;
	text-decoration: underline;	
}

#static p a:hover {
	color: #000;
}

/* ABOUT / STAFF */


img.docImage  {
	float: left;
	width: 350px;
	margin: 0px 50px 20px 0px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #bebebe;
}

#static h4.docName {
	margin-bottom: 20px;
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.8em;
	color: #000;
	letter-spacing: .05em;

}
#static h5.docName {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 700;
	font-size: .9em;
	margin-bottom: 20px;
	line-height: 20px;
	color: #000;
}

#static h5 span {
	color: #990000;	
}

#static h4.staffName {
	margin-bottom: 20px;
	font-family: 'Playfair Display SC', Georgia, Times New Roman, serif;
	font-weight: 400;
	font-size: 1.8em;
	color: #000;
	letter-spacing: .05em;

}
#static h5.staffName {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 700;
	font-size: 1.3em;
	margin-bottom: 20px;
	line-height: 15px;
	color: #000;
}

.staffBlock {
	float: left;
	margin: 0px 0px 20px 0px;
	width: 100%;
}

img.staffImage {
	float: left;
	width: 300px;
	margin-right: 45px;
	margin-bottom: 20px;
	max-width: 330px;
	border: 1px solid #bebebe;
}


#static ul {
	list-style: circle outside none;
	padding-left: 20px;
}

#static ul li {
	padding-left: 20px;
}


/* CONTACT */

#static p.contact {
	font-size: 1.2em;

}

#static p.contact span{
	font-size: 1.3em;
    font-weight: 400;
	color: #333;
}

iframe {
	float: left;
	margin: 0px 40px 40px 0px;
	max-width: 400px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #bebebe;
}

.addressBlock {
	margin-top: 30px;
}

/* PROCEDURES */

.procedure {
	width: 100%;
	float: left;
	padding: 0px;
}

.procedure.left .procedureImg {
	float: left;
	margin-right: 70px;
}

.procedure.right .procedureImg {
	float: right;
	margin-left: 70px;
}

.procedureText {
	font-family: 'Roboto', Arial, sans serif;
	font-weight: 300;
	color: #000;
	text-align: left;
}



/* GALLERY */


.galleryThumb {
	position: relative;
	width: 380px;
	display: inline-block;
	text-align: center;
	margin: 0px 35px 20px 0px;
}

.galleryThumb img {
	width: 100%;
	max-width: 420px;
	margin-bottom: 5px;

}




/* #Media Queries
================================================== */

	
	/* larger than 1500  (devices and browsers)  - big desktop screen */
	@media only screen and (min-width: 1500px) {
		
		header.home {
			display: none;
		}
		
			
	}
	
	/* larger than 960 but smaller than 1500 (devices and browsers) - laptop screens & landscape ipad */  /*ORANGE*/
	@media only screen and (min-width: 960px) and (max-width: 1499px) {
		
		
		.supercontainer {
			margin-bottom: 20px;
		}
		
		ul#nav ul {
			top: 44px;
		}
		
		ul#nav li {
			padding: 0 20px;
		}
		
		ul#nav li a {
			font-size: 1em;	
		}
		
		header.home {
			display: none;
		}
		
		h3.sectionHdr {
			padding: 20px 5px;
		}
		
		.aboutBlock {
			width: 90%;
		}
		
		.servicesBlock {
			width: 270px;
			margin: 20px;
		}
		
		footer .ftrLinks {
			margin: 20px 100px 20px 0px;
		}
		
		footer .ftrLinks h4 {
			font-size: 1.25em;
			margin-bottom: 20px;
		}
		
		footer .ftrLinks a,
		footer .ftrLinks li {
			font-size: 1em;	
		}

		
		/* projects */
		
	
		.galleryThumb {
			width: 300px;
			margin: 0px 10px 20px 0px;
		}
		
		
		
		/*.addressBlock {
			margin-top: 10px;
		}*/
		
		
	}
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		
		
	
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */      /* BLUE */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.supercontainer {
			margin-bottom: 30px;
		}
		
		ul#nav ul {
			top: 44px;
		}
		
		ul#nav li {
			padding: 0 18px;
		}
		
		ul#nav li a {
			font-size: .9em;	
			letter-spacing: .15em;
		}
		
		header.home {
			display: none;
		}
		
		header .logo {
			margin-top: -60px;
		}
		
		header h2 {
			width: 50%;
		}
		
		h3.sectionHdr {
			padding: 20px 0px;
		}
		
		.servicesBlock {
			width: 218px;
			margin: 15px;
		}
		
		h2.servicesText {
			font-size: 1.2em;
			line-height: 30px;
		}
		
		.aboutBlock {
			width: 100%;
			padding-bottom: 40px;
		}
		
		.aboutText {
			width: 55%;
			font-size: 1em;
			line-height: 30px;
			margin-bottom: 30px;
		}
		
		.greenText {
			width: 60%;
		}
		
		footer .ftrLinks {
			margin: 20px 15px;
		}
		
		footer .ftrLinks h4 {
			font-size: 1.25em;
			margin-bottom: 20px;
		}
		
		footer .ftrLinks a,
		footer .ftrLinks li {
			font-size: 1em;	
		}
		
		.lowerfooter {
			width: 98%;
		}
		
		.copyright,
		.affiliations {
			padding: 0px 15px;
		}
		
		#static p {
			font-size: 1em;
			line-height: 1.9em;
		}
					 
		.procedureImg {
			width: 250px;
			margin-right: 50px;
			margin-bottom: 50px;
		}
		
		.procedureImg img {
			width: 100%;
		}
		
		img.docImage,
		img.staffImage {
			width: 250px;
			
		}
		/* projects */
		
		
		.galleryThumb {
			width: 350px;
			margin: 0px 20px 20px 0px;
		}
		

		
		
	
		
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.supercontainer.phonebar {
			margin-top: 40px;
		}
		
		nav.supercontainer {
			height: 37px;
		}
		
		header.home .logo,
		header .logo {
			margin-top: -30px;
		}
		
		header .logo img {
			max-width: 80px;
		}
		
		header {
			padding: 0 0 10px 0;
		}
		
		header h1 {
			margin: 0px auto;
			line-height: 30px;
		}
		
		header h1 a {
			font-size: .7em;
		}
		
		header h2 {
			width: 70%;
			font-size: 1.2em;
		}
				
		
		ul#nav {
			width: 100%;
		}
		
		.horizBar {
			width: 100%;
		}
		
		.sectionHdr {
			margin: -40px auto 0px;
		}
		
		.servicesBlock {
			width: 240px;
			margin: 0px 12px;
		}
		
		h2.servicesText {
			font-size: 1.4em;
		}
		
		.about {
			padding: 40px 0px 0px 0px;
		}
		
		.aboutBlock {
			width: 100%;
			padding-bottom: 30px;
		}
		
		.aboutImg {
			width: 100%;
			margin: 0px auto;
			margin-bottom: 20px;
			text-align: center;
		}
		
		.aboutImg img {
			max-width: 250px;
		}
		
		.aboutText {
			width: 100%;
			padding:0px;
			margin: 0px;
			border-left: 0px;
			font-size: 1.3em;
			text-align: center;
		}
		
		
		.greenImg,
		.greenText {
			width: 100%;
			text-align: center;
			padding: 0px;
		}
		
		.greenText {
			margin-top: 20px;
		}
		
		.appointmentbar p {
			line-height: 30px;
		}
		
		.appointmentbar a {
			line-height: 45px;
		}
		
		footer .ftrLinks {
			clear: both;
			margin: 20px;
		}
		
		.lowerfooter {
			padding-top: 20px;
		}
		
		.copyright,
		.affiliations {
			width: 90%;
			float: left;
			text-align: left;
			padding:20px 0px 0px 20px;
		}
		
		.affiliations img {
			margin: 0px 15px 0px 0px;
		}
		
		
		 /* services */
		 
		 #static p {
			 line-height: 1.7em;
		 }
	 
		.procedureImg {
			width: 100%;
			margin: 0px 0px 20px 0px !important;
			float: left !important;
		}
		
		.procedureImg img {
			width: 100%;
			height: auto;
			max-width: 350px;
		}
		
		.procedureText {
			width: 100%;
		}
		
		.halfdivider {
			margin: 20px auto 40px auto;
		}
		
		/* gallery */
		
		.galleryThumb {
			width: 100%;
			text-align: center;
			margin: 0px 0px 20px 0px;
		}
		
		
		
		
	}

	/* Mobile Landscape Size to Tablet Portrait - larger phones - phablets (devices and browsers) */       /* GREEN PLUS */
	@media only screen and (min-width: 580px) and (max-width: 767px) {
		
		iframe {
			max-width: 480px;
			max-height: 300px;
		}
		
		img.docImage {
			width: 92%;
			
		}
		
		img.staffImage {
			width: 200px;
		}

		
	}
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */       /* GREEN */
	@media only screen and (min-width: 480px) and (max-width: 579px) {
		
	
		iframe {
			max-width: 370px;
		}
		
	 	.servicesBlock {
			width: 100%;
			text-align: center;
			float: none;
			margin: 0px auto 15px auto;
		}
		
		
		img.docImage,
		img.staffImage {
			width: 90%;
			
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */      /* RED */
	@media only screen and (max-width: 479px) {
		
		.supercontainer {
			
			margin-bottom: 10px;	
		}
		
		.supercontainer.phonebar {
			padding: 8px 0px;
		}
		
		.supercontainer.phonebar a {
			display: block;
			margin-top: 10px;
		}
		
		header.home .logo,
		header .logo {
			margin-top: -15px;
		}
		
		header .logo img {
			max-width: 60px;
		}
		
		header h1 {
			line-height: 25px;
		}
		
		header h2 {
			width: 90%;
			font-size: 1.1em;
			margin: 10px auto 0;
			padding-top: 0px;
		}
		
		.horizBar {
			display: none;
		}
		
		.services {
			padding-top: 50px;
		}
		
		.servicesBlock {
			width: 100%;
			text-align: center;
			float: none;
			margin: 0px auto 15px auto;
		}
		
		.aboutText {
			font-size: 1.1em;
		}
		
		.greenImg {
			margin: 0px;
		}
		
		.greenImg img {
			max-width: 290px;
		}
		
		.appointmentbar a {
			font-size: 1.5em;
		}
		
		.affiliations img {
			margin: 0px 15px 15px 0px;	
		}
		
		iframe {
			max-width: 258px;
			max-height: 200px;
		}
		
		img.docImage {
			width: 85%;
		}

		img.staffImage {
			width: 98%;
			
		}
		
		/*img.static.bio,
		img.static.service {
			max-width: 258px;
		}
		
		
		.sectionHdr {
			margin-bottom: 20px;
		}
		
		.aboutImg img {
			max-width: 200px;
		}
		
	*/
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/