/****************************************
  ==== RESETS
****************************************/

html, head, body,div,canvas { margin: 0; padding: 0; }
::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 0%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; background-color: #000000; }
.fullscreen { float: right; position: relative; z-index: 10; }

.large-button { background-color: #FFA41C; border-radius: 5px; border: 0px; font-size: 18pt; padding: 10px; cursor: pointer; }
.large-button:hover { background-color: #FFBB68; }
.large-button:disabled { background-color: #C8C8C8; color: #000000; cursor: default; }
button:focus { outline: 0; }

.button2 { background-color: #216DAB; color: #FFFFFF; border-radius: 5px; border: 0px; font-size: 12pt; padding: 6px; cursor: pointer; }
.button2:hover { background-color: #1A5789; }
.button2:disabled { background-color: #C8C8C8; color: #000000; cursor: default; }

.left { float: left; }
.right { float: right; }
.splash { background-image: url('../TemplateData/nebula.jpg'); background-size: cover; background-position: center; }
.clear { clear: both; }
.clear-fix { overflow: auto; }
a  { color: #DDDDDD; text-decoration: none;}
a:hover { color: #FFFFFF; }
.link-button { background-color: #216DAB; margin: 0 4px; border-radius: 3px; border: 0px; font-size: 9pt; padding: 3px 6px; color: white; text-decoration: none; cursor: pointer; }
.link-button:hover { background-color: #1A5789; }
.customize-button { padding: 4px; border-radius: 5px; position: absolute; -webkit-transform: translate(100%, 0%); transform: translate(100%, 0%); right: -14px; top: 0; }
.customize-button.new-unlocks { background-color: #FFA41C; }
input.new-unlocks:hover { background-color: #FFBB68; }
input.customize-button:disabled { background-color: #C8C8C8; cursor: default; }

#login { width: 625px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.title-image { height: 105px; margin: auto; display: block; }
#login p { text-align: center; margin: 10px 0;}
.input-wrapper { width: 300px; margin: auto; position: relative; margin-top: 0; margin-bottom: 0; }
#login input[type=text] { width: 400px; clear: both; font-size: 16pt; text-align: center; border: 0; border-radius: 5px; margin: auto; display: block; }
#login input[type=text]:focus { outline: none; }
#login input[type=submit] { width: 300px; margin: auto; display: block; margin-top: 20px; margin-bottom: 10px; }
#controls1 { height: 174px; margin: auto; display: block; }
#controls2 { height: 174px; margin: auto; display: block; }
#party-button { width: 300px; margin: auto; display: block; }
table { width: 100%; margin: 20px 0;}
table td.label { width: 50%; text-align: right; padding: 0 20px; }
table td.value { width: 50%; text-align: left; padding: 0 20px; }
#connection-message { text-align: center; margin-bottom: 20px; margin-top: 20px; }
.share { height: 25px; }
.connecting { color: #FFD454; }
.warning { color: #FFD454; }
.new-unlocks { color: #FFD454; }
.error { color: #FF0000; }
.fb-like { position: relative; top: -6px; }
#share-content { position: relative; }
#share-tip { position: absolute; top: -3px; -webkit-transform: translate(0%, -100%); transform: translate(0%, -100%); font-size: 9pt; color: #FFA41C}
#share-content #share-tip p { margin: 0; }
#share-content .link-button { float: right; margin: 0; margin-left: 4px; }
#twitter-widget-0 { margin-left: -2px; margin-right: -2px; }
#loading-tip { position: absolute; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); margin: 0; }
#loader { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#party { width: 480px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#party p { margin-bottom: 30px; margin-top: 0; }
#party .large-button { width: 300px; margin: auto; display: block; }

#respawn { width: 625px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#tip { margin-bottom: 30px; text-align: left; }
#respawn p { text-align: center; }
#death-message { font-size: 24pt; margin-top: 0px; margin-bottom: 30px; }
#respawn .large-button { position: relative; width: 300px; margin: auto; display: block; margin-top: 30px; margin-bottom: 30px; }
#kills { color: #00FF00; }
#deaths { color: #FF0000; }
table.tip { margin-bottom: 30px; }
td.tip { vertical-align: top; padding-right: 10px;}

#customization{ left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#customization p { margin-bottom: 20px; margin-top: 0; text-align: center; font-size: 24pt; }
#customization .ability { margin-top: 10px; margin-bottom: 10px; }
#customization .canvas-wrapper { margin: auto; display: block; margin-bottom: 10px; width: 256px; height: 256px; position: relative; }
#customization table td.label { padding: 0 5px; }
#customization table td.value { padding: 0 5px; }
.colour-picker { border-collapse: collapse; }
.colour-picker td { width: 20px; height: 20px; border: 1px solid black; position: relative; cursor: pointer; }
.colour-picker td div { position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; pointer-events: none; text-align: center; }
.colour-picker td.locked { pointer-events: none; }
.colour-picker td.locked div { background-color: #1A1A1A !important; background-image: url('../TemplateData/lock.png'); }
.colour-picker .selected { border: 2px solid #FFC638; position: absolute; top: -2px; left: -2px; width: 20px; height: 20px; pointer-events: none; }
.button-group { text-align: center; }
#customization .button2 { width: 150px; }
#customization .right-arrow { padding: 8px; position: absolute; -webkit-transform: translate(100%, -50%); transform: translate(100%, -50%); right: -10px; top: 50%; }
#customization .left-arrow { padding: 8px; position: absolute; -webkit-transform: translate(-100%, -50%) scaleX(-1); transform: translate(-100%, -50%) scaleX(-1); left: -10px; top: 50%; filter: FlipH; }

#sda { width: 480px; height: 480px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.popup { position: absolute; color: #FFFFFF; background-color: #080808; border: 1px solid white; padding: 50px; font-size: 16pt; }
.popup p { margin-top: 0px; }
.overlay { position: absolute; color: #FFFFFF; background-color: rgba(0, 0, 0, .8); border: 1px solid white; padding: 25px 25px 10px 25px; font-size: 16pt; }
.overlay-no-background { position: absolute; color: #FFFFFF; padding: 50px; font-size: 16pt; }
#sdaBlock { width: 100%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }

#browser-compatibility { width: 550px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#browser-logos { margin: auto; display: table; }
#browser-logos img { margin-left: 10px; margin-right: 10px; }
#continue-button { margin: auto; display: block; width: 300px; }
.close-button { position: absolute; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; }
.close-button:hover { border: 1px solid white; top: -1px; right: -1px; }

#footer { text-align: center; font-size: 10pt; color: #FFFFFF; margin-top: 10px; }

.text-input-wrapper { position: relative; }
#login .text-input-wrapper p { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #AAAAAA; margin: 0; pointer-events: none; }

.party { display: table; margin: auto; margin-bottom: 30px; }
.party-label { padding-right: 15px; display: table-cell; vertical-align: middle; }
.party-box { background-color: white; border-radius: 5px; display: table-cell; }
.party-box .button2 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.room-url { color: #000000; font-size: 12pt; margin: 6px 4px; border: 0; padding: 0; width: 200px; }
input[type=text]::selection { background: #75C5FF; }
input[type=text]::-moz-selection { background: #75C5FF; }

.adsbygoogle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(366px, -50%); transform: translate(366px, -50%); }
#IOG_CP { position: absolute; bottom: 0; left: -16px; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
#agLogo { position: absolute; bottom: 152px; left: -16px; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
#sponsor { position: absolute; bottom: -16px; left: 50%, translate(0, 100%); transform: translate(0, 100%); }

#webgl-content * {border: 0; margin: 0; padding: 0; overflow: hidden; }
#webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}