/************************************************************************************************************************************
Copyright © 2009 ECKANKAR. All rights reserved.
This copyright applies to this home page and all other pages and content of this Web site. The terms ECKANKAR, ECK, EK, MAHANTA, SOUL TRAVEL, and VAIRAGI,
among others, are trademarks of ECKANKAR, PO Box 2000, Chanhassen, MN 55317-2000 USA.
*************************************************************************************************************************************/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

NOTE FROM THE AUTHOR

This CSS code has been designed in a way that it is easily changed for
future use.

The code has been fully commented so it is easily changed.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




/**** UNIVERSAL SETTINGS   ****
This code is to change the overall appearance of the page.

It will change the:
					~ link colours in the menu
					~ background colour and the gradients
					~ the box with the gold borders
******************************/


a:link {
	color: #d4af37; /* gold colour for links in site */
}

a:hover{
	text-decoration: underline;
	color: #F0DFB9; /* light gold colour for hover state of gold links */
}

a:visited {
	color: #d4af37; /* gold colour for visited links */
}





* /* DO NOT DELETE - this makes the page display properly in all browsers */
{
border: 0;
margin: 0;
}





/* This sets up initial apperance of page, colour of the background and overall font styles used */

body
{

	font: 13px Tahoma, Arial, Helvetica, sans-serif; /* changes font and size that is displayed throughout the entire page*/
	color: #006; /* change colour of font throughout the entire page - Does not include link colours and white text*/
	background: #039 url(images/bg3.png) repeat-x;
	/* #039 is the background color of the page
	- the url(image/bg3.png) is the gradient
	- the repeat-x get it to repeat forever along the x axis.*/
}

#bg{
	background:url(images/content_bg3.png) repeat-x;
	/* bgPattern.png this is the gradient for the background:no-repeat center top
~ url(images/bgPattern) calls on the gradient picture in the images folder - on the seminar page it's the apple blossum flower picuture ~ no-repeat means don't repeat it
~ centre top aligns the image to the centre and the top of the webpage.	*/
}



#main /** box with the gold borders **/
{
margin: 0 auto; /* DO NOT DELETE - this sets the overall appearance of the box with the gold borders */
width: 778px; /* this sets the width of the box with the gold borders */
background: #00236C; /* this makes the box background blue */
border-right: 3px solid #d4af37; /* this makes the gold border on the right */
border-left: 3px solid #d4af37; /* this makes the gold border on the left */
}




/******************************************************

                 HEADER

 This is the top most box which contains the animation


*******************************************************/

#header
{
width: 778px; /* sets the width for the box*/
margin: 0px; /* DO NOT DELETE - sets the margin width for the box */
height: 327px; /* sets the height of the box */
border-bottom: 8px solid #d4af37; /* gives a border on the bottom of the box */
position:relative; /* DO NOT DELETE */
}


#header-image /* Call on this when a new page is created with a pictiure on the top */
{
width: 778px;
margin: 0px;
height: 160px;
background: #d4af37 url(images/Header2.png) no-repeat center bottom; /* call on the image here to make it appear */
border-bottom: 8px solid #d4af37;
position:relative;
}


/******************************************************

                 CONTENT

 This is the content box houses the light blue box and the menu
 it sits between the vertical gold borders


*******************************************************/

#content
{
width: 768px; /* sets the width of the content box */
padding: 5px; /* sets the space between the edge of the box and where the other boxes sit within it */
}

/* displays the gradient picture in the content box */

#content_bg{
	background: #00236C url(images/content_bg3.png) repeat-x top; /* calls on the picture in the images folder and tells it to repeat along the x axis.*/
	padding: 5px; /* DO NOT DELETE */
	margin-bottom: 5px; /* DO NOT DELETE */
	border-top: 1px solid #006; /* creates a 1px border on the top */
}



/******************************************************

                 LEFT

 This is the light blue box that contains the text


*******************************************************/

