/*
 * ======================================================================
 * Style sheet for WIndsor Community Orchestra
 * Copyright Andrew Foakes, 23-08-2008
 * ----------------------------------------------------------------------
 * This still needs some work.  It does not manage the cascade well and
 * defines the same thing multiple times.  But it works, and that's the
 * main thing.
 * ======================================================================
 */

/*
 * ----------------------------------------------------------------------
 * Start by removing default formatting.
 * ----------------------------------------------------------------------
 */

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote
{
	margin: 0;
	border: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
a { text-decoration: none; }
a img { border: none; }

/*
 * ----------------------------------------------------------------------
 * Set up the body, paragraph and headings as I want them.
 *
 * Note that I only use up to 4 headings, so h5 and h6 are left alone.
 * ----------------------------------------------------------------------
 */

body
{
	margin: 0pt;
	border: 0pt;
	padding: 0pt;
	background-color: #333;
	background-image: url(../images/backround.png);
	background-repeat: repeat-y;
	background-position: center top;
}

p
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #000000;
	text-align: left;
	line-height: 140%;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1em 10px 0px 60px;
}

p sup
{
	font-size: 0.6em;
	line-height: 100%;
}

p.start { padding-top: 0px; }

h1, h2, h3, h4
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1em 10px 15px 60px;
}

h1
{
	font-size: 2em;
	color: maroon;
	background-color: white;
	background-image: url(../images/wco_cello.gif);
	background-repeat: no-repeat;
	background-position: 0px 10px;
}

h2
{
	font-size: 1.5em;
	color: purple;
	background-color: white;
	background-image: url(../images/wco_clarinet.gif);
	background-repeat: no-repeat;
	background-position: 5px 10px;
}

/*
 * Note that this h3 format is actually specific to the "Useful links" page.  Hence the need
 * for the "start" class and "a" format.
 */
h3
{
	color: olive;
	font-size: 1.0em;
	font-weight: normal;
	padding: 1em 10px 0px 60px;
}

h3.start { padding-top: 0px; }

h3 a
{
	color: olive;
	font-size: 1.0em;
	text-indent: 0;
	padding: 0px 0px 0px 0px;
	border-right: 0px #686B3E solid;
	border-left: 0px #686B3E solid;
	border-top: 0px #686B3E solid;
	border-bottom: 0px #686B3E solid;
	text-decoration: underline;
}

/*
 * h4 is unused at this time.
 */
h4
{
	color: olive;
	font-size: 1.0em;
	font-style: normal;
	font-weight: normal;
}

/*
 * ----------------------------------------------------------------------
 * Set up some inline styles that I use to emphasis text.
  * ----------------------------------------------------------------------
 */

/*
 * Strong for use, for example, with name of the orchestra.
 */
.strong
{
	color: #339966;
	font-weight: bold;
}

/*
 * Error, for use with error messages..
 */
.error
{
	color: maroon;
}

/*
 * Note to bring out a particular issues (e.g. extra rehearsals).
 */

.note
{
	color: maroon;
	font-weight: normal;
	padding: 5pt 5pt 5pt 100pt;
}

/*
 * Item is in a special list, such as rehearsal dates.
 */

.item
{
	color: #339966;
	font-weight: normal;
	padding: 5pt 5pt 5pt 100pt;
}

.itemstart
{
	color: #339966;
	font-weight: normal;
	padding: 10pt 5pt 5pt 100pt;
}

/*
 * Name where I use a proper name, such as a composer or title of piece of music.
 */

.name
{
	color: #339966;
	font-weight: normal;
	font-style: italic;
}

/*
 * ----------------------------------------------------------------------
 * Set up styles for positioning the elements on the page.
  * ----------------------------------------------------------------------
 */

/*
 * This sets the width for the page.
 * Note the IE7 hack of min-height that allows the easy clearing method to work.
 */

#pageWrapper
{
	width: 1000px;
	margin: 0pt auto 0pt auto;
	border: 0pt;
	padding: 0pt;
	background-color: #DDFFFF;
	min-height: 1px;
}

/*
 * Force the page wrapper to wrap everything using the easy clearing method.
 */

