/* Controls the width of the blue area containing the animitor control icons */
.animation_control_panel {	
        float: left;
        width: 800px;
        margin: 0px, 20px;
	color:	#3300CC;
	background:	#9FC1FF;
        border: 2px solid white; border-width: thin;
        padding-bottom: 0px;
}

.panel_item{
    text-align:center;
    font-size: .75em;
    float: left;
    border-right: 2px solid white; border-width: thin;
    padding-right: 1px;
    margin-right: 1px;
}

/*

button_panel{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display:inline;
}

frame_slider_panel{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    display:inline;
}
*/


.frame_slider{
}

.slider_item{
    float: left;
    padding: .2em;
}

#slider{
    display:inline;
}
.slider_cell{
    float: left;
    padding-top: .1em;
}

/* This is the area where the image is located */
.animation_screen{
    float: left;
    margin-top: 1em;
    height: auto;
/*    width: 80%; width calculated dynamically in Animator.pm*/
    margin: 2px, auto;
/*    overflow: auto;*/
    margin-top: .2em;
    border: 2px solid white; border-width: thin; 
}

/# not being used */
.anim_button_row_OBE{
    float: left;
    width: 700px;
    margin-right: 100px;
    border: 2px solid red; border-width: thin;
    display:inline;
    padding: 1em;
}

.anim_select_button_row{
    float: left;
    width:800px;
    height: 1.2em;
    display:inline;
    padding: .2em;
    margin-top: 1em;
    margin-bottom: .3em; 
    margin-right:auto;
    
    /*border: 2px solid red; border-width: thin; */
}

.anim_button{
    float: left;
}

.anim_form{

   float: center; 

/*    position: absolute;
    top: 200px;
    left: 150px;
                */

    background:#9FC1FF;
    color: #3300CC;
    font-size: .75em;

  /*  position: absolute;
    top: 100px;
    left: 130px; */

    width:700px;
    margin 1px auto;

    height:auto;
    margin-top: 2em;
    padding-top: .5em;
    padding-left: 1em;
    padding-bottom: 1em;
    z-index: 50;
    text-align: left;

    border: 2px solid white; border-width: thin;
}

.anim_form_filler{
   float: left;
    width:600px;
    height:720px;
    /*border: 2px solid yellow; border-width: thin;*/
}

/* THIS is the one that controls the location of the animation control panel */
.display_animator{
   /* float: left;*/
    position: absolute;
    top: 150px;
    left: 2px;*/
   /* margin-left:.5em;*/
 
    /*overflow:auto; */
    /*border: 2px dashed red; border-width: thin; */
}

/* Pushes down the navigation buttons
.display_animator_filler{
    float: left;
     border: 2px dashed white; border-width: thin;  
}

.anim_security{
    float: left;
    border: 2px dashed white; border-width: thin;
}