/*****************************************************************/
/*********************    Curated Stories    *********************/
/*****************************************************************/


#curatedstories {
    background: #fff;
    /*text-shadow: 1px 1px 3px #666;*/
    color: #fff;
    padding: 0 0 70px 0;
}
#curatedstories h1 {
    font-size: 24px;
    color: #464747;
    text-shadow: none;
    border-bottom: 1px solid #bbb;
    margin-bottom: 40px;
    padding-bottom: 10px;
}
#curatedstories article { position: relative; margin-bottom: 10px; }
#curatedstories article { overflow: hidden; }
#curatedstories article .imgbucket { position: relative; display: block; }
#curatedstories article .imgbucket img { width: 100%; }




/* commenting out the rule for .darken dom element, as this is no longer present */
/*
#curatedstories article .imgbucket .darken {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
}
*/

/* commenting out the rule for gradients as these are no longer present */
/*
#curatedstories article .imgbucket .uppergrad {
    position: absolute; top: 0; width: 100%; height: 40%; opacity:0.9;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 );
}
#curatedstories article .imgbucket .lowergrad {
    position: absolute; bottom: 0; width: 100%; height: 60%; opacity:1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.4)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 );

}
*/

#curatedstories .topwrap {
    position: absolute;
    /*bottom: 0; */
    top:0;
    height: 0;
    width: 100%;
}

#curatedstories .bottomwrap {
     position: absolute;
     bottom: 0;
     padding: 15px 12px 10px;
    /* text-shadow: 1px 1px 3px #666; text-shadow has issues when set to inherit */
     color: inherit;
     display: block;
     width:100%;
     height: 70px;
     background: rgba(0,0,0,.7);
}



/* black box on hover, class injection controlled by jQuery */
/*#curatedstories .bottomwrap.hoverbx {
    background:black;
    opacity:1;
    width:100%;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    -o-transition: background .5s, opacity .5s;
    -ms-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
    -webkit-animation-timing-function: ease-in-out;
}*/

/*#curatedstories .author {
    float: left;
    margin: 10px 0 0 10px;
    line-height: 34px;
    color: inherit;
    font-family: helvetica, arial, sans-serif;
}*/

#curatedstories .author {
    float: left;
    margin: 10px 0 0 10px;
    line-height: 34px;
    color: inherit;
    bottom: 44px;
    position: absolute;
    display:block;
    z-index: 1;
}

#curatedstories .author > span {



}


#curatedstories .avatar {
    border: 3px solid white;
    margin: -25px -2px 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}
#curatedstories .name { color: #6abb74; font-size: 12px}



/* social disabled */
/*
#curatedstories .social { display: none; float: right; overflow: hidden; margin: 10px 10px 0 0; }
#curatedstories .social img { display: block; }
#curatedstories .social .icon {
    background: rgba(189, 195, 199, .2);
    border-bottom: 1px solid #bdc3c7;
}
#curatedstories .social .item {
    background: #d5dce0;
    height: 0;
}
*/




/* social disabled */
/* .active aka open state */
/*
#curatedstories .active .social .icon { background: #589b60; border-bottom: 2px solid #4a8150; }
#curatedstories .active .social .item { height: 30px; border-bottom: 1px solid #bdc3c7; }
#curatedstories .social .item:hover,
#curatedstories .social .item:active {
    background: #bdc3c7;
}
*/


/* social disabled */
/* not selector,  will target the social when the .ie78 class is not in parents */
/*
:not(.ie78) #curatedstories .social .item {
    -webkit-transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -ms-transition: height .3s;
    transition: height .3s;
    -webkit-animation-timing-function: ease-in-out;
}
*/

#curatedstories .category {
    font-size: 14px;
    color: #ecf0f1;
    margin: 0;
}
#curatedstories h2 {
    font-size: 16px;
    margin: 5px 0 0;
    line-height:21px;
    /*height:50px;*/
}
#curatedstories .summary {
    font-size: 14px;
    margin-bottom: 0;
}


/* only for .hero which is the first really big image */
#curatedstories .hero h2 {
    /* height: auto;
    max-height: 20px;   this limits it to two lines otherwise type face crashes at 320px */
     font-size:26px;
    line-height:36px;
 }

#curatedstories .hero .summary {
    /*  height: 42px; */ /* no need, using trunk8 */
    margin: 10px 0 0;
    /*  overflow: hidden; */  /* no need, using trunk8 */
}

/* darken disabled */
/*
#curatedstories .darken { opacity: 0; }
#curatedstories .active .darken { opacity: 0; }
*/
@media (min-width: 320px) and (max-width: 400px) {

    #curatedstories .category{ margin: 0 0 -10px 0;}
    #curatedstories h2 {width:100%;}
    #curatedstories .bottomwrap {position:relative; background:rgba(0,0,0,1); }

}

@media (max-width: 767px) {
    #curatedstories .hero h2 {
        font-size: 16px;
        margin: 5px 0 0;
        line-height: 21px;
    }
}

@media (max-width: 991px) {
    /* have the summary disappear on smaller sizes */
    #curatedstories .bottomwrap .summary {display:none;}

    /* darken disabled */
    /*     #curatedstories article .imgbucket .darken {opacity:.1 !important;}     */
}




/*********      important, never remove this **********/
/* bootstrap overrides for curated stories supercolumn structure */
/* these control the white space between the boxes of the curated section */
#curatedstories .col-xs-4, #curatedstories .col-xs-8,
#curatedstories .col-xs-12,
#curatedstories .col-sm-4, #curatedstories .col-sm-8,
#curatedstories .col-sm-12 { padding-left: 5px; padding-right: 5px; }
#curatedstories .row { margin-left: -5px; margin-right: -5px; }