body { padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 1em; }
form { margin: 0; padding: 0; }

/* no height on clearing divs!!! */
.clear { clear: both; }
.clearright { clear: right; }
.clearleft { clear: left; }

ul.ribbon li { display: inline; list-style: none; padding: 0; }

div#canvas { width: 900px; margin: 10px auto; padding: 0; }

div#canvas div#header { position: relative; height: 133px; } /* relative position so rounded corner divs can be absolute */
div#canvas div#header div#logo { position: absolute; left: 29px; } /* positioning gets the logo right over circles in header bg-img */
div#canvas div#header div#logo img { border: 0; }
div#canvas div#header h1 { float: left; width: 50%; padding: 41px 5px 38px 160px; }
div#canvas div#header h1 span#subtitle { display: block; }
div#canvas div#header div#contactinfo { float: right; margin: 33px 33px 0 0; }
div#canvas div#header div#contactinfo p { margin: 0; line-height: 1.25em; }

div#canvas div#mainnav { clear: both; }
div#canvas div#mainnav ul { width: 100%; overflow: hidden; margin: 0; border-bottom: 1px solid white; padding: 0; }
div#canvas div#mainnav ul li { float: left; width: 14.3%; } /* width: 100% (<ul>) / 7 (# of <li>s) = ~14.3% */
div#canvas div#mainnav ul li.last { margin-right: -10%; } /* so instead of bumping into edge of #canvas and wrapping around, it extends past the <ul> and is overflow:hidden */
div#canvas div#mainnav ul li a { display: block; line-height: 1.75em; }

div#canvas div#contentbox { margin-top: 0; position: relative; }

div#canvas div#contentbox div#sidemenu { float: left; width: 175px; margin: 0; padding: 0; }
div#canvas div#contentbox div#sidemenu h3 { margin: 0.5em 0; line-height: 2em; text-align: center; }
div#canvas div#contentbox div#sidemenu ul { margin: 0; padding: 0; }
div#canvas div#contentbox div#sidemenu ul li { margin: 2px 0; padding: 0; list-style: none; }
div#canvas div#contentbox div#sidemenu ul li a { display: block; margin: 1px 0; padding-left: 5px; line-height: 1.6em; font-size: 0.9em; }
div#canvas div#contentbox div#sidemenu ul li a.smaller { font-size: 0.8em; }
div#canvas div#contentbox div#sidemenu ul li a.active { }
div#canvas div#contentbox div#sidemenu ul li a:hover { }
div#canvas div#contentbox div#sidemenu ul li ul { padding-left: 0; }
div#canvas div#contentbox div#sidemenu ul li ul li { margin-left: 0; }
div#canvas div#contentbox div#sidemenu ul li ul li a { }
div#canvas div#contentbox div#sidemenu ul li ul li a.active { }
div#canvas div#contentbox div#sidemenu ul li ul li a:hover { }

div#canvas div#contentbox div#sidemenu div.button { margin: 10px; }
div#canvas div#contentbox div#sidemenu div.button p { margin: 0; }

div#canvas div#contentbox div#tools { margin: 0 0 0 175px; padding: 0; } /* no clear:right cause children inherit it in IE5/mac */
div#canvas div#contentbox div.tools-wide { margin: 0 0 10px 0 !important; }
div#canvas div#contentbox div#tools ul { float: right; margin: 0 !important; padding: 0; }
div#canvas div#contentbox div#tools ul li { float: left; margin: 0; padding: 5px 2px 2px; list-style: none !important; }
div#canvas div#contentbox div#tools ul.links { width: 44%; }
div#canvas div#contentbox div#tools ul.links li a { display: block; height: 18px; padding: 7px 0 0 25px; } /* 18 + 7 = 25px, height of background-image (IE will need boxmodel adjustment) */
div#canvas div#contentbox div#tools ul.links li a { display: inline-block; }
div#canvas div#contentbox div#tools form { float: right; width: 54%; }
div#canvas div#contentbox div#tools form select.problemselector-problem { width: 225px; }
div#canvas div#contentbox div#tools form select.treatmentselector-treatment { width: 250px; }
div#canvas div#contentbox div#tools form input.submit { padding: 1px; }

div#canvas div#contentbox div#content { margin: 0 0 0 175px; padding: 10px 10px 20px; position: relative; } /* relative positioning for #content-corner */
div#canvas div#contentbox div.content-wide { margin: 0 0 0 0 !important; }
div#canvas div#contentbox div#content img#content-topright-img { width: 250px; max-height: 160px; float: right; margin: 0 0 5px 5px; }
div#canvas div#contentbox div#content h2 { margin: 2px 250px 3px 2px; padding: 1px 5; }
div#canvas div#contentbox div#content h2.long { margin: 2px 175px 3px 2px; } /* for longer h2s that wrap */
div#canvas div#contentbox div#content h3 { padding: 0.15em; }
div#canvas div#contentbox div#content p { margin: 1px 5px 10px 5px; line-height: 1.3em; }
div#canvas div#contentbox div#content p.content-img-on-right { margin: 1px 250px 10px 5px !important; }
div#canvas div#contentbox div#content img.left { float: left; margin: 5px; }
div#canvas div#contentbox div#content img.right { float: right; margin: 5px; }
div#canvas div#contentbox div#content ul { margin: 0 5px; padding-left: 0; }
div#canvas div#contentbox div#content ul li { margin-left: 5px; padding-left: 15px; }

/* class names need to be this annoying because of IE5/mac's class name parsing bugs...can't have things starting with the same substring */
div#canvas div#contentbox div#content div.columns { width: 705px /*725px*/; } /* can't clear cause floated children will unconditionally inherit it on IE5/mac */
div#canvas div#contentbox div.content-wide div.columns { width: 900px !important; }
div#canvas div#contentbox div#content div.columns .acolumn { float: left; position: relative; height: 340px; margin: /*5px 0.5%*/ 5px 0.2% 5px 0.8%; padding: 0; } /* arbitrary height. relative position so .colimg can be in bottom right corner */
div#canvas div#contentbox div#content div.columns .acolumn h3 { font-size: 0.95em; text-align: center; line-height: 1.1em; }
div#canvas div#contentbox div#content div.columns .acolumn p { margin: 5px !important; line-height: 1.2em !important; }
div#canvas div#contentbox div#content div.columns .acolumn li { line-height: 1.4em; }
div#canvas div#contentbox div#content div.columns .acolumn .colimg { position: absolute; bottom: 0; right: 0; }

div#canvas div#contentbox div#content div.onecolumn    .acolumn { width: /*96.0%*/ 97%; }
div#canvas div#contentbox div#content div.twocolumns   .acolumn { width: /*47.5%*/ 48%; }
div#canvas div#contentbox div#content div.threecolumns .acolumn { width: /*31.0%*/ 32%; }
div#canvas div#contentbox div#content div.fourcolumns  .acolumn { width: /*23.0%*/ 23.5%; }

div#canvas div#footer { clear: both; margin-top: 10px; }
div#canvas div#footer ul { text-align: center; margin: 5px 0; padding: 0; }
div#canvas div#footer ul li { display: inline; list-style: none; padding: 0; }
div#canvas div#footer ul#certs li a img { vertical-align: top; }