html,body {
    margin:0;
    height:100%;
    overflow:hidden;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
}

a:link, a:visited, a:hover, a:focus, a:active {
	text-decoration:none;
	border:0;
	color:#68909e;
}

#subcontainer {
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index: -1000;
}

video {
	height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}

img {
/*  
	min-height:100%;
    min-width:100%;
*/
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
    cursor:pointer;
}

#header_l {
    position: fixed;
    top: 35px;
    left: 15px;
}

#header_r {
    position: fixed;
    top: 30px;
    right: 30px;
}

#footer_l {
    position: fixed;
    bottom: 0px;
    left: 20px;
}

#footer_r {
    position: fixed;
    bottom: 0px;
    right: 20px;
}

/* 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 */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    background: rgba( 0, 0, 0, 1.0 ) 
                url('img/loading_bm.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}