@charset "UTF-8";
/* CSS Document */

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/tc-bg-fixed.jpg) no-repeat top;
background-attachment: fixed;
}

h1 	{color: #18224d; font-size: 1.8em; margin-bottom: -8px;}
h1 a:hover {color: #c3922e;}

h2 	{color: #c3922e; font-size: 1.3em; margin-bottom: -8px;}
h2 a {color: #c3922e;}
h2 a:hover {color: #c3922e; border-bottom: dotted thin #c3992e;}

h3 	{color: #18244d; font-size: 1.3em; line-height: 1.5em; margin-bottom: -8px;}
h3 a {color: #18244d;}
h3 a:hover {color: #18244d; border-bottom: dotted thin #18244d;}

h4 	{color: #18244d; font-size: 3.0em; margin: 10px 10px 10px 0px;}
h4 a {color: #18244d;}
h4 a:hover {color: #18244d; border-bottom: dotted thin #18244d;}

h5	{color: white; font-size: 2.2em; margin: 10px 10px 10px 0px; padding-bottom: 5px; border-bottom: dotted thin white;}

h6	{color: #18244d; font-size: 1.8em; margin: 10px 10px 10px 0px; padding-bottom: 5px; border-bottom: dotted thin white;}


p#date	{color: white; font-size: 1em; margin: 0; padding-top: 20px;}

p			{line-height: 1.6em; font-size: 1.1em;}
a 			{text-decoration: none; color: #18244d;}
a:hover	 	{text-decoration: none; color: #18244d;}
a:active, a:focus {outline: 0;}

#main-col {
position: center;
width: 1050px;
margin: 0 auto;
}

#header{
width: 1050px;
height: 180px;
margin-bottom: 10px;
}

#more-links {
float: right;
margin: 7px 15px 0px 0px;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
color: #589cd2;
}

#more-links a {
color: #589cd2;
border-bottom: dotted thin #589cd2;
}

#more-links a:hover {
color: #c3922e;
border-bottom: dotted thin #c3922e;

}

/*****************************
 Start Main Navigation 
******************************/


#main-nav {
position: relative;
float: left;
width: 1050px;
height: 39px;
margin-top: -10px;
margin-left: 2px;
}


#mainnav {
float: left;
background: url(images/mainnav-bg.png) no-repeat 0 40;
margin-left: -40px;
}

#mainnav li {
float: left;
list-style: none;
z-index: 99999;
}

#mainnav li.core {
display: block;
z-index: 99999;
}

#mainnav li.core a {
display: block;
background-position: 0px -0px;
background-repeat: no-repeat;
z-index: 99999;
}

#mainnav li.core a:hover {
background-position: 0px -40px;
z-index: 99999;
text-decoration: none;
border-bottom: none;
}


#mainnav li.home a {
width: 122px;
height: 39px;
background-image: url(images/home-btn.png);
z-index: 99999;
}

#mainnav li.news a {
width: 121px;
height: 39px;
background-image: url(images/news-btn.png);
z-index: 99999;
}

#mainnav li.gamefeatures a {
width: 224px;
height: 39px;
background-image: url(images/gamefeatures-btn.png);
z-index: 99999;

}

#mainnav li.media a {
width: 138px;
height: 39px;
background-image: url(images/media-btn.png);
z-index: 99999;
}

#mainnav li.proriders a {
width: 179px;
height: 39px;
background-image: url(images/proriders-btn.png);
z-index: 99999;
}

#mainnav li.buy a {
width: 262px;
height: 39px;
background-image: url(images/buy-btn.png);
z-index: 99999;
}


/************************ 
End Main Navigation 
************************/






/************************ 
START Gallery Slider 
************************/

		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }

		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}

		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			position: relative;
			width: 100%;
			padding: 0px;
			margin-top: -10px;
		}


		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 250px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 300px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 210px;
			padding-top: 33px;
			clear: both;
			/*background: url(images/in-games-screens-box-bg.png) no-repeat;*/
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 320px;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 300px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			width: 320px;
			margin-bottom: 13px;
			margin-left: -10px;
		}
		
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
			margin-left: -120px;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			height: 10px;
			width: 10px;
			line-height: 32px;
			background: url(images/slidenav-bg.png) no-repeat;
			color: #fff;
			text-decoration: none;
			display: block;
			position: relative;
			top: 10px;
			left: 200px;
			z-index: 999999;
			margin-right: 2px;
			border: none;
		}
		
		.stripNav li.tab1 a {  }
		.stripNav li.tab2 a {  }
		.stripNav li.tab3 a {  }
		
		.stripNav li a:hover {
			background: url(images/slidenav-bg-hover.png) no-repeat;
		}
		
		.stripNav li a.current {
			background: url(images/slidenav-bg-current.png) no-repeat;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position:  absolute;
			top: 320px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
			border: none;
		}
		
		.stripNavL {
			top: 110px;
			left: 15px;
			z-index: 99999;
		}
		
		.stripNavR {
			top: 110px;
			right: 15px;
		}
		
		.stripNavL {
			background: url("images/arrow-left.png") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.png") no-repeat center;
		}
		
		.stripNavL a {
			background: url("images/arrow-left.png") no-repeat center;
			border: none;
		}
		
		.stripNavR a {
			background: url("images/arrow-right.png") no-repeat center;
			border: none;
		}
		
		.stripNavL a:hover {
			background: url("images/arrow-left-hover.png") no-repeat center;
			border: none;
		}
		
		.stripNavR a:hover {
			background: url("images/arrow-right-hover.png") no-repeat center;
			border: none;
		}


		.stripNavL a:selected {
			background: url("images/arrow-left-hover.png") no-repeat center;
			border: none;
		}
		
		.stripNavR a:selected {
			background: url("images/arrow-right-hover.png") no-repeat center;
			border: none;
		}




