/*
 * Theme Name: HomeHealthInstitute.org
 * Theme URI: http://visionsencoded.com/
 * Description: A custom design for the new HHI (www.homehealthinstitute.org) corporate website.  To control where page links appear, use custom tag titled "navigation" with values "header", "sidebar" and "footer" to specify where pages should be linked; note that you can have more than one custom tag assigned to a page.  This theme works well with the tinymce-styles-select-list plugin too.  There are more things you can do with this theme, but too much detail to explain here (see <a href="../wp-content/themes/HomeHealthInstitute_1r1/README-HOWTO.txt">README-HOWTO.txt</a> in the theme folder).
 * Version: 1r1
 * Author: Leo Thiessen
 * Author URI: http://visionsencoded.com/
 */


/* Resets
-----------------------------------------------------------------------------*/

body {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {clear:both}
a img {border:0;}


/* If using  "Add a Style Select" plugin, these top level classes 
 * (e.g. ".hide {...}") will appear in the styleselect drop list
 * of the WYSIWYG I've applied the styles more specifically as
 * well, so they will override other, less specific css lower
 * down.  Each class here also has a prefix for easy
 * identification in the drop list.
 * Note: TinyMCE requires all classes here to be *lower case*
-----------------------------------------------------------------------------*/
.hhi_blue,              /* appears in styleselect drop list */
body #wrap .hhi_blue,   /* does not necessarily appear, etc. */
body #wrap #main #content .hhi_blue {
    color: #003377;/* blue */
}
.hhi_gold,
body #wrap .hhi_gold,
body #wrap #main #content .hhi_gold {
    color: #997744;/* gold */
}
.hhi_hide,
body #wrap .hhi_hide,
body #wrap #main #content .hhi_hide {
    display:none;
}
.hhi_first_paragraph,
body #wrap .hhi_first_paragraph,
body #wrap #main #content .hhi_first_paragraph {
    display:block;
    color: #997744;/* gold */
    font-size:18px;
    line-height:30px;
    height: 120px;
    overflow:hidden;
    font-family: Palatino, 'Times New Roman', serif;
}
.hhi_serif_font,
body #wrap .hhi_serif_font,
body #wrap #main #content .hhi_serif_font {
    font-family: Palatino, 'Times New Roman', serif;
}
.hhi_sans-serif_font,
body #wrap .hhi_sans-serif_font,
body #wrap #main #content .hhi_sans-serif_font,
#sidebar .navigation a {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}


#banner, /* this is the default */
.gold #banner {/* in admin use custom tag "bodyclass" value "gold" */
    background: #997744;
    color:      #EECC88;
}
.gold2 #banner {/* in admin use custom tag "bodyclass" value "gold2" */
    background: #997744;
    color:      #FFEECC;
}
.gold3 #banner {/* in admin use custom tag "bodyclass" value "gold3" */
    background: #997744;
    color:      #EEBB66;
}
.gold4 #banner {/* in admin use custom tag "bodyclass" value "gold4" */
    background: #997744;
    color:      #EEDDAA;
}
.blue #banner {/* in admin use custom tag "bodyclass" value "blue" */
    background: #223355;
    color:      #BBBBBB;
}
.lightblue #banner {/* in admin use custom tag "bodyclass" value "lightblue" */
    background: #88AACC;
    color:      #FFFFFF;
    
}
.red #banner {/* in admin use custom tag "bodyclass" value "red" */
    background: #881100;
    color:      #DDCC88;
}
body.gold #wrap #main #content h1,
body.gold #wrap #main #content .hhi_first_paragraph {
    color:#003377;/* blue */
}
body.gold3 #wrap #main #content h1,
body.gold3 #wrap #main #content .hhi_first_paragraph {
    color:#223355;/* blue-gray */
}
body.gold4 #wrap #main #content h1,
body.gold4 #wrap #main #content .hhi_first_paragraph {
    color: #665533;
}
body.blue #wrap #main #content h1,
body.blue #wrap #main #content .hhi_first_paragraph {
    color:#555555;/* gray */
}
body.lightblue #wrap #main #content h1,
body.lightblue #wrap #main #content .hhi_first_paragraph {
    color:#003377;
}
body.red #wrap #main #content h1,
body.red #wrap #main #content .hhi_first_paragraph {
    color:#003377;/* blue */
}

