/* File Created: januari 7, 2013 */



/*this is what we want the div to look like

    when it is not showing*/

div.loading-invisible

{

    /*make invisible*/

    display: none;

}



/*this is what we want the div to look like

    when it IS showing*/

div.loading-visible

{

    /*make visible*/

    display: block; /*position it 200px down the screen*/

    position: fixed;

    z-index:100;

    top: 50%;

    left: 0;

    width: 100%;

    height: 50px;

    padding: 40px 0 10px 0;

    font-size: 40px;

    text-align: center; /*in supporting browsers, make it a little transparent*/

    background: #fff;

    border-top: 1px solid #ddd;

    border-bottom: 1px solid #ddd;

    filter: alpha(opacity=75); /* internet explorer */

    -khtml-opacity: 0.75; /* khtml, old safari */

    -moz-opacity: 0.75; /* mozilla, netscape */

    opacity: 0.75; /* fx, safari, opera */

}

div.loadingBackground-visible

{

    display:block;

    position: fixed;

    z-index:99;

    top:0px;

    left:0px;

    width: 100%;

    height: 100%;

    background-color: lightgray;

    filter: alpha(opacity=50); /* internet explorer */

    -khtml-opacity: 0.50; /* khtml, old safari */

    -moz-opacity: 0.50; /* mozilla, netscape */

    opacity: 0.50; /* fx, safari, opera */

}

img.loadingImg

{

    margin-top:-20px;

    margin-left:10px;

}





/* Loading in container 2.0 */



/* Start by setting display:none to make this hidden.

   Then we position it in relation to the viewport window

   with position:fixed. Width, height, top and left speak

   speak for themselves. Background we set to 80% white with

   our animation centered, and no-repeating */

.loadings {

    display:    block;

    position:   absolute;

    z-index:    100;

    top:        0;

    left:       0;

    height:     100%;

    width:      100%;

    background: rgba(238, 238, 238, .5) 

                url('/images/loading_spinner.gif') 

                50% 50% 

                no-repeat;

}