/**************************************************************
/* public.css
/* jpl 5/06/15
/*
/*	Styles for the public front-end of CoachAccountable.
/*************************************************************/


/*------------------------------------------------------------------------------*/
/* SECTION::Global HTML Resets */
 
* {
	padding:				0;
	margin:					0;
}
ol, ul { margin-left: 20px; }

html { height: 100%; }
body {
	text-align:				left;
	background-color:		#fff;
	color: #222;
	font-family:			Arial, Helvetica, Tahoma, sans-serif;
	font-size:				14px;
	height:					100%;
}

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a:focus { outline: none; }
button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner { border: 0; }
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

td { vertical-align: top; }
a img { border: 0; }
input[type="radio"], input[type="checkbox"] { vertical-align: middle; }
p {margin: 5px 0px 14px 0px;}

@font-face {
	font-family: 'myriad-pro';
	font-style: normal;
	font-weight: normal;
	src: url("fonts/MyriadPro-Light.woff") format("woff");
	font-display: swap;
}

/* End SECTION::Global HTML Resets
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/* SECTION::Chrome  */
/* CHROME */
	a:link		{ color: #558CCC; text-decoration: none; font-weight: normal; }
	a:visited	{ color: #558CCC; text-decoration: none; font-weight: normal; }
	a:hover		{ color: #558CCC; text-decoration: underline; font-weight: normal; }
	a:active	{ color: #558CCC; text-decoration: underline; font-weight: normal; }


h1, h2, h3 {
	font-family:			"myriad-pro", "Myriad Pro Light", Arial, Helvetica, Tahoma, sans-serif;
	font-weight:			100;
}
h1 { font-size: 24px; }
h2 { font-size: 24px; color: #fc8100; margin-bottom: 16px; }
h3 { font-size: 20px; color: #558CCC; margin-bottom: 16px; }
hr { background-color: #6A9E2F; height: 3px; }


/* ...mobile styles here... */
@media screen and (min-width: 600px) { /* ...tablet styles here... */
	h1, h2 { font-size: 36px; }
	h3 { font-size: 28px; }
}
@media screen and (min-width: 900px) { /* ...desktop styles here... */\
	
}

/* End SECTION::Chrome
/*------------------------------------------------------------------------------*/

 
/*------------------------------------------------------------------------------*/
/* SECTION::Page Architecture  */


.content {
	margin:					0px 20px;
	max-width:				960px;
	width:					auto;
	position:				relative;
	padding-bottom:			30px;
}
.content div.innerContent { padding: 0px 0px 96px 0px; }
@media only screen and (min-width: 1000px) {
	.content { margin: 0 auto; }
	.content div.innerContent { padding: 0px 20px 96px 20px; }
}

.content p, .content ul, .content ol { font-size: 18px; font-family: 'Myriad-Pro'; line-height: 1.8em; }
/* #pageHeaderTop.content ul { font-family: Arial, Helvetica, Tahoma, sans-serif; } */
#page-footer .content ul { font-family: Arial, Helvetica, Tahoma, sans-serif; font-size: 12px; }

.videowrapper {position: relative;padding-bottom: 56.25%; /* 16:9 aspect ratio */border: 1px solid #6c9c31;height: 0;}
.vimeoFacade { cursor: pointer; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.content ul.listNav li a.current {
	font-weight: bold;
	color: inherit;
	pointer-events: none;
}

#allButFooter {
	min-height:				100%;
	margin:					0;
	position:				relative;
}

	/* Header ---------------------------------------------------------------*/
	#pageHeaderTop { height: 92px; padding-bottom: 0; }
	#topLogo {
		position: absolute; top: 15px; left: 0; z-index: 10;
	}

	/*-------------------------------------------------------------------*/
	/* SECTION::Top Menus  */
	#pageHeaderTop ul {
		position:			absolute;
		right:				0px;
		list-style-type:	none;
	}
	#pageHeaderTop ul li:last-child { padding-right: 0; }
	#pageHeaderTop a { color: #6c9c31; }
	#access-menu { top: 20px; font-size: 16px; z-index: 11; }
	#access-menu li { float: left; padding: 0px 10px; }
	#access-menu li:first-child { border-right: 1px solid #6c9c31; }
	
	#pageHeaderTop + .content .singleColumnRiff { margin-top: 50px; }

	
	#menuToggleBar {
		position: absolute; top: 0px; left: 0px; right: 0px; padding: 54px 20px 5px 20px; height: 92px;
		text-align: right; background: #ffffff; z-index: 9;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
		transition: box-shadow 0.5s ease-in-out;
	}
	#menuToggleBar .content { margin: 0; }
	#menuToggleBar.scrolled { box-shadow: 0px 0 4px rgba(0, 0, 0, .4); height: 47px; padding-top: 12px; }
	#menuToggleBar.scrolled ul#topMenu { top: 35px; }
	#menuToggle { font-size: 20px; }
	ul#topMenu {
		max-height:				0;
		position:				absolute;
		overflow:				hidden;
		top:					33px;
		right:					-20px;
		padding:				0;
		list-style-type:		none;
		text-align:				right;
		transition:				max-height 0.5s;
		z-index:				0;
		margin:					0;
		box-shadow:				1px 3px 4px rgba(0, 0, 0, .3);
		width:	200px;
	}
	#topMenu.expanded {
		max-height: 550px;
	}
	#topMenu li {
		padding:		0;
		text-align:		right;
		background:		#ffffff;
	}
	#topMenu li:hover { background: #e8e8e8; }
	#topMenu li a {
		display:inline-block;
		width: 100%;
		color: #868686;
		font-size: 15px;
		padding: 2px 20px;
	}
	#topMenu li:hover a { color: #6c9c31; }
	#topMenu a:link, #topMenu #topMenu a:visited, #topMenu a:hover { text-decoration: none; }
	
@media only screen and (min-height: 500px) {
	#topMenu li a { padding: 10px 20px; font-size: 18px; }
}
@media only screen and (min-width: 690px) {
	#menuToggle { display: none; }
	ul#topMenu {
		width: auto; top: 2px; right: 0px; overflow: visible; box-shadow: none;
		postion: relative; border: none;
	}
	#menuToggleBar .content { margin: 0 auto; }
	#menuToggleBar { left: 0px; right: 0px; }
	#menuToggleBar.scrolled ul#topMenu { top: 0px; }
	ul#topMenu li {
		float: left; right: 0; padding: 0px 10px; border-bottom: none; background: transparent;
	}
	ul#topMenu li:hover { background: transparent; }
	#topMenu li a { padding: 0; font-size: 14px; }
}
@media only screen and (min-width: 850px) {
	ul#topMenu li { padding: 0px 20px; }
}
		body.signUp #access-menu, body.signUp #menuToggleBar, body.signUp #footerMenu { display: none; }
		body.signUp .bigGreen { padding-top: 14px; }
		/* End SECTION::Top Menu
		/*-------------------------------------------------------------------*/
	
	#greenHeaderBar {
		min-height:		294px;
