/* CSS Document */

body
{
	margin:0;
	padding:0;
	font-family:"Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#333333;
	background-image:url(images/back.jpg);
	background-repeat:repeat-x;
	color:#000000;	
}

h1
{
/*	background: #D36832;
	color: #FFF;
	margin: 0;
	padding: .5em 3%;
	border-bottom:5px solid #387A9B;
	*/
	border: 1px solid #b79fa5;
	background-color: #daced2;
	font-size:22px;
	padding: 8px 0 8px 4px;
	margin: 0 0 12px 0;
	color:#663333;
}

p
{
padding:0;
margin:0;
}

p.bold
{
font-weight:bold;
}

h2, h3
{
	margin-top: 0;
}

h4
{
font-size:14px;
}
a.bold
{font-weight:bold;}

#logo
{height:223px;}
#logo img
{
/* line below stops removes spacing between the menu and the logo */
	display:block;

}

	ul#navigation
		{
		margin: 0 auto 0 auto;
		padding-left: 0;
		list-style-type:none;
		background-color:#000000;
		float:left;
		width:100%;
		}
		
		ul#navigation li
		{
		display:inline;
		}
		
		ul#navigation a
		{
		display:block;
		float:left;
		padding: .6em .6em;

		text-decoration:none;
		color:#FFFFFF;
		font:Verdana;
		font-size:12px;
		border-right: 1px solid #999999;
		text-align:center;
		}
		
		ul#navigation a:hover
		{
		color:#000000;
		background-color:#bb8888;
		}


		ul#eventslist
		{
		padding:0px;
		margin:none;
		list-style-type:none;
		text-decoration:none;
		}

		ul#eventslist li
		{
		text-decoration:none;
		}

		ul#eventslist li a
		{
		margin-bottom:10px;
		text-decoration:none;
		}		

		
		ul#eventslist a
		{
		text-decoration:none;
		}

		ul#eventslist a:hover
		{
		text-decoration:underline;
		}






#container
{
clear:both;
background-color:#FFFFFF;
border: 0px;
padding-bottom:15px;
padding-top:10px;
}

#eventscontainer
{
float:left;
width: 250px;
border: 1px solid white;
margin: 8px 0 0 8px;
}

#eventsrightcontainer
{
float:right;
width:500px;
border: 1px solid white;
margin: 8px 10px 0 0;
}

#eventsrightcontainer p
{
margin: 0 0 12px 0;
text-align:justify;
}

#leftcontainer
{
float:left;
width: 200px;
border: 1px solid white;
margin: 8px 0 0 8px;
}

#rightcontainer
{
float:right;
width:550px;
border: 1px solid white;
margin: 8px 10px 0 0;
}

#rightcontainer p
{
margin: 0 0 12px 0;
text-align:justify;
}
#rightcontainer_contact p
{
margin: 0 0 12px 0;
text-align:justify;
}
#rightcontainer_printer p
{
margin: 0 0 12px 0;
text-align:justify;
}

#rightcontainer_left
{
width:270px;
float:left;}

#rightcontainer_about_text
{
width:400px;
float:left;}

#rightcontainer_about_paul
{
width:420px;
float:left;}

#rightcontainer_right
{float:right;}

#rightcontainer_photos A 
{
color: #663366;
text-decoration: none;}

#rightcontainer_photos A:hover 
{text-decoration:underline;}

#rightcontainer_contact
{
float:right;
width:760px;
border: 1px solid white;
margin: 8px 10px 0 0;
}

#rightcontainer_printer
{
float:left;
width:600px;
border: 1px solid white;
margin: 8px 10px 0 0;
}

.panels
{
border: 1px solid #b79fa5;
background-color: #daced2;
padding: 3px;
margin: 0 0 8px 0;
}

.panels h2
{
font-size:14px;
font-weight:normal;
border: 1px solid #663333;
background-color: #bb8888;
padding: 6px 0px 6px 0px;
/* if using 2 images, use e.g. h2 element, and then a span class, and use two background images*/
}

