/* Routes.css */

.route#content {
   margin-top: 30px;
}

.route #mainColumn {
	width: 720px;
	margin-right: 20px;
	float: left;
}

.route #rightColumn {
	width: 230px;
	float: left;
	position: relative;
	top: 44px;
}

#createRouteButton {
   width: 230px;
   margin: 0 auto 35px auto;
   float: none;
}

#createRouteButton a,
#createRouteButton a:hover {
   color: #FFF;
}

#routesNav p {
   color: #666;
   line-height: 130%;
}

#noRoutesContent {
   width: 720px;
} 

#noRoutesContent h2,
#noRoutesContent-public h2 {
   text-align: center;
   font-size: 24px;
   color: #333;
   text-shadow: #FFF 1px 1px 0;
   margin: 20px 0 50px;
}    

#noRoutesContent h2 span {
   position: absolute;
   width: 100%;
   height: 31px;
   background: url(../images/hGradient-large.png) repeat-x 0 0;
}

h2.routeTitle {
   font-size: 21px;
   color: #111;
   float: left;
   width: 550px;
}  

h2.routeTitle span {
   position: absolute;
   width: 550px;
   height: 31px;
   background: url(../images/hGradient-large.png) repeat-x 0 0;
   z-index: 100;
}

h2.routeTitle span.details {
   position: relative;
   width: inherit;
   height: inherit;
   background: none;
   margin-left: 8px;
   font-size: 14px;
   z-index: 99;
   color: #333;
}

p.noRoutes {
   text-align: center; 
   font-style: italic;
   color: #666;  
}

#routesMain p {
   color: #666;
   line-height: 130%;
}

#createRouteButtonLarge {
   width: 300px;
   margin: 20px auto 50px auto;
   float: none;
}

#createRouteButtonLarge a,
#createRouteButtonLarge a:hover {
   color: #FFF;
}

.routesInfoBox .icon {
   float: right;
   margin: 0 0 20px 20px;
}

.routesInfoBox h3 {
   margin-bottom: 20px;
}

.route #profileStatsBox {
	width: 210px;
	margin-bottom: 30px;
}

.route #routeDetailSummary h3 {
	margin-top: 3px;
	text-align: center;
	width: 210px;
}

.route #profileStatsWindow {
	background: url(../images/profileStatsBox-bg.png) no-repeat 0 0;
	width: 180px;
	height: 61px;
	position: relative;
	margin: 10px auto;
}

.route #profileStatsWindow .mainText {
	font-size: 30px;
	color: #FFF;
	font-weight: bold;
	text-shadow: #000 1px 1px 3px;
	text-align: center;
	position: relative;
	top: 8px;
}

.route #profileStatsWindow .unitText {
	font-size: 11px;
	color: #CCC;
	font-weight: normal;
	text-shadow: #000 0 0 1px;
	text-align: center;
	position: relative;
	top: 10px;
}

.route #profileStatsWindow-reflection {
	position: absolute;
	width: 178px;
	height: 41px;
	top: 1px;
	left: 1px;
}

.profileStatsRow {
	width: 206px;
	padding: 0;
	clear: both;
	margin: 12px auto;
}

#routeDetailSummary label {
   display: block;
	margin: 16px 0 5px;
	text-align: left;
	font-weight: bold;
	color: #666;
	font-size: 14px;
}

#routeDetailSummary label.checker {
   float: left;
}

#routeDetailSummary input[type="text"] {
   width: 206px;
	text-align: left;
	font-weight: bold;
	color: #000;
	font-size: 18px;
}

#routeDetailSummary textarea {
   width: 210px;
	text-align: left;
	font-weight: normal;
	color: #000;
	font-size: 12px;
}

#makeRoutePublicButton {
   display: block;
   margin: 10px auto;
   width: 150px;
}

.routes .menuItem .mainText {
	width: 148px;
}

#routeActivityList {
	border-top: 1px solid #DDD;
	padding: 3px 0 0 0;
}

#routeActivityList .routeActivityListItem {
	display: block;
	text-decoration: none;
	color: #222;
	width: 710px;
	padding: 5px;
	margin: 0 auto;
}

#routeActivityList .routeActivityListItem a,
#routeActivityList .routeActivityListItem a:hover {
   color: #000;
}

#routeActivityList .routeActivityListItem:hover {
	background: #DDD;
	color: #000;
	cursor: pointer;
}

#routeActivityList .border {
	height: 1px;
	border-bottom: 1px solid #EEE;
	width: 720px;
	margin: 2px auto 3px auto;
	padding: 0;
}

#routesMain h2.activityListHeader {
	margin: 40px 0 0 5px;
	padding: 0 0 5px 0;
	font-size: 18px;
	color: #333;
}

#routeActivityListDate {
	font-weight: bold;
	font-size: 18px;
	color: #000;
	margin: 3px 0 0 0;
}

#routeActivityListTime {
	font-weight: normal;
	font-size: 14px;
	color: #666;
	margin: 5px 0 0 0;
	position: relative;
	top: 2px;
}

#routeActivityListDurationLabel {
	float: right;
	font-weight: bold;
	font-size: 14px;
	color: #999;
	width: 120px;
	text-align: center;
	position: relative;
	top: 5px;
}

#routeActivityListPaceLabel {
   float: right;
   font-weight: bold;
   font-size: 14px;
   color: #999;
   width: 120px;
   text-align: center;
	position: relative;
	top: 5px
}

#routeActivityListPace .details {
   font-weight: normal;
   font-size: 12px;
   color: #888;
}

#routeActivityListCaloriesLabel {
	float: right;
	font-weight: bold;
	font-size: 14px;
	color: #999;
	width: 100px;
	text-align: center;
	margin-right: 5px;
	position: relative;
	top: 5px
}

#routeActivityListDuration {
	float: right;
	font-weight: bold;
	font-size: 21px;
	color: #666;
	width: 120px;
	text-align: center;
	position: relative;
	top: 16px;
}

#routeActivityListCalories {
	float: right;
	font-weight: bold;
	font-size: 21px;
	color: #666;
	width: 100px;
	text-align: center;
	position: relative;
	top: 16px;
}

#routeActivityListPace {
   float: right;
   font-weight: bold;
   font-size: 21px;
   color: #666;
   width: 120px;
   text-align: center;
   position: relative;
   top: 16px;
}

#routeActivityDateContainer {
	float: left;
	font-weight: bold;
	font-size: 14px;
	color: #666;
	margin-left: 5px;
	position: relative;
	top: 2px;
}

#routeDetailSummary .checker {
   top: 12px;
}

.routes #mapRoute {
   top: 10px;
   left: 10px;
}

.routes #deleteRouteLink {
   position: relative;
   top: 6px;
}

#uniform-routeViewableBy {
   top: 5px;
   left: 5px;
}