/*		background:		#ffffff url(../images/public/bars/greenHeaderBar.png) repeat-x; */
		background: #496f11; /* Old browsers */
		background: -moz-linear-gradient(top,  #496f11 1%, #74a534 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#496f11), color-stop(100%,#74a534)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #496f11 1%,#74a534 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #496f11 1%,#74a534 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #496f11 1%,#74a534 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #496f11 1%,#74a534 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#496f11', endColorstr='#74a534',GradientType=0 ); /* IE6-9 */
		margin-bottom:	30px;
		color:			#ffffff;
		position:		relative;
		padding-top:	20px;
		font-size:		15px;
	}
	#greenHeaderBar.short { min-height: 150px; /* background-image: url(../images/public/bars/greenHeaderBar150.gif); */ }
	
	#greenHeaderBar h1 { color: #ffffff; font-size: 36px; }
	#greenHeaderBar .button {
		display:				inline-block;
		border:					none;
		box-shadow:				3px 3px 9px rgba(0, 0, 0, .5);
/* 		text-shadow:			5px 5px 3px rgba(0, 0, 0, .5); */
		transition: border linear 0.2s, text-shadow linear 0.2s;
		color:					#ffffff !important;
		font-size:				26px;
		height: auto;
		font-weight:			500;
/*		font-family:			"Myriad Pro Light", Arial, Helvetica, Tahoma, sans-serif; */
		border-radius:			9px;
		padding:				8px 20px;
		text-decoration:		none !important;
		background: #abd673; /* Old browsers */
		background: -moz-linear-gradient(top,  #abd673 0%, #6f9f34 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abd673), color-stop(100%,#6f9f34)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #abd673 0%,#6f9f34 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd673', endColorstr='#6f9f34',GradientType=0 ); /* IE6-9 */
	}
	#greenHeaderBar .little.button { font-size: 15px; padding: 2px 4px; border-radius: 5px; box-shadow: 4px 4px 4px rgba(0, 0, 0, .5); }
	
	#greenHeaderBar .button:hover {
	/*	box-shadow:				7px 7px 11px #abd673; */
		text-shadow:			0px 0px 6px #abd673;
		text-decoration:		none;
	}
	#greenHeaderBar a:link		{ color: #ffffff; text-decoration: underline; }
	#greenHeaderBar a:visited	{ color: #ffffff; text-decoration: underline; }
	#greenHeaderBar a:active	{ color: #ffffff; text-decoration: underline; }
	#greenHeaderBar a:hover		{ color: #ffffff; text-decoration: none; text-shadow: 0 0 2px rgba(255, 255, 230, .4); }
	
	#greenHeaderBar img.right { width: 30%; max-width: 100%; }
	
	/* End Header -----------------------------------------------------------*/
	
	
	
	h1 {padding: 10px 0 0px;font-size: 34px;/* z-index: 1; */color: #6c9c31;}
	@media only screen and (min-width: 440px) { h1 { font-size: 44px; } }
	
	img.screenshot {
		border: 8px solid #ddd;
		border-left-width: 12px;
		border-right-width: 12px;
		border-radius: 8px;
		box-shadow: 0 0 0 1px #999;
	}
	
	
	.blueStroke {
		border: 1px solid #558CCC;
	}
	
	.singleColumnRiff {
		margin: 0 auto;
		max-width: 600px;
	}
	.singleColumnRiff h1 {
		font-size: 34px;
	}
	.singleColumnRiff img {
		max-width: 100%;
		margin-bottom: 20px;
	}
	.singleColumnRiff img.subtle {
		display: block;
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px auto;
		margin-bottom: 20px;
	}
	.singleColumnRiff img.right {
		max-width: 60%;
		margin-left: 20px;
	}
	.singleColumnRiff img.hangoutAtWide {
		position: relative;
		left: 200px;
		margin-left: -180px;
	}
	
	.singleColumnRiff ol li {
		margin-bottom: 16px;
	}
	
	.singleColumnRiff .emphasized {
		font-style: italic;
		font-size: 22px;
	}
	
	.content .singleColumnRiff .major p, .content .singleColumnRiff .major ol {
		font-size: 30px !important;
		color: #fc8100;
		line-height: 1.2em;
	}
	.singleColumnRiff .major ol {
		margin-left: 50px;
	}
	.singleColumnRiff h2.major {
		text-align: center;
		font-size: 60px;
	}
	
	.singleColumnRiff img.iPhoneFramed {
		max-width: 300px;
		background: transparent url(../images/public/signsV3/iPhoneFrame400.png);
		background-size: 100% 100%;
	/*	box-sizing: content-box; */
		/*		padding: 15.847% 4% 16.1711% 4%; */
		padding: 12.347% 6.5% 20.1711% 6.5%;
		padding: 14.347% 3.8% 17.1711% 3.8%;
		padding: 15.847% 4% 16.1711% 4%;
	}
	
	
	.bigBoldInParagraphs p strong { font-size: 22px; }
	
	blockquote {
		font-style: italic;
		font-size: 20px;
		/* font-weight: 100; */
		margin: 10px 0 20px 0;
		padding: 0 15px 0 20px;
		background-color: #fff;
		border-left: 5px solid #f8f8f8;
		position: relative;
	}
	
	blockquote:beforex {
		content: '"';
		position: absolute;
		top: 10px;
		left: 10px;
		font-size: 30px;
	}
	
	blockquote, p {
		line-height: 1.8em;
	}
	
	.DPALegal {
		font-family: 'Myriad-Pro';
		font-size: 18px;
		line-height: 1.8em;
	}
	.DPALegal p { margin: 0; }
	.DPALegal blockquote {
		font-style: normal;
	}
	
	


	/* Columns ---------------------------------------------------------------*/
	
.leftColumnText { font-size: 17px; width: 100%; max-width: 600px; }
.leftColumnText img.columnInset { max-width: 100%; display: block; margin: 10px auto; }
@media only screen and (min-width: 950px) {
	.leftColumnText { float: left; width: 70%; max-width: 600px; }
}
@media only screen and (min-width: 600px) {
	
}

	.textThenImageColumn img { max-width: 100%; margin: 20px auto; display: block; }
@media only screen and (min-width: 800px) {
	.textThenImageColumn .leftText { width: 45%; float: left; }
	.textThenImageColumn .rightImage { width: 50%; float: right; margin: 0 0 20px 0; }
	.textThenImageColumn img { max-width: 100%; }
	
	.textThenImageColumn img.expandOnHover {
		transform-origin: 0% 50%;
		transition: transform ease-in-out 150ms;
	}
	.textThenImageColumn .rightImage img.expandOnHover { transform-origin: 100% 50%; }
	.textThenImageColumn .expandOnHover:hover {
		transform: scale(2);
		z-index: 2;
	}
}

	.majorThenMinorColumn img { max-width: 100%; margin: 20px auto; display: block; }
@media only screen and (min-width: 800px) {
	.majorThenMinorColumn .majorColumn { width: 65%; float: left; }
	.majorThenMinorColumn .minorColumn { width: 30%; float: right; margin: 0 0 20px 0; }
	.majorThenMinorColumn img { max-width: 100%; }
}

	/* Trio columns: */
	.columnSet { padding-bottom: 40px; }
	.columnSet .column {
		margin:			0 auto 30px auto;
		max-width:		300px;
	}
@media only screen and (min-width: 1000px) {
	.columnSet .column {
		width:			300px;
		float:			left;
		margin-right:	30px;
		margin-bottom:	0;
	}
	.columnSet .column.last { margin-right:	0px; }
	.section .columnSet .column { width: 286px; }
}
	.columnSet .column.withDivider { margin-right: 15px; padding-right: 14px; border-right: 1px solid #dedede; }
	
	.columnSet .column a.boxed img, .columnSet .column img.boxed {
		text-align:		center;
		width:			100%;
		max-width:		300px;
		margin:			0 auto 15px;
		box-shadow:		5px 5px 6px rgba(0, 0, 0, 0.5);
		display:		block;
	}
	.columnSet .column h3 {
		color:			#558CCC;
		font-size:		28px;
	}
	.columnSet .column h3.longer { font-size: 21px; margin-bottom: 10px; }
	.columnSet .column p {
		padding:		10px 20px;
		line-height:	1.7em;
	}
	/* End Columns -----------------------------------------------------------*/
	
	
	
	/* Feature Section -------------------------------------------------------*/
	#featureSection {
		position:				relative;
		margin-bottom:			-20px;
		background:				transparent url(../images/public/panels/greenDotSections.gif) 50% 0 no-repeat;
		height:					147px;
	}
		
		#testimonialPanel {
			position:			absolute;
			top:				4px;
			left:				0px;
			width:				335px;
			height:				140px;
			background:			url(../images/public/signs/testimonialPanel.jpg) no-repeat;
		}
		#testimonialPanel:hover { background-position:0 -140px; }
		#affiliatePanel {
			position:			absolute;
			top:				4px;
			right:				0px;
			width:				335px;
			height:				140px;
			background:			url(../images/public/signs/affiliatePanel.jpg) no-repeat;
		}
		#affiliatePanel:hover { background-position: 0 -140px; }
		
		#socialNetworkingPanel {
			position:			absolute;
			top:				-18px;
			left:				377px;
		}
	/* End Feature Section ---------------------------------------------------*/
	
	
	
	
	/* Footer ----------------------------------------------------------------*/
	#page-footer {
		background:	#6c9c31; /*			transparent url(../images/public/bars/footer.gif) no-repeat top center; */
		height:					76px;
		margin-top:				-76px;
		font-size:				12px;
		clear:					both;
		color:					#fff;
	}
	#page-footer div.content { padding: 0; }
	#page-footer div.content div.innerContent {
		padding:				12px 18px 0 18px;
	}
	
	#page-footer a:link		{ color: #fff; text-decoration: none; font-weight: normal; }
	#page-footer a:visited	{ color: #fff; text-decoration: none; font-weight: normal; }
	#page-footer a:hover	{ color: #fff; text-decoration: underline; font-weight: normal; }
	#page-footer a:active	{ color: #fff; text-decoration: underline; font-weight: normal; }
	
		/*--------------------------------------------------------------------*/
		/* SECTION::Footer Menu  */
	#footerMenu { margin: 0 auto; list-style-type: none; }	
	#footerMenu li { padding-bottom: 6px; }
	#footerMenu li a { display: inline-block; padding: 4px 10px; }
	#footerCopy { text-align: center; }
