/**
 	File Overview:		Milwaukee County Transit - home.css
 	Company:			Versant	
 	Description:		Styles for /default.aspx (home page)
*/

/**
	TOC
		1. Structure
		2. Google Trip Planner
		3. Hero Module
		4. Trip Information links
		5. Featured Content (tabs)
		6. News
*/


/* 1. Structure
------------------------------------------------ */

#plan {
	background:#d2d2d2;
	border:5px solid #d2d2d2;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#learn {
	margin:30px 0 0;
}
#trip-planner,
#hero,
#big-links {
	border:1px solid #fff; 
}

/* 2. Google Trip Planner
------------------------------------------------ */
#trip-planner {
	float:left; 
	width:250px; 
	padding:15px 10px 10px 10px; 
	background:#416fa5 url(/_cmn/images/css/trip-planner.jpg) 0 0 no-repeat;
	color:#fff;
}
	#trip-planner h1 {
		margin-top:15px;
		font-size:18px;
		font-weight:bold;
	}
		#trip-planner h1 span {display:block; padding-left:49px; font-size:14px; font-weight:normal;}
	
	#trip-planner label {
		display:block;
		margin-bottom:2px;
		font-weight:bold;
		font-size:11px;
	}
	#trip-planner input {
		margin-bottom:15px;
		width:95%;
		height:20px;
		border:1px solid #000;
		outline:0;
	}
	#trip-planner input.submit-button {width:90px; padding:1px 2px 3px; margin:0 13px 23px 0; float:right; border-color:#F8BA37;}
	#trip-planner input.tripPlannerShortField {
		width:61px;
		margin:0 0 20px 6px;
	}
	#planner-schedule select {
		width:94px;
	}
	#planner-date label, #planner-time label {
		margin: 0 0 0 6px;
	}
	#planner-schedule, #planner-date, #planner-time {
		float:left;
		padding: 0 3px 0 0;
	}
	#trip-planner #planner-help {color:#fff; font-size:11px; float:right; }
	#trip-planner {height:281px; padding:15px 10px 5px;}

	

/* 3. Hero Module
------------------------------------------------ */
#hero {
	float:left; 
	height:300px;
	width:435px; 
	margin:0 6px;
	overflow:hidden;
	position:relative;
}

    #hero #heroList {margin-left:0px;}
    #hero #heroList li.heroPanel {width:435px; height:300px; display:block; float:left; color:#666;}
    #hero #heroList li.heroPanel h2 {color:#fff; font-weight:bold; font-size:20px; margin-left:15px; margin-top:5px;margin-bottom:20px;}
    #hero #heroList li.heroPanel p {width:250px; margin-left:15px; margin-top:4px; margin-bottom:3px; line-height:15px;}
    #hero #heroList li.heroPanel p a.call-to-action {margin-top:10px;}
    #hero #heroList li.heroPanel ul {margin-left:15px; margin-top:1px; margin-bottom:0px; line-height:15px;}
    #hero #heroList li.heroPanel ul li {margin-left:15px; list-style-type:disc;}
    #hero #heroList li.current {}
    #hero #heroList li a.heroLink {display:block; height:300px; text-indent:-9999px;}
    #hero #heroControls {position:absolute; bottom:-8px; left:0; margin:0;}
        #hero #heroControls li.heroControl {width:19px; height:31px; cursor:pointer; display:block; float:left; padding:6px 0 0 12px; margin:0; background:transparent url(/_cmn/images/css/hero-counter.png) 0 1px no-repeat; color:#999; font-weight:bold; font-size:14px;}
        #hero #heroControls li.current {background-position:0 -31px; color:#fff; font-weight:bold;}



