/*
A DIV will always try a go the greatest width available to it. It must be constrained to a width dynamic, which is why an image won't expa	nd a div horizontally. The width attribute rules over all. 
*/





body  {
    margin: 0;          /* shorthand for all margins = 0 */
    padding: 0;         /* no padding */
		background-color:#bbb;
}







/* outerDiv wraps around the rest of the page */
div#outerDiv {
    width: 880px;       /* sets the content width */
    margin: 0 auto;     /* no top/bottom margin, centered horizontally */
}







/* ===== Floating Header ===== */
/* ABOUT the image in this floatElement div: 
I've set it up this way, with an opacity attrigute for two reasons: one is simply to utilize that opacity attribute in the fashion of a hover action, which I think is cool and I want to keep it around. The other is to show what's happening behind the floatElement div. which is the header div acting as a spacer block to force the banner div into position. The Triad iMedia link shows the actual usage of this construct.
*/
#floatElement {
	position:absolute;
	width:880px;
	height:160px;
	/* background-image:url('../images/spacer_beige.gif'); */
	background-repeat: no-repeat;
	z-index:10;
	/* background-color:#bbb; */
}
#floatElement img {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
#floatElement img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}







/* ===== Header ===== */
div#header {
    height: 100px;      /* set size equal to banner image */
    position: relative;
		background-color:#555555;		
}
#header img {
margin: 10px auto;
display:block;
/* without the Display:Block command, the image will display inline, which is to say a margin attribute will have no effect */
}







/* ===== Middle Banner ===== */
div#midBanner {
		position:relative;
		display:block;
    height: 300px;
		background-color:#999999;
		padding:0px 0px;
}
#midBanner img {
position:absolute;
margin: 10px 10px;
/* Tried very hard here to use the margin: 0px auto; statement but it wouldn't work. Best way of cenetering an image in a dive, vert & horiz, is by adjusting the div dimensions to allow a padding value. */
display:block;
/* without the Display:Block command, the image will display inline, which is to say a margin attribute will have no effect */
}







/* ===== Content Elements Container ===== */
div#content {
		position:relative;
    background-color: #fff;
    padding: 0px;
}







#content #leftContent {
    float: left;
    width: 475px;
    margin: 0;
    padding: 0;
		background-color:#dddddd;
}
#leftContent img{
    margin: auto;
		display:block;
}







/* ===== upper sidebar ===== */
#content div#rightContent {
    float: right;
    width: 376px;
    padding: 0px 0px 0px 14px;
    margin: 0;
    border-left: double red 4px;
		background-color:#aaaaaa;
}





/* ===== subContent ===== */
/* Because this banner doesn't have a width, it will expand to the width of its parent, outerDiv */
div#subContent {
    background-color: #fff;
    padding: 0px;
}





/* ====- leftsubContent ===== */
#subContent #leftSubContent {
    float: left;
    width: 475px;
    margin: 0;
    padding: 0;
		background-color:#dddddd;
}
#leftSubContent img{
    margin: auto;
		display:block;
}





/* ===== rightsubContent ===== */
#subContent #rightSubContent {
    float: right;
    width: 376px;
    padding: 0px 0px 0px 14px;
    margin: 0;
    border-left: double red 4px;
		background-color:#aaaaaa;
}





/* ====- bottom banner ===== */
div#bottom {
		background-color:#777777;		
}
#bottom img {
margin: 6px 10px 6px 10px;
}





/* ===== footer ===== */
div#footer {
    clear: both;
		width:880px;
		text-align::center;
    background: transparent;
    margin: 0 auto;
    padding: 5px;
}





/* ===== miscellaneous styles ===== */
.clear { clear: both }