@charset "utf-8";
/* The Key Youth, Inc. CSS Document */

/* Global properties ======================================================== */
* { margin:0; padding:0;}     /* turns off extra spacing around paragraphs*/

html{
	height:100%;				/* Force vertical scrollbars in VTz + Opera to prevent 'jumping' */
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
}

body {	
	background-color:#ffffff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-color: black;
}

img { max-width: 100%; height: auto;}

table {border: none;
    
}
a:link, a:visited, a:active {
	color: #7bbbc4;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #bce3e5;
	font-weight: bold;
	text-decoration: none;
}

.BannerContainer {	background-color:#939598; overflow:auto; 
padding-top:8px;}
.BoundaryTop { 	width: 1000px; 	margin: auto;}

.BannerTableLmobile {	display: none; }

.BannerTable {	float: left;}
.BannerTableL {	width: 20%;}
.BannerTableM {	width: 60%; text-align: center;}
.BannerTableR {	width: 20%; }
.BannerTableR td {text-align: right;}

.NavBar { clear:both;
	background-color:#7bbbc4;
	padding-top: 5px;
	padding-bottom: 5px;
}
.NavStripe {  clear:both;
	background-color:#bce3e5;
	padding-top: 5px;
}
.NavTable {
	max-width:1020px;
	margin:auto;
	padding-top: 10px;
	padding-bottom: 10px;
}