/* change our links to compliment above text colour changes */
.gold a,
.gold3 a,
.lightblue a,
.red a {
    color: #997744;/* gold */
}
.gold a:hover,
.gold3 a:hover,
.lightblue a:hover,
.red a:hover {
    color: #003377;/* blue */
}


/* Globals
-----------------------------------------------------------------------------*/

body {
    font: 10pt/1.42em Tahoma, Arial, Helvetica, sans-serif;
    color: #666666;
    background:#B0B0B0;
    padding:15px 0 34px 0;
}
h1,
h1 a {
    color: #997744;/* gold */
    font-weight:normal;
    margin:0;
    padding:0;
    font-size:28px;
    line-height:30px;
}
h1,   h2,   h3,   h4,   h5,   h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.navigation,
.navigation a {
    font-family: Palatino, 'Times New Roman', serif;
}
a {
    color: #003377;/* blue */
    text-decoration:none;
}
a:hover {
    color: #997744;/* gold */
}
.navigation ul {
    list-style:none;
    margin:0;
    padding:0;
}
.navigation .current_page_item a {
    color: #997744;/* gold */
    cursor:default;
}
.hide {
    display:none;
}


/* Structure
-----------------------------------------------------------------------------*/

#wrap { /* wraps around everything inside the body tag */
    position:relative;  /* this allows absolute positioning of inner items */
    width: 969px;       /* set fixed width for page here */
    padding-bottom:19px;/* fixes (removes) gap before footer in IE8 */
    margin: 0 auto -19px auto;     /* centers everything inside the body tags & compensates for IE8 fix */
    background: #FFFFFF url('images/HHI_SidebarBG.gif') top right repeat-y;
}
    .frontpage #wrap {
            background-image:none;
        }
    #header {
        background: #EEEEEE url('images/HHI_HeaderBG.jpg') top left repeat-y;
        border-top:1px solid #FFFFFF;
    }
        #logo {
            padding:0 22px;
            clear:both;
        }
            #logo span {
                display:none;
            }
        #tagline {
            display:none;
        }
         #header .navigation {
            font-size:17px;
            line-height: 38px;
            width:100%;
            padding-bottom:12px;/* space for bottom bg image */
            background: #FFFFFF url('images/HHI_GoldShadow.jpg') bottom left repeat-x;
        }
         #header .navigation ul {
            display:block;
            width:100%;
            height:38px;
            padding-bottom:18px;/* space for bottom bg image */
            background: #FFFFFF url('images/HHI_SubNavBG.gif') bottom left no-repeat;
            overflow:hidden;
        }
         #header .navigation ul,
         #footer .navigation ul {
            text-align:center;
        }
         #header .navigation li,
         #footer .navigation li {
            display:inline;/* for IE6/7 because ":table-cell" is not supported */
            height:38px;
            text-align:center;
        }
         #header .navigation a {
            color: #997744;/* gold */
        }
         #header .navigation a:hover,
         #header .navigation .current_page_item a {
            color: #003377;/* blue */
        }
         #header .navigation a,
         #footer .navigation a {
            padding:0 9px;
            letter-spacing:-0.01em;
            white-space:nowrap;
        }
    #banner {
        display:block;
        width:100%;
        height:174px;
        clear:both;
        overflow:hidden;
        margin:-12px 0 0 0;/* hide gold shadow bg on navigation */
        padding:0 0 12px 0;/* space for bottom bg image */
        border-top:1px solid #FFFFFF;
    }
    #banner table {
        width:540px;
        height:170px;
        float:left;
        margin-left:33px;
    }
    #banner table td {
        width:540px;
        height:170px;
        vertical-align:center;
        overflow:hidden;
    }
    #banner div.gold-shadow {
        display:block;
        width:100%;
        height:12px;
        clear:both;
        background: #FFFFFF url('images/HHI_GoldShadow.jpg') top left repeat-x;
    }
    #banner img {
        float:left;
        margin-left:96px;
    }
    #banner p {
        float:left;
        margin:0;
        padding:0;
        font-size:18px;
        line-height:1.1em;
        font-style:italic;
    }
    #main {
        display:block;
        width:875px;/* for sub-pages; see bottom for frontpage settings */
        margin:0 0 15px auto;
        padding-top:15px;/* use padding to hide #wrap bg */
        background:url('images/HHI_ContentTopBG.gif') top right no-repeat;
    }
        .frontpage #main {
            background-image:none;
        }
        #content {
            width:601px;/* 623-22 for 22px right margin */
            float:left;
            clear:left;
        }
            .entry {
                display:block;
                clear:both;
                padding-bottom:1px;/* enforces clear:both */
            }
            .navigation-previous {
                float:left;
                clear:left;
                width:49%;
                text-align:left;
            }
            .navigation-next {
                float:right;
                clear:right;
                width:49%;
                text-align:right;
            }
            #comments_section {
                clear:both;
                padding-top:1px;/* enforces clear:both */
            }
            ol.commentlist {
                list-style:none;
            }
            .commentlist li  p {
                margin:0;
                padding:0.4em 0 0.2em 0;
            }
            .even {/* starts at #1 ... first comment */
                background:#DDD;
            }
            .odd {
                background:#FFF;
            }
            .commenttext {
            }
            #commentform {
                width:100%;
            }
            .comment {
                padding-bottom:0.2em;
            }
            textarea#comment {
                width:99%;
            }
        #sidebar {
            margin-top:180px;/* 150px == 0px top margin */
            margin-right:22px;
            width:206px;
            float:right;
            clear:right;
            color:#555555;
        }
        #sidebar .widget,
        #sidebar-content {
            margin-bottom:18px;
        }
        #sidebar h4 {
            margin:0;
            padding:0;
        }
        #sidebar ul {
            list-style:none;
        }
        #sidebar ul,
        #sidebar li {
            margin:0;
            padding:0;
        }
        #sidebar li ul {
            list-style:disc outside none;
            padding-left:18px;
            color:#003377;/* bullets to match link color */
        }
        #sidebar a {
            color:#003377;/* blue */
        }
        #sidebar a:hover,
        #sidebar .navigation .current_page_item a {
            text-decoration:underline;
        }
        div.clearfix {
            width:100%;
            clear:both;
            height:1px;
            margin-top:-1px;
        }
        #sidebar form,
        #sidebar input {
            margin:0 auto;
            width:200px;
        }
        #sidebar input.wpcf7submit {
            text-align:right;
            border:none;
            background:transparent;
            font-weight:bold;
            cursor:pointer;
        }
    #footer {
        position:relative;/* so we can absolutely position contained elements */
        background:#EEEEEE;
        display:block;/* IE7 */
        width:969px;/* IE7 */
        margin:19px auto -19px auto;/* IE7 */
        height:110px;
        padding-top:15px;
        text-align:center;
    }
    #footer a {
        color: #777777;
    }
    #footer .current_page_item a,
    #footer a:hover {
        color:#003377;/* blue */
    }
    #footer .navigation ul {
    }
    #footer .navigation a {
        padding:4px 9px;/* padding increases link "hit" area - easier to click */
        font: normal 10pt/1.42em Tahoma, Arial, Helvetica, sans-serif;
    }
    #footer .developerlink {
        position:absolute;
        bottom:9px;
        left:0;
        margin:0;
        padding:0;
        text-align:center;
        width:100%;
    }
    #footer .developerlink a {
        color:#BBBBBB;
        font: normal 8pt/1.42em Tahoma, Arial, Helvetica, sans-serif;
    }
    #footer .developerlink a:hover {
        color: #003377;/* blue */
    }
    #footer .navigation li {
        display:inline;
        padding:0 10px;
        border-right:1px solid #BBBBBB;/* color of "pipes" */
    }
    #footer .navigation .newend {/* footer new last item "pipe" removed here */
        border-right:none;
    }
    #global_nav {
        position:absolute;/* absolute inside of wrap container */
        clear:none;
        top:0;
        right:0;/* was 22px but don't use that cuz probs with IE7 */
        width:700px;
        height:90px;/* only need 60px but room for 1 additional row if browser wraps */
        margin:0;
        padding:0;
        line-height:30px;
        text-align:right;
        color: #BBBBBB;/* pipes color */
        text-transform:lowercase;
        overflow:hidden;
    }
    #global_nav .ignore_text_transform {
        text-transform:none;
    }
    #global_nav a {
        color: #666666;
        margin:0;
        padding:0;
    }
    #global_nav a:hover {
        color: #003377;/* blue */
    }
    #global_nav ul {
        display:inline;
        list-style:none;
        margin:0 22px 0 0;
        padding:0;
    }
    #global_nav li {
        display:inline;
        padding:0;
        margin:0;
    }
    #global_nav li span.gold {
        color: #997744; /* gold */
    }
    #global_nav .textwidget,
    #global_nav .textwidget ul,
    #global_nav .textwidget li {
        display:inline;
        margin:0;
        padding:0;
    }
    form#globalsearchform {
        position:absolute;/* IE7 places form at bottom of page without this */
        display:inline;
        width:650px;/* narrower than #global_nav */
        height:30px;
        top:30px;
        right:22px;/* relative to #global_nav */
        line-height:30px;
        text-align:right;
        margin:0;
        padding:0;
    }
    form#globalsearchform input {
        display:inline;
        text-align:left;
        border: 1px solid #CCCCCC;
        background-color:#FFFFFF;
        padding:0;
        margin:0;
        vertical-align:middle;
        height:1.4em;
    }
    form#globalsearchform input#globalsearchsubmit {
        height:1.6em;
        text-align:center;
    }


