/*-----------------------------------------------
    Screen Styles
  ----------------------------------------------- */
  *:first-child {
    margin-top: 0;
  }
  *:last-child {
    margin-bottom: 0;
  }

  /* Hidden */
  #home-page #about-john h2,
  #risks-page #about-john h2,
  #legal h2 {
    display: block;
    position: absolute;
    left: -99999px;
  }


/*  =Color
  ----------------------------------------------- */

  /* Fern */
  #container {
    background: #7e9353;
    background: -moz-linear-gradient(-15deg, #536137, #536137 12%, #5e6d3e 25%, #7e9353 50%);
    background: -webkit-gradient(linear, 0% 0%, 100% 15%, from(#536137), color-stop(12%, #536137), color-stop(25%, #5e6d3e), color-stop(50%, #7e9353));
  }
  
  /* Fern (light) */
  #home-page #expertise .about-disclosure,
  #risks-page #content .risks-disclosure {
  	color: #d2e1bb;
  }
  #home-page #expertise a.risks:hover,
  #home-page #expertise a.risks:active,
  #home-page #expertise .about-disclosure a.risks {
  	color: #d2e1bb !important;
  }

  /* Snow */
  #branding,
  #home-page #expertise,
  #risks-page #signup p {
    color: #fff;
  }
  #home-page #content .signup a:hover,
  #home-page #content .signup a:active,
  #home-page #expertise a.risks,
  #home-page #expertise .about-disclosure a.risks:hover,
  #home-page #expertise .about-disclosure a.risks:active {
    color: #fff !important;
  }
  #content {
    background: #97a875;
    background: rgba(255, 255, 255, 0.2);
  }
  #modal .inner {
    background-color: #fff;
  }
  
  /* Mercury */
  .more a:hover,
  .more a:active {
    color: #e1e1e1 !important;
  }

  /* Silver */
  a:hover,
  a:active {
    color: #ccc !important;
  }

  /* Aluminum */
  #nav a {
    color: #999;
  }

  /* Nickel */
  #modal .inner {
    background-color: #fff;
    border: 7px solid #8e8e8e;
  }

  /* Tungsten */
  body {
    background: #3c3c3c;
    background: #333 -moz-linear-gradient(top, #3c3c3c, #333);
    background: #333 -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#333));
  }
  #info,
  #info a {
    color: #333;
  }


/*  =Special Effects
  ----------------------------------------------- */
  a {
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    text-decoration: none;
  }
  #home-page #expertise .signup a,
  #home-page #about-john .more a,
  #risks-page #about-john .more a,
  #registration-page #content a:hover,
  #registration-page #content a:active,
  #modal .close-last a,
  #home-page #expertise a.risks {
    text-decoration: underline;
  }


