/* Body Wrappers */
html {

}

body {
 background-image : url('images/body_bg.png');
 background-repeat: repeat-x;
 background-color: #d1e4f5;
 font: 12px "trebuchet ms", sans-serif;
 margin: 0px auto;
 width: 100%; 
 }

div.sides {

}

#container {
 margin: 0px auto;
 display: block;
 width: 980px;
 min-height: 100%;
 background-image: url("images/main_bg.png");
 background-repeat: repeat-y;
 
}

/* Header & Navigation */

#header {
 display: block;
 margin: 0px auto;
 padding: 0px;
 line-height: 0px;
 }
 
#header img {
 border: 0;
}
 
#headercontainer {
 width: 1005px;
 margin: 0px auto;
 padding: 0;
 }
 
#navbarcontainer {
 width: 962px;
 height: 38px;
 margin: 0px auto;
 margin-top: 0px;
 background-image : url('images/navbar_bg.png');
 background-repeat: repeat-x;
 }
 
#navbar {
 background-image : url('images/navbar_bg.png');
 background-repeat: repeat-x;   
 width: 962px;
 height: 38px;
 }
 
#navbar_date {
 margin: 0px auto; 
 padding: 0px;
 margin-top: -2px;
 margin-left: 16px;
 float: left;
 display: block;
 height: 38px;

 }
 
#navbar_date p {
 font-family: "Trebuchet MS", sans-serif;
 color: #fff;
 font-size: 12px;
}

#navbar_links {
 position: relative;
 float: right;
 height: 38px;
 margin-top: -2px;
 vertical-align: top;
}

#navbar_links ul {
padding: 0 10px 0 10px;
list-style-type: none;
text-align: center;
height: 31px;
}

#navbar_links ul li {
 display: inline;
}

#navbar_links ul li a {
 text-decoration: none;
 padding: 10px 10px 7px 10px;
 color: #4db8e9;
 letter-spacing: 2px;
/* implement later 
 border-right: 1px solid #fff;*/
 }
 
#navbar_links ul li a:hover {
 color: #16467b;
 background-color: #fff;
 background-image: url("images/navbar_bg_active.png");
 background-repeat: repeat-x;
 }

 
/* Content Portion */

#midsection {
 min-height: 100%;
 display: block;
}
 
#midsection-top {
 min-height: 100%;
 width: 960px;
 padding: 8px;
 position: relative;
 height: 400px;
 }

.slideshow {
 display: block;
 margin-left: auto;
 margin-right: auto;
 z-index: 0;
}
 
img.runnersfeet {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }
 
#midsection-top-bluebox {
 position: absolute;
 height: 400px;
 width: 331px;
 z-index: 1;
 top:8px;
 left:23px;
 background-image: url('images/midsection_blue_bg.png');
 }

#midsection-top-bluebox-header {
 z-index: 3;
 margin: 50px 16px 20px 16px;
 width: 298px;
 height: 35px;
 background-image: url('images/bluebox_header.png');
 }
 
#midsection-top-bluebox-text {
 color: #ffffff;
 font-family: "Verdana", sans-serif;
 font-size: 20px;
 width: 298px;
 text-align: center;
}
 
#midsection-top-textbox {
 z-index: 3;
 margin: 0 16px 30px 21px;
 width: 280px;
 color: #fff;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 16px;
 }

/* Recent Race Results */

#midsection-bottom {
 width: 960px;
 padding: 8px;
 display: block;
 position: relative;
 top: -8px;
 height: 400px;
 } 

#midsection-bottom-recent-race-results {
 z-index: 1;
 width: 282px;
 height: 239px;
 border: 1px solid #1996d3;
 margin: 20px 10px 20px 34px;
 float: left;
 background-image: url('images/recent_bg.png');
 background-repeat: repeat-x;
}

#midsection-raceresults-header {
 z-index: 3;
 margin: 0px 0px 0px 0px;
 width: 282px;
 height: 56px;
 padding: 0;
 background-image: url('images/recent_race_results_header.png');
}

#midsection-raceresults-header-textbox {
 color: #ffffff;
 font-family: "Verdana", sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 width: 298px;
 padding: 4px 0 0 5px;
}

#midsection-raceresults-textbox {
 height: 181px;
 width: 282px;
 position: relative;
 top: -20px;
 left: -40px;
}

#midsection-raceresults-textbox .racedate {
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 11px;
}

#midsection-raceresults-textbox a.racedate:hover a.racedate:visited {
 color: #1296d3;
 }

#midsection-raceresults-textbox a {
 color: #000;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 display: inline;
 position: relative;
 top: 3px;
 left: 4px;
 text-decoration: none;
}

#midsection-raceresults-textbox a:hover a:visited {
 color: #000;
}

