html{
                background-color:#dddddd;
                font-family: "Square721 BT";
}
@font-face {
                font-family: "LCD AT&T Phone Time/Date";
                src: url('fonts/LCDAT&TPhoneTimeDate.ttf');
                url('fonts/LCDAT&TPhoneTimeDate.ttf'); /* IE */

                src: url('fonts/LCDAT&TPhoneTimeDate.eot'); /* IE9 Compat Modes */
                src: url('fonts/LCDAT&TPhoneTimeDate.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/LCDAT&TPhoneTimeDate.woff2') format('woff2'), /* Super Modern Browsers */
                url('fonts/LCDAT&TPhoneTimeDate.woff') format('woff'), /* Pretty Modern Browsers */
                url('fonts/LCDAT&TPhoneTimeDate.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('fonts/LCDAT&TPhoneTimeDate.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
                font-family: 'Square721 BT';
                src: url('fonts/square721-bt-roman.eot'); /* IE9 Compat Modes */
                src: url('fonts/square721-bt-roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/square721-bt-roman.woff2') format('woff2'), /* Super Modern Browsers */
                url('fonts/square721-bt-roman.woff') format('woff'), /* Pretty Modern Browsers */
                url('fonts/square721-bt-roman.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('fonts/square721-bt-roman.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
                font-family: 'ca';
                src: url('fonts/ca.ttf');
                url('fonts/ca.ttf'); /* IE */
                src: url('fonts/ca.eot'); /* IE9 Compat Modes */
                src: url('fonts/ca.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/ca.woff2') format('woff2'), /* Super Modern Browsers */
                url('fonts/ca.woff') format('woff'), /* Pretty Modern Browsers */
                url('fonts/ca.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('fonts/ca.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body{
                font-family: "Square721 BT";
}
input[type="checkbox"]{
  width: 12px; /*Desired width*/
  height: 12px; /*Desired height*/
  margin-left:12px;
  margin-top:12px;
}
#logo{
                position:absolute;
                top:1px;
                left:100px;
                height:45px;
                margin-bottom:-5px;
}
#logo img{
                height:43px;
}
#topnav{
                width:1500px;
                height:35px;
                border-bottom:1px solid white;
}
#navmenu{
                margin-left:360px;
}
.nav_button_background{
                margin-top:-3px;
                margin-right:7px;
                float:left;
                height:32px;
}
.navbutton{
                background-image:url(../images/chrome_button_frame.png);
                background-repeat:no-repeat;
                height:29px;
                width:170px;
                padding-top:9px;
                text-align:center;
}
.navbutton a{
                text-decoration:none;
                font-size:93%;
                color:#222;
                display:block;
}
.button_off{
                background-color:#222;
}
.button_off a{
                color:#eee;
}
.button_off a:hover{
                color:#FE9A2E;
}
.button_on{
                background-color:#FE9A2E;
                background-image:url(../indicator_bits/bg_shadow.png);
                background-position:-12px -12px;
                cursor:default;
}
#controlpanel{
                position:absolute;
                //margin-top:21px;
                top:354px;
                left:7px;
                width:370px;
                background-color:#dddddd;
                float:left;
        }
#display{
                float:left;
                width:700px;
                background-color:#dddddd;
                height:600px;
        }
#canvas{        position:absolute;
                left:370px;
                top:50px;
                width:700px;
                height:500px;
                background-color:#222222;
                border-radius:5px;
        }

#score{
                font-family: "LCD AT&T Phone Time/Date";
                color:#2EFE2E;
                font-size:300%;
                position:absolute;
                top:60px;
                left:380px;
                z-index:3;
        }

#buttons{       position:absolute;
                left:950px;
                top:45px;
                z-index:3;
        }
button {
                height:100px;
                width:110px;
                margin-top:20px;
                margin-bottom:10px;
                background-color: Transparent;
                background-repeat:no-repeat;
                border: none;
                cursor:pointer;
                overflow: hidden;
                outline:none;
        }
button img{
                height:100px;
                width:100px;
    }