/*  =Layout (Global)
  ----------------------------------------------- */
  html {
      /* Make the background gradient fill the entire viewport. */
      height: 100%;
  }
  body {
    margin: 0;
    padding: 10px 0 30px;
    background-repeat: no-repeat;
  }
  #branding,
  #nav,
  #container {
    width: 975px;
    margin: 0 auto;
  }
  #content {
    position: relative;
  }
  #branding {
    position: relative;
    min-height: 160px;
  }
  #branding h2 {
    position: absolute;
    top: 0px;
    right: 10px;
  }
  #branding h2 a {
    display: block;
    background: transparent url(../images/logo-hover2.png);
    width: 161px;
    height: 152px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #branding h2 a:hover,
  #branding h2 a:active {
    background-position: 0 -200px;
  }
  #branding h3,
  #branding p {
    margin-left: 320px;
    width: 380px;
  }
  #branding h3 {
    padding-top: 75px;
  }
  #branding p {
    margin-top: 0;
    text-align: right;
  }
  #container {
    -moz-box-shadow       : rgba(0, 0, 0, 0.2) 0 1px 2px;
    -webkit-box-shadow    : rgba(0, 0, 0, 0.2) 0 1px 2px;
    box-shadow            : rgba(0, 0, 0, 0.2) 0 1px 2px;
    -moz-border-radius      : 2px;
    -webkit-border-radius   : 2px;
    border-radius           : 2px;
  }
  #nav div {
    position: absolute;
    top: 0;
    width: 930px;
  }
  #nav ul {
    margin-top: 0;
  }
  #nav {
    line-height: 1;
  }
  #content {
    margin-left: 350px;
    padding: 30px 35px;
    min-height: 650px;
    -moz-border-radius-topright       : 2px;
    -moz-border-radius-bottomleft     : 2px;
    -webkit-border-top-right-radius   : 2px;
    -webkit-border-bottom-left-radius : 2px;
    border-top-right-radius           : 2px;
    border-bottom-left-radius         : 2px;
  }

  /* Photo */
  #photo {
    position: relative;
  }
  #photo div {
    position: absolute;
    z-index: 1;
  }
  #home-page #photo div,
  #risks-page #photo div {
    background: transparent url(../images/photos/home.png) 0 0 no-repeat;
    width: 495px;
    height: 649px;
    left: 5px;
    top: -132px;
  }
  #about-page #photo div {
    background: transparent url(../images/photos/about.png) 0 0 no-repeat;
    width: 418px;
    height: 668px;
    left: -5px;
    top: -132px;
  }
  #investment-risks-page #photo div {
    background: transparent url(../images/photos/benefits.png) 0 0 no-repeat;
    width: 418px;
    height: 668px;
    left: -20px;
    top: -132px;
  }
  /*
  #benefits-page #photo div {
    background: transparent url(../images/photos/benefits.png) 0 0 no-repeat;
    width: 418px;
    height: 668px;
    left: -20px;
    top: -132px;
  }
  */
  
  /* Footer */
  #info {
    padding: 10px 12px;
    overflow: auto;
  }
  #info h2,
  #info p,
  #info ul {
    display: inline;
  }
  #legal {
    float: left;
  }
  #primary-site {
    margin-top: 0;
    float: right;
  }
  #footer-disclosure {
  	width: 950px;
  	margin: auto;
  	margin-top: 25px;
  	margin-bottom: 10px;
  	text-align: justify;
  }

  /* Replace a few bits of text with /images, so they'll
  look nicer for users who don't have Helvetica Neue. */
  #branding blockquote h3 {
    background: transparent url(../images/text/home-intro-quote3.png) 0 0 no-repeat;
    width: 359px;
    height: 43px;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 75px;
    left: 320px;
  }
  #branding p {
    position: absolute;
    left: -9999px;
  }
  #home-page #signup h1,
  #risks-page #signup h1 {
    margin-top: 5px;
    background: transparent url(../images/text/home-signup-headline3.png) 0 0 no-repeat;
    width: 294px;
    height: 134px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #home-page #signup p,
  #risks-page #signup p {
    width: 321px;
  }
  #home-page #signup p {
    margin-top: 1.2em;
  }
  #home-page #signup,
  #risks-page #signup {
    position: relative;
    min-height: 195px;
  }
  #home-page #signup .preview,
  #risks-page #signup .preview {
    margin: 0;
    width: auto;
    position: absolute;
    top: 25px;
    right: 5px;
  }


/*  =Lists
  ----------------------------------------------- */
  #nav ul,
  #nav li,
  #info ul,
  #info li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  #nav li,
  #legal li {
    margin-top: 0;
    display: inline-block;
    background: transparent url(../images/delimiters/light.png) left no-repeat;
    padding-left: 1px;
  }
  #legal li {
    background-image: url(../images/delimiters/dark.png);
  }
  #nav p a,
  #nav li a {
    display: inline-block;
    padding: 10px 7px 10px 10px;
  }
  #legal li a {
    padding: 10px 3px 10px 6px;
  }
  #nav li:first-child,
  #legal li:first-child {
    padding-left: 0;
    background-image: none;
  }
  #error-page li {
      margin-top: 0;
  }
  #privacy-page li {
  	  margin-top: 0;
  }


/*  =Buttons
  ----------------------------------------------- */
  #profile-page button,
  #risks-page #content button,
  #registration-page #content #Button1,
  #registration-page #content #Reset1 {
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    height: 28px;
    border-width: 0;
    padding: 0;
    cursor: pointer;
  }
  #profile-page button {
    background-image: url(../images/buttons/go.png);
    width: 51px;
  }
  #risks-page #content button,
  #registration-page #content #Button1 {
    background-image: url(../images/buttons/agree.png);
    width: 65px;
  }
  #registration-page #content #Reset1 {
    background-image: url(../images/buttons/reset.png);
    width: 58px;
  }
  #profile-page button:hover,
  #profile-page button:active,
  #risks-page #content button:hover,
  #risks-page #content button:active,
  #registration-page #content #Button1:hover,
  #registration-page #content #Button1:active,
  #registration-page #content #Reset1:hover,
  #registration-page #content #Reset1:active {
    background-position: 0 -50px;
  }
  #registration-page #content #Button1,
  #registration-page #content #Reset1 {
    width: 65px;
  }