@media only screen and (min-width: 90px) {
	#footerMenu { text-align: center; margin: auto; }
	#footerMenu li { display: inline-block; padding: 0; margin-right: 20px; }
	#footerMenu li a { display: inline; padding: 0; }
	#footerCopy { text-align: center; clear: left; padding-top: 6px; }
}
@media only screen and (min-width: 900px) {
	#footerMenu { float: left; list-style-type: none; }
	#footerCopy { float: right; clear: none; padding-top: 0; }
}
@media only screen and (max-width: 400px) {
	#footerMenu li { margin-right: 10px; }
}
@media only screen and (max-width: 350px) {
	#footerCopy span { display: none; }
}
		
		/* End SECTION::Footer Menu
		/*-------------------------------------------------------------------*/

#reloadControls {
	position:			fixed;
	z-index:			30000;
	bottom:				2px;
	right:				2px;
	border:				2px solid #ea5507;
	padding:			5px 15px;
	background:			#fff;
}
	/* End Footer -----------------------------------------------------------*/
	
	
	
/* End SECTION::Page Architecture
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Features  */


ul.featureMenu li {
	padding:				45px 0 0 20px;
	margin-bottom:			5px;
	width:					420px;
	height:					80px;
	cursor:					pointer;
	position:				relative;
	font-size:				15px;
	list-style-type:		none;
}
ul.featureMenu li img {
	position:				absolute;
	left:					20px;
	top:					5px;
}
ul.featureMenu li h2 {
	position:				absolute;
	left:					60px;
	top:					12px;
	margin:					0px;
	color:					#000;
	font-size:				30px;
}
ul.featureMenu li a, .featureDetailSet a { color: #558CCC; }

ul.featureMenu li.hoverFeature { background-image:		url(../images/public/panels/featureBox.gif); }
ul.featureMenu li.currentFeature { background-image: url(../images/public/panels/featureBox_on.gif); }

.featureDetailSet { padding: 12px 18px 6px 18px; }
.featureDetailSet p {
	font-size:				15px;
	margin-top:				2px;
	margin-bottom:			16px;
}

.featureDetailSet h2 { margin-bottom: 0px; }


/* End SECTION::Features
/*------------------------------------------------------------------------------*/





.FAQItem {
	margin-bottom: 40px;
	clear: both;
}
.FAQItem h3 { font-size: 24px; margin-bottom: 4px; }
.FAQItem a { text-decoration: underline; }
.FAQItem img.rightInset { float: right; margin: 0 0 10px 0px; width: 330px; }
/*------------------------------------------------------------------------------*/
/* SECTION::FAQ Page  */
	
	#FAQTopicMenu {
		width:					100%;
		padding-top:			15px;
	}
	
	#FAQSearch {
		display: none;
		position:				absolute;
		top:					30px;
		right:					20px;
		width:					260px;
		z-index: 1;
	}
