/* here's our color scheme:
	normal background blue: #BDC3F8
  light blue attention box: #BDE1f8
	task clock: background-color: #CACFFA;
	yellow: #F8F2BD
  Green: #C3F8BD
  Red:	#F8BDC3
	
  dark red:   #C20C00
  
  lines and borders: #616480
  
  text:  black #000000

	Normal link backgroun, light blue: #CACFFA

	NOTE:  for links, use display: block ot increase the clickable area for usability.


 */

  
body {
  background-color: #BDC3F8;
	background-image: url("images/background.gif");
  background-repeat: no-repeat;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: Helvetica, Arial;
	color: #000000;
	margin: 0.4em 0em 0.2em 0em;
}

h1 {
  font-size: 1.8em;
}

h2 {
  font-size: 1.4em;
}

h3 {
	margin: 0.2em 0em 0em 0em;
  font-weight: normal;
  font-size: 1.2em;
}

h4 {
  font-weight: normal;
  font-size: 0.9em;
}

p, th, td, li {
	font-family: Georgia;
	color: #000000;
}

input, option, select {
  font-family: Helvetica, Arial;
	color: #000000;
  /*font-size: 0.8em;*/
}

img {
	border: 0px;
}

a, a:link {
/*	text-decoration: none;
	border-bottom: 1px solid;*/
}

a img, a:link img {
	text-decoration: none;
	border: 0px;
}

/* Style: header
		Each page has one header at the top with a logo.
*/
#header {
	background-position: top right;
  background-image: url("images/fruitplate.gif");
  background-repeat: no-repeat;
	height: 150px;
  margin: 0px;
  padding: 0px;
}

/*logo*/
#header h1 {
	font-size: 3.2em;
	text-decoration: none;
	color: #FFFFFF;
  margin: 0px 0px 0px 0px;
	padding: 0em 0em 0em 0.4em;
}
#header h1 a {text-decoration: none;}
#header h1 a:link {color: #FFFFFF;}     /* unvisited link */
#header h1 a:visited {color: #FFFFFF;}  /* visited link */
#header h1 a:hover {color: #FFFFFF;}   /* mouse over link */
#header h1 a:active {color: #FFFFFF;}   /* selected link */


/*tagline*/
#header h2 {
	font-size: 1.1em;
	font-style: italic;
	font-weight: normal;
	margin: -0.6em 0em 0em 20%;
	padding-left: 0.4em;
	/*position: relative;*/
  top: 220px;
  /*background-color: #BDC3F8;*/
}


#header h3 {
	/*text-align: center;*/
	font-size: 1em;
 	font-weight: bold;
  margin: 0.4em 0em 0em 5%;
	padding: 0em 0em 0em 0.2em;
  background-color: #787B9E;
  width: 30em;
}
#header h3 a {/*text-decoration: none;*/}
#header h3 a:link {color: #FFFFFF;}     /* unvisited link */
#header h3 a:visited {color: #FFFFFF;}  /* visited link */
#header h3 a:hover {color: #FFFFFF;background-color:#681369;}   /* mouse over link */
#header h3 a:active {color: #FFFFFF;}   /* selected link */


#footer {
	/*background-image: url("fruit.gif");
  background-repeat: no-repeat;*/
  margin: 2em auto 1em auto;
	font-size: 0.8em;
	text-align: center;
	clear: both;
	width: 95%;
	padding: 3px;
	border-top: 1px solid #333;
}


#greeting {
	margin: -2.6em 0em 0em 10%;
}

#greeting p {
	font-family: Helvetica, Arial;
  display: inline;
}
#greeting ul {
	margin: 0em;
	font-size: 0.9em;
  display: inline;
}
#greeting li {
	margin: 0.1em;
	font-family: Helvetica, Arial;
  display: inline;
}



#col1 {
	width: 48%;
	float: left;
	/*padding: 0.8em;*/
	padding: 0em 0em 0em 0.8em;
	margin: 0em;
}

