@import url("/css/home-orbit.css");

#header-wrap {
	background-color: #4D4D47;
}


/* ------- branding begin ------- */
#branding-wrap {
	width: 100%;
	height: 23.5em; /* 376px */
	border-bottom: .0625em solid #000;
	background: center top no-repeat #4d4d47;	/* #e0e0e0 */
	background-image: url("/images/home/branding/12.jpg");
	background-size: 75.625em 23.5em;	/* 1210px x 376px */
	background-size: 119em 23.5em;	/* 1904px x 376px */
	border: 0;
	clear: left;
}
	#branding {
		width: 61.25em; /* 980px */
		margin: 0 auto;
	}
	
	/* ------- plantrip begin ------- */
		
	#plantrip.basic, #plantrip.adv {
		margin: 1.75em 0 0 0;
		padding: 1.5em 0 0 2em;
		-moz-border-radius: .4em;
		-webkit-border-radius: .4em;
		border-radius: .4em;
		background: rgba(46, 45, 42, 0.80);
		position: relative;
	}
		#plantrip.basic {
			width: 32em;
			width: 33.5em; /*test*/
		}
		#plantrip.adv {	/* change width for 2 column form */
			width: 59.25em;
		}
	#plantrip-left {
		width: 32em;
		width: 33.5em; /*test*/
		float: left;
	}
	#plantrip-right.basic {
		display: none;
	}
	#plantrip-right.adv {
		width: 24em;
		width: 23.5em; /*test*/
		float: left;
		border-left: .0625em solid #666666;
		padding-left: 2em;
		padding-left: 1em; /*test*/
	}
	
	/* using #branding instead of #plantrip so I can switch out #plantrip with #plantrip-2col */
	#branding h2 {
		color: #fff;
		font-weight: normal;
		font-size: 1.75em;
		padding-bottom: .5625em;
	}
	#branding form {
		/*
		min-width: 32em;
		max-width: 32em;
		width: 32em;
		*/
	}
	#branding form fieldset, #branding form fieldset.preferences {
		clear: both;
		border: 0;
		padding: 0 0 .8125em 0;
		margin: 0;
	}
		#branding form fieldset.preferences label {
			width: 7.5em;
			display: block;
			color: #ffffff;
			float: left;
			font-size: 1.25em;
		}
		#branding form fieldset.preferences select {
			width: 9.25em;
			width: 9.25em; /*test*/
			float: left;
		}
	#branding form label.hide {
		display: none;
	}
	#branding form input, #branding form select {
		border: .05em solid #000;
		-moz-border-radius: .2em;
		-webkit-border-radius: .2em;
		border-radius: .2em;
		font-size: 1.25em;
		margin-right: .75em;
	}
		#branding form input {
			padding: .25em;
		}
		#branding form select {
			padding: .2em;
		}
	
		#branding form input#from, #branding form input#to {
			width: 22em;
			margin-right: .5em;
			float: left;
		}
			#from-help, #to-help, #options-trip-help, #options-walk-help, #options-mode-help {
				width: 1.25em;	/* 20px */
				height: 1.125em;	/* 18px */
				background: url("/images/tripplanner/plantrip-help-icons.png") 0 0 no-repeat;
				background-size: 2em 6em;	/* 32px x 96px */
				float: left;
				border: none;
				margin: .5em 0 0 0;
				position: relative;
				cursor: pointer;
			}
				#from-help:hover, #to-help:hover, #options-trip-help:hover, #options-walk-help:hover, #options-mode-help:hover {
					background-position: 0 -4em;
				}
				
				#from-help-popup, #to-help-popup, #options-trip-help-popup, #options-walk-help-popup, #options-mode-help-popup {	/* default state for popup: hidden */
					position: absolute;
					z-index: 500;
					width: 20em;
					left: -999em;
					top: -.5em;
					padding: .5em;
					background-color: #ffffcc;
					border: .0625em solid #000;
					font-size: .75em;
				}
				#from-help:hover #from-help-popup, #to-help:hover #to-help-popup {	/* show popup */
					left: 2em;
				}
				#options-trip-help:hover #options-trip-help-popup, #options-walk-help:hover #options-walk-help-popup, #options-mode-help:hover #options-mode-help-popup {	/* show popup */
					left: -16.5em;
				}
				
		#branding form select#depart {
			width: 7.5em;	/* for combo selectors, to make room for 'depart after' */
			width: 5.5em;
		}
		#branding form select#Hour {
			width: 3.25em;
			margin-right: 0;
		}
		#branding form .colon {
			font-weight: bold;
			color: #ffffff;
		}
		#branding form select#Minute {
			width: 3.25em;
			margin-right: .125em;
		}
		#branding form select#AmPm {
			width: 3.25em;
			width: 3.5em;
		}
		
		#branding form select#Month {
			width: 3.75em;
			margin-right: .125em;
		}
		#branding form select#Day {
			width: 3.25em;
		}
	
		#branding form input#submit {
			padding: .25em 1.25em .25em 1.25em;
			border: .05em solid #000000;
			background-color: #6db33f;
			cursor: pointer;
			color: #fff;
			float: left;
			font-weight: bold;
			margin-top: .75em;
			margin-bottom: 1em;
		}
			#branding form input#submit:hover {
				color: #333;
				background-color: #ebaf11;
			}


		/* checkbox formatting */
		#branding form #mapcheckbox {
			float: left;
			margin: 1.25em .5em 0 .5em;
		}
		#branding form .mapcheckbox-label {
			float: left;
			cursor: pointer;
			padding: 1.25em .25em .25em 0;
			color: #ffffff;
		}
		
		
		/* more options formatting */
		#more-options.adv a {
			display: none;
		}
		#more-options.basic a, #less-options a {
			font-size: .75em;
			color: #cccccc;
			padding: .5em;
			border: none;
		}
			#more-options a {
				position: absolute;
				bottom: 1em;
				right: .5em;
				right: 1.25em; /*test*/
			}
			#less-options a {
				position: absolute;
				bottom: 1em;
				left: 46em;
				left: 48.5em; /*test*/
			}
			#more-options.basic a:hover span, #less-options a:hover span {
				border-bottom: .0833333333333333em dotted #ffffff;
				color: #ffffff;
			}
			
			#plantrip-right .spacer {	/* need this for the vertical line separating the basic/advanced sides */
				height: 4.5em;
			}

	/* ------- plantrip end ------- */
	
