tCMS/css/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;
}
.toplel {
 color: white;
 vertical-align: middle;
}
#lefttitle {
 font-family: courier;
 font-size: 1em;
 font-weight: bold;
}
#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 {
 width: 20%;
 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')";
}
.usericon, .buddyicon {
 width: 1em;
 height: 1em;
 float: right;
 background-size: 1em;
}
.avatar {
 width: 3em;
 height: 3em;
 float: left;
 background-size: 3em;
}
button#clickme {
 display: none;
 float: right;
 box-shadow: 0px 0px 0.5em #66CCFF;
 padding: 0 .25em;
 margin: .25em;
 font-size: .60em;
 background-color: #333;
 border-radius: .5em;
 border: .25em solid black;
 color: red;
}
button#clickme:active {
 padding-left: .30em;
 border-color: gray;
}
.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;
}
.coolbutton:active {
 padding-left: .30em;
 border-color: gray;
}
.cooltext {
 background-color: #333;
 width: 100%;
}
#Submissions input, #Submissions textarea {
 width: 95%;
 display: block;
 margin-right: auto;
 margin-left: auto;
}
#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: .5em;
 margin-top: 0px;
}
em.blogdetail {
 font-size: .8em;
}
a.topbar {
 text-decoration: none;
 color: white;
}
a:hover.topbar {
 text-decoration: underline;
}
img.titlebar {
 height: 1.5em;
 float: left;
}
p.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;
}
/*Responsive design stuff that used to be in JS, modify as needed*/
@media (max-width: 1024px) {
  #lefttitle {
    width: 100%;
    max-width: 100%;
  }  
  #clickme {
    display: table-cell !important;
  }
  #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;
  }
  #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;
  }
}