﻿
@media all
{
body            {font: x-small Verdana, Arial, Helvetica, sans-serif;
                 background: rgb(95%,95%,80%); color: black; 
                 margin:  0px 0px; 
                 padding: 0; /* Need to set body margin and padding to get consistency between browsers. */
/*				 text-align:center; /* Hack for IE5/Win */
				}
.emphasis_small {font-style: bold;}
h1              {font-size: 200%; text-transform: lowercase; letter-spacing: 3px;
                 margin:0; padding: 0.66em 0 0.33em 29%;
                 background: rgb(85%,85%,70%);}
h2              {color: #600; font-size: large; margin: 1em 0 0.5em 0;}
h3              {font-size: 1em; margin: 0; padding: 1em 0 0.5em 0;
                 text-decoration: underline;}
h4              {font-size: 1em; margin: 0; padding: 0.5em 0 0;}
h5              {font-size: 1em; margin: 0; padding: 0 0 0;}
h6              {display: inline; font-style: italic; font-weight: normal; 
				 margin: 0; padding: 0;}
h6      		{line-height: 1em;}
h5      		{line-height: 1em;}
h4      		{line-height: 1em;}
h3      		{line-height: 1em;}
h3.photo		{font-size: 1em; margin: 0; padding: 0 0 0.5em 0; text-decoration: underline;
				 text-align: left;}
h2      		{line-height: 1em;}
h1      		{line-height: 1em;}
p               {line-height: 1.2em; margin: 0 0 1em;}
th           	{background: #DDD;}
th          	{text-align: left; padding: 0.1em 0.5em 0.1em 0.5em; border: 1px solid #DDD;}
td         		{text-align: left;
}
td.Price        {text-align: right; white-space: nowrap;}
th.Price        {text-align: right; white-space: nowrap;}
th.Cat			{width: 10%; text-align: right; white-space: nowrap; vertical-align: text-top;}
td.Cat			{width: 12%; text-align: right; white-space: nowrap; vertical-align: text-top;}
td.MapInfo		{width: 30%; text-align:  left; white-space: nowrap; vertical-align: text-top;}
td.Items        {padding: 0.1em 0.5em 0.1em 2em;  white-space: nowrap;}
table.Dist th   {text-align: right; vertical-align: top;}
table.Dist td   {text-align: right; vertical-align: top;}
th.Map          {border-bottom: 1px solid white;}
table.EventInfo	{width: 100%;}

table.ClassInfo 	{border-right: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	width: 100%;  	cellspacing="0"; 	cellpadding="0"; 	style="border-style: solid";
	border-left-style: solid;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-width: 1px;
}
table.ClassInfo tr	{height: 18;}
th.ClassName	{height="18"; width="73"; background:#EEE;}
td.ClassName	{}
th.ClassAge		{}
td.ClassAge		{}
th.ClassTD		{}
td.ClassTD		{}
th.ClassDist	{colspan="2";}
td.ClassDist	{}
th.ClassCtrl	{}
td.ClassCtrl	{}
	

/* to center the page...
 - each page must use the outerWrapper div. (see "Accommodation" for example)
*/
/* This is a container for the page content. It is common to use the container to constrain
   the width of the page content and allow for browser chrome to avoid the need for horizontal 
   scrolling. For fixed layouts you may specify a container width and use auto for the left 
   and right margin to center the container on the page. IE 5 browser require the use of 
   text-align: center defined by the body element to center the container. For liquid layouts 
   you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
/*  background-color: #fff; */
  width: 840px;
  text-align: left; /* Redefines the text alignment defined by the body element. */
  margin: 10px auto 10px auto; 
}

/*#masthead       {border-bottom: 1px solid gray;}*/
#masthead img   {display: block;}

#flickr 		{background:url("bg_photos.gif") no-repeat;
				 width:200px; height:230px; padding:16px 0 0 10px; margin-top:0px;}

/*#flickr 		{width:190px; height:168px; padding:0 0 0 20px; margin-top:4px;} */
#flickr a img 	{float:left; margin:0 0px 8px 8px; padding:4px; width:68px; height:68px;}
#flickr a:link    {text-decoration:none; color:rgb(166,132,24); }
#flickr a:visited {text-decoration:none; color:rgb(166,132,24); }

#news	 		{background:url("bg_news.gif") no-repeat;
				 width:200px; height:230px; padding:6px 0 0 10px; margin-top:0px;}

#links	 		{background:url("bg_links.gif") no-repeat;
				 width:200px; height:230px; padding:6px 0 0 10px; margin-top:0px;}

#navbar			{text-align: left;}
#navbar b       {display: none;}
#navbar a       {text-decoration: none; color: rgb(0%,0%, 0%);
                 border-bottom: 1px solid gray; padding: 2px 0.5em 1px;}

