content
content
content
#threeColLayout #primaryContent { float:left; width:270px; margin: 0 0 20px 195px; } #secondaryContent{ float:left; width:270px; margin: 0 0 20px 15px; } Finally, there is the thinner, left column, or side bar: #sideContent{ float:left; width:180px; margin: 0 0 20px -750px; } #twoColLayout #primaryContent { width:555px; float:left; margin: 0 0 20px 195px; } #primaryContent { width:750px; margin: 0 0 20px 0; background: #FFF; } #twoColLayout #secondaryContent { display: none; } #wrapper { width:750px; margin:0 auto; padding: 0 10px 10px 10px; background-color: #D7D493; } #threeColLayout #primaryContent { float:left; width:270px; margin: 0 0 20px 195px; } #secondaryContent{ float:left; width:270px; margin: 0 0 20px 15px; } #sideContent{ float:left; width:180px; margin: 0 0 20px -750px; } body.home #mainNav a#home, body.gallery #mainNav a#gallery, body.contact #mainNav a#contact { color: #fff; } body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact { color: #000; }
content
content
.box { margin: 15px 0 0 0; padding: 5px 0 5px 0; background:url(diags.gif); }

Latest Interview

content
.cbSide { width:160px; margin: 5px 0 0 10px; padding: 10px 0 5px 0; background: #FFF; }

Latest Interview

content
.cbb { margin: 0 10px 0 10px; background: #FFF; padding: 5px 0 5px 0; line-height: 170%; } .cb { margin: 0.5em 0; line-height: 170%; } .bt { background:url(box.png) no-repeat 100% 0 !important; background:url(box.gif) no-repeat 100% 0; margin:0 0 0 18px; height:27px; } .bt div { height:27px; width:18px; position:relative; left:-18px; background:url(box.png) no-repeat 0 0 !important; background:url(box.gif) no-repeat 0 0; } .bb { background:url(box.png) no-repeat 100% 100% !important; background:url(box.gif) no-repeat 100% 100%; margin:0 0 0 12px; height:14px; } .bb div { height:14px; width:12px; position:relative; left:-12px; background:url(box.png) no-repeat 0 100% !important; background:url(box.gif) no-repeat 0 100%; } .i1 { padding: 0 0 0 12px; background:url(borders.png) repeat-y 0 0 !important; background:url(borders.gif) repeat-y 0 0; } .i2 { padding: 0 12px 0 0; background:url(borders.png) repeat-y 100% 0 !important; background:url(borders.gif) repeat-y 100% 0; } .i3 { background:#FFF; border: 1px solid #FFF; border-width:1px 0; padding:0 5px; } h3 { text-transform: uppercase; display: inline; font-size: 92%; margin: 10px 5px 0 5px; padding: 2px; } custom_background { background: #F762E0; } You might then call that as follows:

Latest Interview

My Green Header

content
.default h3 { background: #F6CE45; } .careers h3 { background: #F762E0; } .one_man h3 { font-size: 110%; background: #B18FD1; } .interviews h3 { font-size: 110%; background: #D7D493; } .profiles h3 { background: #C4DDB8; }

Latest Interview

An Interview with Richard May

content
img { float: left; margin: 0px 0 2px 5px; border: 2px solid #C5BDBD; } For any images in the default boxes - the pencil icons - I didnÕt want the 2px border. So I set border to 0. .default img { border: 0; } .mainImage { display: block; float: none; margin-top: 4px; border: 3px solid #C5BDBD; } .cbSide ul { list-style-type: none; margin-top: 0px; margin-left: 0; margin-bottom: 0; padding: 3px; } .cbSide li a:link { color:#333; line-height:150%; text-decoration:none; display:block; width:154px; border-bottom: 1px solid #EDEAEB; background: #FFF url(ticks.gif); } .cbSide li a:active { color:#333; line-height:150%; text-decoration:none; display:block; width:154px; border-bottom: 1px solid #EDEAEB; background: #FFF url(ticks.gif); } .cbSide li a:hover { color:#990000; line-height:150%; display:block; width:154px; border-bottom: 1px solid #EDEAEB; background: #FFF url(ticks.gif) 0px -20px; text-decoration:none; } .cbSide li a:visited { color: #999; text-decoration:none; line-height:150%; display:block; width:154px; border-bottom: 1px solid #EDEAEB; background: #FFF url(ticks.gif); background-position: 0 -40px; } .box.default a[href^="http:"] { background: url(external.gif) no-repeat right top; padding-right: 10px; } .box.default a[href^="http://www.morethandoodles.com"], .box.default a[href^="http://morethandoodles.com"] { background-image: none; padding-right: 0; }
.img-wrapper { margin: 20px 40px 0 0; background: url(shadow.gif) no-repeat bottom right; line-height:0; } .img-wrapper img { float:none; margin:0; background:#fff; padding:4px; border:1px solid #C5BDBD; position:relative; left:-5px; top:-5px; } .img-wrapper { float:left; margin: 20px 40px 0 0; background: url(shadow.gif) no-repeat bottom right; line-height:0; }