/*
 * #01 - General 
 * #02 - Masthead
 * #03 - Navigation
 * #04 - Sidebar Navigation 
 * #05 - Content (Note: Anything within the content
 *				  area should be in layout_content.css)  
 * #06 - Footer
 * #07 - Other 
 */

/* #01 - GENERAL **************************************************************/

* { margin: 0;  padding: 0; }

body
{
	/* centering */
	text-align: center;
}

#outer-wrapper
{
	/* centering */
	width: 980px;
	margin: 0 auto;

	text-align: center;
	background: transparent url('../images/outer-wrapper_bg.gif') 50% 0 repeat-y;
}

#wrapper
{
	width: 960px;
	margin: 0 auto;
	padding-bottom: 56px;
	text-align: left;
	overflow: hidden; /* contain floats */
		
	background: #fff url('../images/subfooter_phone.gif') 100% 100% no-repeat;
}

/* #02 - MASTHEAD *************************************************************/

#masthead
{
	background: transparent url('../images/masthead_bg.jpg') 0 0 no-repeat;
	width: 980px;
	height: 296px;
	overflow: hidden;
	
	text-align: left;
}

#masthead-logo
{
	display: block;
	width: 222px;
	height: 65px;
	overflow: hidden;
	text-indent: -9999px;
	background: #fff url('../images/calgary-dentist-ambiance-dental.gif');
	margin: 42px 0 0 22px;
	float: left;
}

/* #03 - NAVIGATION ***********************************************************/

/* Son of Suckerfish Dropdowns */
#nav
{
	width: 960px;
	height: 42px;
	background: #ccc url('../images/nav_bg.gif') 0 0 repeat-x;
	padding-left: 24px;
	margin-bottom: 24px;
}

/* basic setup */
#nav ul#inner-nav
{
	width: 911px;
	height: 42px;
	margin-left: 25px;
}
#nav ul { margin: 0;  padding: 0; list-style: none; }
#nav ul li { margin: 0;  padding: 0; }
#nav a, #nav img { display: block; }

/* main items */
#nav li { float: left;  cursor: default; }
#nav li a,
#nav li a img { margin: 0;  padding: 0;  border: none; }

/* widths of main menu */
#nav li#nav-home { width: 55px; }
#nav li#nav-general { width: 122px; }
#nav li#nav-cosmetic { width: 129px; }
#nav li#nav-health { width: 126px; }
#nav li#nav-gallery { width: 97px; }
#nav li#nav-dentist { width: 120px; }
#nav li#nav-resources { width: 134px; }
#nav li#nav-contact { width: 128px; }

/* dropdowns */
#nav li ul
{
	position: absolute;
	left: -9999px;
	border: 1px solid #7f7f7f;
	border-top: none;
	background: #fff url('../images/nav_dropdown_bg.gif') 0 0 repeat-x;
}

/* dropdown widths */
#nav-general ul,
#nav-general li { width: 260px; }
#nav-cosmetic ul,
#nav-cosmetic li { width: 200px; }
#nav-health ul,
#nav-health li { width: 200px; }
#nav-resources ul,
#nav-resources li { width: 150px; }

/* dropdown when visible */
#nav li:hover ul, #nav li.sfhover ul { left: auto; }

/* selected items */
body#sedation #nav-sedation,
body#implants #nav-implants,
body#crowns #nav-crowns,
body#porcelain-crowns #nav-porcelain-crowns,
body#children #nav-children,
body#tmj #nav-tmj,
body#bridges #nav-bridges,
body#fillings #nav-fillings,
body#microdental #nav-microdental,
body#cosmetic #nav-cosmetic-sub,
body#veneers #nav-veneers,
body#whitening #nav-whitening,
body#porcelain-crowns #nav-porcelain-crowns2,
body#implants #nav-implants2,
body#bonding #nav-bonding,
body#diode #nav-diode,
body#painless #nav-painless,
body#cancer #nav-cancer,
body#biologic #nav-biologic,
body#breath #nav-breath,
body#resources #nav-resources-sub,
body#media #nav-media { color: #568fb1; }

/* nav item exceptions */
#nav-sedation { font-weight: bold; }

/* #04 - SIDEBAR NAVIGATION ***************************************************/

#sidenav
{
	float: right;
	margin-bottom: 24px;
}

/* basic setup */
#sidenav ul
{
	width: 219px;
	height: 256px;
	list-style: none;
}

#sidenav ul li { height: 32px; }
#sidenav a
{
	display: block;
	height: 32px;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent url('../images/sidenav.jpg') 0 0 no-repeat;
}
#sidenav #sidenav-flash-fix { height: 32px; }
#sidenav #sidenav-promos { background-position: 0 -256px; }
#sidenav #sidenav-promos:hover { background-position: -219px -256px; }

#sidenav #sidenav-photo-tour { background-position: 0 -224px; }
#sidenav #sidenav-photo-tour:hover { background-position: -219px -224px; }
body#photo-tour #sidenav #sidenav-photo-tour { background-position: -438px -224px; }

/* This button has been replaced by the larger call-to-action */
/* #sidenav #sidenav-appointment { background-position: 0 0; } */
/* #sidenav #sidenav-appointment:hover { background-position: -219px 0; } */
/* body#contact #sidenav #sidenav-appointment { background-position: -438px 0; } /* contact page */


#sidenav #sidenav-payment { background-position: 0 -32px; }
#sidenav #sidenav-payment:hover { background-position: -219px -32px; }
body#payment #sidenav #sidenav-payment { background-position: -438px -32px; }

#sidenav #sidenav-consultation { background-position: 0 -64px; }
#sidenav #sidenav-consultation:hover { background-position: -219px -64px; }
body#consultation #sidenav #sidenav-consultation { background-position: -438px -64px; }

#sidenav #sidenav-warranty { background-position: 0 -96px; }
#sidenav #sidenav-warranty:hover { background-position: -219px -96px; }
body#warranty #sidenav #sidenav-warranty { background-position: -438px -96px; }

#sidenav #sidenav-emergencies { background-position: 0 -128px; }
#sidenav #sidenav-emergencies:hover { background-position: -219px -128px; }
body#emergencies #sidenav #sidenav-emergencies { background-position: -438px -128px; }

#sidenav #sidenav-rewards { background-position: 0 -160px; }
#sidenav #sidenav-rewards:hover { background-position: -219px -160px; }
body#rewards #sidenav #sidenav-rewards { background-position: -438px -160px; }

#sidenav #sidenav-forms { background-position: 0 -192px; }
#sidenav #sidenav-forms:hover { background-position: -219px -192px; }

/* #05 - CONTENT **************************************************************/

.content
{
	float: left;
	width: 681px;
	margin-left: 24px;
}

.sidebar
{
	float: right;
	width: 243px;	 
}
.sidebar.sb-main { background: transparent url('../images/sidebar_bg.gif') 0 0 no-repeat;  }

/* #06 - FOOTER ***************************************************************/

#footer
{
	width: 912px;
	padding: 20px 34px 0;
	height: 120px;
	background: transparent url('../images/footer_bg.jpg') 0 0 no-repeat;
	
	overflow: hidden;
	text-align: left;
}

#subfooter { clear: both;  padding-top: 20px; }

/* #07 - OTHER ****************************************************************/

.clear { clear: both; }