:root {
    --bg-main: #282828;
    --bg-secondary: #333333;
    --bg-header: #202121;
    --text-main: #FFCC00;
    --text-dim: #bbbbbb;
    --accent-blue: #00ADEF;
    --accent-purple: #B780FE;
    --accent-orange: #FFA500;
    --accent-red: #DD4B39;
    --accent-success: #3079ED;
    --border-color: #444444;
    --max-width: 500px;
}

* {
    box-sizing: border-box;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}
html,body,h3 {
    margin:0;
    padding:0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: var(--text-main);
    line-height: 1.4;
}

.main{
 font-size:small;
 font-family:lucida grande,tahoma,verdana,arial,sans-serif;
 color: var(--text-main);
 background-color: #1a1a1a;
         -webkit-touch-callout: none;
 	 -webkit-user-select: none;
 	 -khtml-user-select: none;
 	 -moz-user-select: none;
 	 -ms-user-select: none;
 	 user-select: none;
}

.contentdiv{
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--bg-main);
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.header_div {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
}

.header_div h3 {
    margin: 0;
    padding: 15px;
    color: white;
    text-align: center;
    font-size: 1.2rem;
    background-color: black;
}

.headerdiv{
background:url("app_pictures/background2.png");
font-weight:bold;
}

.post_link_header{
 color: #C30F3D;
}

.round_header{
    background-color: var(--bg-secondary);
    color: var(--accent-purple);
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.small_text_color{
    color: var(--text-dim);
    font-size: 0.8rem;
}

.big_button{
 max-width:100%;
 min-width:100px;
 padding:2px;
}

 .top_block {
    display:inline-block;
    margin-right: 10px;
}

 .block_display_forms {
    font-size: 0.9rem;
}

.roombackground{
  background-position: 0px 0px;
  background-repeat: no-repeat;
  font-weight:bold;
  min-height:100px;
  color:black;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

  .styletext
 {
     font-size: xx-small;
     color: #000000;
     text-align: left;
     visibility:hidden;
     display:none;
 }

 .main_header_div{
  background:url("app_pictures/black-button.png");
  background-position:  0px 0px;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border-color);
  -moz-background-size:100% 100%;
  -webkit-background-size:100% 100%;
  background-size:100% 100%;
  width:100%;
 }

 .btn-file input[type=file] {
 position: absolute;
 top: 0;
 right: 0;
 min-width: 100%;
 min-height: 100%;
 font-size: 100px;
 text-align: right;
 filter: alpha(opacity=0);
 opacity: 0;
 outline: none;
 background: white;
 cursor: inherit;
 display: block;
 }

 .my_message{
  background-color: rgb(183, 128, 254);
  color:black;
  margin-top:3px;
  border-bottom: 1px solid var(--border-color);
 }

 .other_message{
     background-color: #F4F39E;
     color:black;
     margin-top:3px;
     border-bottom: 1px solid var(--border-color);
 }

 .sticky {
   -webkit-box-shadow: #DDD 0px 1px 2px;
   position: relative;
   color:black;
   background-color: #F4F39E;
   border-color: #DEE184;
   text-align: center;
   margin: 2.5em 0px;
   padding: 1.5em 1em;
   -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
   box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
   font-family: Chalkboard, 'Comic Sans';
 }
 .sticky.taped:after {
   display: block;
   content: "";
   position: absolute;
   width: 151px;
   height: 35px;
   top: -21px;
   left: 25%;
   background: transparent url(tape.png) 0 0 no-repeat;
 }

.listdiv{
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.listdiv:hover {    }

.user_name{
 background-color:black;
}

input[type="file"]{
   text-align: right;
}

.buttonsmile{
 background-image:url("smiley/angel_smile.gif");
 background-position:  0px 0px;
 background-repeat: no-repeat;
 min-width:23px;
 min-height:23px;
}

.groupheader{
color: var(--text-dim);
font-size:small;
}

.post-card {
    border-bottom: 1px solid var(--border-color);
}

.post-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 10px;
    background-color: #555;
}

.post-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    color: white;
    background-color: var(--accent-purple);
}

.post-header-info {
    flex: 1;
}

.post-header-info .post-author {
    font-weight: bold;
}

.post-header-info .post-meta {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.post-title {
    padding: 0 15px 5px;
    font-weight: bold;
}

.post-signature {
    padding: 5px 15px;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.post-actions {
    border-top: 1px solid var(--border-color);
    padding: 8px 15px;
    font-size: 0.8rem;
}

.info{
	color:white;
}

.divheader{
    background-color: var(--bg-secondary);
    color: var(--accent-purple);
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.users_online{

}

    .protectedText {
        padding: 15px;
        background-color: rgba(0,0,0,0.1);
        font-size: 0.95rem;
        color: #ddd;
        -moz-user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor:not-allowed;
        -webkit-tap-highlight-color: transparent;
     }

.gabarge{

}

#container {
  font-weight:bold;
  border-color: yellow;
  border-style: solid;
  border-width: 1px;
  margin-top:0px;
  margin-left:3px;
  margin-right:3px;
  margin-bottom:0px;
  background:url("app_pictures/scale1.png");
}

#picdiv{
 border-bottom: 1px dotted #eee;
 background:url("app_pictures/demo.png");
}

#heading {
  color:white;
  font-size:20px;
  font-weight:bold;
  border-color: yellow;
  border-style: solid;
  border-width: 1px;
  margin-left:3px;
  margin-right:3px;
  margin-bottom:0px;
  background:url("app_pictures/background1.png");
  background-repeat: repeat;
}

