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

DUNSON DENTAL				 
MARCH 2009							
BY ROCKETDOG COMMUNICATIONS			

NOTES

There is a weird hybrid style of doing titles. This
is done for accessibility reasons. Any "static" headers 
are done with css backgrounds. Any "dynamic" titles (for
instance text within content) is just a flat embedded image.

There are 2 "templates" used. They are marked by a 
class on the BODY tag. .default and .homepage.

There is also an id on on the body identifying the unique
page. Use this ID to set the header image properly.

***************************************************
	GENERIC
	
	*/

HTML {
	font: 62.5%/160% Arial, Helvetica, sans-serif;   	
	color: #4c4c4c;
	}
	
BODY {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background:#FFF url('../images/html-bkg.gif') repeat-x;
}
	
.default {background:#FFF url('../images/html-bkg-sml.gif') repeat-x;}	
.default_professionals {background:#FFFFFF !important;}	


/***************************************************
	WRAPPER
	 */
#wrapper {
	width:996px;
	margin: 0px auto;
	text-align:left;
	}
#wrapper_professionals {
	width:100%;
	margin: 0px auto;
	text-align:left;
	}
/***************************************************
	STRUCTURE
	
	*/

#leftcolumn {
	float:left;
	width:246px;
	background:url(../images/left-col-bkg.gif) repeat-x;
	margin:0;
	min-height:534px; /*because the gradient is long */
	border-right:solid 1px #fff;
	text-align:center;
	}
	
#centrecolumn {
	width:415px;
	float:left;
	margin:0 30px 0 0;
	padding:35px 0 0 0;	
	}

#centrecolumn_profesonal {
	width:70%;
	float:left;
	margin:0 10px 0 0;
	padding:15px 0 0 0;	
	}
#centrecolumn_profesonal iframe{
	width: 100%;
	height:750px;
}
	
#rightcolumn_professionals {
	float:left;
	width:30%;
	border-left:solid 1px #fff;
	padding:35px 30px 0;
	}	

#rightcolumn {
	float:left;
	width:203px;
	border-left:solid 1px #fff;
	padding:35px 30px 0;
	}	
	
#content {
	background:url(../images/content-bkg.gif) repeat-x;
	float:left;
	padding:0 0 0 36px;
}

#content_professionals {
	background:url(../images/content-bkg.gif) repeat-x;
	float:left;
	padding:0 0 0 20px;
	width:100%
}

/***************************************************
	HEADER
	
	*/
	
#header {
	height:383px;
	padding:0;
	margin:0 0 1px 0; 
	border-left:solid 1px #535455;
	border-right:solid 1px #535455;
	position:relative;
	}
	
#homepage #header {
	height:469px;
	}
	
.logo {
	text-indent:-999em;
	width:168px;
	height:93px;
	background:url(../images/logo.gif) bottom left no-repeat;
	display:block;
	margin:0 26px 20px;
	padding:10px 0 0;
	}
	
#feature {
	float:right;
	width:748px;
	}

#referring {
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:23px;
	height:129px;
}
	
/***************************************************
	MAIN MENU
	*/

#topmenu {
	margin:0 34px;
	padding:0;
	background:url(../images/topmenus.gif) no-repeat;
	width:162px;
	list-style:none;
	}

#topmenu LI  {
	text-indent:-999em;
	display:block;	
	height:28px;
	}
	
#topmenu A {
	display:block;
	padding:0;
	margin:0;
	text-decoration:none;
	height:28px;
	}		
	
#menu-home A:hover{background:url(../images/topmenus.gif) -182px 0px no-repeat;}	
#menu-about A:hover{background:url(../images/topmenus.gif) -182px -28px no-repeat;}
#menu-cosmetic A:hover{background:url(../images/topmenus.gif) -182px -56px no-repeat;}
#menu-implant A:hover{background:url(../images/topmenus.gif) -182px -84px no-repeat;}
#menu-sedation A:hover{background:url(../images/topmenus.gif) -182px -112px no-repeat;}
#menu-professionals A:hover{background:url(../images/topmenus.gif) -182px -140px no-repeat;}
#menu-contact A:hover{background:url(../images/topmenus.gif) -182px -168px no-repeat;}
#menu-news A:hover{background:url(../images/topmenus.gif) -182px -196px no-repeat;}
#menu-smilegallery A:hover{background:url(../images/topmenus.gif) -182px -224px no-repeat;}


