@charset "utf-8";
body  {
	background: #FFEBFF url(../images/body-bg.jpg) repeat-x left top;
	color: #222222;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
}
.row {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 960px;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
    content: "";
    display: table;
} 
.row:after {
    clear: both;
}
	
.row.collapse .column,
.row.collapse .columns {
	position: relative;
	padding-left: 0;
	padding-right: 0;
	float: left;
}

.column,
.columns {
	position: relative;
	padding-left: 1.44em;
	padding-right: 1.44em;
	width: 100%;
	float: left;
	min-height: 1px;
}

.column-1 {
	position: relative;
	width: 8.33333%;
}

.column-2 {
	position: relative;
	width: 16.66667%;
}

.column-3 {
	position: relative;
	width: 25%;
}

.column-4 {
	position: relative;
	width: 33.33333%;
}

.column-5 {
	position: relative;
	width: 41.66667%;
}

.column-6 {
	position: relative;
	width: 50%;
}

.column-7 {
	position: relative;
	width: 58.33333%;
}

.column-8 {
	position: relative;
	width: 66.66667%;
}

.column-9 {
	position: relative;
	width: 75%;
}

.column-10 {
	position: relative;
	width: 83.33333%;
}

.column-11 {
	position: relative;
	width: 91.66667%;
}

.column-12 {
	position: relative;
	width: 100%;
}


/* Intrinsic ratio embed - http://j.mp/GIHbnu
   ========================================================================== */

/**
 * Flexible media embeds
 *
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Example HTML:
 *
 * <div class="FlexEmbed FlexEmbed--16by9">
 *     <iframe class="FlexEmbed-item" src="…"></iframe>
 * </div>
 *
 * <div class="FlexEmbed FlexEmbed--16by9">
 *     [iframe|object|embed|img]
 * </div>
 */

.FlexEmbed {
    position: relative;
    overflow: hidden;
    height: 0;
    padding: 0;
}

/**
 * The use of an explicit descendant class makes this component more flexible.
 * However, it will work automatically for iframes, embeds, and objects to
 * account for times when you cannot modify the attributes for 3rd party widget
 * code.
 */

.FlexEmbed-item,
.FlexEmbed iframe,
.FlexEmbed embed,
.FlexEmbed object {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/**
 * Modifier: 16:9 aspect ratio
 */

.FlexEmbed--16by9 {
    padding-bottom: 56.25%;
}

/**
 * Modifier: 4:3 aspect ratio
 */

.FlexEmbed--4by3 {
    padding-bottom: 75%;
}

/**
 * Modifier: 1:1 aspect ratio
 */

.FlexEmbed--1by1 {
	padding-bottom: 100%;
}



#wrapper {
	text-align: center;
	background: url(../images/wrapper-bg.jpg) no-repeat center top;
	border-bottom: 16px solid #99FE00;
}

#container {
	width: 992px;
	margin: 0 auto;
	text-align: left;
} 
#header {
	padding: 0;
	height: 285px;
	background: url(../images/header-bg.jpg) no-repeat left top;
	position: relative;
} 
#header a.home {
	color: #FFFFFF;
	position: absolute;
	top: 20px;
	right: 55px;
	display: block;
	height: 60px;
	width: 550px;
}
#header a.home span {
	display: none;
}

#navigation {
	position: absolute;
	right: 0px;
	bottom: 36px;
	width: 527px;
}
#navigation  li a {
	float: left;
	display: block;
	background: url(../images/nav-bar-sprite.jpg);
	height: 23px;
	margin-right: 4px;
}
#navigation a.home {
	background-position: 0px 0px;
	width: 65px;
}
#navigation li a:hover.home {
	background-position: 0px -23px;
}
#navigation a.schedule {
	background-position: -1px 0px;
	width: 169px;
}
#navigation li a:hover.schedule {
	background-position: -1px -23px;
}
#navigation a.news {
	background-position: -176px 0px;
	width: 65px;
}
#navigation li a:hover.news {
	background-position: -176px -23px;
}
#navigation a.photos {
	background-position: -245px 0px;
	width: 86px;
}
#navigation li a:hover.photos {
	background-position: -245px -23px;
}
#navigation a.about {
	background-position: -335px 0px;
	width: 73px;
}
#navigation li a:hover.about {
	background-position: -335px -23px;
}
#navigation a.contact {
	background-position: -412px 0px;
	width: 97px;
}
#navigation li a:hover.contact {
	background-position: -412px -23px;
}
#content-container {
	background: #FFEBFF url(../images/container-btm-bg.png) no-repeat right bottom;
	margin-right: 16px;
	margin-left: 16px;
	padding-top: 12px;
}
#race-calendar {
	float: right;
	width: 209px;
	border: 1px solid #0098DF;
	padding: 10px;
	margin-top: -10px;
	font-size: 1.3em;
	color: #999999;
	line-height: 1.3em;
}
.race-calendar-extras {
	font-size: 0.8em;
	margin-top: 8px;
	margin-bottom: 8px;
	line-height: 1.5em;
}



#mainContent {
	margin: 0 0 120px;
	padding: 10px 20px 0 10px;
	float: left;
	width: 599px;
	border-right: 1px solid #0099DF;
	min-height: 400px;
} 
#mainContent p {
	font-size: 1.3em;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}
