Default layout template

Layout templates control the overall appearance of interview pages. The default layout template is designed to eliminate fixed widths and provides the fluidity required for adaptation to any browser window size. The template utilizes various CSS style sheets in order to ensure specific content behavior in relation to the specific web browser (re-size in relation to the browser window size, prevent zooming, use media queries, and so on).

body, html {width:100%;height:100%;line-height:1.5;margin:0;padding:0;font-family:sans-serif;overflow:hidden}
.content, .branding, .nav {padding:0;margin:0;font-size:90%}
.content {width:75%;height:100%;display:block;position:absolute;left:25%;overflow:auto}
form {margin:0;padding:0;height:100%;width:100%;position:relative;}
.questionArea {position:relative;top:0;left:0;margin:0;padding:0 1em 0 1em;}
.nav {direction:rtl;position:relative;margin:1em;height:2em;display:block;right:0}
.branding {width:25%;height:100%;background-color:#ecf0f4;display:block;position:absolute;border-left:1px solid #009;border-right:
1px solid #009}
.vertical-floater {position:absolute;padding:0;width:100%;top:50%;margin:-32px 0 0 0}
.branding-element {display:block;margin:auto;padding:0 .75em;text-align:center}

.mrBannerText {font-weight: bold;}
.mrEdit, .mrDropDown, .mrListBox, .mrQuestionText, .mrSingleText {}
.mrErrorText {font-weight: bold; color:#b10000;}

@charset "utf-8";
body, html {font-size:90%}
.branding {width:100%;position:relative;height:2em;border-left:none;border-right:none;border-bottom:1px solid #009;z-index:2}
.vertical-floater {text-align:left;margin:0;padding:0;height:2em;position:relative;top:0;left:0}
.branding-element {display:inline;padding:0;margin:0;vertical-align:middle;}
img.branding-element {height:98%;margin:0 .5em;}
.content {width:100%;position:absolute;left:0;top:0;height:100%;margin:0;padding:0;}
form {width:100%;height:100%;margin:0;padding:0;position:relative}
.questionArea {position:absolute;top:2.1em;bottom:2.2em;overflow:auto;left:0;right:0;padding:0 0 0 .5em;margin:0 }
.nav {position:absolute;padding:0;margin:0;bottom:0;left:0;height:2.2em;width:100%;background-color:#ecf0f4;text-align:center;
display:block}
.mrNext, .mrPrev, .mrStop, .mrGoTo {padding:0;margin:.1em;background-color:transparent;text-align:center;font-size:100%;height:2em;
border:none;background-color:#fff;width:80px}

@charset "utf-8";
body, html {font-size:100%}
@media screen and (min-width:1001px) {
.content {left:20em;top:0;right:0;width:auto}
.branding {width:20em}
}
@media screen and (min-width:1800px) {
    body, html {font-size:120%}
    .content {left:20em;top:0;right:0;width:auto}
    .branding {width:20em}
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><mrPageTitle/></title>
<mrRef RefType="link" rel="stylesheet" type="text/css" DefaultLayout.htm_files/default.css"
/>
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (min-width: 801px)"
DefaultLayout.htm_files/wide.css" />
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (min-width: 401px)
and (max-width: 800px)" DefaultLayout.htm_files/mid.css" />
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (max-width: 400px)"
DefaultLayout.htm_files/narrow.css" />
<mrRef RefType="script" id="mediaQueryChecker" type="text/javascript" src="DefaultLayout.htm_
files/default.js" defer="true">//Script</mrRef>
</head>

<body>

<div class="branding">
  <div class="vertical-floater">
    <mrRef RefType="img" class="branding-element"      src="DefaultLayout.htm_files/images/DataCollection-48.png"/>
    <span class="branding-element">UNICOM Systems, Inc.</span>
  </div>
</div>
<div class="content">
  <mrPage IncludeElementIDs="true" />
    <div class="questionArea">
      <mrBannerText>mrBannerText</mrBannerText><br/>
      <mrData>Questions here</mrData>
    </div>
  <div class="nav">
    <mrNavButton Name="Next">Next</mrNavButton>
    <mrNavButton Name="Prev">Previous</mrNavButton>
    <mrNavButton Name="Goto">GoTo</mrNavButton>
  </div>
</div>
</body>

</html>

When using JavaScript instead of media queries, you can swap class names on the body tag when the browser size is within the desired ranges. The default.js JavaScript file that is supplied with the UNICOM Intelligence Developer Documentation Library, or when UNICOM Intelligence Author or UNICOM Intelligence Reporter is installed, identifies existing media query links in the DefaultLayout.htm head element. It then builds a JavaScript object that can be used to detach and reattach CSS styles based on the browser window's current size. This solution reduces the number of files that have to contain identical styling information. The default.js and DefaultLayout.htm files are in: