@font-face {
    font-family: coc;
    src: url(supercell.ttf);
}
body{
margin:0;
padding:0;
background-image:url('../images/background.jpg');
background-size:cover;
font-family: coc;
}
a {}
a:hover {
text-decoration:none;
}
.ruim_container{
max-width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:75px;
    background-image: url(../images/bleft.png), url(../images/bright.png) , url(../images/bmid.png);
    background-position: left top, right top, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
	background-color:#5a5552;
	border-radius:10px;
	box-shadow:0 0 5px #000;
	padding:10px;
	margin-bottom:100px;
}

.ruim_logo{
text-align:center;
}

.ruim_logo > img {
width:200px;
margin-top:-75px;
}

.ruim_conternt{
width:100%;
background:#efece8;
border-radius: 8px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
box-shadow:0 0 5px #524d4a;
border:1px solid #837f7b;
padding:10px;
}

.ruim_left{
float:left;
}
.ruim_right{
float:right;
}
.ruim_clear{
clear:both;
}
.ruim_content_des{
border-radius:5px;
padding:5px;
margin-top:50px;
}
.ruim_content_des > .ruim_title{
font-size:18px;
color:#fff;
text-align:center;
-webkit-text-stroke: 1px #000;
   text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;

}
.ruim_content_gen > .ruim_title{
color:#fff;
text-align:center;
-webkit-text-stroke: 1px #000;
   text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;

}
.ruim_content_gen{
border-radius:5px;
}
.ruim_content_gen > .ruim_image{
text-align:center;
margin-top:10px;
}
.ruim_content_gen > .ruim_image > img{
width:200px;
}
.ruim_image{
text-align:center;
margin-top:10px;
}
.ruim_image > img{
width:80%;
}
.ruim_des_text{
text-align:justify;
text-justify:inter-word;
width:80%;
font-size:10px;
color:#fff;
-webkit-text-stroke: 1px #000;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
 margin:auto auto;
}
.ruim_green_btn{
text-align:center;
margin-top:10px;
}

.ruim_gen_btn{
width:150px;
}
.ruim_gen_btn:active{
width:145px;
}
.ruim_popup{
z-index:99999;
position:fixed;
background:rgba(0,0,0,0.5);
height:100%;
width:100%;
top:0;
overflow:scroll;
text-align:center;
}


.ruim_container2{
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
    background-image: url(../images/bleft.png), url(../images/bright.png) , url(../images/bmid.png);
    background-position: left top, right top, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
	background-color:#5a5552;
	border-radius:10px;
	box-shadow:0 0 5px #000;
	padding:10px;
}
.ruim_x_btn{
text-align:right;
height:40px;
}
.ruim_x_btn > img{
height:30px;
width:30px;
cursor:pointer;
}
.ruim_x_btn > img:active{
padding:2px;
height:26px;
width:26px;
cursor:pointer;
}
.ruim_conternt2{
width:100%;
background:#e4e4d4;
margin-left:auto;
margin-right:auto;
border-radius:10px;
box-shadow:0 0 5px #524d4a;
border:1px solid #837f7b;
}



#scrollbar_container {  
    position:relative;  
    width:500px;  
} 
 
#scrollbar_track {  
    position:absolute;  
    top:0;  
    rightright:0;  
    height:100%;  
    width:10px;  
    background-color:transparent;  
    cursor:move;  
} 
 
#scrollbar_handle {  
    width:10px;  
    background-color:#5c92e7;  
    cursor:move;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    opacity:0.9;  
    -moz-opacity:0.9;  
} 
 
#scrollbar_content {  
    overflow:hidden;  
    width:485px;  
    height:250px;  
}  

