/*

File: screen.css
Purpose: To apply CSS styles for screen media types
Requirements:
  - all.css
  - Yahoo! User Interface (YUI) Reset CSS
    <http://developer.yahoo.com/yui/reset/>
Contents:
  - Structure
  - Colors, borders, & images
  - Typography
  - Other
  - Forms
  - hCard
Colors
  - #446666: green
    - #7c9494: 70 %
    - #98abab: 55 %
    - #b4c2c2: 40 %
    - #d0d8d8: 25 %
    - #ecefef: 10 %
  - #a03f32: red
    - #bc786f: 70 %
    - #cb968e: 55 %
    - #d9b2ad: 40 %
    - #e7cfcb: 25 %
    - #f5ecea: 10 %
Comments:
  - Typographical properties of block copy elements are calculated from the
    properties of #content p.  An effort is made make elements aligned to a grid
    of a 1.5 em line height (and so spacings are all multiples of 1.5 em).

*/



/*------------------------------------------------------------------------------
Structure
------------------------------------------------------------------------------*/

html {
  margin-left: -78px;                                                           /* Hang the globe in the margin so the page's content is centered */
}

body,
.wrapper#bottom-outer {
  clear: both;
  margin-right: -66px;
  width: 100%;
}
  .wrapper#inner,
  .wrapper#bottom-inner {
    margin: 0 auto;
    padding-left: 78px;                                                         /* (Width of globe.png) + (distance from edge of *.type.png to the first letter) */
    position: relative;
    width: auto;
      max-width: 60em;                                                          /* About 800 px at normal (16 pt(px)) font-size */
      min-width: 45em;                                                          /* About 650 px at normal (16 pt(px)) font-size */
  }
  .wrapper#bottom-outer {
    margin-top: -5px;                                                           /* To give the illusion that the shadow, which is 5 px tall, is sticking-into .wrapper#inner in the same way it is at the top */
    padding-top: 5px;                                                           /* To push its contents back down to the right position */
  }

#content {
  clear: left;
  margin: 1.5em 15em 1.5em 0;
  padding-bottom: 1.5em;
  padding-right: 1.5em;
  width: auto;
    max-width: 43.5em;
    min-width: 28.5em;
}

#float_clearer {
  clear: both;
}

#footer {
  height: 4.5em;                                                                /* Because things are floated */
  padding: 1.5em;
  padding-left: 0;
}

#header {
  height: 47px;                                                                 /* Because its contents are floated and #content's margin-top needs to "push" off of something not floated */ /* Height of dhk_financial_advisors.type.png */
  margin-left: -82px;                                                           /* (Width of globe.png) + (distance from edge of *.type.png to the first letter) */
  padding-left: 66px;                                                           /* Width of globe.png */
  position: relative;
}
  #header h1 a,
  #header h1 a img {
    display: block;
    float: left;
  }
  #header h1 #globe {
    height: 74px;                                                               /* Height of globe.png */
    position: absolute;
      left: 0;
      top: 0;
    width: 66px;                                                                /* Width of globe.png */
  }

#nav {
  margin-right: 1px;                                                            /* For that dotted border that appears when the right-most link is in focus in Firefox, so a scroll bar isn't produced */
  position: absolute;
    right: 0;
    top: 0;
}
  #nav ol {
    position: relative;
  }
    #nav ol li {
      float: left;
    }
      #nav ol li a,
      #nav ol li span {
        display: block;
        height: 43px;                                                           /* Height of main part of ribbon.background.png */
        line-height: 43px;
        padding: 0 1em;
      }
      #nav ol ul {
        display: none;
        position: absolute;
          top: 47px;
        z-index: 20;
      }
      #nav ol li:hover ul {
        /*display: block;*/
      }
      #nav ul li {
        float: none;
      }
        #nav ol ul li a,
        #nav ol ul li span {
          display: block;
          float: none;
          height: auto;
          line-height: 1.5em;
        }

#sub-nav {
  position: absolute;
    right: 0;
    top: 47px;                                                                  /* Height of main part + stroke of ribbon.background.png */
  margin: 1.5em;
  margin-top: 1.5em;
  width: 12em;                                                                  /* Yields a total width of 15 em (1/4 or 1/3 of .wrapper#inner{max-/min- width} */
}
    #sub-nav a,
    #sub-nav span.current {
      display: block;
    }



/*------------------------------------------------------------------------------
 Colors, borders, & images
------------------------------------------------------------------------------*/

#content a:hover,
#content a:focus,
#content a:active,
#footer a:hover,
#footer a:focus,
#footer a:active {
  background: #ecefef;
  border-bottom: 0.05em solid #7c9494;
  color: #000;
}

body {
  background: #fff url(/images/css/ribbon.background.png) 50% 0 repeat-x;       /* Seemless with the #header images at full width */
}

.box,
input,
select,
textarea {
}

#content {
  background: #fff;
  border-right: 0.05em solid #999;
  color: #222;
  margin-left: -0.05em;
}

#footer {
  color: #efefef;
}

#header {
  background: transparent url(/images/css/globe.inset.png) 0 0 no-repeat;       /* Pre-load the :hover image */
}
  #header a {
    border: none;
  }
  #header h1 a#globe:link,
  #header h1 a#globe:visited,
  #header h1 span#globe {                                                       /* For the home page only */
    background: transparent url(/images/css/globe.outset.png) 0 0 no-repeat;
  }
  #header h1 a#globe:hover,
  #header h1 a#globe:focus {
    background: transparent url(/images/css/globe.inset.png) 0 0 no-repeat;
  }

