/**** STANDARD ELEMENTS ****/
body{margin: 50px 0 0 0; font-family: arial; box-sizing: border-box; background: #eaeaea; }
div, a, body, textarea, input, select {box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: arial; }
img{display: block}
textarea, input, select {
    font-size: 0.9em; padding: 5px 8px; border:1px #ddd solid; border-radius: 4px; 
    -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none;
    -webkit-transition:0.2s ease all; -moz-transition:0.2s ease all; -ms-transition:0.2s ease all;
    -o-transition:0.2s ease all; transition:0.2s ease all;
}
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, select:focus, input[type=search]:focus {
    outline: none; border-color: rgba(53, 111, 182, 0.75);
}
h3{ margin: 0 0 8px 0; font-weight: normal; font-size: 1em; }
input[type=button], input[type=submit]{
    cursor: pointer; color: white; background: #D71F26; border: 2px #D71F26 solid; border-bottom: 2px #A50A0A solid; font-size: 0.95em;
    padding: 4px 15px 6px;
}
input[type=button]:hover, input[type=submit]:hover{
    background: #EA6D59; border: 2px #EA6D59 solid; border-bottom: 2px #A50A0A solid;
}
input[type=button]:active, input[type=submit]:active{
    background: #A50A0A; border: 2px #A50A0A solid; border-top: 2px #D71F26 solid;
}

input[type=button].gray, input[type=submit].gray {
    background: #AAAAAA; border: 2px #AAAAAA solid; border-bottom: 2px #888888 solid;
}
input[type=button].gray:hover, input[type=submit].gray:hover {
    background: #BBBBBB; border: 2px #BBBBBB solid; border-bottom: 2px #888888 solid;
}
input[type=button].gray:active, input[type=submit].gray:active {
    background: #888888; border: 2px #888888 solid; border-top: 2px #AAAAAA solid;
}
select {
    background-image: url('../images/downvote.svg'); background-repeat: no-repeat;
    background-position: center right 4px; background-size: 18px auto; padding-right: 26px;
}
select .placeholder { color: #AAA; }
select.small { padding: 3px 24px 3px 6px; }

/**** NAVIGATION ****/
#MainBar{
    background-color: #D71F26;
    font-size: 20px; position: fixed; width: 100%;
    top:0; line-height: 50px; height: 50px; margin: 0px; padding: 0px;
    z-index: 100;
}
#MainBar #logo{ margin: 6px 13px; display: inline-block; width: 170px; }
#MainBar #logo img{ height: 39px; position: relative; top: -1px; }
#MainBar #menu_bttn { display: none; margin: -3px 0 0 0; border-right: 1px rgba(0, 0, 0, 0.3) solid; height: 100%; padding: 12px 8px;}
#MainBar #menu_bttn img{height: 24px; cursor: pointer; margin-top: 1px}
#MainBar a{ display: inline-block; vertical-align: middle;}

/**** POST STYLING ****/
.post{ background-color: white; margin-bottom: 3px; display:table; width:100%; border-left:3px solid; }
.post .voting, .post .thumbnail, .post .body { display:table-cell; }
.post .voting { background-color: white; }
.post .voting div{ display:block; }
.post .body { display: table; width: 100%; cursor: pointer; }
.post .title {
    vertical-align: top; font-size: 1em; cursor: pointer; margin-bottom: 10px;
    padding: 10px 10px 6px 10px; display: table-cell; color: #356FB6; text-decoration: none; width: 100%;
}
.post .title:visited{ color: #888; }
.post .info{ font-size: 0.85em; display: table-cell; color: #888; padding: 0px 10px 6px 10px; }
.post .info a, .post .info a:visited { color: #888; text-decoration: none; }
.post .info a, .post .info div { display: inline-block; }
.post .thumbnail, #create-post .thumbnail{
    width:160px; overflow:hidden; height:90px; vertical-align: middle;
    background-size:auto 90px; background-position:center; background-repeat:no-repeat; cursor: pointer;
}
.post .thumb-overlay{ display:table; width:100%; height: 90px; border: 1px rgba(0,0,0,0.1) solid; }
.post .thumb-overlay div div {
    display:table-cell; color:white; padding:3px 6px; font-size:0.85em;
    vertical-align: middle; text-align: center;
}
.post .thumb-overlay div div:first-child { width: 100%; }
.post .thumb-overlay div:nth-child(2) { height: 22px; }
.post .timestamp{ text-align:right; background:rgba(0,0,0,0.5); }
.post .categories { padding: 0px 10px 8px 10px; cursor: pointer; }
.post .category{
    padding: 2px 6px 2px 22px; border-radius: 3px; border: 0px solid;
    background-size: 18px 18px; background-repeat: no-repeat; background-position: left 0px center;
    font-size: 0.95em; margin: 0 4px 0 0;
}
.post:active { background: #eaeaea; }
.voting{ vertical-align:middle; width:42px; padding:5px; text-align:center; font-size:1.2em }
.post .user { margin-right: 6px; }
.post.ad { border-color: #328E44; }
.post.ad .title, .post.ad .title:visited { color: #328E44; }
.post.ad .flag{ background-image: url('../images/learn-more.svg'); }
.flag, .post .edit, .comment .edit, #post .edit {
    background-repeat:no-repeat; background-size:auto 14px; height:20px; display:inline-block; cursor:pointer;
    background-position:center center;
}
.post .flag, .post .edit, #post .flag, #post .edit {
    background-position:right center; float:right; top:0px; margin: -5px -4px 0px 0px;
}
.flag {
    background-image:url('../images/flag.svg'); width:16px;
    display: none; /** TEMP **/
}
.post .edit-admin, #post .edit-admin { background-image:url('../images/edit-admin.svg') !important; }
.post .edit, .comment .edit, #post .edit { background-image:url('../images/edit.svg'); width:20px; }
.content-warning{
    display: inline-block; color: #D71F26; border: 1px #D71F26 solid; padding: 1px 4px;
    font-size: 0.7em; border-radius: 3px; position: relative; margin: 0 0 0 7px; top: -2px;
}
.post .info .short_elapsed { display: none; }
.post .flair, #title .flair {
    display: inline-block; color: white; margin-right: 7px; font-size: 0.75em;
    padding-left: 24px; background: rgba(190, 144, 48, 0.75); padding: 3px 5px 3px 5px; border-radius: 3px;
    margin-top: -1px; margin-bottom: -2px; top: -2px; position: relative;
}
/**** TEXT POST ****/
.post.text .title-text { margin-right: 5px; }
.Reputation.admin { color: white; background: #D71F26; }
.post.text .desc {
    margin: 0px 0px 6px 0px; font-size: 0.9em; color: #888; padding: 0px 8px;
    max-height: 2.25em; overflow: hidden;
}
.post.text .categories { display: inline-block; padding: 0px; }
.post .title-text{ color: #356FB6; text-decoration: none; }
.post .title-text:visited{ color: #356FB6; /*color: #888;*/ }

/**** VOTING ****/
.upvote, .downvote { text-align: center; align-content: center; }
.upvote a { background-image:url('../images/upvote.svg'); }
.upvote.active a { background-image:url('../images/upvote-a.svg'); }
.downvote a { background-image:url('../images/downvote.svg'); }
.downvote.active a { background-image:url('../images/downvote-a.svg'); }
.upvote a, .downvote a{
    cursor:pointer; background-position: center center; background-repeat: no-repeat; margin: 0px auto;
    background-size: auto 24px; height: 24px; width: 26px; display: block;
    /*border-radius: 2px; border: 1px white solid;*/
}
.upvote a.active { background-color: #D62121; }
.downvote a.active { background-color: #356FB6; }
.points { color: #888; font-size: 0.9em; }
.points-label { color: #888; font-size: 0.55em; }

/**** COMMENTS ****/
.comment { display: table; background: white; width: 100%; margin-bottom: 3px; }
.comment .voting, .comment .body{ display: table-cell; }
.comment .body, .comment .row { width: 100%; }
.comment .user { display: inline-block; }
.comment .table { width:100%; }
.comment .voting{ padding: 2px 6px; vertical-align: top; }
.top-row { font-size: 0.8em; cursor: pointer; }
.bottom-row { font-size: 0.75em; color: #888; }
.bottom-row .cell { padding-bottom: 4px; }
.bottom-row a { cursor: pointer; margin-right: 10px; }
.top-row .cell { vertical-align: top; padding: 4px 0px; }
.top-row a {color: #888; padding: 0px 8px}
.comment .content { padding: 0px 8px 3px 0px; font-size: 0.95em; }
.comment .upvote a, .comment .downvote a{
    background-size: auto 20px; height: 20px; width: 20px;
}
.bottom-row .reply-section {
    padding: 8px 10px 4px 0px; font-size: 1.3em;
}
.comment .points{
    font-size: 0.8em;
}
.comment.collapsed .body{ overflow: hidden; height: 23px; display: block;  }
.comment.collapsed .voting { display: none; }
.comment .body .top-row:hover, .comment.collapsed .body .top-row { background: #f5f5f5; }
.comment.collapsed .body .top-row:hover { background: #EEE; }
.comment.collapsed .body .top-row .cell { padding-left: 32px; }
.comment.highlighted .body .table:not(.comment.highlighted .body .child-comments .table) {
    background: rgba(53, 111, 182, 0.1);
    border: 1px rgba(53, 111, 182, 0.1) solid;
    padding-left: 6px;
}
.child-comments {
    margin-left: -17px;
}
.child-comments .comment { margin-bottom: 0px; }

.comment .content p { margin: 0px 0px 8px 0px; }
.comment .content p:last-child, .comment .content p:only-child { margin: 0px; }
/**************/

.preload, .hidden { display: none; }

#page{ display: table; width: 100%; margin: 0px; padding: 0px }
#menu-list, #MainContent, #SideBar{
    display: table-cell;
}
#MainContent, #comments-main {
    background: #eaeaea;
    margin: 0 auto; float: auto; padding: 10px;
    animation-duration: 0.4s; animation-fill-mode: forwards;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
}
#SideBar{ background: white; width: 321px; height: 100%; border-left: 1px #ddd solid; vertical-align: top}

/*********** MENU ************/
#menu-list {background: white; width: 197px; height: 100%; border-right: 1px #ddd solid; vertical-align: top}
#menu-list .category{ 
    display: block; text-decoration: none; padding: 10px 10px 10px 45px; cursor: pointer;
    background-size: 25px 25px; line-height:1.2em; background-repeat:no-repeat; background-position:10px center;
}
#menu-list .category:not(.selected):hover {
    background-color: #EEE;
}
#menu-list .category.selected:hover {
    box-shadow: 0px 0px 6px rgba(255,255,255,0.2) inset;
}
#menu-list .category:active, #menu-list .category.selected:active {
    box-shadow: 0px 0px 6px rgba(0,0,0,0.1) inset;
}
#menu-list .header{
    padding:9.5px 12px 9px; color: #D71F26; background-image:url('../images/arrow-down.svg'); cursor: pointer;
    background-repeat:no-repeat; background-size: 15px auto; background-position: right 10px center;
}
#MenuOther { margin: 15px 0px; }
#MenuOther a{
    display: block; color: #888; cursor: pointer; padding: 6px 0px 6px 15px; font-size: 0.9em; text-decoration: none;
}
#MenuOther a:hover{ color: #666; }

#follow-links, #show-follow.shown { display: none; }
#follow-links.shown { display: block; }
.cat-settings {
    text-align: left; padding-left: 44px; width: calc(50% - 6px);
    background-size: 24px auto, 1px auto; background-position: center left 10px, center right 16px;
}
.cat-settings.selected{
    background-size: 24px auto, 18px auto; background-position: center left 10px, center right 8px;
}
#menu-content.fixed {
    position: fixed; bottom: 0px;
}
#menu-content { width: 196px; display: block; }
#cat-settings-buttons input {
    width: calc(50% - 40px); margin: 0px 8px;
}
#cat-settings-desc { font-size: 0.85em; color: #D71F26; }    
#blocked-cats {
    border: 1px #AAA solid; color: #AAA; display: inline-block; height: 22px; min-width: 22px;
    text-align: center; font-size: 0.8em; border-radius: 11px; line-height: 22px;
    vertical-align: middle; margin: -6px 0px -3px 7px; padding: 0px 4px;
}
/********************/

#view-modes{
    display: inline-block; height: 50px; background: rgba(255,255,255,0); /*background: #D71F26;*/
    position: fixed; top: 0px; margin-top: -3px;
}
#view-modes .tab {
    font-size: 0.9em; height: 50px; padding: 0 15px;margin: 0 5px 0 0; cursor: pointer;
    text-decoration: none; color: rgba(255, 255, 255, 0.6); border-bottom: 3px rgba(255, 255, 255, 0) solid; /* color: #EDAEA9; border-bottom: 3px #D71F26 solid;*/
}
#view-modes .selected, #view-modes .tab:hover {border-bottom: 3px white solid; color: white; text-decoration: none;}
#view-modes .selected{ background-position: right 10px top 22px; background-size: 15px auto;}
.nothing{
    width:100%; padding-top:250px; color:#BBBBBB; font-size:1.2em; text-align:center; background-size: 150px 150px; 
    background-image:url('../images/nothing.svg');background-position: center 90px; background-repeat: no-repeat;
}

#login{ cursor: pointer; margin-top: -4px; padding-left: 15px; }
#UserActions{ display: inline-block; position: absolute; top: 2px; right:0px; padding:0px 20px; height: auto; margin-top: -3px; font-size: 0.7em; color:white; z-index: 99;}
.new-post{
    color: white; border: 1px rgba(0, 0, 0, 0.3) solid; height:30px; line-height:28px; border-radius:3px;
    width:100px; text-align:center; cursor: pointer; display: inline-block; margin: 11px 0 0 0;
}
.new-post:hover{ box-shadow: 0px 0px 6px rgba(0,0,0,0.1) inset; }
.new-post:active{ border-color: rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 6px rgba(0,0,0,0.25) inset; }
#NewPost2{ display: none; }

/*** SIDEBAR ***/
.post.compact {
    border: 0px; margin-bottom: 3px;
}
.post.compact:active{
    background: inherit;
}
.post.compact .body {
    display: block;
}
.post.compact .title {
    font-size: 0.85em; padding: 0px 10px 6px 10px; display: block;
    overflow: hidden; max-height: 3.6em; line-height: 1.2em; max-width: 140px;
}
.post.compact .content-warning{
    font-size: 0.6em; line-height: 1.35em;
}
.post.compact .info {
    padding: 0px 10px; font-size:0.75em; color:#AAA; display: block;
}
#sidebar-posts, .sidebar-posts{
    margin: 5px 10px 10px 10px;
}
.posts-view-more {
    padding:10px; margin: 10px; background: #DDD; color: #888; text-align: center;
    border-radius: 3px; display: block; text-decoration: none; font-size: 0.9em;
}
.posts-view-more:visited{ color: #888;}
.posts-view-more:hover { background: #CCC; color: #666; }
#SideBar .header {
    color: #444; font-size: 0.8; padding: 0px; margin: 10px;
}
#support{
    margin: 10px; border: 1px rgba(219, 134, 183, 0.75) solid;
}
#support .header {
    margin: 0px; background-color: rgba(219, 134, 183, 0.75); color: white;
    background-image: url('../images/c4.svg');
    background-repeat: no-repeat; background-size: 20px auto;
    background-position: center left 10px; padding: 10px; text-align: center;
    animation-name: thump-thump; animation-duration: 8s;
    animation-timing-function: ease; animation-iteration-count: infinite;
}
#support .body{
    padding: 10px; font-size: 0.95em; text-align: center; display: block;
    text-decoration: none;
}
@keyframes thump-thump {
    0% {background-size: 20px auto;}
    90% {background-size: 20px auto; background-position: center left 10px;}
    92% {background-size: 24px auto; background-position: center left 8px;}
    94% {background-size: 20px auto; background-position: center left 10px;}
    96% {background-size: 24px auto; background-position: center left 8px;}
    98% {background-size: 20px auto; background-position: center left 10px;}
    100% {background-size: 20px auto;}
}

