/* Styling for BOSI entrepreneur test */
@font-face {
	font-family: 'FuturaLight';
	src: url("/css/fonts/futura/Futura-Light.otf") format("opentype"), url("/css/fonts/futura/Futura-Light.ttf") format("TTF");
}
@font-face {
	font-family: NovecentowideBold;
	src: url("/css/fonts/Novecentowide-Bold/Novecentowide-Bold.otf") format("opentype");
}
@font-face {
	font-family: Haettenschweiler;
	src: url("/css/fonts/Haettenschweiler/Haettenschweiler.ffi") format("FFI"), url("/css/fonts/Royal_Rumble_Haettenschweiler.ttf") format("TTF");
}
@font-face {
	font-family: ArialFC;
	src: url("/css/fonts/Arial-FC/Arial-FC.ffil") format("FFIL");
}
@font-face {
	font-family: 'HelveticaRoundedLTStdBd';
	src: local('☺'),
			 url('/css/fonts/helvetica/HelveticaRoundedLTStd-Bd.woff') format('woff'), url('/css/fonts/helvetica/HelveticaRoundedLTStd-Bd.otf') format('opentype');
}
@font-face {
	font-family: 'FuturaBold';
	src: url('/css/fonts/futura/futura_bold-webfont.eot');
	src: url('/css/fonts/futura/futura_bold-webfont.eot?#iefix') format('eot'),
			 url('/css/fonts/futura/futura_bold-webfont.woff') format('woff'),
			 url('/css/fonts/futura/futura_bold-webfont.ttf') format('truetype'),
			 url('/css/fonts/futura/futura_bold-webfont.svg#webfontts4gUNPi') format('svg');
	font-weight: normal;
	font-style: normal;
}

