/* ANA TABOADA WEB SITE. GENERAL CSS. COPYRIGHT JASON PASCOE 2009. ALL RIGHTS RESERVED. */



/**********************************************/
/******************** PAGE ********************/
/**********************************************/


/* Set the default fonts and colors for the body */
body {
	background-color: #FFF; 
	margin: 0px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 75%;
	line-height: 1.5em;
}

/* No borders on images */
img {
	border: none;
}

/* Headings */
h1 { font-size: 1.5em; text-align: center; text-transform: uppercase; padding-top: 0.5em; overflow: hidden; }
h1 a { color: #FEE895; text-decoration: none; }

h2 { font-size: 1.5em; line-height: 1.5em; }
.Col_1 h2 { text-align: center; }
.Col_3 h2 {text-align: left; }

h3 { font-size: 1.2	em; font-style: italic; font-weight: normal; margin-top: 1em; margin-bottom: 0.5em; overflow: hidden; }

#Sec_Ana_Press h3 { font-size: 1em; margin-top:1.5em; font-weight: bold; }


blockquote {font-style: italic; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-bottom:0px; }
.Quote_Source { font-size: 0.8em; margin-left: 0px; margin-right: 40px; text-align: right; }

/* The main page outline setup */
#Page_Container {
	
	/* Relative so that the logo (and any other items) can be positioned within this container */
	position: relative; 

	/* 800 pixel page width */
	width: 910px;
	padding: 15px 15px;
	
	/* Auto margins on left and right sides will center the page in the browser window, 
	   and the 20 pixel top and bottom margin spaces it out nicely. */
	margin: 20px auto;
}
	
/* A little section on the end to extend the Page_Container out past all the floated sections */
#Footer {
	clear: both;
	width: 1px;
	height: 1px;
}



/**********************************************/
/******************* HEADER  ******************/
/**********************************************/


/* Contains all of the headings & logos */
#Header_Container {
	position: relative;
	width: 910px;
	height: 189px;
	padding: 0px;
}

/* The h1 is where our logo should be. */
h1 {
	padding: 0px;
	margin: 0px;
}

/* The h1 span is the scaffold to place our image overlayed on top of the h1 text */
#Logo {
	
	/* Placing the logo area on the top of h1 area */
	position: absolute;
	top: 0px;
	
	/* We position relative to Header_Container rather than h1 (not least because MS IE6 seems to have unique behaviour when the h1 is centred) */
	left: 216px;	
	padding: 0px;
	margin: 0px;

	/* Setting up the image */
	width: 316px;
	height: 189px;
	background-image: url(images/LOGO_ana_taboada.gif);
}

/* The Column Header contains an image to display on top of the first column */
.Column_Heading {
	position: absolute;
	left: 40px;
	width: 120px;

	/* The image is smaller than 189px but we align it to the column top using the background "bottom" value */
	top: 0px;
	height: 189px;
}

/* Different header images for different sections of the site */
#Welcome_Column_Heading { /*left: 60px; width: 110px;*/ background: url(images/HEADING_COL_welcome.jpg) bottom no-repeat; }
#Ana_Column_Heading { background: url(images/HEADING_COL_ana.jpg) bottom no-repeat; }
#Yoga_Column_Heading { background: url(images/HEADING_COL_padma.jpg) bottom no-repeat; }
#Concerts_Column_Heading { background: url(images/HEADING_COL_concerts.jpg) bottom no-repeat; }
#Massage_Column_Heading { background: url(images/HEADING_COL_massage.jpg) bottom no-repeat; }
#Products_Column_Heading { background: url(images/HEADING_COL_products.jpg) bottom no-repeat; }
#Concerts_Column_Heading { background: url(images/HEADING_COL_events.jpg) bottom no-repeat; }
#Library_Column_Heading { background: url(images/HEADING_COL_library.jpg) bottom no-repeat; }
#Companies_Column_Heading { background: url(images/HEADING_COL_companies.jpg) bottom no-repeat; }
#CD_Column_Heading { background: url(images/HEADING_COL_cd.jpg) bottom no-repeat; }


