/** Master Styles for Avalon Dental
The master style sheet takes care of layout, positioning and margins, padding for the main divs.
Also, any rules that target elements by div id are in the master style sheet. These rules would over write the global text styles.
The master-avalonDental.css work together with global-avalonDental to pull together the design.

This design was implemneted with a reset stylesheet as well.

By Taliesin Smith
March, 2008
Last edited: Arpil 22, 2008 **/

/** Colours 
light blue / light grey = #d5e4ea
dark red (headings) = #8f0700
pink / light red = #eacccc
dark blue = #629fbd;
**/

body {
	background: #d5e4ea;
	}
/** Layout of Main Div's **/
#container {
	width: 779px;
	margin: 0 auto;
	position: relative;
	}
#pageHeader {
	height: 308px;
	}
#pageHeader #homeLink {
	position: relative;
	top: 100px; /*approx 100px at default size*/
	left: 112px;
	display: block;
	width: 74px;
	height: 149px;
	background: #fff url(../images/cssImages/logo.gif) no-repeat top left;
	outline: none;
	}
#navBar {
	height: 41px;/*40px*/
	}
#content {
	float: right;
	width: 480px;
	}
#sideBar {
	float: left;
	width: 219px;
	margin-left: 41px;
	padding: 0;	
	}
#checkUp {
	height: 25em; /*approx 260px*/
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	}

#pageFooter{
	clear: both;
	width: 779px;
	}
#sideBar, #content { /*padding for top of pageFooter*/
	padding-bottom: 40px;
	}
	
/** Container Colours and Backgrounds **/
#container { 
	background: #fff url(../images/cssImages/bg-contentContainer.jpg) repeat-y top left;
	}
#pageHeader { 
	background: #fff url(../images/cssImages/bg-pageHeader.jpg) no-repeat top left;}	
#navBar { 
	background: transparent url(../images/cssImages/bg-navBar.jpg) no-repeat bottom left;}
#content { 
	background-color: transparent;}
#sideBar { 
	background: #eacccc url(../images/cssImages/bg-menu.png) no-repeat top left;}
#menu { 
	background-color: #eacccc;
	}
#checkUp {
	background: #d5e4ea url(../images/cssImages/bg-checkUp.jpg) no-repeat bottom right;
	}
#pageFooter {
	background-color: #629fbd;
	}

/** Hidden Elements **/
h1#branding, h2#tagLine, #pageHeader #homeLink {
	text-indent: -9999px;
	}
h2#tagLine {
	position: absolute;
	top: 295px; /*approx 250px at default */
	left: 41px;
	width: 219px;
	height: 2em;
	margin: 0;
	padding: 0;
	background: transparent url(../images/cssImages/whiteBox.jpg) repeat-y top left;
	}
	
/** SideBar and Navigation Bars **/
.pipeLine {
	list-style-type: none;
	}
.pipeLine li {
	display: inline;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-right: 0.55em; /*padding bigger on li to compensate for border*/
	}
.pipeLine a {
	/*padding-right: 0.25em;*/
	padding-left: 0.5em;
	}
.pipeLine li.last {
	border-right: none;
	}
#menuTop {
	position: absolute;
	top: 27px; /*was 31*/
	left: 75px;
	width: 155px;
	margin: 0;
	padding: 0;
	}

#menuTop a {
	color: #666;
	}
#menuTop li {
	border-color: #666;
}
#navBar ul {
	width: 488px; /* content width plus content left margin minus ul left padding */
	text-align: left;
	margin: 0 0 0 260px;
	padding: 1.25em 0 0 30px; /* was 1.25em 0 0 40px*/
	background-color: #629fbd;
	}
#navBar li, #pageFooter li {
	border-color: #8f0700;
	}
#navBar a {
	font-size: 1.3em;
	color: #fff;
	font-weight: normal;
	}
#navBar a:hover, #pageFooter a:hover{
	color: #8f0700;
	text-decoration: none;
	}
.listFancy {
	margin-top: 40px;
	list-style-type: none;
	text-align: center;
	background: transparent url(../images/cssImages/li.jpg) no-repeat bottom center;
	}
.listFancy li {
	font-size: 1.4em;
	padding: 0.25em 0;
	background: transparent url(../images/cssImages/li.jpg) no-repeat top center;
	}
.listFancy li.first {
	background: none;
	}
.listFancy a {
	display: block;
	}
.listFancy a:hover {
	color: #629fbd;
	text-decoration: none;
	}
	
/** Menu hover styles still need some attention to synchronize link/anchor behaviour **/
#sideBar .listMenu {
	margin-left: 50px;
	}
.listMenu li:hover {
	color: #8f0700;
	}
.listMenu a {
	display: block;
	height: 1%; /* to stop double spacing in IE 6*/
	}
.listMenu a:hover {
	color: #629fbd;
	text-decoration: none;
	}
	
/** Button styles **/
a.button span {
	cursor: pointer;
}
a.button, a.button:link, a.button:hover, a.button:active { 
 	background: transparent url(../images/cssImages/anchorButton.gif) no-repeat center left;
 	color: #fff;
 	text-decoration: none;
 	display: block;
 	height: 20px;
 	width: 20px;
 	}
