shine-list.css

html.SHINE.shine-list #siteTable_organic,
html.SHINE.shine-list .NERPageMarker,
html.SHINE.shine-list body > div.content #siteTable .thing .expando-button,
html.SHINE.shine-list body > div.content .thing ul.flat-list li.share,
html.SHINE.shine-list body > div.content .thing ul.flat-list li.report-button,
html.SHINE.shine-list .side-comments .thumbnail,
html.SHINE.shine-list .side-comments #siteTable .midcol,
html.SHINE.shine-list .side-comments #siteTable p.title,
html.SHINE.shine-list .side-comments #siteTable p.tagline,
html.SHINE.shine-list .side-comments #siteTable .entry::before,
html.SHINE.shine-list .side-comments .panestack-title,
html.SHINE.shine-list .side-comments .menuarea,
html.SHINE.shine-list .side-comments #siteTable ul.flat-list
{
	display:none !important;
}

html.SHINE.shine-list .thing.last-clicked{
	border:0px;
}

html.SHINE.shine-list body{
	background:#f1f1f1;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting {
    width: 90%;
    margin: 20px auto 0;
    box-shadow:1px 1px 5px rgba(0,0,0,.3);
    display:flex;
    flex-direction:column;
}

html.SHINE.shine-list body > div.content .side-comments div#siteTable.linklisting{
	margin: 0px;
    box-shadow: none;
}

html.SHINE.shine-list body > div.content{
	box-sizing:border-box;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing{
	background:#fff;
	margin: 0px;
    box-sizing: border-box;
    padding: 10px 60px 10px 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
    cursor: pointer;
    border-left:5px solid #fff;
    transition:border 300ms ease;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.active-thing{
    border-left:5px solid rgb(255,105,0);
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .sitetable.linklisting > .thing{
    display:none;
}

html.SHINE.shine-list body > .content #siteTable .thing.link > .child {
    position: absolute;
    right: 0px;
    height: 100%;
    line-height: 100%;
    text-align: center;
    width: 60px;
    top: 0;
    font: normal normal normal 24px/1 "Material Design Icons";
    box-sizing: border-box;
    /*background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSItMjkwIDM4OCAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtMjkwIDM4OCAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0tMjc0LDQwNGgtMTR2LTE0aDd2LTJoLTdjLTEuMSwwLTIsMC45LTIsMnYxNGMwLDEuMSwwLjksMiwyLDJoMTRjMS4xLDAsMi0wLjksMi0ydi03aC0yVjQwNHogTS0yNzksMzg4djJoMy42bC05LjgsOS44bDEuNCwxLjRsOS44LTkuOHYzLjZoMnYtN0gtMjc5eiIvPjwvc3ZnPg==) no-repeat center center;*/
    background-size:20px auto;
    opacity:.2;
    transition:opacity 300ms ease;
    color: #000;
}

html.SHINE.shine-list body > .content #siteTable .thing.link > .child::after {
    content: "\F3CC";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
}

html.SHINE.shine-list body > .content #siteTable .side-comments .thing.link > .child{
    display:none !important;
}

html.SHINE.shine-list body > .content #siteTable .thing.link:hover > .child{
    opacity:.6;
}

html.SHINE.shine-list body > div.content .side-comments div#siteTable.linklisting > .thing{
	border-bottom:0px;
	padding:0px;
	cursor: default;
	background:transparent;
}

html.SHINE.shine-list body > div.content{
	margin:0px;
	width:100%;
}

html.SHINE.shine-list.show-sidebar body > div.content {
    width: calc(100% - 360px);
}

html.SHINE.shine-list body > div.content div#siteTable > .thing span.rank {
    position: absolute;
    display: block;
    left: -45px;
    text-align: center;
    color: #777;
    float: none;
    padding: 0px;
    margin: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    top: calc(50% - 15px);
    font-weight: 100;
    font-family: 'Open Sans', sans-serif;
}

html.SHINE.shine-list body > div.content div#siteTable > .thing a.thumbnail {
    overflow: hidden;
    z-index:2;
	width: 70px;
    min-width:70px;
    height: 50px;
    margin: 0px;
    order:1;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

html.SHINE.shine-list body > .content div#siteTable > .thing .entry.RES-keyNav-activeElement a.title{
    color:rgb(255,105,0) !important;
}