#menu-home A.selected{background:url(../images/topmenus.gif) -361px 0px no-repeat;}	
#menu-about A.selected{background:url(../images/topmenus.gif) -361px -28px no-repeat;}
#menu-cosmetic A.selected{background:url(../images/topmenus.gif) -361px -56px no-repeat;}
#menu-implant A.selected{background:url(../images/topmenus.gif) -361px -84px no-repeat;}
#menu-sedation A.selected{background:url(../images/topmenus.gif) -361px -112px no-repeat;}
#menu-professionals A.selected{background:url(../images/topmenus.gif) -361px -140px no-repeat;}
#menu-contact A.selected{background:url(../images/topmenus.gif) -361px -168px no-repeat;}
#menu-news A.selected{background:url(../images/topmenus.gif) -361px -196px no-repeat;}
#menu-smilegallery A.selected{background:url(../images/topmenus.gif) -361px -224px no-repeat;}

/***************************************************
	SIDEMENU
	
	*/
 .sidemenu {
 	list-style:none;
	margin:0 auto 20px auto;
	padding:0;
	width:170px;
	}
 
.sidemenu LI {
 	list-style:none;
	border-bottom:solid 1px #eee;
	text-align:left;
	line-height:130%;
	}

.sidemenu LI A,
.sidemenu LI SPAN{
	font-size:120%;
	background:#cecece;
	color:#716d6d;
	text-decoration:none;
	padding:3px 5px;
	display:block;
	}
	
 .sidemenu STRONG {
	display:block;
	}
	
.sidemenu LI A:hover,
.sidemenu LI A.selected{	
	text-decoration:underline;
	}
	
#accreditation {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:198px;
	}
	
#accreditation LI {
	float:left;
	}
	
/***************************************************
	RIGHT COLUMN
	
	*/		
#rightcolumn {line-height:120%; font-size:110%;}

#rightcolumn #contact-details {
	list-style:none;
	margin:0 0 1.5em;
	padding:0;
	}	
	
/* CONTACT FORM */
#rightcolumn FORM  {
	font-size:90%;
	line-height:120%;
	}
	
#rightcolumn FORM P{margin:5px 0 10px 0;}

#rightcolumn .select {width:203px;}

#rightcolumn .text,
#rightcolumn .textarea {
	width:197px; /* accomodate input padding*/
	}
	
#rightcolumn .textarea {height:120px;}

.submit {background:url(../images/buttons/submit.gif) no-repeat; 
	width:80px; 
	height:36px;
	border:none;
	display:block;
	text-indent:-999em;
	}
	
.submit:hover {background:url(../images/buttons/submit.gif) bottom left no-repeat; }
	
/***************************************************
	MISC/TITLES
	
	*/	
#centrecolumn {font-size:130%;}
#centrecolumn_profesonal {font-size:130%;}

a#smiledash { 
	margin-bottom:17px; 
	display:block;
}		
	
#ad-video {
	background:url(../images/video.jpg) no-repeat;
	display:block;
	text-indent:-999em;
	width:235px;
	margin:5px auto 20px;
	height:71px;
	}
.smile {
	margin-bottom:35px;
}
.title {
	display:block;
	text-indent:-999em;
	margin:0 0 8px 0;
	padding:0;
	line-height:140%
	}
	
.dental-procedures {background:url(../images/txt/dental-procedures.gif) center center no-repeat;}
.office-hours {background:url(../images/txt/office-hours.gif) center center no-repeat;}
.partners {background:url(../images/txt/partners.gif) center center no-repeat;}
.contact-us{background:url(../images/txt/contact-us.gif) left top no-repeat; margin:0 0 20px 0;}

#centrecolumn .title {margin:0 0 20px 0;}	
#centrecolumn_profesonal .title {margin:0 0 20px 0;}	

.h1-alt {margin:20px 0 0 0;}
.h2-alt {margin:8px 0 20px;display:block;}	

#news .news-item {
	border-top:solid 1px #cecece;
	padding-top:18px;
}

BLOCKQUOTE {
	border-top:solid 1px #cecece;
	padding-top:18px;
	border-bottom:solid 1px #cecece;
	padding-bottom:18px;
}
#smilegallery #centrecolumn A IMG {
	margin-right:6px;
	margin-bottom:6px;
}
#smilegallery #centrecolumn_profesonal A IMG {
	margin-right:6px;
	margin-bottom:6px;
}

/***************************************************
	FOOTER
	 */

#footer {
	clear:both;
	margin:20px 0;
	padding:10px  0 0 0;
	border-top: solid 1px #e8e7e7;
	color:#b2b0b0;
	}

#footer A {
	color:#b2b0b0;
	text-decoration:none;
	}
	
#footer A:hover {
	color:#222;
	}
	
#footer P {
	margin:10px 0;
	}
	
#footer ADDRESS {
	display:block;
	clear:both;
	}
	
#footer UL {
	margin:0;
	padding:0;
	}
	
#footer LI {
	display:inline;
	list-style:none;
	margin:0 4px 0 0;
	border-right:solid 1px #c2c2c2;
	padding:0 10px 0 0;
	}
	
#footer LI.last {border:none;}