/* fs spa

innercont yellow
featdiv dashed red
col4 dashed red
col4feat dashed red
player green
player cyan
scrollcont pink
green

*/





@font-face 
{
font-family:minisystem;
src:url("style/minisystem.otf") format("opentype");
} 


*
{
box-sizing:border-box;
}

body
{
background:black;
color:white;

padding:0;
margin:0;

font-family:'Tahoma',sans-serif;
font-family:Helvetica;
/*font-weight:bold;*/
}

.innercont
{
width:90%;
margin:auto;
max-width:1000px;
border:0px solid yellow;
}


footer
{
background:#000020;
min-height:200px;
margin:auto;
max-width:1000px;
}




a
{
text-decoration:none;
color:white;
}







/* divs */
.next
{
display:inline-block;
border:0px solid green;
vertical-align:top;
}

.logininput
{

width:100%;
}

.center250
{
max-width:250px;
margin:auto;
}

.center300
{
max-width:300px;
margin:auto;
text-align:center;
}


.featdiv
{
display:inline-block;
width:49%;

height:auto;
background:white;
color:black;

vertical-align:top;

font-family:'Tahoma',sans-serif;

/*border:6px dashed red;*/
border-radius:7px;

margin-bottom:5px;
}

@media screen and (max-width:600px)
{
.featdiv
{
width:100%;
}
}







.featdivanim
{
width:100%;
height:auto;

display:inline-block;
color:white;




vertical-align:top;

font-family:'Tahoma',sans-serif;

/*border:6px dashed red;*/
border-radius:7px;


background:linear-gradient(90deg,red 50%,transparent 50%),linear-gradient(90deg,red 50%,transparent 50%),
linear-gradient(0deg,red 50%,transparent 50%),linear-gradient(0deg,red 50%,transparent 50%);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-size:15px 6px,15px 6px,6px 15px,6px 15px;

animation:border-dance 40s infinite linear;


}

@keyframes border-dance 
{
0% 
{
background-position:0 0,100% 100%,0 100%,100% 0;
}
100%
{
background-position:100% 0,0 100%,0 0,100% 100%;
}
}


.col4
{
color:white;
border:1px dashed red;
}

.col4feat
{
display:inline-block;
width:22%;
color:white;
border:6px dashed red;
}







.chatcapsule1
{
border:0px solid grey;
width:65%;

text-align:right;
float:left;
height:auto;
margin-bottom:5px;

color:black;
}

.chatcapsule2
{
border:0px solid grey;
width:65%;

text-align:right;
float:right;
height:auto;
margin-bottom:5px;

color:black;
}

