/* ==========================================================================
   Central Coast Orthodontics Design Stylesheet
   ========================================================================== */




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

/* Header
------------------------- */
.header { min-height: 110px;  margin-bottom: 60px; background: url(/img/elements/header-bg-grad-01.jpg) center top repeat-x; }
.header-logo { position: absolute; top:0; left: -155px; width: 650px; height: 192px; background: url(/img/elements/header-logo.png) center top no-repeat; }

/* Menu
------------------------- */
#nav 	  				{ padding: 20px 0 10px; }
#nav ul 				{ float: left; margin: 0; padding: 0; }
#nav ul li a, #nav li 	{ float: left; }
#nav ul li 				{ list-style: none; position: relative; }
#nav ul li a 			{ text-decoration: none; }
#nav ul li a:hover 	{ }

.primary-nav li a 	{ color:rgb(121,204,239);text-transform:uppercase;vertical-align:bottom;font-size:16px;padding:18px 10px 0;}
.primary-nav li.facebook-icon a{
	color: rgba(0, 0, 0, 0); font: 0pt/0 a; text-shadow: none; /* hide text */
	display: block; width: 38px; height: 38px; margin: 0 10px; background: url(../img/elements/header-facebook.svg) center center no-repeat; }

.secondary-nav li a	{ color:white;text-transform:lowercase;font-weight:500;font-size:18px;letter-spacing:1px;padding:2px 10px; }

