/*

If you are new to style sheets or web page HTML, buy or obtain from the library a copy of
	Castro, Elizabeth, "Creating a Web Page with HTML: Visual QuickProject Guide", Peachpit Press

	Read Elizabeth's book through quickly and try some of the projects. Just about everything
	you will see in the North Shore web site is covered Lizzy's book.

	This web site is basic HTML and simple cascading style sheet design to enable maintenance
	by administrative staff and graphic artists with a minimum of Web publishing expertise.


Color scheme:
	Based on UUA color scheme is a complimentary color scheme of deep blue and light tan
	The bread crumbs and left scan is derived from a blue in the art chalice mosaic.

Page width for inner page
	The page width is flexible with a minimum of 576px (8 * 72).
	For planning, assume a wide image of 864px (12 * 72). This size fits in
	a 1024x768 monitor with space margin space on either side

	The inner page layout is structured bey a sequence of tables of two columns for
	the main body and 3 columns for the header and footer. For all tables, set the table
	width to 100% and the right most column width to 30%.

Image Size
	An image width  of 252 px gives a good visual appearance. the width is more important
	than the Heath.

	Images are enclosed in tables set to the width of the image. The first row
	contains the image. the second row contains the caption.

	The eighth of the background image in the header row should be about 68 px.
	Several pages repeat the background image (repeat-x) to fill the horizontal space
		

No MailTo links!
	Do NOT put any MailTo links on the web site. See http://www.useit.com/about/whynomailto.html
	Anything you put into a mailto: tag is fodder for EmailSyphon and other site suckers that
	download entire web sites in order to find email addresses that they can add to SPAM mailing lists.

*/	

/* reset the header and image defaults */
a img {border:0;}
h1 {font-size: 150%; margin-bottom: 1.0ex;}
h2 {font-size: 128%; margin-bottom: 1.0ex}
h3 {font-size: 110%; margin-bottom: 0.5ex}
h4 {font-size: 100%; font-weight: bold; margin-bottom: 0.5ex }
h5 {font-size: 100%; font-weight: bold; font-style: italic; margin-bottom: 0.5ex; }
h6 {font-size: 100%; font-style: italic; margin-bottom: 1px; }
p  {font-size: 100%; font-style: normal; margin-bottom: 0.5ex; }
li {font-size: 100%; font-style: normal; margin-bottom: 0ex; }

h1.home
h3.inline			{font-size: 100%; display:inline; font-weight: bold;}
p.no-top-margin		{margin-top:0px;}

/* body is deep blue background with tan fore color */
body.inner-page
	{
	background-color:#141654;		/* UUA deep blue */
	color: #ffffcc;					/* web safe tan */
	
	font: normal 1em/1.3em Geneva, Arial, Helvetica, sans-serif;
	text-align: center;

	}

/*
Sets the web page outer container to be 100% of the viewing space
Sets the default background image, which is light tan
sets the text color to the compliment, which is the same as the body color
Sets the minimum width of the page
*/
#container-page
	{
	text-align: left;
	width: 100%; /* for planning assume 864 wide */
	background: #fff1d3 url("images-style-sheet/img-container-page-background.gif") repeat;
	color: #141654;
	min-width: 650px;

	}

#container-page-directions
	{
	text-align: left;
	width: 800px; /* for planning assume 864 wide */
	background: #fff1d3 url("images-style-sheet/img-container-page-background.gif") repeat;
	color: #141654;
	min-width: 650px;

	}



/* Page header table */
#tbl-head-top
	{
	width: 100%;
	border-width: 0;
	padding-bottom: 1px;
	padding-left: 4px;
	margin-bottom: 0px;
	background-color: #141654;
	color: #ffffcc;
	font: normal 1em/1.3em Geneva, Arial, Helvetica, sans-serif;
	}
	
#tbl-row-head-top-left
	{
		/* hold the home logo */
		font-size:small;
		font-weight:bold;
	}
	