.button span {
	color: #fff;
 	margin-left: 20px;
 	padding-right: 20px;
 	background: transparent url(../images/cssImages/spanButtonLong.gif) no-repeat center right;
 	display: block;
 	height: 20px;
 	line-height: 20px;
 	}
.button span.readMore {
 	width: 5em;
 	}
 .button span.request {
 	width: 9.5em;
 	}

/** Content Styles that over-write global styles by div id **/
#sideBar h3, #sideBar address, #sideBar ul {
	margin-left: 40px;	
	}
#sideBar .wrapper {
	padding-bottom: 40px;
	margin-left: 40px;
	}
#menu h3  {
	color: #8f0700;
	}
#checkUp p {
	width: 119px;
	margin-left: 40px;
	margin-bottom: 6em;
	}
#checkUp strong { 
	color: #8f0700;
	}
#checkUp p strong {
	font-size: 19px; 
	line-height: 21px; 
	font-weight: normal;
	}
#checkUp p {
	font-size: 14px; 
	line-height: 16px;
	}
#contactInfo h3 {
	margin-bottom: 0;
	color: #666;
	font-size: 1.1em;
	}
#contactInfo address {
	color: #666;
	padding-bottom: 2em;
	}
#pageFooter * {
	color: #fff;
	font-size: 1.1em;
	}
#pageFooter p {
	float: left;
	margin: 15px 0 0 40px;
	padding-left: 0;
	}
#pageFooter ul {
	font-size: 1em;
	text-align: right;
	padding: 15px 10px 10px 0;
	margin: 0;
	}
.name {
	color: #8f0700;
	text-align: right;
	margin-top: 0;
	}
div.testimonial .name {
	text-align: left;		
	}
div.testimonial, 
div.question { 
	float: left;
	padding-top: 20px;
	}
div.question { 
	width: 54%;
	}	
div.testimonial { 
	width: 45%;
	}
div.testimonial *, div.question * {
	margin: 0;
	}
.question h2 {
	margin-top: 0;
	}
/* Brings back the left margin for the link button */
.question .button span, .testimonial .button span {
	margin-left: 20px;
	}
.question .wrapper {
	clear: both;
	margin-left: 40px;
}
.caption { 
	margin-top: 5px;
	font-style: italic;
	}
.caption strong {
	color: #8f0700;
	font-style: normal;
	font-weight: normal;
}
/**  Horizontal and Vertical Bars **/
div.hr {
	padding-top: 40px;
	width: 438px;
	height: 1px;
	background: transparent url(../images/cssImages/hr.gif) no-repeat scroll center bottom;
	}
div.hr hr {
  display: none;
  }
div.testimonial {
	background: url(../images/cssImages/vrBottom100.gif) no-repeat bottom right;
	}
#menu li h3 a, #menu li h3 {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border-top: none;
	margin: 0;
	padding: 0;
}
.testimonial h2 {
	background: url(../images/cssImages/vrTop400.gif) no-repeat top right;
	padding: 0 0 20px 0;
	}

.testimonial blockquote {
	background: transparent url(../images/cssImages/vrRepeat.gif) repeat-y top right;
	padding: 0 0 0 0;
	}
.testimonial blockquote p {
	padding: 0 20px 0 0;
	margin: 0;
	}
.testimonial p.name {
	padding: 20px 0 20px 0;
	}
.question h2, .question p {
	padding-left: 40px;
	}
.question p {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 40px;
	}
.qotd {
	color: #8f0700;
	}
/** New Styles for question section - after rotating mark-up changes **/
/**Image Styles **/
.question h3 {
	color: #8f0700;
	font-size: 11px;
	margin-left: 40px;
	margin-right: 20px;
}
img {
	width: 182px; 
	height: 182px;
	}
img.big {
	width: 438px; 
	height: 182px;
	}
img.small {
	width: 121px; 
	height: 121px;
	padding: 0 0 0 20px;
}
.question img { 
	width: 121px; 
	height: 121px;
	float: right;
	padding: 0.5em 0 0 0.75em;
	margin-right: -43px; /*pulls the image outside the paragraph to the edge of the container*/
	}
	
/** Images **/	
div.hygienists {
	background-image: url(../images/hygienists-2011.jpg);
	width: 438px;
	height: 182px;
	}	
/** Rules for Images with rounded corners **/
.rc {
	 width: 182px; 
	 height: 182px; 
	 background: url(../images/cssImages/rc182.png) no-repeat bottom right;
	 }
.rcImage {
	width: 182px;
	height: 182px;
	background-repeat: no-repeat;
	background-position: bottom right;
	}	
/** Content images that need rounded corner overlay **/
div.lobby {
	background-image: url(../images/thumbs/lobby.jpg);
	}
div.infectionControl {
	background-image: url(../images/thumbs/infectionControl.jpg);
	}
div.radiography {
	background-image: url(../images/thumbs/radiography.jpg);
	}