html.SHINE.shine-list body > div.content div#siteTable > .thing a.thumbnail img {
    width: auto !important;
    height: 100%;
}

html.SHINE.lightmode.shine-list body > div.content div#siteTable > .thing a.thumbnail img {
    width: auto !important;
    height: 100% !important;
}

html.SHINE.shine-list body > div.content div#siteTable > .thing .RES-keyNav-activeElement{
	background-color:transparent !important;
}

html.SHINE.shine-list body > div.content div#siteTable > .thing ul.flat-list{
	display:inline-block;
}

html.SHINE.shine-list body > div.content div#siteTable > .thing .entry {
    float: none;
    width: auto;
    margin: 0px;
    padding: 0px 0px 0px 5px;
    display: block;
    order:3;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.up,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.upmod{
    text-indent: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjIgMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIyIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOEI2MDt9PC9zdHlsZT48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDM2LjQpIj48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTUuMiwxMDU2LjNINi43di05LjlIMWw5LjktOS45bDkuOSw5LjloLTUuN1YxMDU2LjN6Ii8+PC9nPjwvc3ZnPg==) !important;*/
    background-image: none !important;
    background-repeat:no-repeat !important;
    background-position: center !important;
    width: 18px !important;
    background-size: contain !important;
    display: inline-block !important;
    height: 18px !important;
    vertical-align: top !important;
    margin:0px !important;
    padding:0px !important;
    -webkit-filter:grayscale(100%) !important;
    opacity:.5 !important;
    position: relative;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.up::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.upmod::before {
    font: normal normal normal 18px/1 "Material Design Icons";
    content: "\F736";
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(51,51,51);
    text-indent: 0 !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.upmod{
    opacity:1 !important;
    -webkit-filter:grayscale(0%) !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow {
    transition: opacity 200ms ease;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.down,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.downmod{
    text-indent: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjEuOSAxOS45IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMS45IDE5Ljk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojOTM5M0ZGO308L3N0eWxlPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEwMzYuNCkiPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjcsMTAzNi40aDguNXY5LjloNS43bC05LjksOS45bC05LjktOS45aDUuN1YxMDM2LjR6Ii8+PC9nPjwvc3ZnPg==) !important;*/
    background-image: none !important;
    background-repeat:no-repeat !important;
    background-position: center !important;
    width: 18px !important;
    background-size: contain !important;
    display: inline-block !important;
    height: 18px !important;
    vertical-align: top !important;
    margin:0px !important;
    padding:0px !important;
    -webkit-filter:grayscale(100%) !important;
    opacity:.5 !important;
    position: relative;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow:hover {
    opacity: 1 !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.up::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.upmod::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.down::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.downmod::before {
    font: normal normal normal 18px/1 "Material Design Icons";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(150,150,150);
    text-indent: 0 !important;
}

html.SHINE.shine-list body .thing.comment .arrow {
    position: relative;
    background-image: none !important;
    opacity: .3;
    transition: opacity 200ms ease;
}

html.SHINE.shine-list body .thing.comment .arrow:hover,
html.SHINE.shine-list body .thing.comment .likes .arrow.up,
html.SHINE.shine-list body .thing.comment .likes .arrow.upmod,
html.SHINE.shine-list body .thing.comment .dislikes .arrow.down,
html.SHINE.shine-list body .thing.comment .dislikes .arrow.downmod {
    opacity: .7;
}

html.SHINE.shine-list body .thing.comment .arrow::before {
    font: normal normal normal 18px/1 "Material Design Icons";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(150,150,150);
    text-indent: 0 !important;
}


html.SHINE.shine-list body .thing.comment .likes .arrow.up::before,
html.SHINE.shine-list body .thing.comment .likes .arrow.upmod::before {
    color: rgb(255, 69, 0) !important;
}

html.SHINE.shine-list body .thing.comment .likes .arrow.up::before,
html.SHINE.shine-list body .thing.comment .likes .arrow.upmod::before {
    color: #FF8B60 !important;
}

html.SHINE.shine-list.res-nightmode body .thing.comment .likes .arrow.up::before,
html.SHINE.shine-list.res-nightmode body .thing.comment .likes .arrow.upmod::before {
    color: rgb(255, 69, 0) !important;
}

html.SHINE.shine-list body .thing.comment .dislikes .arrow.down::before,
html.SHINE.shine-list body .thing.comment .dislikes .arrow.downmod::before {
    color: #9494FF !important;
}

html.SHINE.shine-list.res-nightmode body .thing.comment .dislikes .arrow.down::before,
html.SHINE.shine-list.res-nightmode body .thing.comment .dislikes .arrow.downmod::before {
    color: rgb(116, 166, 196) !important;
}

html.SHINE.shine-list body .thing.comment .arrow.up::before,
html.SHINE.shine-list body .thing.comment .arrow.upmod::before {
    content: "\F736";
    bottom: -2px;
}

html.SHINE.shine-list body .thing.comment .arrow.down::before,
html.SHINE.shine-list body .thing.comment .arrow.downmod::before {
    content: "\F72D";
    top: 0;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.up::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.upmod::before {
    content: "\F736";
    bottom: -2px;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.down::before,
html.SHINE.shine-list body > .content #siteTable > .thing .arrow.downmod::before {
    content: "\F72D";
    top: 0;
}

html.SHINE.shine-list.res-nightmode body > .content #siteTable > .thing .likes .arrow.up::before,
html.SHINE.shine-list.res-nightmode body > .content #siteTable > .thing .likes .arrow.upmod::before {
    color: rgb(255, 69, 0) !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .likes .arrow.up::before,
html.SHINE.shine-list body > .content #siteTable > .thing .likes .arrow.upmod::before {
    color: #FF8B60 !important;
}

html.SHINE.shine-list.res-nightmode body > .content #siteTable > .thing .dislikes .arrow.down::before,
html.SHINE.shine-list.res-nightmode body > .content #siteTable > .thing .dislikes .arrow.downmod::before {
    color: rgb(116, 166, 196) !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .dislikes .arrow.down::before,
html.SHINE.shine-list body > .content #siteTable > .thing .dislikes .arrow.downmod::before {
    color: #9494FF !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .arrow.downmod{
    opacity:1 !important;
    -webkit-filter:grayscale(0%) !important;
}

html.SHINE.shine-list body > .content #siteTable > .thing .midcol {
    display: flex;
    flex-direction: column;
    margin: 0px;
    width: 70px;
    min-width:70px;
    max-width:70px;
    float: left;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    order:2;
}

html.SHINE.shine-list body > .content #siteTable > .thing .midcol .score{
    margin:3px 0;
}

html.SHINE.shine-list body > .content .nav-buttons{
    display:none !important;
}

/* THIS IS THE EXPAND STYLING */

html.SHINE.shine-list .shine-expand {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 70vh;
    background: #FFF;
    border-bottom: 1px solid rgb(204, 204, 204);
    position: relative;
    z-index: 1;
}

html.SHINE.shine-list .large-area{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width:70%;
    background: #000;
}

html.SHINE.shine-list.shine-split-6040 .large-area{
	width:60%;
}

html.SHINE.shine-list.shine-split-5050 .large-area{
	width:50%;
}

html.SHINE.shine-list.shine-split-4060 .large-area{
	width:40%;
}

html.SHINE.shine-list.shine-split-3070 .large-area{
	width:30%;
}

html.SHINE.shine-list .large-image, 
html.SHINE.shine-list .large-youtube, 
html.SHINE.shine-list .large-html5,
html.SHINE.shine-list .large-soundcloud {
    width: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    background: #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

html.SHINE.shine-list .side-comments {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30%;
    height: 100%;
    box-sizing:border-box;
    padding:15px;
    overflow-y:auto;
    background:#fff;
}

html.SHINE.shine-list.shine-split-6040 .side-comments{
	width:40%;
}

html.SHINE.shine-list.shine-split-5050 .side-comments{
	width:50%;
}

html.SHINE.shine-list.shine-split-4060 .side-comments{
	width:60%;
}

html.SHINE.shine-list.shine-split-3070 .side-comments{
	width:70%;
}

html.SHINE.shine-list .just-comments .side-comments {
    width: 100%;
    padding:30px;
}

html.SHINE.shine-list .large-album{
    width: 85%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    background: #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

html.SHINE.shine-list .shine-expand .album-thumbnails{
    position: absolute;
    top:0px;
    right:0px;
    width:15%;
    height:100%;
    box-sizing:border-box;
    background:#333;
    padding:15px;
    overflow-y:auto;
}

html.SHINE.shine-list .shine-expand .album-thumbnails img{
    width:100%;
    height:auto;
    margin-bottom:15px;
    display:block;
    box-sizing:border-box;
    cursor: pointer;
}

html.SHINE.shine-list .shine-expand .album-thumbnails img.active-thumb{
    border:2px solid rgba(255,103,31,1);
}

html.SHINE .album-captions{
    width:30px;
    height:30px;
    overflow:hidden;
    display:block;
    position: absolute;
    bottom: 0px;
    left:0px;
    z-index: 12000;
    cursor: help;
}

html.SHINE .activate-captions .album-captions {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 85%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
    box-sizing: border-box;
    padding: 60px;
    height: auto;
}

html.SHINE .album-captions .caption-text{
    display:none;
}

html.SHINE .activate-captions .album-captions .caption-text{
    display:block;
}

html.SHINE .album-captions strong{
    display:block;
    font-size:30px;
    font-weight:100;
    margin-bottom:15px;
    color:#fff;
}


html.SHINE .album-captions p{
    line-height: 24px;    
    color: #fff;
    font-size: 16px;    
}

html.SHINE .show-captions {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 0px;
    left: 0px;
    background: #fff;
    box-sizing: border-box;
    cursor: help;
    padding: 7px 5px 5px 5px;
    z-index: 100;
}

html.SHINE.shine-list .shine-expand .side-comments #siteTable > .thing,
html.SHINE.shine-list .shine-expand .side-comments form,
html.SHINE.shine-list .shine-expand .side-comments .content{
	margin:0px;
	padding:0px;
}




/* SHINE LIGHT STUFF */

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing{
    background: rgb(255,105,0) !important;
    border-left-color: rgb(255,105,0) !important;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing a,
html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing p,
html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing span{
    color:#fff !important;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing a.thumbnail{
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSItNTg2IDc3Mi40IDE2IDIxLjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgLTU4NiA3NzIuNCAxNiAyMS4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGRkZGRjt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTU3Ni41LDc3Mi40YzAsMCwwLjcsMi42LDAuNyw0LjhjMCwyLjEtMS4zLDMuNy0zLjQsMy43Yy0yLjEsMC0zLjYtMS43LTMuNi0zLjd2LTAuNGMtMiwyLjQtMy4yLDUuNS0zLjIsOC45YzAsNC40LDMuNiw4LDgsOHM4LTMuNiw4LThDLTU3MCw3ODAuMy01NzIuNiw3NzUuNS01NzYuNSw3NzIuNHogTS01NzguMyw3OTAuN2MtMS44LDAtMy4yLTEuNC0zLjItMy4xYzAtMS42LDEuMS0yLjgsMi44LTMuMWMxLjgtMC40LDMuNi0xLjIsNC42LTIuNmMwLjQsMS4zLDAuNiwyLjcsMC42LDRDLTU3My41LDc4OC42LTU3NS42LDc5MC43LTU3OC4zLDc5MC43eiIvPjwvc3ZnPg==) no-repeat center center;
    background-size:30px auto;
}

html.SHINE.shine-list body > div.content div#siteTable.linklisting > .thing.shine-prompt-thing .entry::before{
    display:none !important;
}










/* NIGHT MODE STUFF */

html.SHINE.shine-list.res-nightmode body > div.content div#siteTable.linklisting > .thing {
    background: #000;
    border-bottom: 1px solid #333;
    border-left: 5px solid #000;
}

html.SHINE.shine-list.res-nightmode body > .content div#siteTable > .thing .entry::before {
    border-color: #333;
}

html.SHINE.shine-list.res-nightmode .shine-expand {
    border-bottom: 1px solid #333;
}

html.SHINE.shine-list.res-nightmode .side-comments{
    background:#151515;
}

html.SHINE.shine-list.res-nightmode body > div.content .side-comments div#siteTable.linklisting > .thing{
    background:transparent;
    border-bottom:0px;
    border-left:0px;
}

html.SHINE.shine-list .shine-expand .side-comments .content {
    margin-bottom: 100px;
}

.side-comments .rank {
    display: none !important;
}