#col1a {
	width: 38%;
	float: left;
	/*padding: 0.8em;*/
	padding: 0em 0em 0em 0.4em;
	margin: 0em;
}

#col1b {
	width: 60%;
	float: left;
	/*padding: 0.8em;*/
	padding: 0em 0em 0em 0.4em;
	margin: 0em;
}


#col2 {
	width: 48%;
  float: right;
	/*padding: 0.8em;*/
	margin: 0em;
}

#col2a {
	width: 60%;
  float: right;
	padding: 0em;
	margin: 0em;
}

#col2b {
	width: 38%;
  float: right;
	padding: 0em;
	margin: 0em;
}

/* TODO: pick one */
div#contentblock {
	width: 90%;
	padding: 0em 1em 0em 1em;
	margin: -1em 0em 1em 0em;
}

div.contentblock {
	width: 90%;
	padding: 0em 1em 0em 1em;
	margin: 0em;
}


div.day {
  background: #F7F7EF url("images/day_lg.gif") no-repeat;
  background-position: top center;
	width: 20em;
	/*height: 14em;*/
	padding: 2em 0.2em 1em 0.2em;
	margin: 0em auto 0em auto;
	text-align: center;
}

div.day p.sm {
	font-size: 1em;
	margin: 0em;
  padding: 0em;
}

div.day p.lg {
	font-size: 6em;
	margin: -0.2em 0em -0.1em 0em;
  padding: 0em;
}

/* To Do text */
div.day h2 {
	font-family: Georgia;
  font-size: 1em;
  margin: 1em 0em 0em 0em;
  padding: 0em 0.2em 0em 0.2em;
	float: left;
}

div.day ul {
  margin: 1em 0em 0em 0em;
  padding: 0em 0.4em 0em 0.4em;
	text-align: left;
  list-style: none;
  float: right;
}

div.day ul li {
	border-bottom: 1px dotted #616480;
}

div.day ul li a {
	display: block;
	padding: 0px 0px 0.2em 22px;
  background-image:  url("images/item_open.gif");
	background-repeat: no-repeat;
}

div.day ul li.done a {
	display: block;
	padding: 0px 0px 0.2em 22px;
  background-image:  url("images/item_done.gif");
	background-repeat: no-repeat;
}

div.day i {
	font-size: 0.8em;
	margin: 0.2em 0em 0em 0em;
  padding: 0em;
}

/* To Do text */
div.day form {
  margin: 0;
  padding: 0;
}

div.ad {
/*	width: 30%;
  float:right;*/
/*  margin: 0.8em auto 0.8em auto;
  padding: 0.8em auto 0.8em auto;*/
/*	border: 5px solid #616480;*/
	text-align: center;
}

div.invite {
	border: 2px solid #616480;
  background: #BDC3F8 url("images/gradient.gif") repeat-x;
  padding: 0.6em;
}


.clearboth { clear: both; }

div.plateblock {
	margin: 1em auto 0em auto;
  padding: 0.2em;
	background-image: url("images/blankplate.gif"); 
  background-repeat: no-repeat;
}

div.plate {
	/*float: left;*/
  display: block;
  width: 78%;
  margin: 0em auto 0em auto;
  padding: 0.2em;
	height: 220px;
	background-image: url("images/fork.gif"); 
	background-position: center right;
  background-repeat: no-repeat;
	/* fix for IE weirdness: */
	line-height: 1.2em;
}

div.plateblock .spoon {
	float: left;
	margin: 0;
  padding: 0;
}

div.plate h1 {
	line-height: 1.1em;
}
div.plate p {
	margin: 0em 0em 0.2em 0em;
  font-family: Helvetica, Arial;
	/*font-size: 0.9em;*/
}  
  
div.plate form {
	margin:0;
	padding:0;
}


div.taskblock {
	background-color: #CACFFA;
	border: 2px solid #616480;
  /*width: 100%;*/
  margin: 0.8em;
  padding: 0.2em;
	/* fix for IE weirdness: */
	line-height: 1.2em;
}

