@import url('https://fonts.googleapis.com/css?family=Play|Raleway');
* { margin: 0; }
body { background: #387f6a; color: #000; font: 1em "Raleway", Arial, Helvetica, sans-serif; text-align: left; margin: 0 auto; }
a { color: #7391d7; text-decoration: underline; }
a:hover, a:visited { color: #4a5d89; }
img { border: 0; max-width: 100% !important;}
.heading-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
h1,h2,h3,p { margin-bottom: .5em }
h1,h2,h3 { font-family: "Play", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; }
h1 { font-size: 180%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
.itext { font-style: italic; }
pre { font-size: 80%; }
#wrapper { width: 100%; min-height: 100%; }
#header { width: 100%; height: 200px; text-align: left; background: #7391d7 url(images/header-bg.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;}
#header .title {font-family: "Play", Arial, Helvetica, sans-serif;}
#header a { text-decoration: none; }
#nav { list-style: none; width: 100%; color: #fff; font: .9em "Play", Arial, Helvetica, sans-serif; text-transform: uppercase; height: 1.9em; }
#nav li, #nav li.active:hover { display: inline-block; margin-left: 8px; margin-right: 8px; }
#nav li a, #nav li.active a:hover, #footer a:hover { color: #fff; text-decoration: none; }
#nav li.active, #nav li:hover { display: inline-block; padding-top: 5px; margin-left: 8px; margin-right: 8px; }
#nav li.active a, #nav li a:hover, #footer a { color: #ad9364; text-decoration: none; }
#nav, #footer { background: #387f6a; }
#footer { min-height: 200px; background-origin: content-box; background-attachment: fixed; background-repeat: no-repeat; background-position: left top; float: left; width: 100%; margin-top: 1%; }
#footer p { color: #fff; text-align: left; height: 100%; margin-top: .5em; }
.cat { list-style: none; float: left; color: #ad9364; margin-right: 5%; }
.cat li { text-indent: 5%; color: #ccc; list-style: none; }
ol { padding-left: 2% }
#content { padding: 1%; background: #fff; padding-bottom: 5%;}
@media screen and (max-width: 480px){
#content img {
	width: 340px;
	height: auto;
	}
}
@media screen and (max-width: 320px){
#content img {
	width: 200px;
	height: auto;
	}
}
#content p, #content ul, #content form { text-align: left; }
#calendar { width: 1000px; margin: 0 auto; }
#calendar #heading { float: left; width: 100%; background: transparent url(images/heading-bg-blue.png) repeat-x; background-position: center center; }
#calendar #heading h1 { background: #fff; color: #080e41; text-decoration: underline; padding-left: 5px; padding-right: 5px; }
#calendar #heading .title { color: #080e41; margin-left: 100px; margin-right: 75px; float: left; text-decoration: underline; }
#calendar #heading .month { margin-right: 10px;  text-decoration: underline; clear: right; float: left; }
#calendar .item { float: left; background: #080e41; width: 225px; height: 230px; margin: 10px; }
#calendar .item h1, #calendar .item h2 { text-transform: none; color: #fff; padding-left: 5px; padding-right: 5px; padding-bottom: 0px;}
#calendar .item h1 { font-size: 1em }
#calendar .item h2 { font-size: .8em }
#calendar .item p { border-top: 5px solid #fff; font-size: .7em; color: #fff; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; }
.longrides-table {margin-left: 4%; width: 92%;}
.paragraph-style {margin-left: 2%; width: 96%;}
.paragraph-center {text-align: center !important; font-style: italic;}