*{
    margin:             0;
    padding:            0;
    border:             none;
    text-decoration:    none;
    list-style: 				none;
    }

a{
    outline:            none;
    }

html{
    height:             100%;
    }

body{
    position:           relative;
    min-width:          900px;
    height:             100%;
    min-height:         730px;
    color:              #000;
    background-color:   #000;
    font-family:        'atrament-web-1', 'atrament-web-2', sans-serif;
    line-height:        1;
    text-align:         center;
    -webkit-text-stroke:1px transparent;
    }

#stage{
    position:           absolute;
    top:                50%;
    left:               50%;
    margin:             -300px -450px;
    width:              900px;
    height:             600px;
    border:             1px solid #CCC;
    background-color:   #FFF;
    overflow:           visible;
    }

.screen{
	  display: 						none;
    position: 					absolute;
    width: 							100%;
    height: 						100%;
	  }

.screen.active{
	  display: 						block;
	  }

a.nav{
    position:           absolute;
    top:                -24px;
    left:               4px;
    color:              #FFF;
    }



/* MICROSCOPE SELECTOR */
.microscope_selector{
    overflow:           hidden;
    background:         #465054 url(images/microscope_selector_background.png) 0 100% no-repeat;
    }
    
.microscope_selector a{
    display:            block;
    position:           absolute;
    top:                0;
    width:              300px;
    text-indent:        -9999px;
    }

.microscope_selector a img{
    margin:             0;
    }

.microscope_selector a img{
    position:           absolute;
    left:               0;
    }

#microscope_optical{
    z-index:            3;
    top:                200px;
    left:               0;
    height:             360px
    }

#microscope_optical img{
    top:                10px;
    }

#microscope_electron{
    z-index:            2;
    top:                60px;
    left:               300px;
    height:             460px
    }

#microscope_electron img{
    top:                10px;
    left:               -175px;
    }

#microscope_atomic_force{
    z-index:            1;
    top:                135px;
    left:               600px;
    height:             262px
    }

#microscope_atomic_force img{
    top:                10px;
    left:               -150px;
    }



/* SAMPLE SELECTORS */
.sample_selector{
    background:         #465054 url(images/sample_selector_background.png) 0 0 no-repeat;
    }

.sample_selector ul{
    position: 					absolute;
    width: 							100%;
    height: 						100%;
    overflow:           hidden;
    font-size:          0;    
    }

.sample_selector ul li{
    display:            block;
    position:           relative;
    float:              left;
    width:              180px;
    height:             180px;
    cursor:             pointer;
    }

.sample_selector ul img{
    width:              180px;
    height:             180px;
    }

.sample_selector ul div{
    position: 					absolute;
    width: 							100%;
    height: 						100%;
    background:         transparent url(images/sample_selector_mask.png) 0 0 no-repeat;
    }

.sample_selector .caption{
    position:           absolute;
    bottom:             0;
    left:               0;
    width:              100%;
    height:             56px;
    color:              #FFF;
    white-space:        pre;
    text-align:         center;
    font-size:          20px;
    line-height:        26px;
    }



/* SAMPLE VIEWERS */
.sample_viewer .sample{
    position:           absolute;
    top:                10px;
    left:               13px;
    width:              577px;
    height:             577px;
    overflow:           hidden;
    background-color:   #000;
    }

.sample_viewer .sample img{
    z-index:            1;
    position:           absolute;
    top:                0;
    left:               0;
    }

.sample_viewer img.mask{
    position:           absolute;
    z-index:            2;
    top:                0;
    left:               0;
    }

.sample_viewer .controls{
    position:           absolute;
    z-index:            3;
    }

.sample_viewer .pan_control{
    position:           absolute;
    top:                4px;
    margin-left:        672px;
    width:              161px;
    height:             164px;
    }

.sample_viewer .pan_control .knob{
    position:           absolute;
    top:                51px;
    left:               51px;
    width:              60px;
    height:             61px;
    background:         transparent url(images/pan_knob.png) 0 0 no-repeat;
    }

#stage .slider{
    position:           absolute;
    left:               637px;
    width:              219px;
    height:             14px;
    border:             none;
    background:         transparent;
    }

#stage .slider .ui-slider-handle{
    top:                -16px;
    margin-left:        -14px;
    width:              42px;
    height:             42px;
    border:             none;
    background:         transparent url(images/slider_knob.png) 0 0 no-repeat;
    }

#stage .slider .ui-state-active{
    cursor:             none;
    }

#stage .zoom_slider{
    top:                198px;
    }

#stage .contrast_slider{
    top:                258px;
    }

.sample_viewer .info{
    position:           absolute;
    z-index:            4;
    top:                320px;
    left:               620px;
    width:              260px;
    height:             260px;
    color:              #FFF;
    white-space:        pre-line;
    text-align:         left;
    font-size:          18px;
    line-height:        21px;
    }