/*
	This file holds the styles that are specific the landing pages and forms from the panels 
	that the user comes to from the homepage
	
	11.12.2008 - Ian
*/

@import url(/css/reset.css);
@import url(/css/buttons.css);
@import url(/css/individual/features-hero-common.css);

	/************************************************************
	 BASE STYLES
	/************************************************************/	

		a{
			border:0;
			}
		html{
			background-color:#f1f1e8;
			}	
		body{
			background-color:#ffffff;
			width:761px;
			margin:0 auto;
			}
	/************************************************************
	  Hero styles specific to these feature pages
	/************************************************************/	

		#hero{
			margin-top:-1px;
			height:185px;
			}
		body.featurepage #hero .panel{
			position:absolute;
			top:0;
			left:0;
			height:185px;
			width:760px;
			}
		/* Give each panel the orange background */
		#hero .panel{background:#fbc061 url(/images/homepage/tabs/panel-generic-orange.jpg) top;}
		
		/* make the width of the hero 1px bigger for the actual feature pages. Just a discrepency between widths on the homepage and subpages of our site */
		body.featurepage #hero, body.featurepage #hero .panel, body.featurepage #hero ul#tabs{ width:761px !important; }
		body.featurepage #hero ul#tabs li#tablink4 a{ width:191px !important; }

		/* Large background icons, treated differently than on homepage */
		body.featurepage #hero .panel span.bg-icon{ 
			width:160px; 
			height:160px; 
			position:absolute; 
			top:0; 
			right:0; 
			background-position:top right;
			background-repeat:no-repeat;
			}		
			body#panel1 #hero .panel#panel-1 span.bg-icon{  background-image:url(/images/homepage/tabs/icon-bg-graph.jpg);}
			body#panel2 #hero .panel#panel-2 span.bg-icon{  background-image:url(/images/homepage/tabs/icon-bg-down.jpg);}
			body#panel3 #hero .panel#panel-3 span.bg-icon{  background-image:url(/images/homepage/tabs/icon-bg-dollar.jpg);}
			body#panel4 #hero .panel#panel-4 span.bg-icon{  background-image:url(/images/homepage/tabs/icon-bg-accelerate.jpg);}


		/* Give active tab transparent background */
		body#panel1 #hero ul#tabs li#tablink1,
		body#panel2 #hero ul#tabs li#tablink2,
		body#panel3 #hero ul#tabs li#tablink3,
		body#panel4 #hero ul#tabs li#tablink4
		{background:transparent;}

		/* Give active tab transparent background */
		body#panel1 #hero ul#tabs li#tablink1 *,
		body#panel2 #hero ul#tabs li#tablink2 *,
		body#panel3 #hero ul#tabs li#tablink3 *,
		body#panel4 #hero ul#tabs li#tablink4 *
		{cursor:default;}
	
		/* Give active tab the right text color */
		body#panel1 #hero ul#tabs li#tablink1 a span,
		body#panel2 #hero ul#tabs li#tablink2 a span,
		body#panel3 #hero ul#tabs li#tablink3 a span,
		body#panel4 #hero ul#tabs li#tablink4 a span
		{color:#bd7a0e;}
		
		/* Remove the tab seperator from active tab */
		body#panel1 #hero ul#tabs li#tablink1 a,
		body#panel2 #hero ul#tabs li#tablink2 a,
		body#panel3 #hero ul#tabs li#tablink3 a,
		body#panel4 #hero ul#tabs li#tablink4 a
		{background-image:none;}
		
		/* Give active tab the brighter icon */
		body#panel1 #hero ul#tabs li#tablink1 a span.icon{ background-image: url(/images/homepage/tabs/icon-graph-on-featurepage.png); }
		body#panel2 #hero ul#tabs li#tablink2 a span.icon{ background-image: url(/images/homepage/tabs/icon-down-on.png); }
		body#panel3 #hero ul#tabs li#tablink3 a span.icon{ background-image: url(/images/homepage/tabs/icon-dollar-on.png); }
		body#panel4 #hero ul#tabs li#tablink4 a span.icon{ background-image: url(/images/homepage/tabs/icon-accelerate-on.png); }

		/* Give active tab bottom right corder */
		body#panel1 #hero ul#tabs li#tablink1 a,
		body#panel2 #hero ul#tabs li#tablink2 a,
		body#panel3 #hero ul#tabs li#tablink3 a
		{background:url(/images/homepage/tabs/corner-right.png) bottom right no-repeat;}
		
		/* Give active tab bottom left corner */
		body#panel2 #hero ul#tabs li#tablink2,
		body#panel3 #hero ul#tabs li#tablink3,
		body#panel4 #hero ul#tabs li#tablink4
		{background:url(/images/homepage/tabs/corner-left.png) bottom left no-repeat;}


	/************************************************************
	 PANEL TEXT STYLES
	/************************************************************/	
	
	
		#hero #panel-1 .reduction{
			font-size:40px;
			top:28px;
			left:30px;
			}
		#hero #panel-1 .outsourcing{
			font-size:20px;
			top:70px;
			left:120px;
			}
		#hero #panel-2 .percent{
			font-size:70px;
			left:34px;
			top:17px;
			}
		#hero #panel-2 .decrease{
			font-size:30px;
			left:173px;
			top:30px;
			}
		#hero #panel-2 .in{
			font-size:20px;
			left:295px;
			top:39px;
			}
		#hero #panel-2 .change{
			font-size:20px;
			left:173px;
			top:61px;
			}
		#hero #panel-3 .dollars{
			font-size:40px;
			left:38px;
			top:25px;
			}
		#hero #panel-3 .savings{
			font-size:32px;
			left:223px;
			top:31px;
			}
		#hero #panel-3 .in{
			font-size:20px;
			left:334px;
			top:41px;
			}
		#hero #panel-3 .compliance{
			font-size:22px;
			left:230px;
			top:64px;
			}
			
		#hero #panel-4 .percent{
			font-size:65px;
			left:32px;
			top:13px;
			}
		#hero #panel-4 .acceleration{
			font-size:35px;
			left:165px;
			top:39px;
			}
		#hero #panel-4 .time{
			font-size:26px;
			left:218px;
			top:70px;
			}

	/************************************************************
	 CONTENT STYLES
	/************************************************************/	

		strong{
			font-weight:bold;
			}
		em{
			font-style:italic;
			}
		/* Fix a quirk on these pages */
		#footer-bar{
			margin-bottom:-16px !important;
			}	
		#content-container{
			padding:15px;
			padding-top:30px;
			position:relative;
			}
		#content-container p, #content-container li{
			font: normal 12px Verdana, Arial, Helvetica, sans-serif;
			color:#69665c;
			line-height:1.6;
			}
		#content-container p{
			margin-bottom:15px;
			}
		#content-container p.intro{
			font: bold 13px Verdana, Arial, Helvetica, sans-serif;
			color:#69665c;
			padding-top:5px;
			line-height:1.5;
			}
		#content-container ul{
			list-style-type:disc;
			margin-left:30px;
			margin-bottom:25px;
				}
		#content-container li{
			margin-bottom:10px;
			}
		#content-container  blockquote{
			position:relative;
			width:275px;
			padding:0px 0px 15px 15px;
			border-left:1px dashed #d0d0c0; 
			margin-left:15px;
			}
		#content-container blockquote p{
			font:normal 18px Georgia, "Times New Roman", Times, serif;
			color:#a7a398;
			line-height:1.5;
			position:relative;
			z-index:2;
			}
		#content-container blockquote cite{
			font: normal 11px Verdana, Arial, Helvetica, sans-serif;
			color:#69665c;
			float:right;
			text-align:right;
			line-height:15px;
			position:relative;
			z-index:3;
			}
		p.tabs-hidden-title{
			display:none;
			} 
		#content-container h2{
			font:normal 24px Georgia, "Times New Roman", Times, serif;
			color:#f58233;
			line-height:1.25;
			position:relative;
			z-index:2;
			margin:15px 0px 10px 0px;
			}
		#content-container  img.product-shot{
			margin: 0px 0px 10px 30px;
			}
		#content-container img.right{
			float:right;
			margin:0; 
			margin:0px -13px 0px 10px;
			}
		#content-container blockquote img.left-quote{
			position:absolute;
			top:-0px;
			left:-15px;
			padding-bottom:15px;
			background-color:#fff;
			}
		#content-container blockquote img.right-quote{
			position:absolute;
			bottom:-10px;
			z-index:1;
			right:-5px;
			padding-bottom:10px;
			background-color:#fff;
			}
		#content-container #left{
			width:415px;
			float:left;
			position:relative;
			margin-bottom:15px;
			}
		#content-container #right{
			position:relative;
			float:right;
			width:305px;
			margin:15px 0px 15px 0px;
			}
		#content-container #privacy{ clear:both; }
		#content-container #privacy p{ color:#adad9c; }
		#content-container #privacy p span{ font-weight:bold;display:block; }
			
	/************************************************************
	  Registration Container and iFrame
	/************************************************************/	
		#content-container h2.reg-header{
			font-size:24px;
			clear:both;
			margin-bottom:1px;
			clear:both;
			}

		h2#reg-top{
			font: bold 14px Verdana, Arial, Helvetica, sans-serif;
			color:#69665c;
			margin:0px 0px 5px 0px;
			float:left;
			clear:both;
			}
		#reg-container{
			width:715px;
			float:left;
			clear:both;
			position:relative;
			border:1px solid #e9e9dc;
			border-top-width:5px;
			background-color:#f7f7ec;
			margin-bottom:15px;
			padding-left:15px;
			}
		#reg-container #iframe{
			width:265px;
			float:right;
			border-left:1px dashed #c9c9b8;
			padding-left:15px;
			text-align:center;
			margin:15px 10px 15px 0px;
			}
		iframe{ border:0; }
		#reg-container img.stack{
			float:left;
			margin:0px 15px 0px 10px;
			}
		#reg-container .paper{
			position:relative;
			float:left;
			padding:10px 10px 10px 0px;
			border-bottom:1px dotted #d3d3c3;
			width:390px;
			}
		#reg-container .last{
			border-bottom:0;
			}
		#reg-container .paper img{
			float:left;
			margin-right:10px;
			}
		#reg-container h3.includes{
			margin-top:15px;
			color:#adad9c;
			}
		#reg-container h3{
			font:bold 12px Verdana, Arial, Helvetica, sans-serif;
			color:#69665c;
			line-height:1.3;
			margin-bottom:3px;
			}
		#reg-container h4{
			font: normal 10px Verdana, Arial, Helvetica, sans-serif;
			text-transform:uppercase;
			letter-spacing:1px;
			color:#adad9c;
			margin:4px 0px 3px 0px;
			}
		#reg-container p{
			font-size:11px;
			margin:0px 0px 0px 80px;
			color:#888478;
			}
	/************************************************************
	  Layout Change - 20090923
	/************************************************************/	
		#content-container blockquote{
			border-left:none;
		}
		#right #iframe{
			background:#f7f7ec;
			width:265px;
			border:1px solid #c9c9b8;
			padding:15px;
			text-align:left;
			margin:15px 10px 15px 0px;
			}
		#quote{
			clear:both;
			display:block;
			padding-bottom:65px;
		}
		#content-container img.product-shot{
			float:right;
		}
		blockquote p{
			width:435px;
		}
		#iframe.paper{
			position:relative;
			float:left;
			padding:10px 10px 10px 0px;
			border-bottom:1px dotted #d3d3c3;
			width:390px;
			}
		#right #iframe .paper img{
			float:left;
			margin-right:10px;
			}
		#right #iframe .paper h3{
			font-family:Verdana,Arial,Helvetica,sans-serif;
			font-size:16px;
			font-weight:700;
		}
		#right #iframe .paper p{
			font-size:12px;
		}
		#content-container blockquote cite{
			float:left;
			text-align:left;
		}
		.customer-logo{
			float:right;
		}