/*  Definitions affecting entire page  */

*  {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
}

body { 
   margin: 0;
   padding: 0;
   height: 100%;
   font-family: verdana, sans-serif;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   color: #666;
   background-color: #dcdcdc;
   font-size: 16px;
  /* font-weight: 300;  */
}

input[type="number"], input[type="text"], select  {
   font-size: inherit;
   padding: 4px 1px 4px 6px;
   margin: 5px 1px 3px 0px;
   border: 1px solid #DDDDDD;
   border-radius: 4px;
   outline: none;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  }

select {
   padding-top: 3px;
   padding-bottom: 3px;
  }

input[type="number"]:focus, input[type="text"]:focus, select:focus {
   box-shadow: 0 0 5px rgba(81, 203, 238, 1);
   border: 1px solid rgba(81, 203, 238, 1);
}
input:focus:invalid {
   box-shadow: 0 0 5px red;
   border: 1px solid red;
  }

#noscript  { 
   width: 100%; 
   text-align: center;
   line-height: 150%;
   margin: 0;
   padding: 1em;
   font-size: 1em;
   background-color: red;
   color: white;   
}

/* Kludge needed to force a set of floated elements to appear within an enclosing div  */

.clearfix :after {
   content: ".";
   display: none;
   line-height: 0;
   clear: both;
   visibility: hidden;
}

#container { 
   position: absolute;
   left: 10%;
   width: 80%;
   min-width: 65em;
   height: 100%;
   margin: 0 auto;
   padding: 0;
   border: 0;
}


/* Supports popup boxes and greying out of background */

#popup  {
   display: none;
  }
.popupoverlay {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 1001; 
   background-color: #333333;     /* For IE8 compatibility */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";    /* For IE8 compatibility */
   background-color: rgba(33,33,33,0.4);
}
.popupcontainer {
   position: absolute;
   top: 15%;
   left: 10%;
   z-index: 1002; 
   width: 80%;
   overflow: auto;
   background-color: white;
   padding: 20px;
   border: 20px solid black;     /* For IE8 compatibility */
   border: 20px solid rgba(0,0,0,0.3);
   border-radius: 10px;
   background-clip: padding-box;
}
.popupclose  {
   display: block;
   border-style: none;
   border-color: inherit;
   border-width: 0;
   margin: 0;
   padding: 0;
   outline: 0;
   vertical-align: baseline;
   cursor: pointer;
   float: right;
   background: url(close.png) 0px 0px no-repeat;
   width: 32px;
   height: 32px;
}


/* "Working" indicator spinner  */

 #spinner {
   position: fixed;
   width: 55px;
   height: 80px;
   left: 55.5%;
   top: 30%;
   z-index: 1001;
   display: none;
  }
    
#spinner.show { display: block; } 
	
#spinner div {
   width: 12%;
   height: 26%;
   background: #000;
   position: absolute;
   left: 44.5%;
   top: 37%;
   opacity: 0;
   -webkit-animation: fade 1s linear infinite;
   animation: fade 1s linear infinite;
   border-radius: 50px;
   -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
   box-shadow: 0 0 3px rgba(0,0,0,0.2);
   display: block;
  }
    
#spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%);    -moz-transform:rotate(0deg) translate(0, -142%);   transform:rotate(0deg) translate(0, -142%); 
                 -webkit-animation-delay: 0s;        animation-delay: 0s;}    
#spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%);   -moz-transform:rotate(30deg) translate(0, -142%);  transform:rotate(30deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.9167s;  animation-delay: -0.9167s;}
#spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%);   -moz-transform:rotate(60deg) translate(0, -142%);  transform:rotate(60deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.833s;   animation-delay: -0.833s;}
#spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%);   -moz-transform:rotate(90deg) translate(0, -142%);  transform:rotate(90deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.75s;    animation-delay: -0.75s;}
#spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%);  -moz-transform:rotate(120deg) translate(0, -142%); transform:rotate(120deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.667s;   animation-delay: -0.667s;}
#spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%);  -moz-transform:rotate(150deg) translate(0, -142%); transform:rotate(150deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.5833s;  animation-delay: -0.5833s;}
#spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%);  -moz-transform:rotate(180deg) translate(0, -142%); transform:rotate(180deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.5s;     animation-delay: -0.5s;}
#spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%);  -moz-transform:rotate(210deg) translate(0, -142%); transform:rotate(210deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.41667s; animation-delay: -0.41667s;}
#spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%);  -moz-transform:rotate(240deg) translate(0, -142%); transform:rotate(240deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.333s;   animation-delay: -0.333s;}
#spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -moz-transform:rotate(270deg) translate(0, -142%); transform:rotate(270deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.25s;    animation-delay: -0.25s;}
#spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -moz-transform:rotate(300deg) translate(0, -142%); transform:rotate(300deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.1667s;  animation-delay: -0.1667s;}
#spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -moz-transform:rotate(330deg) translate(0, -142%); transform:rotate(330deg) translate(0, -142%); 
                 -webkit-animation-delay: -0.0833s;  animation-delay: -0.0833s;}

@-webkit-keyframes fade {
   from {opacity: 1;}
   to {opacity: 0.25;}
  }
@-moz-keyframes fade {
   from {opacity: 1;}
   to {opacity: 0.25;}
  }    
@keyframes fade {
   from {opacity: 1;}
   to {opacity: 0.25;}
  }

  
/*  Header section of screen */
   
header    { 
   width: 100%;
   position: fixed;
   z-index: 1000;
   height: 4em;
   line-height: 4em;   
   margin: 0;
   padding: 0;
   padding-left: 0.5em;
   border: 1px solid black; 
   top: 0px;
   vertical-align: middle;
   background-color: white;
}

#headerlogo {
   float: left;
   vertical-align: middle;
}

#headertext { 
   display: inline; 
   font-size: 1.5em; 
   font-weight: bold; 
   padding-left: 0.5em;
   color: black;
}

/* Menu of informational links in the header  */

.headermenu { 
   display: none;
   float: right; 
   margin: 0px 1.75em -1px 1.75em; 
   border: 0; 
/*   border-bottom: 1px solid black; */
   padding: 0;
   cursor: pointer;
}
.headermenu ul {
   float: left;
   padding: 0;
   margin: 0;
   list-style-type: none;
}
.headermenu li {
   float: left;
   font-size: 0.875em;
   margin: 0; 
   padding: 0; 
   border: 0;
   border-left: 1px solid black;
   border-right: 1px solid black;
   border-radius: 1.5em;
   background-color: #FFD700; 
   color: black;
} 
.headermenu a {
   text-decoration: none;
   margin: 0;
   border: 0;
   padding: 0.7857em 1.143em;
   color: black;
}
.headermenu li:hover {
   background-color: #E6C200;
   font-weight: bold;
}
.headermenu li ul {
   display: none;
   position: absolute;
   z-index: 1000;
   padding: 0;
   margin: 0;
   border: 0; 
   border-top: 1px solid black;
   font-weight: normal;
}
.headermenu li ul.show {
   display: block;
}
.hoverOK li:hover ul {
   display: block;
}
.headermenu li ul li {
   margin-left: -1px;
   border-bottom: 1px solid black;
   width: 13.4em;
   float: none;
   font-size: 1em;
}
.headermenu li ul li:hover  { 
   background-color: #FFEB80; 
   font-weight: bold;
}
.headermenu li div { 
   display: none;
   position: absolute;
   float: right;
   z-index: 1000;
}
.headermenu li div.show {
   display: block;
}
.hoverOK li:hover div {
   display: block;
}