/* ------- branding end ------- */

/* ------- promo-bar begin ------- */

#imap-wrap {
	width: 100%;
	height: 4em;
	background-color: #ccc;
	border-bottom: .0625em solid #000;
	border-top: .0625em solid #000;
	clear: left;
	background: url("/images/home/imap-bg.jpg") center top no-repeat #4d4d47; /* #9f9f93*/
	
}
	#imap {
		width: 61.25em; /* 980px */
		height: 4em;
		margin: 0 auto;
	}
		#imap h3 {
			font-size: 1em;
			margin-top: .25em;
			margin-left: 13em;
			color: #fff;
			font-weight: normal;
		}
		#imap h3 a {
			-moz-border-radius: .3em;
			-webkit-border-radius: .3em;
			border-radius: .3em;
			border: .0625em solid #2e2d2a;
			padding: .25em 1em .1875em 1em;
			margin: 1em 0 0 0;
			color: #666666;
			background-color: #fff;
			display: block;
			width: 36em;
			text-align: center;
		}
			#imap h3 a:hover {
				color: #333;
				background-color: #ebaf11;
			}
	
	
/* ------- promo-bar end ------- */


/* ------- contentmain begin ------- */
#contentmain-wrap {
	width: 100%;
	clear: left;
}
	#contentmain {
		width: 61.25em; /* 980px */
		margin: 0 auto;
		padding: 2em 0;
	}
	
	#news-whatsnew {
		width: 13.8125em; /* 221px */
		margin-right: 2em; /* 32px */
		float: left;
	}
		#news-whatsnew-container {
			background-color: #f7e886;
			border: .0625em #b1aca7 solid;
			-moz-border-radius: .3em .3em 0 0;
			-webkit-border-radius: .3em .3em 0 0;
			border-radius: .3em .3em 0 0;	/* .25em original, scaled up 133% 4444444444444442em */
			padding: 0;
			margin: 0 0 .5em 0;
			text-align: center;
			position: relative;
		}
			#news-whatsnew h2 {
				font-size: 1.5em;
				font-weight: normal;
			}
			#news-whatsnew-pointer {
				display: block;
				background: url("/images/home/whatsnew-pointer.png") 0 0 no-repeat;
				width: 2em;
				height: 1em;
				z-index: 100;
				position: absolute;	/* have to position this absolute for IE */
				bottom: -1em;
				left: 5.9em;
			}
		#news-whatsnew ol li {
			list-style: none;
		}
		#news-whatsnew ol li a {
			display: block;
			padding: .6em 0 .6em 2em;
			color: #084c8d;
			text-decoration: none;
			line-height: 1.25;
		}
			#news-whatsnew ol li a:hover {
			}
			#news-whatsnew ol li a:hover span {
				color: #084c8d;
				border-bottom: .0635em dotted #084c8d;
			}
		li#whatsnew-1 a, li#whatsnew-2 a, li#whatsnew-3 a, li#whatsnew-4 a, li#whatsnew-5 a {
			background: url("/images/home/whatsnew-numbers.png") 0 0 no-repeat;
			background-size: 1.5em 20em;	/* 24px x 320px */
			border-bottom: .0625em #b1aCa7 solid;
		}
		li#whatsnew-1 a {
			background-position: 0 .75em;
		}
		li#whatsnew-2 a {
			background-position: 0 -3.25em;
		}
		li#whatsnew-3 a {
			background-position: 0 -7.25em;
		}
		li#whatsnew-4 a {
			background-position: 0 -11.25em;
		}
		li#whatsnew-5 a {
			background-position: 0 -15.25em;
		}
		#whatsnew-link a {
			font-size: .75em;
			float: right;
			margin-top: 0.625em;
		}


	#news-howweroll {
		width: 13.8125em; /* 221px */
		margin-right: 2em; /* 32px */
		float: left;
	}
		#news-howweroll-container {
			background-color: #d7e2ed;
			border: .0625em #b1aca7 solid;
			-moz-border-radius: .3em;
			-webkit-border-radius: .3em;
			border-radius: .3em;
			padding: 0 0 .5em 0;
			margin: 0;
		}
		#news-howweroll-container h2 a {
			height: 2.75em;
			margin-top: .5em;
			background: url("/images/home/howweroll-header.png") top center no-repeat;
			background-size: 9.20833333em 2.5em;	/* 221px x 60px original, reduced by 66.66% */
			display: block;
			border: none;
		}
		ol#howweroll li {
			list-style: none;
			padding: 0 1em 0 1em;
		}
		ol#howweroll li a {
			display: block;
			font-size: .75em;	/* this causes the units to change from 16px to 12px */
			padding: .5em 0 .6833333333333333em 5em;
			color: #2E2D2A;
			text-decoration: none;
		}
			ol#howweroll li a:hover {
			}
		ol#howweroll li a b {
			font-size: .8em;
			line-height: 1.875;
			text-transform: uppercase;
			border-bottom: .0635em dotted #d7e2ed;
			color: #999;
		}
			ol#howweroll li a:hover span {
				color: #084c8d;
				border-bottom: .0635em dotted #084c8d;
			}
		ol#howweroll li.first a, ol#howweroll li.second a, ol#howweroll li.third a {
			border-bottom: .08333em #b1aCa7 solid;
			background-size: 4.16666666em 4.16666666em; /* 50px x 50px original, scaled up 133% */
			background-position: 0 1em;
			background-repeat: no-repeat;
			border: none;
		}
			ol#howweroll li.first a {
				background-image: url("/includes/howweroll/1.png");
			}
			ol#howweroll li.second a {
				background-image: url("/includes/howweroll/2.png");
			}
			ol#howweroll li.third a {
				background-image: url("/includes/howweroll/3.png");
			}
		.howweroll-link a {
			font-size: .75em;
			margin-top: 0.625em;
			float: right;
		}
		
	#news-double {
		width: 29.625em; /* 474px */
		float: left;
	}
		#news-double-promo {
			/*
			FOR FACEBOOK/TWITTER BUTTONS
			border: #b1aca7 solid 0.1875em;  3px 
			margin-bottom: .875em;
			height: 3.75em;	 60px 
			*/
		}
			#news-double-promo a {
				display: block;
				position: relative;
				height: 3.75em;
				width: 29.625em;
				background: url("/images/home/ridersclub-ad.png") 0 0 no-repeat;
				background-size: 29.625em 3.75em;
				margin-bottom: .875em;
				border: none;
			}
				#news-double-promo a:hover {
					border: none;
				}
			#news-double-promo a #ridersclub-logo {
				position: absolute;
				top: -1.25em;
				left: -1em;
				width: 5em;
				height: 5em;
			}
			#news-double-promo a #ridersclub-button {
				position: absolute;
				top: .825em;
				right: 1em;
				padding: .2em 1em;
				background-color: #6db33f;
				border: .0625em solid #2e2d2a;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;
			}
				#news-double-promo a:hover #ridersclub-button {
					background-color: #ebaf11;
					color: #333333;
				}
			
			
		#news-double-slider {
		}