#SideBar .profile {
    margin: 3px 10px; background: #EEEEEE; padding: 5px 6px; border-radius: 4px; display: block; cursor: pointer;
}
#SideBar .profile-img {
    background-image: url('https://trinding.com/images/user.svg'); background-color: #D71F26; display:inline-block; width: 28px; height: 28px; border-radius: 50%; background-position: center; background-size: 20px auto; background-repeat: no-repeat; display: table-cell;
}
#SideBar .profile .username {
    padding: 5px 7px; text-decoration: none; display:inline-block; display: table-cell;
}
.post.top-contest .title, .post.top-contest .title:visited {
    color: #BE9030;
}
/*** MOBILE SEARCH ***/
#mobile-search-div {
    background: #D71F26; height: 49px; position: absolute; z-index: 100;
    padding: 0px 10px; width: calc(100% - 41px); right: 0px; opacity: 0; top: -50px;
}
#mobile-search-div input {
    width: 100%; background: rgba(0, 0, 0, 0.3); border: 0px; margin: 0px; height: 31px; padding-left: 34px; color: white;
    position: relative; top: -2px; font-weight: normal; font-size: 0.8em; background-image: url('/images/search.svg');
    background-repeat: no-repeat; background-size: 22px auto; background-position: center left 6px;
}
#mobile-search-div input::placeholder{ color: rgba(255,255,255,0.7); }

