/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #ffffff;
    text-shadow: none;
}

::selection {
    background: #ffffff;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
hr.brush{
	display:block;
	height: 2px;
	border:0;
	background: url(../img/menu-border.png);
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body{
	background: url(../img/bodyBG.jpg);
}
  .push{
	   content: ""; 
	   display: table;
	   clear: both;
	   *zoom: 1;
   }
/*=====================
HEADER
=====================*/
.header-container{
	background-color: #FFFFFF;
}
.header{
	width:96%;
	max-width: 1200px;
	margin:0 auto;
	padding: 10px 0;
}
.headerL{
	width: 50%;
	float: left;
	height: 175px;
}
.headerR{
	position:relative;
	width:50%;
	float: right;
		height: 175px;
		margin:0;
		padding:0;

}
.top-phone{
	position: absolute;
	bottom:0;
	right:0;
	text-align: right;
	margin:0;
	padding:0;
}
.top-phone h4{
	margin:0;
	padding:0;
}
.top-phone h4 a{
	color: #333;
	text-decoration:none;
}
h4.phone {
	line-height: 1.5em;
}
/*======================
NAVIGATION
======================*/
.navigation-containerT{
	background: url(../img/menu-border.png) top left repeat-x #FFFFFF;
	padding-bottom: 5px;
}
.navigation-container{
	background: url(../img/menu-border.png) bottom left repeat-x;
}
.navigation{
	width:96%;
	max-width: 1200px;
	margin:0 auto;
	padding: 10px 0;
}
/* HOME PAGE */
.content-block{
	width: 96%;
	max-width:1200px;
	margin:0 auto;
}
.pad-screen{
	display: none;
}
	
.halfL{
	width:49.58333%;
	max-width: 595px;
	float:left;
}
.halfR{
	width:49.58333%;
	max-width: 595px;
	float: right;
}
.welcome{
	height:290px;
	padding: 35px 20px 15px;
	background: #fff;
}
.slider{
	height: 425px;
}
/*====================
PAGE TITLES
====================*/
.page-title{
	background: url(../img/titleBG.jpg) top center repeat-y;
	margin:0 auto;
	margin-top: 10px;
}
.page-titleL{
	width: 49%;
	float:left;
}
.page-titleR{
	width: 49%;
	float:right;
}
.page-title h1{
	color: #ffffff;
	margin:0;
	padding: 25px 0 25px 15px;
}
.page-title h2{
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	font-weight:normal;
	font-style: italic;
	color:#444;
	padding: 15px;
	margin: 0;
	line-height: 1.4em;
}
/*--------------------
 HOME IMPLANTS
=====================*/
.implant-container{
}
.implantL{
	width: 35.29411%;
	max-width: 210px;
	float: left;
	background: #6FACA6;
	height:180px;
	margin-bottom: 5px;
}
.implantL h1{
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 38px;
	font-style:italic;
	text-align: center;
	padding-top: 40px;
}
.implantR{
	width:63.86554%;
	max-width: 380px;
	background: #D9EAE8;
	float: right;
	height: 180px;
}

.implantR h3{
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: .875em;
	font-style:normal;
	text-align:left;
	padding: 35px 10px 0;
	line-height: 1.8em;
}
/*-----------------------
PERIODONTICS
=======================*/
.perio-container{
	padding: 10px 0;
}
.perioT{
	width:100%;
	float:left;
	background: #6FACA6; 
	height: 110px;
}
.perioT h1{
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 38px;
	font-style:italic;
	text-align: center;
	padding-top: 30px;
}
.perioB{
	width:100%;
	float:right;
	background: #D9EAE8; 
	height: 170px;
}
.perioB h3{
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: .875em;
	font-style:normal;
	text-align:left;
	padding: 35px 10px 0;
	line-height: 1.8em;
}
/*=====================
 HOME DR MESSAGE
=====================*/
.messageL{
width: 35.29411%;
	max-width: 210px;
	float: left;
	margin:0;
	padding:0;
	background: url(../img/Abufaris.jpg) no-repeat;	
	height:285px; 
}
.messageR{
	width:100%;
	max-width: 590px;
	height:370px;
	background: #fff;
	padding-bottom: 15px; 
}

.messageR h2{
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0625em;
	text-align:center;
	font-style:normal;
	padding-top: 15px;
}
.messageR hr{
	width: 80%;
	margin: 0 auto;
}
.messageR p{
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-style:normal;
	text-align:left;
	font-style:italic;
	padding: 10px 10px 0;
	line-height: 1.5em;
}
/*=====================
HOME BLOG
======================*/
.blog{
	background: #FFFFFF;
	height: 285px;
}
.blog-content{
	padding: 20px;
}
.blog-title-container{
	margin-bottom: 40px;
}
.blog-titleL{
	float:left;
	width: 17.1%;
	max-width: 100px;
}
.blog-titleR{
	width: 82%;
	float:right;
	padding: 15px 0 0;
}

.blog h1{
	font-family:'Open Sans', sans-serif;
	font-size: 25px;
	color: #000000;
	margin:0;
	padding:0;
	margin-bottom: 5px;
}
.blog h2{
	font-family:'Open Sans', sans-serif;
	font-size: 16px;
	color: #444;
}
img.blog-icon{
	width:100%;
}
h4.blog-title{
	font-family:'Open Sans', sans-serif;
	font-size: 16px;
	color: #000;
	padding: 5px 10px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}
h4.blog-title a{
	text-decoration:none;
	color: #333;
}
h4.blog-title a:hover{
	text-decoration: underline;
}
/*=====================
BIOGRAPHY
=====================*/

.bio-container{
	margin-bottom: 10px;
}
.bio-pic{
	width: 27.77777%;
	max-width: 250px;
	padding: 15px 0;
	float: left;
	background-color:#DEE1CE;
}
.bio-pic img{
	width: 80%;
	max-width: 197px;
	display:block;
	margin: 0 auto;
}
.bio-pic h4{
	font-size: 1em;
}
.bio-text{
	width: 71.11111%;
	max-width:640px;
	float: right;
}
.bio-text p{
	font-size: 14px;
}

/*=====================
OFFICE SLIDES
======================*/
.office-slides{
	width: 46.51%;
	max-width:400px;
	float: right;
	margin: 0 1% 0 1%;
}
/*=====================
FOOTER
=====================*/
.footer-container{
	background: #D9EAE8;
	padding:0;
	margin-top: 10px;
}
.footer-titlesT{
	background: url(../img/menu-border.png) top left repeat-x #FFFFFF;
	padding-bottom: 0;
	padding-top: 5px;
}
.footer-titles{
	background: url(../img/menu-border.png) bottom left repeat-x;
	padding-bottom: 5px;
}
.titles{
	width: 96%;
	max-width: 1200px;
	margin:0 auto;
}
.footer{
	width: 96%;
	max-width: 1200px;
	margin:0 auto;
	padding: 20px 0;
}
.footerL,.footerC,.footerR{
	background: #fff;
	height:500px;
}
.footerL,.titleL{
	width: 31.25% ;/* 300 px */
	float:left;
}
.footerC,.titleC{
	width: 31.25%;
	float:left;
	margin-left: 3.125%;
}
.footerR,.titleR{
	width: 31.25%;
	float:left;
	margin-left: 3.125%;
}
.footerR{
	background: #fff;
}
.titles h2{
	font-family:'Open Sans', sans-serif;
	font-size: 1.125em;
	color: #333;
	padding: 8px 0;
	margin:0;
}

.footer h3{
	font-family:'Open Sans', sans-serif;
	font-size: 1em;
	color: #333;
	margin-bottom: 14px;
}
.footer p{
	font-family:'Open Sans', 		sans-serif;
	font-size: .75em;
	color: #333 !important;
	margin-bottom: 0px;
}
.footerR p{
	color: #333;
}


/*------------------
FORM 
----------------*/
form{
	padding:0 15px;
}
input[type=text]{
	font-size: 12px;
	margin-bottom: 5px;
	width: 100%;
	background: #e5e5e5;
}
span.secure{
	color:#333;
	background-color: #D9EAE8;
	padding: 1px .8em;
	border: 1px solid #ccc;
}
input.secure{
	width: 80%;
}
input.submit{
	float: right;
	width: 80%;
	height: 40px;
	background: #6FACA6;
	color: #fff;
}
label{
	color: #333;
	font-size: 12px;
}

/*=================
COPYRIGHT
=================*/
.copyright-container{
	padding: 30px 0;
	margin:0;
	background: #fff;
}
.copyright{
	width: 96%;
	max-width: 1200px;
	margin:0 auto;
}
.copyrightL{
	width: 80%;
	float:left;
}
.copyrightR{
	width: 20%;
	float: right;
}
.copyright p{
	font-size: .75em;
}
.copyright a{
	color: #333;
}
#top{
	cursor:pointer;
}
/*=====================
PADDING & MARGIN 
======================*/

.p10{
	padding: 10px;
}
.p15{
	padding: 15px;
}
.p20{
	padding: 20px;
}
.pTop40{
	padding-top: 40px;
}

.pTop30{
	padding-top: 30px;
}

.pTop20{
	padding-top: 20px;
}
.pTop10{
padding-top: 10px;
}
.pBot40{
	padding-bottom: 40px;
}
.pBot30{
	padding-bottom: 30px;
}

.pBot20{
	padding-bottom: 20px;
}
.pBot10{
	padding-bottom: 10px;
}
.mTop20{
margin-top: 20px;
}
.mBot20{
margin-bottom:20px;
}
.mTop10{
margin-top: 10px;
}
.mBot10{
margin-bottom:10px;
}

.myShadow{
	box-shadow:3px 3px 5px #888;
}
.bBot{
	border-bottom: dotted 1px #888;
}
.bTop{
	border-top: dotted 1px #888;
}
/* --------------------
TWO COLUMNS
==================== */
.single-column{
	width:96%;
	padding-right: 1.05%; /* 10px */
	padding-left: 1.05%; /* 10px */
}
.half-columnL{
	float:left;
	width: 46.9%;
	padding-right: 1.05%; /* 10px */
	padding-left: 1.05%; /* 10px */
}
.half-columnR{
	float:right;
	width: 46.9%;
	padding-right: 1.05%; /* 10px */
	padding-left: 1.05%; /* 10px */
}
/*-------------------
 SIDEBAR MAIN COMBO
==================*/
.sidebarL{
	width: 34%;
	float: left;
}
.mainR{
	width: 65%;
	float: right;
}
.sidebarR{
	width: 34%;
	float:right;
}
.mainL{
	width: 65%;
	float:left;
}

.wide-main{
	width: 75%;
	float:left;
}
.wide-sidebar{
	width: 24%;
	float: right;
}
/*----------------
CONTACT PAGE
----------------*/
.contact-container{
	width: 100%;
	padding-bottom: 8px;
	padding-top: 8px;
}

.contact-btn{
	float:left;
	width:10%;
}
.contact-text{
	float: right;
	width:87%;
}
.contact-btn img{
	width: 100%;
	max-width:50px;
	display:block;
	margin:0 auto;
}
/*-----------------
THREE COLUMNS
--------------*/
.tri-columnA{
	width: 31.25% ;/* 300 px */
	float:left;
}
.tri-columnB{
	width: 31.25%;
	float:left;
	margin-left: 3.125%;
}

/*-------------
FOUR COLUMNS
-------------*/
.quad-columnA{
		width: 23% ;
	float:left;
	padding-top: 15px;
}
.quad-columnB{
		width: 23%;
	float:left;
	padding-left:2.09%;
	padding-top: 15px;
}
.quad-columnA p, .quad-columnB p{
	font-size: .875em;
}

/*----------------
IMAGE CONTROL
-----------------*/
img.left{
	float:left;
	margin-right:.5em;
}
img.right{
	float:right;
	margin-left: .5em;
}
img.center{
	display:block;
	margin:0 auto;
}
img.bdr{
	border: 1px solid #ccc;
	padding: 3px;
}
img.cc{
	width: 40%;
	max-width: 149px;
}
img.periodontal-pic{
	width: 100%;
	max-width:300px;
}
img.cosmetic{
	width: 100%;
	max-width:300px;
}
img.cosmetic-logo{
	width: 27%;
	max-width:200px;
}
img.video{
	width:80%;
	max-width: 225px;
}