/********************************************************/
/*********************    Header    *********************/
/*
    #header is the position fixed container,  it contains two items
    - the toolbar which shows hen you are logged in
    - the Allvoices graphical header (which also is our nav) we are now calling this #avheader
*/
/********************************************************/


#header {
    position: fixed;
    width: 100%;
    z-index: 50;
}

/*leegg*/
::selection {
    background: #589b60;
    color:#ffffff;
}


/**************    #avtoolbar   (container for the logged in toolbar)   **************/

#avtoolbar { background: #2c2c2c; }
/* bootstrap override just for this toolbar */
#avtoolbar .navbar { margin: 0; }
#avtoolbar .inverse-dropdown .dropdown-menu { background-color: #282828; border-color: #080808; }
#avtoolbar .inverse-dropdown li  a { color: #999; }
#avtoolbar .inverse-dropdown li a:hover { color: #fff; background-color: #000; }
#avtoolbar .inverse-dropdown .divider { background-color: #444; }

/**************    #avheader   (container for the AV header and nav)   **************/

/* the following has height set to 100% so media queries need only
    adjust #header and #headerbacking and the children will also be affected */
#avheader .container  { height: 100%; }
#avheader .row  { height: 100%; }
#avheader .navcol  { height: 100%; }
#avheader nav { height: 100%; }


#avheader {
    background: rgba(255,255,255,.96);
}

/* for all img tags and a tags in header */
#avheader img,
#avheader a { display: block; }

/* the central column where nav lives */
#avheader .navcol {
    position: relative;
    color: #2d2e2e;
}

/* av slogan copy*/
#avheader .avSlogan {

    text-align:center;
    padding-top:25px;
    font-size:26px;
    font-style:italic;
    color:#6abb74;

}

/* the all voices logo */
#avheader .logohome { float: left; width: 130px; margin: 4px auto 0; }

#avheader .logohomelockup {
    float: left;
    width: 86px;
    margin: 12px auto 0;
    position: absolute;
    z-index: 1;
}

/* the navitems that are horizontal */
#avheader .navsections {
    position: absolute;
    bottom: 0;
    height: 28px;
    line-height:18px;
    margin-left: -15px;
    padding-left: 116px;
    float: left;
}
#avheader .navsections .navitem {
    height: 100%;
    float: left;
    color: #2d2e2e;
    padding: 0 10px;
}
#avheader .navsections .navpadding{

    border-bottom: 0 solid #6abb74;
}

#avheader .navsections .navpadding:hover,
#avheader .navsections .navpadding.selected {

    border-bottom:4px solid #6abb74;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;

}

#avheader .navsections .navitem.search {
}
#avheader .navsections .navitem.search span {
    float: left;
    margin-right: 4px;
}
#avheader .navsections .navitem.search img {
    width: 28px;
    display: inline-block;
    vertical-align: middle;
}



/*  the smaller screen navitems */

/* nav hamburger icon that targets dropdown */
#avheader .navburger {
    float: right;
    margin-top: 30px;
    margin-right: 20px;
    cursor: pointer;
}
#avheader .navburger span {
    color: #adb2b6;
    float: left;
    line-height: 52px;
    font-size: 16px;
    margin-right: 5px;
}
/* for retina, place png at 50% */
#avheader .navburger img {
    width: 40px;
    float: left;
}

/* search hamburger icon that targets dropdown*/
#avheader .searchburger {
    float: right;
    margin-top: 34px;
    margin-right: 25px;
    cursor: pointer;



}


#avheader .searchburger span {
    color: #adb2b6;
    float: left;
    line-height: 22px;
    font-size: 22px;
    margin-right: 5px;
}
/* for retina, place png at 50% */
#avheader .searchburger img {
    width: 20px;
    float: left;
    display:block;

}

#avheader .searchdropdown {
    position: absolute;
    height: 0;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    width: 100%;
    /*margin-left: -15px;*/
    margin-left:0;
    padding: 0 15px;
}

#avheader .searchdropdown button {

    border:none;

}
#avheader .searchdropdown input {

    border-right:1px solid #cccccc;
    border-top:none;
    border-bottom:none;
    border-left:none;

}

#avheader .searchdropdown .navitem {
    float: none;
    height: 48px;
    color: #444;
    line-height: 56px;
    border-bottom: 1px solid #ddd;
}
#avheader .searchdropdown .navitem:last-child { border-bottom: none; }

/* not selector,  will target the drop down when the .ie78 class is not in parents */
:not(.ie78) #avheader .searchdropdown {
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
    transition: height .4s;
    -webkit-animation-timing-function: ease-in-out;
}