#midsection-raceresults-textbox li {
 list-style-type: none;
 height: 20px;
 width: 282px;
 display: block;
}

#midsection-raceresults-textbox li:hover {
 background-color: #d1e2f4;
}


/* Recent Videos */

#midsection-bottom-recent-videos {
 z-index: 1;
 width: 576px;
 height: 239px;
 border: 1px solid #1996d3;
 margin: 20px 28px 20px 0px;
 float: right;
 background-image: url('images/recent_bg.png');
 background-repeat: repeat-x;
}
 
#midsection-recentvideos-header {
 z-index: 3;
 position: relative;
 margin: 0px 0px 0px 0px;
 width: 576px;
 height: 57px;
 padding: 0;
 background-image: url('images/recent_videos_header.png');
}

#midsection-recentvideos-header-textbox {
 color: #ffffff;
 font-family: "Verdana", sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 width: 298px;
 padding: 4px 0 0 4px;
}

#midsection-recentvideos-textbox {
 width: 576px;
 height: 194px;
 padding: 0px;
 margin: 0px auto;
 display: block;
 position: relative;
 top: -30px;
 left: 0px;

}

div.recentvideos-box {
 position: relative;
 z-index: 2;
 margin:0px;
 padding:0px;
 height:212px;
 width:192px;
 float:left;
}

div.recentvideos-box img {
 display: inline;
 position: relative;
 left: 15px;
 top: 20px;
 margin: 3px;
 border: 1px solid #1996d3;
}

div.recentvideos-box:hover {
 background-color: #d1e2f4;
}

div.recentvideos-desc {
 font-weight: normal;
 width: 170px;
 margin: 2px;
 position: relative;
 top: 35px;
 left: 13px;
}

div.recentvideos-box a {
 color: #000;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 display: inline;
 position: relative;
 top: 3px;
 left: 2px;
 text-decoration: none;
}

div.recentvideos-desc .racedate {
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 11px;
 text-decoration: none;
}

/* Footer */

#footercontainer {
 width: 980px;
 height: 82px;
 position: relative;
 float: bottom;
 bottom: 0;
 left: 4px;
 margin: 0px auto;
 background-image: url('images/footer_bg.png');
 background-repeat: none;
 background-position: -4px;
 /*border-top: 4px solid #10467b;*/
 z-index: 100;
}
 
#footer-facebook {
 display: block;
 float: left;
 padding: 8px;
 position: relative;
 top: 10px;
 left: 10px;
}

#footer-facebook a {
 text-decoration: none;
 border: 0;
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 display: inline;
 vertical-align: middle;
 position: relative;
}

#footer-facebook .facebook-text:hover {
 text-decoration: underline;
}

#footer-facebook img {
 float: left;
 border: 0;
}

#footer-facebook .facebook-text {
 position: relative;
 top: 8px;
 left: 10px;
}
 
#footer-links {
 display: block;
 float: right;
 padding: 8px;
 position: relative;
 top: 18px;
 left: -15px;
}

#footer-links a {
 text-decoration: none;
 border: 0;
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 display: inline;
}

#footer-links a:hover {
 text-decoration: underline;
}

/* Content */

#midsection-content-wrapper {
 width: 928px;
 min-height: 100%;
 margin-top: 30px;
}

#content-left {
 width: 600px;
 display: block;
 float: left;
 }
 
#content-right {
 width: 328px;
 display: block;
 float: right;
 margin-top: 15px;
}

#content-header {
 z-index: 1;
 margin: 0px 16px 20px 30px;
 width: 298px;
 height: 35px;
 background-image: url('images/bluebox_header.png');
}

#content-header-text {
 z-index: 2;
 color: #fff;
 font-family: "Verdana", sans-serif;
 font-size: 20px;
 width: 298px;
 margin-left: 8px; 
 text-align: left;
}

#content-image {
 display: block;
 float: right;
}

#content-body {
 display: block;
 float: left; 
 width: 560px;
 margin-left: 50px;
}

#content-body p {
 line-height: 140%;
}

#content-body a {
 color: #1296d3;
 text-decoration: none;
}

#content-body a:visited {
 color: #1296d3;
 text-decoration: none;
}

#content-body a:hover {
 text-decoration: underline;
}

/* Featured Video Box - Production Page */

#content-production-body {
 width: 980px;
 height: 500px;
 display: block;
 margin: 10px 18px 20px 0px;
 
 }

#featured-video-box {
 z-index: 1;
 width: 640px;
 height: 500px;
 border: 1px solid #1996d3;
 margin: 20px 28px 20px 30px;
 display: block;
 float: left;
 background-image: url('images/featured_video_box_bg.png');
 background-repeat: repeat-x;
}

