@charset "UTF-8";

* {
  outline: none; 
  box-sizing: border-box;
  }


body {
 background: #bbb;
 font: 0.875rem/normal Tahoma, Arial, Helvetica, sans-serif;
}

h1 {font-family: Georgia, serif; font-weight: normal; font-size: 200%; 
   margin: 0.25rem auto 0 0.25rem; padding: 0.25rem;
   text-shadow: rgba(0,0,0,0.3) 1px 1px 2px; }

h2 {font-family: Tahoma, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 125%; 
    margin: 0.25rem auto 0.5rem 0.25rem; padding: 0 0 0.25rem 0;}
h3 {font-family: Georgia, serif; font-weight: normal; font-size: 175%; 
   margin: 0.25rem auto 0.5rem 0; padding:0;}
h4 {font-family: Georgia, serif; font-weight: normal; font-size: 135%;
   margin: 0 auto 0 auto; padding:0;}

pre {
     font-size: 1rem; 
     font-family: ""Courier New"", Courier, monospace; 
     white-space: pre;
     }

sup {
   font-size: 0.83em;
   vertical-align: super;
   line-height: 0;
}

sub {
   font-size: 0.83em;
   vertical-align: text-bottom;
   position: relative;
   top: 0.2rem;
}

blockquote {
   width: 90%;
   font-style: italic;
   font-family: Georgia, Times, "Times New Roman", serif;
   border-style: solid;
   border-color: #ccc;
   border-width: 0;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   border-left-width: 0.25rem;
}


.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {  	
	width: auto !important;
	height: auto !important;
	}

.normal ul {
   list-style-image: url(../images/red-bullet.png);
   margin: 0.25rem auto 0.25rem auto;
   }

a {text-decoration-skip-ink: none;}

#m2midbox a:link , .normal a:link 
   {
   transition: 100ms; 
   color: rgb(64,96,192); 
   text-decoration: underline;
   }

#m2midbox a:visited, .normal a:visited    
   {
   color: rgb(0,64,64); 
   text-shadow: none; 
   text-decoration: underline;
   }

#m2midbox a:hover, .normal a:hover 
   {
   color: rgb(0,32,32); 
   text-shadow: rgba(0,32,32,0.8) 1px 0 0; 
   text-decoration: underline;
   }


#mainbox
   {
    background: #fff;
    width: 95%;
    min-width: 17rem;
    border: 1px solid #999;
    margin: 1rem 0 0 1rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: 0.25rem 0.25rem 1.75rem rgba(40,40,40,0.4);
   }

 #menuback
   {
    height: 6.9rem;
    width: 100%;
    background: #999 url(../images/header-sm.jpg) repeat-x;
    background-position: calc(6rem + 50vw) 0;
   }

@media screen and (min-width: 900px) {
 #menuback
   {
    height: 10.375rem;
    width: 100%;
    background: #999 url(../images/header-new.jpg) repeat-x;
    background-position: calc(-30rem + 50vw) 0;
   }
}

#menuclean
   {
    height: 2.125rem;
    width: 100%;
    background: #000;
   }

#replyblock
   {
    display: none;
   }

#m2midbox
{
    min-height: 20rem;
    font: 0.875rem/normal Verdana, Arial, Helvetica, sans-serif;
    max-width: 100%;
    overflow: hidden;
}

#m2midbox ul{
   list-style-type:disc;
   margin: 0.25rem auto 0.25rem auto;
}

#footer
{
    min-height: 8rem;
}

.m2controls
{
    width: 100%;
}

.m2controls table
{
    width: 100%;
}


.replybutton
{
    float: right;
    margin: 0 1.25rem 0 9rem;
    padding: 0.25rem 1.25rem 0.25rem 1.25rem;
    color: #fff;
    background: #999;
}

.replybutton:hover 
{
    cursor: pointer;
    background: #555;
    transition: background-color 300ms;
}


.dxpopup
  {
    display: none; 
    width: 32rem;
    max-width: 90%;
    height: 24rem; 
    background: #000; 
    border: solid 1px #000;
    box-shadow: 2px 2px 0.5rem rgba(40,40,40,0.4);
    overflow: hidden;
  }

.dxpopup .close
{
    float: right;
    margin: 0.25rem 0.25rem 0 0;
}

#uploadmodal
{
    width: 66%;
    min-width: 20rem;
    min-height: 10rem;
}

#msgmodal
  {
    width: 32rem;
    max-width: 90%;
  }

#whatmodal
  {
    width: 32rem;
    max-width: 90%;
  }

#joinmodal
  {
    width: 32rem;
    max-width: 90%;
  }

#codemodal
{
    width: 32rem;
    max-width: 90%;
}

#setmodal
{
    width: 40rem;
    max-width: 90%;
}

#inxmodal
{
    width: 32rem;
    max-width: 90%;
}

.imgy {
    width: 95%;
    min-width: 22rem;
    margin: 0.5rem;
   }
.imgy img {
   width: 20%;
   min-width: 10rem;
   padding: 0.5rem;
   border: 1px solid black; 
   transition: 300ms; 
   }
.imgy img:hover { 
   outline: 2px solid black; 
   } 

.modalform
  {
    display: none;
    background: #f9f9f9; 
    border: solid 1px #000;
    border-radius: 0.25rem;
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    box-shadow: 2px 2px 0.5rem rgba(40,40,40,0.4);
  }

.modalform .close
{
    float: right;
    margin: -0.25rem -1.0rem 0 0;
}

.modalform table
  {
    margin: 0.5rem;
  }