#Language_Selector {
	position: absolute;
	left: 500px;
	top: 0px;
	width: 240px;
	font-size: .8em;
	text-align: right;
	margin: 0px;
	padding: 0px;
	color: #F2AE32;	
}

#Language_Selector a, #Language_Selector a:hover img {
	text-decoration: none;
	color: #F2AE32;	
}

#Language_Selector .Selected a, #Language_Selector .Selected a:hover {
	font-weight: bold;
	text-decoration: none;
}

#Language_Selector a:hover { text-decoration: underline; }


/**********************************************/
/****************** CONTENT  ******************/
/**********************************************/


/* The Content_Container is a box for all of the main content columns */
#Content_Container {
	position: relative;
	margin: 0px;
	padding: 0px;
}



/**********************************************/
/****************** COLUMN 1  *****************/
/**********************************************/


/* Column 1 changes in different sections of the web site, e.g. the welcome section, or padma overview, etc.*/
/* but its layout is pretty consistent, floated off to the far left */
.Col_1 {
	float: left;
	position: relative;
	width: 250px;
	padding: 0px;
	margin: 0px;
}

.Col_1 a {
	color: #961;
}

.Col_1 a:hover {
	color: #F2AE32;
}


/* Different color schemes for different sections - most use the default one */
.Col_1 { color: #961; background-color: #FEE895; }
#Sec_Welcome.Col_1 { color: #961; background-color: #FFDD00; }
#Sec_Spacer.Col_1 { color: #961; background-color: white; }


/* The outer part of the Col_1 or Col_3 links section gets a border */
.Links_Outer {
	padding: 0.5em 0em 0.5em 0em;
	border: dotted #961;
	border-width: 2px 0px 2px 0px;
}	

/* Setup spacing between the lines of links */ 
.Links p {
	margin-top: 0px;
	margin-bottom: 0px;
	margin: 0px 5px 0px 5px;
}

/* Coming Soon links are a lighter color and not active*/
.Links p.Coming_Soon { color: #D8B882; 	text-transform: uppercase; 	font-weight: bold; font-size: 80%;}
.Links p.Coming_Soon_H { color: #961; 	text-transform: uppercase; 	font-weight: bold; font-size: 80%;}
	
	
/* Any sub-level links get an indent */
.Links .Sub {
	margin-left: 2em;
}

/* Sub-level links get a normal font-weight - else it looks too heavy */
.Links .Sub a {
	font-weight: normal;
}

/* Any new sub-sections get a little space before them*/
.Links .New_Section, .Links .New_Sub_Section, .Links .New_Sub_Section_Heading {
	margin-top: 0.8em;
}

.Links .New_Sub_Section_Heading a {
	font-style:italic;
	/*font-weight: bold;*/
}

/* The list of items needs no bullets or indentation for our purposes */
.Links ul {
	list-style-type: circle;
	margin: 0px;
	padding: 0px;
}

/* Each list element is a menut item */
.Links li {
	
	/* Give some spacing around each element */
	/* Note: not so much space is needed at the top of the column as is needed at the bottom */
/*	margin: 10px 0px 20px 0px;
	padding: 1px; *//* Without the padding the margins are going to collapse. */
}


/* The links get a special formating */
.Links a {
	font-weight: bold;
	font-size: 80%;
	color: #961;
	text-decoration: none;
	text-transform: uppercase;
}

/* When hovered over the links get an underline and color */
.Links a:hover {
	color: #F2AE32;
	text-decoration: underline;
}

/* If a link is actually for a page section currently being dispayed then color it */
.Links a.Selected  {
	color: #F2AE32;	
}



/**********************************************/
/***************** NAVI_INFO  *****************/
/**********************************************/


/* The central column which contains the main navigation menu, contact info, and copyright */
#Sec_Navi_Info {
	float: left;
	width: 250px;
	line-height: 1.3em;
}



/**********************************************/
/******************* MENU  ********************/
/**********************************************/


/* The main navigation menu area */
#Menu {
	float: left;
	width: 250px;
	background-color: #F2AE32;
}

/* The list of items needs no bullets or indentation for our purposes */
#Menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

/* Each list element is a menut item */
#Menu li {
	
	/* Clear the last menu item (and its floated image)	*/
	clear: left;

	/* Give some spacing around each element */
	/* Note: not so much space is needed at the top of the column as is needed at the bottom */
	margin: 10px 0px 20px 0px;
	padding: 1px; /* Without the padding the margins are going to collapse. */
}