.navmenu {
   position: fixed;
   width: 16%;
   min-width: 13em;
   height: 100%;
   display: block; 
   top: 4em;
   margin: 0;
   border: 0; 
   padding: 0;
   border-left: 1px solid black;
   cursor: pointer;
   background-color: #fafafa;
}
.navmenu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}
.navmenu ul li {
   display: block;
   height: 4em;
   line-height: 4em;
   margin: 0; 
   padding: 0; 
   border: 0;
} 
.navmenu ul li a {
   display: block;
   height: 100%;
   margin: 0;
   border-right: 1px solid #aaa;
   border-bottom: 1px solid #aaa;
   padding-left: 1.7em;
   font-size: 1em;
   color: black;
   text-decoration: none;
}
.navmenu ul li a:hover {
   /*outline: dotted 1px black;*/
   background-color: #E5ECF3;
}
.navmenu ul li a.selected {
   border-right: 0;
   background-color: #F0F8FF;
   font-weight: bold;
   color: black;
  }



/*  Area in which the "business" of the site takes place  */

#workarea  { 
   position: absolute;
   width: 80%;
  /* height: 100%; */
  /* min-height: 50em; */
   min-height: 100%;
   display: block;
  /* overflow: auto; */
   overflow-y: hidden;
   margin: 0;
   margin-top: 4em;
   margin-left: 20%;
   padding: 0;
   border: 0;
   border-right: 1px solid black;
   background-color: #F0F8FF;
   color: black;
}
.workpage { display: none; } 
.workpage.show { display: block; }


/*  Input form to specify search parameters */

#inputform { 
   width: 100%; 
   margin: auto;
   padding: 0.75em 2em 0.75em 2.375em;
   border: 0;
 /*  min-width: 42em; */
   font-size: 1.2em;
}

fieldset {
   clear: left;
   margin: 0;
   margin-bottom: 1em;
   padding: 0;
   padding-bottom: 1em;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid lightgray;
 }

.hidespouse {
   display: none;
  }
.widowfield  {
   display: none;
  }
span.widowfield.show {
   display: inline;
  }
.widowfield.show  {
   display: block;
  }
.marriedfield  {
   display: none;
  }
.marriedfield.show  {
   display: block;
  }
.widowedmarriedfield  {
   display: none;
  }
.widowedmarriedfield.show  {
   display: block;
  }
.divorcedfield  {
   display: none;
  }
.divorcedfield.show  {
   display: block;
  }
.divorcedmarriedfield  {
   display: none;
  }
.divorcedmarriedfield.show  {
   display: block;
  }
.advanced  {
   display: none;
  }
.advanced.show  {
   display: block;
  }
.showadvanced  {
   display: none;
   padding-left: 1.5em;
   background: url(plus.gif) 0 50% no-repeat;
  }
.showadvanced.show  {
   display: block;
  }
.hideadvanced  {
   display: none;
   padding-left: 1.5em;
   background: url(minus.gif) 0 50% no-repeat;
  }
.hideadvanced.show  {
   display: block;
  }
  
#advancedcontrol {
 /*  width: 15em;  */
/*   height: 2.54em;*/
   line-height: 2.54em;
   float: left;
   clear: left;   
   margin-bottom: 1em;
   font-size: 0.8125em;
   font-weight: normal;
   text-align: left;
   font-style: italic;
/*   color: blue;  */
   text-decoration: underline;
   cursor: pointer;
  }
  
.formheader {
   height: 1.667em;
   line-height: 0.91667em;
   clear: left;
   padding-left: 11.1875em;
 }
 .formheaderlabel {
   width: 16em;
   height: 2.54em;
   line-height: 2.54em;
   float: left;
   padding-left: 0.5em;
   font-size: 0.8125em;
   font-style: italic;
   font-weight: bold;
   text-align: left;
 }
