#@font-face {
#  font-family: 'OnryoFont';
#  font-style: normal;
#  font-weight: 400;
#  src: url(/fonts/onryo.ttf) format('truetype');
#}

@font-face {
  font-family: 'HakidameFont';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/hakidame.ttf) format('truetype');
}

#cool_upload, #avator_upload{
  position: relative;
  overflow: hidden;
  height: 18px;
  width: 24px;
}
#cool_upload_image, #avator_upload_image {
  position: absolute;
  top: 0;
  left: 0;
}
#cool_upload_form, #avator_upload_form {
  position: absolute;
  top: 0;
  right: 0;
  height: 18px;
  filter: alpha(opacity = 0); /* for IE6, IE7 */
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

img.img-shine-talk {
  height:100px;
}

/* Modal */
.center-modal { top: 20%; }
.font-modal {
  font-size: 14px;
  color: #111111;
  padding:0px;
  margin: 0;
}

/* Message */
.MessageCommonBox{
  position: relative;
}
.MessageBackImgImg{
  position: absolute;
  width: 100%;
  display:none;
}
.MessageCommonText {
  width: 100%;
  height: 100%;
  color: #800000;
  font-size:30px;
  font-weight:bold; 
  position: absolute;
  padding-top:20px;
  padding-left:10px;
  line-height:1.5;
  display:none;
  font-family: HakidameFont,Impact,Charcoal;
}
.MessageMiddleText{
  vertical-align:middle;
  height:300px;
  position:relative;
  top:50%;
}

.MessageInput{
display:block;
width:100%;
height:30px;
padding:3px 12px;
font-size:14px;
#line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
#border-radius:4px;
#-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
#box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
#-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
#-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
#transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
resize: none;
border-radius: 0px 0px 0px 0px;
}


/* Message Effect */
.MessageRotate span {
  display: inline-block;
  animation: rotate-anime 2s ease-in-out infinite;
}
@keyframes rotate-anime {
 100%{ transform: rotate(360deg) }
}

.pyonpyon span {
    animation: pyon 0.3s linear;
    position: relative;
}
@keyframes pyon {
    0% {top: 0}
    50% {top:-17px}
    100%{top: 0}
}

.random-op span {
    animation: randomOp 0.3s linear;
}
@keyframes randomOp {
    0% {opacity: 1}
    50% {opacity: 0}
    100%{opacity: 1}
}