/* The menu item image is floated to the left */
#Menu img {
	float: left;
	
	/* Allow a little white space before the text */
	margin: 0px 3px 0px 0px;
}

/* The "strong" first part of the menu item text is emphasised even more by being white */
#Menu a strong {
	color: white;
}

/* Links are not underlined */
#Menu a {
	color: #FEE895;
	text-decoration: none;
}

/* When hovered over the links are underlined */
#Menu a:hover {
	color: #FEE895;
	text-decoration: underline;
}



/**********************************************/
/************* LANGUAGE SELECTOR  ************/
/**********************************************/


/* The Language Selector section */
#Language_Selector_New {
	/* Position after the Navigation float */
	clear: left;
	float: left;
	width: 250px;

	/* Setup the font color and column color */
	color: #FEE895;
	background-color: #F2AE32;
	margin: 0px 0px 0px 0px;
}

/* The text is center */
#Language_Selector_New p {
	padding-top: 1em;
	text-align: center;
}

/* Links are white but not underlined */
#Language_Selector_New a {
	color: white;
	text-decoration: none;
}

/* When hovered over the links go underlined */
#Language_Selector_New a:hover {
	text-decoration: underline;
}



/**********************************************/
/****************** CONTACT  ******************/
/**********************************************/


/* No borders on the contact info table*/
#Sec_Ana_Contacts table, #Sec_Ana_Press table {
	border: none;
	table-layout: fixed;
	width: 100%;
	overflow: hidden;
}

/* Setup for a fixed layout - help us control overflow problems better */
#Sec_Ana_Contacts col.Label { width: 27%; }	
#Sec_Ana_Contacts col.Data { width: 73%; }	
#Sec_Ana_Press col.Date { width: 27%; }	
#Sec_Ana_Press col.Story { width: 73%; }	


/* The Contact table headings are setup to look like regular text and aligned right */
#Sec_Ana_Contacts th, #Sec_Ana_Press th {
	font-weight: normal;
	text-align: right;
	vertical-align: top;
	overflow: hidden;
}

.Press_Title { font-weight: bold; }

/* The contact data */
#Sec_Ana_Contacts td, #Sec_Ana_Press td {
	vertical-align: top;
	text-align: left;
	overflow: hidden;
}

#Sec_Ana_Contacts th { padding: 5px 0px 5px 0px; }  
#Sec_Ana_Contacts td { padding: 5px 0px 5px 5px; }


/* Sub Sections have a separator line */
#Sec_Ana_Contacts .Sub_Section td, #Sec_Ana_Press .Sub_Section td {
	border: dotted;
	border-color: #B27404;
	border-width: 1px 0px 0px 0px;
}



/**********************************************/
/**************** COPYRIGHT  ******************/
/**********************************************/


#Copyright {
	
	/* Copyright comes after all other sections in Navi_Info */
	clear: both;
	margin: 0px 0px 20px 0px;

	/* Copyright has a special font with no background */
	color: #F2AE32;
	line-height: 1.5em;
	text-align: right;
	text-transform: uppercase;
	font-size: 0.7em;
}



/**********************************************/
/***************** COLUMN 3  ******************/
/**********************************************/


