/* Website stylesheet for Train The Brain
 */


/* === Page layout === */

body {
    /* position: absolute;  This seems to trigger scrollbars on internal contentEditables in IE (7), so let's avoid setting it */
    margin: 0;
    padding: 0;
    font-size: 75%;                     /* Use a percentage to make it zoom predictably in IE6/7. 75% corresponds with the default on most systems. */
    .text-align: center;                /* Center #content in IE6/7 */
    line-height: 1.5em;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #37363f;
    background: #fff3c6;
    }

#wrapper {
    position: relative;         /* Turn on positioning so that we can position items inside the wrapper */
    .text-align: left;          /* Undo effects of centering, above, in IE6/7 */
    left: -80px;
    width: 920px;               /* Width of visible site. Set to % for a fluid width, or 960px or similar for a fixed width */
    margin: 0 auto;             /* Left-right margins must always be 'auto' for the centering to work */
    padding: 0 10px;

    /* Having the background here (with a height of 100% so the background fills
     * the page) is better than in body: we don't need to position it with a
     * percentage, giving rounding errors at some browsers sizes; it works better
     * in IE6; it's automatically positioned to the right place, so less guesswork
     * or arithmetic.
     */
    height: 100%;
    background: transparent url(images/content-background.png) repeat-y;
    }

.clearfix:after {clear:both;content:'.';display:block;height:0;visibility:hidden;}

#header {
    width: 920px;

    /* Center it: */
    left: 50%;
    margin-left: -540px;

    position: fixed;
    z-index: 1;
    top: 0;
    background: #f00000;
    color: #ffffff;
    height: 87px;
    
    border-bottom:7px solid #ffffff;
    }
  #logo {
   position:absolute;
   left:-60px;
   top:0px;
   z-index:2;
   left:20px\0 /* \0 catches only IE up to v8 */
  }
  #logo-text {
   position:absolute;
   left:80px;
   top:30px;
   z-index:2;
   left:160px\0 /* \0 catches only IE up to v8 */
  }
    #header h1 {color:#ffffff;font-weight:bold;font-size:53px;text-decoration: none; border: none; }
    #header a { border: none; text-decoration: none; }
  #header_image {position:absolute;top:94px;border-bottom:7px solid #414141;}

#content_wrapper {position: relative; margin-bottom: 350px;  top: 350px; background:url('images/content-wrapper-bg.png') left repeat-y #ffffff;}
  #content {float:left;width:600px; padding:40px; }

/********/
/* menu */
#menu { float: left; width: 240px; background: url('images/menu-bg.png') top no-repeat #ffe26f; min-height: 493px; padding-top: 40px; }
#menu ul { margin: 0px; padding: 0px; }
#menu li { list-style: none; }
.top-menu { background: none; }
.top-menu li { font-weight: bold; color: #4d4d4d; font-size: 1.05em; }
.top-menu li > a { text-decoration: none; color: #4d4d4d; }
.top-menu li > a:hover { text-decoration: none; color: #8d8d8d; }
.top-menu > li {
  border-bottom: 1px #efae00 solid;
  border-top: 1px #fff7dc solid;
  padding-left: 40px;
  padding-right: 10px;
  color: #4d4d4d;
  display: block;
  padding-top: 11px;
  padding-bottom: 11px;  
}
.top-menu > li:last-child { border-bottom: 1px solid white; }
.top-menu > li:hover { border-color: #ffffff; background: #ffffff; position: relative; border: none; }
.top-menu > li:hover > a, .top-menu > li:hover > .title { font-size: 1.5em; position: relative; }
.top-menu > li:hover > li { font-size: 1.05em; }
.top-menu > .has-sub-menu:hover {
  width: 360px;
  z-index: 1;
  border-radius: 0px 10px 0px 0px;
  box-shadow: 3px 1px 11px rgb(187, 187, 187);
  box-shadow: 3px 1px 11px rgba(0, 0, 0, 0.2);
}
.top-menu > .has-sub-menu > ul { 
  display: none;
  border-radius: 0px 0px 10px 10px;
  max-width: 240px;
  box-shadow: 3px 4px 6px rgb(187, 187, 187);
  box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
  line-height: 16px;
  background: #ffffff;  
  position: absolute;
  right: 0px;
  top: 40px;
  width: 270px;  
}
.has-sub-menu .has-sub-menu { position: relative; }
.has-sub-menu .has-sub-menu > ul {
  background: #ffffff;
  display: none;
  position: absolute;
  top: 0px;
  left: 230px;
  border-radius: 0px 10px 10px 10px;
  box-shadow: 1px 2px 8px rgb(187, 187, 187);
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
}
.has-sub-menu .has-sub-menu > ul a, .has-sub-menu .has-sub-menu > ul .title {
  display: block;
  font-size: .85em;
  min-height: 12px;
  width: 220px;
  padding: 10px;
}
.has-sub-menu > ul > .has-sub-menu:hover ul { display: block; }

.top-menu > .has-sub-menu:hover > ul { display: block; }

.top-menu ul > li > a, .top-menu ul > li > .title {
  display: block;
  min-height: 16px;
  width: 220px;
  padding: 10px 20px;
}
/* /menu */
/*********/

#extras {
    position: absolute;
    right:-144px;
    bottom:55px;
    line-height: 1em;
    font-size: 1em;
    width:224px;
}
#extras, #footer #extras { text-decoration: none; border-bottom: none; }

#bubble .top {
    width:224px;
    height: 52px;
    background-image: url('images/bubble-top.png');
    background-repeat: no-repeat;
    display:block;
}

#bubble .content {
    width:149px;
    text-align: left;
    padding-left: 35px;
    padding-right: 40px;
    line-height: 16px;
    background-image: url('images/bubble-middle.png');
    background-repeat: repeat-y;
}

#bubble .content p {margin-top:0px;padding-top:17px;}

#bubble .bottom {
    width:224px;
    height: 55px;
    background-image: url('images/bubble-bottom.png');
    background-repeat: no-repeat;
}