/* 4. Trip Information links (Big Links!!1)
------------------------------------------------ */
#big-links {
	float:left; 
	width:210px; 
	padding:74px 5px 52px;
	background:#416fa5 url(/_cmn/images/css/big-links.png) -70px -30px  no-repeat;
}
	#big-links li.big-alerts {
		position:relative;
	}
	#big-links a {
		display:block;
		width:171px;
		padding:7px 4px 2px 33px;
		border:1px solid #fff;
		background:#FFF url(/_cmn/images/css/big-links-icons.png) 0 0 no-repeat;
		color:#fff;
		color:rgba(255,255,255,.85);
		text-decoration:none;
		font-size:18px;
		font-weight:bold;
	}
		#big-links li.big-times a	{
			background-color:#faad44;
			background-position:0 9px;
		}
		#big-links li.big-fares a	{
			background-color:#389170;
			background-position:-208px 9px;
		}
		#big-links li.big-alerts a	{
			background-color:#c64141;
			background-position:-416px 9px;
		}
		#big-links li.big-alerts a.rss {
			background:none;
			border:0 none;
			display:inline;
			margin:0;
			position:absolute;
			top:2px;
			left:119px;
			width:14px;
		}
			#big-links li.big-alerts a.rss:hover {
				background:none;
			}
			#big-links li.big-times a:hover	{
				background-color:#fab556;
				background-position:0 -50px;
			}
			#big-links li.big-fares a:hover	{
				background-color:#4c9c7e;
				background-position:-208px -50px;
			}
			#big-links li.big-alerts a:hover	{
				background-color:#cc5454;
				background-position:-416px -50px;
			}
		#big-links a span {
			display:block;
			margin-top:-3px;
			font-size:11px;
			font-weight:normal;
		}
		#big-links a img {padding-left:3px;}
	#big-links ul {
		
	}
		#big-links ul li {
			padding-bottom:4px;
		}
	#big-links {height:175px;}

/* 5. Featured Content (tabs)
------------------------------------------------ */
#featured-content {
	float:left;
	width:586px;
/*	min-height:170px;*/
	border:1px solid #a1a1a1;
	margin-right:13px;
}

#home #featured-content div#tabs {padding:0; font-family:Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:85%; color:#333;}
#home #featured-content .ui-tabs-vertical { width:100%; border:none; }
#home #featured-content .ui-tabs-vertical .ui-tabs-nav {width:150px; padding: .2em .2em .2em 0em; float:right; margin-left:0px; display:inline;}
#home #featured-content .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: auto; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0;}
#home #featured-content .ui-tabs-vertical .ui-tabs-nav li a {border:none; padding:6px 4px 1px 17px; font-size:12px; border:0; width:129px; font-weight:bold; background:url(/_cmn/images/css/home-tab-arrows.png) 5px -8px no-repeat;}
#home #featured-content .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
#home #featured-content .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: left; width:400px; background-color:#fff; font-size:110%; display:inline;}

#home #featured-content .ui-widget-header {border:none; float:right; margin:3px 3px 5px 0;}
#home #featured-content .ui-tabs .ui-tabs-nav li.ui-state-active a {cursor:pointer; background-position:5px -98px;}
#home #featured-content .ui-tabs .ui-tabs-nav li.ui-state-hover a {cursor:pointer; background-position:5px -57px;}
#home #featured-content .ui-tabs .ui-tabs-nav li.ui-tabs-selected {margin-bottom:.2em;}
#home #featured-content .ui-widget-content {color:#333;}
#home #featured-content .ui-tabs-panel a:link,
#home #featured-content .ui-tabs-panel a:visited {text-decoration:none; color:#0033cc;}
#home #featured-content .ui-tabs-panel a:hover,
#home #featured-content .ui-tabs-panel a:active {color:#275af3;}
#home #featured-content .ui-tabs-panel h4 {
	margin:0px 0 6px;
	padding-top:0px;
	line-height:1.2em;
	font-size:14px;
	
}
#home div.ui-datepicker {z-index:2000 !important;}

/* 6. News
------------------------------------------------ */
#news {
	float:left;
	width:351px;
	border:1px solid #a1a1a1;
}
	#news h2 {
		margin:0 0 6px;
		padding:2px 0 1px 7px;
		color:#fff;
		background-color:#a1a1a1;
		font-size:14px;
	}
	
	#news #lead-story {
		float:left;
		width:175px;
		padding:0 10px 0 7px;
	}
		#news #lead-story h3 {font-size:14px; padding-top:0;}
		#news #lead-story p {
			font-size:12px;
			line-height:16px;
		}
	#news ul {
		float:left;
		width:116px;
		padding:11px 7px 0 10px;
		margin-left:18px;
		font-size:11px;
		line-height:1.2em;
		list-style:disc;
	}
		#news ul li {margin-bottom:5px;}
		#news ul a {border:0;}