#left
{
width: 470px; /* sets the width */
padding: 10px; /* sets the inner padding */
background: url(images/left-alpha-bg.png) repeat; /* sets the image for the background which is repeated constantly on both axes */
border: 1px solid #006; /* creates a 1px border around the box */
font: 12px Tahoma, Arial, Helvetica, sans-serif white;
}



.text{ /* this sets the main colour of the text within the light blue box */
	color:white; /* colour of the text */
	padding-top: 5px;
	padding-bottom: 30px;
}

#left H1, #left H2, #left H3 { /* this sets the heading size and colour for both H1 and H2 */

color: gold; /* gold colour */
font-size: 24px; /* font size */
font-family:Georgia, "Times New Roman", Times, serif; /* font */
padding-top: 20px; /* sets the space and depth from the top */
padding-left: 10px; /* sets the space on the left where the text begins */
font-weight:normal; /* makes it normal width, can choose from: bold, italic or underline*/
border-bottom: 1px solid #006; /*sets border on the bottom */
}

#left a /* this sets the colours of the links within the left light blue box*/
{
 color: white;  /* Link color for the left content box*/
}

#left a:hover{
	text-decoration: none;
	color: #006; /* link hover color for the left content box*/
}

#left a:visited {
	color: #006; /* link visited color for the left content box*/
}
#left .image {
  overflow: hidden;
  color: #333333;
  font-size: .8em;
  text-align:left;
  margin: 7px 0 7px 7px;
}
#left .image h4 {
  margin: 5px;
  color: #888888;
  font-size: 1.2em;
}




/******************************************************

                 CRUMB

 This is the text links above the light blue box


*******************************************************/


.crumb{
	color: #d4af37; /* colour of text */
	font-family:Georgia, "Times New Roman", Times, serif; /* font type */
	font-size: 12px; /* font size */
	font-weight: bold; /* font is bold, also choose from normal or italic */
	padding-bottom:5px; /* padding below the text */
	width: 500px; /* sets width of crumb box */
}


/******************************************************

                 POST

 This is the text below the large gold text


*******************************************************/

.post{
	color: #006; /* color of text */
	font-family:Georgia, "Times New Roman", Times, serif; /* font type */
	font-size: 12px; /* size */
	font-weight: normal; /* font is bold, also choose from normal or italic */
	padding-bottom:3px; /* padding below the text */
}






/******************************************************

                 RIGHT

 This is the menu


*******************************************************/



#right
{
width: 257px;
padding-right: 7px;
padding-top: 7px;
padding-bottom: 7px;
float:right; /* tells the box to float to the right of the container */
}

#right ul  /* sets up the menu system */
{
	list-style: none;
	display:block;
/*
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 0px;
*/

}

#right ul li{  /* sets up the menu system appearance */
	margin-bottom: 10px;
/*	height: 24px;*/
}

#right ul li ul {
	margin-bottom: 10px;
	/*border: 1px solid black;*/

}

#archives ul li {  /* sets up the menu system list*/
	margin-bottom: 5px;
	/*background:url(images/list_style2.png) no-repeat left;*/
	padding-left: 15px;
}

#right h2 { /* heading styles for the menu top */
	height: 34px;
	/*background: url(images/title_right3.png) no-repeat;*/
	font-size: 18px;
	color: white; /* text colour */
	text-align:center;
	padding-top: 12px;
	font-weight: normal;
}

#right a{ /* styles for links */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

#right a:hover { /* style for link when hovered over */
	text-decoration: underline;
}

#right li a { /* style for menu list */
	padding-left: 10px;
	/*background: url(images/img09.gif) no-repeat;*/
}


/******************************************************

                 FOOTER

 This is the footer

*******************************************************/



#footer
{
	background: url(images/footer3.png) repeat-x; /* footer image */
	/*height: 50px;*/
	margin: 0 auto;
	font-size: 8px;
	color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	clear:both;
}

#footer a /* footer links */
{
color: white;
font-size: 10px;
text-decoration: underline;
}
#footer a:hover { /* style for link when hovered over */
	text-decoration: none;
}
.padding /*DO NOT DELETE*/
{
padding: 10px;
color:#FF0000;
font-weight: bold;
}