/*********************
  RESET STYLES
*********************/
/* http://stannard.net.au/blog/index.cfm/2006/8/31/Removing-a-browsers-default-CSS-settings */
html, body, /*ul, ol, li,*/ p, h1, h2, h3, h4, h5, h6, form, fieldset, a {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-size: 100.01%; /* Fix for some browser bugs */
    background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    font-size:100%;
}

/*
  ps.. or check out this reset page??
  http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=10970
*/
/* END of Reset Styles */


/*********************
  TYPOGRAPHY STYLES
*********************/
/* 
  get text sizes sorted out... start by looking here...
  http://www.thenoodleincident.com/tutorials/typography/template.html
*/
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p {
    color:#000000;
    font-family:verdana,arial,helvetica,sans-serif;
}
body {
    background-color: #FFFFFF;
    /*background-image:url(http://www.thenoodleincident.com/img/n4_upgrade.gif);
      background-position:left top;
      background-repeat:no-repeat;*/
    margin: 0;
    padding: 40px 5% 5%;
}
.narrow1 {
    line-height:90%;
    width:50%;
}
.narrow2 {
    line-height:105%;
    width:50%;
}
a:link {
}
a:visited {
}
a:active {
}
a:hover {
}
h1 {
    font-size:150%;
    font-weight:normal;
}
h2 {
    font-size:120%;
    font-weight:normal;
}
h3 {
    font-size:100%;
    font-weight:normal;
}
h4 {
    font-size:80%;
    font-weight:bold;
}
h5 {
    font-size:70%;
    font-weight:bold;
}
h6 {
    font-size:64%;
    font-weight:bold;
}
img {
    border:0 none;
}
/*ol, ul, li {
    font-size:80%;
    line-height:120%;
}*/
/*p {
    font-size:80%;
    line-height:120%;
}*/
pre {
    font-family:monospace;
    font-size:80%;
}
strong, b {
    font-weight:bold;
}

/* END of Typography Template */

/******************************************************
 The Perfect THREE COLUMN LAYOUT  = 'threecol'

 All three columns grow and shrink as a percentage of total window width

 http://matthewjamestaylor.com/blog/perfect-3-column.htm
*******************************************************/
body {
    margin:0;
    padding:0;
    border:0;			/* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;		/* Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}

/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
    margin-bottom: 2em;
}
/*
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
}

#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}
*/
/* column container */
.colmask {
    position:relative;	/* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;			/* width of whole page */
    overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;			/* width of page */
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
			   only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
}
/* 3 Column settings */
.threecol { /* all three columns */
    background:#eee;		/* right column background colour */
    border: solid gray 2px;
}
.threecol .colmid { /* includes left and middle col */
    right:25%;			/* width of the right column */
    background:#fff;		/* center column background colour */
    border-right: solid gray 2px;
}
.threecol .colleft {
    right:50%;			/* width of the middle column */
    background:#f4f4f4;	/* left column background colour */
    border-right: solid gray 2px;
}
.threecol .col1 {
    width:46%;			/* width of center column content (column width minus padding on either side) */
    left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
    width:22%;			/* Width of left column content (column width minus padding on either side) */
    left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
    width:21%;			/* Width of right column content (column width minus padding on either side) */
    left:85%;			/* Please make note of the brackets here:
				   (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}
/* end of perfect three column layout */

/********************************************
   HOLY GRAIL 3 COLUMN LIQUID LAYOUT

  left and right maintain size... center column grows and shrinks...

  Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments
  No CSS hacks. SEO friendly 2-1-3 column order. Cross-browser. Equal height columns.
  http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

********************************************/
body {
    margin:0;
    padding:0;
    width:100%;
    background:#fff;
    /* Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of IE */ 
    min-width:800px; /* !!! to stop middle col getting too squashed !!! */
}

a {
    color:#369;
}

a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}

#header {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    border-bottom:1px solid #000;
}

/*
#header p {
	padding:.5em 15px	.2em 15px;
	margin:0;
}
#header h1  {
	padding:.2em 15px;
	margin:0;
}
#header h2  {
	padding:.2em 15px	.7em 15px;
	margin:0;
}
*/

