/* Races */

#content.race #rightColumn {
   display: block;
   width: 200px;
   float: left;
   margin-left: 0;
}

#content.race #leftColumn {
   margin-right: 35px;
}

#content.race #mainColumn {
   display: block;
   width: 740px;
   margin-right: 30px;
}

#content.race.threeColumn #mainColumn.race {
   width: 500px;
   margin-right: 35px;
}

#content.race #mainColumn form .headlineBox {
   margin: 30px 0 25px 0;
   padding-top: 30px;
   border-top: 1px solid #EEE;
}

#content.race #mainColumn form .headlineBox.first {
   margin: 0 0 25px 0;
   padding-top: 0;
   border-top: none;
}

.headlineBox.new.races .icon {
   background: url(../images/icon-stepCircle.png) no-repeat 0 0;
   width: 34px;
   height: 35px;
   float: left;
   margin-right: 10px;
}

.headlineBox.new.races .icon div {
   text-align: center;
   width: 34px;
   color: #FFF;
   text-shadow: 0 -1px 0 #111;
   font-weight: bold;
   font-size: 24px;
   position: relative;
   top: 5px;
}

.headlineBox.races h2 {
   color: #333;
   font-weight: bold;
   font-size: 18px;
   margin-bottom: 4px;
}

.headlineBox.races .subText {
   color: #666;
   font-weight: normal;
   font-size: 12px;
}

.newRaceRow {
   margin: 10px 0;
}

.newRaceRow label {
   float: left;
   width: 200px;
   text-align: right;
   font-size: 16px;
   position: relative;
   top: 5px;
   margin-right: 10px;
   color: #333;
}

.newRaceRow label span {
   display: block;
   color: #666;
   font-size: 11px;
   margin-top: 4px;
}

.newRaceRow .inputRightColumn {
   float: left;
   text-align: left;
   color: #999;
}

.newRaceRow .inputRightColumn input[type="text"] {
   text-align: left;
   font-size: 16px;
   color: #111;
}

.newRaceRow .inputRightColumn .formBoxRight input[type="text"] {
   width: 26px;
   float: left;
}

.newRaceRow .inputRightColumn .formBoxRight .dropdownGreyContainer {
   float: left;
   margin-left: 5px;
}

.newRaceRow .inputRightColumn .formBoxRight .timeDivider {
   float: left;
   font-size: 21px;
   font-weight: bold;
   margin: 0 2px;
   color: #111;
   position: relative;
   top: 2px;
}

.newRaceRow .inputRightColumn textarea {
   width: 400px;
   height: 100px;
}

.race .newRaceRow div.uploader {
   margin-bottom: 0;
   position: relative;
   top: -5px;
}

.raceActionButton {
   width: 200px;
}

.raceActionButton.blueButton-medium .m .mainText {
   font-size: 13px;
   top: 9px;
}

#subNav h3.pageHeader.race,
#subNav h3.pageHeader.fitnessClass  {
   max-width: 600px;
   height: 31px;
   padding-bottom: 0;
   margin-bottom: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

#subNav .breadcrumb.race {
   float: right;
   color: #666;
}

.race #createButtons {
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid #EEE;
}

.race#leftColumn p {
   text-align: center;
   color: #666;
   font-size: 13px;
   line-height: 130%;
}

.race#leftColumn .raceDescription {
   text-align: left;
   color: #666;
   font-size: 12px;
   line-height: 130%;
   margin: 10px 0 30px 0;
   padding: 0 3px;
   width: 194px;
}

.userGrid {
   position: relative;
   width: 198px;
   margin: 0 1px;  
}

.userGrid a {
   display: block;
   width: 20px;
   height: 20px;
   float: left;
   margin: 0 2px 2px 0;
}

.userGrid a.viewall {
   background-color: #AAA;
   font-size: 16px;
   font-weight: bold;
   color: #FFF;
   text-align: center;
}

.userGrid a.viewall:hover {
   background-color: #DDD;
   color: #666;
}

.userGrid.streetTeammates {
   margin-bottom: 30px;
}

/* race map */

.race.static #map_area {
	position: relative;
	width: 500px;
	height: 320px;
	margin: 0 auto 15px auto;
	border: none;
	overflow: hidden;
}

.race.static #map_canvas,
.race.static #editControlsContainer {
	width: 500px;
	height: 285px;
}

.race.static #map_area .greyBorder.tl {
	background: url(../images/greyBorder-tls.png) no-repeat 0 0;
}

.race.static #map_area .greyBorder.t {
	background: url(../images/greyBorder-ts.png) repeat-x 0 0;
	left: 8px;
	width: 484px;
}

