/*
   Jerry Updated 12/21/2015

   vcfstyle.css - included in header.php
*/

/* elements */

/*
   A max-width of 1110px matches previous center content width restriction
   on paragraph text in the #content container, but for all center content
   instead of just paragraphs.  The value is used in the html, #content,
   and .footer properties.
*/

html {
    max-width:1110px; /* NEEDED FOR PAGE WIDTH TO WORK */
}

/*
   CSS3 allows the use of multiple background images.  That allows the
   border gif to be used on both sides of the page.  However, using
   attachment as fixed, to make the background image not scroll, causes
   the right border to go to the browser window instead of the page
   content.  CSS is still a tricky rabbit.
*/
body {
    width:100%;
    font-family:sans-serif;
    color:#337c4a;
    background-image:url(http://www.vitamincfoundation.org/images/blubordr.gif),
                     url(http://www.vitamincfoundation.org/images/blubordr.gif);
    background-position:left bottom,
                        right bottom;
    background-repeat:repeat-y;
    background-color:#ffffff;
}

/*
   All headings have the same margin and padding.  They will appear
   indented 10px.
*/
h1, h2, h3, h4, h5, h6 {
    margin:5px;
    padding:5px;
}

/*
   All tables will have these border characteristics by default.  This
   is what a table border would look like when the old table border=2
   attribute was set.
*/
table, tr {
    border-style:outset;
    border-width:2px;
}
td, th {
    border-style:inset;
    border-width:2px;
    padding:5px;
}

iframe {
    border-style:none;
}

/* IDs */

/* the container for everything */
#content {
    width:100%;
    max-width:1110px; /* NEEDED FOR PAGE WIDTH TO WORK */
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

/* classes */

/* ----- POSITIONING -----

The contentText class is the center of the page.  This class has no set
width, but it has margins on each side of 192px, 16px at the top, and
110px at the bottom.  The 192px on each side is space for the two
sidebars.  The 110px at the bottom is to leave space for the footer.

The left class is the left sidebar.  It's positioned 5px from the left
and 16px from the top using invisible borders.  It's 160px wide with a
110px invisible border at the bottom to leave space for the footer to
float.  It contains the menu class.

The right class is the right sidebar.  It should be positioned 5px from
the right and 16px from the top using invisible borders.  It's 160px
wide and it has a 110px invisible border at the bottom to leave space
for the footer.  It contains the other class.

The footer is the width of the page.  It has 10px of padding above and
below the text.  It's position fixed instead of absolute, so it hugs
the bottom of the visible page and doesn't scroll.  That means the
sidebars have an invisible border along the bottom to accommodate the
footer.
*/

/* main content in center of page */
.contentText {
    border:1px solid #000000;
    background-color:#ffffff;
    color:#337c4a;

    width:auto;
    height:auto;
    margin:16px 192px 110px 192px;
    padding:8px;
}
.contentText a {
    color:#0000ff;
}

/* position for content on left of page
the -3px is to compensate for a 3px top margin in the menu class
that's needed to make the menu continue below the accordion and look
consistent.
*/
.left {
    position:absolute;
    left:0px;
    top:0px;
    width:160px;
    height:auto;
    margin-top:-3px;
    border-top:16px solid transparent;
    border-bottom:110px solid transparent;
    border-left:5px solid transparent;
    z-index:1;
}

/* position for content on right of page */
.right {
    position:absolute;
    right:0px;
    top:0px;
    width:160px;
    height:auto;
    border-top:16px solid transparent;
    border-bottom:110px solid transparent;
    border-right:24px solid transparent;   /* no idea why this has to be fudged 19px */
    z-index:1;
}

/* position for content at bottom of page */
.footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    max-width:1110px; /* NEEDED FOR PAGE WIDTH TO WORK */
    height:auto;
    padding:20px 0px;
    border-top:1px solid #000000;
    background-color:#40a040;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
    z-index:2;
}
.footer a:link, .footer a:visited {color:#ffffff;}
.footer a:hover, .footer a:active {color:#aaccaa;}

/* the menu that goes in the left sidebar for plain list */
.menu {
    position:relative;
    border:2px solid #358735;
    border-radius:5px;
    text-align:center;
    font-weight:bold;
    width:100%;
    padding:8px;
}
ul.menu {
    list-style:none;
    margin:0;
    margin-top:3px;
    background-color:#99cc99;
}
.menu a:link, .menu a:visited {
    color:#abd6a4;
    background-color:#206040;
    display:block;
}
.menu a:hover, .menu a:active {
    color:#eeeeee;
    background-color:#40a040;
    display:block;
}
.menu strong {
    font-size:large;
}

/* the menu that goes in the left sidebar for an accordion */
.menua {
    position:relative;
    border:1px solid #000000;
    text-align:center;
    font-weight:bold;
    width:100%;
    padding:0px;
}
ul.menua {
    list-style:none;
    margin:0;
    background:#99cc99;
}
.menua a:link, .menua a:visited {
    color:#abd6a4;
    background-color:#206040;
    display:block;
}
.menua a:hover, .menua a:active {
    color:#eeeeee;
    background-color:#40a040;
    display:block;
}

/* the other content that goes in the right side of the page */
.other {
    position:relative;
    border:1px solid #000000;
    text-align:center;
    font-weight:bold;
    width:100%;
    padding:8px;
    background-color:#ffffbf;
    color:#337c4a;
}

/*
basic content classes

Most block level classes below have a margin of white space above and
below.  KEEP IN MIND: changes to this file make changes in every page
that uses this style sheet.  To control the white space above and below
all elements you can edit the margin definitions that currently have
25px above and below the elements using them.  For example, both of
these have 25px above and below:

    margin:25px 0 25px 0;       -- element with no indents
    margin:25px 20px 25px 20px; -- indented element

Rather than changing the class for every place it's used, if you need
more or less space above a specific element, use a style with that
element that changes the top margin like this:

    style="margin-top:40px;"
    style="margin-top:5px;"
*/

/* class to add space above list items

The class topsp/sm/no is used with the <ul> or <ol> and then all the <li>
will automatically get the respective amount of space above them.

    <ol class=topsp>
*/
.topsp li {margin-top:20px;}
.topsm li {margin-top:10px;}
.topno li {margin-top:0;}

/* class to clear floats

For use for elements with images.  Images mess with clearing elements
so an empty div like this will drop the next element below the image:

    <div class=clear></div>
*/
.clear {
    clear:both;
}

/* paragraph
nothing but a top margin to mimic the standard <p> tag
*/
.para {
    display:block;
    margin:20px 0 0 0;
    clear:both;
}

/* paragraph indent first
a top margin to mimic the standard <p> tag, but the first line is indented
*/
.parai {
    display:block;
    margin:20px 0 0 0;
    text-indent:40px;
    clear:both;
}

/* normal default text
block display with break above and below, but no left or right margins
*/
.plain {
    display:block;
    margin:25px 0 25px 0;
    clear:both;
}

/* normal default text with indent
block display with break above and below, and margins to left and right
*/
.plaini {
    display:block;
    margin:25px 20px 25px 20px;
    clear:both;
}

/* blockquote class
block display with break above and below, margins to left and right, and a default italics and gray font
*/
.bq {
    display:block;
    margin:25px 20px 25px 20px;
    font-style:italic;
    color:gray;
    clear:both;
}

/* red standout box class
block display with break above and below, and margins to left and
right, and rounded a border and text that are both dark red color
*/
.redbox {
    display:block;
    margin:25px 20px 25px 20px;
    clear:both;
    border-style:solid;
    border-width:3px;
    border-radius:15px;
    border-color:#870000;
    padding:1em;
    color:#870000;
    text-align:left;
}

/* center class for elements like <img>, <iframe>, etc. */
.center {
    display:block;
    margin:20px auto;
}

/* no break text class
for places where text shouldn't break to the next line.  Like when
Vitamin is on one line, and C is on the next.
*/
.nobr {
    white-space:nowrap;
}

/* image float classes */
.imgfl {
    float:left;
    margin:0px 15px 15px 0px;
}
.imgfr {
    float:right;
    margin:0px 0px 15px 15px;
}
.imgup {
    background:url(http://www.vitamincfoundation.org/images/up.png);
    width:32px;
    height:32px;
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.5;
    z-index:5;
}
.imgdown {
    background:url(http://www.vitamincfoundation.org/images/down.png);
    width:32px;
    height:32px;
    position:fixed;
    top:0px;
    left:32px;
    opacity:0.5;
    z-index:5;
}

/* little class */
.little {
    margin:25px 10px 25px 10px;
    font-size:75%;
}

/* title class
font size 200% with font weight bold and margins
*/
.title {
    margin:25px 10px 25px 10px;
    font-size:200%;
    font-weight:bold;
}

/* h1 class to mimic <h1> tag text characteristics */
.h1 {
    margin:5px;
    padding:5px;
    font-size:200%;
    font-weight:bold;
}

/* h2 class to mimic <h2> tag text characteristics */
.h2 {
    margin:5px;
    padding:5px;
    font-size:150%;
    font-weight:bold;
}

/* h3 class to mimic <h3> tag text characteristics */
.h3 {
    margin:5px;
    padding:5px;
    font-size:120%;
    font-weight:bold;
}

/*
   standard background colors used in the site
*/
.bglg {
    background-color:#99cc99; /* light green in left sidebar */
}
.bgdg {
    background-color:#206040; /* dark green in left sidebar */
}
.bgmg {
    background-color:#40a040; /* medium green in footer */
}
.bgye {
    background-color:#ffffbf; /* yellow in right sidebar */
}
.bgpy {
    background-color:#ffffef; /* pale yellow in accordion contents */
}

/* table display classes
The table class has to enclose the td class elements and the td
elements will display side to side like you'd expect a table to do. 
There are three different vertically aligned td classes, which is the
only good way to vertically align things like images besides text or
inline images.  Note the default td is bottom vertically aligned.
*/
.table {
    display:table;
    margin:25px 10px 25px 10px;
    clear:both;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.tdtop {
    display:table-cell;
    vertical-align:top;
}
.tdmid {
    display:table-cell;
    vertical-align:middle;
}
.tdbot {
    display:table-cell;
    vertical-align:bottom;
}
.nb {
    border-style:none;
}

/* support for functions.php */

/* settings for onec function */
.onec {
    background:url(http://www.vitamincfoundation.org/images/onec.jpg);
    display:inline-block;
    width:13px;
    height:13px;
}

/* settings for testimonial function */
.testimonial {
    color:green;
    text-align:left;
    font-size:75%;
}

/* settings for blocktitle function */
.blocktitle {
    color:white;
    background:#358735;
    padding:15px;
    font-size:200%;
    text-align:left;
    display:inline-block;
}

/* settings for yellow background function */
.yellow {
    background:yellow;
}

/* support for accordions */

/* simple container class for accordion interface
.acc {
    display:block;
    margin:0;
    clear:both;
}

/* modifications to the jquery-ui accordion styles for the first two accordion IDs */
#accord-1 .ui-accordion-header, #accord-2 .ui-accordion-header {
    color:#337c4a;
    font-weight:bold;
    font-size:150%;
    border-style:ridge;
    border-width:4px;
    border-color:#337c4a;
}
#accord-1 .ui-accordion-content, #accord-2 .ui-accordion-content {
    color:#337c4a;
    background-color:#ffffef;
    border-style:ridge;
    border-width:4px;
    border-color:#337c4a;
}

/* modifications to the jquery-ui accordion styles for third smaller accordion ID */
#accord-3 .ui-accordion-header {
    color:#337c4a;
    font-weight:bold;
    font-size:90%;
    border-style:ridge;
    border-width:4px;
    border-color:#337c4a;
}
#accord-3 .ui-accordion-content {
    color:#337c4a;
    background-color:#ffffef;
    border-style:ridge;
    border-width:4px;
    border-color:#337c4a;
}

/* modifications for the sidebar accordion */
#accord-side .ui-accordion-header {
    color:#337c4a;
    background:#99cc99;
    font-weight:bold;
    font-size:90%;
    border-style:solid;
    border-width:2px;
    border-color:#337c4a;
    width:134px;
}
#accord-side .ui-accordion-content {
    color:#337c4a;
    background:#99cc99;
    font-size:75%;
    border-style:solid;
    border-width:2px;
    border-color:#337c4a;
    padding:6px 7px 6px 5px;
    width:164px;
}

/* NOTE

This top margin change is to tweak the accordion header icon margin to
make it center vertically when the icons are very large.  The more
negative the number, the higher the icon will move.  You have to
include selectors for the IDs you're going to use before the class
name.  If not the normal accordion icons will be way too high.
*/
#accord-1 .ui-accordion-header-icon, #accord-2 .ui-accordion-header-icon {
    margin-top:-17px !important;
}

