/*
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Example:  
#para1 {text-align:center;color:red}
like
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

The class selector is used to specify a style for a group of elements. 
Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."

Example: (all HTML elements with class="center" will be center-aligned:)
.center {text-align:center} 
like
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p> 
*/



/* ************  CLOSED style *************** */
table#calendar td#CLOSED {		
	font-weight: bold;
	color:#ffffff;
	background-color: #6C1433;
	text-align:center;	
}

span.CLOSED {
	font-weight: bold;
	color:#ffffff;
	background-color: #6C1433;
	text-align:center;
}

/* ************  meal style *************** */
span.AM {
	font-weight: bold;
	color:#990000;
}
span.LUNCH {
	font-weight: bold;
	color:#0033CC;
}
span.PM {
	font-weight: bold;
	color:#006633;
}



A:link {text-decoration: none; color: white;}
A:visited {text-decoration: none; color: white;}
A:active {text-decoration: none; color: white;}
A:hover {text-decoration: underline; color: white;}


table#calendar {
	background: #ffffff ;
}

table#calendar a {
	text-decoration: none;
}

tr#days th {
	width: 18%;
}

tr#days th.sat,tr#days th.sun {
	width: 5%;
}

table#calendar tr#days th {
	color: #CCE;
	background-color: #135B33;
	font-weight: bold;
	text-align: center;
	padding: 1px 0.33em;
}

table#calendar tr#title th {
	background: #6C1433;
	color: white;
	border: 1px solid #242;
	font-size: 120%;
}

table#calendar td {
	vertical-align: top;
	padding: 0;
	border: 0px solid gray;
	border-width: 1px 1px 1px 1px;
}

table#calendar td.sat {
	border-right: 1px solid gray;
}

table#calendar a {
	font-weight: bold;
	display: block;
	margin: 0;
}

table#calendar a:link {
	color: navy;
}

table#calendar a:visited {
	color: purple;
}

table#calendar a:hover {
	background: #FF6;
}

table#calendar td.sat,table#calendar td.sun {
	background: #FDD;
}

table#calendar td.jun,table#calendar td.wknd {
	background: #CCC;
	color: #889;
}

table#calendar tr#lastweek td {
	border-bottom: 2px solid #AAB;
}

table#calendar td.holiday {
	background: #FAA;
}

table#calendar td#jul16 {
	background-color: yellow;
}

td#jul16 div.date {
	color: #C33;
	font-weight: bold;
	background: #FFC;
}

div.event {
	margin: 0.5em;
}

div.event span {
	display: block;
}

div.holiday {
	font-style: italic;
}

span.AM {
	font-weight: bold;
	color:#990000;
}
span.LUNCH {
	font-weight: bold;
	color:#0033CC;
}
span.PM {
	font-weight: bold;
	color:#006633;
}

span.CLOSED {
	font-weight: bold;
	color:#ffffff;
	text-align:center;
}

span.loc {
	color: #555;
	font-style: italic;
}

div.date {
	float: right;
	text-align: center;
	border: 1px solid gray;
	border-width: 0 0 1px 1px;
	padding: 0.125em 0.25em 0 0.25em;
	margin: 0;
	background: #F3F3F3;
}
div.date.closed {
	color:#000000;
	font-weight: normal;
}


td.sat div.date,td.sun div.date {
	border-width: 0;
	color: gray;
	background: transparent;
}

td.jun div.date,td.wknd div.date {
	border-width: 0;
	color: gray;
	background: transparent;
}