html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td{margin: 0;padding: 0;}
html,body{height:100%;}
a,input{outline:0;}
a img{border:0;}
/* ************************************************************************** *\
* ********************************* Layout ********************************* *
\* ************************************************************************** */
body {
    background: #FFF;
    font: 62.5%/1.62 Helvetica, Arial, Sans-serif;
}

#stats{
    z-index:100;
}

#initialComposition,
#ultramafic,
#felsic,
#concentration,
#o,
#fe,
#h,
#si,
#ca,
#al,
#na,
#mg,
#k,
#coolingRate,
#slower,
#faster,
#simulationDuration,
#shorter,
#longer,
#pMagma,
#pOlivine,
#pPyroxene,
#pAmphibole,
#pBiotite,
#pPlagioclase,
#pKFeldspar,
#pMuscovite,
#pQuartz,
#lo,
#lfe,
#lh,
#lsi,
#lca,
#lal,
#lna,
#lmg,
#lk,
#lolivine,
#lpyroxene,
#lamphibole,
#lbiotite,
#lplagioclase,
#lkfeldspar,
#lmuscovite,
#lquartz{
    color: #FFF;
    font: 14px/1 'Consolas', 'Lucida Console', Monaco, Monospace;
    position: absolute;
}

#wrapper {
    border: 8px #000 solid;
    border-radius: 8px; -moz-border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#screen {
    background: #444;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

#stageWrapper {
    border: 3px #FFF solid;
    border-radius: 8px; -moz-border-radius: 4px;
    overflow: hidden;
    position: absolute;
}

#stage {
    background: #888;
    overflow: hidden;
}

#legend {
   width:500px;
   height:49px;
   background: url(images/legend.png) no-repeat;
   position:absolute;
}

#stats {
    background: #FFF;
    background: rgba(F,F,F,.1);
    bottom: 0;
    color: #000;
    font: 12px/1 'Consolas', 'Lucida Console', Monaco, Monospace;
    overflow: hidden;
    position: absolute;
    width: 100%;
}


#simulationTime,
#cooling,
#composition { 
    padding: 0px !important;
    width: 200px;
    position: absolute;
}

#sliderBack1,
#sliderBack2,
#sliderBack3{
    height: 22px;
    width: 214px;
    background: url(images/sliderBack.png);
    position: absolute;
    z-index: -1;
}

#oxygen,
#iron,
#hydrogen,
#silicone,
#calcium,
#aluminium,
#sodium,
#magnesium,
#potassium,
#magma,
#olivine,
#pyroxene,
#amphibole,
#biotite,
#plagioclase,
#kFeldspar,
#muscovite,
#quartz {
    background: #FFF;
    color: #000;
    background: url(images/textbox.png) no-repeat;
    font: 13px/1 'Consolas', 'Lucida Console', Monaco, Monospace;
    position: absolute;
    width: 41px;
    height: 22px;
    border: 0;
    padding: 5px 0px;
    text-align: center;
}

#simulationTimeDisplay,
#coolingRateDisplay {
    background: #FFF;
    color: #000;
    background: url(images/textbox2.png) no-repeat;
    font: 16px/1 'Consolas', 'Lucida Console', Monaco, Monospace;
    position: absolute;
    width: 130px;
    height: 22px;
    border: 0;
    padding: 2px 0px;
    text-align: center;
}

#player {
    position: relative;
}

