/* -------------------------------------------------------------
// *** 
--------------------------------------------------------------*/

@import "http://fonts.googleapis.com/css?family=Oswald";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

/* -------------------------------------------------------------
// *** Basic Stuff
--------------------------------------------------------------*/

	html {
		font-size: 100%;
		font-family: 'Open Sans', sans-serif;
	}

	body, #page {
		position: relative;
	}

	p.open-sans {
		font-family: 'Open Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: "Oswald", Arial, Helvetica, sans-serif;
		line-height: 1.2em;
		font-weight: normal;
	}

	h1 {
		color: #444;
	}


	.primary-content {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	div.verification-sitelock img {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.secondary-content section.add-this {
		margin-bottom: 1em;
	}


	.secondary-content section .gsc-control-cse {
		margin-left: 0;
		padding-left: 0;
	}

	a.external {
		/* This used target="_blank", but that was too global */
		padding-right: 20px;
		background-image: url(../assets/widgets/page_white_go.png);
		background-repeat: no-repeat;
		background-position: right center;  
	}

/* -------------------------------------------------------------
// *** Colors
--------------------------------------------------------------*/

	/* was #477AAF */
	h2, .aider, .reg {
		color: #86b6ce;
	}
	#footer {
		border-top-color: #86b6ce;
	}
	.motiv {
		color: #CBCCCE;
	}
	
	#home a.button {
		background-color: #86b6ce; 
	}
	
	#home .application a {
		border-color: #86b6ce;
	}

	
/* -------------------------------------------------------------
// *** Logo
--------------------------------------------------------------*/
	#logo {
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		font-weight: 800;
	}
	#logo .reg {
		font-variant-position: normal;
		margin-left: 0.1em;
		font-size: 0.5em;
	}

/* -------------------------------------------------------------
// *** Home Page and Full-Width Pages
--------------------------------------------------------------*/
	body.full-width .primary-content {
		width: 100%;
	}

	body.full-width .secondary-content {
		display: none;
	}

	#home section.main {
		padding: 1em 0;
		margin: 1em 0;
		clear: both;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #86b6ce;
	}
	
	#home section.main.featured-content {
		/* Don't need it here */
		border-bottom: none;
	}

	#home section.main:nth-child(odd) {
		background-color: #fff;
	}

	#home section.main:nth-child(even) {
		background-color: #fff;
	}
	
	#home section.main h1 {
		text-align: center;
		font-size: 2rem;
	}
	
	#home section.intro p {
		font-size: 1rem;
		line-height: 1.6em;
	}

	/* Some init defaults for primary and secondary */
	#home section.main .primary {
		width: 100%;
		float: left;
	}
	#home section.main .secondary {
		display: none;
	}
	
	#home section.testimonials .secondary .fa {
		font-size: 12rem;
		color: orange;
	}

	#home section.featured-content .secondary .fa {
		font-size: 12rem;
		color: #ffd700;
	}
	
	#home section.featured-content .item {
		margin-bottom: 1.5em;
	}
	
	#home section.featured-content .subhead {
		margin-left: 2em;
	}
	
	#home section.featured-content .item, 
	#home section.testimonials .primary p {
		padding-bottom: 1rem;
		border-bottom: 1px solid #ccc;
	}

	.primary .device-main {
		display: block;
		float: left;
		max-width: 132px;
		margin: 1em 1em 1em 0;
	}
	.secondary .device-main {
		display: none;
	}
	
	.featured-content .secondary {
		background-image: url(../images/spotlight.png);
		background-repeat: no-repeat;
		background-position: right top;
		min-height: 188px;
	}
	
/* -------------------------------------------------------------
// *** CTA DIVs in secondary-content
--------------------------------------------------------------*/

	.secondary-content div.cta, 
	.primary-content div.cta {
		padding: .25em .5em;
		border-width: 1px;
		border-style: solid;
		border-radius: 9px;
		margin-bottom: 1em;
	}
	.secondary-content div.cta a {
		text-decoration: none;
	}

	.secondary-content div.cta a:hover {
		text-decoration: underline;
	}

	.secondary-content div.cta:nth-child(odd) {
		background-color: #FFFFCC;
	}

	.secondary-content div.cta:nth-child(even) {
		background-color: #FFCC66;
	}
/* -------------------------------------------------------------
// *** CTA Divs in primary content
--------------------------------------------------------------*/

	/* From Steve: */
		.primary-content div.cta a {
			text-decoration: none;
		}	
		.primary-content div.cta a:hover {
			text-decoration: underline;
		}	
		.primary-content div.cta:nth-child(odd) {
			background-color: #FFFFCC;
		}	
		.primary-content div.cta:nth-child(even) {
			background-color: #FFFFCC;
		}