#mainContent .news-entry {
	margin-bottom: 1em;

}
#mainContent .news-entry .news-entry-info {
	margin-bottom: 12px;
}
#mainContent .news-entry .news-entry-info a {
	line-height: 21px;
}
#mainContent .news-entry .date {
	color: #999999;
	display: block;
	width: 95px;
	text-align: right;
	float: left;
	font-size: 1.3em;
}
#mainContent .news-entry .title {
	display: block;
	float: right;
	width: 491px;
	margin: 0px;
	padding: 0px 0px 0px 5px;
	font-size: 1.3em;
	border-left: 1px dotted #999999;
}
#mainContent .title {
	margin-bottom: 1em;
}




#mainContent .entry-date {
	background: url(../images/news-date-bg.gif);
	display: block;
	height: 38px;
	width: 60px;
	text-align: center;
	padding-top: 2px;
	margin-right: 10px;
	color: #FFFFFF;
	line-height: 1em;
	float: left;
}
#mainContent  .entry-date  h4 {
	margin: 0px;
	padding: 0px;
	line-height: 18px;
	color: #FFFFFF;
	font-size: 18px;
}
#mainContent .schedule {
	font-size: 1.3em;
	line-height: 1.4em;
}
#mainContent .schedule .heading {
	font-weight: bold;
	color: #999999;
}
#mainContent     .schedule     .event-row   {
	padding-bottom: 10px;
	border-bottom: 1px dotted #CCCCCC;
	padding-top: 10px;
}
#mainContent .schedule .results {
	font-size: 11px;
}
#mainContent .schedule .results2 {
	padding-bottom: 10px;
	border-bottom: 1px dotted #CCCCCC;
	font-size: 11px;
}


#mainContent .about-me {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dotted #CCCCCC;
}

#mainContent  .about-me  td {
	padding-right: 10px;
	font-size: 1.1em;
	line-height: 1.2em;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #999999;
}
#mainContent .about-me td strong {
	color: #666666;
}
#mainContent .about-me h4 {
	color: #333333;
}



#sidebar {
	float: right;
	width: 302px;
	padding: 10px 8px 0px 0px;
	margin-bottom: 200px;
	font-size: 1.3em;
}
#sidebar  p {
	line-height: 1.4em;
	margin-bottom: 1.4em;
}
#sidebar .news-entry {
	margin-bottom: 20px;
}
#sidebar .news-entry .date {
	font-size: 10px;
	font-weight: bold;
	color: #999999;
	display: block;
}
#sidebar .news-entry li {
	margin-bottom: 5px;
	padding-bottom: 5px;
}


#footer-container {
	text-align: center;
}

#footer {
	padding: 10px 0 20px;
	text-align: left;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	font-size: 1.3em;
} 
#footer .navigation li {
	float: left;
	margin-right: 5px;
}
#footer .navigation li a {
	display: block;
	padding: 2px 6px;
}
#footer  .navigation  li  a:hover {
	color: #0098DF;
	text-decoration: underline;
}

.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.gallery-entry {
	margin-bottom: 20px;

}
.gallery-entry:after {
	content: "";
	display: table;
	clear: both;
}
.gallery-entry .heading {
	display: block;
	margin-bottom: 5px;
	padding-top: 0px;
	padding-bottom: 2px;
	font-size: 13px;
}
.gallery-entry .added {
	clear: both;
	font-size: 10px;
	color: #999999;
	text-align: right;
	display: block;
}
.gallery-entry  img  {
	float: left;
	border: 1px solid transparent;
}
#mainContent  .gallery-entry  a:hover img {
	border: 1px solid #333333;
}



.margin10 {
	display: block;
	margin-bottom: 10px;
}
.margin20 {
	display: block;
	margin-bottom: 20px;
}

.alignRight {
	text-align: right;
	padding-right: 3px;
}
.alignLeft {
	text-align: left;
	padding-left: 3px;
}

.borderRight-gray {
	border-right: 1px solid #999999;
}
.center {
	text-align: center;
}
.imglft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 330px;
	color: #555555;
	padding-right: 10px;
	border-right: 1px solid #CCCCCC;
}
.imglft img {
	margin-bottom: 3px;
}
#mainContent .imglft p {
	font-size: 10px;
	margin: 0px 0px 6px;
	padding: 0px;
	line-height: 16px;
}
a {
	color: #0098DF;
	text-decoration: none;
}

a:hover {
	color: #003399;
}

.view-all {
	display: inline-block;
	padding: 2px 5px;
	background: #0098DF;
	color: #fff;
	text-decoration: none;
}
.view-all:hover {
	background: #003399;
	color: #fff;
}

.callout {
	border: 3px solid #0077B0;
	padding: 10px;
	background: #0099DF url("../images/bg-blue-noise.png");
	color: #fff;
	font-size: 1.2em;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.callout:before,
.callout:after {
    content: "";
    display: table;
} 
.callout:after {
    clear: both;
}

.callout-heading {
	margin-bottom: 10px;
	color: #fff;
	font-size: 23px;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}