/*  =Signup
  ----------------------------------------------- */
  #home-page #signup a {
    display: inline-block;
    background: transparent url(../images/buttons/click-to-get-your-alternate-benefits.png) no-repeat;
    width: 419px;
    height: 39px;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
  }
  #home-page #signup a:hover,
  #home-page #signup a:active {
    background-position: 0 -50px;
  }
  #home-page #expertise h3 a {
    display: inline-block;
    background: transparent url(../images/buttons/register-today.png) no-repeat;
    width: 335px;
    height: 39px;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
  }
  #home-page #expertise h3 a:hover,
  #home-page #expertise h3 a:active {
    background-position: 0 -50px;
  }


/*  =Home
  ----------------------------------------------- */
  #home-page #signup,
  #home-page #content,
  #risks-page #signup,
  #risks-page #content {
    padding: 40px 40px 40px 485px;
  }
  #home-page #signup,
  #risks-page #signup {
    padding-bottom: 30px;
  }
  #home-page #content,
  #risks-page #content {
    margin-left: 0;
    padding-top: 30px;
    min-height: 0;
    -moz-border-radius      : 0;
    -webkit-border-radius   : 0;
    border-radius           : 0;
  }
  #home-page #expertise h2+p,
  #home-page #expertise h3+ul {
    margin-top: 0.5em;
  }
  #home-page #expertise ul,
  #home-page #expertise li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  #home-page #expertise ul {
    padding-left: 0.5em;
  }
  #home-page #expertise li {
    margin-top: 0.85em;
    background: transparent url(../images/checkmark.png) no-repeat;
    padding-left: 30px;
    min-height: 19px;
  }
  #home-page #about-john,
  #risks-page #about-john {
    width: 380px;
    position: absolute;
    left: 60px;
    top: 270px;
  }
  #home-page #about-john p,
  #risks-page #about-john p {
    display: inline;
  }
  #home-page #about-john .more,
  #risks-page #about-john .more {
    margin-top: 0;
  }
  #home-page #about-john .more a,
  #risks-page #about-john .more a {
    display: inline-block;
    background: transparent url(../images/arrows/lead.png) 100% 4px no-repeat;
    padding-right: 14px;
  }
  #home-page #about-john .more a:hover,
  #home-page #about-john .more a:active,
  #risks-page #about-john .more a:hover,
  #risks-page #about-john .more a:active {
    background-position: 100% -46px;
  }
  #home-page #expertise .signup a {
    display: inline-block;
    background: transparent url(../images/arrows/lead.png) 100% 7px no-repeat;
    padding-right: 14px;
  }
  #home-page #expertise .signup a:hover,
  #home-page #expertise .signup a:active {
    background-position: 100% -43px;
  }
  

/*  =Risks
  ----------------------------------------------- */
  #risks-page #hedge-fund {
    border-width: 1px;
    border-style: solid;
    border-color: #59683b;
    padding: 6px 8px;
    height: 200px;
    overflow: auto;
  }
  #risks-page #content .secure-seal {
    text-align: center;
    margin-top: 20px;
  }
  

/*  =About
  ----------------------------------------------- */
  #about-page #content h1 {
    line-height: 1;
  }
  #about-page #content .title {
    margin-top: 0;
    color: #333;
  }
  #about-page #content .more a,
  #benefits-page #content .more a {
    font-weight: bold;
  }


/*  =Benefits
  ----------------------------------------------- */
  #benefits-page #content h1+h2 {
    margin-top: 1em;
  }


