body {
	margin: 0px;
	padding: 0px;
	background-color: #FFFFCC; /* Pale yellow */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 90%;
	min-width: 700px;     /* 2x LC width + RC width */
}

h1 {
	font-size: 125%;
}

h2 {
	font-size: 110%;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color:  #009900; /* Green */
	padding-top: 1em;
}

h3 {
	font-size: 100%;
}

.emphasize {
	font-weight: bold;
	color: #CC0000; /* Red */
}

/* The bottom of the left-side column */
span#columnBottom {
	background-image: url(/images/fade.jpg);
	width: 150px;
}

/* Photos */

div.photo {
	margin-bottom: .5em;
	border-style: solid;
	border-color: white;
	width: auto;
}
div.photo div {
	border: 1px solid #ccc;    /* Light Gray */
	padding: 3px;
	background-color: #FFFFCC; /* Pale yellow */
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}
div.photo div img {
	border: 1px solid #ccc;    /* Light Gray */
}
div.photo div div.photocaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: .3em 0 .1em 0;
	font-size: 80%;
	color:   #666666;         /* Dark Gray */
}

div.tright {
	clear: right;
	float: right;
	border-width: .5em .5em .8em 1.4em;
	border-color: #FFFFCC; /* Pale yellow */
}

div.tleft {
	float: left;
	margin-right: .5em;
	border-width: .5em 1.4em .8em 0;
	background-color: #FFFFCC; /* Pale yellow */
}

/* Compatible table-based primary layout */
td#compatleft {
	background-color: #9966CC; /* Light Purple */
}

td#compatleft em { font-size: 75%; font-weight: normal; }

td#compatcenter {
	background-color: #FFFFCC; /* Pale yellow */
	padding-top: .5em;
}

td#compatright {
	background-color: #FFFFCC; /* Pale yellow */
}

td#compatheader {
	background-color: #9966CC; /* Light Purple */
}


/* The Holy Grail 3-Column Approach */
/* http://www.alistapart.com/articles/holygrail */

#container {
  padding-left: 150px;   /* LC width */
  padding-right: 300px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 150px;          /* LC width */
  right: 150px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 300px;          /* RC width */
  margin-right: -300px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 300px;           /* RC width */
}

/* --------------- */

div#banner {
	
}

div#banner img {
}

div#adbanner {
	position: absolute;
	left: 154px;
	top: 4px;
}

div#menu {
	padding: 0px 0px 0px 4px;
	background-image: url(/images/purple.gif);
	background-repeat: repeat;
}

#header {
	background-color: #9966CC; /* Light Purple */
}


#left em { font-size: 75%; font-weight: normal; }
#left {
	background-color: #9966CC; /* Light Purple */
}

#center { 
	background-color: #FFFFCC; /* Pale yellow */
}
#mainContent {
	padding: 0px 5px 5px 15px;
}

#footer { }

/* Left-side menu */

div#loggedin {
	padding-left: 10px;
	color: #FFFFFF; /* white */
	font-size: 80%;
}

div#loggedin #username {
	font-weight: bold;
	font-size: 110%;
}

div#loginbox {
	color:#CCFF33; /* Yellow-green */
	padding-left: 10px;
	font-size: 80%;
}

div#loginbox .note {
	font-style: italic;
	font-size: 70%;
}

div#options p {
	text-decoration: none;
	padding: 0px 3px 6px 7px;
	margin: 0px 0px 0px 0px;
	color: #CCFF33; /* Yellow-green */
}

div#options a {
	display: block;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;    /* black */
	border-bottom-color: #000000; /* black */
	border-left-color: #000000;   /* black */
	border-right-color: #009900;  /* Green */
	margin-right: 0px;
	margin-top: -1px;
	margin-bottom: 0px;
	padding: 4px 0px 4px 3px;
}

div#options a:link, div#options a:visited {
	color: #CCFF33; /* Yellow-green */
}

div#options a:hover {
	color: #CCFF33;              /* Yellow-green */
	border-right-color: #FFFF33; /* Bright Yellow */
	font-weight: bold;
}

div#historyKey {
	padding-left: 10px;
}

div#content div.PicRight {
	float: right;
	border-color:  #660099; /* Dark Purple */
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
	padding: 10px;
	margin: 6px 4px 20px 4px;
}


#copyright {
	font-weight: normal;
	padding: 1em 0 1em 0;
	font-size: .65em;
	text-align: center;
	letter-spacing: 1px;
	border-top: solid black 1px;
}

#avgCycle {
	color: #CCFF33;            /* Yellow-green */
	background-color: #9966CC; /* Light Purple */
	font-weight: bold;
	text-align: center;
}

/* Calendar Table */

table.caltable {
	text-align: center;
	font-size: 75%;
	width: 150px;
}