#colmask3 { /* outer, full width */
    position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%;			/* width of whole page */
    overflow:hidden;		/* This chops off any overhanging divs */
    background:#f4f4f4;		/* Left column background colour */
    /*background:#ffd8b7;          /* Left column background colour */
    border-top: solid gray 2px;    /* top border, all the way across */
    border-bottom: solid gray 2px; /* bottom border, all the way across */
}

#colmask3 #colmid { /* inner, full width */
    float:left;
    width:200%;
    position:relative;
    left:300px; /* !!! set width of left col !!! */
    background:#fff;    	/* Centre column background colour */
    border-left: solid gray 2px; /* the right hand border of LEFT column */
}

#colmask3 #colright {
    float:left;
    width:100%;
    position:relative;
    left:50%;
    margin-left:-600px; /* !!! width of left & right added together !!! */
    background:#f4f4f4;    	/* Right column background colour */
    /*background:#ff9;    	/* Right column background colour */
    border-left: solid gray 2px; /* the left-hand border of RIGHT col */
}

#colmask3 #col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:100%;
}

#colmask3 #col1pad { /* middle col */
    margin-top:0;
    margin-right:5px; /* !!! gap between middle & right col !!! */
    margin-bottom:0;
    margin-left:605px; /* !!! width of left & right + ? margin !!! */
    overflow:hidden;
}

#colmask3 #col1 {
    width:100%;
    overflow:hidden;
}

#colmask3 #col2 { /* left col */
    float:left;
    width:290px; /* inner width of col2 */
    position:relative;
    margin-left:-50%;
    left:302px; /* !!! width of col2 + col2 left margin !!! */
    overflow:hidden;
}

#colmask3 #col3 { /* right col */
    float:left;
    width:290px; /* !!! inner width of col3 !!! */
    position:relative;
    left:5px; /* !!! !!! */
    overflow:hidden;
}

#footer {
    clear:both;
    float:left;
    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid #000;
}

/*
#footer p {
	padding:.5em 15px;
}
*/
/* end of Holy Grail 3 Column Liquid Layout */

/*********************
Two-Col Layout = 'leftmenu'
*********************/

.colmask {
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%;
}
.colright, .colmid, .colleft {
float:left;
position:relative;
width:100%;
}
.col1, .col2, .col3 {
float:left;
overflow:hidden;
padding:0 0 1em;
position:relative;
}
.leftmenu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
}
.leftmenu .colleft {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F4F4F4 none repeat scroll 0 0;
right:75%;
}
.leftmenu .col1 {
left:102%;
width:71%;
margin-top: 20px;
}
.leftmenu .col2 {
left:6%;
width:21%;
}
/* END of TWO-COLUMN layout */


/* 
 ***************************
 OUR UGLINESS BELOW vvv
 ***************************
*/

/* OUR MAIN PAGE HEADER */
#header #navtop {
width:100%;
background-color: #dcdcdc;
text-align: center;
}

#header #navstrip {
width:100%;
background-color: #b0c4de;
text-align: center;
height: 6px;
}

#header #strip {
width:197px;
margin-left: auto;
margin-right: auto;
background-color: #b0c4de;
height: 6px;
border: inset black 1px;
}

#header #logo
{
    width: 100%;
    text-align: center;
    background-color: #fff;
}

#header #legend {
width:100%;
background-color: #b0c4de;
text-align: center;
height: 15px;
}

/* END of Our Main Page Header */

/* Start of template subpage header */
/* SubPage Header styles */
#subheader {
    clear:both;
    float:center;
    width:100%;
}
#subheader {
    margin-bottom: 2px;
}
#subheader #menu{
width: 100%;
background-color: #dcdcdc;
margin-right: auto;
}

#subheader #logo
{
width: 50%;
text-align: center;
background-color: #fff;
margin-left: auto;
}
/* END of template subpage header */

#footer #navbot {
margin-top: 5px;
width:100%;
background-color: #fff;
text-align: center;
font-size: 85%;
}