#stage span.oxygen{
   width:12px;
   height:12px;
   background: url(images/O.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.iron{
   width:10px;
   height:10px;
   background: url(images/Fe.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.hydrogen{
   width:10px;
   height:10px;
   background: url(images/H.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.silicone{
   width:10px;
   height:10px;
   background: url(images/Si.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.calcium{
   width:10px;
   height:10px;
   background: url(images/Ca.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.aluminium{
   width:10px;
   height:10px;
   background: url(images/Al.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.sodium{
   width:10px;
   height:10px;
   background: url(images/Na.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.magnesium{
   width:10px;
   height:10px;
   background: url(images/Mg.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.potassium{
   width:12px;
   height:12px;
   background: url(images/K.png) no-repeat;
   position:absolute;
   z-index: 12;
}
.olivine1{
   width:49px;
   height:40px;
   background: url(images/olivine.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 9;
}
.olivine2{
   width:62px;
   height:50px;
   background: url(images/olivine.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 7;
}
.olivine3{
   width:74px;
   height:60px;
   background: url(images/olivine.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 5;
}
.olivine4{
   width:93px;
   height:75px;
   background: url(images/olivine.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 3;
}
.olivine5{
   width:111px;
   height:90px;
   background: url(images/olivine.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 1;
}
.amphibole1{
   width:48px;
   height:30px;
   background: url(images/amphibole.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 11;
}
.amphibole2{
   width:60px;
   height:37px;
   background: url(images/amphibole.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 9;
}
.amphibole3{
   width:72px;
   height:45px;
   background: url(images/amphibole.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 7;
}
.amphibole4{
   width:90px;
   height:57px;
   background: url(images/amphibole.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 5;
}
.amphibole5{
   width:108px;
   height:68px;
   background: url(images/amphibole.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 3;
}
.biotite1{
   width:49px;
   height:24px;
   background: url(images/biotite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 10;
}
.biotite2{
   width:62px;
   height:30px;
   background: url(images/biotite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 8;
}
.biotite3{
   width:74px;
   height:36px;
   background: url(images/biotite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 6;
}
.biotite4{
   width:92px;
   height:45px;
   background: url(images/biotite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 4;
}
.biotite5{
   width:111px;
   height:54px;
   background: url(images/biotite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 2;
}
.kfeldspar1{
   width:48px;
   height:36px;
   background: url(images/kfeldspar.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 11;
}
.kfeldspar2{
   width:60px;
   height:45px;
   background: url(images/kfeldspar.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 9;
}
.kfeldspar3{
   width:72px;
   height:54px;
   background: url(images/kfeldspar.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 7;
}
.kfeldspar4{
   width:90px;
   height:68px;
   background: url(images/kfeldspar.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 5;
}
.kfeldspar5{
   width:108px;
   height:81px;
   background: url(images/kfeldspar.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 3;
}
.quartz1{
   width:49px;
   height:40px;
   background: url(images/quartz.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 10;
}
.quartz2{
   width:62px;
   height:50px;
   background: url(images/quartz.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 8;
}
.quartz3{
   width:74px;
   height:60px;
   background: url(images/quartz.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 6;
}
.quartz4{
   width:93px;
   height:75px;
   background: url(images/quartz.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 4;
}
.quartz5{
   width:111px;
   height:90px;
   background: url(images/quartz.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 2;
}
.muscovite1{
   width:49px;
   height:24px;
   background: url(images/muscovite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 10;
}
.muscovite2{
   width:62px;
   height:30px;
   background: url(images/muscovite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 8;
}
.muscovite3{
   width:74px;
   height:36px;
   background: url(images/muscovite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 6;
}
.muscovite4{
   width:92px;
   height:45px;
   background: url(images/muscovite.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 4;
}
.muscovite5{
   width:111px;
   height:54px;
   background: url(images/muscovite.png) no-repeat;
   background-size: 100%;
   position:absolute; 
   z-index: 2;
}
.plagioclase1{
   width:48px;
   height:36px;
   background: url(images/plagioclase.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 11;
}
.plagioclase2{
   width:60px;
   height:45px;
   background: url(images/plagioclase.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 9;
}
.plagioclase3{
   width:72px;
   height:54px;
   background: url(images/plagioclase.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 7;
}
.plagioclase4{
   width:90px;
   height:68px;
   background: url(images/plagioclase.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 5;
}
.plagioclase5{
   width:108px;
   height:81px;
   background: url(images/plagioclase.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 3;
}
.pyroxene1{
   width:49px;
   height:40px;
   background: url(images/pyroxene.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 10;
}
.pyroxene2{
   width:62px;
   height:50px;
   background: url(images/pyroxene.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 8;
}
.pyroxene3{
   width:74px;
   height:60px;
   background: url(images/pyroxene.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 6;
}
.pyroxene4{
   width:93px;
   height:75px;
   background: url(images/pyroxene.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 4;
}
.pyroxene5{
   width:111px;
   height:90px;
   background: url(images/pyroxene.png) no-repeat;
   background-size: 100%;
   position:absolute;
   z-index: 2;
}