#stability_indicator{
                margin-top:1px;
                cursor:default;
    }
#slider_info{
                position:absolute;
                top:50px;
                left:13px;
                height:279px;
                width:335px;
                background-color:#222222;
                margin-bottom:10px;
                border-radius:5px;
                font-family: Courier New,Courier,"Courier 10 Pitch",Lucida Sans Typewriter,Lucida Typewriter,monospace;
                color:#2EFE2E;
                padding:5px;
}
.acknowledge{
                color:#2EFE2E;
                border: 1px solid #2EFE2E;
                width:150px;
                height:40px;
                margin-left:auto;
                margin-right:auto;
                font-family: Courier New,Courier,"Courier 10 Pitch",Lucida Sans Typewriter,Lucida Typewriter,monospace;
                
}

#info{          position:absolute;
                left:370px;
                top:570px;
                width:700px;
                height:164px;
                background-color:#222222;
                margin-bottom:10px;
                border-radius:5px;
                
        }
.thumbnail{
                height:150px;
                width:150px;
                margin:7px;
                background-color:#eee;
                border-radius:4px;
                float:left;
        }
.atomic_number{
                padding:15px;
                padding-left:20px;
                font-size:120%;
                cursor:help;
        }
.abbrev{
                font-size:400%;
                text-align:center;
                margin-top:-30px;
                cursor:help;
        }
.element_name{
                width:100%;
                text-align:center;
                cursor:help;
        }
.mass{
                font-size:80%;
                text-align:center;
                cursor:help;
        }
#blurb{
                width:519px;
                height:140px;
                margin-top:7px;
                margin-left:0;
                padding:5px;
                border-radius:4px;
                background-color:#eee;
                float:left;
                font-size:90%;
        }
.dragme{
                position:relative;
                cursor: ew-resize;
        }
.indicator{
                margin-left:175px;
                width:173px;
        }
.indicator img{
                width:173px;
        }
.indicatorelement{
                margin-top:-42px;
        }
.indicatortext{
                height:26px;
                padding:5px;
                padding-top:10px;
                padding-bottom:4px;
                overflow:hidden;
                font-size:80%;
        }
.indicatortext img{
                position:relative;
                z-index:1;
        }
.indicatorframe{
                position:relative;
                z-index:2;
        }
.indicatorbuttonouter{
        }
.indicatorbuttonwrapper{
                width:22px;
                float:right;
        }
.indicatorbutton{
                position:relative;
                height:20px;
                width:20px;
                cursor:pointer;
                z-index:3;
                pointer-events:none;
        }
.slider{
                margin-top:50px;
                width:350px;
        }
.sliderelement{
                margin-top:-44px;
                width:350px;
        }
.sliderelement img{
                width:350px;
        }
.sliderinner{
                margin-top:-44px;
                width:0px;
                overflow:hidden;
        }
.sliderbg{
                width:0px;
                overflow:hidden;
        }