/* The third column of the layout, floated off next to the other 2 columns */
.Col_3 {
	position: relative; 
	float: left;
	width: 400px;	

	padding: 0px;
	margin: 0px;
	
	/* Setup the color scheme for this column */
	color: #961;
	background-color: #FEE895;
}

#Sec_CD_Video, #Sec_CD_Resellers, #Sec_CD_Pictures, #Sec_CD_Buy, #Sec_CD_About, #Sec_CD_2CD {
	width: 380px;
}

.Col_3 a {
	color: #961;
}

.Col_3 a:hover {
	color: #F2AE32;
}

/* The list of items needs no bullets or indentation for our purposes */
.Col_3 ul {
	list-style-type: circle;
	padding-left: 2em;
	margin: 0;
}

.Col_3 li {
	line-height: 1.5em;
	margin-top: 0.5em;	
	margin-bottom: 0.5em;	
}
	

/* The News section of the home screen has a special narrow width and color scheme. */
#Sec_News {	width: 250px; color: #FEE895; background-color: #B27404; }

/* The Yoga timetable and events calendar pages needs a bit more width for the table */
/*#Sec_Timetable, #Sec_Timetable_Weekly, #Sec_Timetable_Holiday, #Sec_Concerts_Calendar, #Sec_Yoga {	width: 400px; }
#Sec_CD_Pictures, #Sec_CD_About, #Sec_CD_Buy, #Sec_CD_Video, #Sec_CD_2CD, #Sec_CD_Resellers { width: 380px; }*/
/*#Sec_Prices_Single { width: 250px; }*/


/* Float any images off to the right */ 
/*.Col_3 img { float: right; padding-left: 6px; }*/
/* But the case study section has a special set of images that are not floated off */
/*#Sec_Companies_Case_Study.Col_3 img { float: none; padding: 0px;}
#Sec_Companies_Case_Study.Col_3 p.Image {text-align: center; }
#Sec_CD_Pictures.Col_3 img, #Sec_CD_About.Col_3 img, #Sec_CD_Buy.Col_3 img, #Sec_CD_Resellers.Col_3 img, #Sec_Video.Col_3 img, #Sec_CD_2CD.Col_3 img, #Sec_Home_Intro.Col_3 img  { float: none; padding: 0px;}
*/

/* The Image Replacement for the heading */
/*.Col_3 h2 span {
	position: absolute;
	top: 0; left: 0;
	width: 220px; height: 40px;
}*/

/* Tables will be of fixed layouts with centred text and hidden empty cells */
.Col_3 table {
	table-layout: fixed;
	width: 100%;
	margin-top: 1.5em; margin-bottom: 0em; 
	text-align: center;
	vertical-align: middle;
	empty-cells: hide;
}


/* Setup fonts & borders for the table cells */
/*.Col_3 th, .Col_3 td { 
	padding: 2px; 
	text-align: center;
	line-height: 1.5em; 
	border: solid #FCF8EB; 
	border-width: 2px;
}

.Col_3 th { background-color: #FCEDB4}

.Col_3 td.Comment { border: none; font-size: .8em; text-align: right; padding-bottom: 1em; }
.Col_3 p.Table_Footnote { font-size: .8em; text-align: right; margin-top: 0.5em;}
.Col_3 td.Plus { border: none; background-color: transparent; }*/
/* Additional Text Comments that should be small and supporting of the main text */
.Col_3 .AdditionalText { font-size: .8em; margin-top: 0em; padding-top: .5em; margin-bottom: 0em; padding-bottom: 0em; }


/* Table and Column Sizes for specific sections of the web site */
/*#Sec_Timetable table { width: 100%; }*/
/*#Sec_Timetable col { width: 17%; }*/
/*#Sec_Timetable col.Heading { width: 15%; }*/
#Sec_Timetable th, #Sec_Timetable td { font-size: 0.8em; }
#Sec_Timetable th { font-weight: bold; }
#Sec_Timetable col.Day { width: 14% }
#Sec_Timetable col.Level, #Sec_Timetable col.Name { width: 28% }
#Sec_Timetable col.Time { width: 30%; }
#Sec_Massage_Timetable th, #Sec_Massage_Timetable td { font-size: .8em; }


