/* CSS Document */

/*#################TEMP##################*/
/*
div {
outline:1px solid #F00;
}
*/

/*#######################################*/

/*###############DEFAULT#################*/

/* =body Default page properties */
body {
	margin:10px 10px 0 10px;
	padding:0;
	border:0;
font:normal 62.5%  "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font:normal 62.5% Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;	
	}

h1, h2, h3, h4, h5, h6 {
	margin:20px 10px 10px 10px;
	padding:0;
	}

p {
	margin:10px;
	padding:0;
	text-indent:0;
	line-height:150%;
	font-size:1.1em;
	}
	
h1, h2, h3, h4, h5, h6 {
	letter-spacing:0;
	font-weight:400;
}

h1 {
	font-size:2.0em;
	}
		
h2 {
	font-size:1.8em;
	}
	
h3 {
	font-size:1.6em;
	}		

h4 {
	font-size:1.4em;
	}
	
h5 {
	font-size:1.2em;
	}

h6 {
	font-size:1.1em;
	}

li {
	line-height:150%;
	font-size:1.1em;
	}

/*scale font size for nested lists*/
li ul li
{
	font-size:1.0em;
}	

/*google news feed properties*/
.rsspresenter 
{
	margin:0;
	padding:0;
	overflow:auto; /*overflow is set because some content, like video, can unexpectedly expand the feed presenter*/
}
/*background*/
.rsspresenter table
{
	margin:0;
	padding:0;
	background-color:#FFFFFF;
}
/*in the news feed, 'a' will target the article title which is always a link*/
.rsspresenter a
{
	font-size:13px;
}
/*in the news feed, 'font' will target the article summary and sub-heading*/
.rsspresenter font
{
	font-size:11px;
}

.simpletable table 
{
	text-align:center;
	margin:0 auto 0 auto;
	border:solid 3px gray;
}

.simpletable td, .simpletable th
{
	margin:0;
	border:0;
}
.simpletable p 
{
	padding:0;
	margin:0;
	font-size:1em;
}

.nojscript
{	
	border: solid 1px red;
}
.nojscript strong
{
	color:red;
}

blockquote {
	margin-top:20px;
	margin-bottom:20px;
	color:#999999;
	font-size:1.5em;
	text-align:center;
	}
blockquote p {
	line-height:1.5em;
	}	
blockquote p .beginquote, blockquote p .endquote
{
	width:23px; /*images need a width in IE, regardless of whether it's an in-line or block-level element...*/
}

/* =sectionbreakxxx Various text section-breaks */
.sectionbreakmain {
	padding:10px;
	width:360px;
	height:23px;
	margin-left:auto;
	margin-right:auto;
	background:url(assets/SectionBreakLong.jpg) no-repeat center;
	}
.sectionbreaksub {
	padding:10px;
	width:96px;
	height:19px;
	margin-left:auto;
	margin-right:auto;
	background:url(assets/SectionBreakShort.jpg) no-repeat center;
	}
.sectionbreakalt {
	padding:10px;
	width:32px;
	height:40px;
	margin-left:auto;
	margin-right:auto;
	background:url(assets/SectionBreakOrchid.jpg) no-repeat center;
	}

/* =smarea Social Media area. */
.smarea  
{
	margin:20px 5px 5px 5px;
}

/* =promo Promo boxes to emphasise site promotions. */
.promo {
	width:130px;
	margin:30px 20px 30px 20px;
	padding:7px;
	border:2px dotted #FF9900;
	background:url(assets/promoBackground.jpg) repeat-y;
	}	
.promo strong {
	color: #990000; /*#990066;*/
	text-transform:uppercase;
	}
.promo p {
	/*NOTE: Initialise margin and padding as different browsers set different defaults.*/
	margin:0;
	padding:0;
	font-size:1em;
	}

.editorialImageA {
	margin:0;
	padding:0 5px 0 5px;
	float:left;
}
.editorialImageB {
	margin:0;
	padding:0 5px 0 5px;
	float:right;
}
.editorialImageC {
	display:block;
	margin:0 auto 0 auto;
	padding:0 5px 0 5px;
}

.editorialImageD 
{
	margin:0;
	padding:10px;
	float:left;
}
.editorialImageE 
{
	margin:0;
	padding:10px;
	float:right;
}
.editorialImageF 
{
	display:block;
	margin:0 auto 0 auto;
	padding:10px;
}

.enhance1
{
	color:#660000;
	font-size:1.1em;
}

.enhance2
{	
	color:gray;
	font-size:1.1em;
}

.servicePageImage 
{
	border:0;
	margin:0;
	padding:0;
	float:right;
}