#main p         {line-height: 1.3;
	}

#subhead h2		{text-align: right; color:#600;}


#location_map img   {width: 50%;}

#news h3        {font-size: 1em; margin:1em auto; padding: 0 0 0 21px;
                 text-decoration: none; font-weight: bold; color:#606; }


/* NewsList, from http://www.456bereastreet.com/lab/newslist/
*/

	#newslist {
		margin:1em auto;
		padding:0;
		width:150px;
		font-size:0.94em;
		list-style:none;
	}
	#newslist li {
		padding:0 0 4px 0;
		display:block;
	}
	#newslist li p {
/*		background:#eaeaea;
*/		padding:1px 4px 0 7px;
		margin:0;
		border-left:0px;
		border-left:14px solid #939393;
	}
	#newslist h3 {
		font-size:1.25em;
		line-height:1.25em;
		font-weight:bold;
		margin:0;
		padding:6px 4px 3px 21px;
	}
	#newslist h4 {
		font-size:1em;
		line-height:1em;
		font-weight:bold;
		margin:0;
		padding:12px 0px 6px 0px;
	}
	#newslist li:hover {
	}
	#newslist li:hover p {
		border-color:#2793ff;
	}
	#newslist li:hover h4 {
	}
	#newslist a:link {
		text-decoration:none;
		color:#000;
	}
	#newslist a:visited {
		text-decoration:none;
		color:#606;
	}
	#newslist a:hover {
		text-decoration:underline;
	}
	#newslist .more {
		line-height:1em;
		display:block;
		text-align:right;
		padding:0 18px 2px 21px;
		margin-top:4px;
		background:url("arrow.gif") 135px 50% no-repeat;
	}

}

/*
** Layout
*/

@media screen
{
#outerWrapper	{position: relative;}
#masthead       {position: absolute; top:  20px; left:    5px; height: 180px;}
#subhead        {position: absolute; top:  22px; right: 245px;}
#navbar         {position: absolute; top: 202px; left:    5px; width: 600px;
                 padding: 2px 0 2px 2px;
                 white-space: nowrap;}
#main           {position: absolute; top: 245px; left:   5px; width: 600px; }


#news			{position: absolute; top:  20px; left: 630px; width: 200px; height: 230px;}
#flickr			{position: absolute; top: 270px; left: 630px; width: 200px; height: 230px;}
#links			{position: absolute; top: 520px; left: 630px; width: 200px; height: 230px;}
#sponsors		{position: absolute; top: 770px; left: 630px; width: 200px; height: 230px;}
}

/*
** Style for printing the website
*/
@media print
{
body        {color: black; background: white;}
a:visited   {background: white; color: black; text-decoration: underline;
             font-weight: bold;}
a:link      {background: white; color: black; text-decoration: underline;
             font-weight: bold;}
h3      	{background: white; color: black; padding-bottom: 1px;
             border-bottom: 1px solid gray;}

h2     		{background: white; color: black; padding-bottom: 1px;
             border-bottom: 1px solid gray;}

h1    		{background: white; color: black; padding-bottom: 1px;
             border-bottom: 1px solid gray;}

#masthead    {position: absolute; top 0;    left 0;  width 100%; height 180px;}
#subhead     {display: none;}
#flikr       {display: none;}
#navbar      {display: none;}
#news        {display: none;}
#links		 {display: none;}
#main        {position: absolute; top 200px; left 0;}

}