#entertainment-book {
    margin-left: 20px; border-bottom: 0px !important; display: block; width: 300px;
}
#entertainment-book img {
    width: 100%;
}

#sidebox2 {
    .position: relative;
    .left: -6px
}

#sidebox1 a {
    height: 25px;
    line-height: 25px;
    background-image: url('images/contact-train-the-brain.png');
}

#sidebox2 a {
    min-height: 33px;
    background-image: url('images/common-questions.png');
}

#footer .sidebox a:hover, #footer .sidebox a {
    border: none;
}

.sidebox {
    position: relative;
    width: 187px;
    background-image: url('images/sidebar-box-middle.png');
    background-repeat: repeat-y;
    text-align: center;
    color: #000000;
    line-height: 1em;
    font-size: 1em;
    z-index: 0;
    padding: 18px 0px 18px 28px;
}

    .sidebox a {
        font-weight: normal;
        width: 130px;
        text-align: left;
        background-position: left;
        background-repeat: no-repeat;
        display: block;
        text-decoration: none;
        border: none;
        line-height: 18px;
        padding-left: 35px;
    }

    .sidebox a h3 {
        font-weight: normal;
        font-size: 18px;
        color: #e57200;
        text-decoration: none;
    }


    .sidebox .top {
        position: absolute;
        height: 26px;
        width: 215px;
        top: 0;
        left: 0;
        background-image: url('images/sidebar-box-top.png');
        background-repeat: no-repeat;
        z-index: -1;
    }

    .sidebox .bottom {
        position: absolute;
        height: 26px;
        width: 215px;
        bottom: 0;
        left: 0;
        background-image: url('images/sidebar-box-bottom.png');
        background-repeat: no-repeat;
        z-index: -1;
    }


/****************************************/
/****************************************/
/****************************************/

#cover-image-container {
    position: relative;
    display: block;
    z-index: 1;
    width: 920px;
    background-repeat: no-repeat;
    }
    #cover-image-container img {
        display: block;
        width: 100%;
        }


    #content p, #content blockquote {
        /* Text in the content area looks better if it's not full-width.
         * Callouts etc appear to the right-hand side of the text, no wrapping.
         */
        }
    #content * p, #content * blockquote, #content * .columns .half {
        /* But don't do it to blocks inside anything else -- that messages everything up.
         */
        width: auto;
        }

#attribution {
    text-align: center;
    width: 100%;
    font-size: 0.8em;
    color: #999;
    padding-top: 80px;
    padding-bottom: 20px;
    line-height: 1.2em;
    }
    #attribution a {
        color: #999;
        }