#pageWrapper:after
{
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

/*
 * This is the wrapper for the main part of the page.
 */

#mainWrapper
{
	float: right;
	width: 760px;
	margin: 0pt;
	border: 0pt;
	padding: 0pt;
}

/*
 * The extra information area.
 */

#infoWrapper
{
	float: left;
	width: 240px;
	margin: 0pt;
	border: 0pt;
	padding: 0pt;
}

/*
 * The copyright and contact information area.  Also use the easy clearing method
 * to force enclosing of floated elements.  Notive the IE7 min-height hack.
 */

#contactArea
{
	margin: 0pt;
	border: 0pt;
	padding: 0pt;
	clear: both;
	min-height: 1px;
}

#contactArea:after
{
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

/*
 * ----------------------------------------------------------------------
 * Set up styles for the banner.
  * ----------------------------------------------------------------------
 */

#banner
{
	background-color: #396;
	background-image: url(../images/wco_0200_logo_thick_trans_green.png);
	background-repeat: no-repeat;
	background-position: 30px 10px;
	min-height: 155px;
}

#banner p
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 36pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #CCFF99;
	text-align: left;
	line-height: 100%;
	margin-top: 0;
	margin-bottom: 0;
	padding: 50px 10px 10px 280px;
}

/*
 * ----------------------------------------------------------------------
 * Set up styles for the navigation bar.
  * ----------------------------------------------------------------------
 */

/*
 * Force the wrapper to wrap everything using the easy clearing method.
 */

#navBar
{
	background-color: #339966;
	border-bottom: 22px #CCFF99 solid;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	min-height: 16px;
}

#navBar:after
{
	content: ".";
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
	clear: both;
}

#navBar ul
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 1em;
	list-style: none;
	border: 0;
	padding: 5px 0px 0px 250px;
}

#navBar ul li { float: left; }

#navBar a
{
	color: #CCFF99;
	text-align: center;
	text-decoration: none;
	width: 100px;
	margin-right: 5pt;
	border-width: 2px 2px 0px 2px;
	border-color: #CCFF99;
	border-style: solid;
	padding: 5px 0px 5px 0px;
	background-color: #339966;
	display: block;
}

#homePage a#homeLink,
#aboutPage a#aboutLink,
#nextPage a#nextLink,
#pictPage a#pictLink,
#formPage a#formLink,
#linkPage a#linkLink
{
	color: #339966;
	background-color: #CCFF99;
}

/*
 * ----------------------------------------------------------------------
 * Set up styles for the information area.
  * ----------------------------------------------------------------------
 */

