html {width:100%; height:100%;}
body {width:100%; height:100%; font-family:Arial; font-size:10pt;background:#eeeedd;}

a {text-decoration:underline;}
a:hover {text-decoration:underline; color:blue; cursor:pointer;}

.outerBox {width:600px;}

/* appBanner divides a row into two parts, the left part is for
 * the title and the right part is for links.
 */
.appBanner {width:100%; background:green; color:yellow;
            font-weight:bold; margin-bottom:15px; padding:5px;}
.appBanner a:hover {background:transparent; color:white; cursor:pointer;}

/* LabeledEntry is for a row consisting of a caption followed by 
 * an input or piece of data. The idea is that successive instances
 * will have the labels right aligned and the values left aligned..
 */
.inputLabel {font-weight:bold; text-align:right; 
             padding-right:5px;}
.inputValue {text-align:left; width:150px;} 

.buttonLine {width:100%; padding-top:10px; padding-bottom:10px;}

.messageBox {width:100%;text-align:center;}             

#messageText {padding:10px; text-align:center; border:solid thin brown; background:yellow;
             visibility:hidden;}

.captionText {font-weight: bold; background-color: #99ff99; text-align:center;}