/*
THIS SET USES ELASTIC BOX MODEL & PROPORTIONAL FALL BACK
WITH OR WITHOUT WITH JS WORK AROUND
*/

/* layout */

html
{
padding: 0px;
margin: 0px;
border: 0px;
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
}

body
{
padding: 0px;
margin: 0px;
border: 0px;
height: 100%;
width: 100%;
background: none #ffffff;
font-family: arial, verdana, sans-serif;
font-size: x-small;
font-weight: bolder;
color: #000000;
overflow: hidden;
}

.frame /* Added for JS workaround? */
{position: absolute;}


/* single left panel */
#left
{
position: absolute;
top: 0;
left: 0;
width: 26%;
height: 100%;
background: none #000080;
padding: 0;
margin: 0;
z-index: 2;
overflow: visible;
}

body>#left
{
width: 201px;
bottom: 0;
height: auto;
}


/* TWO SEPERATE LEFT PANELS - NOT USED */
#lefttop
{
position: absolute;
top: 0;
left: 0;
width: 201px;
height:70px;
background: none #000080;
padding: 0;
margin: 0;
z-index: 2;
overflow: hidden;
}

#leftbottom
{
position: absolute;
top: 70px;
left: 0;
bottom: 0px;
width: 201px;
height:auto;
background: none #000080;
padding: 0;
margin: 0;
z-index: 2;
overflow: visible;
}

/* TWO SEPARATE TOP BARS */

#topbanner
{
background: none #000080;
height: 9%;
position: absolute;
top: 0;
left: 26%;
width: 74%;
overflow: hidden;
padding: 0 0px 0 0px; 
margin: 0;
clear: both;
}

body>#topbanner
{
top: 0;
left: 201px;
right: 0px;
width: auto;
height: 40px;
}

#here
{
background: none #000080;
position: absolute;
left: 26%;
width: 74%;
top: 9%;
height: 9%;
overflow: hidden;
margin: 0;
padding: 0;
}

body>#here
{
left: 201px;
right: 0px;
width: auto;
top: 40px;
height: 40px;
}

/* TWO TOP BAR ENDS */

/* SINGLE COMBO TOP BAR */

#topcombo
{
background: none #000080;
height: 18%;
position: absolute;
top: 0%;
left: 26%;
width: 74%;
overflow: hidden;
padding: 0 0px 0 0px; /* NO NEED to add 17px to left padding since NO vertical scrollbar of IE */
margin: 0;
}


body>#topcombo
{
top: 0;
left: 201px;
right: 0px;
width: auto;
height: 80px;
}


#content
{
background: none #c7ffee;
position: absolute;
top:18%;
height: 82%;
left: 26%;
width: 46%; /* was 53% */
bottom: 0px;
overflow: auto;
margin: 0;
padding: 0;
}


body>#content
{
position: absolute;
top: 80px;
bottom: 0px;
height: auto;
left: 201px;
right: 210px; /* was 190px */
bottom: 0px;
width: auto;
}



/* 

use aux as stand-alone, not as container due to positioning inside
otherwise use #zmenu & #etc
*/


#aux
{
position: absolute;
top: 18%;
right: 0px;
width: 28%; /* was 21% */
height: 82%;
background: none #6ca6cd;
overflow: hidden;
}


body>#aux
{
top: 80px;
width: 210px; /* was 190px */
overflow: hidden;
bottom: 0px;
height: auto;
right: 0px;
}


/* to be used for zmenu with right aux panel below */

#zmenu
{
position: absolute;
top: 18%;
right: 0px;
height: 10%;
width: 28%; /* was 21% */
background: none #617a9c;
clear: both;
overflow: hidden;
padding: 0;
margin: 0;
}

body>#zmenu
{
top: 80px;
height: 40px;
width: 210px; /* was 190px */
right: 0px;
}


#etc
{
background: none #6ca6cd;
position: absolute;
top: 28%;
right: 0px;
height: 72%;
width: 28%; /* was 21% */
overflow: auto;
padding: 0 0px 0 0px; 
margin: 0;
clear: both;
}

body>#etc
{
position: absolute;
top: 120px; 
bottom: 0px;
height: auto;
width: 210px; /* was 190px */
}


/* iframe inside #etc */
#insert
{
background: none #6ca6cd;
height: 100%;
width: 100%;
overflow: auto;
padding: 0 0px 0 0px;
margin: 0;
clear: both;
}

body>#etc>#insert
{
background: none #6ca6cd;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 210px; /* was 190px */
overflow: auto;
padding: 0 0px 0 0px;
margin: 0;
clear: both;
}