/************************ 
END Gallery Slider 
************************/










.in-stores-box {
float: right;
width: 254px;
height: 132px;
padding-left: 10px;
border-left: dotted thin #18224d;
background: url(images/pre-order-bg.png) no-repeat;
}

#pre-order-btn {
display: block;
width: 116px;
height: 26px;
margin: 75px 0px 0px 5px;
background: url(images/pre-order-btn.png) no-repeat;
}


#pre-order-btn:hover {
background: url(images/pre-order-btn-hover.png) no-repeat;
border-bottom: none;
}

#wide-col-left {
float: left;
width: 720px;
}

#sidebar-right {
float: right;
width: 320px;
}

#wide-col-right {
float: right;
width: 720px;
}

#sidebar-left {
float: left;
width: 320px;
}

.recent-news-sidebar {
width: 280px;
height: 450px;
padding: 70px 20px 20px 20px;
background: url(images/recent-news-sidebar.png) no-repeat;
}

#recent-sidebar-story-box {
float: left;
width: 100%;
height: 110px;
margin-top: -10px;
margin-bottom: 10px;
border-bottom: dotted thin #ffffff;
overflow: hidden;
}
.content-box-top {
width: 720px;
height: 15px;
background: url(images/content-box-top.png) no-repeat top;
}

.content-box-content {
width: 640px;
min-height: 540px;
margin-bottom: -11px;
padding: 0px 40px 0px 40px;
background: url(images/content-box-content.png) repeat-y;
}

.content-box-bottom {
width: 720px;
height: 15px;
background: url(images/content-box-bottom.png) no-repeat;
}

.home-content {
float: left;
width: 700px;
height: 370px;
background: url("images/home-content-bg.png") no-repeat;
padding: 67px 10px 10px 10px;
margin-bottom: 10px;
color: #18224d;
}

.home-content-left {
float: left;
width: 485px;
height: 393px;
}

.home-content-right {
float: right;
width: 205px;
height: 393px;
margin-top: -77px;
}

.dotted-line-blue {
height: 1px;
width: 100%;
border-bottom: dotted thin #18224d;
margin-bottom: 20px;
}

.dotted-line-white {
height: 1px;
width: 100%;
border-bottom: dotted thin #ffffff;
margin-bottom: 20px;
}

.meet-the-pros {
float: left;
width: 688px;
height: 135px;
padding: 45px 0px 10px 32px;
margin-bottom: 10px;
background: url(images/meet-the-pros-bg.png) no-repeat;
}


#pro-profile-box {
float: left;
width: 320px;
height: 540px;
background: url(images/pro-profile-box-bg.png) no-repeat;
}

#riders-box {
width: 1050px;
height: 175px;
margin-bottom: 15px;
}


#main-box {
position: relative;
float: left;
width: 1050px;
height: 175px;
margin-bottom: 15px;
}

.riders-box {
width: 1080px;
height: 175px;
margin-bottom: 15px;
list-style: none;
margin-left: -40px;
}


#rider-profile {
float: left;
margin-left: -40px;
margin-top: 0px;
}

#rider-profile li {
float: left;
list-style: none;
z-index: 99999;
}

#rider-profile li.core {
display: block;
z-index: 99999;
}

#rider-profile li.core a {
display: block;
background-position: 0px -0px;
background-repeat: no-repeat;
z-index: 99999;
}

#rider-profile li.core a:hover {
background-position: 0px -175px;
z-index: 99999;
}


#rider-profile li.gretchen a {
width: 202px;
height: 175px;
background-image: url(images/prorider-gretchen.png);
z-index: 99999;
margin-right: 10px;
}

#rider-profile li.hannah a {
width: 202px;
height: 175px;
background-image: url(images/prorider-hannah.png);
z-index: 99999;
margin-right: 10px;
}

#rider-profile li.lindsey a {
width: 202px;
height: 175px;
background-image: url(images/prorider-lindsey.png);
z-index: 99999;
margin-right: 10px;
}

#rider-profile li.nate a {
width: 202px;
height: 175px;
background-image: url(images/prorider-nate.png);
z-index: 99999;
margin-right: 10px;
}

#rider-profile li.seth a {
width: 202px;
height: 175px;
background-image: url(images/prorider-seth.png);
z-index: 99999;
}