.ColorAqua		{color: #7bbbc4;}
.ColorGray		{color: #939598;}
.ColorAquaLt 	{color: #bce3e5;}

.tagline, .tagline2 {	
	text-align: left;
	color: #000;		
	font-family: 'Open Sans', Helvetica, sans-serif;
	margin-top: 3px;
	margin-bottom:3px;
	margin-left: 0px;
}
.Slogan		{
	text-align: center;
	vertical-align: top;
	color: #bce3e5;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
}
h1{	
	text-align: center;
	vertical-align: top;
	color: #7bbbc4;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom:20px;
	margin-left: 0px;
}

h2{	
	color: #939598;		
	font-family: 'Open Sans', Helvetica, sans-serif;
	text-align: center;
	vertical-align: top;
	font-weight: bold;
}
h3{	
	text-align: center;
	vertical-align: top;
	color: #bce3e5  
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
	margin-top:10px;
	margin-bottom:10px;
	margin-left: 0px;
}
h4 {clear: both; margin-bottom: 10px;}

img {border:0px; padding:0px;}
img.framed {border:1px; padding:0px; border-color:#000;}

img.center {					/* This is to center an image for all browsers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.help-btn {
	width: 120px;
	float: right;
  background: #bce3e3;
  background-image: -webkit-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -moz-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -ms-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -o-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: linear-gradient(to bottom, #bce3e3, #7bbbc4);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
	padding: 10px 7px 10px 2px;
  margin-top: 10px;
  font-size: 14px;
  text-decoration: none;
}
/*
.help-btn:hover {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #dcf1f3, #bce3e5);
  background-image: -moz-linear-gradient(top, #dcf1f3, #bce3e5);
  background-image: -ms-linear-gradient(top, #dcf1f3, #bce3e5);
  background-image: -o-linear-gradient(top, #dcf1f3, #bce3e5);
  background-image: linear-gradient(to bottom, #dcf1f3, #bce3e5);
}
*/
.help-btn a {
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
  color: #000;
}
.help-btn a:hover {
  color: #939598;
}

/*
input[type=submit], button[type=submit] {
	width: 120px;
	float: right;
  background: #bce3e3;
  background-image: -webkit-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -moz-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -ms-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: -o-linear-gradient(top, #bce3e3, #7bbbc4);
  background-image: linear-gradient(to bottom, #bce3e3, #7bbbc4);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
	padding: 5px 5px 5px 5px;
  margin-top: 10px;
  font-size: 14px;
  text-decoration: none;
    cursor:pointer;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
  color: #000;

}
*/

.KeepTogether {display: inline-block;}

.Centered { margin: 0 auto; }

.Clear {clear: both;}
.ClearL {clear: left;}

.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.Copyright {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	vertical-align: middle;
	font-weight: normal;
}


.FrameAqua {
	background-color: #7bbbc4;
	padding: 4px;
	-webkit-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.FrameGray {
	background-color: #939598;
	padding: 4px;
	-webkit-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}

.Footer {
	background-color:#939598;
	border-bottom-color: #939598;
	border-top-style: ridge;
	border-top-width: medium;
	clear: both;
}

.Link_Red:link, .Link_Red:visited, .Link_Red:active { color: #b92131;	}
.Link_Red:hover {	color: #144071;	}

.Link_Copyright:link, .Link_Copyright:visited, .Link_Copyright:active {	color: #fff; font-weight: normal;}
.Link_Copyright:hover {	color:#bce3e5; font-weight: normal;}

.Link_Nav:link, .Link_Nav:visited, .Link_Nav:active {
	color: #fff;		
	font-family: Calibri, Arial, Helvetica, serif;
	font-weight: bold;
}
.Link_Nav:hover {
	color: #bce3e5;		
	font-family: Calibri, Arial, Helvetica, serif;
	font-weight: bold;
}


.PadL {padding-left: 10px;}
.PadR {padding-right: 10px;}

.MarginR {margin-right: 10px;}
.MarginL {margin-left: 10px;}
.MarginR30 {margin-right: 30px;}
.MarginL30 {margin-left: 30px;}
.MarginB {margin-bottom: 10px;}

.Max50 {max-width: 30%;}

.PhoneMain{
	color: #000;		
	font-family: Calibri, Arial, Helvetica, serif;
	font-weight: bold;
	text-align: right;
}
.PhoneMain a { color: #000; }
.PhoneMain a:hover { color: #bce3e5; }

td.SupportDetails {
	font-size: 11px;
	vertical-align: top;
	padding: 0 10px 0px 10px!important;
}

.TextBody {
	color: #000;
	text-align: left;
}

ul {
	margin-left: 30px;
}

.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}

.W1000 {max-width: 1000px; margin: auto;}
.W1040 {max-width: 1040px; margin: auto;}
.W1020 {max-width: 1020px; margin: auto;}


ul.nav-main {
position:relative;
z-index:597;
width: 100%;
}
ul.nav-main, ul.nav-main li {
list-style:none;
margin:0;
padding:0;
display:inline;
list-style-type:none;
}
ul.nav-main li:hover > ul {
visibility:visible;
}
ul.nav-main li:hover {
position:relative;
z-index:599;
cursor:pointer
}
/* DISTANCE BETWEEN MENU ITEMS */
ul.nav-main li { display:inline; Padding-right:27px; padding-left:27px;}
ul.nav-main li.first {padding-left:10px; padding-right:27px;}
ul.nav-main li.last {padding-right:10px; padding-left:27px; }


ul.nav-sub li a.Link_Nav:hover {
color:#000;
}

/* DEFAULT FONT SIZES */ 
.tagline { font-size: 25px; font-style: italic;}
body {	font-size: 18px;}
.Link_Copyright {font-size: 14px; line-height: 30px; font-weight: normal;}
.Link_Nav {	font-size: 22px; }
.TextBody {	font-size: 18px; line-height: 24px;}
.PhoneMain {font-size: 16px;}
h1{ font-size: 22px; line-height: 26px;}
h2 {font-size: 20px; line-height: 24px;}
.Copyright{font-size: 14px;}

/* Large devices */ 
@media (min-width: 1020px) { 
	.MobileHide, .MobileSmallHide {display: inline-block;}
	.MobileShow, .MobileSmallShow {display: none;} 
	.table1000 {   display: block; width: 1000px; margin: auto;   }
}
	
/* Tablets to Desktops */ 
@media all and (max-width: 1019px) {
	.BoundaryTop {width: 100%; }
	.W1020 {width: none; max-width: none; padding-left: 10px; padding-right: 10px;}
	.W1000 {width: none; max-width: none; }
	.table1000 {   display: block; width: none; margin: auto;   }
	.BannerTableR { padding-right: 5px; }
	.NavBar {padding-left: 0px; padding-right: 0px;}
	.NavTable {padding-left: 10px; padding-right: 10px;}
	ul.nav-main li.first, ul.nav-main li.last {padding-left: 0px; padding-right: 0px;}
	.Footer {padding-left: 10px; padding-right: 10px;}
	.MobileShow {display: inline-block;}
	.MobileHide, MobileSmallHide, MobileSmallShow {display: none;}
	.FrameAqua {margin-left: 10px; margin-right: 10px;}
	.PhoneMain {font-size: 14px; padding-right: 10px; text-align: right;}
} 

/* Phones */ 
@media all and (max-width: 767px) {
	.BannerTableL {	display: none; }
	.BannerTableLmobile { display: inline-block; float: right; }
	.BannerTableR {	float: right; }
	.BannerTableM {	display: block; }
	.MobileHide, MobileSmallHide, .MobileSmallShow { display: none;}
	.MobileShow { display: inline-block;}
	.Slogan {margin-left: 10px; margin-right: 10px;}
	.PhoneMain {font-size: 14px;}
	.Link_Nav {	font-size: 18px; }
	.TextBody {font-size: 16px; line-height: 20px;}
	h1{ font-size: 20px;}
	h2 {font-size: 16px; line-height: 20px;}
	.ImgMobile {padding-left: 30px; padding-right: 20px; float: left;}
	ul.nav-main {padding-left: 10px; padding-right: 10px;}
	ul.nav-main li.first {padding-right:12px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:12px;}
	ul.nav-main li {padding-right:12px; padding-left:12px;}
	.BannerTableM {width: 100%;}
	.BannerMobileLine2 {display: block; text-align: center;}
	.BannerTableLmobile {float: left; margin-left: 10px; width: 30%;}
	.BannerTableLmobile img {margin-left: auto; margin-right: auto;}
	.BannerTableR {width: 65%; margin-top: 30px; }
	.BannerTableR td {text-align: center; }
	.PhoneMain {float: none; text-align: center; }
	.help-btn {float: none; margin-right: auto; margin-left: auto;}

}


/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) { 
	.Slogan {font-size: 14px; }
	.FrameAqua {margin-left: 10px; margin-right: 10px;}
	.MobileSmallShow {display: block;}
	.MobileSmallHide {display: none;}
	.NavTable { padding-top: 0px;  padding-bottom: 5px;	}
	.Link_Nav {	font-size: 16px; }
	.TextBody {	font-size: 14px; line-height: 18px;}
	ul.nav-main li {padding-right:8px; padding-left:8px;}
	ul.nav-main li.first {padding-right:8px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:8px;}
}

/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 320px) {
	.Slogan {font-size: 12px;}
	ul.nav-main li {padding-right:5px; padding-left:5px;}
	ul.nav-main li.first {padding-right:5px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:5px;}
	.TextBody {	font-size: 12px; line-height: 16px;}
}