.ruim_progress{
float:left;
}
.td1{width:10%; padding: 6px;}
.td2{width:60%; padding: 6px;}
.td3{width:30% padding: 6px;}
.progress{margin-bottom:0;}
.ruim_input{width:50%;height:20px;
min-width:60px;
margin:auto auto;
font-size:8px;
padding:0;
}
.progress-bar{
background:url('../images/001.png');
border-radius:5px;

}
.progress{
background:url('../images/002.png');
padding-left:2px;
}
.tr1{
margin:10px;
}
.ruim_nxt_btn{
height:33px;
width:auto;
margin:10px;
cursor:pointer;
}
.ruim_nxt_btn:active{
height:25px;
margin-right:15px;
margin-bottom:15px;
}
.r_pbar{
width:100%;
text-align:center;
background:#fff;
}
.r_pbar > img {
max-width:200px;
}
.antispam{
max-width:200px;
}
.ruim_iframe{
width:100%;
min-height:300px;
border:none;
border-radius:5px;
}
.progress_text{
text-align:left;
color:#fff;
font-size:10px;
text-shadow: 2px 2px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
margin-left:5px;
}
.ruim_titile_pro{
 color: #ffffff;
    margin: auto;
    max-width: 300px;
    padding: 10px;
text-align:center;
-webkit-text-stroke: 1px #000;
   text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.progress{
margin-top:-8px;
}

.ruim_back_btn{
text-align:right;
}
.ruim_back_btn > img{
height:30px;
width:55px;
cursor:pointer;
}
.ruim_back_btn > img:active{
padding:2px;
height:26px;
width:51px;
cursor:pointer;
}
.ruim_comments_box1{
  background: -webkit-linear-gradient(#cdcfca, #bdc0b9);
  background: -o-linear-gradient(#cdcfca, #bdc0b9); 
  background: -moz-linear-gradient(#cdcfca, #bdc0b9);
  background: linear-gradient(#cdcfca, #bdc0b9);
  padding:10px;
  margin:3px !important;
  border-radius:8px;
  border-top:1px solid #a4a59f;
  border-bottom:2px solid #61625c;
  border-left:1px solid #65605a;
  border-right:1px solid #65605a;
}
.ruim_comments_box2{
  background: -webkit-linear-gradient(#e0e3dc, #ced3cc); 
  background: -o-linear-gradient(#e0e3dc, #ced3cc); 
  background: -moz-linear-gradient(#e0e3dc, #ced3cc); 
  background: linear-gradient(#e0e3dc, #ced3cc); 
  padding:10px;
  margin:3px !important;
  border-radius:8px;
  border-top:1px solid #a4a59f;
  border-bottom:2px solid #61625c;
  border-left:1px solid #65605a;
  border-right:1px solid #65605a;
}
.ruim_rank{
padding:3px;  
  border-radius:8px;
  margin:3px;
  padding-bottom:0;
  
}
.ruim_rank_box{
  background-repeat:repeat-x;
padding:10px;  
  border-radius:8px;
  min-height:85px;
}
.ruim_comments_comment{
font-size:10px;
background:#e5e5e3;
margin:5px;
padding:5px;
border-radius:3px;
}
.ruim_comments_name{
margin-left:0;padding-left:0;
color:#fff;
-webkit-text-stroke: 1px #000;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
 text-align: justify;
}
.ruim_comment_img {
padding:0;
margin:0px;
} 
.ruim_comment_img > img {
border-radius:5px;
width:100%;
}
.ruim_comments_container{
	border:1px solid #c8b8a4;
	box-shadow:0 0 2px #cfc3b0 inset;
	border-radius:5px;
	margin-top:40px;
}
textarea {
    border:1px solid #c8b8a4;
    border-radius: 5px;
    height: 100px;
    width: 100%;}
.ruim_rank_box  > img {
cursor:pointer;
    margin-top: 0px;
    width: 100%;
}
.ruim_rank_box  > img:active{
    padding:5px;
    width: 100%;
}
.ruim_comments_input{
margin-top:10px;
  border:1px solid #c8b8a4;
    border-radius: 5px;
}
.ruim_gen_btn{
cursor:pointer;
}
.ruim_rank_box > img{
max-width:100px;
}