/*  =Registration
  ----------------------------------------------- */
  #registration-page .VAMValSummary,
  #registration-page .VAMValSummary ul {
    margin-top: 1em;
  }
  #registration-page .VAMValSummary li {
    margin-top: 0;
  }
  #registration-page {
    padding-bottom: 0;
  }
  #registration-page #container {
    width: auto;
    padding-bottom: 100px;
    background: #7e9353;
    -moz-border-radius      : 0;
    -webkit-border-radius   : 0;
    border-radius           : 0;
  }
  #registration-page #content {
    width: 905px;
    margin: 0 auto;
    background: #fff;
    -moz-border-radius      : 0;
    -webkit-border-radius   : 0;
    border-radius           : 0;
  }
  #registration-page #nav,
  #registration-page #info,
  #registration-page #branding blockquote,
  #privacy-page #branding blockquote,
  #disclosures-page #branding blockquote,
  #contact-page #branding blockquote,
  #error-page #branding blockquote
  {
  display:none;
  }
  
  #registration-page #content-legal {
    text-align: center;
  }
  #registration-page #content-legal h2 {
    position: absolute;
    left: -9999px;
  }
  #registration-page #content-legal ul,
  #registration-page #content-legal li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  #registration-page #content-legal ul {
    margin-top: 1.55em;
  }
  #registration-page #content-legal li {
    margin-top: 0;
    display: inline-block;
  }
  #registration-page #content-legal li a {
    display: inline-block;
    margin-top: 0;
    padding: 10px 7px 10px 10px;
    background: transparent url(../images/delimiters/dark.png) left no-repeat;
  }
  #registration-page #content-legal li:first-child a {
    background-image: none;
  }
  #registration-page #content .formblock {
    margin-top: 1.55em;
    padding: 25px;
    -moz-border-radius      : 5px;
    -webkit-border-radius   : 5px;
    border-radius           : 5px;
    background-color: #efefef;
  }
  #registration-page #content .formblock .title {
    font-weight: bold;
    padding-bottom: 15px;
  }
  #registration-page #content .formblock .tc_divider {
    border: 1px solid #ccc;
  }
  #registration-page #TableRow23 td {
    padding-top: 1.55em;
  }
  #content-disclosure {
    margin-top: 3.1em;
  }
  #registration-page #content p+div.formblock {
    margin-top: 3.1em;
  }
  #registration-page #content .formblock {
    width: 700px;
  }
  #registration-page #content-intro,
  #registration-page #content-disclosure {
    border-style: solid;
    border-color: #ccc;
    border-width: 0 0 1px;
  }
  #registration-page #content-intro {
    margin: 0 0 1.5em;
    padding: 0 0 1.5em;
  }
  #registration-page #content-intro {
    font-size: 12px;
  }
  #registration-page #content-intro h2 {
    font-size: 15px;
  }
  #registration-page #content-intro img {
    float: left;
    border: 1px solid #c6c6c6;
    margin: 1.75em 10px 10px 0;
    padding: 2px;
  }
  #registration-page #content-disclosure {
    margin: 1em 0 1.5em;
    padding: 1em 0 1.5em;
  }
  #registration-page #content-notes,
  #registration-page #content-footnotes {
    margin: 0em 0 .5em;
    padding: 0em 0 .5em;
  }
  #registration-page .confirm {
    margin-bottom: 1.75em;
  }
  #registration-page #partner-logo {
    float: right;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 10px;
  }


/*  =Contact
  ----------------------------------------------- */
  #content .vcard {
    margin-top: 1.55em;
  }
  #content .vcard p {
    margin-top: 0;
  }
  #content .vcard .org {
    font-weight: bold;
  }


/*  =Videos
  ----------------------------------------------- */
  #videos-page {
    padding-bottom: 0;
  }
  #videos-page #container {
    width: auto;
    padding-bottom: 100px;
    background: #7e9353;
    -moz-border-radius      : 0;
    -webkit-border-radius   : 0;
    border-radius           : 0;
  }
  #videos-page #content {
    width: 905px;
    margin: 0 auto;
    background: #fff;
    -moz-border-radius      : 0;
    -webkit-border-radius   : 0;
    border-radius           : 0;
  }
  #videos-page h1,
  #videos-page #content .item {
  	width: 560px;
  	margin: 0 auto;
  	padding-bottom: 35px;
  }
  #videos-page h1 {
  	padding-bottom: 25px;
  	text-align: center;
  }
  #videos-page #nav,
  #videos-page #info,
  #videos-page #branding blockquote {
    display: none;
  }
  #videos-page #content-footnotes {
  	margin-top: 40px;
  }
  