#footer {
    position: fixed;
    bottom: 0px;
    background: #37363f url(images/footer-background.png) repeat-x;
    width: 978px;

    /* Center it */
    left: 50%;
    margin-left: -580px;
    border-radius: 31px 31px 0px 0px;
    text-align: center;
    height: 55px;
    line-height: 60px;
    z-index: 0;
    padding: 0 31px;
    color: #807549;
    font-size: 0.9em;
    }
    #footer h3 {
        margin: 0;
        display: inline;
        }
    #footer .label {
        font-weight: bold;
        color: #4d4d4d;
        }
    #footer a {
        text-decoration: none;
        border-bottom: 1px solid #e9b919;
        color: #807549;
        }
    #footer a:hover {
        border-bottom: 1px solid #666;
        }
    #footer ul {
        position: relative;
        top: -3px;
        display: inline;
        }
        #footer ul li {
            padding-left: 52px;
            }
#footer_content {position:relative;}

/* === Content styles === */

/* 2 & 3 column layouts. The default gutters here work well with a 960px layout
 * with 40px left/right margins and 20px gutters between columns.
 *
 * Everything is specified in percentages so that the classes can be used in
 * any context, large or small, but they're designed to approximately line up
 * with a 960px layout with 40px side margins and 20px gutters between columns
 * (alignment is off-by-1px in most browsers, and column widths are too.
 * Column-widths in IE6 are completely off, but at least they all align within 1px)
 *
 * More concern is given to making left-hand-sides align closer than 2px, and
 * the columns display roughly correctly in IE7-8, rather than typically more minor
 * issues like pixel-correctness of the right-hand-side.
 *
 * Gutters are specified using padding (because margins are used for positioning)
 * and are always on the right-hand-side of the column (for simplicity).
 *
 * Left & right columns are always hard-left and hard-right, whereas mid columns
 * are aligned to the left plus a left-margin the width of the preceding columns.
 *
 * The concept is extensible, and you could define '.mid-left' and '.mid-right'
 * '.quarter' for a 4-column layout.
 */
td.columns {
    /* Allow cells to be used as a column container; override the default
     * display: block;
     */
    display: table-cell;
    }
.columns {
    position: relative;     /* avoid display quirks in IE6 (where the layout is sometimes a complete mess until something on the page changes) */
    display: block;
    zoom: 1;                /* force hasLayout in IE6/7 to trigger float auto-clearing */
    }
    .columns:after {        /* auto-clear floats in other browsers */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }    
    .columns div.left {             /* Because '.left/.right' are fairly generic names, we tie it down to divs only. Probably covers most use-cases, and less likely to cause hidden bugs. */
        float: left;
        /* Use padding for gutters, because margin is needed for positioning with a 3-column layout */
        padding-right: 2.3%;      /* 20px while making rounding come out as close as possible */
        }
    .columns div.mid {
        /* Middle column of a 3-column layout */
        float: left;

        /* Use padding for gutters, because margin is needed for positioning with a 3-column layout */
        padding-right: 2.3%;            /* 20px while making rounding come out as close as possible */
        }
    .columns div.right {
        float: left;
        }
    .columns div.right.two-thirds {
        /* Shift it slightly to the left so that it aligns with the 0.34% extra
         * space we've left for rounding errors:
         */
        position: relative;
        right: 1.1%;
        }
    .columns div.half {
        width: 48.7%;                   /* (1/2 of (width - gutters)) */
        }
    .columns div.third {
        width:31.65%;                  /* (1/3 of (width - gutters)) - (some rounding so IE doesn't shove the block down to the next row) */
        }
    .columns div.two-thirds {
        width: 65%;                     /* (2/3 of (width - 1 gutter)) - (some rounding so IE doesn't shove the block down to the next row)*/
        }

label {
    cursor: pointer;
    }

a img {
    /* A lot of browsers put outlines around images in a hyperlink. Usually
     * looks terrible.
     */
    border: none;
    }

a {
    color: #aac90e;
    color: #e77a0f;
    text-decoration: underline;
    }
a:hover {
    text-decoration: none;
    }
#content a:hover img { /* Explicitly avoid interfering with images outside #content */
    /* Make images go lighter when hovered -- looks good, and good usability */
    opacity: 0.75;
    filter: alpha(opacity=75);
    }

a:active, a:focus {
    outline: none;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child
 h1.first, h2.first, h3.first, h4.first, h5.first, h6.first, p.first {
    margin-top: 0;
    }

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-style: normal;
    padding: 0;
    color: #4d4d4d;
    }

