/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
/*body { font-family:Georgia,serif; font-size:13px; background: #1d1d1d; color: #fff; }*/
body { font-family:Georgia,serif; font-size:13px; background: wheat; color:black; }
h1 { margin: 0px 0 0 0; padding:15px; border-left-width:5px; border-left-color:cadetblue; border-left-style:solid; }
h1 small{ font-size: 10px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 { font-style:italic; font-size:13px; margin:10px 0 5px 30px; }
p { margin:10px 0; }
a { color:#eee; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:753px; margin:0 auto; }

/* JTYPINGHERO */
#jtypinghero { margin:0px 0; }
/*#jheroboard { width:650px; height:500px; float:left; background-color:#3B3F42; background-image:url("../images/bg.png");
              -moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; }*/
#jheroboard { width:650px; height:500px; float:left; background-color:cadetblue; background-image:url("../images/bg.png");
              -moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; 


}
#jherostats { width:98px; height:500px; margin-left:2px; float:left; border:1px solid cadetblue;
              -moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; text-align:center; }

#jherostart { cursor:pointer; }
.extrapadding { padding-top:50px; }

#jherocharcontainer { margin:450px 0 0 13px; }
#jherocharcontainer ul { list-style:none; }
#jherocharcontainer ul li { display:inline; width:24px; height:25px; float:left; background-image:url("../images/plain.png"); }

#droppingcharcontainer { margin-left:13px; }
.droppingchar { position:absolute; width:24px; height:25px; }
.droppingchar p { background-image:url("../images/neutral.png"); }

.orb { text-align:center; font-family:"Helvetica Neue",Arial,Helvetica,sans-serif; font-weight:bold; font-size:18px; text-shadow: #000 0 2px 0; color: #EEEEEE; }
.stats { text-align:center; display:none; }
.counter { font-size:30px; font-style:italic; font-weight:bold; }

.gameoverscreen { text-align:center; background-color:#818181; width:200px; height:300px; position:absolute; margin-left:250px; margin-top:100px; display:none;
                  -moz-box-shadow: 0 0 10px #adadad; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 10px #adadad; -webkit-border-radius: 5px; }
.gameoverscreen h2 { margin:0; }

/* INFO */
#info { margin-top:0px; }
.nolist { list-style:none; }



.black_overlay
            {
                display: none;
                position: fixed;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content 
            {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 50%;
                padding: 16px;
                border: 5px solid #e68f04;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
            
             #background{position:absolute; z-index:1; width:100%; height:100%;}
            #scroller
            {

                position:absolute;
                width:100%;
                height:100%;
                top:0;
                left:0;
                overflow:auto;
                z-index:2;
            }