#footer address {
margin-top: 5px;
margin-bottom: 10px;
width:100%;
background-color: #fff;
text-align: center;
font-size: 70%;
}

/* the big blue band on all subpages */ 
h1 {
    /* center */
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
    /* NOT 100%, want room for border on all sides */
    width: 98%;
    border: 2px solid #808080;
    /* fatten it up a bit */
    padding-top: 6px;
    padding-bottom: 6px;
    text-align:center;
    /* background */
    background:#b0c4de;
    /* text white */
    color:#fff;
    /* get font looking roughly enough old s-b site */
    font-size: 270%;
    font-weight: normal;
}

/* The dark blue column headings on the main page */
h2 {
    text-align:center;
    background:#000080;
    color:#fff;
    font-family: times;
    font-size: 180%;
    font-weight: normal;
}


/* The narrower dark blue column headings on the main page */
h3 {
    text-align:center;
    background:#000080;
    color:#fff;
    font-family: times;
    font-size: 90%;
    font-weight: normal;
}

/* A centred, boxed heading style used in the event page for event type/group */
h4 {
    text-align:center;
    border: 2px solid #808080;
    width:35%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

.panel
{
    margin-top: 5px;
}

/***************
Power Adventures
****************/

#poweradventures {
}

#poweradventures h2,
#poweradventures h3 {
    background-color: red; 
}

#poweradventures .events {
padding: 5px 1px 5px 5px; /* top right bottom left */
border: solid red 1px;
font-size: 70%;
}

#poweradventures li {
    padding-bottom: 4px;
}

#poweradventures a:link {
text-decoration: none;
}
#poweradventures a:visited {
text-decoration: none;
}

/***************
Britton Adventures
****************/

#britton {
border: solid red 1px;
}

#britton h2,
#britton h3 {
    color: red;
    background-color: #ffffff; 
}

#britton .events {
padding: 5px 1px 5px 5px; /* top right bottom left */
font-size: 70%;
}

#britton li {
    padding-bottom: 4px;
}

#britton a:link {
text-decoration: none;
}
#britton a:visited {
text-decoration: none;
}

/***************
Bikepark @ The Farm
****************/

#thefarm {
border: solid black 1px;
}

#thefarm h2,
#thefarm h3 {
    color: black;
    background-color: #ffffff; 
}

#thefarm .events {
padding: 5px 1px 5px 5px; /* top right bottom left */
font-size: 70%;
}

#thefarm li {
    padding-bottom: 4px;
}

#thefarm a:link {
text-decoration: none;
}
#thefarm a:visited {
text-decoration: none;
}

/***************
Forest Trail Events
****************/

#foresttrailevents {
border: solid black 1px;
}

#foresttrailevents h2,
#foresttrailevents h3 {
    color: white;
    background-color: #000000; 
}

#foresttrailevents .events {
padding: 5px 1px 5px 5px; /* top right bottom left */
font-size: 70%;
}

#foresttrailevents li {
    padding-bottom: 4px;
}

#foresttrailevents a:link {
text-decoration: none;
}
#foresttrailevents a:visited {
text-decoration: none;
}

/***************
Latest News
****************/
#articles {
}

#articles ul {
    padding: 7px 5px;
}

#articles li {
    font-size: 80%;
    line-height: 160%;
}

#articles a:link {
text-decoration: none;
}
#articles a:visited {
text-decoration: none;
}
#articles a:active {
}
#articles a:hover {
}

/************************
Latest News on sub-pages
************************/
#sub_articles { }

#sub_articles ul {
    padding: 7px 5px;
}

#sub_articles li {
    font-size: 80%;
    line-height: 160%;
}

#sub_articles a:link {
text-decoration: none;
}
#sub_articles a:visited {
text-decoration: none;
}
#sub_articles a:active {
}
#sub_articles a:hover {
}

/***************
Coming Events
****************/
#next_events {
}

#next_events ul {
    padding: 7px 5px;
}

#next_events li {
    font-size: 70%;
    padding-bottom: 4px;
}