.race.static #map_area .greyBorder.tr {
	background: url(../images/greyBorder-trs.png) no-repeat 0 0;
}

.race.static #map_area .greyBorder.rt {
	background: url(../images/greyBorder-rs.png) repeat-y 0 0;
	position: absolute;
	top: 8px;
	right: 0;
	width: 6px;
	height: 277px;
}

.race.static #map_area .greyBorder.rb {
	background: url(../images/greyBorder-r.png) repeat-y 0 0;
	position: absolute;
	bottom: 8px;
	right: 0;
	width: 2px;
	height: 27px;
}

.race.static #map_area .greyBorder.bs {
	background: url(../images/greyBorder-bs.png) repeat-x 0 0;
	position: absolute;
	bottom: 35px;
	left: 0;
	width: 500px;
	height: 6px;
}

.race.static #map_area .greyBorder.lt {
	background: url(../images/greyBorder-ls.png) repeat-y 0 0;
	position: absolute;
	top: 8px;
	left: 0;
	width: 6px;
	height: 277px;
}

.race.static #map_area .greyBorder.lb {
	background: url(../images/greyBorder-l.png) repeat-y 0 0;
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 2px;
	height: 27px;
}

.race.static #mapControls {
	width: 500px;
}

.race.static .raisedHeaderContainer {
	width: 500px;
	margin-top: 30px;
}

.race.static .raisedHeaderMiddle {
   width: 490px;
   margin: 0 auto;
}

.race.search .resultListItem .resultTextContainer .resultStreetTeammates .label,
.races.search .resultListItem .resultTextContainer .resultStreetTeammates .label {
   margin: 15px 0 5px 0;
   color: #999;
   font-size: 11px;
}

.race #activityActions {
	float: right;
	font-size: 12px;
	font-weight: bold;
	color: #2A5DB0;
	position: relative;
	top: 4px;
	right: 5px;  
}

.race .raisedHeaderContainer #activityActions a#deleteRace,
.race .raisedHeaderContainer #activityActions a#editRace {
	display: block;
	padding: 0 0 0 15px;
	margin: 0;
	color: #2A5DB0;
	float: right;
}

.race .raisedHeaderContainer #activityActions a#deleteRace:hover {
	color: #2F8CCC;
	cursor: pointer;
	background: transparent url(../images/icon-delete.png) no-repeat 0 -38px;
	border: none;
	padding: 0 0 0 15px;
}

.race .raisedHeaderContainer #activityActions a#editRace:hover {
	color: #2F8CCC;
	cursor: pointer;
	background: transparent url(../images/icon-edit.png) no-repeat 0 -38px;
	border: none;
	padding: 0 0 0 15px;
}

.race #raceInfoBox {
   width: 500px;
   margin: 20px 0;
}

.race #raceInfoBox .raceInfoRow {
   width: 500px;
   margin: 0 0 10px 0;
}

.race #raceInfoBox .raceInfoRow .label {
   float: left;
   width: 100px;
   padding-right: 10px;
   font-weight: bold;
   color: #000;
   font-size: 13px;
   text-align: right;
   position: relative;
   top: 1px;
}

.race #raceInfoBox .raceInfoRow .details {
   float: left;
   width: 370px;
   font-weight: normal;
   color: #666;
   font-size: 13px;
   line-height: 130%;
}

.search.races h3.profile,
.static.race h3.profile {
   padding-bottom: 10px;
   font-size: 21px;
   margin-top: 60px;
}

.search.races h3.profile:first-child,
.static.race h3.profile:first-child {
   margin-top: 0;
}

.search.races h3.profile img,
.static.race h3.profile img {
   position: relative;
   top: 2px;
}

.search.races h3.profile span,
.static.race h3.profile span {
   margin-left: 20px;
}

.races .noneContainer {
   width: 720px;
   text-align: center;
}

.races .noneContainer .mainText {
   font-size: 24px;
   font-weight: bold;
   color: #666;
   margin: 30px 0;
}

.races .noneContainer .subText {
   font-size: 16px;
   font-weight: normal;
   color: #666;
   margin-top: 30px;
}

.races .noneContainer .subText a {
   font-weight: bold;
}

.race #sideNav.raceHistory {
   margin-top: 40px;
}

.race.static .noResultsContainer {
   width: 500px;
   margin: 30px 0;
   padding-bottom: 30px;
   text-align: center;
}

.race.static .noResultsContainer h3 {
   border-bottom: none;
   font-size: 20px;
}

.race.static .noResultsContainer .subText {
   font-size: 14px;
   color: #666;
   font-weight: normal;
}