/* custom icons for accordions - must have the !important to override the defaults */
.invisible {
    background-image:url(http://www.vitamincfoundation.org/images/invisible.png) !important;
    background-size:0;
    width:0;
    height:0;
}
.greenfillright {
    background-image:url(http://www.vitamincfoundation.org/images/greenfillright.png) !important;
    background-size:35px 35px;
    width:35px;
    height:35px;
}
.greenfilldown {
    background-image:url(http://www.vitamincfoundation.org/images/greenfilldown.png) !important;
    background-size:35px 35px;
    width:35px;
    height:35px;
}
.greentinyright {
    background-image:url(http://www.vitamincfoundation.org/images/greenfillright.png) !important;
    background-size:15px 15px;
    width:15px;
    height:15px;
}
.greentinydown {
    background-image:url(http://www.vitamincfoundation.org/images/greenfilldown.png) !important;
    background-size:15px 15px;
    width:15px;
    height:15px;
}
.righticonfill {
    background-image:url(http://www.vitamincfoundation.org/images/fillcircleright.png) !important;
    background-size:25px 25px;
    width:25px;
    height:25px;
}
.downiconfill {
    background-image:url(http://www.vitamincfoundation.org/images/fillcircledown.png) !important;
    background-size:25px 25px;
    width:25px;
    height:25px;
}
.righticonopen {
    background-image:url(http://www.vitamincfoundation.org/images/opencircleright.png) !important;
    background-size:25px 25px;
    width:25px;
    height:25px;
}
.downiconopen {
    background-image:url(http://www.vitamincfoundation.org/images/opencircledown.png) !important;
    background-size:25px 25px;
    width:25px;
    height:25px;
}

/* simple accordion button class for disabling and enabling accordion interface */
.accord-but {
    display:inline-block;
    height:auto;
    width:auto;
    padding:3px 5px 1px 5px;
    color:#337c4a;
    background:#eeeeee;
    border-style:ridge;
    border-width:4px;
    border-color:#337c4a;
    border-radius:5px;
    text-align:center;
    font-weight:bold;
    font-size:15px;
}
a.accord-but {
    color:#337c4a;
    text-decoration:none;
    cursor:pointer;
}
a.accord-but:hover {
    text-decoration:none;
    background:#e5e5e5;
}