.visitit
  {
  color: #fff;
  background: #000;
  width: 10rem;
  height: 2rem;
  padding: 0 0.5rem 0 0.5rem;
  margin: 0.25rem 0 0 0;
  }

.visitit a:link 
   {
   transition: 300ms; 
   color: rgb(192,192,255); 
   text-shadow: none; 
   text-decoration: underline;
   }

.visitit a:visited    
   {
   color: rgb(192,192,255); 
   text-shadow: none; 
   text-decoration: underline;
   }

.visitit a:hover 
   {
   color: rgb(255,255,255); 
   text-shadow: rgba(192,192,192,0.8) 1px 0 0; 
   text-decoration: underline;
   }

.viewbox 
  {
  background: #000;
    width: 31rem;
    max-width: 98%;
    height: auto; 
  border: 1px solid #000;
  margin: 0;
  padding: 0.5rem;
  overflow: hidden;
  }

#sort2table
  {
    width: 95%;
    border-collapse: collapse;
  }

#sort2table tr
  {
    height: 1.5rem;
  }

#sort2table td
  {
    max-width: 5rem;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

#sort2table tr:nth-child(2n) {background: #ddd;}
#sort2table tr:nth-child(2n+1) {background: #fff;}

.svghead {
   fill: #444; 
}


.svgicon {
   fill: #333; 
}

.svgicon:hover {
  fill: #000;
}


#sort2table th
  {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

#copyrt
{
    clear: both;
}

.imggallery
   {
    float: left; 
    width: 32rem; 
    height: 24rem; 
    overflow: auto; 
    margin: 0.5rem;
    padding: 0.25rem;
    border: 1px solid #fff;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 0.5rem rgba(40,40,40,0.4);
   }

.hidepara
   {
    display: none;
   }

.imgvg
   {
    float: left; 
    width: 16rem; 
    height: 12rem; 
    overflow: auto; 
    margin: 0.5rem;
    padding: 0.25rem;
    border: 1px solid #fff;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 0.5rem rgba(40,40,40,0.4);
   }

.arcblock
   {
    width: 14rem;
    float: left;
    margin: 0.5rem;
    padding: 0.25rem;
    border: 1px solid #fff;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 0.5rem rgba(40,40,40,0.4);
   }

.arcblock table
   {
    width: 100%;
   }

.arcblock table td
{
    padding: 1px;
}

/*
.togb img
      {
      border: 2px solid rgb(255,255,255);
      transition: border 300ms; 
      }

.togb:hover img 
      {
      border: 2px solid rgb(0,0,0);
      }
*/

div.hh
 {
 height: 0;
 margin: 0.25rem 0 0.5rem 0;
 background-color: #000;
 border-top: 1px solid #000;
 width: 100%;
 clear: both;
 }

div.hh-red
 {
 height: 8px;
 margin: 0.25rem 0 0.5rem 0;
 background-color: #bbb;
 /* border-top: 1px solid #000; */
 width: 100%;
 clear: both;
 }


button
  {
  font: 400 0.75rem/0.75rem Tahoma, Arial, Helvetica, sans-serif;
  }

button
  {
  cursor: pointer;
  width: 40%;
  min-width: 8rem;
  border: none;
  background: #368;
  color: #fff;
  margin: 0 0 0.25rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

button:hover 
  {
  background: #335;
  transition: background-color 300ms;
  }

button:active 
  {
  box-shadow: inset 0 1px 0.25rem rgba(0,0,0,0.5);
  }


#reply-form input[type="text"],
#reply-form input[type="email"],
#reply-form textarea
  {
  font: 0.875rem/0.875rem Verdana, Tahoma, Arial, sans-serif;
  }

#reply-form 
  {
  background: #ddd;
  padding: 0.25rem;
  margin: 0.5rem;
  }

#reply-form h3 
  {
  color: #000;
  display: block;
  font-size: 1.125rem;
  }

#reply-form h4 
  {
  margin: 0.25rem 0 1.0rem;
  display: block;
  font-size: 0.75rem;
  }

#reply-form label, #reply-form .edithdr
  {
  color: #444;
  display: block;
  margin: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-weight: 900;
  }

#reply-form .edithdr
{
    margin: 0.25rem 0.5rem 0 0.5rem;
    overflow:auto;
}

#reply-form .switchedit
{
    float:right;
    color:#fff;
    background:#999;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

#reply-form .switchedit:hover 
  {
    cursor: pointer;
    background: #555;
    transition: background-color 300ms;
  }

#reply-form .addfilesbtn
{
    float: left;
    color:#fff;
    background:#999;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

#reply-form .addfilesbtn:hover 
  {
    cursor: pointer;
    background: #555;
    transition: background-color 300ms;
  }

#reply-form #textedit
{
    display: none;
}

#pcodediv
{
   width: calc(5rem + 1vw);
}

#ORdiv
{
   width: calc(2.5rem + 1vw);
}

#namediv, #emaildiv
{
   width: calc(8rem + 5vw);
}

#reply-form input[type="text"], #reply-form input[type="email"], #reply-form textarea 
  {
  width: 100%;
  box-shadow: inset 0 1px 2px #ddd, 0 1px 0 #fff;
  border: 2px solid #ccc;
  background: #fff;
  margin: 0 0 0.25rem 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

#reply-form textarea 
  {
    height: 16rem;
    width: 100%;
    margin: -2px 0 0 0;
  }

#reply-form input[type="text"]:hover, #reply-form input[type="email"]:hover, #reply-form textarea:hover 
  {
  transition: border-color 500ms ease-in-out;
  border: 2px solid #888;
  }

#reply-form input:focus, #reply-form textarea:focus 
  {
  outline: 0;
  border: 2px solid #888;
  }