/*** MODAL BOX ***/
.modal-layer{
    margin: 0px; background-color: black; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;
    animation-name: trnsprt-appear; animation-duration: 0.4s; animation-fill-mode: forwards;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
    z-index: 1000;
}
.modal-box{
    background: #eaeaea; width: 90%; height: 90%; border-radius: 4px; text-align: center; vertical-align: middle;
    position: fixed; top:0; bottom: 0; left: 0; right: 0; margin: auto;
    animation-name: appear; animation-duration: 0.2s; animation-fill-mode: forwards;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
    z-index: 1001;
}
.modal-box iframe{
    height: calc(100% - 3px);
    /*height: 100%;*/
    width: 100%;
}
.modal-box #modal-bar{
    color: #D71F26; padding:8px; border-bottom:1px #DDD solid; background-image: url('../images/x1.svg');
    background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; background-color: white;
    border-top-right-radius: 4px; border-top-left-radius: 4px; display: table-cell;
}
.modal-box #modal-content{ height:100%; margin-bottom: 5px; display: table-cell; }
.modal-box #modal-content .modal-div { padding: 30px 20px; line-height: 24px; vertical-align: middle; }
.modal-box #bttn-row input { margin: 2px 5px 10px 5px; min-width: 120px; }
.modal-box h3 { text-align: left; }
.modal-box .details {
    font-size:0.9em; line-height: 1.3em; margin:4px 0px 10px 0px; color:#555; text-align: left;
}
.modal-box.fixed { top: 70px; position: absolute; bottom: auto; }
#user_profile{
    /*background-image: url('../images/arrow-down_white.svg');
    background-repeat: no-repeat; background-position: right 0px top 22px; background-size: 15px auto;
    padding: 0 25px 0 0;*/ padding: 0 5px 0 0;
    cursor: pointer; text-decoration: none; color: white; margin-top: -4px;
}
#user_button{
    background-image: url('https://trinding.com/images/user.svg'); width: 35px;
    background-size: 24px auto; background-position: center; background-repeat: no-repeat;
    display: inline-block; top: -1px; position: relative;
}
#notification_button{
    background-image: url('https://trinding.com/images/notifications.svg'); width: 35px;
    background-size: 24px auto; background-position: center; background-repeat: no-repeat;
    display: inline-block; margin-left: 5px;
}
#MainBar #notification_count{
    background: white; color: #D71F26; padding: 0px 6px; height: 24px; display: none;
    line-height: 24px; min-width: 24px; text-align: center; border-radius: 12px;
}
#MainBar #notification_count.new {
    display: inline-block;
}
#UserArea { display:inline-block; height:50px; cursor: pointer; }
#UserArea.open #UserMenu{ display: inherit; }