.panels h2 span.headingpic
{
display:block;  /* need to change this to block, so that the height will work on a span item, as this is treated "inline" as standard*/
background: transparent url(images/h2-bg.gif) no-repeat top left;  /*top left anchors it to the top left, you can anchor to bottom left to keep footer at bottom*/
padding: 3px 0 0 30px;
margin: 0 0 0 20px;
height:21px;
/* border: 1px solid red;*/
/*margin works on outside, padding on inside. always use margin around outside - only use padding when it comes to the text itself. */
}

.panels p
{
padding: 0 0 8px 12px;
}

#events
{
}

#instructorpanel
{ 
}

span.bold
{
font-weight:bold;
}

#events span.date
{
font-weight:bold;
}

#locations
{}


#locations span.clublocation
{
font-weight:bold;
}

#footer
{
width:800px;
padding: 14px 0px 20px 0px;
border:0;
margin:0px 0px 0px 0px;
display:block;
clear:both;
background: transparent url(images/footer.gif) no-repeat bottom left;
text-align:center;
font-size:9px;
}

#maincontainer
{
width: 800px;
margin: 10px auto 10px auto;
/* border-left: 1px solid white;
border-right: 1px solid white; */
}

#rightcontainer_photos
{
	border: 1px solid #b79fa5;
	background-color: #daced2;
	padding: 8px 0 8px 4px;
	margin: 20px 0 12px 0;
	color:#663333;
}


.clear
{
clear:both;
}


#patternmenu {
	border-bottom : 1px solid #ccc;
	margin : 0;
	padding-bottom : 19px;
	padding-left : 10px;
}

#patternmenu ul, #patternmenu li	{
	display : inline;
	list-style-type : none;
	margin : 0;
	padding : 0;
}

	
#patternmenu a:link, #patternmenu a:visited	{
	background : #E8EBF0;
	border : 1px solid #ccc;
	color : #666;
	float : left;
	font-size : small;
	font-weight : normal;
	line-height : 14px;
	margin-right : 8px;
	padding : 2px 10px 2px 10px;
	text-decoration : none;
}

#patternmenu a:link.active, #patternmenu a:visited.active	{
	background : #fff;
	border-bottom : 1px solid #fff;
	color : #000;
}

#patternmenu a:hover	{
	color : #f00;
}

	
#section.section-1 #patternmenu li#nav-1 a, 
#section.section-2 #patternmenu li#nav-2 a,
#section.section-3 #patternmenu li#nav-3 a,
#section.section-4 #patternmenu li#nav-4 a {
	background : #fff;
	border-bottom : 1px solid #fff;
	color : #000;
}

#patternmenu #subnav-1,
#patternmenu #subnav-2,
#patternmenu #subnav-3,
#patternmenu #subnav-4 {
	display : none;
	width: 90%;
}

#section.section-1 #patternmenu ul#subnav-1, 
#section.section-2 #patternmenu ul#subnav-2,
#section.section-3 #patternmenu ul#subnav-3,
#section.section-4 #patternmenu ul#subnav-4 {
	display : inline;
	left : 550px;
	position : absolute;
	top : 400px;
}

#section.section-1 #patternmenu ul#subnav-1 a, 
#section.section-2 #patternmenu ul#subnav-2 a,
#section.section-3 #patternmenu ul#subnav-3 a,
#section.section-4 #patternmenu ul#subnav-4 a {
	background : #fff;
	border : none;
	border-left : 1px solid #ccc;
	color : #999;
	font-size : smaller;
	font-weight : bold;
	line-height : 10px;
	margin-right : 4px;
	padding : 2px 10px 2px 10px;
	text-decoration : none;
}

 #patternmenu ul a:hover {
	color : #f00 !important;
}

#patterncontents {
	background : #fff;
	border : 1px solid #ccc;
	border-top : none;
	clear : both;
	margin : 0px;
	padding : 15px;
}