/* RESET
---------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}body{line-height: 1;}ol, ul{list-style:none}blockquote, q{quotes:none}blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse; border-spacing:0} .clear {clear:both;} .left {float:left;} .right {float:right;} .center {text-align: center;} header, footer, article, aside, section, nav {display: block;}


/* Reverses email address in attempt to hide from search engines, spam*/
span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}


/* chart legend block colors */
.foo {
  float: ;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #ffcc80;
}

.purple {
  background: #e68a00;
}

.wine {
  background: #ffad33;
}



/* TYPOGRAPHY
---------------------------------------------------------------------- 2d3b73  */

	body { 
		font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 14px;
		line-height: 22px;
		color: #666666;
		min-width: 1100px;
		background: #2d3b73;
	}
	a { color: #006699; text-decoration: none; }  /* CHANGE LINK COLOR  */
	a:hover { text-decoration: underline; }

	.landing-page a {
		color: #4BE6C1;		/* former color  fcb042 */
	}
	.profile a {
		color: #4BE6C1;		/* former color  799bcf */
	}
	
	p { padding-bottom: 15px; }
	small { font-size: 90%; line-height: 120%; }
	.larger { font-size: 120%; letter-spacing: 0.05em; }
	
	h1 { font-size: 30px; line-height: 140%; margin-bottom: 15px; }
	h2 { font-size: 30px; font-weight: 200; color: #999; line-height: 140%; margin-bottom: 10px; }
	h2.alt { font-size: 28px; }
	h3 { font-size: 20px; font-weight: 300; line-height: 140%; margin-bottom: 15px; }
	h4 { font-size: 18px; font-weight: 200; line-height: 140%; margin-bottom: 10px; }
	h5 { font-size: 30px; line-height: 140%; margin-bottom: 15px; }
	
	h6 { font-size: 36px; font-weight: 100; line-height: 70%; margin-bottom: 0px; }

	.bold {
		font-weight: 500;
	}


/* STRUCTURE
---------------------------------------------------------------------- */
	div.wrap { width: 1020px; margin: 0px auto; padding: 30px 0px; }
	div.container { width: 960px; margin: 0px auto;}
	.row { margin-left: -24px; }
	.row:before, .row:after { display: table; line-height: 0; content: ""; }
	.row:after { clear: both; }
	.span0, .span1, .span2, .span3, .span4, .third, .two-thirds, .signup { float: left; margin-left: 24px; }
	.span0 { width: 70px; } /* change this for more room with the YE and YE+ logo text */
	.span1 { width: 250px; } /* change this for background width */
	.spanlogin { width: 425px; } /* change this for login box background width */
	.span2 { width: 450px; }
	.span3 { width: 714px; }
	.span4 { width: 960px; }
	.third { width: 304px; }
	.signup { width: 200px; margin-bottom: 125px; }/*  trying to get words next to signup box on yeplus page to the top  */
	.two-thirds { width: 632px; }
	.bottom-0 { margin-bottom: 0px !important; }
	.bottom-10 { margin-bottom: 10px !important; }
	.bottom-15 { margin-bottom: 15px !important; }
	.bottom-20 { margin-bottom: 20px !important; }
	.bottom-25 { margin-bottom: 25px !important; }
	.bottom-30 { margin-bottom: 30px !important; }
	.bottom-35 { margin-bottom: 35px !important; }
	.bottom-40 { margin-bottom: 40px !important; }
	
	
/* COMMON STYLES
----------------------------------------------------------------------  */
	.clearfix { clear: both; }
	.clearafter:after { display: block; height:0; visibility:hidden; content:'.'; clear:both; }
	
	.tan-bg { background: #f4f4ec; }
	.gray-bg { background: #f4f3f3; }
	.blue-bg { background: #eef8f8; }
	.orange { color: #cc9900 !important; }	/* used for Sign IN and UP text for YE+ */
	.darkorange { color: #ef5805;}
	.wine { color: #573a3f; }
	
	.padding-10 { padding: 10px; }
	.padding-20 { padding: 20px; }
	.padding-30 { padding: 30px; }
	.no-bottom-padding { padding-bottom: 0px; }
	.10-bottom-padding { padding-bottom: 10px; }
	.15-bottom-padding { padding-bottom: 15px; }
	.20-bottom-padding { padding-bottom: 20px; }
	.no-top-padding { padding-top: 0px; }
	.10-top-padding { padding-top: 10px; }
	.15-top-padding { padding-top: 15px; }
	.20-top-padding { padding-top: 20px; }
	
	.no-lineheight { line-height: 100%; }
	
	.text-left { text-align: left; }
	.text-center { text-align: center; }
	.text-right { text-align: right; }
	
	ul.styled { list-style: disc; margin-left: 20px; }
	ul.styled li { padding-bottom: 5px; }
	
	ul.inline > li,
	ol.inline > li {
		display: inline-block;
		*display: inline;
		padding: 0px 5px;
		*zoom: 1;
	}
	
	.no-top-border { border-top: none !important; }
	.no-bottom-border { border-bottom: none !important; }
	
	div.master-wrap { background: #fff; padding-bottom: 10px;} /* moves up/down the footer from the bottom of page? */
	
	.btn {
		border: none;
		background: #ccc;
		color: #fff;
		padding: 8px 15px;
		font-size: 16px;
		cursor: pointer;
	}
	.btn:hover { background: #aaa; text-decoration: none; }
	.btn-blue { background: #55b9b9; }
	.btn-blue:hover { background: #35b3b3; }
	
	h3.special {
		background: #f4f3f3;
		color: #333;
		padding: 10px 0px 10px 30px;
		font-size: 18px;
		font-weight: 500;
		width: 100%;
		margin-left: -30px;
		margin-bottom: 20px;
	}
	
.user-bar {
	height: 54px;
}
	
	
	
/* HELP BOXES
---------------------------------------------------------------------- */
	div.mask {
		display: none;
		position: fixed;
		top: 0px; left: 0px;
		width: 100%; height: 100%;
		background: rgba(255,255,255,0.8);
		z-index: 900;
		cursor: pointer;
	}
	div.modal-wrap { position: relative; }
	div.modal {
		display: none;
		position: absolute;
		background: #fff;
		z-index: 1000;
		padding: 15px;
		border: 10px solid #5d62b5; /* change color of the border on help box */
		border-radius: 10px;
	}
	div.modal h5 { font-size: 13px; text-transform: uppercase; font-weight: 400; margin-bottom: 5px;}
	div.modal p { font-size: 13px; padding-bottom: 10px; color: #888; }
	div.modal li { font-size: 13px; padding-bottom: 10px; color: #888; }/*  added to control wackiness of li  */
	div.modal p:last-child { padding-bottom: 0px; }
	div.modal.top:after,
	div.modal.bottom:after,
	div.modal.right:after,
	div.modal.left:after {
		display: block;
		content: '';
		position: absolute;
		width: 0; height: 0; 
	}
	div.modal.top:after {
		top: -10px; left: 50%;
		margin-left: -10px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #fff;
	}
	div.modal.bottom:after {
		bottom: -10px; left: 50%;
		margin-left: -10px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #fff;
	}
	div.modal.right:after {
		top: 50%; right: -10px;
		margin-top: -10px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #fff;
	}
	div.modal.left:after {
		top: 50%; left: -10px;
		margin-top: -10px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 10px solid #fff;
	}
	


/* LINKS (DEV)
---------------------------------------------------------------------- */
	div.links {
		background: #ccc;
		padding: 5px 0px;
		border-bottom: 1px solid #333;
	}
	div.links ul li { display: inline; padding-right: 10px; }
	div.links ul li a { color: #fff; }



/* HEADER
---------------------------------------------------------------------- */
	div.header { 
		background: #66ccff; 	/*  top header color behind drop downs blue #2d3b73 */
		color: #fff;
		height: 70px;
	}
	div.header h1 { margin: 0px; padding: 0px; }
	div.header h1 a {
		
		display: block;
		width: 374px; height: 70px;
		text-indent: -9999px; font-size: 0;
		background: url('images/ye_logo.png') no-repeat;
		float: left;
		
	}
	div.header h1.plus a { background: url('images/ye_logo_plus.png') no-repeat; }
	div.header p {
		background: url('images/header_text.png') no-repeat;
		width: 407px; height: 70px;
		text-indent: -9999px;
		float: right;
		padding-bottom: 0px;
		
		background: #4BE6C1; 
	}
	
	ul.side-nav { 
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
		-ms-transform: rotate(-90deg);	
		transform: rotate(-90deg);
		position: absolute;
		top: 300px;
		left: -150px;
	}
	ul.side-nav li { display: inline; }
	ul.side-nav li a {
		display: block;
		float: left;
		background: #f4f3f3;
		color: #cc9900;				/* text color for side tabs former color  799bcf */
		font-size: 18px;
		text-transform: uppercase;
		padding: 8px 15px;
		margin-left: 25px;
	}
	ul.side-nav li a:hover {
		text-decoration: none;
		background: #eee;	
	}
	ul.side-nav li.active a {
		border: 1px solid #ccc;
		background: #fff;
		color: #555;
	}
	.landing-page ul.side-nav li a {
		color: #4BE6C1;
	}
	.profile ul.side-nav li a {
		color: #799bcf;
	}
	
	
/* LANDING PAGE
---------------------------------------------------------------------- */
	div.user-bar p { 
		line-height: 54px; 
		color: #999; 
		font-weight: 400; 
		float: left;
		padding-bottom: 0px;
	}
	div.user-bar ul { float: left; }
	div.user-bar ul li { 
		line-height: 54px; 
		display: inline;
	}
	div.user-bar ul li.active a { color: #eea303;}
	
	div.user-bar h4 {
		float: left;
		line-height: 54px;
		font-weight: 400;
		margin: 0px;
	}
	div.user-bar a.help { 
		display: block;
		width: 333px; height: 54px;
		text-indent: -9999px; font-size: 0;
		background: url('images/help_button_2-blue.png') no-repeat;
		float: right;
	}
	.profile div.user-bar a.help { 
		background: url('images/help_button_2-blue.png') no-repeat;
	}
	
	
	/* (Landing) Tools
	---------------------------------------------------------------------- */
		div.tools { 
			border: 1px solid #ccc;
			position: relative;
			margin-bottom: 15px;
		}
		

/*
		select.region {
			width: 220px;
			padding: 0px 10px 0px 15px;
			border: 0;
			border-radius: 0;
			-webkit-appearance: none;
			-moz-appearance: normal;
			appearance: normal;
			background: #55b9b9 url('images/select_arrow.png') right center no-repeat;
			color: #fff;
			cursor: pointer;
			height: 35px;
			font-weight: 300;
		}
		select.region:hover { background-color: #4aa2a2; }
*/
		a.ye-regions-link { 
			display: block;
			background: #fdebb7;
			width: 100%;
			height: 35px;
			font-size: 16px;
			line-height: 35px;
			text-align: center;
			border: 1px solid #ccc;
			font-weight: 400;
		}
		
		
		
		
	div.dropdown-wrap {
			width: 220px;
			height: 35px;
			overflow: hidden;
			
			background: #006699 url('images/select_arrow-blue.png') right center no-repeat; /* CHANGE DROPDOWN BACKGROUND COLOR */
		}
		div.dropdown-wrap:hover { background-color: #0099e6; } /* CHANGE DROPDOWN BACKGROUND ROLOOVER COLOR */
		
		div.dropdown-wrap select {
			background: transparent;
			width: 250px;
			height: 35px;
			padding: 0px 10px 0px 15px;
			font-size: 16px;
			line-height: 35px;
			font-size: 16px;
			line-height: 35px;
			color: #fff;
			border: 0;
			border-radius: 0;
			-webkit-appearance: none;
			cursor: pointer;
		}
		
		div.dropdown-wrap select option { color: #222; } /* for all browsers in Windows, which blows */
		
		@-moz-document url-prefix() { /* Because Firefox is the new IE */
			div.dropdown-wrap select { padding: 6px 10px 0px 15px; }
		}
		
		.profile div.dropdown-wrap {
			background: #799bcf url('images/select_arrow-red.png') right center no-repeat;
		}
		
		
		
		/*buttons for home page login*/

a.buttonIG {
		display:block;
		margin: 0 auto;
		width: 300px;
		height: 50px;
		line-height: 50px;
		background: #00F;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
		font-size: 26px;
		font-family: Arial;
		font-weight: bold;	
		border:0px solid #000000;
		border-radius:0px;
		padding: 0px 0px 0px 0px;
	}
	a.buttonIG:hover{ background: #F4A651; }
		
		
		
		div.year-select-master {
			width: 100%;
			height: 98px;
			/* background: green; */
			position: relative;
			margin: -10px 0px 10px 0px;
		}
		a.prev-year-arrow,
		a.next-year-arrow {
			display: block;
			position: absolute;
			z-index: 800;
			top: 31px;
			background: #fff url('images/year_arrows-blue.png') no-repeat;
			/* background: purple; */
			height: 36px; width: 27px;
			text-indent: -9999px; font-size: 0px;
			opacity: 0.8;
		}
		
		a.prev-year-arrow { left: 0px; }
		a.next-year-arrow { right: 0px; background-position-x: -25px; }
		a.prev-year-arrow:hover,
		a.next-year-arrow:hover { opacity: 1; }
		a.prev-year-arrow.disabled,
		a.next-year-arrow.disabled { opacity: 0.4; cursor: default; }

		.profile a.prev-year-arrow,
		.profile a.next-year-arrow {
			background: #fff url('images/year_arrows-blue.png') no-repeat;
		}
		.profile a.next-year-arrow { right: 0px; background-position-x: -25px; }
		
		div.year-select-wrap {
			/* background: red; */
			position: absolute;
			left: 22px;
			height: 100%;
			width: 900px;
			padding: 0px 8px;
			overflow: hidden;
		}
		
		
		
		div.year-select { 
			position: relative;
			height: 36px;
			min-width: 900px;
		}
		
		div.year-wrap {
			width: 900px;
			/* background: yellow; */
			height: 36px;
			overflow: hidden;
			position: absolute;
			top: 31px;
			z-index: 2;
			overflow: hidden;
		}
		div.year-select ul { 
			list-style: none; 
			margin: 0px; padding: 0px;
			width: 2000px;
			height: 31px;
			-webkit-user-select:none;
			-moz-user-select:none;
			
			margin-left: -300px; /* This sets year scroll offset (60px/ year) */
		}
		div.year-select ul li { 
			display: block;
			padding: 0px;
			float: left;
			width: 60px; 
			height: 36px;
			line-height: 36px;
			text-align: center;
		}
		div.year-select ul li.q {
			background: rgba(205,200,185,0.4);
		}
		.ui-slider {
			position: absolute;
			top: 31px;
			left: 0px;
			text-align: left;
			width: 0px; /* This is set dynamically */
			height: 36px; 
			background: #fff;
			/* margin: 0px auto; */
			margin-left: -300px; /* This sets year scroll offset (60px/ year) */
		}
		.ui-slider-range {
			position: absolute;
			z-index: 1;
			display: block;
			border: 0;
			background: #e6e1d2 url('images/year_move_handle-blue.png') center top no-repeat;
			top: 0px;
			height: 100%;
			height: 67px; top: -31px;
			padding-right: 1px;
			cursor: pointer;
			overflow: hidden;
		}
		.profile .ui-slider-range {
			background: #e6e1d2 url('images/year_move_handle-blue.png') center top no-repeat;
		}
		.ui-slider-range > div { 
			position: absolute;
			top: 0px;
			background: #f4f4ec;
			width: 1000px; height: 31px;
			cursor: default;
		}
		.ui-slider-range .mask-1 { right: 50%; margin-right: 12px; }
		.ui-slider-range .mask-2 { left: 50%; margin-left: 12px; }
		
		.ui-slider-handle,
		.ui-slider-drag {
			position: absolute;
			z-index: 2;
			background: url('images/year_handles-blue.png') center bottom;
			height: 31px; width: 18px;
			bottom: -31px;
			margin-left: -9px;
			cursor: pointer;
			z-index: 800;
		}
		.profile .ui-slider-handle,
		.profile .ui-slider-drag {
			background: url('images/year_handles-blue.png') center bottom;
		}
		.ui-slider-handle:nth-of-type(1) { margin-left: -8px; }
		.ui-slider-handle:nth-of-type(2) { margin-left: -10px; }
		.ui-slider-handle:focus { outline: none !important; }
		
		.ui-slider-drag {
			background-position: left top;
			top: -31px; left: 50%;
			margin-left: -9px;
			z-index: 1000;
		}
		
		a.go,
		a.go-blue {
			display: block;
			font-size: 16px;
			font-weight: 300;
			line-height: 35px;
			text-align: center;
			background: #0099e6; /* red */
			color: #fff;
			height: 35px; width: 50px;
			/* 
position: absolute;
			bottom: 0px; left: 50%;
			margin-left: -25px;
 */
		}
		a.go:hover,
		a.go-blue:hover { 
			background: #0099e6; /* change for blue GO button */
			text-decoration: none;
		}
		a.go-blue {
			background: #0099e6; /*blue */

		}
		a.go-blue:hover {
			background: #fff;
		}
		
		
	/* (Landing) Tab Bar
	---------------------------------------------------------------------- */
	div.tab-bar { padding: 0px; }
	div.tab-bar ul { 
		margin-left: 30px; 
		position: relative;
		top: 1px;
	}
	div.tab-bar ul li {
		display: block;
		float: left;
		background: transparent;
		border: 1px solid transparent;
		margin: 0px;
		padding: 0px 25px;
		height: 40px;
		font-size: 18px;
		line-height: 40px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: #799bcf;
		cursor: pointer;
	}
	div.tab-bar ul li:hover { 
		background: #eee; 
		border-bottom: 1px solid #ccc; 
	}
	div.tab-bar ul li.active {  
		background: #fff; 
		border: 1px solid #ccc; 
		border-bottom: 1px solid #fff; 
		color: #666666;
	}
	
	
	
	
	/* (Landing) Content & Charts
	---------------------------------------------------------------------- */
	div.content { border: 1px solid #ccc; }
	
	div.content div.home { position: relative; }
	div.content div.home a.key-help {
		display: block;
		position: absolute;
		top: -30px; right: 0px;
		background: url('../images/key_help.png') no-repeat;
		height: 73px; width: 113px;
		text-indent: -9999px; font-size: 0px;
	}
	
	div.content h3.region { 
		font-size: 18px;
		font-weight: 500;
		color: #111;
		width: 100%;
		padding: 8px 0px 8px 30px;
		position: relative;
		left: -30px;
	}
	div.content div.change-overview { position: relative; }
	div.content div.change-overview h4#indicator-title { text-transform: uppercase; }
	
	div.content div.change-overview h2#indicator-number { 
		position: absolute;
		right: 0px; top: 0px;
		text-align: right;
	}
	
	div.content div.change-overview h2#indicator-number2 { 
		position: absolute;
		right: 0px; top: 40px;
		text-align: right;
	}
	
	div.content .key-color { color: #ef5805; }
	div.content .key-bg { background: #ef5805; }
	div.content .transparent { opacity: 0.5; }
	
	div.content div.change-overview h2 {
		font-size: 36px;
		font-weight: 600;
		line-height: 100%;
		margin-top: 13px;
		position: relative;
		left: -40px;
	}
	
	.profile div.content div.change-overview h2#indicator-number {
		position: static; 
		right: auto; 
		top: auto; 
		text-align: left; 
		left: 0;
}

.profile div.content div.change-overview h2#indicator-number2 {
		position: static; 
		right: auto; 
		top: auto; 
		text-align: left; 
		left: 0;
}
	
	div.content div.overview {
		padding: 20px 0px;
		font-size: 16px;
		line-height: 125%;
		font-weight: 200;
	}
	
	div.content div.chart-wrap { 
		padding: 20px; 
		min-height: 200px; 
		max-height: 255px;
	}
	div.content div.chart-wrap p { 
		font-size: 16px; 
		font-weight: 300; 
		text-transform: uppercase; 
	}
	div.content div.chart-wrap h4 {
		font-weight: 200 !important;
		font-size: 16px;
	}
	div.content div.chart-wrap h4 strong {
		font-weight: 400;
		color: #333;
	}
	div.content div.chart-wrap h4.key-color {
		font-size: 16px;
		margin: -10px 0px 0px 0px;
	}
	
	a.go,
		a.go-blue {
			display: block;
			font-size: 16px;
			font-weight: 300;
			line-height: 35px;
			text-align: center;
			background: #732436; /* red */
			color: #fff;
			height: 35px; width: 50px;
		/* 
	position: absolute;
			bottom: 0px; left: 50%;
			margin-left: -25px;
 */
		}
		a.go:hover,
		a.go-blue:hover { 
			background: #c23d5c;
			text-decoration: none;
		}
		a.go-blue {
			background: #0099e6; /* THIS IS ACTIVE blue */

		}
		a.go-blue:hover {
			background: #0077b3; /* THIS IS ACTIVE blue */
		}
	
/* 2015 Landing page
------------------------------------------------------------------------- */

.landing-page div.tools {
	font-size: 16px;
}
.cols-wrap {
	max-width: 1020px;
	margin: 0 auto;
	font-size: 16px;
}
.two-col-landing {
	width: 40%;
	position: relative;
	padding: 24px 48px;
	float: left;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	min-height: 160px;
}
.two-col-landing:nth-child(2n) {
	border-left: 0;
	float:right;
}
div.wrap.no-top-padding {
	padding-top: 0;
}
.boxheader {
	padding: 20px 24px 8px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 24px;
}
.boxheader h2 {
	display: inline-block;
}
.boxheader a {
	display: inline-block;
	float: right;
	font-weight: 500;
	font-size: 16px;
	padding-top: 12px;
}

.bottom-links {
	width: 1020px;
	margin: 0 auto;
	padding: 0 0 24px 0;
}
.bottom-links a {
	display: inline-block;
	padding-left: 100px;
	font-weight: 600;
	float: right;
}
	
	
	div.chart { 
		position: relative; 
		width: 260px;
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
		-ms-transform: rotate(-90deg);	
		transform: rotate(-90deg);	
		top: -95px;
		left: 100px;
	}
	div.chart div.line {
		height: 320px;
		border-left: 1px solid #888;
		position: absolute;
		top: -14px;
		-webkit-transition: all 300ms ease-in;
		   -moz-transition: all 300ms ease-in;
		        transition: all 300ms ease-in;
	}
	div.chart li { 
		clear: both; 
		margin-bottom: 20px;
	}
	div.chart h5 { 
		font-size: 12px; 
		font-weight: 200; 
		text-transform: uppercase;
		width: 50px;
		margin-right: 10px;
		line-height: 30px;
		text-align: right;
		float: left;
	}
	div.chart div.bar {
		height: 30px;
		width: 100px;
		float: left;
		-webkit-transition: all 300ms ease-in;
		   -moz-transition: all 300ms ease-in;
		        transition: all 300ms ease-in;
	}
	div.chart span {
		display: block;
		position: relative;
		top: 4px;
		width: 30px;
		float: left;
		-webkit-transform: rotate(90deg); 
		-moz-transform: rotate(90deg);	
		-ms-transform: rotate(90deg);	
		transform: rotate(90deg);	
		-webkit-transition: all 300ms ease-in;
		   -moz-transition: all 300ms ease-in;
		        transition: all 300ms ease-in;
	}
	
	div.chart.gain-loss { top: -105px; }
	div.chart.gain-loss li { margin-bottom: 5px; }
	div.chart.gain-loss h5 { line-height: 50px; }
	div.chart.gain-loss div.line { height: 355px; }
	div.chart.gain-loss div.bars { float: left; }
	div.chart.gain-loss div.bar { height: 25px; float: left; }
	div.chart.gain-loss span { font-size: 12px; top: 6px;}
	
	div.chart.industry { }
	
	
	/* years columns-----------------------------------------------------*/
	

	year1 {
    position: relative;
    padding-left: 318px;
    top: 150px;
	}
	
	year2 {
    position: absolute;
   	padding-left: 100px;
    top: 150px;
	}
	
	/*indicators change column-----------------------------------------------------*/
	

	div.content ul.indicators { padding-left: 24px; }
	div.content ul.indicators li {
		background: #799bcf;
		font-size: 18px;
		height: 38px;
		line-height: 38px;
		
		height: 30px;
		line-height: 30px;
		
		text-transform: uppercase;
		margin-bottom: 16px;
		margin-bottom: 11px;
		margin-bottom: 8px;
		padding: 0px 15px;
		color: #fff;
		position: relative;
		cursor: pointer;
	}
	div.content ul.indicators li:hover { background: #6c89b7; }
	
	div.content ul.indicators li span {
		background: red;
		width: 65px;
		padding-left: 20px;
		position: absolute;
		top: 0px; right: 0px;
	}
	div.content ul.indicators li div.arrow {
		display: none;
		position: absolute;
		top: 0px; left: -24px;
		border-top: 19px solid transparent;
		border-bottom: 19px solid transparent; 
		border-right: 24px solid #ef5805;
		
		top: 0px; left: -20px;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent; 
		border-right: 20px solid #ef5805;
		

		
	
	}
	
	
	/*to make this work for two columns finally, added div.content line to bottom of each indictor for right: 86px*/
	
	div.content ul.indicators li.active div.arrow { display: block; }
	
	
	
	
	div.content ul.indicators li.all-businesses span { background: #ef5805; } <!--background behind percentage-->
	div.content ul.indicators li.all-businesses div.arrow { border-right-color: #ef5805; }
	.key-color.all-businesses { color: #ef5805 !important; }
	.key-bg.all-businesses { background-color: #ef5805 !important; }
	div.content ul.indicators li.all-businesses span.change { right: 86px; }
	
	div.content ul.indicators li.resident-businesses span { background: #a885b0; }
	div.content ul.indicators li.resident-businesses div.arrow { border-right-color: #a885b0; }
	.key-color.resident-businesses { color: #a885b0 !important; }
	.key-bg.resident-businesses { background-color: #a885b0 !important; }
	div.content ul.indicators li.resident-businesses span.change { right: 86px; }
	
	div.content ul.indicators li.nonresident-businesses span { background: #d98c05; }
	div.content ul.indicators li.nonresident-businesses div.arrow { border-right-color: #d98c05; }
	.key-color.nonresident-businesses { color: #d98c05 !important; }
	.key-bg.nonresident-businesses { background-color: #d98c05 !important; }
	div.content ul.indicators li.nonresident-businesses span.change { right: 86px; }
	
	div.content ul.indicators li.noncommercial-businesses span { background: #584eb9; }
	div.content ul.indicators li.noncommercial-businesses div.arrow { border-right-color: #584eb9; }
	.key-color.noncommercial-businesses { color: #584eb9 !important; }
	.key-bg.noncommercial-businesses { background-color: #584eb9 !important; }
	div.content ul.indicators li.noncommercial-businesses span.change { right: 86px; }
	
	div.content ul.indicators li.All-Sales span { background: #9d9003; }
	div.content ul.indicators li.All-Sales div.arrow { border-right-color: #9d9003; }
	.key-color.All-Sales { color: #9d9003 !important; }
	.key-bg.All-Sales { background-color: #9d9003 !important; }
	div.content ul.indicators li.All-Sales span.change { right: 86px; }
	
	div.content ul.indicators li.Sales-Per-Employee span { background: #dc6993; }
	div.content ul.indicators li.Sales-Per-Employee div.arrow { border-right-color: #dc6993; }
	.key-color.Sales-Per-Employee { color: #dc6993 !important; }
	.key-bg.Sales-Per-Employee { background-color: #dc6993 !important; }
	div.content ul.indicators li.Sales-Per-Employee span.change { right: 86px; }
	
	div.content ul.indicators li.Sales-Per-Establishment span { background: #5d6e88; }
	div.content ul.indicators li.Sales-Per-Establishment div.arrow { border-right-color: #5d6e88; }
	.key-color.Sales-Per-Establishment { color: #5d6e88 !important; }
	.key-bg.Sales-Per-Establishment { background-color: #5d6e88 !important; }
	div.content ul.indicators li.Sales-Per-Establishment span.change { right: 86px; }
	
	div.content ul.indicators li.change span { background: #892c03; }
	div.content ul.indicators li.change div.arrow { border-right-color: #892c03; }
	.key-color.change { color: #892c03 !important; }
	.key-bg.change { background-color: #892c03 !important; }
	div.content ul.indicators li.change span.change { right: 86px; }
	
	div.content ul.indicators li.Stage-Two span { background: #557532; }
	div.content ul.indicators li.Stage-Two div.arrow { border-right-color: #557532; }
	.key-color.Stage-Two { color: #557532 !important; }
	.key-bg.Stage-Two { background-color: #557532 !important; }
	div.content ul.indicators li.Stage-Two span.change { right: 86px; }
	
	div.content ul.indicators li.Stage-Three span { background: #806a52; }
	div.content ul.indicators li.Stage-Three div.arrow { border-right-color: #806a52; }
	.key-color.Stage-Three { color: #806a52 !important; }
	.key-bg.Stage-Three { background-color: #806a52 !important; }
	div.content ul.indicators li.Stage-Three span.change { right: 86px; }

	div.content ul.indicators li.All-Jobs span { background: #005480; }
	div.content ul.indicators li.All-Jobs div.arrow { border-right-color: #005480; }
	.key-color.All-Jobs { color: #005480 !important; }
	.key-bg.All-Jobs { background-color: #005480 !important; }
	div.content ul.indicators li.All-Jobs span.change { right: 86px; }
	
	div.content ul.indicators li.closings span { background: #d2a801; }
	div.content ul.indicators li.closings div.arrow { border-right-color: #d2a801; }
	.key-color.closings { color: #d2a801 !important; }
	.key-bg.closings { background-color: #d2a801 !important; }
	div.content ul.indicators li.closings span.change { right: 86px; }
	
	div.content ul.indicators li.Stage-Four span { background: #be0523; }
	div.content ul.indicators li.Stage-Four div.arrow { border-right-color: #be0523; }
	.key-color.Stage-Four { color: #be0523 !important; }
	.key-bg.Stage-Four { background-color: #be0523 !important; }
	div.content ul.indicators li.Stage-Four span.change { right: 86px; }
	
	/*gregg added for Total-Gained/loss indicators */
	div.content ul.indicators li.Total-Gained span { background: #595959; }
	div.content ul.indicators li.Total-Gained div.arrow { border-right-color: #595959; }
	.key-color.Total-Gained { color: #595959 !important; }
	.key-bg.Total-Gained { background-color: #595959 !important; }
	div.content ul.indicators li.Total-Gained span.change { right: 86px; }
	
	div.content ul.indicators li.Total-Lost span { background: #60cb54; }
	div.content ul.indicators li.Total-Lost div.arrow { border-right-color: #60cb54; }
	.key-color.Total-Lost { color: #60cb54 !important; }
	.key-bg.Total-Lost { background-color: #60cb54 !important; }
	div.content ul.indicators li.Total-Lost span.change { right: 86px; }
	
	/*gregg added for Self-Employed/macro indicators */
	div.content ul.indicators li.Self-Employed span { background: #411d42; }
	div.content ul.indicators li.Self-Employed div.arrow { border-right-color: #411d42; }
	.key-color.Self-Employed { color: #411d42 !important; }
	.key-bg.Self-Employed { background-color: #411d42 !important; }
	div.content ul.indicators li.Self-Employed span.change { right: 86px; }
	
	div.content ul.indicators li.Stage-One span { background: #00bfff; }
	div.content ul.indicators li.Stage-One div.arrow { border-right-color: #00bfff; }
	.key-color.Stage-One { color: #00bfff !important; }
	.key-bg.Stage-One { background-color: #00bfff !important; }
	div.content ul.indicators li.Stage-One span.change { right: 86px; }
	
	/* for two column styles */
	.profile div.content ul.indicators li span.first {
		right: 86px;
		border-right: 1px solid #799bcf;
	}

	.profile div.content ul.indicators li.spacer span  {
		width: 65px;
		padding-left: 20px;
		position: absolute;
		top: 0px; right: 0px;
		background: #eef8f8;
		color: #666;
		height: 4px;
	}
	.profile div.content ul.indicators li.spacer span.first {
		width: 65px;
		right: 86px;
		border-right: 1px solid #fff;
		background: #f4f4ec;
		color: #666;
	}
	.profile div.content ul.indicators li.spacer.data  {
		height: 25px;
	}
	.profile div.content ul.indicators li.spacer.data span {
		font-size: 14px;
		height: 25px;
	}
	div.content ul.indicators li.heading-item {
		background: transparent;
		color: #000;
		font-weight: 500;
		padding: 0;
		margin: 0;
		cursor: default;
	}
	div.content ul.indicators li.heading-item h4 {
		font-weight: 500;
		text-transform: none;
		margin: 0;
		float:left;
		z-index: 1;
		position: relative;
	}
	
	/*added from new CSS */
	div.content ul.indicators li.spacer {
		background:#fff;
		height:4px;
		cursor: default;
	}
	div.content ul.indicators li.spacer:hover,
	div.content ul.indicators li.heading-item:hover {
		background: transparent;
	}	
	
	
	
	.profile div.content ul.indicators li.heading-item span.first {
		background: #f4f4ec;
		border-right: 1px solid white;
	}
	

	
	
	/* About Page
	---------------------------------------------------------------------- */
	div.about { color: #999; }
	div.about h3 {
		background: #f4f3f3;
		color: #333;
		padding: 10px 20px;
		font-size: 18px;
		font-weight: 500;
	}
	div.about ul { 
		list-style: disc;
		margin-left: 20px;
	}
	
	
	
	
	/* Signup & Login
	---------------------------------------------------------------------- */
	div.login-box { font-size: 14px; line-height: 18px; }
	div.login-box li { padding-bottom: 3px; }
	
	form.signup {
		float: left;
		width: 420px;
		margin-right: 46px;
		margin-bottom: 30px;
	}
	form.signup input[type="text"],
	form.signup input[type="email"],
	form.signup input[type="password"],
	form.login input[type="text"], /* HAD TO ADD TEXT TYPE TO MAKE THE INPUT BOXES SAME SIZE AS EMAIL AND PASSWORD */
	form.login input[type="email"],
	form.login input[type="password"] {
		border: 1px solid #ccc;
		padding: 8px 15px;
		font-size: 14px;
		font-weight: 200;
		width: 164px;
		margin-bottom: 15px;
	}
	form.signup input[type="submit"],
	form.login input[type="submit"] {
		background: #55b9b9;
		padding: 8px 15px;
		color: #fff;
		border: 0px;
		font-size: 14px;
		cursor: pointer;
		margin-right: 10px;
	}
	form.signup input[type="submit"]:hover,
	form.login input[type="submit"]:hover {
		background: #35b3b3;
	}
	
	form.login input[type="email"],
	form.login input[type="text"], /* HAD TO ADD TEXT TYPE TO MAKE THE INPUT BOXES SAME SIZE AS EMAIL AND PASSWORD */
	form.login input[type="password"] { width: 350px; } /*changes size of email and password login boxes */
	
	form.signup input[name="address"] { width: 384px; }
	form.signup input[name="state"] { width: 50px; }
	form.signup input[name="zip"] { width: 60px; }
	form.signup input[name="contactsorder"] { width: 600px; }
	
	form.signup input[name="firstname"],
	form.signup input[name="lastname"],
	form.signup input[name="city"],
	form.signup input[name="state"],
	form.signup input[name="organization"],
	form.signup input[name="email"],
	form.signup input[name="password"],
	form.signup input[name="question"] {
		margin-right: 20px;
	}
	form.signup input[name="country"] { margin-right: 100px; }

	::-webkit-input-placeholder {
		color: #ccc;
		font-size: 14px;
		font-weight: 300;
		line-height: 18px;
		text-transform: uppercase;
	}
	:-moz-placeholder { /* Firefox 18- */
		color: #ccc;
		font-size: 14px;
		font-weight: 300;
		line-height: 18px;
		text-transform: uppercase; 
	}
	::-moz-placeholder {  /* Firefox 19+ */
		color: #ccc;
		font-size: 14px;
		font-weight: 300;
		line-height: 18px;
		text-transform: uppercase; 
	}
	:-ms-input-placeholder {  
		color: #ccc;
		font-size: 14px;
		font-weight: 300;
		line-height: 18px;
		text-transform: uppercase;  
	}
	form.signup span.password-match {
		display: none;
		color: orange;
		float: right;
		padding-top: 10px;
	}
	
	
	/* D&B 
	---------------------------------------------------------------------- */
	div.db-header { padding-bottom: 0px; }
	div.db-region h3,
	div.db-select h3,
	div.db-review h3,
	div.db-cost h3,
	div.db-submit h3 { font-size: 24px; color: #999; }
	div.db-select div.pricing-box { 
		padding: 30px; 
		border: 1px solid #ccc; 
		color: #999; 
	}
	div.db-select div.pricing-box h3 { font-size: 20px; margin-bottom: 5px; }
	div.db-select table td { padding-right: 20px; }
	div.db-select div.fine-print-box { 
		padding: 30px 15px 30px 30px; 
		border: 1px solid #ccc; 
		color: #999; 
	}
	div.db-select div.fine-print-box div {
		height: 120px;
		overflow-x: hidden;
	}
	div.db-select div.section {
		width: 100%;
		padding: 10px 0px 10px 30px;
		margin-left: -30px;
	}
	div.db-select div.section div { display: none; }
	div.db-select div.section.active { background: #fff; border-bottom: 1px solid #ddd; }
	div.db-select div.section.active div { /* display: block; */ }
	div.db-select div.section h3 {
		font-size: 18px;
		text-transform: uppercase;
		color: #999;
		background: url('../images/db_select_icons.png') no-repeat;
		padding-left: 35px;
		height: 23px; line-height: 23px;
		cursor: pointer;
		margin-bottom: 0px;
		-webkit-user-select:none;
		-moz-user-select:none;
	}
	div.db-select div.section.active h3 { background-position: 0px -23px; }
	div.db-select div.section p { padding: 10px 0px 10px 35px; }
	div.db-select div.section table { margin-left: 35px; }
	div.db-select div.section table td { text-align: center; padding: 0px 10px; font-size: 13px; }
	div.db-select div.section table td:first-child { border-right: 1px solid #ccc;  }
	
	div.db-review div.review-box,
	div.db-cost div.cost-box { background: #fff; padding: 15px; min-height: 22px; }
	
	div.db-cost a.btn,
	div.db-submit a.btn { margin-right: 20px; }
	
	
	
	/* Custom Regions
	---------------------------------------------------------------------- */
	form.custom-region textarea,
	form.custom-region input[type="text"] {
		font-size: 16px;
		padding: 10px 20px;
		width: 390px;
		border: 1px solid #ccc;
		background: #fff;
	}
	form.custom-region textarea { height: 135px; }
	
	
	
	
	
	/* Details
	---------------------------------------------------------------------- */
	div.details h3.special { display: inline-block; width: auto; padding-right: 30px; }
	div.details table,
	div.ranking table { width: 100%; border-collapse: separate; }
	div.details table tr.sections th {
		background: #f7f3e8;
		color: #c5bdb0;
		font-size: 17px;
		font-weight: 100;
		padding: 12px 10px;
	}
	div.details table tr.sections th.ignore { background: #fff; }
	
	div.details table th,
	div.ranking table th {
		background: #e6e1d2;
		color: #666666;
		font-size: 13px;
		font-weight: normal;
		padding: 15px 10px;
		border-left: 1px solid #fff;
	}
	div.details table td,
	div.ranking table td { 
		background: #f4f3f3;
		font-size: 13px;
		font-weight: 400;
		text-align: center; 
		padding: 2px 10px;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #e1ded7;
		border-left: 1px solid #fff;
		border-right: 1px solid #e1ded7;
	}
	div.ranking table td.key-bg { color: #fff; border: none; }
	div.ranking table td.key-bg a { color: #fff; }
	
	div.details table th:first-child,
	div.details table td:first-child { text-align: left; border-left: none; }
	div.ranking table th:first-child,
	div.ranking table td:first-child { border-left: none; }
	div.details table td:first-child,
	div.ranking table td:first-child { font-weight: 300; }
	div.details table td:last-child,
	div.ranking table td:last-child { border-right: none; }
	div.details table.industries td:nth-child(2) { 
		padding: 2px 5px; 
		text-align: left; 
		font-weight: 200;
		width: 140px; 
	}
	div.ranking table th { padding: 15px 0px; }
	div.ranking table td { padding: 2px 0px; }
	div.ranking table tr.active td { background: #fff; }
	
	
	div.ranking table tr.special.first td { border-top: 2px solid orange; }
	div.ranking table tr.special.last td { border-bottom: 2px solid orange; }
	div.ranking table tr.special td:first-child { border-left: 2px solid orange; }
	div.ranking table tr.special td:last-child { border-right: 2px solid orange; }
	
	div.details table td:nth-child(10),
	div.details table tr.sections th:nth-child(3),
	div.details table tr.headings th:nth-child(10) {
		border-left: 2px solid #d3d0bf;
	}
	div.details table td:nth-child(9) { border-right: none; }
	
	
	div.ranking table th { cursor: pointer; }
	div.ranking table th.headerSortUp,
	div.ranking table th.headerSortDown,
	div.ranking table th.sorting_asc,
	div.ranking table th.sorting_desc { background: #d6d1c2; }
	
	div.ranking table thead.fixed {
		position: fixed;
		top: 0px;
		z-index: 200;
	}
	div.ranking table thead.hidden {
		opacity: 0.1;
		display: none;
	}
	
	
	
	
/* FOOTER
---------------------------------------------------------------------- */
	div.footer {
		background: #fff /* url('images/footer_bg.png') */ top center no-repeat;
		min-height: 180px;
	}
	div.footer .third { padding-top: 10px; color: #fff; } /* brings the footer closer to the bottom of the page */
	div.footer .third img { float: left; margin: 0px 10px 10px 0px; }
	
	
	
	
	
	/* ROLLOVER FOR main page whats new
---------------------------------------------------------------------- */
	
	
	.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 650px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #f4f4ec);
    background: -webkit-linear-gradient(#fff, #f4f4ec);
    background: -o-linear-gradient(#fff, #f4f4ec);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #4cb5c4;
}
	
	
	
/* spacers that may not be used */
	
div.space10 {
    width: 1020;
    height: 10px;
    border: 0px solid #73AD21;
}

div.space25 {
    width: 1020;
    height: 25px;
    border: 0px solid #73AD21;
}

div.space50 {
    width: 1020;
    height: 50px;
    border: 0px solid #73AD21;
}

div.space100 {
    width: 1020;
    height: 100px;
    border: 0px solid #73AD21;
}


div.space150 {
    width: 1020;
    height: 150px;
    border: 0px solid #73AD21;
}




/* drawing circles for new YE timeline graphs */

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  line-height: 200px;
  text-align: center;
  background: #000
}


.badge {
  height: 160px;
  width: 160px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: #EBEBEB;
}	
	
label {
    display: block;
    font: .9rem 'Fira Sans', sans-serif;
}

input[type='submit'],
label {
    margin-top: 1rem;
}
	
	
	
/* print PDF CSS */


@media print {

/*  add to class to exclude from print */    
    .no-print, .no-print *
    {
        display: none !important;
    }

 
/*  gray bar underneath region name at top */
.gray-bg { background: #f4f3f3; }   


/* TYPOGRAPHY */
	body { 
		font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 14px;
		line-height: 22px;
		color: #666666;
		min-width: 1100px;
		background: #2d3b73;
	}
	a { color: #ffad33; text-decoration: none; }  /* former color  ff6600 */
	a:hover { text-decoration: underline; }

	.landing-page a {
		color: #4BE6C1;		/* former color  fcb042 */
	}
	.profile a {
		color: #4BE6C1;		/* former color  799bcf */
	}
	
	p { padding-bottom: 15px; }
	small { font-size: 90%; line-height: 120%; }
	.larger { font-size: 120%; letter-spacing: 0.05em; }
	
	h1 { font-size: 30px; line-height: 140%; margin-bottom: 15px; }
	h2 { font-size: 30px; font-weight: 200; color: #999; line-height: 140%; margin-bottom: 10px; }
	h2.alt { font-size: 28px; }
	h3 { font-size: 20px; font-weight: 300; line-height: 140%; margin-bottom: 15px; }
	h4 { font-size: 18px; font-weight: 200; line-height: 140%; margin-bottom: 10px; }
	h5 { font-size: 30px; line-height: 140%; margin-bottom: 15px; }
	
	h6 { font-size: 48px; font-weight: 100; line-height: 70%; margin-bottom: 0px; }

	.bold {
		font-weight: 500;
	}
	
	/* FOOTER */
	div.footer {
		background: #fff /* url('images/footer_bg.png') */ top center no-repeat;
		min-height: 180px;
	}
	div.footer .third { padding-top: 10px; color: #fff; } /* brings the footer closer to the bottom of the page */
	div.footer .third img { float: left; margin: 0px 10px 10px 0px; }