.subtitle {
    position: relative;
    display: block;
    font-size: 1em;
    line-height: 1em;
    color: #777;
    letter-spacing: 1px;
    margin-bottom: -1em;        /* Eat up extra margin, minus 0.5em because line-height is only 1em */
    }

h1 {
    color: #4d4d4d;
    font-weight: normal;
    letter-spacing: 1px;
    font-size: 3.3em;
    line-height: 1em;
    margin: 0.25em 0 1em;
}
    h1 + .subtitle {
        font-weight: bold;
        top: -0.75em;
        color: #636363;
        }

h2 {
    font-size: 1.75em;
    margin: 2.2856em 0 1.1428;
    }
    h2 + .subtitle {
        font-variant: small-caps;
        top: -1.5em;
        }

h3 {
    font-size: 1.25em;
    margin: 2em 0 0.5em;  /* Sorry, break vertical rhythm again :-( */
    color: #37363f;
    }
    h3 + p {
        margin-top: 0.75em;
        }
    h3 + .subtitle {
        font-variant: small-caps;
        top: -1em;
        }

h4 + .subtitle, h5 + .subtitle, h6 + .subtitle {
    font-size: 0.75em;
    line-height: 1.5em;   /* Make sure line-height*font-size == base line-height */
    top: -0.5em;        /* Make sure the grey left-border matches up */
    padding-left: 4px;
    display: block;
    margin-bottom: -1.5em;
    }

h4 + p, h5 + p, h6 + p {
    /* Currently, I think that these smaller headings look best without much
     * subsequent margin -- but to preserve vertical rhythm, it has to be either
     * 0 or 1.5em, so we'll settle for 0.
     */
    margin-top: 0;
    }

h4 {
    font-size: 1em;
    margin: 3em 0 0;            /* 0 bottom margin. See above comment */
    border-left: 8px solid #cfcfcf;
    padding-left: 4px;
    }
    h4 + .subtitle {
        border-left: 8px solid #cfcfcf;
        }

h5 {
    font-size: 0.9em;
    margin: 3.334em 0 0;        /* 0 bottom margin. See above comment */
    border-left: 16px solid #cfcfcf;
    padding-left: 4px;
    }
    h5 + .subtitle {
        border-left: 16px solid #cfcfcf;
        }

h6 {
    font-size: 0.9em;
    margin: 3.334em 0 0;        /* 0 bottom margin. See above comment */
    border-left: 24px solid #cfcfcf;
    padding-left: 4px;
    }
    h6 + .subtitle {
        border-left: 24px solid #cfcfcf;
        }

.darkhead {
    color: #536207;
}

p {
    padding: 0;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    }

ul, ol, li {
    /* Refresh styles, to make it easier to override */
    margin: 0;
    padding: 0;
    }

ul ol, ol ol, ul ul, ol ul {
    /* I don't like top/bottom margins on lists-within-lists */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    }

ul, ol {
    position: relative;
    padding-left: 3em;
    margin: 1.5em 0;
    }

/* If you have a generic style for a UL, specify it to be within #content, so
 * you don't mess with other ULs in sidebars and navigation. But don't go too
 * overboard with specifying stuff to be within #content, or you have to start
 * adding #content in front of *everything* to make sure the specifier
 * overrides.
 */
#content ul, ul.accent, ul.ticklist {
    /* Use this example to make your own lists with images as bullets */
    padding-left: 1em;                  /* Because list-style-position:inside messes with the carefully chosen padding above */
    list-style-type: none;

    /* This is all a complicated way of
     * getting bullets not to hide under a float:left element
     * and dealing with the side effects.
     */
    list-style-position: inside;        /* So that bullets don't hide under floats. */
    
    /* x-width of the image bullet + spacing between bullet and list-item: */
    text-indent: -23px;                 /* Because list-style-position:inside also kills the nice hanging indents */
    left: 23px;                         /* Because if we using padding-left, it has no effect when there's a float. */
    padding-right: 23px;                /* Because left:Npx causes it to overlap the right-hand-side of the box. */

    /* Because list-style-image is rubbish in IE, we'll use background-image instead */    
    .list-style-position: outside;
    .padding-left: 2em;
    .text-indent: 0;
    .left: 0;
    .padding-right: 0;
    .list-style-image: none;
    }
    ul.accent li, ul.ticklist li {
        _position: relative;
        line-height: 1.25em;
        
        /* Weirdly, inline-block below doesn't seem to do the "inline" part. Can't figure it out, but it happens to be very convenient. */
        .display: inline-block;                 /* Seems to stop the bullet (background image) from disappearing under floats (this actually seems to work for webkit/Fx too, so maybe we could try doing all browsers with background-image) */
        .background-position: left 6px;         /* Oddly, display:inline-block causes the background image to be vertically offset, so we set this for both ul>li and ul.small>li */
        .background-repeat: no-repeat;
        .padding-left: 15px;
        }