#notifications { display:inline-block; height:50px; cursor: pointer; }
#notifications.open #notification-menu{ display: inherit; }

#UserMenu, #notification-menu{
    position: fixed; top: 50px; right: 0px; background: white; display: none; width: 200px;
    animation-name: appear; animation-duration: 0.4s; animation-fill-mode: forwards;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
}
#UserMenu a{ display: block; text-decoration: none; color: #356FB6; padding: 0px 20px; cursor: pointer; font-size: 1.1em; }
#UserMenu a:hover{ color: white; background-color: #356FB6 }

#notification-menu {
    width: 250px; line-height: 1.4em;
}
#notification-menu a{
    display: block; text-decoration: none; color: #356FB6; padding: 10px 15px; cursor: pointer; font-size: 1.1em;
    border-bottom: 1px #EEE solid;
}
#notification-menu a.all{ background-color: #EEE; border-bottom: 0px; color: #888; }
#notification-menu a.all:hover{ color: #666; }
#notification-menu a.read{ color: #888;}

/*** COULD BE OPTIONAL AS RESPONSIVE-DESIGN { **/ 
#UserActions.notifications #notification_count {
    position: relative; left: -25px; top: -8px; transform: scale(0.68);
}
#UserActions.notifications #notifications, #UserActions.notifications #NewPost, #UserActions.notifications #NewPost2 {
    position: relative; right: -25px;   
}
/** } **/

