@font-face {
  font-family: 'sans-serif';
  src: url('../fonts/sansserif/MicrosoftSansSerif.eot?#iefix') format('embedded-opentype'),  
      url('../fonts/sansserif/MicrosoftSansSerif.woff') format('woff'), 
      url('../fonts/sansserif/MicrosoftSansSerif.ttf')  format('truetype'), 
      url('../fonts/sansserif/MicrosoftSansSerif.svg#MicrosoftSansSerif') format('svg');
  font-weight: normal;
  font-style: normal;
}

    #main_cont {
            height: 650px;
            width: 900px;
            background-color: #dcdcdc;
            border: 1px solid;
            position: relative;
    }

    body {
        overflow: hidden;
        margin: 0px;
        font-family:'sans-serif';
        font-size: 15px;
    }

    #container {
        position: relative;
        width: 100%;
        background-color: #444444;
        height: 620px;
        top: 30px;
        overflow-x: hidden;
    }

    
    .head{
        background-color: #b2c8db;
        text-align: center
    }
   
    .addButton1 {
       padding: 3px 0px 3px 3px;
    border-radius: 2px;
    border: none;
    background-color: #999999;
    width: 124px;
    height: 21px;
    cursor: context-menu;
        border:1px solid #999999;
    }
.addButton {
       padding: 3px 0px 3px 3px;
    border-radius: 2px;
    border: none;
    background-color: #999999;
    width: 100px;
    height: 21px;
    cursor: context-menu;
        border:1px solid #999999;
    }
.alpha,.beta
{
     padding: 3px 0px 3px 3px;
    border-radius: 2px;
    border: none;
    background-color: #999999;
    width: 124px;
    height: 21px;
    cursor: context-menu;
        border:1px solid #999999;
    text-align: center;
}
.addButton1:hover,.addButton:hover,.alpha:hover,.beta:hover
{
    border:1px solid #34a0ff;
}
/*
.addButton1{
       padding: 3px 27px 3px 27px;
    border-radius: 2px;
    border: none;
    background-color: #999999;
   
    }
*/
.left{
    position: relative;
    left: 6%;
    border: 1px solid #FF9800;
    padding: 5px;
    width: 131px;
    float: left;
}

.image img{
       margin: 0 0 0 -49px;
}

.Scrollimage {
    position: relative;
    left: 385px;
    width: 21500px;
    float: left;
    top: -15px;
}

.imageLeft
{
    position: relative;
    left:-52px;
    
}


.elementBox {
    position: relative;
    left: 164px;
    background: url(../images/tooltip.png);
    background-repeat: no-repeat;
    width: 304px;
    height: 170px;
    float: left;
}

.atom {
    width: 100px;
    margin-left: 25px;
    float: left;
    margin-top: 85px;
}

.atom span {
    color: white;
    vertical-align: top;
    position: relative;
    font-weight: bold;
}

.elementname {
   position: absolute;
    top: 55px;
    width: 100%;
    color: white;
    font-size: 35px;
    text-align: center;
    text-shadow: 2px 2px #828282;
}

.atoms {
    position: absolute;
    top: 110px;
    left: 36px;
}

.proton,.neutron,.electron {
        display: inline-block;
    width: 85px;
    color: white;
    font-size: 28px;
    text-shadow: 4px 5px 4px #000000;
}
.proton span,.neutron span,.electron span {
      padding: 4px;
    top: -5px;
    position: relative;
        
}
.rightContainer {
    float: left;
    width: 279px;
    position: relative;
    left: 200px;
    z-index: 1;
    top: 62px;
    visibility:hidden;
}

.second {
    position: relative;
    top: -176px;
    left: 7px;
    width: 159px;
    height: 61px;
}

.bottomContainer {
    position: relative;
    top: -17px;
}

.first img{
    opacity: 0.5;
}

.right {
    position: absolute;
    left: 40%;
    height: 20px;
    width: 206px;
}

.correct,.incorrect {
    display: none;
    
}

.elementflow {
    width: 500px;
    position: absolute;
    float: right;
    left: 64%;
    display: none;
    height: 50px;
    top: 128px;
}

.firstelement,.secondelement,.arrow {
    color:#fff; font-size: 18px;
}





.third {
    position: relative;
    top: -176px;
    left: 63px;
    width: 100px;
    height: 61px;
}

.first
{
    width: 180px;
    height: 200px;
}
.third img 
{
    visibility: hidden;
}
.sliderimage
{
    display: inline-block;
    position: relative;
}
.highlighter {
    position: absolute;
    left: -53px;
    display: none;
    height: 265px;
    width: 115px;
    top: -4px;
}
.highlighter1 {
    position: absolute;
    left: -53px;
    display: block;
    height: 265px;
    width: 115px;
    top: -4px;
}