ul {
    list-style-image: url(images/list-bullet.png);
    .list-style-image: none;
    }
    ul li {
/*        .background-image: url(images/list-bullet.png);*/
        }
        
ul.accent {
    list-style-image: url(images/list-bullet-accent.png);
    .list-style-image: none;
    }
    ul.accent li {
        .background-image: url(images/list-bullet-accent.png);
        }

ul.ticklist {
    list-style-image: url(images/list-tick.png);
    .list-style-image: none;
    }
    ul.ticklist li {
        .background-image: url(images/list-tick.png);
        .background-position: left 0px;         /* Adjust for taller background-image */
        .padding-bottom: 3px;                   /* Height doesn't stretch to fit background-image, so we have to put a bit of manual adjustment for taller bullets */
        }
        
ul.nobullets {
    /* Get rid of default bullets and user-specified image bullets */
    list-style-type: none;
    list-style-image: none;
    }
    ul.nobullets li {
        background-image: none;     /* In case a background-image is used to specify a bullet */
        padding-left: 0;
        }

ul.inline, ul.quick-links, #content ul.inline, #content ul.quick-links  {        /* You'll need to add #content ul.* here too, if you've specified a generic #content.ul above, to override it. */
    /* Get rid of all bullets, remove all indentation, and display inline */
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    left: 0;
    display: inline;
    text-indent: none;
    }
    ul.inline li {
        background-image: none;     /* In case a background-image is used to specify a bullet */
        margin: 0;
        padding: 0;
        text-indent: none;
        display: inline;
        }
        
ul.quick-links a {
    font-weight: bold;
    }

pre {
    width: 100%;            /* So that too-wide text doesn't cause layout issues, eg float-clearing */
    overflow: auto;         /* If there is too-wide text, force it to use scrollbars. If you don't
                             * like scrollbars & want to use 'overflow:visible', make sure you override
                             * it for IE6 with 'scroll' or 'auto' or 'hidden', because IE6 treats 'width'
                             * as 'max-width'
                             */
    font-size: 1.2em;
    }

dt {
    font-weight: bold;
    margin: 0;
    }
dd {
    margin-left: 2em;
    }

table {
    width: 96%;                             /* Don't quite fill up the whole space, so we can avoid unecessary scrollbars in a richtext editor */
    border-collapse: collapse;
    }
    td, th {
        vertical-align: top;
        text-align: left;
        }
    td p {margin-top:0px;margin-bottom:0px;}
    th {
        padding: 0 0.5em;
        }

table.data {
    font-size: 1em;
    padding: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    }
    table.data caption {
        padding: 0;
        margin-top: -1.333em;       /* Shift caption up... */
        margin-bottom: 1.333em;         /* ...by 1em of parent's font-size */
        font-size: 0.75em;
        line-height: 2em;   /* Bring line-height to 1.5 of parent's font-size */
        border-top: 1px dashed #eee;
        caption-side: bottom;
        }
    table.data tr {
        padding: 0;
        margin: 0;
        }
        table.data td, table.data th {
            padding: 0em 0.5em;
            line-height: 1.5em;
            margin: 0;
            border-right: 1px solid #ddd;
            }
        table.data th {
            border-right: 1px dashed #ddd;
            }
        table.data th.right, table.data td.right {
            border-right: 0;
            }
    table.data tr.header th {
        padding-bottom: 0.5em;
        }
    table.data tr.even {
        background: #f5f5f5;
        }

.callout, .left-callout, .right-callout, .center-callout {
    margin-bottom: 1em;
    margin-top: 1.5em;      /* Make callouts align vertically with paragraphs */
    }
    .callout img, .left-callout img, .right-callout img, .center-callout img {
        display: block;
        }

.callout, .left-callout {
    float: left;
    margin-right: 2em;
    }
.right-callout {
    float: right;
    margin-left: 2em;
    }