.addRaceToEventBox {
   border: 1px solid #DDD;
   width: 718px;
   margin-bottom: 30px;
   padding: 10px;
   background: #FAFAFA;
}

.addRaceToEventHeader {
   font-size: 12px;
   font-weight: bold;
   color: #666;
   margin-bottom: 20px;
}

.addRaceToEventBox .icon {
   width: 50px;
   height: 50px;
   float: left;
   margin-right: 10px;
   border: 1px solid #EEE;
   background: #F5F5F5;
}

.addRaceToEventTextContainer {
   width: 656px;
   float: left;
}

.addRaceToEventName {
   font-size: 18px;
   color: #000;
   margin-bottom: 5px;
   font-weight: bold;
}

.addRaceToEventDesc {
   font-size: 12px;
   color: #666;
   margin-bottom: 5px;
   font-weight: normal;
   line-height: 130%;
}

.suggestionBox h3.leftListHeader {
   border-left: none;
}

#noSearchCreateButton {
   float: none;
   position: relative;
}

.leftSideMenu .divider {
	width: 198px;
	border-bottom: 1px solid #EEE;
	font-size: 0.1em;
	height: 1px;
}

#leftColumn .noStreetTeammates {
	width: 188px;
	font-size: 12px;
	color: #666;
	text-align: center;
	margin: 6px 0;
	padding: 5px;
	line-height: 130%;
}

#beTheFirst {
   width: 120px;
   margin: 10px auto;
   float: none;
}

.leftSideSignupContainer {
   padding: 5px;
   background: #E8EEF7;
   width: 218px;
   border: 1px solid #C4D4E8;
}

.leftSideSignupContainer .header {
   font-size: 18px;
   font-weight: bold;
   color: #000;
   margin-bottom: 10px;
   line-height: 130%;
}

.leftSideSignupContainer .mainText {
   font-size: 12px;
   font-weight: normal;
   color: #333;
   line-height: 130%;
}

#leftSideSignUp {
   float: none;
   width: 200px;
   margin: 20px auto 10px auto;
}

#leftSideSignUp .mainText {
   top: 6px;
}

#sideNav h3.history {
   margin-top: 30px;
}

.loggedOutMessage {
   border: 1px solid #CCC;
   background: #EEE;
	padding: 10px;
	width: 950px;
	margin: 20px auto;
	line-height: 130%;
	position: relative;
}

.loggedOutMessageText {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

#warningLightbox {
   position: relative;
}

#warningLightbox .warningLightboxHeaderContainer {
   
}

#warningLightbox .warningLightboxHeaderContainer .icon {
   width: 50px;
   height: 50px;
   float: left;
   margin-right: 14px;
}

#warningLightbox .warningLightboxHeaderContainer .textContainer {
   float: left;
   width: 420px;
   padding-top: 6px;
}

#warningLightbox .warningLightboxHeaderContainer .textContainer .mainText {
   font-size: 17px;
   font-weight: bold;
   color: #000;
   margin-bottom: 8px;
}

#warningLightbox .warningLightboxHeaderContainer .textContainer .subText {
   font-size: 12px;
   font-weight: normal;
   color: #666;
   margin-bottom: 10px;
}

#warningLightbox .warningLightboxSelectionList {
   width: 400px;
   height: 220px;
   padding: 6px;
   overflow: auto;
   margin: 18px auto;
   border: 1px solid #CCC;
}

#warningLightbox.duplicate .warningLightboxSelectionList {
   height: 86px;
}

#warningLightbox .warningLightboxSelectionList .warningLightboxSelectionItem {
   width: 360px;
   padding: 10px;
   margin: 0 auto;
}

#warningLightbox .warningLightboxSelectionList .warningLightboxSelectionItem:hover {
   background: #EEE;
   cursor: pointer;
}

#warningLightbox .warningLightboxSelectionList .warningLightboxSelectionItem .icon {
   width: 50px;
   height: 50px;
   margin-right: 20px;
   float: left;
}

#warningLightbox .warningLightboxSelectionList .warningLightboxSelectionItem .textContainer {
   width: 290px;
   height: 50px;
   float: left;
   position: relative;
}

#warningLightbox .warningLightboxSelectionList .warningLightboxSelectionItem .textContainer .mainText {
   font-size: 21px;
   font-weight: bold;
   color: #000;
   position: absolute;
   top: 50%;
   margin-top: -13px;
}

#warningLightbox .warningLightboxSelectionList .divider {
   border-top: 1px solid #EEEEEE;
   height: 1px;
   margin: 8px auto;
   width: 380px;
}