/*********************************************************************************/
/*********************    The Dropdown version of the Nav    *********************/
/*********************************************************************************/

#avheader .navdropdown {
    position: absolute;
    height:0;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    width: 100%;
    /*margin-left: -15px;*/
    margin-left:0;
    padding: 0 15px;
}
#avheader .navdropdown .navitem {
    float: none;
    height: 48px;
    color: #444;
    line-height: 56px;
    border-bottom: 1px solid #ddd;
}
#avheader .navdropdown .navitem:last-child { border-bottom: none; }

/* not selector,  will target the drop down when the .ie78 class is not in parents */
:not(.ie78) #avheader .navdropdown {
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
    transition: height .4s;
    -webkit-animation-timing-function: ease-in-out;
}

/* style the write tool icons and buttons*/
#avheader .writerwrap {
    float: right;
    margin: 21px auto 0;
}
#avheader .writerwrap .writetool img { width: 100%; display: block; }
#avheader .writerwrap .writetool img.origicon { width: 48px; float: right; }
#avheader .writerwrap .logout,
#avheader .writerwrap .profile { }

/* smaller screen search */
#avheader .search.floatright {
    float: right;
    color: #adb2b6;
    line-height: 40px;
    font-size: 16px;
    margin-top: 30px;
    margin-right: 18px;
}
#avheader .search.floatright span {
    color: #adb2b6;
    float: left;
    line-height: 52px;
    font-size: 16px;
    margin-right: 4px;
}
#avheader .search.floatright img {
    width: 40px;
    float: left;
}


/* tighten up spacing for super super super small */
@media (max-width: 350px) {
    #avheader .logohome { width: 110px; margin: 7px auto 0; }
    #avheader .writerwrap .logout,
    #avheader .writerwrap .profile { margin-left: 15px !important; padding: 0 3px;}
}

/*  create a new break point for super super small */
@media (max-width: 450px) {
    #avheader .navburger span { display: none; }
    /*#avheader .search.floatright span { display: none; }*/
    #avheader .navburger,
    #avheader .search.floatright { margin-right: 8px; }
}

@media (min-width: 768px) {

    #avheader #searchdropnav { display: none; }

}

/* 0 - 767 */
@media (max-width: 767px) {
    #avheader { height: 60px; }
    #headerbacking { height: 80px; }
    #avheader .logohome { margin: 10px auto 0;}
    #avheader .navdropdown { top: 60px; }
    #avheader .searchdropdown { top: 70px; }
    #avheader .navburger { margin-top: 8px; }
    #avheader .searchburger { margin-top: 28px; }
    #avheader .writerwrap { margin-top: 0; }
    #avheader .writerwrap .logout,
    #avheader .writerwrap .profile { margin: 19px 0 0 20px; float: right; }
    #avheader .writerwrap .writetool img.origicon { float: right; }

    /*#avheader .searchburger { visibility:visible;}*/
}

/* 768 - 991 */
@media (min-width: 768px) and (max-width: 991px) {
    #avheader { height: 100px; }
    #headerbacking { height: 120px; }
    #avheader .navdropdown { top: 100px; }
    #avheader .logohome img { margin: 14px auto 0; }
    #avheader .logohomelockup { margin: 22px auto 0;}
    #avheader .writerwrap { margin-top: 22px; }
    #avheader .searchburger { margin-top: 48px; }
    #avheader .navburger { margin-top: 51px; } /* for use with feather write icon */
    #avheader .navburger { margin-top: 30px; } /* for use with rics graduation cap style icon */
}

/* 992 - 1199 */
@media (min-width: 992px) and (max-width: 1199px) {
    #avheader { height: 120px; }
    #headerbacking { height: 140px; }
    #avheader .logohomelockup {
        width: 79px;
        margin: 21px auto 0;
    }
    #avheader .writerwrap { margin: 8px auto 0; }
    #avheader .navsections .navitem {
        font-size: 14px;
        padding: 0 16px !important;
    }
    #avheader .navsections {
        bottom: 15px;
        margin-left: -15px;
    }
}

/* 1200 -> */
@media (min-width: 1200px) {
    #avheader { height: 120px; }
    #headerbacking { height: 140px; }
    #avheader .logohomelockup {
        width: 79px;
        margin: 21px auto 0;
    }
    #avheader .navsections > .navitem { padding: 0 27px; }
    #avheader .navsections .navitem:first-child { margin-left: 10px; }
    #avheader .writerwrap { margin: 8px auto 0; }
    #avheader .navsections .navitem {
        font-size: 14px;
     }
     #avheader .navsections {
        bottom: 15px;
        margin-left: -50px;
     }
}