#small-pro-box {
float: left;
width: 107px;
height: 115px;
margin-right: 30px;
font-size: 1.2em;
font-weight: bold;
color: white;
text-align: center;
line-height: 2em;
}

#small-pro-box:hover {
color: #c3922e;
}

#small-pro-img {
border: solid thin #ffffff;
}

#small-pro-img:hover {
border: solid thin #c3922e;
}


#recent-news-home {
float: left;
width: 340px;
/*height: 300px;*/
padding: 10px;
border-left: dotted thin #18244d;
border-right: dotted thin #18244d;
}

#recent-news-home a:hover{
color: #c3922e;
}

#story-box {
float: left;
width: 100%;
min-height: 100px;
margin-top: -10px;
margin-bottom: 10px;
border-bottom: dotted thin #18244d;
}

#story-box a:hover{
color: #18244d;
}

.contest-box {
float: right;
width: 340px;
/*height: 300px; */
padding:  10px 10px 10px 0px;
}

.in-game-screens-box {
float: left;
width: 320px;
height: 255px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 0px;
background: url(images/in-games-screens-box-bg.png) no-repeat;
text-align: center;
line-height: .8em;
padding-top: 0px;
}

.gallery-container-small {
width: 300px;
height: 185px;
}

.gameplay-videos-box {
float: right;
width: 310px;
height: 205px;
padding: 40px 0px 10px 10px;
background: url(images/gameplay-videos-box-bg.png) no-repeat;
margin-bottom: 10px;
}



#media-sidebar {
float: left;
width: 320px;
height: 697px;
background: url(images/media-sidebar-bg.png) no-repeat;
margin-bottom: 0px;
}

#media-content-box {
float: right;
width: 680px;
height: 667px;
padding: 20px 20px 10px 20px;
background: url(images/media-content-box-bg.png) no-repeat;
}

.media-text-box {
float: left;
width: 490px;
height: 150px;
padding: 0px 10px 10px 10px;
margin-top: -10px;
}

.media-download-box {
float: right;
height: 140px;
width: 150px;
padding: 10px;
}

.screens-download-box {
float: right;
height: 95px;
width: 125px;
padding: 35px 10px 10px 15px;
background: url(images/screens-download-box.png) no-repeat;
margin: 10px;
}

#downloads {
font-size: .8em;
line-height: 1.6em;
color: #c3922e;
}

#downloads a {
font-size: 1.4em;
color: #ffffff;
}

#downloads a:hover {
color: #589cd2;
border-bottom: dotted thin #589cd2;
}

#game-features-wide {
float: left;
width: 1010px;
height: 415px;
padding: 20px;
margin-bottom: 10px;
background: url(images/game-features-wide.png) no-repeat;
}


.content-box-top-wide {
float: left;
width: 1050px;
height: 15px;
background: url(images/content-box-top-wide.png) no-repeat top;
z-index: -999999;
}

.content-box-content-wide {
float: left;
width: 970px;
min-height: 540px;
padding: 0px 40px 0px 40px;
background: url(images/content-box-content-wide.png) repeat-y;
z-index: -999999;
}

.content-box-bottom-wide {
float: left;
width: 1050px;
height: 15px;
background: url(images/content-box-bottom-wide.png) no-repeat;
z-index: -999999;
}







#game-modes-box {
float: right;
width: 280px;
height: 400px;
padding: 35px 20px 10px 20px;
background: url(images/game-modes-box-bg.png) no-repeat;
}

h2#right{
text-align: right;
}

p#right {
text-align: right;
color: white;
}

p#left {
text-align: left;
color: white;
}

#footer {
float: left;
width: 1030px;
height: 175px;
margin-top: 10px;
border: dotted thin #18244d;
background: url(images/footer-bg.png) no-repeat;
padding: 10px;
margin-bottom: 30px;
}

#footer a:hover {
border-bottom: none;
}

#foot-space {
float: left;
width: 780px;
height: 80px;
padding: 10px;
margin-left: 10px;
border-bottom: dotted thin #000000;
line-height: 1.4em;
color: #666666;
}

#foot-space a {
color: #18244d;
}

#foot-space a:hover {
color: #18244d;
border-bottom: dotted thin #18244d;
}

.tc-quicklinks {
float: left;
width: 150px;
height: 70px;
margin-right: 20px;
}

.destineer-quicklinks {
float: left;
width: 150px;
height: 70px;
margin-right: 30px;
}

.platform-quicklinks {
float: left;
width: 150px;
height: 70px;
margin-right: 0px;
}

.related-quicklinks {
float: left;
width: 200px;
height: 70px;
margin-right: 20px;
}

.logo-parade {
float: left;
width: 700px;
height: 65px;
padding: 5px 10px 0px 10px;
}

.logos {
margin-right: 50px;
border-bottom: none;
}

.legal-lines {
float: right;
font-size: .9em;
line-height: 1.4em;
text-align: right;
width: 290px;
height: 55px
margin-right: 10px;
padding: 10px 10px 10px 10px;
}

.clear				{ clear: both; }