#next_events a:link {
text-decoration: none;
}
#next_events a:visited {
text-decoration: none;
}
#next_events a:active {
}
#next_events a:hover {
}
#next_events .date {
font-size: 85%; /* % of size defined in li above... */
color: red;
}

/***************
dealers
****************/
#dealers {
background-color: #dcdcdc;
}

#dealers ul {
    padding: 7px 5px;
}

#dealers li {
    font-size: 85%;
    padding-bottom: 4px;
}

#dealers a:link {
text-decoration: none;
}
#dealers a:visited {
}
#dealers a:active {
}
#dealers a:hover {
}

/***************
magazines
****************/
#magazines { 
text-align: center;
margin-left: auto;
margin-right: auto;
}

#magazines a {
margin-left: 10px;
}

#magazines a:first-child{
margin-left: 0;
}

/*******************
EVENT & CLUB Details
********************/
table#event {
margin-left: 35px;
margin-right: 35px;
margin-top: 20px;
}

#event td.row_desc {
font-weight: bold;
text-align: right;
width: 10px;
vertical-align: text-top;
padding-right: 5px;
white-space: nowrap;
}

#event p {
    margin-bottom: 7px;
}

#event ul {
	list-style-type: inherit;
	list-style-image: inherit;
	list-style-position: inside;
}
#event ol {
	list-style-type: decimal;
	list-style-position: inside;
}
#event ol ol {
	list-style-type: decimal;
}
#event ul li { font-size: 85%; margin-bottom: 2px;}
#event ol li { font-size: 85%; margin-bottom: 2px; }
#event ol ol { font-style: normal; }

.event_row .row_detail p {
    margin-bottom: 7px;
}

.event_row .row_detail ul {
	list-style-type: inherit;
	list-style-image: inherit;
	list-style-position: inside;
}
.event_row .row_detail ol {
	list-style-type: decimal;
	list-style-position: inside;
}
.event_row .row_detail ol ol {
	list-style-type: decimal;
}
.event_row .row_detail ul li { font-size: 85%; margin-bottom: 2px;}
.event_row .row_detail ol li { font-size: 85%; margin-bottom: 2px; }
.event_row .row_detail ol ol { font-style: normal; }

/*********************
Events and Clubs Lists
**********************/
table#lists {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
font-size: 90%;
width: 90%;
border-collapse: collapse;
}

#lists .row1 {
background-color: #fff;
}
#lists .row2 {
background-color: #dcdcdc;
}

#lists .row_major {
background-color: yellow;
}
 
#lists .row_national {
background-color: lightgreen;
}
 
#lists .row_important {
background-color: lightblue;
}
 
#lists .row_important .district_name{
font-weight: bold;
}

#lists .row_important .type_name{
font-weight: bold;
}

#lists .row_important .event_title{
font-weight: bold;
}
 
#lists .row_fte {
background-color: orange;
}

#lists .row_epic {
background-color: #ff6600 !important;
}

#lists .row_epic td.type_name {
font-size:110%;
color:black;
}

#lists .row_epic td.event_title a {
color:black;
font-size:110%;
}

#lists .row_greg {
background-color: #ff8080;
}

#lists .row_pink {
background-color: #ffc0cb;
}

#lists .row1_strike {
}

#lists .row2_strike {
}
 
#lists th {
text-align: left;
white-space: nowrap;
background-color: #b0c4de;
}

#lists td {
text-align: left;
white-space: nowrap;
height: 1.8em;
border-right: 2px solid #fff;
}

#lists .row1_strike td {
text-decoration: line-through;
}

#lists .row2_strike td {
text-decoration: line-through;
}

#lists td.status {
text-decoration: none;
font-weight: bold;
}

#lists td.event_date {
font-size:80%;
padding-right: 15px;
}

#lists td.district_name {
font-size:80%;
}

#lists td.type_name {
font-size:80%;
}

#lists td.event_title {
white-space: normal;
}

#lists a:link {
text-decoration: none;
}
#lists a:visited {
text-decoration: none;
}
/****************************
temporary shit to be sorted out
****************************/