.formlabel  { 
   width: 14em;
   height: 2.54em;
   line-height: 2.54em;
   float: left;
   clear: left;
   padding-right: 2em;
   font-size: 0.8125em;
   font-weight: bold;
 /* text-align: right; */
}
.longformlabel  {
   width: 31em;
}
.formfield  {
   width: 16em;
   height: 2.54em;
   line-height: 2.54em;
   float: left;
   font-size: 0.8125em;
   font-weight: normal;
   text-align: left;
}
.longformfield  {
   width: 27em;
}
.checkboxfield  {
   width: auto;
}
.inputnotes {
   float: left;
   clear: left;
   font-size: 0.7em;
   width: 100%;
   margin-top: 0;
   margin-bottom: 0.5em;
   padding-left: 16.5em;
}
.inputnotes ul {
   padding-left: 2em;
   margin-top: 0.5em;
   margin-bottom: 0;
  }
.inputnotes ul li {
   font-size: inherit;
   padding-bottom: 0.5em;
  }
  
.formsubmit {
   height: 3em;
   line-height: 3em;
   clear: both;
   text-align: center;
 /*  vertical-align: bottom;  */
}
.submitbutton {
	font-size: 1.25em;
    border-radius: 0.75em;
    padding: 0.25em 0.5em;
	line-height: normal;
}


/*  Presentation of results of the search  */

#summaryarea  {
   margin-top: 2em;
   margin-bottom: 3em;
   text-align: center;
   font-size: 1em;
  }
#summaryarea h1 {
   font-size: 1.5em;
   margin-top: 0;
   margin-bottom: 0.5em;
  }
#summaryarea p {
   font-size: 0.75em;
  }
  
table.summary   {
   margin-top: 1.2em;
   margin-bottom: 0.5em;
   margin-left: auto;
   margin-right: auto;
   border-spacing: 0;
   border-collapse: collapse;
}
table.summary th {
   padding: .3em 1em;
   border: 1px solid #000000;
   font-size: 1em;
   background-color: #444;
   color: white;
   white-space: nowrap;
}
table.summary td {
   padding: .5em;
   border: 1px solid black;
   font-size: 0.8125em;
   vertical-align: center;
}
table.summary td.description {
   max-width: 29em;
}
table.summary tr.odd td {
   background-color: #ddd;
}
table.summary tr.even td { 
   background-color: #fff;
}
table.summary td.hiddencol {
   display: none;
}
table.summary td.decnumber {
   text-align: right;
   padding-right: 5em;
}
tr.clickedodd, tr.clickedeven {
   background-color: #ff0;
}  

.resultsarea  {
   width: 100%;
   height: 100%;
   /* top: 0; */
   /*max-width: 70%; */
   margin: 0;
   margin-bottom: 2em;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
   border: 2px solid #a1a1a1;
   border-radius: 25px;
   background-color: #FFFFFF;
   overflow-y: visible;
}

#resultsbest {
   display: none;
  }
#resultsbest.show {
   display: block;
  }
#resultstarget {
   display: none;
  }
#resultstarget.show {
   display: block;
  }
#resultsworst {
   display: none;
  }
#resultsworst.show {
   display: block;
  }
#resultsfirst {
   display: none;
  }
#resultsfirst.show {
   display: block;
  }
#resultslast {
   display: none;
  }
#resultslast.show {
   display: block;
  }

.resultstitle {
   color: black;
   font-weight: normal;
   font-style: italic;
   font-size: 1.5em;
   text-align: center;
   margin-top: 1.25em;
}

table.benefits {
   margin-top: 1.75em;
   margin-left: auto;
   margin-right: auto;
   border-spacing: 0;
   border-collapse: collapse;
}
table.benefits th {
   padding: .3em;
   border: 1px solid #000000;
   font-size: 1em;
   background-color: #444;
   color: white;
   white-space: nowrap;
}
table.benefits th.empty {
   border: 0;
   background-color: transparent;
}
table.benefits td {
   padding: .5em;
   border: 1px solid black;
   font-size: 0.8125em;
   vertical-align: center;
}
table.benefits td.description {
   max-width: 29em;
}
table.benefits tr.odd td {
   background-color: #ddd;
}
table.benefits tr.even td { 
   background-color: #fff;
}
table.benefits td.decnumber {
   text-align: right;
}
table.benefits tfoot td {
   border: 0;
   background-color: transparent;
   color: black;
   font-weight: normal;
   font-style: italic;
   text-align: left;
   max-width: 1em;
   vertical-align: top;
}
table.benefits tfoot td td {
   max-width: none;
   padding: 0;
}

