/* Yield Book CSS - April, 2012*/
/* Artfully Masterminded by J-V-K-H */

/* -------------------------------------------------- 
    Table of Contents
-----------------------------------------------------
Yield Book Foundation Resets
:: Reset & Standards
:: Brand Colors
:: Fonts - Sizes & Colors
:: Generic Interactive - Pointers, JS Hovers, etc
:: Lading Page Styles
:: Misc
*/


/*	--------------------------------------------------
	:: Foundation Resets
	-------------------------------------------------- */
	/*1em = 14px... (this is controlled in the foundation.css on the body element) */
	.container { padding:0 1em}	
	
	/*.row { width: 100%; max-width: 85.71em; min-width: 51.93em; margin: 0 auto; } *//*max - 1200 / 14 = 85.7142857 ; min - 727 / 14 = 51.9285714 */
	/* To fix the grid into a certain size, set max-width to width */
	
	h1, h2, h3, h4, p, span, li {
		margin:0;
		padding:0;
	}
	
	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: .25em 0; height: 0; }
		
	body {background:transparent url(../../src/img/backgrounds/paper-pattern-background.png) 0 0 repeat; }

	.flyout.small {
		width:19.31em;	/* (20.8 * 13)/14 = 19.3142857 */	
	}
	
	table thead tr th,
	table tfoot tr th,
	table tbody tr td,
	table tr td,
	table tfoot tr td { font-size: 14px; font-size: 1.4rem; }
	table thead tr th,
	table tfoot tr td { font-size: 16px; font-size: 1.6rem;  }	
	
	/*--------------------------------------------------
	:: Brand Colors - Add to elements that need it
	-------------------------------------------------- */
	/*#####--colors.. oh the colors or is it colours?--#####*/
	.font-white{
		color:#fff;
		color:rgb(255,255,255);
		/*color:rgba(255,255,255, 1);*/
		}
	
	/*--PRIMARY--*/
	/*--Fresh Green--*/
	.background-fresh-green{
		background:#00b140;
		background:rgb(0, 177, 64);
		background:rgba(0, 177, 64, 1);
		}
	.border-fresh-green{
		border-width:1em;
		border-style:solid;
		border-color:#00b140;
		border-color:rgb(0, 177, 64);
		border-color:rgba(0, 177, 64, 1);
		}
	.font-fresh-green{
		color:#00b140;
		color:rgb(0, 177, 64);
		/*color:rgba(0, 177, 64, 1);*/
		}
		
	/*--Deep Green--*/	
	.background-deep-green{
		background:#154734;
		background:rgb(21, 71, 52);
		background:rgba(21, 71, 52, 1);
		}
	.border-deep-green{
		border-width:1em;
		border-style:solid;
		border-color:#154734;
		border-color:rgb(21, 71, 52);
		border-color:rgba(21, 71, 52, 1);
		}
		
	/*--Slate Gray--*/	
	/*### Is it GRAY or GRAY?? ###*/
	.background-slate-grey{
		background:#253746;
		background:rgb(37, 55, 70);
		background:rgba(37, 55, 70, 1);
		}
	.background-slate-grey-15{
		background:#dfe1e3;
		background:rgb(223,225,227);
		background:rgba(37, 55, 70, .15);
		}
	.background-slate-grey-50{
		background:#929ba2;
		background:rgb(146,155,162);
		background:rgba(37, 55, 70, .5);
		}
		
	.background-slate-grey-75{
		background:#5c6974;
		background:rgb(92,105,116);
		background:rgba(37, 55, 70, .75);
		}

	.border-slate-grey{
		border-width:1em;
		border-style:solid;
		border-color:#253746;
		border-color:rgb(37, 55, 70);
		border-color:rgba(37, 55, 70, 1);
		}
	.font-slate-grey{
		color:#253746;
		color:rgb(37, 55, 70);
		/*color:rgba(37, 55, 70, 1);*/
		}

	
	/*--SECONDARY--*/
	/*--Deep Purple--*/
	.background-deep-purple{
		background:#59315f;
		background:rgb(89, 49, 95);
		background:rgba(89, 49, 95, 1);
		}
	.gradient-deep-purple {
		background:#59315f;
		background: -moz-linear-gradient(top, #59315f 0%, #48274c 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59315f), color-stop(100%,#48274c));
		background: -o-linear-gradient(top, #59315f 0%,#48274c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59315f', endColorstr='#48274c',GradientType=0 );
		}
	.border-deep-purple{
		border-width:1em;
		border-style:solid;
		border-color:#59315f;
		border-color:rgb(89, 49, 95);
		border-color:rgba(89, 49, 95, 1);
		}
				
	/*--Turquoise-*/
	.background-turquoise {
		background:#008C95;
		background:rgb(0, 140, 149);
		background:rgba(0, 140, 149, 1);
		}
	.gradient-background-turquoise {
		background:#008C95;
		background: -moz-linear-gradient(top, #008C95 0%, #007178 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008C95), color-stop(100%,#007178));
		background: -o-linear-gradient(top, #008C95 0%,#c97a17 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008C95', endColorstr='#007178',GradientType=0);
		}
	.border-turquoise{
		border-width:1em;
		border-style:solid;
		border-color:#008C95;
		border-color:rgb(0, 140, 149);
		border-color:rgba(0, 140, 149, 1);
		}
		
	/*--Orange-*/
	.background-orange{
		background:#ed8b00;
		background:rgb(237, 139, 0);
		background:rgba(237, 139, 0, 1);
		}
	.gradient-background-orange {
		background:#ed8b00;
		background: -moz-linear-gradient(top, #ed8b00 0%, #c97a17 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed8b00), color-stop(100%,#c97a17));
		background: -o-linear-gradient(top, #ed8b00 0%,#c97a17 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8b00', endColorstr='#c97a17',GradientType=0 );
		}
	.border-orange{
		border-width:1em;
		border-style:solid;
		border-color:#ed8b00;
		border-color:rgb(237, 139, 0);
		border-color:rgba(237, 139, 0, 1);
	}

	/*--slate-*/
	.background-slate{
		background:#807f83;
		background:rgb(128,127,131);
		background:rgba(128,127,131, 1);
		}
	.border-slate{
		border-width:1em;
		border-style:solid;
		border-color:#807f83;
		border-color:rgb(128,127,131);
		border-color:rgba(128,127,131, 1);
	}
	
	/*--Red-*/
	.background-red{
		border-width:1em;
		background:#840b55;
		background:rgb(132, 11, 85);
		background:rgba(132, 11, 85, 1);
		}
	.gradient-background-red {
		background:#840b55;
		background: -moz-linear-gradient(top, #ed8b00 0%, #6a0944 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed8b00), color-stop(100%,#6a0944));
		background: -o-linear-gradient(top, #ed8b00 0%,#6a0944 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8b00', endColorstr='#6a0944',GradientType=0 );
		}
	.border-red{
		border-width:1em;
		border-style:solid;
		border-color:#840b55;
		border-color:rgb(132, 11, 85);
		border-color:rgba(132, 11, 85, 1);
		}	
	
	/*--Olive-*/
	.background-olive{
		background:#a8ad00;
		background:rgb(168, 173, 0);
		background:rgba(168, 173, 0, 1);
		}
	.gradient-background-olive{
		background:#b2bb1e;
		background: -moz-linear-gradient(top, #b2bb1e 0%, #909718 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bb1e), color-stop(100%,#909718));
		background: -o-linear-gradient(top, #b2bb1e 0%,#909718 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bb1e', endColorstr='#909718',GradientType=0 );
		}
	.border-olive{
		border-width:1em;
		border-style:solid;
		border-color:#a8ad00;
		border-color:rgb(168, 173, 0);
		border-color:rgba(168, 173, 0, 1);
	}
	
	/*--Yellow-*/
	.background-yellow{
		background:#f6be00;
		background:rgb(246, 190, 0);
		background:rgba(246, 190, 0, 1);
		}
	.gradient-background-yellow{
		background:#f6be00;
		background: -moz-linear-gradient(top, #f6be00 0%, #c69900 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6be00), color-stop(100%,#c69900));
		background: -o-linear-gradient(top, #f6be00 0%,#c69900 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6be00', endColorstr='#c69900',GradientType=0 );
		}
	.border-yellow{
		border-width:1em;
		border-style:solid;
		border-color:#f6be00;
		border-color:rgb(246, 190, 0);
		border-color:rgba(246, 190, 0, 1);
	}

	/*--Cyan--*/
	 .background-cyan{
		background:#00aeef;
		background:rgb(0, 174, 239);
		background:rgba(0, 174, 239, 1);
		}

	.border-cyan{
		border-width:1em;
		border-style:solid;
		border-color:#00aeef;
		border-color:rgb(0, 174, 239);
		border-color:rgba(0, 174, 239, 1);
		}


	/*CITI INDEX COLORS*/
	/*--Cyan--*/
	 .background-citi-cyan{
		background:#00bdf2;
		background:rgb(0, 189, 242);
		background:rgba(0, 189, 242, 1);
		}
	.gradient-background-citi-cyan {
		background:#009fdf;
		background: -moz-linear-gradient(top, #009fdf 0%, #008cc0 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009fdf), color-stop(100%,#008cc0));
		background: -o-linear-gradient(top, #009fdf 0%,#008cc0 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fdf', endColorstr='#008cc0',GradientType=0 );
		}
	.border-citi-cyan{
		border-width:1em;
		border-style:solid;
		border-color:#00bdf2;
		border-color:rgb(0, 189, 242);
		border-color:rgba(0, 189, 242, 1);
		}
		
	/*--Blue--*/
	.background-citi-blue{
		background:#004785;
		background:rgb(0, 71, 133);
		background:rgba(0, 71, 133, 1);
		}
	.gradient-background-citi-blue {
		background:#004785;
		background: -moz-linear-gradient(top, #004785 0%, #00396b 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004785), color-stop(100%,#00396b));
		background: -o-linear-gradient(top, #004785 0%,#00396b 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004785', endColorstr='#00396b',GradientType=0 );
		}
	.border-citi-blue{
		border-width:1em;
		border-style:solid;
		border-color:#004785;
		border-color:rgb(0, 71, 133);
		border-color:rgba(0, 71, 133, 1);
		}
		
	/*--Dark Grey--*/
	.background-citi-dark-grey{
		background:#53565a;
		background:rgb(83, 86, 90);
		background:rgba(83, 86, 90, 1);
		}
	.border-citi-dark-grey{
		border-width:1em;
		border-style:solid;
		border-color:#53565a;
		border-color:rgb(83, 86, 90);
		border-color:rgba(83, 86, 90, 1);
		}
	
	/*--Grey--*/
	.background-citi-grey{
		background:#a7a8aa;
		background:rgb(167, 168, 178);
		background:rgba(167, 168, 178, 1);
		}
	.border-citi-grey{
		border-width:1em;
		border-style:solid;
		border-color:#a7a8aa;
		border-color:rgb(167, 168, 170);
		border-color:rgba(167, 168, 170, 1);
		}
	
	.font-gray-333{ /* using for h2 in product/services page text, may substitute font-slate-grey */
		color:#333;
		color:rgb(51,51,51);	
		/*color:rgbA(51,51,51,1);	*/
	}

	/*--------------------------------------------------
	:: Drop Shadows
	-------------------------------------------------- */
   .bottom-shadow {
   		box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
   }

   .top-shadow { /* used on forced footer-bottom pages*/
   		box-shadow:inset 0 5px 5px -2px rgba(0,0,0,0.25);
		-webkit-box-shadow:inset 0 5px 5px -2px rgba(0,0,0,0.25);
		-moz-box-shadow:inset 0 5px 5px -2px rgba(0,0,0,0.25);
   }
   	
	/*--------------------------------------------------
	:: Fonts - Size & Colors
	-------------------------------------------------- */	
	p, span, li {
		color:#555;	
	}
		
	h1, h2 {
		color:#ffffff;
		font-weight:normal;
	}
	
	a, a:link {
		color:#000000;	
		text-decoration:underline;
	}

	a:visited {
		color:#000000;	
		text-decoration:underline;
	}

	a:hover {
		/*Fresh Green*/
		color:#00b140;
		color:rgb(0, 177, 64);
		text-decoration:underline;
	}

	a:active {
		/*Fresh Green*/
		color:#00b140;
		color:rgb(0, 177, 64);
		text-decoration:underline;
	}
	
		
   	h1 { /* for hero banner titles */
		font-size:48px; /* should be 48pt*/ 
		font-size:4.8rem; /* should be 48pt*/ 
	}

	h2 { /* for banner sub titles and section titles */
		font-size:24px; /* should be 24pt*/ /* 24/13 = 1.84615385 */
		font-size:2.4rem; /* should be 24pt*/ /* 24/13 = 1.84615385 */
	}
	
	h3 {
		font-size:21px;
		font-size:2.1rem;
	}
	
	h4 {
		/*Dark Green*/
		font-size:16px;
		font-size:1.6rem;
		color:#154734;
		color:rgb(21, 71, 52);
		/*color:rgba(21, 71, 52, 1);	*/
	}
	
	
	.bold{font-weight:bold;}
	
	.fine-print{font-size:.8em;}

	/*--------------------------------------------------
	:: Generic Interactive - Pointers, JS Hovers, etc
	-------------------------------------------------- */	

	#hero-control span, .banner-arrow {
		cursor:pointer;	
	}
	
	.banner-arrow {
		opacity:.5;	
	}
	
	.arrow-right {
		text-align:right;	
	}
	
	

	/*--------------------------------------------------
	:: Landing Page - Header
	-------------------------------------------------- */
	/*Top Line*/
	#header { 
		border-top-width:.35em;
		border-top-style:solid;
		border-top-color:#253746;
		border-top-color:rgb(37, 55, 70);
		border-top-color:rgba(37, 55, 70, 1);
		height:8.85em;
		background-color:#ffffff;
	}
	
	#header .row div a, #header .row div a {
		color:#999999;
	}
	
	/*Login Logout Container*/
	#header .row div {
		margin-top:5.11em; /* (5.5 * 13)/14 = 5.10714286 */
		text-align:right;
	}
	
	/*Logo*/
	#header .row div:first-child {
		height:2.61em;	/* (2.81300 * 13)/14 = 2.61207143 */
		margin-top:1.75em; /* (1.88 * 13) / 14 = 1.74571429 */
		text-align:left;
	}
	
	#header .row div a:link, #header .row div a:first-child:link {
		text-decoration:none;
	}
	#header .row div a:hover, #header .row div a:first-child:hover {
		text-decoration:underline;
	}
	
	/*Login span*/
	#header .row div a:first-child {
		color:#00b140;
	}
	

	/*--------------------------------------------------
	:: Landing Page - Navigation
	-------------------------------------------------- */
	 
	.nav-bar > li > a.main, .nav-bar .flyout a {
		color:#FFF;
		font-size:16px;
		font-size:1.6rem;
	}    
	
	.nav-bar .flyout a{
		/* Slate Grey */
		color:#253746;
		color:rgb(37, 55, 70);
		/*color:rgba(37, 55, 70, 1);*/
	}
	
	.nav-bar .flyout a:hover{
		color:#FFF;
	}
	
	.nav-bar a:hover, .nav-bar > li.on > a.main {
		color:#1d384c;	
	}	
	
	/*1em = 14px */
	#nav  {
		background-image: url(../img/backgrounds/nav-background.png);
		background-repeat:repeat;
		position:relative;
		z-index:4;
	}
	
	.nav-bar  {
		margin-top:0;
		height:auto;
		background:none;
		border:none;
	}
	
	.nav-bar > li {
		border:none;
		line-height: 3.09em; /* (3.32500 * 13) / 14 = 3.0875 */
	}
	.nav-bar > li > a.main {
		padding:0 12px;
	}
	.lt-ie9.lt-ie8 .nav-bar > li > a.main{ /* IE7 fix */
		white-space:nowrap;
	}
	.nav-bar .on, .nav-bar .flyout {
		background-color:#dedede;
	}
	
	.nav-bar > li.has-flyout > a.flyout-toggle {
		padding:1.29em; /* (1.39 * 13) / 14 = 1.29071429 */
	}
	
	.nav-bar > li.has-flyout > a.flyout-toggle span {
    	border-left: 5px solid transparent;
    	border-right: 5px solid transparent;
		border-top: 5px solid #FFFFFF;
	}
	
	.nav-bar  > li.has-flyout.on > a.flyout-toggle span {
		border-top-color:#00b140;
	}

	.nav-bar .flyout {
		opacity:0.95;
		filter:alpha(opacity=95);
		left:0px;
		padding:0;
		margin:0;
		border-top:none;
		border:none;
		top:3.08em; /* 43 / 14 = 3.07142857 */
	}

	.nav-bar .flyout.right{left:auto; right:0;}

	.nav-bar .flyout a{
		line-height:3.06em;/*(3.3 * 13) / 14 = 3.06428571*/
		display:block;
		padding-left:1.29em;/* (1.39 * 13) / 14 = 1.29071429 */
		border-bottom:1px solid #CCCCCC;
		text-decoration:none;
	}

	.nav-bar .flyout a:hover {
		line-height:3.06em;/*(3.3 * 13) / 14 = 3.06428571*/
		display:block;
		background-color:#999999;
		border-right-width:1em;
		border-right-style:solid;
		/*fresh green*/
		border-color:#00b140;
		border-color:rgb(0, 177, 64);
		border-color:rgba(0, 177, 64, 1);
		border-bottom:1px solid #999999;
	}
	
	.nav-bar .flyout a.login-req:hover {
		background:#999 url(../../src/img/icons/icon-key-yb-white16.png) center right no-repeat;
	}
	.lt-ie9.lt-ie8 .nav-bar .flyout a.login-req:hover {/* IE7 fix :( */
		background-color:#999;
		background-image:url(../../src/img/icons/icon-key-yb-white16.png); 
		background-position-x:right;
		background-position-y:center;
		background-repeat:no-repeat;
		overflow:auto;
	}
	
	
	/*clear dividing border on last item*/
	.nav-bar .flyout a.drop-link-end {
		border-bottom:none;
	}
	
	.nav-bar .flyout a.drop-link-end:hover {
		border-bottom:none;
	}
	
	
	/*--------------------------------------------------
	:: Landing Page - Hero
	-------------------------------------------------- */
	
	#hero-background-image {
		 width:100%; 
		 height:36.68em;  /*(39.5 * 13) / 14 = 36.6785714*/
		 position:absolute;
		 margin-top:-1px;
		 border-bottom:1px solid #cccccc;
		 background-color:#FFFFFF;
		}
	
	#hero-background-image div.bkg-image{ 
		 z-index:1;
		 float:left;
		 background-color:none;
		 width:99.9%;
		 position:relative;
		 background-color: #FFFFFF;
		 background-position: center center;
		 background-repeat: no-repeat;
		 height: 100%;
		 display: none;
	}	
	
	
	 #hero-background-image div.show {
		display: block;
		width:99.9%;
	}
		
	#hero-content,  #hero-content p, #hero-content h1, #hero-content h2 {
		color:#ffffff;
		}
	
	#hero-content {
		height:23.21em; /* (25 * 13) / 14 = 23.2142857 */
		position:relative;
		z-index:2;
		}
	
	#hero-content .five {
		padding-top:4.64em; /* (5 * 13) / 14 = 4.64285714 */
		}
	
	#hero-content .one {
		padding-top: 13em; /* (7 * 13) / 14 = 6.5 */
		}
	
	#hero-content p {
		margin-top:1.29em; /* (1.39 * 13) / 14 = 1.29071429 */
		}
	
	#hero-text div{
		display:none;
		}	
		
	#hero-text a{
		color:#ffffff;
		text-decoration:underline;
		}	
	
	#hero-text a:hover{
		color:#00b140;
		text-decoration:underline;
		}
	
	#hero-text div.show {
		display:block;
		}
	
	
	/*--------------------------------------------------
	:: Landing Page - CTA  Boxes
	-------------------------------------------------- */
	
	#home-cta-content{
		margin-bottom:1.16em; /*(1.25 * 13) / 14 = 1.16071429*/
		position:relative;
		z-index:2;
		}	
	
	#home-cta-content .panel{
		overflow:auto;
		background-repeat: no-repeat;
		background-position: top left;	
		position:relative;
		border-top:.08em solid #ddd;
		padding:0;
		}
	
	#home-cta-content .panel p:first-child {
		text-align:right;
		}
	
	#home-cta-content .panel a{
		color:#ffffff;
		display:inline-block;
		text-align:center;
		width:25%;
		height:1.29em; /* (1.39 * 13) / 14 = 1.29071429 */
		padding-top:.25em;
		text-decoration:none;
		}
	
	#home-cta-content .panel div{
		height:9.1em; /* (9.8 * 13) / 14 = 9.1 */
		text-decoration:none;	
		display:block;
		padding: .25em .25em .75em 9.29em; /* (10 * 13) / 14 = 9.28571429 */
		overflow:hidden;
		border-width:1em;
		/*over-write color border*/
		border-left:none;
		border-right:none;
		border-top:none;
		}
			
	#home-cta-content .panel div {
		height:9em;	
	}
	
	#home-cta-content .panel a {
    	height: 1.5em;
    	padding-top: 0.1em;
		margin-bottom:0.2em;
		}
	
	#home-cta-content .panel a:hover {
		background:#999;
	}


	/*--------------------------------------------------
	:: Landing Page - Secondary Content
	-------------------------------------------------- */

	#secondary-content{
		margin-top:1.16em; /* (1.25 * 13) / 14 = 1.16071429 */
		padding-bottom:2.79em; /* (3 * 13) / 14 = 2.78571429 */
		}
	
	.secondary-wrap{
		background-color:white;
		background-image:url(../../src/img/backgrounds/grid-pattern-background-left.png);
		background-repeat:repeat-y;
		background-position:0 0;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		}
	
	.secondary-wrap-right {
		background-image:url(../../src/img/backgrounds/grid-pattern-background-right.png);
		background-repeat:repeat-y;
		background-position:right;	
		height:100%;
		}

	
	
	/*--------------------------------------------------
	:: Landing Page - Hero Control
	-------------------------------------------------- */
	
	#hero-control {
		margin-top:1.86em; /* (2 * 13) / 14 = 1.85714286 */
		vertical-align:middle;
		}
	
	/*Buttons for banner*/
	#hero-control span {
		display:inline-table;
		vertical-align:top;
		font-size:4.18em; /*(4.5 * 13) / 14 = 4.17857143*/
		}
	
	#hero-control span.banner-on{
		font-size:5.57em; /*(6 * 13) / 14 = 5.57142857*/
		}
	
	
	/*--------------------------------------------------
	:: Landing Page - News
	-------------------------------------------------- */
	
	#news {
		padding-top:2.79em; /* (3 * 13) / 14 = 2.78571429 */
		padding-bottom:2.79em; /* (3 * 13) / 14 = 2.78571429 */
		}

	.news-links {
		margin-top:1em
		}
	
	.news-links p span.date {
		float:right;
		display:block;	
		}
	
	.news-links p span.category {
		float:left;
		display:block;	
		}
	
	/*--------------------------------------------------
	:: Landing Page - Footer
	-------------------------------------------------- */
	#footer, #footer .row, #footer .row div:first-child{ height:4.15em; /* 58 / 14 = 4.14285714 */ }
	
	#footer {
		 background-color:#C9C9C9; 
		 background-image:url(../../src/img/backgrounds/footer-background-repeat.png);
		 background-repeat:repeat-x;
		 background-position:0 0;
		 width:100%; 
		 line-height:.1rem; /* removes extra space below footer */
		}
		
	#footer .row div{
		text-align:right;
		padding-top:1em; 
		}
	
	#footer .row div:first-child{
		text-align:left;
		padding:0;
		margin:0;
		}
		
	#footer ul{
		margin-bottom:1.1em;
	}
	
	#footer ul li{
		display:inline;
		line-height:1.8rem; /* removes extra space below footer */
		}

	#footer ul li a{
		color:#FFF;
		padding-left:.75em;
		padding-right:.75em;
		text-decoration:none;
		}
	
	#footer ul li a:hover{
		text-decoration:underline;
		}

	#footer .footer-logo{
		background:transparent url(../../src/img/logos/citi-logo.png) 0 .1em no-repeat;
		width:5em; /* 70 / 14 = 5 */
		height:4.15em; /* 58 / 14 = 4.14285714 */
		}

	/*--------------------------------------------------
	:: products/services pages - hero
	-------------------------------------------------- */

	.hero-content-product.header-bground{ /*this is default bg image, but shoulf be overwritten on each individual product page*/
		background-position:50% 0;
		background-repeat:repeat-x;	 
		background-image:transparent url(../../src/img/banner/bicycle_gear_turquoise_2200x250.png);	 
		height:17.85em; /* 250/14 = 17.8571429em */
		position:relative;
	}
	
	
	.hero-content-product .headline-text{
		padding:6.667% 0 0 0;	
	}
	.hero-content-product .headline-text.heavy-content{
		padding:4.75% 0 0 0;	
	}
	
	.hero-content-product .headline-text.epic-heavy-content{
		padding:2.5% 0 0 0;	
	}


	/*--------------------------------------------------
	:: products/services pages - middle container
	-------------------------------------------------- */
	.middle-container{
		background:white;	
		padding-top:1em;
		padding-bottom:1em;
	}
	
	.middle-container .row{
		padding:.89em 0;	/* (25/14)/2 = 0.892857143 */
	}

	.middle-container .lightbox-img{
		height:10em;	/* 140 / 14 = 10 */
		border-width:.15em; 
	}
	
	.middle-container .lightbox-img span{
		display:inline-block;
		width:100%;	
		height:33.34%;
		opacity:0.4;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
		filter:alpha(opacity=40);
		position:relative;
		top:67.5%;
		cursor:pointer;
	}
	
	.middle-container .lightbox-img .thickbox{
		display:inline-block;
		width:100%;
		height:100%;
	}

	.middle-container .lightbox-img span img{
		margin-top:2%;
		margin-right:5%;	
		float:right;
	}
	

	/*--------------------------------------------------
	:: products/services pages - cta section
	-------------------------------------------------- */
	.middle-container .product-cta-box{
		border-top:none;	
		border-left:none;	
		border-right:none;	
		background:transparent url(../../src/img/backgrounds/paper-pattern-background.png) 0 0 repeat;
	}
	
	.middle-container .product-cta-box .cta-icon, .middle-container .product-cta-box a{
		display:table-cell;
		vertical-align:middle;
	}
	
	.middle-container .product-cta-box .cta-icon{
		background:#ececec;
		background:rgb(236,236,236);
		background:rgba(255,255,255,.5);
		height:100%;
		display:inline-block;
		padding:.5em 1em;
		margin-right:1em;
	}
	.middle-container .product-cta-box div:first-child .cta-icon {padding-top:1em;}
	.middle-container .product-cta-box div:last-child .cta-icon{padding-bottom:1em;}

	.middle-container .fine-print{
		float:right;
		padding:.25em .25em 0 0;
		font-size:.8em;
	}

	/*--------------------------------------------------
	:: products/services pages - table styles
	-------------------------------------------------- */
	.middle-container .middle-table-header .four :first-child{padding-left:.25em;}
	.middle-container .middle-table-header .eight :first-child{padding-left:1.25em;}
	
	.middle-container .middle-table p{
		padding-left:.5em;
		padding-right:.5em;
	}
	.middle-container .middle-table .eight p{padding-left:2.5em;}

	.middle-container .middle-table-header{
		border-width:2px;
		border-width:.2rem;
		border-left:none;
		border-right:none;
	}
	.middle-container .middle-table{
		border-bottom-width:1px;
		border-bottom-width:.1rem;
		border-left:none;
		border-right:none;
		border-top:none;
		padding-top:0;
		padding-bottom:0;
	}
	
	.middle-container .middle-table div{
		padding-top:.89em;
		padding-bottom:.89em;
	}
	
	.middle-container .middle-table .eight{background:#fff;}
	
	.middle-container .middle-table p:nth-child(2){padding-top:1em;}

	/*----------------------------------------------------------
	:: products/services pages - tab styles 
	------------------------------------------------------------ */
	.bottom-tabs{
		margin-top:1em;
		margin-bottom:.25em;	
	}
	
	.bottom-tabs .font-gray-333{margin-bottom:.25em;}
	
	.bottom-tabs .tabs-content span{
		display:block;	
		padding:.25em .5em;
	}
	.bottom-tabs .tabs-content .eight span {padding-left:2.5em;}
	
	.bottom-tabs dl.tabs{
		border-width:0 0 2px 0;
		border-width:0 0 .2rem 0;
		border-style:solid;
		height:2.23em; /* 31/14 = 2.21428571 */
	}
	
	.bottom-tabs .tabs dd a {
		text-decoration:none;
		margin-right:.8em;
		background:#dfe1e3;
		background:rgb(223,225,227);
		background:rgba(37, 55, 70, .15);
		height:95%;
		position:relative;
		top:10%;
		border:0;
	}
	.bottom-tabs .tabs dd a.active {
		color:#fff;
		height:106%;
		position:relative;
		top:0;
		border:0;
	}
	
	/*ORANGE*/
	.bottom-tabs.orange-tabs dl.tabs{
		border-color:#ed8b00;
		border-color:rgb(237, 139, 0);
		border-color:rgba(237, 139, 0, 1);
	}
	.bottom-tabs.orange-tabs .tabs dd a.active {
		background:#ed8b00;
		background:rgb(237, 139, 0);
		background:rgba(237, 139, 0, 1);
	}
	
	/*CYAN*/
	.bottom-tabs.cyan-tabs dl.tabs{
		border-color:#00aeef;
		border-color:rgb(0, 174, 239);
		border-color:rgba(0, 174, 239, 1);
	}
	.bottom-tabs.cyan-tabs .tabs dd a.active {
		background:#00aeef;
		background:rgb(0, 174, 239);
		background:rgba(0, 174, 239);
	}

	/*olive*/
	.bottom-tabs.olive-tabs dl.tabs{
		border-color:#a8ad00;
		border-color:rgb(168, 173, 0);
		border-color:rgba(168, 173, 0, 1);
	}
	.bottom-tabs.olive-tabs .tabs dd a.active {
		background:#a8ad00;
		background:rgb(168, 173, 0);
		background:rgba(168, 173, 0, 1);
	}


	/*----------------------------------------------------------
	:: products/services/indices RAFI pages - 
	------------------------------------------------------------ */
	.RAFI-breakdown-chart .row .columns span{
		text-align:center;	
		margin-bottom:.5em;
		width:95%;
		height:2em;
		padding:1em 2.5%;		
		cursor:default;
		display:inline-block;
	}
	
	
	.RAFI-breakdown-chart .row, .RAFI-breakdown-chart .row .columns{
		padding:0;
	}
	
	.bottom-tabs .RAFI-tabs-content .column ul, .bottom-tabs .RAFI-tabs-content .columns ul{
		margin:.5em 0;
		padding-left:1.25em;
		list-style:outside disc;
	}
	
	.RAFI-tabs-content img{
	/*	max-width:48.21em;	*//* 675/14 = 48.2142857 */
	}
	
	.RAFI-tabs-content table{
		margin-top:1em;	
		border:none;
		font-size:14px;
		font-size:1.4rem;
	}
	
	.RAFI-tabs-content td:first-child{
		font-weight:bold;	
		width:25%;
	}

	/*--------------------------------------------------
	:: products/services pages - breadcrumb container
	-------------------------------------------------- */	
	.breadcrumb-container{
		padding-bottom:1em;
		margin-top:1em;	
		height:1.5em;
		background:transparent url(../../src/img/backgrounds/paper-pattern-background.png) 0 0 repeat;
	}
	
/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
	.reveal-modal {
		background: #f4f4f4 url(../img/misc/modal-gloss.png) no-repeat -200px -80px;
		display:none;
	}
	.reveal-modal .container .row{
		padding-top:.5em;
		padding-bottom:.5em;
	}
	.reveal-modal img{
		border:1px solid #CCC;
		margin-top:.5em;
	}
	.reveal-modal .lb_adv_img img{
		border:none;
	}
	.reveal-modal p{
		margin:.6em 0;
	}
	.reveal-modal p.bold{
		margin-bottom:.15em;
	}
	.reveal-modal ul{
		margin-bottom:.6em;
		padding-left:1.25em;
		list-style:outside disc;		
	}
	.reveal-modal .modal-bottom-desc{
		padding:.89em .5em;
	}
	.reveal-modal #modal-subnav a{
		display:block;	
		}
		
	/*--------------------------------------------------
	:: navigation case change for the last nav item "launch"
	-------------------------------------------------- */	
	@media handheld, only screen and (min-width: 768px) and (max-width: 1100px){
		.nav-bar .flyout.right.rightCase0 {left:0; right:auto;}
		.nav-bar .flyout.right.rightCase1 {left:0; right:auto;}
		.nav-bar .flyout.right.rightCase2 {left:0; right:auto;}
		.nav-bar .flyout.right.rightCase3 {left:0; right:auto;}
		.nav-bar .flyout.right.rightCase4 {left:0; right:auto;}
	}

	/*--------------------------------------------------
	:: Mobile - tablet/small window
	-------------------------------------------------- */	

	@media handheld, only screen and (max-width: 1280px) {
		#hero-text h1.heavy-text {
    		/*font-size: 4.8rem;*/
			font-size:40px;
			font-size:4.0rem;
		}
	}
	
	/*--------------------------------------------------
	:: Mobile - tablet/small window
	-------------------------------------------------- */	

	@media handheld, only screen and (max-width: 1152px) {
		#hero-text h1 {
    		/*font-size: 4.8rem;*/
			font-size:40px;
			font-size:4.0rem;
		}
		
		.panel h3 {
			/*font-size: 2.1rem;*/
			font-size: 18px;
			font-size: 1.8rem;
		}
		

	}
	/*--------------------------------------------------
	:: Mobile  - tablet/small window
	-------------------------------------------------- */	

	@media handheld, only screen and (max-width: 1023px) {
		#hero-text h1 {
    		/*font-size: 4.8rem;*/
			font-size:30px;
			font-size:3.0rem;
		}
		
		#hero-text h2 {
			/*font-size: 2.4rem;*/
			font-size:17.5px;	
			font-size:1.75rem;	
		}
		
		.panel h3 {
			/*font-size: 2.1rem;*/
			font-size: 15px;
			font-size: 1.5rem;
		}
		
		.panel p {
			font-size: 12.5px;
			font-size: 1.25rem;
		}
		.panel p a{
			font-size: 10px;
			font-size: 1.0rem;
		}
		
		/*--------------------------------------------------
		:: products/services pages - hero
		-------------------------------------------------- */
	
		
		.hero-content-product .headline-text{
			padding:5% 0 0 0;	
		}
		.hero-content-product h1{
			/*font-size: 48px;*/
			font-size: 42px;
			font-size: 4.2rem;
		}
		.hero-content-product .headline-text.heavy-content{
			padding:3.5% 0 0 0;	
		}
		
		.hero-content-product .headline-text.epic-heavy-content{
			padding:2% 0 0 0;	
		}
		/*/mediaquery*/
	}
	/*/mediaquery*/
	
	@media handheld, only screen and (max-width: 767px) {
		.column, .columns {position:static;}
		h2{	font-size: 16px; font-size: 1.6rem;}

		/*--------------------------------------------------
		:: Landing Page - Header
		-------------------------------------------------- */
		#header { height:7em; }
		#header .row div a, #header .row div a {
			font-size:12px;
			font-size:1.2rem;
		}
		/*Login Logout Container*/
		#header .row div {
			margin-top:2em; 
		}
		/*--------------------------------------------------
		:: Landing Page - Navigation
		-------------------------------------------------- */
		#nav{
			height:100%;
			position:static;
			background:#5c6974;
			background:rgb(92,105,116);
			background:rgba(37, 55, 70, .75);
			background:#5c6974 url(../../src/img/backgrounds/nav-background-mobile.png) 0 0 repeat-x;
		}
		.nav-bar{
			height:100%	;
			margin-bottom:0;
		}
		
		.nav-bar .flyout {
			position:static;
			top:0;	
			width:100%;
		}

		.nav-bar .flyout a {
			position:static;
		}
		
		/*  this is a set of styles specific to the one nav dropdown idea */
		#nav.show-on-phones nav-bar > li > a.main, .nav-bar .flyout a {
			font-size: 14px;
			font-size: 1.4rem;
			padding-left:1.75em;
		}
		
		#nav.show-on-phones .sub-nav-phone p{
			position:static;
			padding-left:1.75em;
			line-height: 2.5em;
			border-bottom: 1px solid #CCC;
			font-size: 14px; font-size: 1.4rem;
			font-weight:bold;
		}
		
		#nav.show-on-phones .sub-nav-phone a{
			position:static;
			padding-left:3em;
			line-height: 2.5em;
			font-size: 14px; font-size: 1.4rem;
		}
		
		/*--------------------------------------------------
		:: Landing Page - Hero
		-------------------------------------------------- */
		
		#hero-text h1 {
			font-size:22px;
			font-size:2.2rem;
			
		}
		#hero-text h1.heavy-text{
			font-size:22px;
			font-size:2.2rem;
		}
		#hero-text h2 {
			font-size:14px;	
			font-size:1.4rem;	
		}
		#hero-text h2{font-weight:bold;}

		#hero-text p{
			font-size:14px;	
			font-size:1.4rem;	
		}
		
		#hero-background-image {
			 height:28.5em;  
			 position:absolute;
			 margin-top:-1px;
		}
		#hero-content {
			height: 26.71em;
		}
		
		#hero-background-image div.bkg-image{ 
			 background-position: 50% 25%;
		}
		
		#hero-content .five{		
			padding-left:0;
			margin-left:0;
			padding-top:1em;
		}
		/*--------------------------------------------------
		:: Landing Page - Secondary Content
		-------------------------------------------------- */
		
		#secondary-content{
		  margin-top:1em; 
		  padding-bottom:2em;
		  }
		
		.secondary-wrap{
		  background-image:url(../../src/img/backgrounds/grid-pattern-background-left-mobile.png);
		  }
		
		.secondary-wrap-right {
		  background-image:url(../../src/img/backgrounds/grid-pattern-background-right-mobile.png);
		  }
		
		/*--------------------------------------------------
		:: Landing Page - Hero Control
		-------------------------------------------------- */
		
		#hero-control {
			margin-top:2em; /* (2 * 13) / 14 = 1.85714286 */
			}
		
		/*Buttons for banner*/
		#hero-control span {
			vertical-align:middle;
			font-size:5em; /*(4.5 * 13) / 14 = 4.17857143*/
			line-height:.6em;	
			}
		
		#hero-control span.banner-on{
			font-size:6.5em; /*(6 * 13) / 14 = 5.57142857*/
			}
		
		/*--------------------------------------------------
		:: Landing Page - News
		-------------------------------------------------- */
		
		#news {
			padding-top:3em; /* (3 * 13) / 14 = 2.78571429 */
			}
		#news .home-news{margin-bottom:1em;}
		#news .news-links:first-child{margin-top:.33em;}
		
		/*--------------------------------------------------
		:: Landing Page - Footer
		-------------------------------------------------- */
		#footer .row div{
			padding-top:.5em; 
		}

		#footer ul {
			margin-bottom: .25em;
		}
		
		#footer a{
			font-size:11px;
			font-size:1.1rem;
		}
		#footer p{
			font-size:10px;
			font-size:1.0rem;
			color:#ddd;
		}
		#footer p.fine-print{
			font-size:8px;
			font-size:.8rem;
			padding-bottom:0;
			margin-bottom:0;
		}
		/*--------------------------------------------------
		:: products/services pages - hero
		-------------------------------------------------- */
		.hero-content-product .headline-text{
			padding:3% 0 0 0;	
		}
		.hero-content-product h1{
			/*font-size: 48px;*/
			font-size: 22px;
			font-size: 2.2rem;
		}

		.hero-content-product.header-bground{ 
			position:static;
			height:16.85em;
			height:12.6em;
			background-position:50% 0;
			background-size:511%;
		}
	
	
		/*--------------------------------------------------
		:: products/services pages - cta section
		-------------------------------------------------- */
		.middle-container .product-cta-box {margin-top:1em;}
		
		
		/*--------------------------------------------------
		:: products/services pages - table styles
		-------------------------------------------------- */
		.middle-container .middle-table-header .four :first-child{padding-left:.25em;}
		.middle-container .middle-table-header .eight :first-child{padding-left:.33em;}
		
		.middle-container .middle-table p{
			padding-left:.25em;
			padding-right:.25em;
		}
		.middle-container .middle-table .eight p{padding-left:.33em;}

		/*----------------------------------------------------------
		:: products/services pages - tab styles 
		------------------------------------------------------------ */
		.bottom-tabs dl.tabs dd a {padding:0 2px 0 1px;}
		.bottom-tabs .tabs-content .eight span {
			padding-left: .5em;
		}
		.bottom-tabs .tabs dd a {
			margin-right:.25em;
			top:17%;
			font-size:12px;
			font-size:1.2rem;
		}
		.bottom-tabs .tabs dd a.active {top:7%;}
		
		/*--------------------------------------------------
		:: products/services pages - breadcrumb container
		-------------------------------------------------- */	
		.breadcrumb-container{
			font-size:12px;
			font-size:1.2rem;
			padding-bottom: 1.25em;
		}
	 } /*/mediaquery*/