/* In our new timetable format (September 2009) we just need a line at the top of the table */
/* (Where each table is representing a day of the week) */
#Sec_Timetable table
{
	border-top: 1px solid #F2AE32;
	padding-top: 5px;
	padding-bottom: 15px;
}

/* In our new timetable format (September 2009) we require no cell borders or colors within the table. */
#Sec_Timetable th, #Sec_Timetable td
{
	border: none; 
	vertical-align: top;
	background-color: transparent;
}

#Sec_Prices_Single table { width: 80% }
#Sec_Prices_Single col.Name { width: 60%; } 
#Sec_Prices_Single col.Price { width: 40%; }

/*#Sec_Prices_Monthly table, #Sec_Prices_Special table { width: 100%; }*/
#Sec_Prices_Monthly col.Name, #Sec_Prices_Special col.Name { width: 45%; }
#Sec_Prices_Monthly col.Time, #Sec_Prices_Special col.Time { width: 35%; }
#Sec_Prices_Monthly col.Price, #Sec_Prices_Special col.Price { width: 20%; }

#Sec_Prices th, #Sec_Prices td { background-color: transparent; border: none; }

#Sec_Concerts_Prices col.Name { width: 70%; }
#Sec_Concerts_Prices col.Time, #Sec_Concerts_Prices col.Price { width: 15%; }
#Sec_Concerts_Prices #Outside_Concerts col.Price {width: 30%}
#Sec_Concerts_Prices td.Padded_Cell, #Sec_Massage_Prices td.Padded_Cell, #Sec_Concerts_Calendar td.Padded_Cell { padding: 1em; }

#Sec_Massage_Prices col.Name { width: 55%; }
#Sec_Massage_Prices col.Time { width: 25%; }
#Sec_Massage_Prices col.Price {width: 15%}
/*#Sec_Massages_Prices td.Padded_Cell { padding: 1em; }*/

#Sec_Concerts_Calendar col.Date { width: 15%; }
#Sec_Concerts_Calendar col.Time { width: 20%; }
#Sec_Concerts_Calendar col.Name { width: 65%; }
/*#Sec_Concerts_Calendar col.Price { width: 20%; }*/