.bosi-blue {

	/*font: normal 16px/1.25 'HelveticaRoundedLTStdBd', Helvetica, Arial, sans-serif;*/
	line-height: 1.25em;

	color: #fff;

	h1, h2, h3, h4 {
		color: #fff;
	}
	max-width: 100% !important;

	ul.social_share {
	}
	ul.social_share li {
		display: block;
		float: left;
		position: relative;
		vertical-align:top;
	}

	.bosi-button {
		display: block;
		width: 100px;
		text-decoration: none !important;
		color: #fff !important;
	}

	.clear {
		display: block;
		height: 0;
		clear: both;
		font-size: 0;
	}
	.hidden {
		display: none;
	}
	p {
		font-size: 15px;
		line-height: 1.25;
	}
	.themed-content a {
		text-decoration: underline;
	}

	/* is used for form errors, i guess */
	.red-alert {
		color: #F00;
	}

	/* layout */
	/* make bg stretch to the whole viewport where there is no scollbar */
	html, body {
		height: 100%;
	}

	/* make sure bg wrap will always be _at lest_ as tall as viewport */
	#bg-wrap {
		position: relative;
		min-height: 100%;
		min-width: 768px;
	}

	#theall {
		overflow-x: hidden;
		overflow-y: auto;
	}

	#theall,
	.content-zindex { /* place these above scaled background thing */
		position: relative;
		z-index: 1;
		padding: 0 0 1px;
	}
	#content, .content-footer {
		position: relative;
		margin: 0 auto;
	}
	#content {
		width: 1000px;
		margin: 0 auto;
		padding: 0 0 1px; /* uncollapse margins */
	}
	.content-footer {
		max-width: 900px;
		padding: 18px 0;
	}
	.content-footer .content-reduce {
		padding: 0 25px;
	}
	#footer {
		margin: 120px 0 30px;
	}
	#footer.advanced {
		margin: 75px 0 30px;
	}
	#footer-glow {
		padding: 1px 0; /* uncollapse margins, save some space for selected icons */
		height: 98px;
	}
	#footer .footer-line-sp {
		position: absolute;
		top: -20px;
		right: 20px;
		font-size: 12px;
		font-weight: normal;
		font-family: Arial, Verdana, Helvetica, sans-serif, "Trebuchet MS";
		color: #9f4f00;	
	}
	#footer .footer-line-sp a {
		color: #9f4f00;	
	}

	/*
		it takes verical space and cause double scrollbars on page where it's present
		so, totally hiding it
	*/
	#fc-opensocial-api {
		overflow: hidden;
		font-size: 0;
	}

	/* backgrounds */
	.scaled-bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
	}
		#bg-wrap > .scaled-bg {
			/*background: url("/bos001/images/bg_logos.png") -25px 25px repeat;*/
		}
		.scaled-bg img {
			display: block;
			width: 100%;
			height: 100%;
		}

	/* content */
	.themed-content {
		-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .6);
			 -moz-box-shadow: 0 0 25px rgba(0, 0, 0, .6);
						box-shadow: 0 0 25px rgba(0, 0, 0, .6);
	}
	.themed-content .content-reduce {
		margin: 0 66px;
	}
	.content-zindex h1 { /* same weight as question (and other) overrides */
		position: relative;
		font-size: 24px;
		height: 86px;
		line-height: 86px;
		text-align: center;
	}

	/* start page */
	.content-start {
		font: normal 24px/1.5 Helvetica, Arial, sans-serif;
		text-align: center;
		color: #333;
	}
	.content-start .content-reduce {
			margin: 0 0px;
	}
	.content-start .main-sticker {
		position: absolute;
		left: -140px;
		top: -45px;
	}

	.content-start h1,
	.content-start p strong {
			font-family: 'FuturaBold', Verdana, sans-serif;
			font-weight: bold;
			text-transform: uppercase;
			color: #000;
	}
	.content-start h1 {
		line-height: 37px;
		font-size: 37px;
		margin-bottom: 0;
		/* text-shadow: #fff 0px 2px 0px; */
	}
	.content-start p {
		font-size: 24px;
	}
	.content-start p strong {
		font-size: 24px;
		/*margin: 0 .25em;*/
	}
	.content-start .btn-container {
		margin-top: 55px;
		margin-left: 50px;
	}
	.content-start .btn-button {
		display: block;
		float: left;
		width: 260px;
		line-height: 0px;
		margin: 0 2px;
	}
	.content-start .btn-get-started {
		margin-bottom: 0px;
		opacity: 0.85;
	}
	.content-start .btn-get-started:hover {
		opacity: 1;
	}
	.btn-get-started {
		text-indent: -32768px;
		overflow: hidden;
		display: inline-block;
		width: 260px;
		height: 75px;
		background: url("/bos001/images/btn_get_started.png") 0 0 no-repeat;
		margin: 0;
	}
	.btn-get-started-1 {
		background: url("/images/start-1.png") 0 0 no-repeat;
	}
	.btn-get-started-2 {
		background: url("/images/start-2.png") 0 0 no-repeat;
	}
	.btn-get-started-3 {
		background: url("/images/start-3.png") 0 0 no-repeat;
	}
	.content-start .assessment-info {
		font-size: 12px;
		display: block;
		width:100%;
		text-align: center;
		line-height: 12px;
		
	}

	/* question */
	.question {
		overflow: hidden;
	}
	.question h1 {
		text-align: left;
		padding-left: 110px;
	}
		.question h1 .question-number {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 3em;
			width: 91px;
			height: 101px;
			background-image: url("/bos001/images/sprite_circles.png");
		}
			.question h1 .question-number strong {
				display: block;
				position: relative;
				left: -5px;
				text-align: center;
				font-weight: bold;
			}
			.p-mac .question h1 .question-number strong {
				margin-top: 10px;
				left: -3px;
			}

		.question a {
			text-decoration: none;
		}
		ul.question-anwsers li {
			display: table;
			width: 100%;
		}
			ul.question-anwsers li:first-child a {
				border-top: none;
			}
			ul.question-anwsers li:last-child a {
				border-bottom: none;
			}
			ul.question-anwsers li a {
				display: table-cell;
				vertical-align: middle;
				padding: 0 95px;
				height: 5.25em;
				line-height: 1.5em;

				border-top: 2px solid;
				border-bottom: 1px solid;
				outline: none;
			}

	/* questions animation */
	#content {
		min-height: 445px;
	}
	.question-animate-wrap {
		width: 100%;
		position: absolute;
	}
		.question-animate-wrap-hidden,
		.question-animate-wrap-hidden .scaled-bg {
			display: none;
		}

	/* tooltip */
	.tooltip {
		position: absolute;
		margin-bottom: 22px; /* reserve space for arrow */
		z-index: 10;
		text-align: left;
		white-space: normal;

		-webkit-box-shadow: 0 0 5px #000;
			 -moz-box-shadow: 0 0 5px #000;
						box-shadow: 0 0 5px #000;
	}
		.tooltip,
		.tooltip .scaled-bg img {
			-webkit-border-radius: 5px;
				 -moz-border-radius: 5px;
							border-radius: 5px;
		}
		.tooltip .arrow-cut {
			position: absolute;
			left: 38px;
			bottom: -22px;
			width: 22px;
			overflow: hidden;
			z-index: 1;
		}
			.tooltip .arrow-cut i {
				position: relative;
				display: block;
				left: -22px;
				width: 0;
				border-style: solid;
				border-width: 22px 22px 0;
				border-color: transparent;
			}
		.tooltip .arrow-cut-right {
			margin-left: -22px;
		}
			.tooltip .arrow-cut-right i {
				left: 0;
			}
		.tooltip .tooltip-content {
			position: relative;
			color: #FFF;
			margin: 15px;
			line-height: 1.4;
			z-index: 1;
		}
		/* progress tooltips with quotes */
		.tooltip blockquote {
			padding-left: .6em;
		}
			.tooltip blockquote .q-open {
				margin-left: -.6em;
			}
			.tooltip blockquote cite {
				display: block;
			}
		/* results page tooltip contents */
		.tooltip h3 {
			font-size: 19px;
			margin: .5em 0 .25em;
		}
			.tooltip h3:first-child {
				margin-top: 0;
			}
		.tooltip ul {
			list-style: disc outside;
		}
			.tooltip ul li {
				line-height: 1.35;
				font-size: 14px;
				margin-left: 1em;
			}

	/* result page tooltips, extends .tooltip */
	.tooltip-results {
		width: 314px;
		margin-bottom: 0;
	}
		.tooltip-results .tooltip-content {
			margin: 0;
			padding: 10px 15px;
		}
	.tooltip-results .tooltip-content li {
		font-family: Helvetica, Arial, sans-serif;
	}
	.tooltip {
		&.tooltip-results-2 {
			float: left;
			margin: 0 10px;
			position: relative;
			width: 263px;
			padding: 10px 15px;
		}
		&.tooltip-results-recommendation {
			float: none;
			margin: 0 10px;
			position: relative;
			padding: 10px 15px;
			margin: 20px auto 50px;
			width: 700px;
			color: #fff;
			p {
				color: #fff;
				margin: 10px 0;
			}
		}
	}
	.tooltip-arrow-right {
		margin-right: 22px;
	}
		.tooltip-arrow-right .arrow-cut {
			left: auto;
			bottom: auto;
			top: 55px;
			right: -22px;
			height: 22px;
		}
			.tooltip-arrow-right .arrow-cut i {
				left: 0;
				border-width: 22px 0 22px 22px;
			}
	.tooltip-arrow-left {
		margin-left: 22px;
	}
		.tooltip-arrow-left .arrow-cut {
			left: -22px;
			bottom: auto;
			top: 78px;
			height: 22px;
		}
			.tooltip-arrow-left .arrow-cut i {
				left: 0;
				top: -22px;
				border-color: transparent !important;
				border-right-color: #3C831F !important;
				border-width: 22px 22px 22px 0;
			}


	/* footer */
	#footer {
		position: relative;
		background-color: #BABABA;
		padding: 4px 0;
	}
		#footer-glow {
			text-align: center;
			background-color: #373737;
			background-image: -moz-linear-gradient(top, #373737, #181818);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#373737), to(#181818));
			background-image: linear-gradient(top, #373737, #181818);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#373737', EndColorStr='#181818');

			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
				 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
							box-shadow: 0 0 10px rgba(0, 0, 0, .25);
		}

	/* prepare footer to animations */
	#theall.before-animation {
		overflow: hidden;
	}
	#footer {
		display: none;
		bottom: -400px;
	}

	/* progress icons */
	.progress-icons {
		position: relative;
		display: inline-block;
		margin-top: 17px;
		white-space: nowrap;
		background: url("/bos001/images/footer_dots_line.png") center no-repeat;
	}
		.progress-icons li {
			display: inline-block;
			margin-left: 25px;
			width: 67px;
			height: 67px;
		}
		.progress-icons li:first-child {
			margin-left: 0;
		}
		.progress-icons li.selected {
			background: url("/bos001/images/progress_icons/progress_selected.png") 0 0 no-repeat;
		}
			.progress-icons li em {
				position: relative;
				display: inline-block;
				top: 2px;
				width: 62px;
				height: 52px;
				text-indent: -32768px;
				overflow: hidden;
				outline: none;
				background-image: url("/bos001/images/progress_icons/sprite_progress_icons.png");
				background-repeat: no-repeat;
			}
			.progress-icons li.selected em {
				background-image: url("/bos001/images/progress_icons/sprite_progress_icons_selected.png");
			}
				.progress-icons li.progress-icon-1  em { background-position: 0     0; }
				.progress-icons li.progress-icon-2  em { background-position: -62px 0; }
				.progress-icons li.progress-icon-3  em { background-position: 0     -52px; }
				.progress-icons li.progress-icon-4  em { background-position: -62px -52px; }
				.progress-icons li.progress-icon-5  em { background-position: 0     -104px; }
				.progress-icons li.progress-icon-6  em { background-position: -62px -104px; }
				.progress-icons li.progress-icon-7  em { background-position: 0     -156px; }
				.progress-icons li.progress-icon-8  em { background-position: -62px -156px; }
				.progress-icons li.progress-icon-9  em { background-position: 0     -208px; }
				.progress-icons li.progress-icon-10 em { background-position: -62px -208px; }

	/* tooltip attached to progress icon */
	.progress-icons li .tooltip {
		display: none;
		width: 505px;
		top: auto;
		bottom: 104px;
		margin-left: -3px;
	}
		.progress-icons li.selected .tooltip {
			display: block;
		}
		/* position tooltip in the left part of progress */
		.progress-icons li.progress-icon-1 .tooltip { left: 0; }
		.progress-icons li.progress-icon-2 .tooltip { left: 90px; }
		.progress-icons li.progress-icon-3 .tooltip { left: 180px; }
		.progress-icons li.progress-icon-4 .tooltip { left: 270px; }
		.progress-icons li.progress-icon-5 .tooltip { left: 360px; }

		.progress-icons li.progress-icon-2 .tooltip .arrow-cut { margin-left: 10px; }
		.progress-icons li.progress-icon-3 .tooltip .arrow-cut { margin-left: 14px; }
		.progress-icons li.progress-icon-4 .tooltip .arrow-cut { margin-left: 18px; }
		.progress-icons li.progress-icon-5 .tooltip .arrow-cut { margin-left: 28px; }

		/* right part of progress icons, do not allow tooltip to be outside of screen and preserver illusion of movement */
		.progress-icons li.progress-icon-6  .tooltip { right: 10px; }
		.progress-icons li.progress-icon-7  .tooltip { right: 0; }
		.progress-icons li.progress-icon-8  .tooltip { right: -10px; }
		.progress-icons li.progress-icon-9  .tooltip { right: -20px; }
		.progress-icons li.progress-icon-10 .tooltip { right: -30px; }

		.progress-icons li.progress-icon-6  .tooltip .arrow-cut { left: 90px; }
		.progress-icons li.progress-icon-7  .tooltip .arrow-cut { left: 180px; }
		.progress-icons li.progress-icon-8  .tooltip .arrow-cut { left: 265px; }
		.progress-icons li.progress-icon-9  .tooltip .arrow-cut { left: 350px; }
		.progress-icons li.progress-icon-10 .tooltip .arrow-cut { left: 440px; }

		/* this totally applies arrow-cur-right style for last 5 icons */
		.progress-icons li.progress-icon-6  .tooltip .arrow-cut,
		.progress-icons li.progress-icon-7  .tooltip .arrow-cut,
		.progress-icons li.progress-icon-8  .tooltip .arrow-cut,
		.progress-icons li.progress-icon-9  .tooltip .arrow-cut,
		.progress-icons li.progress-icon-10 .tooltip .arrow-cut { margin-left: -22px; }
			.progress-icons li.progress-icon-6  .tooltip .arrow-cut i,
			.progress-icons li.progress-icon-7  .tooltip .arrow-cut i,
			.progress-icons li.progress-icon-8  .tooltip .arrow-cut i,
			.progress-icons li.progress-icon-9  .tooltip .arrow-cut i,
			.progress-icons li.progress-icon-10 .tooltip .arrow-cut i { left: 0; }


	/* progress icons for advanced test */
	.progress-icons.advanced {
		background: none;
		margin-top: 33px;
	}
		.progress-icons.advanced li {
			width: 30px;
			height: 30px;
			margin-left: 0;
		}
		.progress-icons.advanced li.selected {
			background: url("/bos001/images/progress_icons/progress_selected_30x30.png") 0 0 no-repeat;
		}
			.progress-icons.advanced li em {
				background: none;
				text-indent: 0;
				color: #fff;
				width: 30px;
				height: 27px;
				line-height: 27px;
				top: auto;
				text-align: center;
			}
				.progress-icons.advanced li.selected em {
					color: #000;
				}
				.p-mac .progress-icons.advanced li em {
					top: 4px;
					left: 1px;
				}


	/* result pages */
	.results-column {
		position: relative;
		float: left;
		width: 50%;
		margin: 35px 0 10px;
	}
		.results-column .badge {
			position: absolute;
		}
			.results-column-left .badge {
				right: 10px;
			}
			.results-column-right .badge {
				left: 10px;
			}
		.results-column .tooltip {
			position: relative;
			top: -25px;
		}
			.results-column-left .tooltip {
				left: -7px;
			}
			.results-column-right .tooltip {
				left: 170px;
			}

		/* iOS icon lookin' badge thing */
		.badge {
			position: relative;
			display: inline-block;
			text-align: center;
			width: 155px;
			margin-bottom: 1.5em;
			font-style: normal;
			font-family: 'HelveticaRoundedLTStdBd', Helvetica, Arial, sans-serif;

			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .75);
				 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .75);
							box-shadow: 0 0 10px rgba(0, 0, 0, .75);
		}

		.badge, .badge em {
			font-style: normal;
			-webkit-border-radius: 8px;
				 -moz-border-radius: 8px;
							border-radius: 8px;
		}

		.badge em {
			height: 155px;
			display: block;
			line-height: 155px;
			font-size: 110px;
			font-weight: bold;
			background: url("/bos001/images/bg_badge_gloss.png") 0 0 no-repeat;
		}
		.results-center .badge em {
			font-size: 100px;
		}

		.p-mac .badge em {
			padding-top: 15px;
			height: 140px;
		}
		.badge-double em {
			font-size: 96px;
		}

		.badge span {
			position: absolute;
			left: 0;
			width: 100%;
			bottom: -1.5em;
			font-size: 14px;
		}


	/* notice text on results page */
	.notice-box {
		background-color: #5da052;
		margin: 1em 65px;
		padding: 9px 13px;

		color: #13480a !important;
		-webkit-border-radius: 10px;
			 -moz-border-radius: 10px;
						border-radius: 10px;
	}
		.notice-box a {
			color: #082703;
			white-space: nowrap;
		}

	/* content footer */
	.content-footer {
		position: relative;
		color: #FFF;
		background-color: #001c2b;

		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .6);
			 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .6);
						box-shadow: 0 0 5px rgba(0, 0, 0, .6);
	}
	.content-footer-gradient {
		background-color: #00293f;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#00293f), to(#001927));
		background-image: -webkit-linear-gradient(top, #00293f, #001927);
		background-image:    -moz-linear-gradient(top, #00293f, #001927);
		background-image:     -ms-linear-gradient(top, #00293f, #001927);
		background-image:         linear-gradient(top, #00293f, #001927);
		.custom-form {
			text-align: center;
		}
	}
	.content-footer h2 {
		font-size: 20px;
		margin-bottom: .5em;
	}
	.content-footer p {
		color: #c7e5f5;
	}
	.content-footer p + p {
		margin-top: 1em;
	}
	.content-footer .notice-box {
		margin-bottom: 0;
	}

	/* equal size columns in footer, takes full width */
	.content-footer-full-left,
	.content-footer-full-right {
		float: left;
		width: 386px;
		padding: 0 13px 0 23px;
	}
	.content-footer-full-left {
	}
	.content-footer-full-right {
		margin-left: 56px;
	}

	/* content footer box */
	.footer-box {
		display: inline-block;
		background-color: #00587f;
		-webkit-border-radius: 13px;
			 -moz-border-radius: 13px;
						border-radius: 13px;
		padding: 12px;
	}

	/* social share block */
	.social {
		display: inline-block;
		overflow: hidden;
		opacity: .8;
	}
	.social:hover {
		opacity: 1;
	}
	.social li {
		display: inline;
		float: left;
		height: 51px;
	}
	.social li + li {
		margin-left: 3px;
	}
	.social li a {
		display: inline-block;
		width: 51px;
		height: 51px;
		background-image: url("/bos001/images/social_icons/sprite_social_icons.png");
		background-repeat: no-repeat;
		outline: none;
		text-indent: -32768px;
		overflow: hidden;
	}
	.social li a.social-fb {
		background-position: 0 0;
	}
	.social li a.social-in {
		background-position: -51px 0;
	}
	.social li a.social-tw {
		background-position: -102px 0;
	}

	/* coming soon blcok on results2 page */
	.todo {
		font-size: 13px;
		white-space: nowrap;
	}
	.todo strong {
		text-transform: uppercase;
		color: #FFF;
	}
	p.todo + p.todo {
		margin: .1em;
	}

	/* simple resutls page */
	.results-center {
		text-align: center;
		margin: 1.5em;
	}
	h2.prominent {
		font-size: 46px;
		margin: .5em 0 .25em;
	}

	/* content footer layout for simple results */
	.content-footer-equal {
		float: left;
		width: 280px;
		text-align: center;
		position: relative;
	}
	.content-footer-equal-left {
		left: 100px;
	}
	.content-footer-equal-right {
		left: 160px;
	}
	.content-footer-equal h3 {
		margin-bottom: 1em;
	}


	.italic {
		font-style: italic;
	}

	.result-step2 h2{
		font-size: 20px;
		margin-bottom: 0;
	}
	.result-step2 .themed-content {
		background: none;
	}

	.result-step2 .content-simple {
		font-size: 0.9em;
		padding: 50px;
	}

	.result-step2 .content-simple h1 {
			font-size: 24px;
			position: relative;
			text-align: left;
	}
}