/********************************************

	Coastal Oral and Facial Surgery

*********************************************/



/* ===================================
		        HOMEPAGE
====================================*/


/* ========== Global Styles ==========*/

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #494949;
	background-image: url(../images/beach_bg.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF; 
	padding: 0;
	margin: 6px 0 0 0;
}

/* ========== Navigation ==========*/

#wrapper {
	width: 910px;
	margin: 0 auto;
}

#navContainer {
	width: 100%;
	float: left;
}

#navList {
	padding: 0 15px 0 0;
	margin: 0;
	list-style-type: none;
	float: right;
	
}

#navList li {
	display: inline;
}

#navList li a {
	color: #907046;
	background-color: #faf0cc;
	float: left;
	height: 16px;
	padding: 5px 10px;
	margin-right: 2px;
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

#navList li a:hover {
	text-decoration: underline;
}

#navContainer a.current {
	background-color: #907046;
	color: #faf0cc;
}

#dropmenudiv {
	position:absolute;
	border-bottom-width: 0;
	line-height:14px;
	z-index:100;
}

#dropmenudiv a {
	width: 100%;
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	background-color: #faf0cc;
	color: #907046;
}

#dropmenudiv a:hover { /*hover background color*/
	background-color: #907046;
	color: #faf0cc;
}



/* ========== Slogan ==========*/

#sloganContainer {
	width: 97%;
	padding-left: 3%;
	height: 15px;
	float: left;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #806449;
	margin-top: 8px;
	font-size: 12px;
}

.sloganText {
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: #ae8b51;
}

#sloganContainer img {
	float: left;
	margin-right: 5px;
}

#topHeader {
	width: 100%;
	float: left;
	height: 217px;
	background-image:url(../images/top_header.jpg);
	background-repeat: no-repeat;
	position: relative;
}

#logoHead {
	position: absolute;
	top: 35px;
	left: 38px;
}

/* ========== Main Content ==========*/

#mainContent {
	width: 865px;
	float: left;
	background-image: url(../images/content_bg.gif);
	background-repeat: repeat-y;
	padding: 5px 15px 0 30px;
}

#mainContent h1 {
	padding: 0 0 3px 0;
	margin: 10px 0 20px 0;
	border-bottom: 1px dashed #dadadb;
	font-size: 18px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #a6865b;
}

#leftContent {
	width: 580px;
	float: left;
	margin-right: 20px;
}
/* Fader Pics */
.picHolder {
	float: left;
	margin-right: 15px;
}

.picHolder img {
	padding: 4px;
	border: 1px solid #E2E2E2;
}
#emphasize img:hover {
	padding: 5px;
	border:none;
	background: #40a9c7;
}

.picHolder .caption {
	text-align:center;
	display:block;
	color:#FFF;
	background: #40a9c7;
	padding: 5px;
}

#leftContent p {
	padding: 0;
	margin: 0 0 15px 0;
	line-height: 18px;
	color: #7c7771;
}

#rightContent {
	width: 250px;
	float: right;
}

.rightBoxMain {
	width: 243px;
	float: left;
}

.rightBoxTop {
	width: 203px;
	height: 22px;
	background-image: url(../images/rightbox-top.gif);
	background-repeat: no-repeat;
	padding: 15px 20px 0 20px;
	color: #40a9c7;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

.greyText {
	color: #b2b2b2;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

.rightBoxContent {
	width: 203px;
	height: auto;
	float: left;
	background-image: url(../images/rightbox-centre.gif);
	background-repeat: repeat-y;
	padding: 0 20px 10px;
	color: #999999;
}

.rightBoxContent img {
	float: left;
	margin-bottom: 5px;
	margin-top: 5px;
	padding: 5px;
	border: 1px solid #E2E2E2;
}

.rightBoxContent p {
	float: left;
	color: #999999;
	line-height: 17px;
	margin-top: 5px;

}

.rightBoxContent2 {
	background: url(../images/rightbox-top2.gif) top no-repeat;
	padding: 20px 20px 0 20px;
	position:relative;
	margin:0 0 -10px 0;
	display:block; overflow:hidden;
}
.rightBoxContent2 h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	background: #40a9c7;
	color:#FFF;
	display:block;
	margin:0; padding:5px; 
	line-height:20px;
	font-weight:normal;
	text-align:center;
}


#slider1 {
    width:203px; /* important to be same as image width */
    height:170px; /* important to be same as image height */
    position:relative; /* important */
	overflow:hidden; /* important */
	margin:0;
}

#slider1Content {
    width:201px; /* important to be same as image width or wider */
	height:168px; position:absolute; top:0; margin:0; padding:0;
	border:1px solid #CCC; 
}
#slider1Content li { display:block; overflow:hidden; list-style:none; }
.slider1Image {
    float:left; position:relative; display:none; padding:4px; 
}
.slider1Image span {
    position:absolute; width:183px; background-color:#000; filter:alpha(opacity=70);
    -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;
    font-size:13px; font-weight:bold; padding:0; height:0;
}
.clear {
	clear:both;
}
.bottom {
	bottom:10px; left:0; 
	width:203px !important;
}
#slider1 img { border:none; }



.rightBoxBottom {
	height: 47px;
	background-image: url(../images/rightbox-bottom.gif);
	background-repeat: no-repeat;
	padding: 0 20px;
	margin:0;
	display:block;
	overflow:hidden;
}

.launchBox {
	float: left;
	background: #40a9c7;
	padding: 5px 10px;
}