#footer p {
	font-size:1em;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}

.infobox {
	margin:0 15px 15px 30px;
	width:120px;
	padding:5px;
	border:1px solid #999999;

	}	
.infobox p {
	/*NOTE: Initialise margin and padding as different browsers set different defaults.*/
	margin:0;
	padding:0;
	font-size:1em;
	text-indent:0;
	color:#999999;
	}
.infobox img {
	padding:3px;
	vertical-align:middle;
	}
.infobox a {
	color:#999999;
	}	

.googleads_style2 
{
	margin:0px 15px 0px 35px;
	padding:0;
	width:120px;
}	

/*advertising*/
.pageadregion
{
	margin:5px 0 5px 0;
	padding:0;
	text-align:center;
}
.pageadunit
{
	margin: 0 2% 0 2%;
	padding:0;
}

/*sidebar b placeholder for widgets and promos*/
.sidebar_bpromoregion
{
	margin:5px 0 5px 20px;
	padding:0;
	width:150px;
	color:#CCCC33;
	text-align:center;
}
.sidebar_bpromoregion a
{
	color:#FF9900;
}

/*recommended product lists, e.g. amz*/
.productlistregion
{
	margin:0;
	padding:0;
	border:0;
	width:100%; /*IE 6 requires width for overflow:hidden to work. Thanks Microsoft.*/
	overflow:hidden;
}
.productlistunit
{
	margin:5px;
	float:left;
}

.adcrsr, .adcrsl
{
	margin:10px;
	padding:0;
	text-align:center;
	font-size:10px; /*width and height are fixed, so font should not be scalable*/
	width:120px;
	height:240px;
	background-color:#996699;
	color:White;
}
.adcrsr a, .adcrsl a {
	color:white;
	}	
.adcrsr p, .adcrsl p {
	margin:2px 5px 8px 5px;
	padding:0;
	line-height:130%;
	}	
.adcrsr
{
	float:right;
}
.adcrsl
{
	float:left;
}
	
.tippingbox {
	padding:10px;
	border:2px dotted #999999;
	text-align:center;
	}	
.tippingbox p {
	/*NOTE: Initialise margin and padding as different browsers set different defaults.*/
	margin:0;
	padding:0;
	font-size:1em;
	}
.tippingbox a {
	color:#999999;
	}	

.emphasisbox {
	padding:10px;
	border:2px dotted #FF9900;
	text-align:center;
	}	
.emphasisbox p {
	/*NOTE: Initialise margin and padding as different browsers set different defaults.*/
	margin:0;
	padding:0;
	}
.emphasisbox h1 {
	color:#FF9900;
	margin-top:0;
	}	
.emphasisbox h5 {
	margin-top:0;
	}	

.highlightbox 
{
	margin:20px;
	padding:10px;
	border: 2px dotted #CC99CC; /*#FFCCFF; /*#FF99FF; /* /*#CCCCCC;*/
}
.highlightbox h5, .highlightbox h4, .highlightbox h3, .highlightbox h2
{
	margin-top:0;
	padding:0;
	text-align:center;
}

/*Service Page Highlight Boxes*/
/*ur	- Usui Reiki Services*/
/*urr	- Usui Reiki Ryoho Services*/
/*hs	- Healing Services*/
.highlightbox_ur, .highlightbox_urr, .highlightbox_hs
{
	margin:20px;
	padding:0 10px 10px 10px;
	border: 2px dotted;
	text-align:center;
}
.highlightbox_ur h5, .highlightbox_ur h4, .highlightbox_ur h3, .highlightbox_ur h2, .highlightbox_ur h1,
.highlightbox_urr h5, .highlightbox_urr h4, .highlightbox_urr h3, .highlightbox_urr h2, .highlightbox_urr h1,
.highlightbox_hs h5, .highlightbox_hs h4, .highlightbox_hs h3, .highlightbox_hs h2, .highlightbox_hs h1
{
	color:#FFCC66; /*#FF9900;FFCC66*/
	margin:20px 0 0 0;
	padding:0;
}
.highlightbox_ur p, .highlightbox_urr p, .highlightbox_hs p
{
	margin-top:0.5em;
}
.highlightbox_ur
{
	border-color:#CC9999; /*CC9999 996666;*/
}
.highlightbox_urr
{
	border-color:#CCCC99; /*CCCC33 999933 ; /*CCCC99;*/
}
.highlightbox_hs
{
	border-color:#CC9966; /*996633*/
}

	
.servicefactbox {
	border:2px solid #660000;
	background-color:#CC9966;
	}	
.servicefactbox h1 {
	margin-top:5px;
	text-align:center;
	color:#660000;
	}	