#featured-video-box-header {
 z-index: 3;
 position: relative;
 margin: 0px 0px 0px 0px;
 width: 576px;
 height: 35px;
 padding: 0;
 background-image: url('images/featured_video_header.png');
 background-repeat: none;
}

#featured-video-header-textbox {
 color: #ffffff;
 font-family: "Verdana", sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 width: 298px;
 padding: 4px 0 0 4px;
 }
 
#featured-video-textbox {
 width: 630px;
 height: 380px;
 padding: 0px;
 margin: 0px auto;
 display: block;
 position: relative;
 top: 13px;
 left: 2px;
}

#featured-video-textbox {
 font-weight: normal;
 margin: 2px;
 color: #000000;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 text-decoration: none;
}

#featured-video-textbox a {
 color: #000;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 text-decoration: none;
}

#featured-video-textbox .racedate {
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 11px;
 text-decoration: none;
}

/*More Videos Box - Production Page */

#more-videos-box {
 z-index: 1;
 width: 268px;
 height: 500px;
 border: 1px solid #1996d3;
 margin: 0px 0px 0px 0px;
 float: right;
 position: relative;
 left: -22px;
 top: 20px;
 background-image: url('images/featured_video_box_bg.png');
 background-repeat: repeat-x;
}

#more-videos-box-header {
 z-index: 3;
 position: relative;
 margin: 0px 0px 0px 0px;
 width: 268px;
 height: 35px;
 padding: 0;
 background-image: url('images/more_videos_header.png');
 background-repeat: none;
}

#more-videos-header-textbox {
 color: #ffffff;
 font-family: "Verdana", sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 width: 298px;
 padding: 4px 0 0 4px;
 top: 10px;
}

#more-videos-textbox {
 position: relative;
 left: -10px;
 margin: 5px 4px 4px 4px;
 height: 500px;
 width: 257px;
}

#more-videos-element img {
 display: inline;
 position: relative;
 left: 15px;
 top: 10px;
 margin: 1px;
 border: 0px;
 border: 1px solid #1996d3;

}

#morevideos-box a {
 color: #000;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 12px;
 display: inline;
 position: relative;
 top: 3px;
 left: 2px;
 text-decoration: none;
}

#more-videos-element .racedate {
 color: #1296d3;
 font-family: "Trebuchet MS", sans-serif;
 font-size: 11px;
 text-decoration: none;
}

#more-videos-element .more-videos-element-desc {
 display: block;
 position: relative;
 left: 15px;
 top: 10px;
 margin-bottom: 10px;
 font-family: "Trebuchet MS";
 }

/* Constant Contact - Production Page */

#constant-contact {
 width: 440px;
 height: 50px;
 border: 1px solid #1996d3;
 position: relative;
 left: 425px;

}

#constant-contact-text {
 font-family: "Trebuchet MS", sans-serif;
 margin: 3px 5px; 10px; 3px;
}

#constant-contact-text-header {
 font-weight: bold;
 font-family:Trebuchet MS, sans-serif;
 font-size:18px;
 color:#006699;
}

#constant-contact-logo {
 position: relative;
 top: 1px;
 left: 30px;
}
 

/* C Tolle Run Logo - Production Page */

#ctollerun-logo {
 z-index: 1;
 margin: 0px 6px 10px 20px;
 width: 298px;
 height: 119px;
 background-image: url('images/ctollerun_logo.png');
 position: relative;
 left:10px;
 }
 
#facebook-like-box {
 position: relative;
 left: 428px;
 top: 10px;

}

/* Glide.js styles */

.slider {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	top: -12px;
}
	
	.slides {
		height: 100%;
		
		/* Simple clear fix */
		overflow: hidden;
		
		/**	
		 * Prevent blinking issue
		 * Not tested. Experimental.
		 */
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;

		/**
		 * Here is CSS transitions 
		 * responsible for slider animation in modern broswers
		 */
		-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		     -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		        transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	}
	
		.slide {
			height: 100%;
			float: left;
			clear: none;
			list-style-type: none;
			position: relative;
			left: -40px;
		}


	.slider-arrows {}

		.slider-arrow {
			position: absolute;
			display: block;
			margin-bottom: -20px;
			padding: 20px;
		}

			.slider-arrow--right { bottom: 50%; right: 30px; }
			.slider-arrow--left { bottom: 50%; left: 30px; }


	.slider-nav {
		position: absolute;
		bottom: 30px;
	}

		.slider-nav__item {
			width: 12px;
			height: 12px;
			float: left;
			clear: none;
			display: block;
			margin: 0 5px;
			background: #fff;
		}

				.slider-nav__item:hover { background: #ccc; }
				.slider-nav__item--current { background: #ccc; }