html {
  background: #0a0a0a;
}

input:focus, input:hover,
textarea:focus, textarea:hover {
  background-color: #d0d8d8;
}

#nav a:link,
#nav a:visited {
  border: none;
}
  #nav ol a,
  #nav ol span {
    color: #fff;
  }
  #nav ol a:hover,
  #nav ol a:focus,
  #nav ol a:active,
  #nav ol span:hover,
  #nav ol span:focus,
  #nav ol span:active {
    background: transparent;
    border-bottom: 4px solid #98abab;
    color: #fff;
  }
  #nav ol a.current,
  #nav ol span.current {
    border-bottom: 4px solid #7c9494;
    color: #fff;
  }
    #nav ol ul {
      background: #fff;
    }
      #nav ol ul a,
      #nav ol ul span {
        color: #466;
      }
      #nav ol ul a:hover,
      #nav ol ul a:focus,
      #nav ol ul a:active,
      #nav ol ul span:hover,
      #nav ol ul span:focus,
      #nav ol ul span:active {
        background: #ecefef url(/images/css/shadow.bottom.short.background.png) 0 100% repeat-x;
        border: none;
        color: #466;
      }
      #nav ol ul a.current,
      #nav ol ul span.current {
        border: none;
        color: #000;
      }

#sub-nav {
}
  #sub-nav > div a,
  #sub-nav > div span.current {
    border-bottom: 0.05em solid #999;
    color: #466;
    margin-top: -0.05em;                                                        /* Cheat a little bit and use margin-top instead of margin-bottom because <li>s underneath would otherwise cover-up the border */
  }
  #sub-nav > div span.current {
    color: #222;
  }
  #sub-nav > div a:hover,
  #sub-nav > div a:focus,
  #sub-nav > div a:active {
    background: #ecefef url(/images/css/shadow.bottom.short.background.png) 0 100% repeat-x;
  }
  #sub-nav ul li a:hover,
  #sub-nav ul li a:focus,
  #sub-nav ul li a:active {
    background: #ecefef url(/images/css/shadow.bottom.short.background.png) 0 100% repeat-x;
    color: #7c9494;
  }
    #sub-nav ul li a,
    #sub-nav ul li span.current {
      border: none;
      background: #fff;
      color: #7c9494;
    }
    #sub-nav ul li span.current {
      color: #222;
    }

.wrapper#bottom-outer {
  background: #0a0a0a url(/images/css/ribbon.inverted.background.png) 0 0 repeat-x;
}
.wrapper#inner {
  background: transparent url(/images/css/globe-type_joiner.background.png) 62px 0 no-repeat;
}
.wrapper#top {
}



/*------------------------------------------------------------------------------
 Typography
------------------------------------------------------------------------------*/

/*abbr,
acronym {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}*/

body {
  font-size: 0.75em;
}

input, textarea {
  line-height: 1.5em;
}
input[type="reset"],
input[type="submit"] {
  text-align: center;
}

#nav {
  font-size: 1em;                                                               /* line-height is set for structure */
  white-space: nowrap;
}
  #nav a {
  }
  #nav ol {
  }
    #nav ol {
      text-align: center;
    }
  #nav a:hover,
  #nav a.current,
  #nav span.current {
  }
    #nav ol ul {
      text-align: left;
    }

#sub-nav {
  white-space: nowrap;
}
    #sub-nav > div a,
    #sub-nav > div span.current {
      font-size: 1em;
      line-height: 1.5em;
      padding: 0 1em;
      word-spacing: 0.2em;
    }
    #sub-nav div span.marker {
      display: none;
    }
    #sub-nav ul li a,
    #sub-nav ul li span.current {
      font-size: 1em;
      line-height: 1.5em;
      padding: 0 1em;
    }


/* Vertical spacing: Begins /after/ the header */
/*
body {
   background: #fff url(/images/css/grid.screen.png) 0 47px repeat !important;
}
body * {
  background: transparent !important;
}
input, textarea {
  background-color: pink !important;
}
*/



/*------------------------------------------------------------------------------
 Other
------------------------------------------------------------------------------*/

a {
  text-decoration: none;
}
abbr[title]:hover,
acronym[title]:hover {
  cursor: help;
}

.top {
  clear: none;
  font-size: 1em;
  line-height: 1.5em;
  margin: -1em 0;
  position: relative;
    right: -1em;
  text-align: right;
}
  .top span {
    display: none;
  }
  .top:hover span,
  .top:focus span {
    display: inline;
  }


.box {
  padding: 10px;
}
.box.complement {
  clear: right;
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}
.box.featured {
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
}
  .box.picture img {
    background-color: #fff;                                                     /* For those with transparency */
    display: block;
    padding: 10px;
  }

input[type="reset"]:focus, input[type="reset"]:hover,
input[type="submit"]:focus, input[type="submit"]:hover,
input[type="button"]:hover {
  cursor: pointer;
}

#nav span.current,
#sub-nav span.current {
  cursor: default;                                                              /* Change from text selection pointer */
}
.print_only,
.printOnly {
  display: none;
}



/*------------------------------------------------------------------------------
 hCard
------------------------------------------------------------------------------*/

#footer .vard .url {
  display: none;
}