@media screen, projection {
/* left column */
#left {
width: 4%;              /* % of inner-container width is ~same width as right column */
float: left;             /* left side of inner-container */
padding-right:0.5em;
padding-left:0;
background-color:red;
}

/* left content column */
#leftcontent {
width: 45%;
float:right;
background-color:yellow;
}
/* right content column*/
#rightcontent {
width: 45%;
float:right;
background-color:green;
}

} /* end screen only rules */

@media screen, projection, print {
/* container for the 4 columns */

#outer-container {
width: 102%;             /* full window width */
margin:-0.5em;
padding:0;
background-color:#ccccff;
}
/* container for just the left and two center columns */
#inner-container {
width: 92%;             
float: left;             /* left side of window */
margin: 0;               /* keep flush with adjacent containers */
background-color:blue;
padding:0;

}
/* right column */
#rightbar {
padding-left:0.5em;
padding-right:0;
width: 2%;             
float: right;            /* right side of window */
background-color:#ccccff;
}
.clear {
  clear: both;
  margin: 0;               /* keep flush with adjacent containers */
  padding: 0;
  height: 0;
  overflow: hidden;
}
} /* end screen/print rules */
/* print only rules (per request) */
@media print {
#left {
display: none;
}
.middle {
	float: left;
}
} /* end print only rules */

#section {
top:3.5em;
color:#990000;
text-align:right;
font-size: 140%;
margin-right:3%;
z-index:96;
}