#warningLightbox .warningLightboxFooter {
   position: relative;
   top: 10px;  
}

#warningLightbox .warningLightboxFooter .text {
   float: right;
   position: relative;
   top: 3px;
   color: #666;
   font-size: 11px;
   margin-right: 10px;
}

.newRaceRow .footnote {
   color: #666;
   font-size: 11px;
   margin: 8px 0 20px 210px;
}

.newRaceRow .footnote.required {
   color: #333;
   font-size: 13px;
   margin: 8px 0 20px 210px;
}

/* popout */

.suggestionBox {
   padding: 0;
   margin: 0;
   position: relative;
   border: 1px solid #CCC;
   width: 198px;
   background: #C4D4E8;
}

.suggestionBox #suggestionHolder .border:first-child {
   display: none;
}

.suggestionBox .popout-tl {
   display: none;
   position: absolute;
   top: -13px;
   left: -13px;
   z-index: -1;
}

.suggestionBox .popout-t {
   display: none;
   position: absolute;
   top: -13px;
   width: 178px;
   margin: 0 10px;
   z-index: -1;
}

.suggestionBox .popout-tr {
   display: none;
   position: absolute;
   top: -13px;
   right: -13px;
   z-index: -1;
}

.suggestionBox .popout-r {
   display: none;
   position: absolute;
   right: -13px;
   margin: 10px 0 0 0;
   z-index: -1;
}

.suggestionBox .popout-br {
   display: none;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}

.suggestionBox .popout-b {
   display: none;
   position: absolute;
   bottom: -13px;
   width: 178px;
   margin: 0 10px;
   z-index: -1;
}

.suggestionBox .popout-bl {
   display: none;
   position: absolute;
   bottom: -13px;
   left: -13px;
   z-index: -1;
}

.suggestionBox .popout-l {
   display: none;
   position: absolute;
   left: -13px;
   margin: 10px 0 0 0;
   z-index: -1;
}

.race .leftListItem .mainDetailsBox .icon {
   width: 30px;
   height: 30px;
   margin-right: 6px;
}

.race .leftListItem .mainDetailsBox {
   height: 30px;
   position: relative;
}

.race .leftListItem .mainDetailsBox .icon img {
   width: 30px;
   height: 30px;
}

.race .leftListItem .mainDetailsBox .textBox {
   float: left;
   width: 123px;
}

.race .leftListItem .mainDetailsBox .textBox .leftListTitle {
   font-size: 13px;
   color: #111;
   font-weight: bold;
   margin-bottom: 4px;
}

.race .leftListItem .mainDetailsBox .textBox .leftListSub {
   font-size: 11px;
   color: #666;
   font-weight: normal;
}

.race .leftListItem .mainDetailsBox .textBox .leftListSub.date {
   margin-top: 4px;
}

.race .leftListItem .mainDetailsBox .textBox .leftListSub span {
   font-weight: bold;
}

.race .leftListItem .streetTeammatesBox .leftListStreetTeammates {
   margin: 10px auto 0 auto;
   width: 180px;
}

.race .leftListItem .streetTeammatesBox .leftListStreetTeammates .title {
   font-size: 10px;
   color: #666;
   margin-bottom: 6px;
}

.race .userGrid.streetTeammates {
   margin-bottom: 40px;
}

.race .leftListItem .streetTeammatesBox .userGrid.streetTeammates {
   margin-bottom: 0;
}

#liveRaceDisplay {
   margin-bottom: 30px;
   position: relative;
}

#liveRaceDisplay h2 {
   margin-bottom: 6px;
   text-align: center;
   line-height: 130%;
}

#liveRaceDisplay h2.broadcasting {
   margin-bottom: 6px;
   text-align: left;
}

#liveRaceDisplay h2 .rkLiveLightMenu {
   top: -4px;
   left: -4px;
}

.liveRaceUserGrid {
   position: relative;
   background: #FFF;
   border: 1px solid #CCC;
   width: 190px;
   left: -8px;
   padding: 5px 4px;
}

.liveRaceUserGrid p {
   text-align: center;
   color: #999;
   font-style: italic;
   font-size: 11px;
   line-height: 130%;
}

.race .liveRaceUserGrid .userGrid.streetTeammates {
   margin-bottom: 0;
}

.race .liveRaceUserGrid .userGrid.streetTeammates a {
   margin-right: 4px;
}

.liveRaceEliteBox {
   clear: both;
   margin: 5px 0 0 0;
}

.liveRaceEliteBox .text {
   font-size: 12px;
   color: #444;
   font-weight: normal;
   text-align: center;
   margin: 7px 0 4px;
}