#subheader table {
margin-top: 4px;
margin-left: auto;
margin-right: auto;
width: 98%;
border: solid gray 1px;
padding: 0 0 0 0;
background-color: #dcdcdc;
}
#subheader tr {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#subheader td {
background-color: #dcdcdc;
padding: 0 0 0 0;
margin: 0 0 0 0;
text-align: center;
width: 50%;
}

#subheader td.logo {
background-color: #fff;
}

TABLE.event_type {
    margin-left:auto; 
    margin-right: auto; 
    border-collapse: collapse; 
    font-size: 70%;
}

TABLE.event_type TH {
    border: thin solid;
    font-weight: bold;
}

TABLE.event_type TD {
    border: thin solid;
    padding: 3px;
    text-align: center;
}

.rsh_desc {
margin-left: auto;
margin-right: auto;
width: 75%;
padding: 4px;
border: 5px ridge gray;
color: blue;
}
.events_blurb {
margin-top: 15px;
margin-left: auto;
margin-right: auto;
width: 75%;
font-size: 80%;
font-style: italic;
}

/*****************************
"figure" = images for news page
*****************************/
div.figure {
  float: left;
  width: 25%;
  min-width: 300px;
width: 1024px;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

.col1 p {
margin-top: 10px;
}

#user_toolbar
{
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    /* NOT 100%, want room for border on all sides */
    width: 98%;
    height: 30px;
    text-align: right;
    line-height: 26px;
}

#user_toolbar span 
{
}

.sb_form 
{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
/*
*/
    padding: 5px;
    /* width: 10%; */
    /* float: left; */
    width: 300px;
    /* whitespace: nowrap;*/
    border: 1px solid gray;
}

.sb_form p
{
    padding-top: 2px;
    padding-bottom: 2px;
}

.sb_form label
{
    float: left;
    width: 150px;
}

.sb_form .submit
{
    margin-left: 227px;
    margin-right: 0px;
}
.sb_form .errorMessage
{
    font-weight: bold;
    color: red;
}

/* http://css.maxdesign.com.au/floatutorial/ */

.floatright
{
float: right;
margin: 10px 10px 10px 10px;
border: 1px solid #666;
padding: 2px;
}

/*****************************
"gallery" = very simple gallery
*****************************/
ul#gallery {
margin:0;
padding:0;
list-style-type:none;
width:700px;
font-family: Monotype Corsiva, Harlow Solid Italic, serif;
}
ul#gallery li {
float: left;
margin-left:5px;
}
ul#gallery li:first-child {
margin-left:0;
}
ul#gallery li img {
/*width: 100px;*/
height: 67px;
margin:5px 0;
}

/**
 *
 **/
.ride_full {
}

.ride_full:before {
  content: "";
}

.ride_full:after {
  color: red;
  content: " ***RIDE FULL***";
}

.simple-bordered-table { 
  border-collapse: collapse;
}

.simple-bordered-table th,
.simple-bordered-table td {
  border: 1px solid;
}


/***************
* X-Grip ad
***************/
.ad-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
}

.ad-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  margin: 1rem auto;        /* centers it */
  border: 1px solid #ccc;   /* border */
  padding: 1rem;
  border-radius: 6px;       /* optional */
}


.ad-box img {
  max-width: 150px;
  height: auto;
  display: block;
  transition: opacity 0.2s ease; /* smooth fade */
}

.ad-box a img:hover {
  opacity: 0.8; /* slight fade on hover */
}

.ad-text {
  flex: 1;
  font-family: sans-serif;
  color: #222;
  font-size: 1rem;
}

.ad-text a {
  color: #0066cc;           /* standard link blue */
  text-decoration: none;    /* cleaner look */
}

.ad-text a:hover {
  text-decoration: underline; /* classic hover */
}

/* Optional safeguard for narrow screens */
@media (max-width: 480px) {
  .ad-box {
    flex-direction: column;
    text-align: center;
  }
  .ad-box img {
    max-width: 80%;
  }
}