div.taskblock h2 {
	background-color: #616480;
  font-size: 0.8em;
	color: #CACFFA;
	margin: -1em 50% 1em 1em;
	padding: 0.1em 0.1em 0.1em 0.4em;	
}  

div.taskblock p {
	margin-top: 0em;
	margin-bottom: 0.2em;
  font-family: Helvetica, Arial;
	/*font-size: 0.9em;*/
}  
  
div.taskblock ul {
	list-style: none;
 	margin-top: 0em;
}

div.taskblock ul li {
	margin: 0em 0em 0em -1em;
  font-family: Helvetica, Arial;
	font-size: 0.9em;
}

div.taskblock ul li a {
	display: inline-block;  /* Hack for IE */
  display: block; 
	width: 95%; /* Hack for IE */
  margin: 0;
  padding: 2px 0px 4px 22px;
  background-image:  url("images/item_link.gif");
	background-repeat: no-repeat;
}
div.taskblock ul li a:link {}
div.taskblock ul li a:visited {}
div.taskblock ul li a:hover {background-color: #E2EDFA;}
div.taskblock ul li a:active {}

/*background-color: #CACFFA*/

div.tour {
	padding: 2em;
	/*border: 6px solid #616480;*/
	/*background-color: #BDE1f8;*/
	/*background-image: url("images/empty.gif");
  background-repeat: no-repeat;
	background-position: top right;*/
}  
 
div.tour img {
	border: 6px solid #616480;
	float: right;
} 

div.tour p {
	margin: 0.4em 0em 0.8em 0em;
} 

.req {
	color: #FF3333;
	font-size: smaller;
}

.submit {
	font-family: verdana,sans-serif;
	font-size: smaller;
}
  

.submit_arrow {
	background-image: url("images/submit_arrow_g.gif");
  background-repeat: no-repeat;
	background-position: top right;
	text-align: right;
	height: 60px;
  width: 30%;
  padding: 18px 24px 20px 0px;
	margin: 0 0 0 auto;
  
	display: inline;

  /*position: relative;*/
  /*right: -20px;*/
  /*left: 60%;*/
  /*top: 0px;*/
  /*float: right;*/
}

div.right_align {
	text-align: right;
}

div.quickbox {
	background-color: #CACFFA;
	border: 2px solid #616480;
  margin: 0em;
  padding: 0.2em;
	/* fix for IE weirdness: */
	line-height: 1.2em;
  float: right;
}
div.quickbox h3 {
	margin:0;
	padding:0;
}
div.quickbox form {
	margin:0;
	padding:0;
}
  
/* Style: entryform
		This is the style for general user input forms
*/ 
table.entryform {
	margin: 0em 0em 0.8em 0em;
	padding: 0em;
}
  
table.entryform th {
  text-align: right;
  vertical-align: top;
  padding: 0.3em;
	border: thin solid #616480;
  border-style: none dotted dotted none;
}  

table.entryform td {
  vertical-align: top;
  padding: 0.3em;
	border: thin solid #616480;
  border-style: none none dotted none;
}   

table.entryform td em {
	color: #F80000;
  font-weight: bold;
}   


/* Style: miniform
		This is the style for small, compact forms
*/ 
table.miniform {
	margin: 0.2em auto 0.4em auto;
	padding: 0em;
	border: thin solid #616480;
	background-color: #CACFFA;
  white-space: nowrap;
}
  
table.miniform th {
  text-align: right;
  vertical-align: middle;
  padding: 0em;
}  

table.miniform td {
  vertical-align: middle;
  padding: 0em;
}   

table.miniform input {
	font-size: 0.9em;
}
   





/* Style: nut_info
		This is the nutrition info style used for food info. 
		Made to respeble the side of a cereal box.
*/
table.nut_info {
	background-color: #FFFFFF;
	border: 1px solid #666666;
	border-collapse: collapse;
  margin: 0em 0em 0.8em 0em;
	padding: 0em;
  width: 400px;
}
  
table.nut_info th {
  text-align: left;
  vertical-align: top;
	margin: 0;
  padding: 0em 0.2em 0em 1em;
	border: 1px solid #BBBBBB;
  border-style: none none solid none;

  font-family: Helvetica, Arial;
	font-size: 0.8em;
	font-weight: normal;
}  

table.nut_info .main {
  padding: 0em 0.2em 0em 0.5em;
	font-weight: bold;
}  

table.nut_info .end {
	border-bottom: 5px solid #BBBBBB;
} 

table.nut_info td {
  vertical-align: top;
  padding: 0em 0.2em 0em 1em;
	margin: 0;
	border: 1px solid #BBBBBB;
  border-style: none none solid none;
  font-family: Helvetica, Arial;
	font-size: 0.8em;
}   

table.nut_info td .b {
  height: 1em;
  text-align: left;
	margin: 0px auto 0px 0px;
	padding: 0px;
	background-color: #C3F8BD;
}

table.nut_info td .n {
	margin: -1em auto 0em 0em;
	padding: 0px;
}



h2.nut {
	font-size: 1.1em;
  font-weight: bold;
  margin: 0em;
}

h3.nut {
	font-size: 1.0em;
  font-weight: bold;
  margin: 0em;
}

div.meal_size {
	background-position: bottom center;
  background-image: url("images/meal_plate.gif");
  background-repeat: no-repeat;
	width: 300px;	
	height: 300px;
}

div.meal_size img {
	margin: -10px;
}

/*tag styles
	used on food pages and other places that display tag text */
.tag {
}
.tag_0 {
	font-size: 0.8em;
}  
.tag_1 {
	font-size: 0.9em;
}  
.tag_2 {
	font-size: 1.0em;
}  
.tag_3 {
	font-size: 1.1em;
}  
.tag_4 {
	font-size: 1.2em;
}  

/*used for small print on food pages, etc.*/
p.smprint {
	font-size: 0.7em;
}














/* Style: items
		This is the "notebook paper" style used for entering food items. 
*/
table.items {
	margin: 0px;
	padding: 0px;
  /*This is what I want, but it screws up IE: padding: 50px 0px 0px 0px;*/
  background: #F7F7EF url(images/notebook.gif) repeat-x;
	margin-left: auto; 
  margin-right: auto;
}

table.items td {
	border-bottom: thin solid #BDE1F8;
  /*margin: 1px;
  padding: 1px;*/
  font-size: 0.9em;

}

/* not used--too big*/
th.erase {
	background: #F7F7EF url(eraser.gif) no-repeat;
}

table.items td input {
	background-color: #F7F7EF;
	border: thin solid #F7F7EF;
}

table.items td input.active {
	background-color: #FFFFFF;
	border: thin solid #DDDDDD;
}

table.items td select {
	background-color: #F7F7EF;
	border: thin solid #F7F7EF;
  width: 110px;
}

table.items td select.active {
	background-color: #FFFFFF;
	border: thin solid #DDDDDD;
  width: 110px;
}


/* Style: items_wide
		This is the "notebook paper" style used for entering food items. 
*/
table.items_wide {
	margin: 0px;
	padding: 0px;
  /*This is what I want, but it screws up IE: padding: 50px 0px 0px 0px;*/
  background: #F7F7EF url(images/notebook.gif) repeat-x;
	margin-left: auto; 
  margin-right: auto;
}

table.items_wide td {
	border-bottom: thin solid #BDE1F8;
  /*margin: 1px;
  padding: 1px;*/
  font-size: 0.9em;

}

/* not used--too big*/
th.erase {
	background: #F7F7EF url(images/eraser.gif) no-repeat;
}

table.items_wide td input {
	background-color: #F7F7EF;
	border: thin solid #F7F7EF;
}

table.items_wide td input.active {
	background-color: #FFFFFF;
	border: thin solid #DDDDDD;
}

table.items_wide td select {
	background-color: #F7F7EF;
	border: thin solid #F7F7EF;
  /*width: 300px;*/
}

table.items_wide td select.active {
	background-color: #FFFFFF;
	border: thin solid #DDDDDD;
  /*width: 300px;*/
}

table.items_wide td select.food {
  width: 360px;
}



/* Style: grid
		This style is used for simple lists of things, like the list
    of foods found in a search.
*/
table.grid {
  margin: 0px;
  padding: 0px;
	 /*border: 1px solid #616480;*/
}

table.grid td {
	margin: 0px;
  padding: 0em 0.4em 0.4em 0.4em;
	border: thin solid #616480;
  border-style: none none dotted none;
  font-size: 0.9em;
	font-family: Helvetica, Arial;  
}

table.grid th {
	margin: 0px;
  padding: 0em 0.4em 0em 0em;
  text-align: left;
  vertical-align: top;
	font-family: Helvetica, Arial;  
}

table.grid th.row {
  text-align: right;
  padding: 0em;
}

table.grid b {
	/* could also do background color hightlight instead*/
  font-weight: bold;
}


/* Style: cal
		Style used for calendar on index page (once user is logged in)
*/
table.cal {
  background: #F7F7EF;
  padding: 0px;
  margin: 0em auto 0em auto;
	border: 1px solid #616480;
  /*width: 20em;*/
}

table.cal td {
	margin: 0px;
  padding: 0em 0em 0em 0em;
	border: 1px solid #AAAAAA;
  border-style: none dotted dotted none;
  font-size: 0.9em;
}

table.cal td.today {
	background-color: #C3F8BD;
}

table.cal td.weekend {
	/*background-color: #BDE1f8;*/
	background-color: #EEEEEE;
}

table.cal th {
	margin: 0px;
  padding: 0px;
  text-align: center;
  vertical-align: top;
}

table.cal a {
	display: block;
  height: 30px;
}
table.cal a:link {}
table.cal a:visited {}
table.cal a:hover {background-color: #CACFFA;}
table.cal a:active {}

table.cal a img {
	display: block;
 	text-decoration: none;
	margin: -8px 0px 0px -5px;
	text-align: right;
  float: right;
}

table.cal form {
	margin: 0px; /*fix for IE*/
}



iframe {
	border: thin solid #616480;
  margin: 0.5em 0em 0.5em 0em;
}

  
.explain {
	border: 2px solid #616480;
  background-color: #BDE1f8;
  width: 60%;
  margin: 0.8em auto 0.8em auto;
  padding: 0.2em;
}

.explain h2, p {
	margin-top: 0em;
	margin-bottom: 0.2em;
} 

/* used for error messages */
.alert {
  font-family: Helvetica, Arial;
	border: 2px solid #F8BDC3;
	background-color: #F8F2BD;
	margin: 0.8em;
	padding: 0.2em;
}
  
/* used for success messages */
.msg {
  font-family: Helvetica, Arial;
	border: 2px solid #616480;
	background-color: #C3F8BD;
	margin: 0.8em;
	padding: 0.2em;
}


.hidden {
	display: none;

}


.err {
	position: absolute;
  top: 0px;
  left: 0px;
	border: 2px solid #F8BDC3;
  background-color: #F8F2BD;
}

/* used for social bookmarking links */
.social {
	display: block;
	margin: 0;
	font-size: .8em;
	font-family: Helvetica, Arial;
	text-decoration: none;	
}


/* used for measuring screen width */
.measure_h {
	position: absolute;
 	top: 480px;
  border: 2px dashed #616480;
	width: 640px;
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	text-align: right;
} 

.measure_v {
	position: absolute;
 	left: 640px; 
	border: 2px dashed #616480;
  width: 1px;
	height: 480px;
  margin: 0px;
  padding: 0px;
	font-size: 10px;
}