@import url("enriched.css");

/* BASE */

body {
	margin: 0;
	padding: 0;
	background-image: url(/images/layout/background.png);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
}

a:link,
a:visited {
	color: #0093d1;
	text-decoration: none;
}

a:hover {
	color: #006f9e;
	text-decoration: underline;
}



/*
 *	HEADER BLOCK
 *	
 *	The Header block is the first "row" in the HTML code.
 *	It holds the primary navigation (in the form of an 
 *	unordered list, and the logo.
 *
 */

#hd {
	height: 61px;
	display: block;
}

#hd *{
	margin: 0;
	padding: 0;
}

#hd a:link,
#hd a:hover,
#hd a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#hd a:hover {
	color: #56B9E0;
}

#hd .current a:link,
#hd .current a:hover,
#hd .current a:visited {
	color: #E2E1E1;
	text-decoration: none;
}

#hd .current a:hover {
	text-decoration: none;
}

#hd #logo {
	float: left;
}

#hd img {
	border: none;
}

#hd ul#nav {
	margin: 0 auto;
/*	float: left;*/
	list-style: none;
	width: 550px;
	display: block;
}

#hd ul#nav li {
	font-weight: normal;
	font-size: 11px;
	list-style: none;
	margin: 0;
	float: left;
	padding: 20px 0px;
}

#hd ul#nav li a {
	padding: 5px 10px;
	background-image: url(/images/layout/header-nav-seperator.gif);
	background-position: right;
	background-repeat: no-repeat;
}

#hd ul#nav li:last-child a,
#hd ul#nav li.last a {
	background-image: none;
}


/*
 *	BANNER BLOCK
 *	
 *	The banner block is the second "row" in the HTML code.
 *	It holds a main image, that's it.
 *
 */

#banner {
	height: 257px;
}

#banner img {
	margin: 0 auto -23px auto;
	display: block;
	clear: both;
	position: relative;
	top: -23px;
}

#bannernew {
	height: 325px;
}


/*
 *	CONTENT-HEADER BLOCK
 *	
 *	The Content-Header block is the third "row" in the code.  
 *	It holds the page title and the 'book your appointment online'
 *	button and has a line underneath it as well.
 *
 */

#content-header {
	border-bottom: 1px solid #01628d;
	padding: 0 0 10px 0;
}

#content-header h1 {
	font-weight: normal;
	padding: 0;
	display: inline;
	float: left;
	margin: 12px 0 0 12px;
	height: 43px;
}


#content-header h1 span {
	display: none;
}

#content-header h1.home {
	background-image: url(/images/layout/content-header-home.png);
	width: 403px;
}

#content-header h1.ourteam {
	background-image: url(/images/layout/content-header-ourteam.png);
	width: 403px;
}

#content-header h1.ourfacility {
	background-image: url(/images/layout/content-header-facility.png);
	width: 403px;
}

#content-header h1.services {
	background-image: url(/images/layout/content-header-services.png);
	width: 403px;
}

#content-header h1.beautiful {
	background-image: url(/images/layout/content-header-beautiful.png);
	width: 403px;
}

#content-header h1.contactus {
	background-image: url(/images/layout/content-header-contactus.png);
	width: 403px;
}

#content-header h1.drwesantosh {
	background-image: url(/images/layout/content-header-drwesantosh.png);
	width: 403px;
}

/*
#content-header .accessory-button a{
	float: right;
	display: inline;
	margin: 10px 10px 10px 0;
	padding: 0;
	height: 44px;
	width: 269px;
	background-image: url(/images/layout/book_appointment_sprite.png);
	background-repeat: no-repeat;	
}

#content-header .accessory-button span {
	display: none;
}

#content-header .accessory-button a:hover{
	background-position: 0 -44px;
}

#content-header .accessory-button a:active{
	background-position: 0 -88px;
}*/

.accessory-button {
	display: inline-block;
	margin: 10px 10px 10px 160px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.accessory-button:hover {
	text-decoration: none;
}

.accessory-button:active {
	position: relative;
	top: 1px;
}

.blue {
	color: #f0ffff !important;
	border: solid 1px #c9c6a7;
	background: #0292ce;
	background: -webkit-gradient(linear, left top, left bottom, from(#28befd), to(#026e9c));
	background: -moz-linear-gradient(top,  #28befd,  #026e9c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#28befd', endColorstr='#026e9c');
}

.blue:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#06b4fd), to(#027aac));
	background: -moz-linear-gradient(top,  #06b4fd,  #027aac);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#06b4fd', endColorstr='#027aac');
}

.blue:active {
	color: #79ffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#026e9c), to(#28befd));
	background: -moz-linear-gradient(top,  #026e9c,  #28befd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#026e9c', endColorstr='#28befd');
}


/*
 *	LEFT NAVIGATION BLOCK
 *	
 *	The navigation block is the fourth "row" in the HTML code.
 *	It in most cases will list the locations of Saskatoon Smiles, 
 *	and in other cases will be a secondary navigation, where sub-pages live.
 *
 */

#left-nav {
	border-right: 1px solid #01628d;
	padding: 0 0 35px 0;
}

#left-nav ul,
#left-nav ul li {
	margin: 0;
	padding: 0;
	list-style: none;	
}

#left-nav li {
	background-color: #01628d;		
}

#left-nav li.alt {
	background-color: #FFFFFF;	
}

#left-nav li span {
	padding: 8px;
	display: block;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

#left-nav li span a img {
	position: relative;
	top: 6px;
	left: 4px;
	border: none;
}