/* Calendar
---------------------------------------------------------------------------------------*/

#wp-calendar {
    border: 1px solid #DDD;
    empty-cells: show;
    margin: 0;
    width: 90%;
}
#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
}
#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
}
#wp-calendar a {
    display: block;
    text-decoration: none;
}
#wp-calendar a:hover {
    background: #e0e6e0;
    color: #333;
}
#wp-calendar caption {
    color: #999;
    font-size: 1.1em;
    text-align: center;
    font-weight:bold;
}
#wp-calendar td {
    color: #666;
    letter-spacing: normal;
    padding: 2px 0;
    text-align: center;
}
#wp-calendar td.pad:hover {
    background: #fff;
}
#wp-calendar td:hover, #wp-calendar #today {
    background: #eee;
    color: #333;
}
#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
}


/* Home Page slideshow
---------------------------------------------------------------------------------------*/

#slideshow,
.slideshow_item {
    width:918px;
    height:355px;
    margin:0 auto;
    clear:both;
    background: #451A11;
    overflow:hidden;
    color:#FFFFFF;
}
#slideshow {
    margin-top:15px;
    padding-bottom:12px;/* space for bottom bg image */
    background: #FFFFFF url('images/HHI_GoldShadow.jpg') bottom left repeat-x;
}
#slideshow a {
    color:#FFFFFF;
}
#slideshow h4 {
    font-size:32pt;
    font-weight:normal;
    font-style:italic;
    padding:0;
    margin:70px 0 10px 26px;
}
#slideshow p {
    line-height:1.3em;
    padding:0;
    margin:0 0 10px 26px;
    width:300px;
}
#slideshow p.clickformore {
    display:block;
    padding:1px 0 3px 0;/* fix IE7 glitch that hides <a ...> border */
    margin-top:12px;/* compensate for fix & reduce spacing a bit */
}
#slideshow .clickformore a {
    margin:0;
    padding:2px 30px 4px 30px;
    border:1px solid #FFFFFF;
}
#slideshow .clickformore a:hover {
    background-color: #997744;/* gold */
    background-color: #003377;/* blue */
}
#slideshow #theproblem {
    background:url('images/HHI_TheProblemSplash.jpg') top left no-repeat;
}
#slideshow #thesolution {
    background: #EEEEEE url('images/HHI_TheSolutionSplash.jpg') top left no-repeat;
}
#slideshow #thesolution h4 {
    margin-top:20px;
}
#slideshow #thesolution h4,
#slideshow #thesolution p {
    margin-left:105px;
    color: #FFFFFF;/*#997744; /  * gold */
    width: 400px;
}
#slideshow #thesolution .clickformore a {
    color: #FFFFFF;/*#997744; /  * gold */
    border-color: #FFFFFF;/*#997744; /  * gold */
}
#slideshow #thesolution .clickformore a:hover {
    color: #FFFFFF;
}
#slideshow #ourmission {
    background:url('images/HHI_OurMissionSplash.jpg') top left no-repeat;
}
#slideshow #ourmission h4 {
    margin-top:203px;
}
#slideshow #ourmission p {
    width:400px;
}