@keyframes trnsprt-appear {
    0% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
    100% {opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=40);}
}
@keyframes trnsprt-disappear {
    0% {opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=40);}
    100% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}                
}
@keyframes appear {
    0% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
    100% {opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);}
}
@keyframes disappear {
    0% {opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);}
}
@keyframes slide {
    /*0% {left:-392px;}
    100% {left:-196px;}*/
    0% {left:-200px;}
    100% {left:0px;}
}
@keyframes slide-rev {
    0% {left:0px;}
    100% {left:-200px;}
}
@keyframes body-slide {
    /*0% {left:0px;}
    100% {left:196px;}*/
    0% {-webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
    100% {-webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px);}
}

/**** MULTI-PURPOSE CLASSES ****/
.cell { display: table-cell; }
.row { display: table-row; }
.table { display: table; }
.transition{
    -webkit-transition:0.3s ease all; -moz-transition:0.3s ease all; -ms-transition:0.3s ease all;
    -o-transition:0.3s ease all; transition:0.3s ease all;
}
.shadow{
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
    filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}
/*.user {
    border: 1px #ddd solid; border-radius: 3px;
}*/
.user a:first-child, .user a:first-child:visited{
    cursor: pointer; color: #356FB6; text-decoration: none; padding: 1px 0 2px 0;
}
.user a:nth-child(2), .user .OC{
    background: #E5E5E5; color: #777; border-radius: 2px; padding: 2px 6px 2px 6px; margin-left: 6px;
    font-size: 0.8em; cursor: default;
}
.Error{
    color: #D71F26; padding: 0 0 5px 0; display: none; text-align: left;
}