/* ------- contentmain end ------- */



#accountability-wrap {
	width: 100%;
	background-color: #e0e0e0;
	background-color: #fff;
	border-top: .0625em solid #cec8c2;
	clear: left;
}
	#accountability {
		width: 61.25em; /* 980px */
		margin: 0 auto;
		padding: 1.75em 0;
		text-align: center;
	}
	#accountability h3 {
		font-weight: normal;
	}
	#accountability a {
		background: url(/images/about/accountability/icon-small.png) 0 0 no-repeat;
		background-size: 2em 2em;
		padding: .5em 1em .5em 2.5em;
		border: none;
		color: #777;
	}
		#accountability a span {
			border-bottom: .0625em dotted #efefef;
		}
			#accountability a:hover span {
				color: #084C8D;
				border-color: #084C8D;
			}




#fanmail-wrap {
	width: 100%;
	background-color: #6bb445;
	background-color: #fff;
	border-top: .0625em solid #cec8c2;
	clear: left;
}
	#fanmail {
		width: 47.25em; /* 980px */
		margin: 0 auto;
		padding: 2em 7em;
		background: url(/images/home/fanmail-quote.png) 0 0 no-repeat;
	}
		#fanmail p.quote {
			font-size: 1.5em;
			font-family: Georgia, "Times New Roman", Times, serif;
			font-style: italic;
			margin: .25em 0;
		}
			#fanmail p.quote a {
				border-bottom: 1px dotted #fff;
				color: #333;
			}
			#fanmail p.quote a:hover {
				border-color: #ccc;
			}
		#fanmail p.fanmail-link {
			float: right;
		}




