html {
 background:white;
 width:100%;
 height:100%;
 font-family:calibri;
 font-size:100%;
 color:black;
 overflow-x:hidden;
 overflow-y:auto;
}

/* Paul Irish and Chris Coyier recommend the "inherited" usage below:
   apply a natural box layout model to all elements, but allowing components to change
*/
html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}   

body {
 width:100%;
 height:100%;
 margin:0;
 padding:0;  
}

#work_area {
 position:fixed;
 top:6%; 
 width:100%;
 height:94%;
 overflow:hidden;
 overflow-y:auto;
 caret-color:transparent;
 bottom:0%;
}  

#local_page_sub_title {
 position:fixed;
 top:6%;
 right:1%; 
 width:99%;
 height:1.2em;
 font-size:1em;
 text-align:right;
 display:none;
}

.external_pages_class, .external_pages_class_z_index {
 position:fixed;
 top:6%;
 top:5%;
 bottom:0%;
 width:100%;
 height:95%;
 overflow-x:hidden;
 overflow-y:auto;
 display:none;	
 padding:0; 
 -webkit-overflow-scrolling:touch;  
}   

.external_pages_class_z_index {
 position:absolute;
 z-index:1000;
}

#red_x_exit_button {
 position:fixed;
 top:0%; 
 width:100%;
 height:30px; 
}

.red_x_exit_button_img {
 float:right;
 width:18px;
 height:22px;
 display:block;
 margin-right:1%;
 cursor:pointer;
 border:0;
 }

.iframe_class {
  float:left;
  width:100%;
  height:100%;
  border-width:0px;
}

.my_data, .my_left_half_data, .my_right_half_data, .quater_data {
 float:left;	 
 width:99%;
 height:18px;
 text-align:left;
 font-size:1.1em;
 margin-left:1%;
 font-weight:normal;
 cursor:default;
}

.my_left_half_data {
 width:45%; 
}

.my_right_half_data {
 float:right;
 width:45%;
 margin-left:0%; 
 margin-right:1%; 
}	

.quater_data {
 width:20%;
}