.chart {
   max-width: 40em;
   margin-left: auto;
   margin-right: auto; 
   margin-top: 2em;
   overflow: hidden;
  }
.chart .title  {
   font-size: 0.8em;
   font-style: italic;
  }
.legend  {
   font-size: 0.8125em;
   margin-left: 3.5em;
   margin-bottom: 0.9em;
   overflow: hidden;
   display: none;
   -webkit-print-color-adjust: exact;
  }
.legend  ul {
   list-style-type: none;
   padding: 0;
  }
.legend  li {
   float: left;
   margin-right: 4em;
  }  
.legend span  {
   float: left;
   width: 5em;
   height: 1em;
   margin-right: 1em;
  }
.legend.show  {
   display: block;
  }

.pv {
   clear: left;
   text-align: center;
   margin-top: 1.25em;
   margin-bottom: 1.5em;
   font-size: 1.25em;
}
  
.assumptions {
   margin-top: 3em;
   margin-bottom: 1em;
   padding: 1em;
   padding-top: 0.75em;
   font-size: 1em;
   margin-left: auto;
   margin-right: auto;
   width: 32%;
   min-width: 28em;
   border: 2px solid #a1a1a1;
   background: #dddddd;
   border-radius: 25px;
   overflow: auto;
}
.assumptions h1 {
   font-size: 1em;
   margin-top: 0;
   margin-bottom: 0.5em;
   text-align: center;
   }
.assumptions .line  {
   clear: left;
   height: 1.3em;
   margin: 0;
   font-size: 0.75em;
   font-weight: normal;
   text-align: left;
  }
.assumptions .break  {
   margin-top: 0.75em;
  }
.assumptions .caption  { 
   width: 14em;
   float: left;
}
.assumptions .value  {
   width: 10em;
   float: left;
}
.assumptions .longline  { 
   float: left;
}

#printbutton {
   position: absolute;
   right: 0;
   margin-right: 1.5em;
  }
  
.printonly {
   display: none;
  }
  
/*  Footer at bottom of all pages  */

#footer    { 
   width: 100%;
   clear: both;
   padding: 2em 0 1em 0;
   text-align: center;
   line-height: 1.4em;
   font-size: 0.75em;
   font-style: italic;
}

/*  "About" and welcome pages. */

.aboutstyle {
   padding: 0.5em 2em 1em 2em;
   line-height: 1.5em;
  }   
.aboutstyle h1 {
   display: inline-block;
   margin: 0;
   margin-top: 0.8em;
   font-weight: bold;
   font-size: 1.375em;
  }
.aboutstyle li {
   padding-bottom: 0.3125em;
  }