.liveRaceEliteBox a.liveRaceEliteButton {
   background: url(../images/racePage-becomeElite.png) no-repeat 0 0;
   width: 189px;
   height: 19px;
   display: block;
}

.liveRaceEliteBox a.liveRaceEliteButton:hover {
   background: url(../images/racePage-becomeElite.png) no-repeat 0 -19px;
}

.liveRaceEliteBox a.liveRaceEliteButton span {
   visibility: hidden;
}

#raceResultsBox {
   position: relative;
   width: 500px;
   margin: 20px 0;      
}

#raceResultsBox #raceResultsHeader {   
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 15px;
   color: #000;
   font-weight: bold;
   font-size: 12px; 
   border-bottom: 1px solid #CCC;
}

#raceResultsBox #raceResultsHeader #raceResultsPositionLabel {
   position: absolute;
   top:0px;
   left:0px;
   width:50px;
   height: 15px;
   text-align: center;
}

#raceResultsBox #raceResultsHeader #raceResultsUserLabel {
   position: absolute;
   top: 0px;
   left: 50px;
   width: 300px;
   height: 15px;
   text-align: center;
   border-left: 1px solid #CCC;   
}

#raceResultsBox #raceResultsHeader #raceResultsTimeLabel {
   position: absolute;
   top:0px;
   left:350px;
   width:75px;
   height: 15px;
   text-align: center;
   border-left: 1px solid #CCC;   
   border-right: 1px solid #CCC;
}

#raceResultsBox #raceResultsHeader #raceResultsPaceLabel {
   position: absolute;
   top: 0px;
   left: 425px;
   width: 75px;
   height: 15px;
   text-align: center;
}

#raceResultsBox #raceResultsList {
   position: relative;
   top: 17px;
   left: 0px;
   width:100%;
   padding: 2px 0 0 0;
}

#raceResultsBox #raceResultsList .raceResultsListItem {     
   position: relative;
   width: 100%;
   height: 30px;
   font-weight: bold;
   font-size: 12px;
   color: black;
   text-decoration: none;
}

#raceResultsBox #raceResultsList .raceResultsListItem:hover {
   background: #DDD;
   color: #000;
   cursor: pointer;
}

#raceResultsBox #raceResultsList .raceResultsListItem a,
#raceResultsBox #raceResultsList .raceResultsListItem a:hover {
   color: #000;
}

#raceResultsBox #raceResultsList .raceResultsListItem .position {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 50px;
   height: 30px;
   padding-top: 8px;
   margin-right: 1px; 
   text-align: center;
}

#raceResultsBox #raceResultsList .raceResultsListItem .icon {
   position: absolute;
   top:0px; 
   left: 50px;
   width: 30px; 
   height: 30px;
   padding: 2.5px 0 0 3px;       
}

#raceResultsBox #raceResultsList .raceResultsListItem .user {
   position: absolute;
   top: 0px;
   left: 85px;
   width: 275px;
   height: 30px;
   padding: 8px 0 0 5px;
   text-align: left;
 }

#raceResultsBox #raceResultsList .raceResultsListItem .time {
   position: absolute;
   top: 0px;
   left: 350px;
   width: 75px;
   height: 30px;
   padding-top: 8px;
   text-align: center;
}

#raceResultsBox #raceResultsList .raceResultsListItem .pace {
   position: absolute;
   top: 0px;
   left: 425px;
   width: 75px;
   height: 30px;
   padding-top: 8px;
   text-align: center;
}

#currentLiveRacesWidget {
   position: relative;
   top: 0px;
   left: 0px;
   width: 200px;
   margin: 0px auto; 
   border: 1px solid black;
   z-index: 5;
}

#currentLiveRacesWidget .liveRacesListItem {
   position: relative;
   top: 0px;
   left: 0px;
   border: 1px solid black;   
   width: 100%;
   height: 50px;
} 

#currentLiveRacesWidget .liveRacesListItem .header {
   font-weight: normal;
   font-size: 12px;
   color: black;
   text-align: left;
}

/* FIXME: Live races landing page. Remove when testing is complete. */

#content.liveRaces { 
   border: 1px solid black;
   position: relative;
   z-index: 2;
   margin-top: 30px;         
}


#rightColumn .whatsThisbox {
   width: 200px;
   position: relative;
   margin: 0 auto 14px;
}

.helpIcon {
   float: left;
   width: 20px;
   height: 20px;
   margin-right: 6px;
   position: relative;
   top: -4px;
}

.whatsThisLink {
   float: left;
}