/* ------- contentsub begin ------- */
#contentsub-wrap {
	width: 100%;
	/* height: 13.5em;  216px */
	background-color: #efefef;
	background-color: #e0e0e0;
	border-top: .0625em solid #cec8c2;
	clear: left;
}
	#contentsub {
		width: 61.25em; /* 980px */
		margin: 2em auto;
	}
	
	
	#contentsub-mobile {
		width: 29.5em; /* 472px */
		margin: 0 2em 0 0; /* 32px */
		float: left;

		background-color: #fff;
		border: .0625em #b1aca7 solid;
		-moz-border-radius: .3em;
		-webkit-border-radius: .3em;
		border-radius: .3em;
	}
		#contentsub-mobile a {
			display: block;
			padding: 1.6em 0 0em 0;
			border: none;
			line-height: 1.25;
		}
		#contentsub-mobile a:hover span.mobile-title, #contentsub-mobile a:hover span.mobile-link {
			color: #084c8d;
			border-bottom: .0635em dotted #084c8d;
		}
			#contentsub-mobile a span.mobile-title {
				font-weight: bold;
				color: #2e2d2a;
			}
			#contentsub-mobile a span.mobile-link {
				color: #75706B;
				font-size: .75em;	/* sets styles to 75% */
			}
		#contentsub-mobile-left {
			width: 9em;
			height: 9.375em; /* 150px - didn't factor in the 1px border, so ends up being 152px */
			float: left;
			padding-left: 5.5em;
			background: url("/images/home/mobile-phones.png") 1.5em 0 no-repeat;
			background-size: 18.75em 9.375em; /* 300px x 150px */
		}
		#contentsub-mobile-right {
			width: 10.5em;	/* 14.75em minus lef-margin */
			height: 9.375em; /* 150px */
			float: left;
			padding-left: 4.5em;
			background: url("/images/home/mobile-phones.png") -14.125em 0 no-repeat;
			background-size: 18.75em 9.375em; /* 300px x 150px */
		}
	
	
	#contentsub-email {
		width: 19.25em; /* 332px original */
		padding-right: 1em;
		/*height: 13.5em;  216px */
		margin: 0 2em 0 0; /* 32px */
		float: left;
		background: url("/images/home/email-icon.png") right 2.5em no-repeat;
		background-size: 7.5em 6.25em;	/*120px x 100px */
	}
		#contentsub-email h3 {
			font-size: 1.25em;
			color: #2e2d2a;
		}
		#contentsub-email p {
			font-size: .75em;
			color: #75706B;
			margin-bottom: 1em;
		}
		#contentsub form {
			padding: 0;
			margin: 0;
		}
		#contentsub form label.hide {
			display: none;
		}
		#contentsub form input#email {
			-moz-border-radius: .3em;
			-webkit-border-radius: .3em;
			border-radius: .3em;
			border: .0625em solid #2e2d2a;
			margin: 0 0 .75em 0;
			padding: .3125em .25em .3125em .25em;
			width: 18em;
			font-size: 1em;
			display: block;
		}
		#contentsub form input.button {
			-moz-border-radius: .3em;
			-webkit-border-radius: .3em;
			border-radius: .3em;
			margin: 0 .25em 0 0;
			padding: .25em 1em .25em 1em;
			border: .0625em solid #2e2d2a;
			background-color: #6db33f;
			font-size: 1em;
			cursor: pointer;
			font-weight: bold;
			color: #fff;
		}
			#contentsub form input.button:hover {
				color: #333;
				background-color: #ebaf11;
			}
		
		
		
	#contentsub-social {
		width: 5.5em; /* 94px minus 1px border; 5.8125em - cheating for rounding error on resize */
		float: left;
		padding-left: 1.5em;
		margin: 0;
		border-left: .0625em #b1aca7 solid;
		height: 9.5em; /* 152px */
	}
		ul#social li {
			list-style: none;
			padding: 0;
		}
		ul#social li a {
			display: block;
			font-size: .75em;	/* this causes the units to change from 16px to 12px */
			padding: .41666666em 0 .666666em 2.3333333333333em;
			color: #2E2D2A;
			text-decoration: none;
		}
			ul#social li a:hover span {
				color: #084c8d;
				border-bottom: .0635em dotted #084c8d;
			}
			
		ul#social li.newsletter a, ul#social li.facebook a, ul#social li.twitter a, ul#social li.flickr a, ul#social li.youtube a {
			background: url("/images/home/social-icons.png") 0 0 no-repeat;
			background-size: 24em 16em; /* 288px x 192px original, scaled 133% */
			border: none;
		}
			ul#social li.newsletter a {
				background-position: 0 .33333333333333em;
			}
				ul#social li.newsletter a:hover {
					background-position: -12em .3333333333333em;
				}
			ul#social li.facebook a {
				background-position: 0 -2.999999999999em;
			}
				ul#social li.facebook a:hover {
					background-position: -12em -2.999999999999em;
				}
			ul#social li.twitter a {
				background-position: 0 -6.3333333333333em;
			}
				ul#social li.twitter a:hover {
					background-position: -12em -6.3333333333333em;
				}
			ul#social li.flickr a {
				background-position: 0 -9.66666666666em;
			}
				ul#social li.flickr a:hover {
					background-position: -12em -9.66666666666em;
				}
			ul#social li.youtube a {
				background-position: 0 -12.9999999999em;
			}
				ul#social li.youtube a:hover {
					background-position: -12em -12.9999999999em;
				}

/* ------- contentsub end ------- */