tCMS/www/styles/screen.css

/*SCREEN.CSS - All styling for the screen view of the site should be done here*/

/*Global tag based changes go here*/
a {
 color: rgb(0,0,0);
 border: 0px;
}
body {
 color: black;
 background-color: gray;
 font-family: sans-serif;
 font-size: 100%;
}
img {
 border: 0px;
}
table {
 border-spacing: 0px;
}
td {
 padding: 0px;
 margin: 0px;
}
hr {
 width: 100%
}
ul {
 list-style-type: disc;
}
pre {
 margin-top: .25em;
 margin-bottom: .25em;
 white-space: pre-wrap;
 font-family: sans-serif;
 font-size: 1em;
}
textarea {
 height: 10em;
 width: 99%;
 background-color: #333;
 height: 15em;
}
audio, video {
 display: block;
}

/*Major DOM Element Styling goes below*/
#topkek {
 background: rgb(0,0,0);
 box-shadow: 0 .25em .5em black;
 padding-top: .1rem;
}
.toplel {
 color: white;
 vertical-align: middle;
}
#lefttitle {
 font-family: courier;
 font-size: 1em;
 font-weight: bold;
 padding-left: .5rem;
 line-height: 2rem;
}
#midtitle, .midtitle {
 text-align: center;
}
#righttitle {
 text-align: right;
}
#righttitle a, #configbar a {
 padding-right: .5em;
 border-right: .1em #333 solid;
}
#righttitle a:last-child, #configbar a:last-child {
 border-right: 0;
}
#menubutton {
 vertical-align: middle;
}
#littlemenu {
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,.75);
 border-bottom-left-radius: 1em;
}
#kontent {
 background: rgb(255,255,255); /*IE Fallback*/
 background: rgba(255,255,255,.90);
 border-radius: 0px 0px 1em 1em;
 box-shadow: 0 .5em 1em black;
}
#footbar {
 color: white;
 background-color: black;
 text-align: center;
}
/* admin styles */
#mbengine {
 width: 100%;
 display: table;
}
#submissions {
 display: table-cell;
}
#stories {
 vertical-align: top;
}

/*Icon/Button styles below*/
.rss {
 border: 0px;
 height: 1em;
 width: 1em;
 background-size: 1em;
 background-image: url(/img/icon/rss.png);
 display: inline-block;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale');
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale')";
}
.postericon {
 width: 2.5rem;
 height: 2.5rem;
 float: right;
 text-decoration:none;
}
.usericon, .buddyicon {
 width: 2rem;
 height: 2rem;
 display: inline-block;
}
.usericon, .buddyicon, .postericon {
 background-size: cover;
 background-repeat: no-repeat;
 padding-right: unset !important;
}
.circle, .usericon, .buddyicon, .postericon {
 border-radius: 50%;
}
.portrait {
 position: absolute;
 background-color: white;
 border: solid black 5px;
 height: 10rem;
 width: 10rem;
 background-size: cover;
 top: 13.5rem;
}
.banner {
 position: relative;
 padding: .5rem;
 box-sizing: border-box;
 resize: horizontal;
 overflow: clip;
 max-width: 45rem;
 min-height: 25rem;
 width: 100%;
 background-repeat: no-repeat;
 background-position: top center;
 margin-left: auto;
 margin-right: auto;
}
.banner > #postData {
 position: absolute;
 top: 19rem;
 left: 12rem;
}
.avatar {
 width: 3em;
 height: 3em;
 float: left;
 background-size: 3em;
}
span#clickme {
 display: none;
 font-size: 2rem;
 line-height: 2rem;
}
span#clickme:hover {
 cursor: pointer;
}
.coolbutton, .cooltext, textarea {
 box-sizing: border-box;
 border-radius: .5em;
 border: .25em solid black;
 color: white;
 padding: .25em;
 margin: .25em;
}
.coolbutton {
 box-shadow: 0 0 .5em black;
 background-color: #333;
 cursor:pointer;
}
.coolbutton:active {
 padding-left: .30em;
 border-color: gray;
}
.cooltext {
 background-color: #333;
 width: 100%;
}
.cooltab {
    box-shadow: 0 0 .5em black;
    background-color: #333;
    cursor:pointer;
    border-color: gray;
    box-sizing: border-box;
    border-radius: .5em;
    border: .25em solid black;
    color: white;
}
.coolcb {
    height: 1.5rem !important;
    width: 1.5rem !important;
    display:inline !important;
    margin-left: 1rem !important;
    margin-bottom: 1rem !important;
}

.Submissions input, .Submissions textarea, .Submissions select {
 width: 95%;
 display: block;
 margin-right: auto;
 margin-left: auto;
}

.Config input, .Config textarea, .Config select {
 display:inline;
}
.Submissions textarea {
 height: 20em;
 vertical-align: top;
}