#tbl-row-head-top-center
	{
		/* North Shore name */
		font-size:128%;
		font-weight:bold;
	}
	
#tbl-row-head-top-right
	{
		/* site navigation */
		width: 30%;
		font-size:small;
		font-weight:normal;
	}

#tbl-row-head-top-right-directions
	{
		/* site navigation */
		width: 390px;
		font-size:small;
		font-weight:normal;
		text-align:right;
	}

A.PageTopLinks:link    {color:#ffffcc;}
A.PageTopLinks:visited {color:#ffffcc;}
A.PageTopLinks:hover   {color:Lime}
A.PageTopLinks:active  {color:#ffffcc;}
/* end Page header table ---------------------------------------- */


/* Headline table - headline and right scan photo */
#headline-table
	{
		width: 100%;
		color: #141654;
	}
	
	
	
#row-headline
	{
		border-left-width: 12px;
		vertical-align:middle;
	}

row-headline-td-left
	{
	}
	
h1.row-headline-left
	{
		padding-left: 12px;
		padding-bottom:  0px;
		padding-top: 0px;
		padding-right: 12px;
		margin-bottom: 0px;
	}
	
#row-headline-td-right
	{
		width: 30%;    /*sets width for right scan column */
		padding-bottom:  0px;
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

#row-headline-td-right-directions
	{
		width: 390px;    /*sets width for right scan column */
		padding-bottom:  0px;
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

img.row-main-headline-td-right
	{
		float:left;
	}
	

#row-headline-breadcrumbs
	{
		background-color: #666699; /*#666633;*/
		color: #ffffcc;
		font: normal 1em/1em Geneva, Arial, Helvetica, sans-serif;
		font-size: small;
	}
	
p.row-headline-breadcrumbs
	{
	padding-left: 12px;
	}
a.BreadCrumbs:link    {color:#ffffcc;}
a.BreadCrumbs:visited {color:#ffffcc;}
a.BreadCrumbs:hover   {color:Lime}
a.BreadCrumbs:active  {color:#ffffcc;}

/* End headline Table ------------------------------------------------*/



/* Main Page table - holds content in left and right columns */
#tbl-main-page
	{
		width: 100%;
		/*padding-left:12px;*/
		color: #141654;
	}
	
/* shadow row at top of content	*/
#row-main-shadow
	{
	}

#row-main-shadow-td-left
{
	border-top:   1px solid #006600;
	border-right: 1px solid #006600;
	background: #fff1d3 url("images-style-sheet/img-row-head-site-bar-shadow-left.gif") repeat-x;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 6px;
	padding-bottom: 0;
	height: 10px;
	vertical-align:top;
}

#row-main-shadow-td-right
{
	border-top:   1px solid #006600;
	width: 30%;
	background: #fff1c4 url("images-style-sheet/img-row-head-site-bar-shadow-right.gif") repeat-x;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	height: 10px;
}

#row-main-shadow-td-left-scan
{
	border-top:   1px solid #006600;
	border-right: 1px solid #006600;
	color: #ffffcc;
	background: #666699 url("images-style-sheet/img-row-head-site-bar-shadow-left-scan.gif") repeat-x;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 6px;
	padding-bottom: 0;
	height: 10px;
	vertical-align:top;
}


#row-main-shadow-td-right-directions
{
	border-top:   1px solid #006600;
	width: 370px;
	background: #fff1c4 url("images-style-sheet/img-row-head-site-bar-shadow-right.gif") repeat-x;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0px;
	padding-bottom: 0;
	padding-left: 0;
	height: 10px;
}


/*Main content row*/
#row-main-content
{
	vertical-align:top;
}

/* left content column */
#td-main-content-left
	{
	border-right: 1px solid #006600;
	padding-top:0;
	vertical-align:top;
	}

a.LeftScan:link    {color:#141654;}
a.LeftScan:visited {color:#141654;}
a.LeftScan:hover   {color:#666699}
a.LeftScan:active  {color:#141654;}



/* right content column */
#td-main-content-right
	{
	width: 30%;		/* sets right Scan column width*/
	background: #fff1c4 url("images-style-sheet/img-main-content-right-background-shadow.gif") repeat-y;
	padding-top:0;
	vertical-align:top;
	}

a.RightScan:link    {color:#141654;}
a.RightScan:visited {color:#141654;}
a.RightScan:hover   {color:#666699}
a.RightScan:active  {color:#141654;}

#td-main-content-right-directions
	{
	width: 370px;		/* sets right Scan column width*/
	background: #fff1c4 url("images-style-sheet/img-main-content-right-background-shadow.gif") repeat-y;
	}

#td-home-left-scan
	{
	width: 20%;
	background-color:#666699;
	color: #ffffcc;
	font: normal 1em/1.0em Geneva, Arial, Helvetica, sans-serif;
	padding-top:0;
	vertical-align:top;
	}
p.pHomeLeftScan		   
	{
		font-weight:bold;
		font-size:90%;
		margin-top:1.0ex;
	}
	
a.HomeLeftScan:link    {color:#ffffcc;}
a.HomeLeftScan:visited {color:#ffffcc;}
a.HomeLeftScan:hover   {color:Lime}
a.HomeLeftScan:active  {color:#ffffcc;}



/* line break follows image floating right */
br.img-right-break
	{
		clear:right;
	}

/* line break follows image floating left */
br.img-left-break
	{
		clear:left;
	}



/*  Image tables left and right
	the right and left images are in tables to allow the caption
	below the image in a separate table row
*/
table.picTableRight-200px
	{
		margin: 3px 0 3px 36px;
		float: right;
		border-style:none;
		width: 200px;
	}

table.picTableRight-252px
	{
		margin: 3px 0 3px 36px;
		float: right;
		border-style:none;
		width: 252px;
	}

table.picTableRight-300px
	{
		margin: 3px 0 3px 36px;
		float: right;
		border-style:none;
		width: 300px;
	}

table.picTableRight-custom
	{
		margin: 3px 0 3px 36px;
		float: right;
		border-style:none;
		/* set the table width in the HTML page */
	}

/* left floating images 200 pixels, 300 pixels, pr custom width wide */
table.picTableLeft-200px
	{
		margin: 3px 36px 3px 0;
		float: left;
		border-style:none;
		width: 200px;
	}
	
table.picTableLeft-252px
	{
		margin: 3px 36px 3px 0;
		float: left;
		border-style:none;
		width: 252px;
	}

table.picTableLeft-300px
	{
		margin: 3px 36px 3px 0;
		float: left;
		border-style:none;
		width: 300px;
	}

table.picTableLeft-custom
	{
		margin: 3px 36px 3px 0;
		float: left;
		border-style:none;
		/* set the table width in the HTML page */
	}
	
	
/* default for block table in right scan column */
table.RightScanInsert
	{
		width: 90%;
		border-style:solid;
		border-color:#141654;		/* header & footer deep blue */
		border-width:6px;
		background-color:#666699;	/* bread crumb blue */
		color: #ffffcc;				/* header & footer light tan */
		margin-top:36px;
	}
/*End Main Page table -----------------------------------------------*/



/*Page Footer table*/
#tbl-Page-Footer
	{
		width: 100%;
		background-color: #141654;
		color: #ffffcc; /*White; */
		font: normal 1em/1.1em Geneva, Arial, Helvetica, sans-serif;
		font-size: small;
	}
	
#td-page-footer-left
	{
		/* holds link to page top */
		text-align: left;
	}

#td-page-footer-center
	{
		/*holds name and address*/
		text-align: center;
	}


#td-page-footer-rignt
	{
		/*holds phone number and url*/
		width: 30%;
		text-align: left;
	}


a.PageFooter         {color: white}
a.PageFooter:hover {color:Lime}	

/*end Page Footer table -----------------------------------------------*/