@media only screen and (min-width: 640px) {
	#FAQSearch { display: block; }
}
	
	
	.sectionBox {
		position:				relative;
		border:					1px solid #909090;
		background:				#f8f8f8;
		background-color: #ffffff !important;
		border: none;
		border-bottom: 1px solid #909090;
		font-size:				26px;
		padding:				10px 18px 10px 0;
		margin-bottom:			17px;
	}
	.sectionBox::after {
		position: absolute; bottom: -21px; left: 21px; height: 21px; width: 26px;
		background: transparent url(../images/public/panels/boxNib.gif) no-repeat;
	/*	content: '';*/
	}
	.sectionBox.green  { border-color: #6c9c31; background: #eef8e4; }
	.sectionBox.green::after  { background-image: url(../images/public/panels/boxNibGreen.gif); }
	.sectionBox.blue   { border-color: #558ccc; background: #f3f7fd; }
	.sectionBox.blue::after   { background-image: url(../images/public/panels/boxNibBlue.gif); }
	.sectionBox.red    { border-color: #b80000; background: #ffffff; }
	.sectionBox.red::after    { background-image: url(../images/public/panels/boxNibRed.gif); }
	.sectionBox.orange { border-color: #fc8100; background: #fdf4ea; }
	.sectionBox.orange::after { background-image: url(../images/public/panels/boxNibOrange.gif); }
	
	.sectionBox.blueHover:hover { border-color: #558ccc; background: #f3f7fd; }
	.sectionBox.blueHover::after:hover { background-image: url(../images/public/panels/boxNibBlue.gif); }
	.sectionBox div.seeAll {
		position:					absolute;
		right:						10px;
		top:						7px;
		width:						150px;
		height:						36px;
	/*	background:					url(../images/public/icons/circlePlusBlack.gif) no-repeat 100% 0%;*/
		text-align:					right;
		font-size:					16px;
	/*	padding-right:				42px;*/
		padding-top:				8px;
	}
	.sectionBox:hover div.seeAll {
	/*	background-image: url(../images/public/icons/circlePlusBlue.gif);*/
		color:						#558ccc;
	}
	
	.sectionBox div.secure {
		position:					absolute;
		right:						10px;
		top:						7px;
		width:						150px;
		height:						36px;
		background:					url(../images/public/icons/iconLock.gif) no-repeat 100% 0%;
	}
	
	ul.FAQList, ul.greenBullets {
		padding-left:				15px;
		margin-left:				15px;
		margin-bottom:				20px;
		font-size:					16px;
	}
	ul.FAQList li, ul.greenBullets li {
		padding-bottom:				8px;
		color:						#6c9c31;
		list-style-type:			disc;
	}
	ul.FAQList li { cursor: pointer; }
	ul.FAQList li a {
		color:						#6c9c31;
		text-decoration:			underline;
	}
	ul.FAQList li p { margin: 0 40px 0 20px; }
	.FAQDiv { margin-top: 20px; font-size: 16px; }
	.FAQDiv .theQuestion { color: #558ccc; font-size: 22px; }
	.FAQAnswer { padding-bottom: 10px; text-align: justify; }
	.FAQAnswer p { padding-bottom: 0px; }
	.FAQAnswer ol, .FAQAnswer ul { list-style-type: decimal; padding-left: 40px; text-align: left; }
	.FAQAnswer ol li { margin-bottom: 6px; list-style-type: decimal; }
	img.right { margin: 0 0 10px 20px; }
	img.left  { margin: 0 20px 10px 0; }
	
/* End SECTION::FAQ Page
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/* SECTION::Legal  */

.legalText {
	margin-top: 50px;
/*	border:					1px solid #A5ACB2;*/
	padding:				20px;
	font-size: 16px;
	line-height: 1.5em;
	color:					#6d6E71;
}

.legalText h1, .legalText h2, .legalText h3 {
	margin: 15px 0 10px;
	text-transform: uppercase;
}
.legalText h1 {
	font-size:				26px;
/*	color:					#6d6E71; */
}

.legalText h2 {
	background:				transparent;
	padding-left:			0px;
	font-weight:			500;
	padding-top:			8px;
	font-size:				24px;
/*	color:					#558CCC; */
}
.legalText h3 {
	margin: 15px 0 15px;
}
.legalText li { list-style-type: decimal; }
.legalText ol ol li { list-style-type: lower-roman; }

.legalText ul, .legalText ol { margin: -10px 0 0 30px; padding-bottom: 0px; }
.legalText ul li, .legalText ol li { margin: 10px 0px; }
.legalText ul, .legalText ol ol { margin: -5px 0 0 30px; padding-bottom: 0px; }


/* End SECTION::Legal
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Login Widget  */
#loginWidget {
	width:					300px;
	height:					180px;
}
#loginWidget #userAccountTable { width: 100%; }
#loginWidget #userAccountTable .firstTD { width: 100px; }
#loginWidget #userAccountTable .secondTD { width: 200px; }
#loginWidget #userAccountTable input.text { width: 196px; }
#loginWidget #loginMessage { font-size: 10px; }

#loginWidget #loginHelperTable { width: 300px; }
#loginWidget #loginHelperTable input.text { width: 281px; }
#loginWidget #loginHelperTable td { text-align: left; }

#loginWidget #loginHelperCompletion { padding: 0px; font-size: 11px; }

#loginWidget #loginHelperForm input[type=text] { width: 100%; margin: 4px 0; }

/* End SECTION::Login Widget
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Inputs  */
input[type=text], input[type=password], select, .textInput, textarea {
	border: 1px solid #bbbbbb;
	font-size: 11px;
	-webkit-appearance: none;
}
input[type=text]:focus, input[type=password]:focus, select:focus, .textInput:focus, textarea:focus {
	border-color: #429ada;
	outline: 0;
}
input[type=text], input[type="password"] {
	padding:			2px 3px;
	height:				19px;
}
select { padding: 8px 8px; height: auto;  /* inside border */ }
textarea { padding: 2px 3px; font-family: helvetica, serif; }
textarea[disabled] { background-color: f4f4f4; color: #bbb; }

.bigInputs input[type=text], .bigInputs input[type=password], .bigInputs textarea, .bigInputs select, .bigInputs .textInput {
	font-size:				18px;
/*	height:					28px;*/
}
.bigInputs .textInput {
	padding: 4px 6px;
	color: #000;
}

/* End SECTION::Inputs
/*------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------*/
/* SECTION::Sign Up Page  */
	#planBar {
		background:				transparent url(../images/public/bars/bluePlans.gif) repeat-x;
	}
	
	#planBar .planDiv {
		position:				relative;
		float:					left;
		width:					280px;
		padding:				20px;
		margin-left:			40px;
		text-align:				center;
		background:				#fff;
		font-size:				15px;
		line-height:			20px;
	}
	#planBar .firstPlan { margin-left: 2px; }
	#body-signUp #planBar .planDiv { border: 2px solid #558ccc; }
	
	#planBar .planDiv h2 {
		color:					#558CCC;
		font-size:				38px;
		line-height:			38px;
		font-weight:			900;
		margin:					0 0 4px 0;
		text-transform:			uppercase;
	}
	#planBar .planDiv h3 {
		color:					#FC8100;
		font-size:				18px;
	}
	#planBar .planDiv hr {
		color:					#558CCC;
		background-color:		#558CCC;
		height:					1px;
		margin:					6px 0px;
	}
	
	
/* End SECTION::Sign Up Page
/*------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------*/
/* SECTION::Affiliates Sign Up Page */

	#planBar .planDiv {
		padding:				10px;
		width:					280px;
	}
	#planBar .planDiv h2 {
		font-size:				20px;
		line-height:			20px;
	}
	#planBar .planDiv h3 {
		color:					#000000;
		font-size:				18px;
	}
	#planBar .planDiv p {
		text-align:				justify;
		font-size:				13px;
		line-height:			16px;
	}
	
	div.totalEarnings {
		text-align:				left;
		background-color:		#f3f7fd;
		font-size:				16px;
		margin:					10px -10px;
		padding:				5px 10px;
		font-size:				14px;
		color:					#558ccc;
	}
	div.totalEarnings .amount {
		float:					right;
		font-size:				18px;
		font-weight:			bold;
		color:					#000;
	}
	div.totalEarnings .cents { font-size: 12px; }
	.earningsGrid { margin: 0px -4px 0 0; }
	.earningsGrid .square {
		border:					1px solid #e9e9e9;
		width:					62px;
		height:					50px;
		margin:					0 4px 4px 0;
		text-align:				center;
		float:					left;
	}
	.earningsGrid .square div.header {
		color:					#558ccc;
		background-color:		#f3f7fd;
		font-size:				11px;
		padding:				1px;
		margin-bottom:			2px;
	}
	.earningsGrid .square .cents { font-size: 10px; }
	.earningsGrid .twoLines { font-size: 10px; line-height:	 11px; }