.info
{
	width: 220px;
	float: left;
	background-image: url(../images/wco_breakout_border_lower_200.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: #CCFF99;
	margin: 15px 0px 0px 15px;
	padding-bottom: 50px;
	border: 0px;
}

.info p, ul, a
{
	color: #333333;
	font-size: 0.8em;
	text-indent: 0;
	padding: 10px 10px 0px 10px;
	border-right: 1px #686B3E solid;
	border-left: 1px #686B3E solid;
}

.info p.start { padding-top: 10pt; }

.info h2
{
	color: #CC9900;
	font-size: 1.0em;
	text-indent: 0;
	padding: 10px;
	font-weight: normal;
	background-color: #660033;
	background-image: url(../images/wco_breakout_border_upper_200.png);
	background-repeat: no-repeat;
	background-position: center top;
	font-variant: small-caps;
	text-align: center;
}

.info a
{
	color: #333333;
	font-size: 1.0em;
	text-indent: 0;
	padding: 0px 0px 0px 0px;
	border-right: 0px #686B3E solid;
	border-left: 0px #686B3E solid;
	border-top: 0px;
	border-bottom: 0px;
	text-decoration: underline;
}

.info a:hover
{
	text-decoration: none;
	background-color: #339966;
	color: #DDFFFF;
}

/*
 * ----------------------------------------------------------------------
 * Set up styles for the main area.
  * ----------------------------------------------------------------------
 */

/*
 * Note the min-height IE7 hack to get the easy clearing method to work.
 */
.main
{
	margin-right: 10px;
	margin-left: 10px;
	padding: 10px 10px 10px 10px;
	background-color: #FFFFFF;
	border-right: 3pt #CCFF99 solid;
	border-bottom: 3pt #CCFF99 solid;
	border-left: 3pt #CCFF99 solid;
	min-height: 1px;
}

/*
 * Again, force the main area to include everything using the easy clearing method.
 */

.main:after
{
	content: ".";
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
	clear: both;
}

.main ul
{
	border: 0 #CCFF99 solid;
	list-style: disc inside;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: maroon;
	text-align: left;
	line-height: 140%;
	margin-top: 0;
	margin-bottom: 0;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 70px;
	font-size: 1em;
}

.main li
{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.main span.item
{
	color: black;
	padding: 0;
}

.main a
{
	font-size: 1.0em;
	text-indent: 0;
	padding: 0px 0px 0px 0px;
	border-right: 0px #686B3E solid;
	border-left: 0px #686B3E solid;
	border-top: 0px;
	border-bottom: 0px;
	text-decoration: underline;
}

.main a:hover
{
	text-decoration: none;
	background-color: #339966;
	color: #DDFFFF;
}

/*
 * Styles for the form in the main area.
 */
.main .label
{
	float: left;
	width: 140px;
	text-align: right;
	clear: both;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #339966;
	margin: 2px 15px 0px 0px;
}

.main .labelHighLight
{
	float: left;
	width: 140px;
	text-align: right;
	clear: both;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: maroon;
	margin: 2px 15px 0px 0px;
}

.main input,
.main select
{
	display: block;
	margin: 0px 0px 10px 160px;
}

.main textarea
{
	display: block;
	margin: 20px 0px 0px 20px;
}

.main #mainForm
{
	margin: 20px 0px 0px 0px;
	min-height: 16px;
}

.main #mainForm:after
{
	content: ".";
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
	clear: both;
}

.main #mainForm #formSubmit,
.main #mainForm #formReset
{
	margin: 20px 0px 0px 30px;
	float: left;
	display: inline;
}

/*
 * Styles for picture and the buttons.
 */

.main .picture
{
	margin: 20px auto 20px auto;
	text-align: center;
}

.main .picture img { border: 4pt #CCFF99 solid; }

.main .caption
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #333333;
	text-align: center;
	line-height: 120%;
	padding: 5px 5px 5px 5px;
	width: 600px;
	height: 30px;
	border: 0 #CCFF99 solid;
	background-color: #FFFFFF;
	left: 0%;
	margin: 0pt auto 0px auto;
}

/*
 * Use a fixed width wrapper div to centre the buttons (and the easy clearing
 * method to ensure this div includes the buttons).
 */

#buttonWrapper
{
	margin-right: auto;
	margin-left: auto;
	border: 0px;
	width: 300px;
}

#buttonWrapper:after
{
	content: ".";
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
	clear: both;
}

/*
 * The buttons themselves are just paragraphs of text floated left and right (the
 * background image is just a rectangle with curved corners).
 */

#buttonWrapper .buttonNext,
#buttonWrapper .buttonPrev
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #339966;
	text-align: center;
	height: 20px;
	width: 100px;
	padding: 0;
	margin: 0px 0px 0px 0px;
	border: 0 #CCFF99 solid;
	background-image: url(../images/button.png);
	background-position: center center;
	background-repeat: no-repeat;
}

#buttonWrapper .buttonNext { float: right; }
#buttonWrapper .buttonPrev { float: left; }

/*
 * ----------------------------------------------------------------------
 * Set up styles for the contact information area.
  * ----------------------------------------------------------------------
 */
#contactArea
{
	margin: 0pt 0pt 0pt 0pt;
	border: 0px black solid;
	padding: 10px 10px 10px 10px;
}

#contactArea p
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #396;
	text-align: left;
	line-height: 100%;
	margin: 0px;
	border: 0px;
	padding: 10px 10px 10px 10px;
}

#contactArea a
{
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	color: #396;
	text-align: left;
	margin: 0px;
	border: 0px;
	padding: 0px 0px 0px 0px;
	text-decoration: underline;
}

#contactArea a img
{
	margin: 0px;
	border: 0px;
	padding: 0px 0px 0px 0px;
}

#contactArea a:hover
{
	text-decoration: none;
	background-color: #339966;
	color: #DDFFFF;
}

#contactArea #built
{
	float: left;
}

#contactArea #copyright
{
	float: right;
}