.servicefactbox h4 {
	margin-top:10px;
	margin-bottom:0;
	padding:0;
	font-style:italic;
	color:#660000;

	}		
.servicefactbox	p {
	margin-top:0;
	padding:0;
	}
.servicefactbox ol 
{
	margin-top:0;
}
.servicefactbox a.bookinglink {
	display:block;
	padding:10px;
	text-align:center;
	border:2px solid #660000;
	background-color:#FFFFFF;
	font-weight:bold;
	}	
.servicefactbox table {
	width:95%; /*note: margin-right has no effect on the table (all other margins work as expected) so width has been set instead*/
	margin:5px 10px 5px 10px;
	border:2px solid #660000;
	}
.serviceschedule 
{
	text-align:left;
	background-color:#CCCC99;
	padding:0.5em 0.8em 1em 0.8em;
	margin:1em 1.2em 1em 1.2em;
}
.serviceschedule h5, .serviceschedule h6, .serviceschedule p
{
	padding:0;
	margin:0;
}
.serviceschedule h5, .serviceschedule h6
{
	color:#660000;
}
.serviceschedule p, .serviceschedule li
{
	color:#000000;
}

.serviceschedule h5 
{
	margin-top:0.5em;
	font-weight:bold;
}
.serviceschedule h6
{
	margin-top:0.5em;
	font-style:italic;
}

.media 
{
	text-align:center;
	color:#996633;
}

blockquote p .beginquote {
	padding:5px 20px 10px 10px;
	margin:0;	
	background:url(assets/dql.jpg) no-repeat top;
}
blockquote p .endquote {
	padding:5px 10px 10px 20px;
	margin:0;	
	background:url(assets/dqr.jpg) no-repeat top;
}
blockquote p.signed {
	font-size:0.8em;
	}

form 
{
	width:340px;
	text-align:center;
	margin:10px auto 10px auto;
	color:#CCCCCC;
	background-color:Gray;
	padding:10px 0 10px 0;
	border:solid 3px #999999;
	
}

form table
{
	width:320px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

form h3 
{
	margin:5px 0 5px 0;
}

form select 
{
	margin:5px;
}


/*ASP.Net validator controls*/	
.ValidatorControl 
{
	/*Note: Some properties, like Font colour cannot be changed through CSS. These are changed directly on the ASP.Net page.*/
	font-weight:bold;
}		

.serviceannouncement 
{
	border:dotted 2px red;
}

/*	
blockquote {
	font-size:1.5em;
	text-align:left;
background-color:#CCCCCC;
border:1px solid red;

width:20%;
width:150px;
padding-left:20px;
margin-left:auto;
margin-right:auto;

margin-left:200px;
width:40%;
}	

blockquote p {
	margin:0;
	padding:0;
	}
	
*/		


/*#######################################*/

/*################STORE##################*/
.store 
{
	margin:0;
	padding:0;
	width:100%;
}

/*#######################################*/

/*################LAYOUT#################*/

/* =container Container for all elements. Also provides faux background image for sidebar_b */
/* =fauxcontainer Child of #container required solely for faux background image of sidebar_a, 
though necessarily inherits all elements that should otherwise have belonged in #container.*/
#container, #fauxcontainer {
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;	
	}
#container {
	min-width:760px;
	max-width:1240px;
	background:url(assets/ColumnBBackground.jpg) repeat-y right;
	}
#fauxcontainer {
	background:url(assets/plasterBackground.jpg) repeat-y left;
}

/* =sidebar_a Side Bar with main navigation menu */		
#sidebar_a {
	float:left;
	width:200px;	
	background: url(assets/plasterBackground.jpg) repeat-y;
}

#sidebartop_a {
	height:239px;
	background:url(assets/reikiScript.jpg) no-repeat;
}

#sidebarbottom_a {
	height:392px;
	background:url(assets/reikiBamboo.jpg) no-repeat bottom left;
}

/* =sidebar_b Side Bar with ads */
#sidebar_b {
	float:right;
	width:170px;
	height:239px;
	}

#sidebartop_b {
	width:170px;
	height:239px;
	background:url(assets/reikiOrchid.jpg) no-repeat right;
}


#masthead {
	width:360px;
	height:239px;	
	margin-right:auto;
	margin-left:auto;
}

#masthead_a {
	height:60px;
	background:url(assets/California_Reiki.jpg) no-repeat;
}

#masthead img {
	display:block;
	margin-top:19px;
	height:106px;
	margin-left:auto;
	margin-right:auto;
}