#footer {
 color:white;
  margin-top:0px;
  border-color: yellow;
  border-style: solid;
  border-width: 1px;
  margin-left:3px;
  margin-right:3px;
  background:url("app_pictures/background1.png");
  background-repeat: repeat;
}

.images{
 width:95%;
 max-width:300px;
 padding:1px;
 border:1px solid black;
}

.small_images{
 max-width:100px;
 padding:1px;
 border:1px solid black;
}

.largeimages{
  width:98%;
  max-width:300px;
  padding:1px;
  border:1px solid #C7C7C7;
}


input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),.textinput,input[type="text"],textarea,input[type="password"],select{
 font-weight:bold;
 border-color: var(--border-color);
 border-style: solid;
 border-width: 1px;
 background:url("app_pictures/background5.png");
 background-color:white;
 margin-bottom:3px;
 width: 99%;
 padding: 7px 12px;
 border-radius: 4px;
 -webkit-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
}

textarea {
 min-height: 4.8em;
 height: 4.8em;
 resize: vertical;
 line-height: 1.2;
}

.post-next-link {
 display: block;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

input:hover {
 font-weight:bold;
 border-color: #00ADEF;
 border-style: solid;
 border-width: 1px; }
input:active {
 font-weight:bold;
 border-color: var(--border-color);
 border-style: solid;
 border-width: 1px; }
input:focus {
 font-weight:bold;
 border-color: var(--border-color);
 border-style: solid;
 border-width: 1px; }


.bordertop{
    border-top: 1px solid var(--border-color);
    padding: 10px 15px;
}

.tenpxdivtop{
 margin-top:10px;
}
.tenpxdivbottom{
 margin-bottom:10px;
}

input[type="submit"],
input[type="button"],
button,
.bcgrnd,
.sendbutton {
    background-color: var(--accent-blue);
    color: white;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s, border-color 0.2s;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.bcgrnd:hover,
.sendbutton:hover {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

input[type="submit"]:active,
input[type="button"]:active,
button:active,
.bcgrnd:active,
.sendbutton:active {
    background-color: var(--accent-blue);
    opacity: 0.8;
}

.homedescript{
 color: rgb(14, 56, 95);
 font-size: 17px;
 line-height: 29px;
 width: 400px;
 word-spacing: -1px;
}

    a:link {color: var(--accent-blue); text-decoration: none; margin:0px;}
    a:visited {color: var(--accent-blue); text-decoration: none; margin:0px;}
    a:active {color: #E5E5E5; text-decoration: underline; margin:0px;}
    a:hover {color: var(--accent-orange); text-decoration: underline; margin:0px;}

     a.offline:link {color:#FFA500 ;text-decoration: none;}
     a.offline:visited {color:#FFA500;text-decoration: none;}
     a.offline:active {color: #FFA500;text-decoration: underline;}
     a.offline:hover {color: #00ADEF;text-decoration: underline;}

     a.post_link_header:link {color:#F1003E;text-decoration: none;}
     a.post_link_header:visited {color:#F1003E;text-decoration: none;}
     a.post_link_header:active {color: #F2013F;text-decoration: underline;}
     a.post_link_header:hover {color: #F2013F;text-decoration: underline;}

    .page_more{
     border:solid 1px var(--border-color);
     max-width:200px;
    }

   .text_shade{
     font-size:1px;
     background-color: black;
     color:black;
   }

.error{
 background-color: var(--accent-red);
 font-weight: bold;
}

.mylink{
    display: inline-block;
    padding:2px 0px 2px 0px;
    text-decoration: none;
}

 a.mylink:hover { text-decoration: none;}

.notshow{
 font-size:0px;
 width:0px;
 height:0px;
 overflow: hidden;
 visibility: hidden;
 display:none;
 color: #fff;
 background: #fff;
 border: none;
}
.success{
 background-color: var(--accent-success);
}

#delete #x:hover {
	color:#36c;
}

.textinputs:hover{
       border-color: #B22222;
       border-style: solid;
       border-width: 1px;
}

.top {
margin-top:5px;
}

.text-center {
    text-align: center;
}

/* Clear floats */
.fclear {clear:both}

@media (max-width: 500px) {
    .contentdiv {
        border-left: none;
        border-right: none;
    }
}