/* End SECTION::Affiliates Sign Up Page
/*------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------*/
/* SECTION::API Docs Page */


/* End SECTION::API Docs Page
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Structural Building Blocks  */

#loadingMessage { display: none; z-index: 30000; position: fixed; top: 1px; right: 1px; border: 2px solid #6C9C31; }
#loadingMessage div { background: #fff; color: #6C9C31; border: 3px solid #DAE6CB; padding: 7px 8px; font-size: 14px; }

.greenResultBox {
	border:				1px solid #69ac31;
	background:			#E5F2D5;
	padding:			10px 20px;
	font-size:			15px;
	color:				#000;
	margin:				20px auto;
}
	.greenResultBox h1 { color: #000000; font-weight: 500; font-size: 32px; }
	.greenResultBox h2 { color: #000000; font-weight: 100; font-size: 32px; }
	.greenResultBox h3 { color: #000000; font-weight: 900; font-size: 24px; }
.boxGradient {
	background: #ebf4e1; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #DAEAC8 0%, #7CA846 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#DAEAC8), color-stop(100%,#7CA846)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #DAEAC8 0%,#7CA846 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #DAEAC8 0%,#7CA846 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #DAEAC8 0%,#7CA846 100%); /* IE10+ */
	background: linear-gradient(-45deg,  #DAEAC8 0%,#7CA846 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DAEAC8', endColorstr='#7CA846',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
a:hover .boxGradient { text-decoration: none !important; }
.boxGradient.clickable:hover { box-shadow: 0 0 21px #abd673; }


.section {
	padding:				40px 20px;
	background:				transparent url(../images/public/bars/sectionDelimeter.gif) repeat-x;
}



.leftColumnText ul { margin: 1em 0 2em 0; }
.leftColumnText ul li { margin: 0 0 16px 40px; }


ul.plusList li {
	background:				url(../images/public/icons/plusBullet13.gif) no-repeat 0 3px;
	padding:				0px 0 2px 25px;
	list-style-type:		none;
}
ul.spaced li { padding-bottom : 14px; }


	.stepIcon { background: no-repeat 0px 3px; min-height: 45px; padding-left: 50px; }
	.stepIcon.step1 { background-image: url(../images/public/icons/circle1.gif); }
	.stepIcon.step2 { background-image: url(../images/public/icons/circle2.gif); }
	.stepIcon.step3 { background-image: url(../images/public/icons/circle3.gif); }
	.stepIcon.step4 { background-image: url(../images/public/icons/circle4.gif); }
	.stepIcon.step5 { background-image: url(../images/public/icons/circle5.gif); }
	.stepIcon.step6 { background-image: url(../images/public/icons/circle6.gif); }
	
	
	.blugBGGradient { background: transparent url(../images/public/bars/bluePlans.gif) repeat-x; }
	
/* End SECTION::Structural Building Blocks
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Buttons  */
.button.jumbo, input[type=submit].jumbo {
	padding: 12px 16px;
	height: auto;
	font-size: 20px !important;
}

input[type=text].jumbo, input[type=password].jumbo, select.jumbo, textarea.jumbo { font-size: 18px; }
input[type=text].jumbo, input[type=password].jumbo, select.jumboX {
	padding: 13px 16px;
	height: auto;
}
	.jumbo { font-size: 20px; }
	.jumbo .nonJumbo, .jumbo .nonJumbo select, .jumbo .nonJumbo input,
	.regularSize, .regularSize select, .regularSize input { font-size: 12px; }
	
	.jumbo .spacedOut td, .jumbo.spacedOut td { height: 46px; }

input[type=submit], input[type=button] {
	padding: 1px 11px 2px;
}

/* End SECTION::Buttons
/*------------------------------------------------------------------------------*/




.helpLink {
	display:				inline-block;
	margin:					0 4px;
}
.helpLink span {
	display:				inline-block;
	width:					15px;
	height:					13px;
	background:				#6c9c31 url(../images/icons/iconInfo.png) left 50% no-repeat;
}
	.borderBaseColor { border-color: #6C9C31; }
	.matted { padding: 7px; border-width: 1px; border-style: solid; box-shadow: 2px 4px 3px rgba(0, 0, 0, .3); }

/*------------------------------------------------------------------------------*/
/* SECTION::Global Utility  */
	.CAGreen, a.CAGreen		{ color: #6C9C31; }
	.CAOrange, a.CAOrange	{ color: #FC8100; }
	.CABlue	, a.CABlue		{ color: #558CCC; }
	.alertRed				{ color: #B7111B; }
	.whiteOnGreen			{ color: #ffffff; background-color: #6C9C31; }

	a.boxed img, img.boxed { border: 1px solid #000; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
	
	.largeContent p, p.largeContent { margin: 5px 0px 20px 0px; font-size: 18px; }
	
	.bigGreen { font-size: 22px; font-weight: 700; color: #6C9C31; }
	.helpText { font-size: 13px; color: #888; font-style: italic; }
	
.bigGreenButton, input[type=submit].bigGreenButton {
	display:				inline-block;
	border:					none;
	box-shadow:				none;
	color:					#ffffff !important;
	text-align:				center;
	transition: background-color linear 0.2s;
	font-size:				26px;
	font-weight:			bold;
	border-radius:  5px;
	padding:				8px 20px;
	background: #6c9c31;
	height: auto;
	line-height: normal;
}
.bigGreenButton:hover, input[type=submit].bigGreenButton:hover {
	background: #429ada;
	color: #fff !important;
	text-decoration:		none;
}
.bigGreenButton:disabled, input[type=submit].bigGreenButton:disabled,
.bigGreenButton:active, input[type=submit].bigGreenButton:active {
	color: #ffffff !important;
}

.oldBigGreenButton {
	text-shadow:			0 1px 1px #000;
	box-shadow:				0 0 11px #abd673;
	
	background: -moz-linear-gradient(top,  #abd673 0%, #6f9f34 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abd673), color-stop(100%,#6f9f34)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #abd673 0%,#6f9f34 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #abd673 0%,#6f9f34 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd673', endColorstr='#6f9f34',GradientType=0 ); /* IE6-9 */
}

@media only screen and (max-width: 600px) {
	.bigGreenButton { margin-bottom: 10px; }
}
@media only screen and (max-width: 400px) {
	.bigGreenButton { width: 100%; }
}

.blueButton, input[type=submit].blueButton {
	display:				inline-block;
	border:					none;
	box-shadow:				2px 2px 3px rgba(0, 0, 0, .5);
	text-shadow:			1px 1px 2px rgba(0, 0, 0, .5);
	transition: text-shadow linear 0.2s;
	color:					#ffffff !important;
	font-size:				18px;
	font-weight:			500;
	border-radius:			5px;
	padding:				1px 8px;
	text-decoration:		none !important;
	background: #75acec; /* Old browsers */
	background: -moz-linear-gradient(top,  #75acec 0%, #558ccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75acec), color-stop(100%,#558ccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #75acec 0%,#558ccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #75acec 0%,#558ccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #75acec 0%,#558ccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #75acec 0%,#558ccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75acec', endColorstr='#558ccc',GradientType=0 ); /* IE6-9 */
}

.blueButton:hover, input[type=submit].blueButton:hover {
	text-shadow:			0 0 2px rgba(255, 255, 255, .3);
	text-decoration:		none;
}

.blueButton:disabled, input[type=submit].blueButton:disabled {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #888888 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#888888)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#888888 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#888888 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#888888 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#888888 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#888888',GradientType=0 ); /* IE6-9 */
}

/* End SECTION::Global Utility
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/* SECTION::Roar  */
.roar-body { position: absolute; text-align: left; z-index: 100001; transform: translateZ(1px); }
.roar {
	position: absolute;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #429ada;
  box-shadow: 0 0 9px 1px #429ada88;
	color: #fff;
	width: 300px;
	max-width: calc(100vw - 60px);
	cursor: pointer;
}
	
.roar h3 { color: #fff; font-size: 20px; font-weight:400; margin: 0; padding: 0; }
.roar p { margin: 6px 0 0 0; padding: 0; font-size: 14px; }
.roar a:link, .roar a:visited, .roar a:active { color: #fff; }
.roar-bg { display: none; }

/* End SECTION::Roar
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Universal Utility  */

	.left       { float: left; }			td.left, th.left	{ text-align: left;  float: none; }
	.right      { float: right;}			td.right,th.right	{ text-align: right; float: none; }
	.clear      { clear: both; }			td.top, table.top td, tr.top td { vertical-align: baseline; padding-top: 6px; }
											td.bottom			{ vertical-align: bottom; }
	.inline		{ display: inline; }
	.block		{ display: block; }
	.inlineBlock{ display: inline-block; }

	.textLeft	{ text-align: left; }
	.textRight	{text-align: right;}
	.justify	{ text-align: justify; }
	.bold		{ font-weight: 700; }
	.relative	{ position: relative; }
	.absolute	{ position: absolute; }
	.clickable	{ cursor: pointer; }

	.center     { text-align: center; }				/* CENTER elements contained by me  */
	.centered   { display: block; margin: 0 auto; } /* make me CENTERED in my container */

	.verticalMiddle td, td.verticalMiddle	{ vertical-align: middle; }
	div.verticalMiddle						{ vertical-align: middle; }
	.verticalMiddle>*						{ vertical-align: middle; }

	.hidden     	{ display: none; }
	.truncatedText	{ overflow: hidden; }
	.hideOverflow	{ overflow: hidden; }

	.nextElement	{ margin-top:  6px; }
	.nextSection	{ margin-top: 16px; }

/* End SECTION::Universal Utility
/*------------------------------------------------------------------------------*/