@charset "UTF-8";
/* CSS Document */

body { margin: 20px; font-family: "Lucida Grande", "Lucida Sans Unicode", arial, helvetica, sans-serif; font-size: 12px; color: #333; }
a { color: #7d0d00; text-decoration: none; }
a:hover { text-decoration: underline; }

#wrapper { width: 740px; margin: 0 auto; }

#header { width: 740px; height: 128px; background: url('../images/header_bg.gif') 0 0 no-repeat; }
#title { display: inline; width: 363px; height: 60px; margin: 27px 0 0 25px; float: left; }
#title img { border: 0; margin: 0; padding: 0; }
#topnav { display: inline; width: 300px; height: 73px; margin: 21px 14px 0 0; float: right; padding: 0; }
#topnav li { float: left; display: inline; width: 70px; height: 73px; margin: 0 0 0 5px; }
#topnav li a { display: block; width: 70px; height: 73px; background-position: 0 0; background-repeat: no-repeat; }
#topnav li a:hover { background-position: 0 -73px; }
#topnav li#about a { background-image: url('../images/nav_about.gif'); }
#topnav li#services a { background-image: url('../images/nav_services.gif'); }
#topnav li#clients a { background-image: url('../images/nav_clients.gif'); }
#topnav li#portfolio a { background-image: url('../images/nav_portfolio.gif'); }
#topnav li a span { display: none; }

#main { background: #ccc; position: relative; }
#main_top { width: 740px; height: 20px; background: url('../images/main_top.gif') 0 0 no-repeat; }
#main_bot { width: 740px; height: 20px; background: url('../images/main_bot.gif') 0 17px no-repeat; }

#col { width: 211px; position: absolute; top: 20px; left: 20px; }
#col h2 { display: block; margin: 0 21px 0 0; padding: 8px 10px; font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; background: #aaa; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#col h2 span { color: #fff; }
#col ul { display: block; list-style: none; margin: 20px 0 0 0; padding: 0; }
#col li { display: block; text-align: right; padding: 6px 30px 12px 0; font-size: 12px; }
#col li.active { background: url('../images/arrow.gif') top right no-repeat; }
#col li a { color: #222; text-shadow: 0 1px #f1f1f1; }
#col li.active a { color: #7d0d00; text-shadow: none; }
#col li a:hover { text-decoration: none; color: #7d0d00; }

#content_wrap { width: 490px; margin: 0 20px 0 230px; }
#content { background: #f1f1f1; border: 1px solid #939393; padding: 30px; -moz-box-shadow: 0 1px 2px #999; -webkit-box-shadow: 0 1px 2px #999; }
#content h3 { display: block; color: #000; font-size: 18px; font-weight: bold; background: url('../images/line.gif') bottom repeat-x; line-height: 20px; margin: 0 0 20px; padding: 0 0 20px 0; }
#content p { margin: 0 0 20px 0; padding: 0; line-height: 20px; }
#content ul { margin: 0 10px 20px 30px; padding: 0; line-height: 18px; }
#content li { margin: 0 0 10px 0; padding: 0; }
#content img { border: 0; }
#content img.right { float: right; margin: 0 0 15px 15px; }
#content img.left { float: left; margin: 0 15px 15px 0; }
#content img.mid { margin: 15px 0; }

#footer { color: #666; font-size: 11px; text-align: center; line-height: 40px; }