html 	{width:100%; }
body	{background:#4E595F url('../images/body-bg.gif') repeat-x 0 0; margin:0; padding:0; font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman", serif; font-size:80%; color:#000000; width:100%; }

p		{padding:0 0 15px 0; margin:0; line-height:140%; }
h1		{margin:0; padding:0; font-size:130%; font-weight:normal; }
h2		{margin:0; padding:0 0 20px 0; font-size:140%; font-weight:normal; }


/*link styling*/
a			{color:#000000; text-decoration:underline; }
a:hover		{text-decoration:none; }
#footer a	{color:#637076; }


/*structural elements*/
.section 		{text-align:center; width:100%; border-bottom:1px solid #637076 }

#header
{
    background:#1A292F;
    margin:0 auto;
    text-align:left;
    padding:20px 20px 20px 20px;
    width:720px;
    border-left:1px solid #637076;
    border-right:1px solid #637076;
}

#container		{margin:0 auto; text-align:left; padding:0 20px 20px 20px; width:720px; border-left:1px solid #637076; border-right:1px solid #637076; }

h1#logo
{
    background:#E8EDF7;
    float:left;
    padding:47px 20px;
    width:275px;
    border:1px solid #FFFFFF;
    text-align:center;
    min-height:24px;
    background-image: url(../images/Rideout.jpg)
}

#pictureRail	{text-align:center; }

#news
{
   
}

#menu, #mainPageMenu
{
    background:#1A292F;
    margin:0 0 0 0px;
    border:1px solid #FFFFFF;
    padding:10px;
    color:#FFFFFF;
    text-align:center;

}

#mainPageMenu
{
    margin: 20px 0 20px 0;
}


#content, #mainPageContent
{
    background:#E8EDF7;
    margin:10px 0 0 10px;
    padding:20px 20px 5px 20px;
    border:1px solid #FFFFFF;
}

/* Added class for main pages */
#mainPageContent {
    margin: 20px 0 0 0;
}


#footer			{margin:0 auto; text-align:left; padding:20px 20px 60px 20px; width:720px; border-left:1px solid #637076; border-right:1px solid #637076; }
#footer p		{background:#1A292F; padding:10px; font-size:90%; color:#637076; border:1px solid #637076; text-align:center; }


/*section dependant style over-rides*/
#news h3	{ }
#news p		{ }

#header p	{text-align:center; font-size:170%; color:#E8EDF7; padding:45px 0 0 0; }

ul#menu, ul#mainPageMenu
{
}

ul#menu li, ul#mainPageMenu li
{
    margin:0;
    padding:0;
    list-style:none;
    display:inline;
}

ul#menu  a, ul#mainPageMenu a
{
    color:#FFFFFF;
    text-decoration:none;
    padding:10px 15px;
}

#pictureRail img	{margin:20px 10px;border:1px solid #FFFFFF;  }

#content img, #mainPageContent img
{
    border:1px solid #000000;
    float:right;
    margin:0 0 20px 20px;
}


/*This adds a little arrow under the menu item of the page you are on. (handy for navigation and usability)
To modify, edit the <body> tag by changing the id.
e.g, if the page you are on is the contact page, change: <body id="home"> to <body id="contact">*/
#home #homeLink,
#members #membersLink,
#events #eventsLink,
#race #raceLink,
#lynx #lynxLink,
#contact #contactLink,
{
    background:url('../images/menu-a-bg.gif') no-repeat center bottom;
}


/*just makes sure the content doesn't spill out the boxes, see http://www.positioniseverything.net/easyclearing.html for details*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