/* -------------------------------------------------------------
// *** Mobile First!
--------------------------------------------------------------*/

	#logo {
		font-size: 2rem;
		letter-spacing: -2px;
	}
	.tagline {
		font-size: .75em;
	}
	
	.button-vid, .button-vid > img {
		width: 200px;
		height: auto;
	}
	
	/* We're dropping the large fontawesomes */
	#home .application i.fa:before, 
	#home .application .text {
		display: none;
	}

	/* moved */
	#home .application.health-care a {
		background-image: url(../images/hp_healthcare.jpg);
	}
	#home .application.for-kids a {
		background-image: url(../images/hp_education.jpg);
	}
	#home .application.missing-link a {
		background-image: url(../images/playbtn.jpg);
	}
	#home .application.sports a {
		background-image: url(../images/hp_sports.jpg);
	}
	#home .application.business a {
		background-image: url(../images/hp_biz.jpg);
	}
	#home .application.personal-improvement a {
		background-image: url(../images/hp_persimp.jpg);
	}

	.applications .listing {
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		width: 122px;
	}

	#home .application a {
		display: block;
		width: 120px;
		height: 96px;
		float: none;
		text-align: center;
		border-width: 1px;
		border-style: solid;
		margin: 8px 0;
		border-radius: 9px;
		-moz-border-radius: 9px;
		-webkit-border-radius: 9px;
		position: relative;
		text-decoration: none;
		background-position: 0 0;
		background-repeat: no-repeat;
	}

	#home .application a:hover {
		border-color: #000;
		box-shadow: 1px 1px 4px 0px #333;
	}

	#page, #footer, #header, #nav-all {
		/*width: 20rem;*/
		width: auto;
		margin: 0 auto;
		padding: 0;
	}

	#home .application .text {
		font-size: 0.8rem;
	}
	i.fa {
		margin-right: 12px;
		width: 20px;
		text-align: center;
	}


	#home a.button {
		background-image: none;
		background-repeat: repeat;
		background-position: 0 0;
		/*border: 1px solid;*/
		border-radius: 12px;
		color: #fff;
		display: inline-block;
		margin-top: 1em;
		margin-bottom: 1em;
		padding: 0.5em 1em;
		text-decoration: none;
		font-weight: 600;
		/*box-shadow: 1px 1px 1px #333;	*/
	}

	#home a.button:after {
		content: "...";
	}
	#home a.button:hover {
		/*box-shadow: 2px 2px 4px #333;	*/
		background-color: #477aaf;
	}


	/* Smallest here mobile first */
	#header {
		position: relative;
	}

	#footer {
		clear: both;
		font-size: 0.8rem;
		border-top-width: 8px;
		border-top-style: solid;
		padding-top: 2em;
	}


	#footer .address span, 
	#footer .tel span {
		display: block;
	}

	#footer .tel span {
		padding:  .25em 0;
	}

	#footer .section {
		margin: 0.6em 0;
	}

	.primary-content {
		width: auto;
	}
	.secondary-content {
		padding: 1em 0;
		border-style: solid;
		border-width: 8px 0 0;
		border-color: #477aaf;
		font-size: .8em;
		/*line-height: ;*/
		color: #888;
		margin: 2em 1em;
	}

	#nav-all {
		position: absolute;
		top: 101%;
		left: -5px;
		right: -5px; 
		text-align: center;
		padding: 2em 0;
		background-color: #fff;
		overflow: hidden;
	}

	#page {
		font-size: 1.3rem;
	}

	#nav-all nav {
		margin-bottom: 2em;
	}

	nav ul {
		list-style-type: none;
		list-style-position: outside;
		margin: 0;
		padding: 0;
	}

	#nav-all .nav a {
		display: block;
		margin-bottom: 1px;
		padding: 0.75em 0;
		text-decoration: none;
		font-family: Arial, Verdana, Helvetica, sans-serif;
	}

	.nav.nav-global a {
		background: -webkit-linear-gradient(bottom, #ccc 0%, #ddd 80%);
		background: -moz-linear-gradient(bottom, #ccc 0%, #ddd 80%);
		color: #000;
	}

	.nav.nav-global a:hover {
		background: -webkit-linear-gradient(bottom, #bbb 0%, #ddd 80%);
		background: -moz-linear-gradient(bottom, #bbb 0%, #ddd 80%);
		color: #000;
	}

	.nav.nav-main a {
		background-color: #295267;
		color:  white;
	}

	.nav-applications a {
		color: #fff;
	}
	.nav-applications a.sports {
		color: #000;
	}

	.nav-applications a.health-care {
		color: #000;
	}

	.nav-applications a.children {
		/*background-color: #A65895;*/
		background: -moz-linear-gradient(bottom, #A65895 0%, #d9b6d1 100%);
		background: -webkit-linear-gradient(bottom, #A65895 0%, #d9b6d1 100%);
	}
	.nav-applications a.children:hover {
		/*background-color: #A65895;*/
		background: -moz-linear-gradient(bottom, #753e69 0%, #d9b6d1 100%);
		background: -webkit-linear-gradient(bottom, #753e69 0%, #d9b6d1 100%);
	}

	.nav-applications a.health-care {
		/*background-color: #F2AB61;*/
		background: -moz-linear-gradient(bottom, #F2AB61 0%, #fadbbc 100%);
		background: -webkit-linear-gradient(bottom, #F2AB61 0%, #fadbbc 100%);
	}
	.nav-applications a.health-care:hover {
		/*background-color: #F2AB61;*/
		background: -moz-linear-gradient(bottom, #de7813 0%, #fadbbc 100%);
		background: -webkit-linear-gradient(bottom, #de7813 0%, #fadbbc 100%);
	}

	.nav-applications a.sports {
		/*background-color: #5FB224;*/
		background: -moz-linear-gradient(bottom, #5FB224 0%, #b7e993 100%);
		background: -webkit-linear-gradient(bottom, #5FB224 0%, #b7e993 100%);
	}
	.nav-applications a.sports:hover {
		/*background-color: #5FB224;*/
		background: -moz-linear-gradient(bottom, #4d8f1d 0%, #b7e993 100%);
		background: -webkit-linear-gradient(bottom, #4d8f1d 0%, #b7e993 100%);
	}

	.nav-applications a.business {
		/*background-color: #2C6184;*/
		background: -moz-linear-gradient(bottom, #2C6184 0%, #7eb2d4 100%);
		background: -webkit-linear-gradient(bottom, #2C6184 0%, #7eb2d4 100%);
	}
	.nav-applications a.business:hover {
		/*background-color: #2C6184;*/
		background: -moz-linear-gradient(bottom, #265471 0%, #7eb2d4 100%);
		background: -webkit-linear-gradient(bottom, #265471 0%, #7eb2d4 100%);
	}

	.nav-applications a.personal-improvement {
		/*background-color: #933F32;*/
		background: -moz-linear-gradient(bottom, #933F32 0%, #e0aca5 100%);
		background: -webkit-linear-gradient(bottom, #933F32 0%, #e0aca5 100%);
	}
	.nav-applications a.personal-improvement:hover {
		/*background-color: #933F32;*/
		background: -moz-linear-gradient(bottom, #5a261f 0%, #e0aca5 100%);
		background: -webkit-linear-gradient(bottom, #5a261f 0%, #e0aca5 100%);
	}

	
	/* #477aaf */

	/*
	#nav-all .nav-main a {
		background: -webkit-linear-gradient(bottom, #3d7a99 0%, #86b6ce 80%);
		background: -moz-linear-gradient(bottom, #3d7a99 0%, #86b6ce 80%);
		color: #fff;
	}
	*/
	#nav-all .nav-main a {
		background: -webkit-linear-gradient(bottom, #477aaf 0%, #86b6ce 80%);
		background: -moz-linear-gradient(bottom, #477aaf 0%, #86b6ce 80%);
		color: #fff;
	}

	#nav-all .nav-main a:hover {
		background: -webkit-linear-gradient(bottom, #295267 0%, #86b6ce 80%);
		background: -moz-linear-gradient(bottom, #295267 0%, #86b6ce 80%);
		/* Override with this: */
		background: #477aaf;
		color: #fff;
	}

	.primary-content .callout-quote {
		border: 2px solid #ddd;
		color: #666;
		font-size: 0.8em;
		line-height: 1.5em;
		margin: 3em 1em;
		padding: .5em 1em;
	}

	#nav-jump-link a {
		background: none repeat scroll 0 0 #477aaf;
		border: 1px solid;
		color: white;
		display: inline-block;
		padding: 0.5em 1em;
		text-decoration: none;
		margin-top: .5em;
	}

	#nav-jump-link a:after {
		content: " \25bc";
	}




/* -------------------------------------------------------------
// *** Media Query width >= 640px / 40rem
--------------------------------------------------------------*/
@media screen and (min-width: 40rem) {
	#page, #footer, #header, #nav-all {
		width: 39rem;
	}
	
	.button-vid {
		display: block;
		width: 400px;
		margin: 0 auto;
	}
	.button-vid > img {
		width: 400px;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.applications .listing {
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		width: 620px;
	}

	#home .application a {
		float: left;
		margin: 8px 2px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.primary .device-main {
		display: none;
	}
	.secondary .device-main {
		display: block;
		max-width: 85%;
		float: right;
	}

	
	/* Some init defaults for primary and secondary */
	body#home section.main .primary {
		display: block;
		width: 66%;
		float: left;
	}
	body#home section.main .secondary {
		display: block;
		width: 33%;
		float: left;
	}

	/* Overrides */
	
	body#home section.intro .primary {
		width: 66%;
		float: left;
	}
	
	body#home section.intro .secondary {
		width: 33%;
		float: left;
	}
	
	body#home section.testimonials .secondary {
		float: left;
		width: 33%;
	}
	
	body#home section.testimonials .primary {
		float: left;
		width: 66%;
	}
	
	

	#nav-all {
		position: static;
		border: none;
		display: block;
		clear: both;
		padding: 0 0;
	}
	nav ul {
		margin: 1em 0 0;
	}
	
	nav ul li {
		display: inline;
	}
	
	#nav-jump-link {
		display: none;
	}
	
	#nav-all .nav {
		display: block;
		clear: both;
		margin-bottom: 0;
	}
	
	#nav-all .nav ul {
		display: block;
		margin-bottom: 1em;
		padding: .25em 0;
	}
	
	#nav-all .nav a {
		width: auto;
		float: left;
		margin-right: .5em;
		margin-bottom: 0;
		padding: 0.5em .5em;
	}
	
	#nav-all nav.nav-global {
		margin-bottom: 2em;
	}
	
	#nav-all nav.nav-global a {
		font-size: .75em;
		color: navy;
		border: 1px solid #ddd;
		background: #fff;
	}
	#nav-all nav.nav-global a:hover {
		border-color: #000;
	}
	
	#nav-all nav.nav-main a {
		font-size: .75rem;
		border-radius: 9px;
	}
	#nav-all nav.nav-applications a {
		font-size: .9rem;
		border-radius: 4px;
	}


}
/* -------------------------------------------------------------
// *** Media Query width >= 1024 px / 64rem
--------------------------------------------------------------*/
@media screen and (min-width: 64rem) {
	#page, #footer, #header, #nav-all {
		width: 61.5rem;
	}

	#logo {
		font-size: 3rem;
		letter-spacing: -3px;
	}
	.tagline {
		font-size: 1em;
	}

	.primary-content {
		width: 63%;
		float: left;
		margin-bottom: 2em;
	}
	.secondary-content {
		width: 32%;
		float: right;
		font-size: 0.65em;
		line-height: 1.65em;
		padding: 0;
		border: none;
		margin: 2em 0 0;
	}
	#nav-all nav.nav-main a {
		font-size: 1rem;
		border-radius: 9px;
	}
	
	#footer {
		clear: both;
		font-size: 0.8rem;
		padding-top: 2em;
		border-top-style: solid;
		border-top-width: 8px;
		margin-top: 2em;
		overflow: hidden;
	}	

	/* Home App Buttons at wide-enough */
	
	.applications .listing {
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		width: 650px;
	}
	
	#home .applications .grouped {
		display: block;
		clear: both;
		overflow: hidden;
		width: 420px; /* 120x3 + borders + margins */
		margin: 0 auto 20px;
	}

	#home .application a {
		float: left;
		margin-top: 4px;
		margin-right: 4px;
		margin-bottom: 4px;
		margin-left: 4px;
	}



}

/* -------------------------------------------------------------
// *** Media Query: width >= 1200px /75em
--------------------------------------------------------------*/
@media screen and (min-width: 75rem) {

	#nav-all nav.nav-global {
		margin-bottom: 1em;
	}
	#logo {
		font-size: 5rem;
		letter-spacing: -5px;
	}
	.tagline {
		font-size: 2em;
	}
	
}

/* -------------------------------------------------------------
// *** Misc Stuff
--------------------------------------------------------------*/

	.video-embed {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 25px;
		height: 0;
		border: 1px solid #999;
		margin: 12px auto;
	}
	.video-embed iframe {
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
	}
	
	.button-vid {
  		display: block;
  		margin-right: auto;
  		margin-left: auto;
	}
	.button-vid > img {
  		border: 1px solid #000;
	}

	.inputWide {
		width: 100%;
		padding: 0.5em;
		border: 2px solid #ccc;
		background-color: #dedede;
	}
	
	input[type="text"]:focus, textarea:focus, select:focus, input[type="password"]:focus {
  		background-color: #f5f5f5;
  		border-color: #86b6ce;
	}	
	
	#toc li {
		margin-bottom: .25em;
	}
	#toc a {
		text-decoration: none;
		color: #2c6184;
	}
	#toc a:visited {
		color: #999;
	}
	#toc a:hover {
		text-decoration: underline;
	}
	.faqs-all .to-top {
		font-size: 0.8em;
		margin: 1em 0 0 40px;	
	}