/* Table of Contents: each section in alphabetical order

	1. Typography:  body text and page layout
	2. Header Layout
	3. Main Content Column layout
	4. Right Sidebar Column Layout
	5. Footer Layout
	
*/
 

/*  Constant Colors to use for this website 
cream	#faf2d1  or #f7f0d4
pink inside boxes #ffb7ee

purple-blue Dark (headings, border) #b266ff 
purple Dark  #e2d6fs 
purple Medium (header2) # ccadeb
purple Light  (background, top navigation tabs) #e1d1fa 
off-white off-white background #fafafa  
dark grey #333333  text 
yellow light #ffffdd 
*/


/* Page header put outside large container */
 #header {background-image: url("pix/purpleflower2.jpg");
	background-repeat: repeat;
	border: thin solid #c299ff;
	height: 150px;
	margin: 1em;
	padding: 1em 1em;
	width: 95%;	

}

/* Class position for expandable left column 1-1CSS page & column size*/
container {
position: relative;
width: 90%;
}

.centerbar {
margin-right: 210px;
margin-left: 0px;
float:left
width: 75%
}

.rightbar{
position: absolute;
top: 240px;
right: 0px;
width: 175px;
}

#container {
  margin-right: 5%;
  margin-left: 5%;
}

  
/* Style for main content column content body text and page background */ 
#main { background-color: ##fafafa;
	border: thin solid #c299ff; 
	color: #333333;
	float: left;	
	font-family: 'Comic Sans MS', Arial Rounded MT Bold;
	font-size: large;
	line-height: 1.20em;
	padding: 1em 1em;
	text-align:justify; 
	width: 70%;
}
  
/* Style for rightsidebar column */
#rightsidebar {
	background-color:#e1d1fa;
	border: thin solid #c299ff; 	 
        margin-left: 75%;
	padding: 3px;
	text-align: left;
}
  
 
/* Page footer put outside large container. see L9 pg 17 re clear both; see tutorial on float info */
#footer {background-image: url("pix/purpleflower2.jpg");
	background-repeat: repeat;		
        border: thin solid #c299ff;
	clear: both;
        width: 100%;
}



/* Headings general - all headings are in comic sans and centered*/
h1,h2,h3,h4 {font-family:"comic sans ms", verdana}
h1,h2,h3,h4 {font-weight:bold}
h1,h2,h3,h4 {text-align: center}
h2,h3,h4 {font-size: x-large}


/* Level-1 Headings */
h1{
	color: #995cd6;
	font-size: xx-large;
	
}

/* Level-2 Headings */
h2{
	color: #c299ff;	

}

/* Level-3 Headings */
h3{
	color: #b266ff;

}

/* Blockquote */
blockquote{
	color: #333333;
	font-family: verdana, 'comic sans ms';
	font-size: large;
	text-align: justify;
}

/* Blockquote with creamy yellow background */
blockquote.quote{
	background-color: #ffffdd
	font-family: verdana, 'comic sans ms';
	font-size: large;
	text-align: justify;

}


/* box border thin solid #c299ff unless specified */
.box{border:1px#c299ff}
.box{margin:.5em 1em}


/* Div class for ordering charts or counselling L7 pg 29*/
div.chart{
	background-color: #ffb7ee;
	border-style: outset	
	font-family: Comic Sans MS, verdana;
	font-size: large;
	padding: 20px;
	text-align: justify;


}

/* Float image to left of paragraph */

img.floatLeft{
   float: left;
   margin-right: 5px;

}


/* Float image to right of paragraph */
img.floatRight{
   float: right;
}


/* Center image between margins */
div.center{
   width: 100%;
   text-align: center

}

/*Joy Moments of Joy box style for */ 
#joy{ 	background-image: url("pix/bkg/purpleflower2.jpg");
	background-repeat: repeat;
	border: thick solid #c299ff;
	font-family: ‘comic sans ms’,arial;
	font-color: #995cd6;		
	font-size: x-large;
	font-weight: bold;
	margin: .5em;
	padding: 1em;
	text-align: justify; 
	width: 100%; 
	/* total width is 37em */  
}



/* links see CSS sizing your text pg 16 Try these!!!  */
a:link {color: #696; text-decoration: none; background-color: transparent } a:visited { color: #699; text-decoration: none; background-color: transparent } a:hover { color: #c93; text-decoration: underline; background-color: transparent } a:active { color: #900; text-decoration: underline; background-color: transparent }


/* padding see web building:CSS Style Rules page 7 for changes */
p {padding: 1em 1em;} 



/* Style for main content birth chart */ 
#birthchart{ 
	background-color:#ffb7ee;
	margin: .5em;
	padding: 1em;
	text-align: justify; 
	width: 34em; 
	/* total width is 37em */  
}

/* Style for main content horary chart */ 
#horarychart{ 
	background-color:#ffb7ee;
	margin: .5em;
	padding: 1em;
	text-align: justify; 
	width: 34em; 
	/* total width is 37em */  
}
/* Style for main content synastry chart */ 
#synastrychart{ 
	background-color:#ffb7ee;
	margin: .5em;
	padding: 1em;
	text-align: justify; 
	width: 34em; 
	/* total width is 37em */  
}