/*
* Defaults for body
*/
body 
{
	font-family: verdana, sans-serif;
	font-size: small;
	text-align: justify;
}

/*
* Page headings. Don't use them, use images instead
*/
h1
{
        display: none;
}

/*
* Section headings. Centred and separated
*/
h2
{
	font-size: small;
	text-align: center;
	margin-top:25px
}

/*
* Paragraph headings. Left aligned and separated.
*/
h3
{
	font-size: small;
	text-align: justify;
	margin-top: 35px;
}

/*
* Minor headings. Left aligned, no separation and small.
* These are for blocks of text that aren't even a full paragraph
*/
h4
{
	font-weight: bold;
        text-align: left;
        color: black;
        margin-top: 10px;
        margin-bottom: 0px;
        background-color: white;
}

/*
* Image boxes are centered and the smaller text allows for a caption (also centered)
*/
div.image
{
	text-align: center;
	font-size: smaller;
}

/*
* Stuff in the header is brown (the tagline) and centered.
* This covers the tagline and main logo
*/
div.header
{
	text-align: center;
	color: rgb(102, 51, 0 );
	background-color: white;
}

/*
* Stuff for the navigation list
* Should work with all browsers
*/
div.nav ul
{
	text-align:center;
	padding-bottom: 5px;	
	padding-top: 5px;
	padding-left: 0;
	margin-top: 0;
	/* cancels gap caused by top padding in Opera 7.54 */
	margin-left: 0;
	width: 100%;
	line-height: 18px;
	/* fixes Firefox 0.9.3 */
	font-size:smaller;
}

div.nav ul li
{
	display: inline;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 5px;
	/* matches link padding except for left and right */
	padding-top: 5px;
}

div.nav ul li a
{
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-top: 5px;
	border-right: 1px solid #fff;
}

/*
* The left column. 175 pixels wide, which gives a 25 pixel margin
* between it and the main section
* The text is smaller.
*/
div.events
{       
        margin:6px; padding:0;
	font-size: smaller;
}

/*
* Descriptions are just very small and justified.
* They have a gap under them to separate them from each other
*/
div.description
{
	text-align: justify;
	margin-bottom: 10px;
}

/*
* Dates/times text is brown (to make it stand out a little) and italic
*/
div.specifics
{
	color: rgb(102, 51, 0 );
	font-style: italic;
}

/*
* News column is on the right
* Otherwise, exactly like events column
*/
div.news
{
	margin:6px; padding:0;
	font-size: smaller;
}

/*
* The resolution chooser is tiny, in the top left corner of the screen
*/
div.reschooser
{
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: smaller;
}

/*
* The footer is at the bottom of the page and bold and centered
*/
div.footer
{
	font-weight: bold;
	text-align: center;
}

/*
* This is all stuff for a form
*/
label
{
	width: 6em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block;
}

legend
{
	color: #fff;
	background: rgb(102, 51, 0 );
	border: 1px solid rgb(102, 51, 0 );
	padding: 2px 6px
}

/*
* These are for 'profiles'. Image on one side, text on another
* Profiles cannot overlap in any way
*/
div.profile 
{
	float: left;
	margin-bottom: 20px;
	width: 100%;
}

p.profile
{
	font-size: smaller;
        margin: 0 0 0 150px;
}

img.profile 
{
	float: left;
	clear: both;
}

/*
* Section headers in a profile are much smaller, because the surrounding
* text is especially styled
*/
div.profile h2
{
	text-align:left;
	font-size: smaller;
	font-weight: bold;
	margin: 0 0 0 150px;
}