.chat1
{

background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background:-moz-linear-gradient(#b8db29, #5a8f00);
background:-o-linear-gradient(#b8db29, #5a8f00);
background:linear-gradient(#b8db29, #5a8f00);
background:#5a8f00;
background:white; 
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
width:100%;

padding:6px;
/*float:left;*/
height:auto;

text-align:left;
}
.chat2
{

background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
background:#f3961c;
background:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;	
width:100%;

padding:6px;
/*float:right;*/
height:auto;

text-align:left;
}


#chatbox 
{

text-align:left;

margin-top:50px;

width:100%;
/*height:432px;*/

border:0px solid red;

overflow:auto; 
}



#str
{
background:dodgerblue;
}

#chatareanew
{
width:100%;
display:none;
border:2px solid red;
}

#chatwithnew
{
width:100%;
height:50px;

vertical-align:middle;
line-height:50px;
}

#chatboxnew
{
height:400px;
margin:auto;
width:100%;

border:0px solid cyan;
/*background:white;*/
overflow:auto;
}

#sendbarnew
{

width:100%;
height:auto;
}






.circle
{
border:1px solid white;
border-radius:50%;
width:50px;
height:50px;
}





.checkmark 
{
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem 
{
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}



.check
{
      content: '✔';
color:white;
      left:0; 
	  top: 2px;
      width: 50px; 
      height: 50px;
      text-align: center;
      border: 1px solid #fff;
background:white;
      border-radius: 50%;

    }






/* table */
table
{
width:100%;
border-collapse:collapse;
border:1px solid grey;
}

td
{
border:1px solid grey;
text-align:center;

}

th
{

}










/* player */
#player
{
display:none;
position:relative;
border:3px solid cyan;
}

@media screen and (max-width:600px)
{
#player
{
display:none;
}
}





#skyline
{
display:inline-block;
max-width:100%;

height:100px;
border:1px solid cyan;

}

@media only screen and (max-width:600px)
{
#skyline
{
display:none;
border:4px solid cyan;
}
}







/* menu */
#menu
{
display:flex;
width:100%;
background:red;
}

@media screen and (max-width:600px)
{
#menu
{
display:none;
}
}

.menuitem
{
display:inline-block;
background:red;
padding:7px;
text-align:center;
}

.menuitem:hover
{
transform:scale(1.2);
}













/* hiddenmenu */
#hiddenmenu
{
text-align:center;
display:none;
}











/* buttons */
.redbutton
{
display:inline-block;
background:red;
padding:12px;
text-align:center;
color:white;
border-radius:5px;
font-size:24px;
}

.greenbutton
{
display:inline-block;
background:green;
padding:8px;
text-align:center;
color:white;
border-radius:5px;
}

.purplebutton
{
display:inline-block;
background:purple;
padding:8px;
text-align:center;
color:white;
border-radius:5px;
}











/* input */
input[type=text]
{
padding:8px;
font-size:12px;

border:1px solid grey;
border-radius:5px;
}

@media screen and (max-width:600px)
{
input[type=text]
{
font-size:22px;
padding:10px;
}
}

input[type=password]
{
padding:8px;
font-size:12px;

border:3px solid white;
border-radius:5px;
}

@media screen and (max-width:600px)
{
input[type=password]
{
font-size:22px;
padding:10px;
}
}


select
{
padding:8px;
font-size:24px;

border:3px solid white;
border-radius:5px;
}

textarea
{
font-family:Helvetica;
border:1px solid grey;
border-radius:5px;
}






/* img */
#usericon
{
height:50px;
width:50px;
border-radius:50%;
object-fit:cover;
}


#proicon
{
height:80px;
width:80px;
border-radius:50%;
}

.redicon
{
color:red;
font-size:20px;
}


.proimgdiv
{
height:100px;
width:100px;
display:inline-block;
}

.proimg
{
height:100px;
width:100px;
object-fit:cover;
}

.ofc
{
object-fit:cover;
width:100px;
height:100px;
}









/* clear */
.clear
{
clear:both;
}















/* scrollcont */
.scrollcont
{

border:1px solid pink;
font-family:minisystem;

overflow:hidden;

background:linear-gradient(0deg,#111,#222);
box-shadow: 
0px 0px 2px 0px #aaa inset,
0px -1px 2px 0px #aaa inset,
2px -5px 5px 0px #111 inset,
0px -5px 5px 0px #111 inset,
2px 5px 5px 0px #111;
}

#scrolltext
{
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);

-moz-animation:my-animation 30s linear infinite;
-webkit-animation:my-animation 30s linear infinite;
animation:my-animation 30s linear infinite;

animation-timing-function: steps(60, end);
}

/* for Firefox */
@-moz-keyframes my-animation 
{
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation 
{
from {-webkit-transform: translateX(100%); }
to {-webkit-transform: translateX(-100%); }
}

@keyframes my-animation
{
from 
{
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
}
to
{
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
}













/* uploading */
#uploading
{
position: fixed;
z-index:3;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
background:#000000;
color:#ffffff;
padding:10px;
}

#uploadingmask
{
position:fixed;
z-index:2;
width:100%; 
height:100%; 
top:0; 
left:0;
right: 0;
bottom: 0;

background:rgba(0,0,0,0.6);
}











/* glow */
.glow
{
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow 
{
from
{
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to
{
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}





.currencyinput 
{
border:1px inset #ccc;
}

.currencyinput input
{
border:0;
}








/* text */
.w
{
color:white;
}

.detail
{
color:grey;
font-size:0.7vw
}

.red
{
color:red;
}

.green
{
color:green;
}

.ftit
{
font-size:32px;
}


h3
{
display:inline-block;
}