@media only screen and (max-device-width:720px), only handheld  { 

   .nomobile {
      display: none!important;
	 }
	 
   #container { 
      position: relative;
      min-width: 100%;
	  left: 0;
	  background-color: #fafafa;
     }

   #spinner {
      left: 45%;
      top: 35%;
     }

   header  {
      position: relative;
	  width: 100%;
	  height: 2.625em;
      line-height: 2.5em;
	  border-left: 0;
	  border-right: 0;
	 }
   #headertext {
	  font-size: 0.875em;
	  overflow-x: hidden;
   }

   .navmenu { 
      display: block; 
	  position: static;
      clear: both;
      width: 100%;
	  min-width: 0;
      margin: 0 auto; 
      border: 0; 
      padding: 0;
      cursor: pointer; 
   }
   .navmenu ul {
      width:100%;
      padding: 0;
      margin: 0 auto;
	  margin: 0;
      list-style-type: none;
      font-size: 0.8em;
   }
   .navmenu ul li {
      width: 33.33333%;
      height: auto;
      line-height: normal;
      float: left;
      margin: 0; 
      padding: 0; 
      border: 0;
      display: block;
   }  
   .navmenu ul li a {
      font-size: 1em;
      text-decoration: none;
      text-align: center;
      margin: 0 auto;
      display: block;
      width: auto;
      padding: 0.5em;
	  border-left: 1px solid black;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
	  color: white;
      background-color: #7d7e7d; 
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#9d9e9d), to(#1e1e1e));
      background-image: -webkit-linear-gradient(top, #9d9e9d, #1e1e1e);
      background-image: -moz-linear-gradient(top, #9d9e9d, #1e1e1e);
      background-image: -ms-linear-gradient(top, #9d9e9d, #1e1e1e);
      background-image: -o-linear-gradient(top, #9d9e9d, #1e1e1e);
      background-image: linear-gradient(to bottom, #9d9e9d, #1e1e1e);
	  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9d9e9d, endColorstr=#1e1e1e);
	  }
   .navmenu ul li a:hover  {
/*      color: #800000;
	  background: transparent;
      font-weight: bold;
      border-color: #aaab9c #fff #fff #ccc; */
   }
   .navmenu ul li:hover, .navmenu ul li:focus {
      outline: none;
   }
   .navmenu ul li a.selected  {
	  color: black;
	  text-shadow: none;
	  background: transparent;
      font-weight: bold;
	  border: 0;
   }
   .navmenu :after {
      display: block;
   }

   #workarea {
      position: static;
	  height: auto;
	  min-height: 371px;
	  width: 100%;
	  min-width: 320px;
	  margin: 0;
      border: 0;
	  background-color: transparent;
	  overflow: auto;
	  -webkit-text-size-adjust: 100%;
   }  
   .workpage {
      width: 100%;
      height: 100%; 
      margin: 0;
      top: 0;
      left: 0; 
	  position: relative;
   }

   #inputform {
      width: 100%;
	  min-width: inherit;
      height: 100%; 
	  min-height: inherit;
	  padding: 0.75em 1.25em;
	  border: 0;
	  font-size: 1em;
	  background-color: inherit;
   }
   .formheader {
      padding-left: 0;
   }
   .formlabel { 
      width: auto;
	  height: 2.308em;
	  line-height: 2.308em;
	  text-align: left;
	  vertical-align: bottom;
	  font-size: 0.8125em;
	  padding-top: 0.538em;
	  padding-right: 0;
   }
   .longformlabel  {
      width: auto;
   }
   .formfield {
      clear: left; 
	  vertical-align: text-top;
	  font-size: 0.8125em;
     /* width: 100%;*/
   }
   .formfield.spousefield {
     clear: none;
   }	 
   .longformfield  {
     max-width: 100%;
   }
   .inputnotes {
     float: left;
     clear: left;
     width: 100%;
     margin-top: 0;
     margin-bottom: 1.5em;
	 padding-left: 0;
     font-size: 0.5em;
   }

   .formsubmit {
      height: 70px;
	  line-height: 70px;
	  padding-top: 14px;
	 }
   .submitbutton { 
      cursor: pointer;
      padding: 5px 15px;
      width: 100%;
	  font-weight: bold;
	  letter-spacing: 1px;
   }

   .resultsarea {
      height: 100%; 
	  background-color: inherit; 
	  float: none;
      padding-left: 0.5em;	  
   }
   table.benefits {
      margin-left: auto;
      margin-right: auto;
	  border-spacing: 1px;
	  border-collapse: separate;
   }
   table.benefits th, table.benefits td  {
      border: 0px;
   }
   table.benefits th.mobilecol, table.benefits td.mobilecol {
      display: table-cell;
   }
	 
   .chart canvas {
      max-width: 100%;
      height: auto;
    }

   .pv {
      text-align: left;
   }
   .aboutstyle {
	  width: 100%;
      height: 100%; 
      padding: 1em;
	  font-size: 0.7em;
	  -webkit-text-size-adjust: auto;
   }	
   .aboutstyle ul {
      padding-left: inherit;
	  margin-left: 1em;
	 }
	 
   #footer {
      padding: 0;
      border-top: 1px solid black;
   }
}

/*  Ipad  */

@media only screen and (min-device-width:768px) and (max-device-width:1024px)  {
   #container { 
      min-width: 1024px;
   }
   #inputform { 
      width: inherit;
   } 
 }

 