/*  =Modal Window
  ----------------------------------------------- */
  #modal {
    position: absolute;  
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  #modal .inner {
    -moz-box-shadow       : rgba(0, 0, 0, 0.5) 0 0 15px;
    -webkit-box-shadow    : rgba(0, 0, 0, 0.5) 0 0 15px;
    box-shadow            : rgba(0, 0, 0, 0.5) 0 0 15px;
    -moz-border-radius      : 2px;
    -webkit-border-radius   : 2px;
    border-radius           : 2px;
    margin: 0 auto;
    position: relative;
  }
  #modal .inner {
    padding: 50px 60px;
  }
  #modal .close {
    margin: 0;
    position: absolute;
    top: 1px;
    right: 1px;
  }
  #modal .close a {
    display: block;
    background: transparent url(../images/buttons/close.png) no-repeat;
    width: 29px;
    height: 29px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #modal .close a:hover,
  #modal .close a:active {
    background-position: 0 -29px;
  }
  #modal .close-last {
    margin-top: 3.1em;
  }
  #modal h1 {
    margin-top: 0;
  }
  #modal h2 {
    font-size: 14px;
  }
  #modal #types-page h2 {
  	margin-top: 5px;
  	padding-top: 5px;
  }
  #modal h3 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
  }
  #modal dt {
    float: left;
    font-weight: bold;
    color: #785a1e; /* Mocha */
  }
  #modal dt,
  #modal dd {
    padding-bottom: 10px;
  }
  #modal #minimal-page li,
  #modal #types-page li {
  	margin-top: 0;
  }
  #modal #minimal-page ol,
  #modal #types-page ol {
  	margin-top: 1em;
  }
  #modal #profile-page form label span {
    display: block;
    margin-bottom: 1em;
  }
  #modal #profile-page form label br {
    display: none;
  }


/*  =Internet Explorer 6/7/8 Fixes
  -----------------------------------------------
  Rules for all three versions end with a "\9". For example:
  rule\9

  IE7 fixes begin with a star. For example:
  *rule

  IE6 fixes begin with an underscore. For example:
  _rule
  ----------------------------------------------- */

  /* IE doesn't support gradients, so simulate with an image. */
  #container {
    background: #7e9353 url(../images/ie/green-gradient.jpg) no-repeat\9;
  }

  /* IE doesn't understand rgba, so simulate with an image. */
  #content {
    background: transparent url(../images/ie/white-20-percent.png)\9;
  }
  #modal,
  .scriptable #home-page #signup-form {
    background: transparent url(../images/ie/black-50-percent.png)\9;
    _background: transparent;
  }

  /* IE6 and IE7 treat z-indexes differently, such that the photo element's z-index
  is basically ignored. Work around this by giving the photo container a z-index. */
  #photo {
    *z-index: 1;
    _z-index: 1;
  }

  /*  IE6 and IE7 don't support true "inline-block", so simulate it instead.
  KUDOS: http://www.brunildo.org/test/InlineBlockLayout.html  */
  #registration-page #content-legal li,
  #nav li,
  #legal li {
    *display: inline;
    *zoom: 1;
    _display: inline;
    _zoom: 1;
  }
  #nav li,
  #legal li {
    _display: block;
    _float: left;
  }
  #home-page #signup a {
    *display: block;
    _display: block;
  }
  #risks-page #content button {
    *display: block;
    *zoom: 1;
    _display: block;
    _zoom: 1;
  }
  /* The registration page buttons need extra help, because they're
  declared with input elements instead of button elements. */
  #registration-page #content #Button1,
  #registration-page #content #Reset1 {
    *display: block;
    *font-size: 0;
    *line-height: 0;
    *position: absolute;
    _display: block;
    _font-size: 0;
    _line-height: 0;
    _position: absolute;
  }
  #registration-page #content #Reset1 {
    *left: 150px;
    _left: 150px;
  }

  #modal .inner {
    *height: auto !important;
    _height: auto !important;
  }

  /* IE6 doesn't support min-height, so simulate it with height. */
  #branding {
    _height: 160px;
  }
  #content {
    _height: 650px;
  }
  #home-page #expertise li {
    _zoom: 1;
    _height: 19px;
  }
  #info {
    _zoom: 1;
  }

  /* IE6 doesn't support transparent PNGs, at least not without a little help. */
  #home-page #photo div {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/photos/home.png, sizingMethod=crop);
  }
  #about-page #photo div {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/photos/about.png, sizingMethod=crop);
  }
  #benefits-page #photo div {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/photos/benefits.png, sizingMethod=crop);
  }
  #branding blockquote h3 {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/text/home-intro-quote2.png, sizingMethod=crop);
  }
  #home-page #signup h1 {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/text/home-signup-headline2.png, sizingMethod=crop);
  }
  #home-page #expertise li {
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/checkmark.png, sizingMethod=crop);
  }
  #content {
    _background: #97a875;
  }