table.caltable td, table.caltable th {
	border: 1px solid gray;
	border-color:  #BBB #EEE #EEE #BBB; /* gray white white gray */
	margin: 0;
	padding: 0;
}

/* History Table */
table.bartable {
	font-size: 85%;
	white-space: nowrap;
}

table.bartable td#fromdate {
	text-align: right;
	width: 13em;
	white-space: nowrap;
}

table.bartable td#cyclelength {
	background-color: #009900; /* Green */
	color: white;
	text-align: center;
}

table.bartable td#todate {
	text-align: left;
	white-space: nowrap;
}

/* Navigation Buttons */
div.navbuttons {
	margin: .25em 0 .25em 0;
}

div.navbuttons form {
	display: inline;
}

/* Add/Edit Data Screen */ 

table.adddatamain {
	width: 100%;
	border: 1px solid black;
	padding: .5em;
	border-collapse: collapse;
}

table.adddatamain a:link{
	font-size: 85%;
	font-style: italic;
}

table.adddatamain td {
	padding: 0;
	padding-left: .25em;
	padding-right: .25em;
	border: none;
}

table.adddatamain .entrydate  {
	font-weight: bold;
	padding-bottom: .5em;
}

table.adddatamain .heading {
	font-weight: bold;
	padding-bottom: .5em;
	padding-top: .5em;
}

table.adddatamain td.rightborder {
	border-left: 1px solid black;
}

table.adddatamain td.sides {
	border-left: 2px solid black;
	border-right: 2px solid black;
}

table.adddatamain td.topcap {
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-top: 2px solid black;
}

table.adddatamain td.bottomcap {
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}

table.adddatamain td.top {
	border-top: 2px solid black;
}

table.adddatamain td.bottom {
	border-bottom: 2px solid black;
}

table.adddatamain #helptext {
	font-style: italic;
	font-size: 80%;
}

table.adddatasecond {
	border-collapse: collapse;
	width: 100%;
}

table.adddatathird  {
	border: 1px solid gray;
}

table.adddatathird td{
	border: none;
}

/*-------------------------*/


/* Preferences Screen */

table#prefstable {
	border-collapse: collapse;
}

table#prefstable td.section {
	border-top: solid black 1px;
	border-bottom: solid black 1px;
}

/*-------------------------*/

/* Links Page */

div#links li {
	padding-top: .3em;
}

div#links h3 {
	padding-left: 1em;
}

/* Letters Page */

div.letter {
	padding: 2em 10em 0 6em;
}

div.letter .signed {
	padding-right: 2em;
	font-style: italic;
	text-align: right;
}

/* TOS Page */
div#tos li {
	padding-top: 1em;
}

/* Tour */

div#tour {

}

div#tour .pageNum {
	margin-top: -3em;
	font-style: italic;
	text-align: right;
}

/* Basic Table - Used on the create_new.html amd download_tmpl.html page */

table.basicTable {
	border-collapse: collapse;
}

table.basicTable th {
	color: #FFFFFF;
	background-color: #9966CC; /* Light Purple */
}

/* Background colors for certain types of date */
/* These cascade and are used whenever necessary */

.menstruationStart {
	background-color: #FF0000; /* red */
}

.menstruationStart a:link, .menstruationStart a:visited {
	color: #FFFFFF;           /* white */
}

.menstruationMediumFlow {
	background-color: #FF6342; /* medium red */
}

.menstruationLightFlow {
	background-color: #FFC6A5; /* light red */
}

.ovulationStart {
	background-color: #00FF00; /* green */
}

.ovulationStart a:visited, .ovulationStart a:link {
	color: #000000;           /* black */
}

.ovulationFertile {
	background-color: #C6EF8C; /* light green */
}


.data {
	background-color: #00FFFF; /* blue */
}				   

.data a:visited, .data a:link {
	color: #000000;           /* black */
}
			   
/* The Edit Table on the Add/Edit Date Screen */

table.editCalendar {
	border-collapse: collapse;
}

table.editCalendar .editCalendarMonth {
	font-weight: bold;
	background-color: yellow;
}

table.editCalendar .editCalendarDow {
	text-align: center;
}

table.editCalendar .editCalendarDay {
	text-align: center;
	font-size: 80%;
}

/* The little tables on the Display Calendar screen */
table.displayCalendar {
	font-size: 80%;
	border-collapse: collapse;
}

table.displayCalendar .displayCalendarMonth{
	font-weight: bold;
	background-color: yellow;
	border: 1px black solid;
}

table.displayCalendar .displayCalendarDow {
	text-align: center;
	border: 1px black solid;
	padding: 2px;
}

table.displayCalendar .displayCalendarDay{
	text-align: center;
	border: 1px black solid;
	padding: 2px;
}