#quiz{
                position:absolute;
                z-index:-1;
                display:none;
                height:100%;
                width:100%;
                text-align:center;
                background:url(../images/transparent_grey.png);
                margin-top:-10px;
                margin-left:-10px;
}
#quizcontents{
                margin-left:auto;
                margin-right:auto;
                text-align:left;
                width:900px;
                min-height:500px;
                margin-top:50px;
                margin-bottom:50px;
                background-color:#222222;
                padding:10px;
                border-radius:5px;
}
#end_quiz{
                font-family: "LCD AT&T Phone Time/Date";
                color:#2EFE2E;
		font-size:200%;
}
#submitQuiz{
                color:#222222;
                background-color:#2EFE2E;
                margin:0;
                margin-top:-3px;
                padding:2px;
                height:20px;
                border-radius:2px;
		cursor:pointer;
		text-align:center;
}
.wrapper{
                width:880px;
                background-color:#fff;
                padding:10px;
                margin-bottom:3px;
                border-radius:5px;             
}
.answer{
                width:285px;
                border-collapse:separate;
                border-spacing:10px;
                padding:4px;
                display:table-cell;
                vertical-align:top;
                color:#fff;
                border:2px solid #fff;
                background-color:#444;
                border-radius:6px;
                height:100%;
                font-size:90%;
}
.answerwrapper{
}
.answerText{
                width:255px;
                float:left;
}
.answerRadio{
                float:right;
}
.answerTextInput{
                position:relative;
                z-index:50;
                disabled:false;
}
.go{
                color:#222222;
                background-color:#2EFE2E;
                margin:0;
                margin-top:-3px;
                padding:0;
                height:20px;
                width:40px;
                border-radius:2px;
}
#rightWrapper{
                position:absolute;
                left:1080px;
                top:50px;                
}
#highScoreWrapper{
                font-family: Cosmic Alien,ca;
                color:#2EFE2E;
                background-color:#222222;
                width:192px;
                padding:4px;
                border-radius:5px;
}
#highScoreHeader{
                font-size:22px;
                text-align:center;
                width:192px;
}
#highScoreUnitWrapper{
                font-size:12px;              
}
.scoreUnit{
                float:left;
}
.rank{
                width:55px;
                text-align:center;
    }
.initials{
                width:56px;
                text-align:left;
    }
.highScore{
                width:80px;
                text-align:right;
}
.start_quiz{
                font-family: Cosmic Alien, ca;
                color:#2EFE2E;
                background-color:#222222;
                text-align:center;
                width:200px;
                padding:4px;
                border-radius:5px;
                font-size:22px;
}
.bondOption{
                width:100%;
                text-align:center;
                margin-top:55px;
                cursor:pointer;
}
#startGame{
                color:#2EFE2E;
                width:200px;
                padding:50px;
                height:35px;
                font-size:150%;
                margin-top:100px;
                margin-left:auto;
                margin-right:auto;
                border:1px solid #2EFE2E;
                cursor:pointer;
                text-align:center;
}   
/*CREDITS*/
#creditButton{
}
.creditButton{
        font-family: Cosmic Alien, ca;
        color:#2EFE2E;
        background-color:#222222;
        text-align:center;
        width:192px;
        padding:4px;
        border-radius:5px;
        font-size:22px;
        cursor:pointer;
        position: absolute;
        top:692px;
        left:1080px;
}
p#start
{
	position: relative;
	width: 700px;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color:#2EFE2E;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

h1
{
	position: absolute;
	width: 2.6em;
	left: 50%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color:#2EFE2E;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
        position:absolute;
        left:370px;
        top:-180px;
        width:700px;
        height:630px;
        border-radius:5px;
        color:#2EFE2E;
	text-align: center;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(20deg);
	-moz-transform: perspective(300px) rotateX(20deg);
	-ms-transform: perspective(300px) rotateX(20deg);
	-o-transform: perspective(300px) rotateX(20deg);
	transform: perspective(300px) rotateX(20deg);
}

#titles:after
{
	position: absolute;
        text-align: center;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

#titles p
{
	text-align: center;
	margin: 0.8em 0;
}

#titles p.center
{
	text-align: center;
}

#titles a
{
	color: #2EFE2E;
	text-decoration: underline;
}

#titlecontent
{
	position: absolute;
	top: 100%;
        width:700px;
        font-size:150%;
	-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
/*SPLASH SCREEN*/
#splashlogo{
}
#splashlogo img{
        width:600px;
}
#splashwrapper{
        text-align:center;
}
#splashinner{
        width:600px;
        margin-left:auto;
        margin-right:auto;
}
.splashbutton{
        float:left;
        margin-right:40px;
        margin-left:40px;
        margin-top:30px;
        height:220px;
        width:220px;
}
#splash_nr{
        background-color:rgba(255,255,0,0.5);        
}
#splash_en{
        background-color:rgba(249,153,29,0.5);        
}
#splash_pl{
        background-color:rgba(46,254,46,0.5);       
}
#splash_fb{
        background-color:rgba(202,7,209,0.5);       
}