﻿html body {margin: 0;padding: 0;border: 0;color: #000;font-family: Verdana, Arial, Helvetica, sans-serif, impact, "Trebuchet MS";
	font-style: normal;	background-color:#9ABBD4;}
#container {width: 980px;min-width: 320px;margin: 0 auto;padding: 0px 5px;}
#page-content {background-color:white; border-radius: 8px;padding: 5px 5px;margin:5px 0px;}
/* MastHead */
#masthead {margin: 0 auto; width: auto;	height:auto; background-color:#FFFFFF;padding: 0; min-width:320px; min-height: 40px;text-align: center;}
	#masthead > div {color: #305B8B;font-size: 3.0em;font-family:"Arial Narrow Bold", sans-serif;font-weight: bold;text-align: center;
		vertical-align:middle;margin:0 0 0 15px;padding-top:50px;display:inline;}
   /* image of girl */
	#masthead img:first-child {float:right;height:100%;max-height:85px;width:auto;max-width:71px;}
	#masthead img:last-of-type {float:left;height:100%;max-height:65px;width:auto;max-width:78px;margin-top:5px;}
#column_l {clear:left; float: left;	position:relative; width: 320px; margin:0; padding:0;}
#column_r {float: right; position:relative; width: auto; max-width:640px; margin: 0px; padding:0px;}
#adBox {float:left; position:relative; width:100%; height:auto; margin:5px 0px; padding:0px; overflow:hidden;}