div.cleaning {
	background-image: url(../images/thumbs/cleaning.jpg);
	}
div.bonding {
	background-image: url(../images/thumbs/bonding.jpg);
	}
div.bridges {
	background-image: url(../images/thumbs/bridges.jpg);
	}
div.crowns {
	background-image: url(../images/thumbs/crowns.jpg);
	}
div.rootCanals {
	background-image: url(../images/thumbs/rootCanals.jpg);
	}
div.veneers {
	background-image: url(../images/thumbs/veneers.jpg);
	}
div.whitening {
	background-image: url(../images/thumbs/whitening.jpg);
	}
div.cosmeticDentistry {
	background-image: url(../images/thumbs/cosmeticDentistry.jpg);
	}
div.wisdomTeeth {
	background-image: url(../images/thumbs/wisdomTeeth.jpg);
	}
div.whatWeDo {
	background-image: url(../images/thumbs/whatWeDo.jpg);
	}
div.gillies {
	background-image: url(../images/thumbs/gillies.jpg);
	}
div.macDonald {
	background-image: url(../images/thumbs/macDonald.jpg);
	}
div.peddle {
	background-image: url(../images/thumbs/peddle.jpg);
	}
div.penwell {
	background-image: url(../images/thumbs/penwell.jpg);
	}
div.fadavi {
	background-image: url(../images/thumbs/fadavi.jpg);
	}
div.mcGinnis {
	background-image: url(../images/thumbs/mcGinnis.jpg);
	}
div.burridge {
	background-image: url(../images/thumbs/burridge.jpg);
	}
div.vatcher {
	background-image: url(../images/thumbs/vatcher.jpg);
	}
div.jamieson {
	background-image: url(../images/thumbs/jamieson.jpg);
	}

/** General Content Styles that over-write global styles by element **/
h1 strong {
	font-size: 19px; 
	line-height: 19px; 
	font-weight: normal;
	}
li { 
	margin: 0;
	padding: 0;
	}
	
.imgRightTight { /* For content images that are not at the top of the page */
	float:right; 
	margin: 20px 40px 20px 20px;
	}
	
/* Keeps anchored headings looking like headings and not links */
h2 a:link, 
h2 a:visited,
h2 a:focus,
h2 a:hover,
h2 a:active {
	cursor: text;
	color: #8f0700;
	text-decoration: none;
}

/** Form Styles **/
fieldset {
	margin: 1em 0;
	border: none;
	}
fieldset br {
	display: none;
	}
legend {
	font-weight: bold;
	color: #629fbd;
	text-align: left;
	}
form p {
	margin: 0.5em 0 0 0;
	}
#personalInfo div, #requestInfo div {
	margin: 0.5em 0;
	}
#personalInfo div label, #requestInfo div label {
	float: left;
	border: none;
	display: block;
	width: 110px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}
#otherInfo textarea {
	width: 310px;
	background-color: #d5e4ea;
	border: 1px #629fbd solid;
}
#personalInfo input, #requestInfo input {
	background-color: #d5e4ea;
	border: 1px #629fbd solid;
	width: 200px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	margin-right: 10px;
}
#personalInfo input:focus, 
#requestInfo input:focus, 
#otherInfo textarea:focus {
	background-color: #eacccc;
	border: 1px #8f0700 solid;	
}
#formButtons .submit, #formButtons .reset {
	width: 75px;
	height: 20px;
	font-size: 0.95em;
	margin-bottom: 2em;
}
#personalInfo em, form p em  {
	color: #8f0700;
	font-size: 120%;
	font-weight: bold;
	}
/** Error Message styles **/
#em-req_firstname,
#em-req_lastname,
#em-req_email,
#em-req_phone {
	text-align: right;
	color: #8f0700;
	font-weight: bold;
}

/** Here you are indicators - Sections **/
#aboutSection .about,
#servicesSection .services,
#contactSection .contact,
#faqSection .faq {
	color:#8f0700;
	}
	
/** Here you are indicators - Pages **/
body.burridge a.burridge,
body.chisholm a.chisholm,
body.fadavi a.fadavi,
body.gillies a.gillies,
body.hygienists a.hygienists,
body.vatcher a.vatcher,
body.jamieson a.Jamieson,
body.martin a.martin,
body.fowler a.fowler,
body.hynes a.hynes,
body.macDonald a.macDonald,
body.mcGinnis a.mcGinnis,
body.mercer a.mercer,
body.oake a.oake,
body.peddle a.peddle,
body.penwell a.penwell,
body.sansome a.sansome,
body.warren a.warren,
body.winsor a.winsor,
body.bonding a.bonding,
body.bridges a.bridges,
body.cleaning a.cleaning,
body.cosmeticDentistry a.cosmeticDentistry,
body.crowns a.crowns,
body.radiography a.radiography,
body.rootCanals a.rootCanals,
body.veneers a.veneers,
body.whitening a.whitening,
body.wisdomTeeth a.wisdomTeeth {
	color:#666;
	text-decoration: none;
	}