.center-callout {
    text-align: center;
    background: none;
    border: none;
    margin: auto;
    width: 96%;                             /* Don't quite fill up the whole space, so we can avoid unecessary scrollbars in a richtext editor */
    }
    .center-callout img {
        margin: auto;
        border: 1px solid #aaa;
        }

.callout .caption, .left-callout .caption, .right-callout .caption, .center-callout .caption {
    display: block;
    padding-top: 0.4em;
    font-size: 0.8em;
    color: #555555;
    }

.floatleft {
    float:left;
}

.floatright {float:right;}

.messages {
    background: #feffcf;
    border: 1px solid #ffef95;
    color: #393841;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    }
    .messages .error {
        font-weight: bold;
    }
    .messages p {
        margin-top: 2px;
        margin-bottom: 2px;
        }

.highlight {
    /* Use this for general-purpose highlighting of sections, or highlighting
     * the currently visited #fragment with javascript.
     * (generally looks best on whole sections, not individual small elements)
     */
    background: #feffcf;
    border: 1px solid #ffef95;
    padding: 5px;
    border-radius: 3px;
    }

.fragment {
    /* The text that appears when you hover a highlighted fragment */
    float: right;
    }

.clear {
    /* Using a .clear class instead of <br style='clear:both'> tends to work better, because:
     *
     * 1) IE doesn't always do the right thing with br,
     * 2) br adds unwanted space,
     * 3) standards-compliant browsers won't clear
     *    if you use an inline element like <span> without specifying display:block,
     * 4) this encapsulates all the extra nitty-gritty details nicely, and
     *    lessens the need for trial-and-error each time you need to completely
     *    clear floats.
     */
    display: block;
    clear: both;
    }

.full-width, #content .full-width {
    /* Useful for tables, or anything else (such as paragraph text or columns)
     * that we want to be a particular width, or auto, by default, but also
     * often have places where we'd like the same type of element to fill the
     * entire width.
     *
     * We specify this to be explicitly inside content, as well as generically,
     * because we'd often explicitly set paragraph text to be less-than-fullwidth.
     *
     * Override max-width at the same time, because if we want full-width, we
     * *really* want it.
     */
    width: 100%;
    max-width: 100%;
    }


blockquote {
    position: relative;
    margin-top: 34px;
    }
    /* Use some clever javascript to insert .startquote and .endquote
     * appropriately
     */
    .startquote {
        position: absolute;
        top: -26px;
        left: -22px;
        font-size: 0;
        width: 59px;
        height: 51px;
        background: url(images/quotemark.png) no-repeat;
        z-index: -1;        /* Make sure text doesn't disappear beneath the quote mark */
        }
    .endquote {
        display: none;
        }
    .author {
        display: block;
        margin-top: 0.5em;
        }

.disabled {
    color: #999;
    }

/* === Form styles === */

form {}
    input {
        }
    input.unknown {
        border: 2px solid red;
        }

        }

/*  */
p.quote {
    text-align: left;
    color: #444444;
}

span.author {
    font-style: italic;
    display: inline-block;
    text-align: right;
    color: #000000;
}

.clearfix:after {clear:both;content:'.';display:block;height:0;visibility:hidden;}
h3.nameheading {margin-bottom:1px;}
.sub {font-size:10px;font-style:italic;}
table.peoplegrid td {padding-bottom:30px;}

.sponsors { padding: 1rem; }
.sponsor img { max-width: 100%; }

/* Mobile CSS */
@media
	only screen and (max-device-width: 480px),
	(-webkit-min-device-pixel-ratio: 1.5), 
	(min-resolution: 144dpi)
{
    .top-menu li > a, .top-menu li > .title { line-height: 1.3em; }
    .top-menu > li { font-size: 2.1em; padding-top: 30px; padding-bottom: 30px; }
    .top-menu > li:hover { position: relative; font-size: 2.1em; }
    .top-menu > li { padding-left: 15px; }   
    .top-menu > li.has-sub-menu:hover { width: 660px; }
    li:hover > ul { width: 500px; max-width: 540px; top: 75px; }
    .top-menu ul li ul li a { width: 490px; }
    .top-menu ul li:hover ul li a { font-size: 1em; padding-top: 30px; padding-bottom: 30px; }
    .has-sub-menu .has-sub-menu > ul {
      background: #ffffff;
      position: absolute;
      left: -250px;
      width: 250px;
    }    
    .has-sub-menu .has-sub-menu > ul a, .has-sub-menu .has-sub-menu > ul .title {
      font-size: 1em;
    }
}