#left-nav li span a:link,
#left-nav li span a:hover,
#left-nav li span a:visited,
#left-nav li span a:active {
	color: #FFFFFF;
	text-decoration: none;
}

#left-nav li span a:hover {
	text-decoration: underline;
}

#left-nav li li {
	background-color: #e2e1e1;
}

#left-nav li li span {
	font-weight: normal !important;
	color: #000000;
	padding: 8px 8px 8px 11px;
}

#left-nav li li span a:link,
#left-nav li li span a:hover,
#left-nav li li span a:visited,
#left-nav li li span a:active {
	color: #000000;
	text-decoration: underline;
}

#left-nav li span a:hover {
	text-decoration: none;
}

#left-nav li li li {
	background-color: #FFFFFF;
}


#left-nav li li li span {
	padding: 8px 8px 8px 14px;
}


/*
 *	CONTENT BLOCK
 *	
 *	The content block is the fifth "row" in the HTML code.
 *	Its purpose is to hold the page's content, and is minimally styled.
 *
 */

#content {
	font-size: 12px;
}

#content h1 {
	font-size: 20px;
}

#content h2, #content-lower h2 {
	color: #414141;
	font-size: 13px;
	padding: 12px 0 8px 0;
}

#content blockquote {
	margin: 1em 20px;
	padding-left: 50px;
	min-height: 41px;
	font-size: 16px;
	font-style: italic;
	background: transparent url(/images/quote.gif) no-repeat;
}

h2.e4d {
	background-image: url(/images/e4ddentist.png);
	width: 203px;
	min-height: 14px;
	max-height: 14px;
}

h2.invisalign {
	background-image: url(/images/invLogo.gif);
	width: 152px;
	min-height: 14px;
	max-height: 14px;
}

h2.invisalignlogo {
	background-image: url(/images/invisalignlogo.png);
	width: 208px;
	min-height: 29px;
	max-height: 29px;
}

h2.zoomlogo {
	background-image: url(/images/zoomlogo.png);
	width: 111px;
	min-height: 4px;
	max-height: 4px;
}

#content h2 span, #content-lower h2 span {
	display: none;
}

#content hr {
  border-color: #F1EDE5;
  border-style: solid;
  border-width: 5px 0 0;
  clear: both;
  margin: 0 0 20px;
  height: 0;
}

#content .gallery img {
	border: none;
	padding: 0 10px 0 0;
}

#content img {
	border: 5px solid #C5E4F6;
	margin: 5px;
}

.aligncenter { 
	display:block;
	margin:0 auto;
}

.alignleft { 
	float:left;
}

.alignright { 
	float:right;
}

.profilepic {
	margin: 0 0 0 0;
}
.video {
	padding: 0 15px 15px 0;
}

.caption { 
	border:1px solid #666; 
	text-align:center; 
	background:#ccc; 
	padding:10px; 
	margin:10px; 
}

ul.contactlist {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

ul.servicelist  {
	list-style: disc inside;
	margin: 1em 0;
	padding: 0;
}

ul.contactlist li {
	margin: 0;
	padding: 3px 10px 5px 20px;
	border-bottom: 1px solid #B4A782;
}

ul.servicelist li {
	margin: 0;
	padding: 3px 10px 5px 20px;
}

ul.contactlist li:hover, ul.servicelist li:hover {
	color: #000;
	background-color: #f0EDE6;
}

/* Contact Form Styling */

fieldset {      
	float: left;      
	clear: both;      
	width: 100%;      
	margin: 0 0 -1em 0;      
	padding: 0 0 1em 0;      
	border-style: none;      
/*	border-top: 1px solid #525252;      */
	background-color: #F1EDE5;   
	background-image: url(/images/form_gradient.jpg);     
	background-repeat: repeat-x;  
}

legend {     
	margin-left: 1em;     
	padding: 0;     
	color: #000;     
	font-weight: bold;    
}

fieldset ol {   
	padding: 1em 1em 0 1em;   
	list-style: none;  
}  

fieldset li {    
	float: left;    
	clear: left;    
	width: 100%;    
	padding-bottom: 1em;   
}  

fieldset.submit {     
	float: none;     
	width: auto;     
	border-style: none;     
	padding-left: 12em;     
	background-color: transparent;     
	background-image: none;    
}

label {    
	float: left;    
	width: 10em;    
	margin-right: 1em;   
}

label em {        
	display: block;        
	color: #060;        
	font-size: 85%;        
	font-style: normal;        
	text-transform: uppercase;       
}

/*
 *  HOMEPAGE FEATURED
 *
 *  Added 07/2010 to allow for featured content on the bottom of the content block
 *
 */

#content-lower {
	background-color: #e2e1e1;
	font-size: 12px;
	padding: 20px 10px 0 10px;
	border-top: 1px solid #01628d
	
}


/*
 *	FOOTER BLOCK
 *	
 *	The content block is the sixth and final "row" in the HTML code.
 *	It holds some miscellaneous text and a bit of navigation.
 *
 */

#ft {
	border-top: 1px solid #01628d;
	font-size: 11px;
	color: #414141;
	padding: 0;
	margin: 0;
}

#ft p {
	float: left;
	padding-left: 8px;
}

#ft a,
#ft a.yastech:visited,
#ft a.yastech:hover,
#ft a.yastech:active {
	border: 1px solid #01628D;
	border-top: none;
	background-color: #C5E4F6;
	float: right;
	padding: 10px;
	margin: 0;
	color: #414141;
}

#ft a.yastech:hover {
	text-decoration: none;
}