.select-div{
    padding:8px 12px; margin: 3px; font-size: 0.93em; color: #444;
    background-repeat:no-repeat; border:1px #DDD solid; border-radius:3px;
    display:inline-block; cursor: pointer; background-color: white; width: 180px;
    background-size: 1px auto; background-position: center right 16px;
}
/*.select-div:not(.selected):hover{*/
.select-div:hover{
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2) inset;
}
/*.select-div:not(.selected):active{*/
.select-div:active{
    box-shadow: 0px 0px 6px rgba(0,0,0,0.3) inset;
}
.select-div.selected {
    border-color: #75C063; background-image: url('../images/check.svg'); background-size: 18px auto;
    background-position: center right 8px; color: #75C063;
}
.link{color: #356FB6; cursor: pointer; }
.learn-more{color:#356FB6; float:right; cursor:pointer; font-size:0.85em; display: inline-block; text-decoration: none; }
input.small { font-size: 0.9em; padding: 2px 12px 4px 12px; }

#hof-temp-message{
    background: #356FB6; color: white; padding: 10px; margin-bottom: 10px;
    border-radius: 3px; font-size: 0.85em; line-height: 1.4em;
}
.post-bad-message{
    background: #D71F26; color: white; padding: 10px; margin-bottom: 10px;
    border-radius: 3px; font-size: 0.85em; line-height: 1.4em;
}

#click-mask{
    background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: fixed; opacity: 0;
    animation-name: none; animation-duration: 0.4s; animation-fill-mode: forwards;
    animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
}
/**** User Flair ****/
.post .info a.uf-0, .user a:nth-child(2).uf-0 {
    background-color: #D71F26; color: white;
}
.post .info a.uf-1, .user a:nth-child(2).uf-1 {
    background-color: rgba(190, 144, 48, 0.75); color: white; background-image: url('/images/f1.svg'); background-repeat: no-repeat;
    background-size: 10px auto; padding-right: 16px; background-position: center right 3px;   
}
.post .info a.uf-2, .user a:nth-child(2).uf-2 {
    background-color: #85B588; color: white;
}
/**** Post Banner ****/
.post-banner:first-child { margin-top: 0px; }
.post-banner {
    background: #356FB6; color: white; padding: 10px; margin: 10px auto; border-radius: 3px; font-size: 0.85em; line-height: 1.4em;
}
.post-banner a { margin-bottom: 3px; display: block; }
.post-banner p { margin: 0px; color: rgba(255,255,255,0.75); }
/**** RESPONSIVE DESIGN ****/
@media (max-width: 1200px) {
    #menu-list{ 
        -moz-box-shadow: 0px 0px 4px #AAA; -webkit-box-shadow: 0px 0px 4px #AAA;
        box-shadow: 0px 0px 4px #AAA; position: absolute; left: -200px; height: auto; z-index: 50;
        animation-name: none; animation-duration: 0.4s; animation-fill-mode: forwards;
        animation-timing-function: ease; animation-iteration-count: 1; animation-play-state: running;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
        filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
    }
    #MainBar:not(.no-menu) #menu_bttn { display: inline-block; }    
    .post .thumbnail{ width:120px; }
    /*#PageContents{
        animation-duration: 0.2s; position: absolute; animation-fill-mode: forwards; width: 100%; top: 0px;
        animation-timing-function: ease-out; animation-iteration-count: 1; animation-play-state: running;
    }*/
}
@media (max-width: 950px) {
    #SideBar{display: none;}
    .post .title {font-size: 0.92em;}
    .post .info { font-size: 0.8em; }
    
    #view-modes {
        margin-top: -1px; overflow: hidden; height: 50px;
        -webkit-transition:0.3s ease all; -moz-transition:0.3s ease all; -ms-transition:0.3s ease all;
        -o-transition:0.3s ease all; transition:0.3s ease all;
    }
    #view-modes .selected { background-image: url('../images/arrow-down_white.svg'); background-repeat: no-repeat; background-position: right 10px top 22px; background-size: 15px auto; }
    #view-modes .tab{ display: block; margin: 0px; border-top: 1px rgba(0, 0, 0, 0.3) solid; padding-right: 36px}
    #view-modes .tab:not(.selected) { display: none; margin-top: 0px; }
    #view-modes a:nth-child(2){ border-top: 1px #D71F26 solid; }
    /* View Modes DD Open */
    #view-modes.open a:not(:first-child):hover{
        border-bottom: 3px #D71F26 solid; color: #D71F26
    }
    #view-modes.open a:not(:first-child){
        background-color: white; border-top: 1px #DDD solid;
        color: #D71F26; border-bottom: 3px white solid;
        background-image: none;
    }
    #view-modes.open{
        height: auto;
        -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
        filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#AAAAAA')";
    }
    #MainBar #view-modes.open a { display: block;}
    #view-modes.open a:not(:first-child).selected{ border-bottom: 3px #D71F26 solid; }
    #view-modes.open a:first-child{
        background-color: #D71F26; color: white; background-repeat: no-repeat;
        background-image: url('../images/arrow-down_white.svg');
        background-position: right 10px top 22px; background-size: 15px auto;
    }
}
@media (max-width: 700px) {
    #UserActions { padding: 0px; }
    #UserArea #user_profile{
        display: none;
    }
    #login{
        padding-right: 20px;
    }
    #user_button{ width: 45px; border-left: 1px rgba(0, 0, 0, 0.3) solid; }
    #MainBar:not(.logged-in) .new-post {display: none;}
}
@media (max-width: 550px) {
    #MainBar #logo{margin-top: 4px;}
    #MainBar #logo img{height: 34px;}
    #view-modes { top:51px; left:0; width: 100%; background-color: white; height: 40px; }
    #view-modes .tab{height: 40px; line-height: 36px; color: black; border-bottom: 3px white solid; border-top: 1px #ddd solid;}
    #view-modes .selected{ background-position: right 10px top 15px; background-image: url('../images/arrow-down.svg'); }
    #view-modes .selected, #view-modes .tab:hover {border-bottom: 3px #D71F26 solid; color: #D71F26;}
    body{margin: 90px 0 0 0; }
    .post .thumbnail{width:90px;}
    .post .info .comments, .post:not(.ad) .user{ display: none !important; }
    #MainContent {padding: 8px 6px; float: left; width: 100%;}
    .video-container{margin: auto -10px}
    #menu-list .header{
        border-bottom:3px #D71F26 solid;
    }
    #login-page h3, #login-page textarea, #login-page input, #login-page input[type=button], #login-page input[type=submit] {
        font-size: 1em;
    }
    .post{ margin-bottom: 0px; }
    #MainContent{ padding: 0px; }
    /* .post .voting, .post .thumbnail, .post .body{ border-bottom: 1px #eaeaea solid; } */
    .post{ border-bottom: 1px #eaeaea solid !important; }
    .post .category:nth-child(2) label, .post .category:nth-child(3) label{
        display: none;
    }
    .modal-box { top: 100px; position: absolute; bottom: auto; }
    /*.post .flag { display: none; }*/
    /* View Modes DD Open */
    #view-modes.open a:first-child{
        background-color: white; color: #D71F26;
        background-position: right 10px top 15px; background-image: url('../images/arrow-down.svg');
    }
    #hof-temp-message{ margin: 10px; }
    .post-bad-message{ margin: 10px; }
    .post .info .short_elapsed { display: inline-block; }
    .post .info .elapsed { display: none; }
    
    #menu-list .category:not(.selected):hover {
        background-color: none;
    }
    #menu-list .category.selected:hover {
        box-shadow: none; color: white !important;
    }
    #menu-list .category:active, #menu-list .category.selected:active {
        box-shadow: none;
    }
    #mobile-search-div.open { display: inherit; top: 0px; opacity: 1; }
    
    /****** MENU ******/
    .cat-settings {
        width: calc(100% - 3px);
    }
    #cat-settings-buttons input {
        width: calc(50% - 19px); margin: 0px 8px; font-size: 0.8em; padding: 5px 8px;
    }
}
@media (max-width: 400px) {
    #NewPost2{ display: inline-block; width: 55px; margin-right: -5px; }
    #NewPost{ display: none; }
    #login{
        padding-right: 15px;
        font-size: 0.9em;
    }
    #MainBar #menu_bttn img {
        height: 22px; margin-top: 2px;
    }
}
@media (max-width: 350px) {
    #MainBar #logo {
        margin: 6px 10px;
    }
    #MainBar #logo img{height: 28px;}
    #user_button {
        width: 40px;
    }
    .post .info .views { display: none; }
}