@media only print {
   body   {
	  background-color: white;
	  color: black;
	  -webkit-print-color-adjust: exact;
     }
   a {
      text-decoration: none;
	  color: inherit;
     }
   input {
      border: 0;
	  background-color: inherit;
     }
   select {
      border: 0;
	  background-color: inherit;
	  -webkit-appearance: inherit;
     }
   
   #noscript  {
      display: none;
     }
   .clearfix :after {
      display: block;
     }
   #container {
      position: relative;
	  width: 100%;
	  height: auto;
	  min-width: 0;
	  left: 0;
	  background-color: white;
	  background-image: none;
     }

   header    {
      position: static; 
	  width: 100%;
	  height: 31.5pt;
	  line-height: 30pt;
	  overflow: visible;
	  margin: 0;
	  margin-top: 18pt;
	  padding-left: 6pt;
	  border-left: 0;
	  border-right: 0;
      background-color: inherit;
     }
   #headertext { 
      font-size: 18pt; 
      padding-left: 6pt;
     }
   .headermenu   {
      display: none;
     }

   #workarea  {
      position: static;
	  width: 100%;
	  height: auto;
	  min-height: 0;
	  margin: 0;
	  margin-top: 18pt;
	  border: 0;
	  background-color: white;
	/*  position: relative;  */
     }

   .noprint {
      display: none !important;
     }
   .printonly {
      display: block;
	 }
	 
   .pagebreak {
      display: block;
      height: 0;
      margin: 0;
      padding: 0;
      page-break-before: always;
     }

   #resultspage   {
      width: 99%;
	  height: auto;
	  display: block;
	  margin: auto;
	  padding:0;
	  border: 0;
	  float: none;
	  overflow-y: visible;
	  background-color: inherit;
     }
   #summaryarea  {
      margin-top: 2em;
      margin-bottom: 2em;
	 }
   #summaryarea p  {
      display: none;
	 }

   .resultsarea {
      page-break-before: always;
	  padding-top: 0.1em;
	  border: 0;
	  max-width: 100%;
	/*  position: relative;  */
     }  
   #resultsbest {
      display: block;
     }
   #resultstarget {
      display: block;
     }
   #resultsworst {
      display: block;
     }
   #resultsfirst {
      display: block;
     }
   #resultslast {
      display: block;
     }
	 
   table.summary tr.clickedodd td {
      background-color: #ddd;
     }
   table.summary tr.clickedeven td { 
      background-color: #fff;
     }

   table.benefits th {
      font-size: 10pt;
	  font-weight: bold;
     }
   table.benefits td {
      font-size: 9pt;
     }

   .chart {
      page-break-inside: avoid;
     } 
   .chart canvas {
      max-width: 100%;
	  height: auto;
	 }
   .pv {
      margin-bottom: 0;
	 }
	 
   .assumptions {
	  margin-top: 6em;
	 }
	 
   .aboutstyle  {
	  font-size: 11pt;
	 /* page-break-before: always; */
	 /* margin: 0.5in; */
	 /* padding-top: 0.25in; */
	 } 

   .popupoverlay {
	  display: none;
	 }
   .popupcontainer {
      position: static;
	  width: 100%;
      border: 0;
      left: 0;
      top: 42px;
      margin-top: 0;
	  page-break-after: always;
     }
   .popupclose {
      display: none;
     }
  
   #footer   {
      width: 100%;
 	  height: auto;
	  position: relative;
	  float: none;
	  margin: 0;
	  margin-top: 0.9em;
	  font-size: 9pt;
	  background-color: inherit;
     }

    @page :header {
	   @top-center { content: element(#header); }
	  }
}