/* Flip effect
---------------------------------------------------------------------------------------*/

.frontpage ul.front-page-thumbs {
    list-style:none;
    display:inline;
    margin:0;
    padding:0;
    float:left;
}
.frontpage ul.front-page-thumbs li {
    display:block;
    width:160px;
    height:130px;
    margin:0;
    padding:0;
    float:left;
}
.frontpage .front-page-thumbs a {
    display:block;
    width:160px;
    height:130px;
    background-color:#FFFFFF;
    border:1px solid #FFFFFF;
}
.frontpage .front-page-thumbs .home-health-safe a {
    background:url('images/home-health-safe-text.gif') top left no-repeat;
}
.frontpage .front-page-thumbs .home-health-care a {
    background:url('images/home-health-care-text.gif') top left no-repeat;
}
.frontpage .front-page-thumbs .home-health-institute a {
    background:url('images/home-health-institute-text.gif') top left no-repeat;
}



.frontpage #main {
    width:918px;/* same as splash */
    margin:0 auto;/* centered */
}
.frontpage #content {
    width:100%;
    margin:0;
    padding:0;
}
.frontpage .entry {
    display:block;
    float:right;
    clear:right;
    width:407px;
    height:130px;
    overflow:hidden;/* messes up footer layout if set to auto - shrink vert height if auto desired */
    line-height:1.25em;
}
.frontpage .entry h1,
.frontpage .entry h2,
.frontpage .entry h3,
.frontpage .entry h4,
.frontpage .entry h5,
.frontpage .entry h6,
.frontpage .entry p {
    margin:0;
    padding:0;
}
/* this would affect all pages with lightblue banner */ 
.lightblue #banner p {
    color:green;
} 

/* this would affec all pages with the page slug "founders" that use the "lightblue" banner */ 
.founders.lightblue #banner p {
    color:#FF0000; /* aka "red" */
    font-size:x-large;
    font-weight:bold;
    font-family:'Comic Sans MS';
}

body #wrap #main.news-and-publications #content .hhi_first_paragraph,
body #wrap #main.parent-pageid-22 #content .hhi_first_paragraph,
body #wrap #main.blog #content .hhi_first_paragraph {
    display:none;
}
body.news-and-publications #wrap #main,
body #wrap #main.parent-pageid-22,
body #wrap #main.blog {
    background:none;
}
body.news-and-publications #wrap #main #sidebar,
body #wrap #main.parent-pageid-22 #sidebar,
body #wrap #main.blog #sidebar {
    margin-top: 0px;
}