/* Styles for Links */
a {color: #CC9900;text-decoration: underline;}
	a:hover {color: #305B8B;text-decoration: underline;}

/* Main css */
h1, h2, h3, h4, h5, h6 {color: #305B8B; text-align: center; font-weight:bold; margin:2px 0px; padding:0; }
p {margin:4px 4px;}
ul, ol {margin-top:5px;list-style-position:inside;}
ol {font-weight:bold;}
.banTop {clear:both;border-top:3px #305B8B solid;border-radius:12px 12px 0px 0px;min-height:10px;background-color:#ffcc33;	margin-top:5px;
	margin-bottom:0px;padding-bottom:0px;}

.Lifeline1000 {background-image:url('../Images/Lifeline-plan-cell-1000-man.jpg');width:340px;height:95px;padding-left:290px;padding-top:170px;border-radius:10px;}
.GrayBorderFancy {margin: 7px 7px;box-shadow: 3px 3px 5px 3px gray;border: 1px gray solid;overflow: hidden;	padding: 0px 0px;border-radius: 10px;}
.BlueBorder {margin:0px 0px 0px 0px;padding: 5px 5px;overflow:hidden;border: thin #9ABBD4 solid;border-radius: 5px;}
.BlueBox {padding: 5px 5px;overflow: hidden;border: thin #9ABBD4 solid;border-radius: 5px;background-color: #E5ECF9;}
.BlueTitleBar {border: thin #000 solid;background-color: #9ABBD4;font-size: 1.25em;font-weight:bold;}
.BlueBorderFancy {margin: 10px 10px;box-shadow: 3px 3px 10px 5px #305B8B;border: 1px #305B8B solid;overflow: hidden;padding: 5px 5px;border-radius: 10px;width:auto;}
.faqs h4 {text-align:left;}
.faqs p {margin:2px 2px 6px 40px;font-size: 8pt;}

.goldBox {margin:0px 0px 0px 0px;padding:5px 5px;overflow:hidden;border: thin #ffcc33 solid;}
.table1 {width:100%; text-align:left;vertical-align:top;background-color:#e5ecf9;font-size:.90em;border: thin #9ABBD4 solid;}
	.table1 span {font-size:.75em;}
.table2 {border:thin #CC9900 solid; width:99%; margin:5px auto;}
.adRibbon {text-align:center; margin:5px auto;overflow:hidden;width:auto;max-width:640px;max-height:60px;}
.imgOperator {float:left;position:relative; margin-right:50px;}
.bgTan {background-color: #EFE0D1;}
.bgYellow {background-color: #FFFFCC;}
.bgGold {background-color: #ffcc33;}
.fontsm {font-size:.75em;}
.fontmed {font-size:1.25em;}
.fontbig {font-size:1.50em;}
.fontjumbo {font-size:2.5em;}
.bold {font-weight:bold;}
.red {color:red;}
.fontBBR {font-size:1.5em; font-weight:bold; color:red;}
.fontMBR {font-size:1.25em; font-weight:bold; color:red;}
.left {text-align:left;}
.center {text-align:center}
.justify {text-align:justify;}
.indent {padding:4px 4px 4px 25px;}
.rm50 {margin-right:50px;}
.floatLeft {float:left;position:relative;margin-right:5px;}
.floatRight {float:right;position:relative;margin-left:5px;}
.clearLeft {clear:left;}

/*  Navigation */
nav {
	}
		/* Turn off the display of the hyperlinks to the menu. Only display them when the screen shrinks */
		/* don't display the links unless the screen shrinks */
	nav > a {display:none;}
  	nav li {position:relative;color: #000;}
		nav li a {color: #000; display: block;	text-decoration:none;}
		#nav li a:active {background-color: #9ABBD4 !important;	color: #305B8B;}
	nav > ul {height: 2.0em;background-color: #e5ecf9; list-style-type: none; 
			/* the "relative" position will absolutely position the sub-menus according to the main nav bar */;
			position: relative; /* inline-table will condense the width of the menu to fit display: inline-table;*/
			/*z-index:100;  To keep the menu on top of elements below it */;
			margin-top: 15px;margin-bottom: 0px;padding-left: 10px;border-radius: 10px;}
		nav > ul > li {float:left; line-height: 2.0em; text-align: center; padding-left: 10px; padding-right: 10px;}
			nav > ul > li > a {height:100%;}
			nav > ul > li:not( :last-child ) {border-right: 1px solid #9ABBD4;}
					/* If this isn't the last item on the menu, put a right-side border on  */
					/*border-right: 1px solid #cc470d;  darker burnt orange */
				nav > ul > li:hover,
				nav > ul > li:hover > a,
				nav > ul:not( :hover ) > li.active > a {
					color: #305B8B;
					background: #9ABBD4;
					background: linear-gradient(top, #e5ecf9 10%, #9ABBD4 60%);
					background: -moz-linear-gradient(top, #e5ecf9 10%, #9ABBD4 60%);
					background: -webkit-linear-gradient(top, #e5ecf9 10%, #9ABBD4 60%);					}

#bottombanner {width: 100%;	clear: both; overflow: hidden;	margin: 0px auto; text-align:center;}
#bottombanner p {margin-top: 5px; margin-bottom: 5px;}

/* Styles for Footer */
#footer {font-size:.85em;text-align: center;background-color: #e5ecf9;margin:5px 0px;border-radius: 8px;overflow: hidden;padding: 0;
	width: auto;clear: both;}
#footer > div {margin:2px 8px 6px 8px; clear:both; overflow:hidden;}
#footer img {border:none;}
#footer p { font-size:1.2em; margin-top: 2px;margin-bottom: 6px;}
#footer a {color: #456;text-decoration: underline;}
#footer a:hover {color: #305B8B;text-decoration: none;}

/* Buttons */
.btnMd {text-align:center;padding:12px;}
.btnMd a {color: #000;font-size: 1.35em;font-weight: bold;padding: 5px 18px;text-decoration: none; /*-moz-border-radius: 20px;*/;
	border-radius: 20px;background-color:goldenrod;
	background: linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 80%);
}
.btnMd a:hover {color: #993300;text-decoration: none;
	background: linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 20%);
}
.btnMd a:active {color: #993300;}
.btnSm {text-align:center;padding:10px;margin:4px;}
.btnSm a {font-size: 1.15em;font-weight: bold;padding: 3px 12px;text-decoration: none; /*-moz-border-radius: 20px;*/;
	border-radius: 10px;color: #000;
	background: linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 80%);
}
.btnSm a:hover {color: #993300;text-decoration:none;
	background: linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 20%);
}
.btnSm a:active {color: #993300;}
.btnMn {text-align:center;padding:2px;margin:2px;}
.btnMn a {font-size: .85em;font-weight: bold;padding: 2px 10px;text-decoration: none;border-radius: 8px;color: #000;
	background: linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 80%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 80%);
}
.btnMn a:hover {color: #993300;text-decoration:none;
	background: linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -moz-linear-gradient(top, khaki 0%, goldenrod 20%);
	background: -webkit-linear-gradient(top, khaki 0%, goldenrod 20%);
}
.btnMn a:active {color: #993300;}

/* Screen size below 640px */
@media screen and (max-width: 640px) {
	#container {width: auto;padding:0px 0px;}
	#page-content {padding: 0px 0px;}
	/* Masthead changes */
	#masthead > div {font-size: 1.20em;margin-left:10px;padding-top:5px;float:left;	max-width:60%;}
	#masthead img:first-child {height:2.5em; width:auto;}
	#masthead img:last-of-type {height:2.5em; width:auto;margin-left:2.75em;margin-top:5px;}
	/* Main css */
	#column_l {width: auto;}
	.adRibbon {margin:3px 0px;max-width:480px;}
	.BlueBorder img {max-width:20%; height:auto;}
	.GrayBorderFancy img {max-width:25%; height:auto;}
	.BlueBox img {max-width:20%; height:auto;}
	.BlueTitleBar {font-size: 1.10em;}

	.imgOperator {margin-right:25px;}
	h1 {font-size:1.50em;}
	h2 {font-size:1.25em;}
	h3 {font-size:1.05em;}
	h4 {font-size:1.00em;}
	.fontsm {font-size:.75em;}
	.fontmed {font-size:1.10em;}
	.fontbig {font-size:1.25em;}
	.fontjumbo {font-size:2.25em;}
	.fontBBR {font-size:1.25em;}
	.fontMBR {font-size:1.10em;}
	.indent {padding:4px 4px 4px 15px;}	
	.table1 {font-size:.80em; width:auto;}
		.table1 span {font-size:.70em;}
	
	/* Navigation */
	/* Now we build the menu icon for the links to open and close */
	nav {position:relative;top:auto;left: auto;z-index:1;}
		/* This builds the square for the menu icon */
		nav > a	{width: 2.5em; height: 2.5em; text-align: left; text-indent: -9999px; background-color: #e5ecf9; border:1px #9ABBD4 solid; position: relative;}
			nav > a:before,
			nav > a:after	{position: absolute;border: 2px solid #9ABBD4;top: 35%;left: 25%;right: 25%;content: '';}
				/* This builds the two lines for the menu icon symbol. It draws two boxes with no height
					so it looks like a single line - like the top and bottom border got squished together
					I believe that the content '' makes this happen. */			
			/* This moves the bottom line up and down */
			nav > a:after	{top: 60%;}
		nav:not( :target ) > a:first-of-type,
		nav:target > a:last-of-type	{display: block;}
	/* Now modify the structure to show the list dropped down instead of to the right */
	/* This first ul displays after a click */
	nav > ul	{
		height: auto; /* make sure the ul expands to the height of all the li's */
		display: none; /* display off until we click on the menu icon */
		position: absolute;
		margin-top:0px;
		left: 0;
		border-radius:0;
		}
		/* This turns on the ul when we click the "nav" links */
		nav:target > ul	{display: block;}
		nav > ul > li	{
			width: 100%; /* 100% of the ul width */
			float: none; /* turn off the left float so the menu lists down instead of to the right */
			text-align: left;
			padding: 0 0.433em;
			background-color: #e5ecf9;
			}
			
			nav > ul > li > a	{height: auto;}
				/*padding: 0 0.833em;  20 (24) */
				nav > ul > li:not( :last-child )	{border-right: none; border-bottom: 1px solid #9ABBD4;}
		/* second level */
		nav li ul	{position: static; padding: .25em; /* 20 */ padding-left: 1.0em; padding-top: 0;}
}
/* Screen size below 480px */
@media screen and (max-width: 480px) {
	/* Masthead changes */
	#masthead > div {font-size: 1.00em;	margin: 2px 3px 0 3px;	padding-top:5px;}
}
/* Screen size below 360px */
@media screen and (max-width: 360px) {
	.adRibbon {max-width:320px;}