/* Background colors for the specific types of table elements */
.Col_3 td.Yoga_Livre, .Col_3 td.Meditation { background-color: #FCEE88; }
.Col_3 td.Yoga, #Sec_Concerts_Prices td, td.Massage, #Sec_Massage_Prices td, #Sec_Concerts_Calendar td { background-color: #FACF85; }
.Col_3 td.Power_Yoga { background-color: #F9AC89; }
.Col_3 td.Lu_Jong { background-color: #87F99D; }
.Col_3 td.Yoga_Private { background-color: #F7D99E; }
/*.Col_3 td.Massage, #Sec_Massage_Prices td { background-color: #F48CFB; }*/
.Col_3 th.Table_Break, .Col_3 td.Table_Break {border: none; background-color: #FEE895; color: white; font-weight: normal; }

#Sec_Concerts_Calendar .Outside_Yoga td {background-color: #FCEE88; }

/**********************************************/
/******************* NEWS  ********************/
/**********************************************/


/* The Date heading for the news item */
.News_Date {
	font-weight: bold;
	margin-top: 1.5em;
	margin-bottom: 0px;
}

/* The actual news story text */
.News_Story {
	margin-top: 0px;
	padding-left: 2em;
}

#Sec_News a { text-decoration: underline; color: #FEE895; }
#Sec_News a:hover { text-decoration: underline;  color: #FFFFFF } 
/*.News_Story a { font-weight: bold; text-decoration: none; color: #FEE895; }
.News_Story a:hover { text-decoration: underline;  color: #FEE895; }
*/

/* If there is a picture with the story, centre it in the column */
.News_Picture {
	text-align: center;
	margin: 5px 0px;
	padding: 0px;
}

/* We don't want the news pictures floated off to the right */
.News_Picture img { float: none; }



/**********************************************/
/***** ROUNDED CORNERS, MARGINS & SHADOWS *****/
/**********************************************/


/* All of the sections with rounded corner backgrounds get a nice amount of white space around the outside */
.Border_Inner_Margin
{
	margin: 0px;
	padding: 1px 20px 20px 10px;
}


/* Setup the drop shadow - the same for any color section */
.Border_Right  { background: url(images/BORDER_right.gif) right repeat-y; }
.Border_Bottom { background: url(images/BORDER_bottom.gif) bottom repeat-x; }

/* No drop shadow (or corners) for the Copyright text - it just floats off to the bottom of the Contacts section */
#Copyright .Border_Right  { background: none; }
#Copyright .Border_Bottom { background: none; }


/* Setup the rounded corners for the Navigation Menu & Contact sections */
#Contact .Border_Corner_BL, #Language_Selector_New .Border_Corner_BL, #Menu .Border_Corner_BL { background: url(images/BORDER_CORNER_bl_orange.gif) bottom left no-repeat; }
#Contact .Border_Corner_BR, #Language_Selector_New .Border_Corner_BR, #Menu .Border_Corner_BR { background: url(images/BORDER_CORNER_br_orange.gif) bottom right no-repeat; }
/* Note: the menu doesn't have rounded corners on top because it merges into the logo */
#Contact .Border_Corner_TL { background: url(images/BORDER_CORNER_tl_orange.gif) top left no-repeat; }
#Contact .Border_Corner_TR { background: url(images/BORDER_CORNER_tr_orange.gif) top right no-repeat; }

/* Setup the rounded corners of the Welcome section */
#Sec_Welcome .Border_Corner_TL { background: url(images/BORDER_CORNER_tl_yellow.gif) top left no-repeat; }
#Sec_Welcome .Border_Corner_TR { background: url(images/BORDER_CORNER_tr_yellow.gif) top right no-repeat; }
#Sec_Welcome .Border_Corner_BL {background: url(images/BORDER_CORNER_bl_yellow.gif) bottom left no-repeat; }
#Sec_Welcome .Border_Corner_BR { background: url(images/BORDER_CORNER_br_yellow.gif) bottom right no-repeat;}

/* Setup rounded corners for the News Sections */
#Sec_News .Border_Corner_TL { background: url(images/BORDER_CORNER_tl_brown.gif) top left no-repeat; }
#Sec_News .Border_Corner_TR { background: url(images/BORDER_CORNER_tr_brown.gif) top right no-repeat; }
#Sec_News .Border_Corner_BL { background: url(images/BORDER_CORNER_bl_brown.gif) bottom left no-repeat; }
#Sec_News .Border_Corner_BR { background: url(images/BORDER_CORNER_br_brown.gif) bottom right no-repeat; }

/* Setup the rounded corners for the other Yoga sections */
.Col_1 .Border_Corner_TL, .Col_3 .Border_Corner_TL { background: url(images/BORDER_CORNER_tl_creme.gif) top left no-repeat; }
.Col_1 .Border_Corner_TR, .Col_3 .Border_Corner_TR { background: url(images/BORDER_CORNER_tr_creme.gif) top right no-repeat; }
.Col_1 .Border_Corner_BL, .Col_3 .Border_Corner_BL {background: url(images/BORDER_CORNER_bl_creme.gif) bottom left no-repeat; }
.Col_1 .Border_Corner_BR, .Col_3 .Border_Corner_BR { background: url(images/BORDER_CORNER_br_creme.gif) bottom right no-repeat;}