/*Various other stylistic stuff below*/
a.nudes {
 color: rgb(0,255,0);
}
img.icon {
 height: 1em;
 width: 1em;
}
img.mblogimg, {
 max-width: 100%;
 display: block;
}
h3.blogtitles {
 margin-bottom: 0px;
 margin-top: 0px;
}
em.blogdetail {
 font-size: .8em;
}
a.topbar {
 text-decoration: none;
 color: white;
}

.topform {
    margin:0px;
}

a.topbarimg {
    vertical-align:middle;
}

a:hover.topbar {
 text-decoration: underline;
}
img.titlebar {
 height: 1.5em;
 float: left;
}
.title {
 padding-top: 0px;
 margin-top: 0px;
 font-weight: bold;
}
p#linkcontainer {
 padding: 2em .5em .5em .5em;
 background: rgb(0,0,0); /*IE Fallback*/
 background: rgba(0,0,0,.75);
 border-bottom-left-radius: 1em;
 margin-top: 0px;
}
span.bold {
 font-weight: bold;
}
p.posteditortitle {
 margin: 0px;
 font-weight: bold;
 border-bottom: .1em solid gray;
 padding: .5em;
}
.disabled {
 display: none;
}
.clear {
 clear: both;
}
.mbedit_text {
 display: inline-block;
}
.mbedit_button {
 width: 5em;
 display: inline-block;
}
#newposttitle {
 width: 95%;
 display: block;
 box-sizing: border-box;
}
#newpostlink {
 color: #990000;
}
.hidon {
    display:none;
}
/*Responsive design stuff that used to be in JS, modify as needed*/
@media (max-width: 1024px) {
  div#midtitle {
      display: none;
  }
  div#lefttitle {
    min-width: calc(100vw - 5.5rem);
  }
  span#clickme {
    display: inline-block;
    flex-shrink: 0;
  }
  #righttitle, #configbar {
    visibility: hidden;
    position: fixed;
    top: 2rem;
    right: 0;
    min-width: 0;
    max-width: 100%;
    background-color: rgba(0,0,0,.75);
    border-bottom-left-radius: 1em;
    padding-left: .5rem;
  }
  #clickme:hover ~ #righttitle, #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
    visibility: visible;
  }
  #righttitle > a, #configbar a {
    display: block;
    border-right: 0;
  }
}
@media (max-width: 700px) {
  #mbengine {
   width: 100%;
   display: block;
  }
  #submissions {
   width: 100%;
   display: block;
  }
  .responsive-hide {
    display:none;
  }
}
.manageUserEntry {
    border: .25rem dashed black;
    padding: .5rem;
}

.undecorated {
    text-decoration: none;
}

.tile {
    display: inline-block;
}

.preview {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: .5rem;
}

.profile {
    background-size: 75%;
    background-position-y: center;
}

.bigprofile {
    background-size: 100%;
    background-position-y: center;
}

/*Responsive Shizz*/
@media(max-width: 900px) {
 body {
  font-size: 100%;
 }
 #kontent {
  padding: 3em 0.5em 0.5em;
  max-width:95vw;
 }
 #leftbar, #rightbar {
  display: none;
 }
 img.nudes, .mblogimg {
  max-width: 95vw;
 }
 .trogged {
    display: none;
 }
}
/*Responsive iframes*/
@media(max-width: 35rem) {
  iframe.responsive, video.responsive {
    width: 100%;
    height: 10rem;
  }
  .responsive-text {
    width:100%;
  }
}

/* For tcms Advert */
.trogged {
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 100;
    text-decoration: none;
}

/* embed style for posts */
.embed {
    border: inset;
    margin: 2rem;
    padding: 1rem;
}
/* Name badge on posts */
.nameBadge {
    background-color: black;
    opacity: 80%;
    color: white;
    border-radius: 1rem;
    text-align:center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
}

pre {
    background: #e4e4e4;
    border-width: 1px;
    border-style: solid;
    border-color: #400 #700 #700 #400;
}

a.tag {
    padding: 0rem .5rem 0rem .5rem;
    border-radius: 1rem;
    background: #e4e4e4;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    text-decoration: none;
    text-shadow 0 0 2px grey;
    font-size: 1rem;
}

.postData {
    margin-top: .5rem;
}

#emojis {
    width: 30vw;
    height: 30vh;
    overflow: scroll;
}
#emoji-container {
    border-radius: 1rem;
    background: #e4e4e4;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    text-decoration: none;
    text-shadow 0 0 2px grey;
    font-size: 1rem;
    width: 30vw;
    text-align: center;
    padding: .25rem;
    line-height: 125%;
}
.emoji {
    cursor: pointer;
    font-size: 100%;
    padding-left:.25rem;
}
.emoji:hover {
    font-size: 120%;
    text-shadow: 0 0 .3rem gold;
}
.posteditor {
    width: 100%;
}
#emoji_picker_modal {
    position: fixed;
    top: 3rem;
    right: 3rem;
}