/*============================================================================

Primary CSS Stylsheet for use with the web site FraserSquadron.ca

Copyright (c) Wild Hare Productions 2008-2009. All rights reserved.

Portions of this file are copyright their respective owners.
Copyright notice for these sections is given as appropriate.

============================================================================*/

/* --------------------------------------------- **
**  Elements used in the layout of every page    **
** --------------------------------------------- */
#container {
	position: relative;
	width: 800px;
	font-family: verdana;
	margin: 0 auto;
	background-color:white;
}

#masthead {	height:110px; }

#navigation {
	width: 170px;
	float: left;
	padding-top:20px;
}

#content {
	width:630px;
	min-height: 540px;
	float:right;
	padding-top:20px;
}

#content dt { font-weight: bold; }

#lastupdate {
	font-size: x-small;
	right: 0px;
	text-align: right;
	bottom:0%;
}

#footer {
	text-align: center;
	font-size: x-small;
	background-color: #C0C0C0;
	width: 800px;
	clear: both;
	margin: 0 auto;
	color: #808080;
	height: 61px;
}

/* ------------------------------------------------------------------------- */
/*   Support for more...                                                     */
/* ------------------------------------------------------------------------- */
.more {	width: 440px; border: thin #C0C0C0 solid; padding: 10px; background:white; }


/* ---------------------------------------------------------**
**   Support for Bridge page                                **
**--------------------------------------------------------- */
#links{	font-family: Verdana; font-size: small }
#links img { width: 0px; height: 0px; border-width: 0px; }
#links a { width: 0px; height: 0px; border-width: 0px; text-decoration: none; }
#links a:hover img { position: absolute; top:220px; right: 40px; height: 320px; width: 240px; }



/* ---------------------------------------------------------------------------
   Support for Fairlead Archive page
--------------------------------------------------------------------------- */
.Fairlead { position:relative; text-align:center; width: 150px; height:129px; float:left; }
.Fairlead a { text-decoration:none }
.Fairlead img { border-width:0px; }


/* ---------------------------------------------------------------------------
   Support for Links Page
--------------------------------------------------------------------------- */
#slidecontainer { width: 590px;	height: 70px; overflow: auto; overflow-x: hidden; overflow-y: hidden; }
.slider { width: 800px; height: 40px; padding: 10px; background: #666699; background-color: #CCCCFF; }
.section { margin:0; width:80px; float:left; margin-right:50px; font-family:Verdana; font-size:small; text-align:center; vertical-align:middle; }

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto;  /* center for now */
	width: 30em; /* ems so it will grow */
	background: url('../images/sbbody-r.gif') no-repeat right bottom;
	font-size: 100%;
}
.boxhead {
	background: url('../images/sbhead-r.gif') no-repeat right top;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url('../images/sbhead-l.gif') no-repeat left top;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url('../images/sbbody-l.gif') no-repeat left bottom;
	margin: 0;
	padding: 5px 30px 31px;
	font-family: Verdana;
	font-size: small;
	text-align:justify;
}

.boxbody img { border-width: 0px; }

 
/* ------------------------------------------------------------------------- */
/*   Used on the Gallery page                                                */
/* ------------------------------------------------------------------------- */
.frm1 {	width: 400px; height: 120px; margin: auto; border: thin #FF0000 solid; margin-bottom: 20px; }
.frm1 .pic { float: right; border-width: 0px; width: 160px; height: 120px; }
.frm1 .txt { float: left; width: 220px;	padding-left: 20px; }
.frm1 .tit { float: left; width: 220px; padding-left: 20px; font-weight:bold; font-size: x-large; }
.frm1 a { text-decoration: none; color: #000000; }

.frm2 { width: 400px; height: 120px; margin: auto; border: thin #FF0000 solid; margin-bottom: 20px;}
.frm2 .pic { float: left; border-width: 0px; width: 160px; height: 120px;}
.frm2 .tit { float: right; width: 220px; text-decoration: none; color: #000000; font-weight:bold; font-size: x-large; }
.frm2 .txt { float: right; width: 220px; text-decoration: none; color: #000000; }
.frm2 a { text-decoration: none; color: #000000; }


/*----------------------------------------------------------------------------
	CornerBox
	Created <div> areas with rounded corners.
	To round the corners of text areas, include the following code:
	
	<div class="cornerBox">
		<div class="corner TL"></div>
		<div class="corner TR"></div>
		<div class="corner BL"></div>
		<div class="corner BR"></div>
		<div class="cornerBoxInner">
			<p>Lorem ipsum dolor sit amet.</p>
		</div>
	</div>
	
	Sub-types
	TrBox - training page box
----------------------------------------------------------------------------*/
.cornerBox { position: relative; background: #cfcfcf; width: 100%; }
.corner { position: absolute; width: 10px; height: 10px; background: url('corners.gif') no-repeat; font-size: 0%; }
.cornerBoxInner { padding: 10px; }

.TrBox { position: relative; background: #cfcfcf; width: 100%; }
.corner { position: absolute; width: 10px; height: 10px; background: url('corners.gif') no-repeat; font-size: 0%; }
.TrBoxInner { padding: 10px; }

.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }




/*----------------------------------------------------------------------------
	Collapsable Table - CSS control of table appearance.
  
	To create a collapsable table insert this code.
  
	<table summary="Something" class="footcollapse">
		<caption style="text-align:center">Table Caption Goes Here</caption>
		<thead>
			<tr><th>Pre-requisite:</th><td>none</td></tr>
			<tr><th>Start Dates:</th><th>none</th></tr>
			<tr><th>Price:</th><td>n/a</td></tr>
		</thead>
		<tfoot>
			<tr><th>More</th><td></td></tr>
		</tfoot>
		<tbody>
			<tr><td colspan="2">	
				<p>All courses run one night per week, from 7:00 to 9:30 pm</p>
			</td></tr>
		</tbody>
	</table>
----------------------------------------------------------------------------*/

table.footcollapse{ width:30em; }
table.footcollapse caption{

/*--------------------------
	text-transform:uppercase;
	text-align:left;
---------------------------*/
	margin: 0;
	color: white; 
	font-weight: bold;
/*--------------------------
	font-size: 1.2em; 
	padding: 22px 30px 5px;
---------------------------*/
	padding:.5em 1em;
	font-size: 120%; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
table.footcollapse th{ text-align:left; font-weight:normal; font-size:small; font-family:Verdana; }
table.footcollapse,table.footcollapse th,table.footcollapse th
{
	border:none;
	border-collapse:collapse;	
}
table.footcollapse thead th
{
	border-style:solid;
	border-width:0px;
	border-color:#cff #69c #69c #cff;
	background:#9cf;
	padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
	border-style:solid;
	border-width:1px;
	border-color:#9cf #369 #369 #9cf;
	background:#69c;
	padding:2px 10px;
}
table.footcollapse tbody{ background:#ddd; }
table.footcollapse tbody td{ padding:5px 10px; border:1px solid #999; }
table.footcollapse tbody th{ padding:2px 10px; border:1px solid #999; border-left:none; }
table.footcollapse tbody tr.odd{ background:#ccc; }
table.footcollapse tfoot td img{ border:none; vertical-align:bottom; padding-left:10px; float:right; }
table.footcollapse p{ font-size:small; text-align:justify }


/* ------------------------------------------------------------------------- */
/* Credits: Dynamic Drive CSS Library                                        */
/* URL: http://www.dynamicdrive.com/style/                                   */
/* http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/     */
/* ------------------------------------------------------------------------- */

.bluebutton{ margin-left: 6px;	}

a.bluebutton{
	background: transparent url('square-blue-left.gif') no-repeat top left;
	display: block;
	float: left;
	font: normal 12px Arial; /* Change 12px as desired */
	line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 23px; /* Height of button background height */
	padding-left: 9px; /* Width of left menu image */
	text-decoration: none;
}

a:link.bluebutton, a:visited.bluebutton, a:active.bluebutton{ color: #494949; /*button text color*/ }

a.bluebutton span{
	background: transparent url('square-blue-right.gif') no-repeat top right;
	display: block;
	padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
	text-align:center;
}

a.bluebutton:hover{ /* Hover state CSS */ background-position: bottom left; }

a.bluebutton:hover span{ /* Hover state CSS */
	background-position: bottom right;
	color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
	overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
	width: 100%;
}


.greenbutton { margin-left: 1px; }
a.greenbutton{
	background: transparent url('square-green-left.gif') no-repeat top left;
	display: block;
	float: left;
	font: normal 12px Arial; /* Change 12px as desired */
	line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 23px; /* Height of button background height */
	padding-left: 9px; /* Width of left menu image */
	text-decoration: none;
}

a:link.greenbutton, a:visited.greenbutton, a:active.greenbutton{ color: #494949; /*button text color*/ }

a.greenbutton span{
	background: transparent url('square-green-right.gif') no-repeat top right;
	display: block;
	padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
	text-align:center;
}

a.greenbutton:hover{ /* Hover state CSS */ background-position: bottom left; }

a.greenbutton:hover span{ /* Hover state CSS */
	background-position: bottom right;
	color: black;
}



/* ------------------------------------------------------------------------- */
/*   MooTools style accordian                                                */
/* ------------------------------------------------------------------------- */
#accordion {margin:20px 0px;}

h3.toggler {cursor: pointer; color: #FF0000; margin: 0 0 4px 0; padding: 3px 5px 1px; }

p.toggler {	cursor: pointer; color: #FF0000; margin: 0 0 4px 0; padding: 3px 5px 1px; }

div.element p, div.element h3 {	margin:0px; padding:4px; }

blockquote { padding:5px 20px; }