.launchBox a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.launchBox a:hover {
	text-decoration: underline;
}

#referralBox1 {
	width:235px;
	height:80px;
	float:left; 
	background-image:url(../images/consultation_tab.jpg);
	text-align:center;
	margin-top:15px;
}

#referralBox2 {
	width:235px;
	height:80px;
	float:left; 
	background-image:url(../images/xray_tab.jpg);
	text-align:center;
	margin-top:15px;
}

.sTabLink { width:235px; height:18px; text-align:center; display:block; padding-top:62px; }
.sTabLink a { text-decoration:none; color:#FFFFFF; font-size:11px; }
.sTabLink a:hover { text-decoration:underline;}

/* ========== Services Template ==========*/

.picContainer {
	width: 210px;
	float: left;
	margin-right: 20px;
}

.picBox {
	width: 210px;
	float: left;
	margin-bottom: 15px; 
}

.imgPreview {
	float: left;
	margin: 0;
	border: 1px solid #E2E2E2;
	padding: 4px;
}

.beforeText {
	width: 210px;
	height: 26px;
	float: left;
}

.afterText {
	width: 210px;
	height: 26px;
	float: left;
}

.captionText {
	width: 210px;
	height: 26px;
	float: left;

}


.viewLargeBox {
	width: 210px;
	height: 26px;
}

#imgEnlarge {
	width: 210px;
	height: 26px;
	border: none;
	margin: 0;
	padding: 0;
}


.dentalInfo {
	float: left;
	width: 350px;
}

.servicesText {
	padding: 0;
	margin: 0 0 10px 0;
	line-height: 17px;
	color: #7c7771;
}


/* ========== Staff ==========*/

.staffMainContent {
	width: 100%;
	float: left;
}

.staffContainer {
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.staffPix {
	width: 300px;
	float: left;
	margin-right: 30px;
}

.staffPix img {
	float: left;
	border: 1px solid #E2E2E2;
	padding: 4px;
	
}

.staffInfoBox {
	width: 250px;
	float: left;
}

.staffName {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #a6865b;
}

.staffPosition{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #555348;
	margin-bottom: 10px;
}

.staffHeader {
	
	width: 100%;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #40a9c7;
	margin-top: 10px;
	margin-bottom: 5px;
}

.staffRow {
	
	width: 100%;
	color: #666666;
	font-style: italic;
	margin-bottom: 5px;
}

.staffList {
	width: 100%;
	padding: 0 0 0 18px;
	margin: 0 0 25px 0;

}

.staffList li {
	list-style-type: none;
	list-style-image: url(../images/stafflist_bullet.gif);
	padding: 0;
	margin: 0 0 10px 0;
	color: #775F3E;
}


/* ========== Aftercare ==========*/

.aftercareNav {
	padding: 0;
	margin: 0 0 20px 0;
}

.aftercareNav li {
	display: inline;
	list-style-type: none;

}

.aftercareNav li a {
	text-decoration: none;
	color: #c09a67;	
	padding-right: 5px;
	margin-right: 5px;
	border-right: 1px solid #8b8b8b;

}

.aftercareNav li a.lastNavItem {
	border: none;	

}

.aftercareNav li a:hover {
	text-decoration: underline;
}

.sheetBox {
	width: 100%;
	float: left;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #dadadb;
}

.lastBoxItem {
	border-bottom: none;
}

.sheetBox h2 {
	padding: 0;
	margin: 0 0 7px 0;
	font-size: 15px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #40a9c7;
		
}

.sheetBoxList {
	padding: 0;
	margin: 0 0 0 20px;
}

.sheetBoxList li {
	padding: 0;
	margin: 0 0 10px 0;
	color: #7C7771;
}

.backtoTop {
	width: 100%;
}

.backtoTop img {
	float: right;
}




/* ========== Footer ==========*/

#footerMain {
	width: 94%;
	height: 20px;
	padding: 40px 3% 10px 3%;
	float: left;
	background-image: url(../images/footer_bg.gif);
	background-repeat: no-repeat;
	color: #907046;
	margin-bottom: 30px;
}

#footerMain p {
	padding: 0;
	margin: 0 0 5px 0;
}

#footerLeft {
	float: left;
}

#footerLeft a {
	color: #907046;
	font-weight: bold;
	text-decoration: none;
}

#footerLeft a:hover {
	text-decoration: underline; 
}

#footerRight {
	float: right;
}

#footerRight a {
	text-decoration: none;
	color: #907046;
}

#footerRight a:hover {
	color: #40A9C7;
	text-decoration: underline; 
}



/* ========== Sitemap ==========*/

.mapContainer {
	width: 100%;
	float: left;
	margin-top: 10px;
}

.mapBox {
	width: 100%;
	float: left;
	margin-bottom: 25px;
}

.boxLast {
	margin-bottom: 10px;
}

.mapBox h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #aea46f;
	margin: 0 0 10px 0;
	padding: 0 0 2px 0;
	border-bottom: 1px solid #eeeeee;
	
}

.maplist {
	padding: 0;
	margin: 0;
}

.maplist li {
	list-style: none;
	display: inline;
	background-image: url(../images/sitemap_bullet.gif);
	background-position: left center;
	background-repeat: no-repeat;
	margin: 0 30px 0 0;
	padding: 0 0 0 15px;
	line-height: 25px;
	float: left;

}

.maplist li .lastItem {
	border-right: none;
	
}

.maplist li a { 
	color: #808080;
	text-decoration: none; 
}

.maplist li a:hover { 
	color: #1D96B8;
}