#namebox {
 border: 1px solid;
 border-radius: 5px;
 margin-left: 5px;
}

#start {
 border: 1px solid;
 border-radius: 5px;
 background: #6b910d;
 color: white;
 margin-left: 5px;
}

#chatbox {
 position: absolute;
 border: 1px solid;
 border-radius: 5px;
 top: 0px;
 left: 10px;
 right: 10px;
 height: 200px;
 padding: 10px;
 margin-top: 10px;
 overflow-y: scroll;
 overflow-x: hidden;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

#textinput {
 position: relative;
 border: 1px solid;
 border-radius: 5px;
 top: 250px;
 left: 0px;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

p.received {
 position: relative;
 border: 1px solid;
 clear: both;
 float: right;
 padding: 5px;
 margin: 5px;
 border-radius: 5px;
 background: #6b910d;
 max-width: 75%;
 overflow: auto;
 font-size: 0.75em;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

span.received {
 font-size: 0.5em;
 color: #3f3f3f;
 float: right;
 margin-left: 20px;
}

p.sent {
 position: relative;
 border: 1px solid;
 clear: both;
 float: left;
 padding: 5px;
 margin: 5px;
 border-radius: 5px;
 background: #bfbfbf;
 max-width: 75%;
 overflow: auto;
 font-size: 0.75em;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

span.sent {
 font-size: 0.5em;
 color: #3f3f3f;
 float: right;
 margin-left: 20px;
}

p.warning {
 position: relative;
 border: 1px solid;
 padding: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 margin-bottom: 5px;
 clear: both;
 border-radius: 5px;
 background: #bf0000;
 overflow: auto;
 width: 75%;
 text-align: center;
 font-size: 0.75em;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

span.warning {
 font-size: 0.5em;
 color: #3f3f3f;
 float: right;
 margin-left: 20px;
}

p.file, div.upload {
 position: relative;
 border: 1px solid;
 padding: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 margin-bottom: 5px;
 clear: both;
 border-radius: 5px;
 background: #bfbf00;
 overflow: auto;
 width: 75%;
 text-align: center;
 font-size: 0.75em;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}

div.upload p {
 width: 100%;
}

span.file {
 font-size: 0.5em;
 color: #3f3f3f;
 float: right;
 margin-left: 20px;
}

p.yourmessage {
 position: absolute;
 top: 220px;
 left: 10px;
}

div.upload p {
 float: left;
}

div.progressdiv {
 position: relative;
 border: 1px solid black;
 height: 20px;
 width: 90%;
 top: 10px;
 background: white;
}

div.progressbar {
 border: 0px;
 margin: 0px;
 padding: 0px;
 width: 10%;
 height: 100%;
 left: 0px;
 top: 0px;
 background: #3f3fff;
}

div.menubutton {
 position: absolute;
 top: 20px;
 right: 30px;
 display: inline-block;
 border: 1px solid;
 border-radius: 5px;
 padding: 5px;
 cursor: pointer;
 z-index: 2;
 background: rgba(191,191,191,0.8);
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
 width: 27px;
 height: 30px;
 transition: 0.4s;
 overflow: hidden;
}

div.bar1, div.bar2, div.bar3 {
 position: relative;
 right: 1px;
 width: 25px;
 height: 5px;
 background-color: #333;
 margin: 4px 0 auto auto;
 transition: 0.4s;
}

div.menuopen div.bar1 {
 transform: rotate(-45deg) translate(-6px, 6px) ;
 cursor: pointer;
}

div.menuopen div.bar2 {
 opacity: 0;
 cursor: pointer;
}

div.menuopen div.bar3 {
 transform: rotate(45deg) translate(-6px, -6px) ;
 cursor: pointer;
}

div.menuopen {
 width: 200px;
 height: 110px;
 cursor: default;
}

ul.menulist li {
 display: none;
 position: relative;
 left: -38px;
 width: 180px;
 display: block;
 border: 1px solid;
 background: white;
 margin: 4px;
 padding: 4px;
 cursor: pointer;
 border-radius: 5px;
}

ul.menulist li:hover {
 background: #6b910d;
 color: white;
}

img.uploadicon {
 display: none;
}

div.blink {
 animation: blink 1s linear 0s 8 alternate;
}

@keyframes blink {
 from {background: rgba(191,191,191,0.8); }
 to {background: rgba(0,192,0,1);}
}