a.small-nav 		{ color: white; background-color: #127CC2; margin-bottom: 10px; }
a.small-nav:hover,
a.small-nav:focus 	{ color: white; background-color: #127CC2; }
#MenuDrop 			{ background: #fff; margin-top: 20px;}
#MenuDrop ul 		{ width: 100%; margin: 0; }
#MenuDrop li 		{ float: left; list-style-type: none; }
#MenuDrop li.welcome 		{ display: none; }
#MenuDrop a 		{ text-transform:capitalize; }

/* Content area
------------------------- */
.content { padding-bottom: 20px; }


/* Footer and Sub Footer
------------------------- */
.sub-footer 	{ padding-top: 2em; padding-bottom: 2em; background: #e4f4fb; }
.sub-footer li 	{ padding-bottom:0; }
.sub-footer h5 	{ font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; font-weight: 500; }
.sub-footer h6 	{ font-size: 15px; font-weight: 300; }
.sub-footer p 	{ font-size: 10px; color: #009DE0;  }
.sub-footer img { margin: 0 auto; padding-left: ; vertical-align: middle;  }

.seperator-left 	{ border-left: 1px solid #009DE0; }
.seperator-right 	{ border-right: 1px solid #009DE0; }

.footer { min-height: 39px; padding: 10px 0 5px; background: #007dc3 url(/img/elements/footer-bg-grad-01.jpg) center bottom repeat-x; }
.footer p { color: #fff; font-size: 12px; }
.footer a { color: #fff; font-weight: 600; }



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

/* Home
------------------------- */
body#home .content {
	background-image: url(/img/bg-home.jpg);
	background-position: 50% bottom;
	background-repeat: no-repeat;}

.feature-wrap { float: right; }

a.feature-box {
    border-radius: 10px 10px 10px 10px;
    display: block; float: left;
    padding: 12px; margin-left: 20px;
    min-height: 91px; position: relative;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}

a.feature-box:hover { margin-top: 4px; }

a.feature-box:after {
	position: absolute;
	display: inline-block;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	top: 100%;
	content: '';
}

a.feature-box p {
	font-family: 'helvetica_roundedbold', Arial, sans-serif;
	text-align: center;
	font-weight: 500; line-height: 1.4em;
	margin: 0; padding: 0;
}

a.appointment 			{ background: #3AB5EE; color: white; width: 170px; }
a.appointment:after 	{ left: 40%; border-top:15px solid #3AB5EE; color: white; }
a.appointment p.head  	{ font-size: 13px; text-transform: uppercase; }
a.appointment p.phone 	{ font-size: 22px; }

a.find-us 			{ position: relative; background: #00A2E4; color: white; width: 95px; padding-top: 32px; }
a.find-us:after 	{ left: 35%; border-top:15px solid #00A2E4; color: white; }
a.find-us img       { position: absolute; top: -15px; left: 20px; }
a.find-us p 		{ font-size: 16px; line-height: 1.2em; padding-top: 5px }

a.no-referral 			{ background: #038BCE; color: white; width: 145px; }
a.no-referral:after 	{ left: 37%; border-top:15px solid #038BCE; color: white; }
a.no-referral p 		{ font-size: 22px; line-height: 1.4em; padding-top: 5px }



/* Our Practice
------------------------- */
body#our-practice .content { background: url(/img/bg-our-practice.jpg) 50% 95px no-repeat;}
.og-grid .panel 	{ border: none; padding: 3.5em 0; margin: 0; }
.og-grid .panel h5	{ color: white; }
.og-grid .light 		{ background: rgb(121,204,239); }
.og-grid .medium-light 	{ background: rgb(0,157,224); }
.og-grid .medium-dark 	{ background: rgb(0,125,195); }
.og-grid .dark 			{ background: rgb(13,92,146); }

.read-more {
	font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
	color: #fff; border: 1px solid #fff;
	padding: 5px 10px; margin: 0;
	display: inline-block; outline: none; }

.og-details h4 { margin-bottom: 15px;  text-transform: uppercase; color: rgb(0,125,195); }

#our-practice .og-details a { display: none;}


/* Patient Information
------------------------- */
ul.og-grid .panel img { margin: 0 auto; }
ul.og-grid .panel h5 { margin-top: 10px; }
#patient-information .og-details { float: left; width: 100%; }


#patient-information h6.subheader { margin-bottom: 0; margin-top: 5px; }
#patient-information .og-fullimg.columns {
height: 0; width: 0;
position: absolute; top: 0; left: 0;
font: 0pt/0 a; color: transparent; text-shadow:none; /*hides text better than text-indent */}


/* Services
------------------------- */
#services table 		{ border: none; }
#services table thead 	{ background: #ececec; }
#services table td 		{ background: #f9f9f9; }
#services table h6 		{ margin-bottom: 0; }


/* FAQs
------------------------- */
#faq h6.subheader {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #444;
	margin-top: 1.2em; margin-bottom: 0;}
#faq .before-after { margin: 8px 0 5px; }




/* Contact us
------------------------- */
.contact-wrap { background-color: #ededed; padding: 30px 0; }
.contact-wrap-arrow {
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent #ededed;
    border-image: none;
    border-style: solid;
    border-width: 15px;
    content: " ";
    pointer-events: none;
    width: 0; margin: 0 0 0 50px
}

#map_canvas 	{ width: 100%; height: 250px; border: 1px solid #ccc; font-size: 11px; }
#map_canvas * 	{ -moz-box-sizing: padding-box!important; }
#map_canvas h6 	{ font-size: 13px; margin-bottom: 0; }





/* =======================
   Misc
   ======================= */
.mask { font: 0pt/0 a; color: transparent; text-shadow:none; } /*hides text better than text-indent */
.no-bottom { margin-bottom: 0!important;}




@media only screen and (max-width: 930px) {
	.header { min-height: 50px; background-position: center bottom; background-color: #007EC3; }
	.header-logo { background-size: 100% auto; left: -140px; top: 0; width: 170%; }
	.secondary-nav li a { font-size: 16px; padding: 2px 5px; }
	a.feature-box {float: right; margin: 0 10px 30px; }

}

@media only screen and (max-width: 760px) {
.header { margin-bottom: 70px; }
body#home .content { background-image: none; }
body#our-practice .content { background-image: none; }
.seperator-right { border: none; }
}