Add borders to original

todcon-bordered.html

table {border: 1px solid red;}
th {border: 1px dotted red;}
td {border: 1px dotted purple;}

Simplify slightly

todcon-simpler.html

• Took out cells separating buttons
• Reworked colspans

Strengthened structure

todcon-boil-01.html

• Took out font tags
• Removed HTML-based background information
• Changed sidebar title to h3 tags
• Added ids (#main, #content, #news, #venue, #col, #contact, #banner)
• Converted red text to em tags

Replacing losses

todcon-boil-02.html

body, table, td, p {font: 12px Verdana, Arial, Helvetica, sans-serif;
  color: #333;}
body {background: #3A3318;}
a:link {color: #903;}
a:visited {color: #3A3318;}

#main {background: #e9e2c9 url(images/bg_repeater.gif) top left repeat;}
#content {background: #DACDA3;}
#news {background: #DACDA3;}

#contact td {background-color: #903; color: #E9E2C9;}
#contact a {color: #e9e2c9;}
#banner {background: #e9e2c9;}

When news breaks, we fix it

todcon-boil-03.html

#news {background: #DACDA3; border: 1px solid #903;}
#news td {border: 1px solid #903;}
#news h3 {background: url(images/arrow.gif) 97% 50% no-repeat; color: #903;
  font-size: 0.9em; font-weight: normal; margin: 0;}
#news h4 {padding: 1.25em 0 0; font-size: 1.1em;}

todcon-boil-04.html

#main em {color: #903; font-style: normal;}
#venue, #col {padding: 10px;}

todcon-boiled-tables.html

• Removed table outliners

#contact td {font-size: 9px; color: #E9E2C9; background-color: #903;
  padding: 0.5em 0.25em;}
#contact a {color: #E9E2C9;}
#banner {padding: 5px 0; background: #e9e2c9;}

Back to Square Two

todcon-boil-06.html

• "Recombined" masthead graphics
• Converted tables to divs
• Added more ids (div#masthead, div#navbar, img#todcon, img#todconlogo, img#lines)

Body tuck, relative containers

todcon-boil-07.html

• Take out body margin
• Set up positioning

body {background: #3A3318; margin: 0;}
#masthead, #main {width: 741px; margin: 0 auto; position: relative;}
#masthead {background: #e9e2c9 url(images/bg_repeater.gif) bottom left repeat;}
#main {background: #e9e2c9 url(images/bg_repeater.gif) top left repeat;}

Managing the masthead

todcon-boil-08.html

#todcon, #todconlogo, #lines, #navbar {position: absolute;}
#todcon {top: 18px; left: 7px;}
#todconlogo {top: 4px; left: 451px;}
#lines {top: 47px;}
#navbar {top: 67px;}

Two-column correction

todcon-boil-09.html

#venue {float: left; width: 50%; margin-right: 5%;}
#col {margin-left: 55%;}

News fixing, part two

todcon-boil-10.html

#news {position: absolute; top: 8px; left: 14px; width: 198px;
  background: #DACDA3; border: 1px solid #903;}
#news h3 {background: url(images/arrow.gif) 97% 50% no-repeat;
  border-bottom: 2px solid maroon; color: #903;
  font-size: 0.9em; font-weight: normal;
  padding: 0.5em 0 0.25em 0.33em; margin-left: 0;}
#news h4 {padding: 1.25em 0 0; font-size: 1.1em;}
#news p {padding: 0 0 0.5em;}
#news img {display: block; margin: 0 auto 0.5em;}

Replacing the extra line

todcon-boil-11.html

#news h3, #news h4, #news p {border-right: 2px #903 solid; margin: 0 12px 0 0.5em;}

Cleanup

todcon-boiled-posit.html

#contact {margin-right: 1px;}
#contact table {width: 100%;}
#contact td {font-size: 9px; padding: 0.5em; background-color: #903; color: #E9E2C9;}
#contact a {color: #E9E2C9;}

#banner {padding: 5px 1em; background: #e9e2c9; text-align: center;}

Variations

todcon-boiled-v1.html

• Line up main and sidebar
• Put a border around the sidebar
• Fill in the backgrounds in the news sidebar

Variations Redux

todcon-boiled-v2.html

• Flip sidebar and main around
• Intentionally cause some overlap/alignment