#masthead_b {
	margin-top:59px;
	margin-top:16px;
	margin-left:auto;
	margin-right:auto;
	width:360px;
	height:23px;
	background:url(assets/SectionBreakLong.jpg) no-repeat bottom;
	}

#content {
	margin-left: 205px;
	margin-right:175px;
}

#footer {
	clear:both; 
	height:100px;	
}
#footer a {
	color:#999999;
}	


/*#######################################*/

/*##############NAVIGATION###############*/

/* =navbox Container for navigation menu*/		
.navbox {
	margin-top:20px;
	margin-left:5px;	
	width:195px;
}

/* List of site navigation links.*/
.navbox ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}
.navbox li {
	padding:0;
	}	
	
/* =navlist Holds dummy background image for buttons which expands to fill any gaps
between the button images themselves. This happens when .navbox anchor height is increased*/
.navbox .navlist {
	background:url(assets/mnuBtnBackground.jpg) repeat-y;
}

/* =navtop Displays graphic for top of navigation menu. */
.navbox .navtop {
	height:5px;
	background:url(assets/mnuBtnTop.jpg) no-repeat left bottom;
}	

/* =navbottom Displays graphic for bottom of navigation menu */
.navbox .navbottom {
	height:5px;
	background:url(assets/mnuBtnBottom.jpg) no-repeat;
	}


/* =a General properties for all anchors in the navigation menu. */ 
.navbox a {
	display:block;
	width:100%; /*WARNING: A size value is required to prevent white-space bug in IE6: Anchors within li in XHTML must have a dimension if 'display:block' is set*/
	min-height:30px; /*This should be the same as the height of the background button image otherwise images will overlap if height is reduced beyond this.*/
	text-decoration:none;
	color:#333333;
}	

/* =.navtext Text portion of the anchor for menu links. This is implemented as a separate selector from the
anchor (.navbox a) to box the text and alow it to wrap independently of the button image. i.e. multiline 
text will all wrap neatly to the right of the image, instead of wrapping underneath the image on the second 
line - similar to having a text-indent value that works across all lines and not just the first.
IMPORTANT: This is the reason for the otherwise unnecessary use of in-line <SPAN> tags in the anchor XHTML.*/
.navtext {
	display:block;
	margin-left:23px; /*Effectively indents text to right of button image*/
	padding:7px; /*A 7px top offset seems the best compromise to cover a range of font sizes*/
	}

/* =a Properties for non-visited and visited links in each menu item. */
.navbox a:link, .navbox a:visited {
	background:url(assets/mnuBtnViolet.jpg) no-repeat left center;
	}

/* =a Properties for links in each menu item on mouse-over. */
.navbox a:hover {
	background:url(assets/mnuBtnVioletEmphasis.jpg) no-repeat left center;
	}

/* a= Properties for links in each menu item when they are clicked. */
/*
.navbox a:active {
	background:url(assets/mnuBtnAmberEmphasis.jpg) no-repeat left center;
	}
*/
/** Highlight selectors to highlight current page in the navigation menu**/
/* Each XHTML anchor is assigned a class to match an ID added to the BODY tag. The ID of the
body therefore dictates which one of the selectors will get matched below. Each new menu item
must have a new selector added below.*/
#home .navbox a.home,
#aboutme .navbox a.aboutme,
#reikihealingclasses .navbox a.reikihealingclasses,
#reikihealingsessions .navbox a.reikihealingsessions,
#reikidistancehealingsessions .navbox a.reikidistancehealingsessions,
#makereikibooking .navbox a.makereikibooking,
#contactme .navbox a.contactme,
#testimonials .navbox a.testimonials,
#reikiresources .navbox a.reikiresources,
#tipping .navbox a.tipping,
#blogme .navbox a.blogme {
		background:url(assets/mnuBtnAmber.jpg) no-repeat left center;
	}
/*These ensure the selected anchor is also highlighted on hover*/
#home .navbox a.home:hover,
#aboutme .navbox a.aboutme:hover,
#reikihealingclasses .navbox a.reikihealingclasses:hover,
#reikihealingsessions .navbox a.reikihealingsessions:hover,
#reikidistancehealingsessions  .navbox a.reikidistancehealingsessions:hover,
#makereikibooking .navbox a.makereikibooking:hover,
#contactme .navbox a.contactme:hover,
#testimonials .navbox a.testimonials:hover,
#reikiresources .navbox a.reikiresources:hover,
#tipping .navbox a.tipping:hover,
#blogme .navbox a.blogme:hover {
	background:url(assets/mnuBtnAmberEmphasis.jpg) no-repeat left center;
	}

/*#######################################*/
.ef {border:solid 1px silver;padding:2px}
/*#######################################*/