/* HTML, BODY ---------- */
html {height: 100%; margin-bottom: 1px}
body {background: #660033; margin: 0}

/* TEXT ---------- */
body, table, input, textarea {color: #006699; font: 12px/16px verdana, sans-serif}
p {margin: 0}
td {vertical-align: top}

/* HEADERS ---------- */
h1 {color: #006699; font: bold 17px verdana, serif; margin: 0 0 10px 0}
h2 {color: #660033; font-size: 14px; font-weight: bold; margin: 0}
h3, .highlight {font-size: 12px; font-weight: bold; margin: 0}

/* LINKS ---------- */
a:link, a:visited {color: #660033; text-decoration: underline}
a:hover, a:active {text-decoration: none}
a#logo {background: url(images/logo_chang_orthodontics.gif); display: block; height: 76px; margin: 50px 0 0 20px; overflow: hidden; text-indent: -999em; width: 390px}
#footer a {color: #FFF; font-size: 9px}
a.credit {text-decoration: none}

/* LISTS ---------- */
ol, ul {margin-bottom: 0; margin-top: 0}
ul#nav {margin: 90px 0 0 0; padding: 0; width: 170px}
li.space {height: 20px}
.columns {list-style: none; margin: 0; padding: 0}
.columns li.col2 {margin: -18px 0 0 80px}

/* NAVIGATION ----------*/
#nav_about_us {background: url(images/nav_about_us.gif)}
#nav_what_sets_us_apart {background: url(images/nav_what_sets_us_apart.gif)}
#nav_our_office {background: url(images/nav_our_office.gif)}
#nav_about_orthodontics {background: url(images/nav_about_orthodontics.gif)}
#nav_braces_101 {background: url(images/nav_braces_101.gif)}
#nav_invisalign {background: url(images/nav_invisalign.gif)}
#nav_the_game_room {background: url(images/nav_the_game_room.gif)}
#nav_contact_us {background: url(images/nav_contact_us.gif)}
#nav_home {background: url(images/nav_home.gif)}

#nav a {display: block; height: 20px; text-decoration: none; overflow: hidden; text-indent: -999em; width: 170px}
#nav a:hover, 
#about_us #nav_about_us, #nav li:hover #nav_about_us, #nav li.sfhover #nav_about_us, 
#what_sets_us_apart #nav_what_sets_us_apart, 
#our_office #nav_our_office, #nav li:hover #nav_our_office, #nav li.sfhover #nav_our_office, 
#about_orthodontics #nav_about_orthodontics, #nav li:hover #nav_about_orthodontics, #nav li.sfhover #nav_about_orthodontics, 
#braces_101 #nav_braces_101, #nav li:hover #nav_braces_101, #nav li.sfhover #nav_braces_101, 
#invisalign #nav_invisalign, 
#the_game_room #nav_the_game_room, 
#contact_us #nav_contact_us, #nav li:hover #nav_contact_us, #nav li.sfhover #nav_contact_us, 
#home #nav_home {background-position: 0 -20px}

#nav ul {list-style: none; margin: 0; padding: 0}
#nav li {display: inline}
#nav li ul {background: #FFF; border: 1px solid #999; border-width: 1px 1px 0 1px; left: -999em; position: absolute; z-index: 1}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -20px 0 0 160px}
#nav li #sub_about_us {margin-left: 90px}
#nav li #sub_our_office {margin-left: 100px}
#nav li #sub_about_orthodontics {margin-left: 160px}
#nav li #sub_braces_101 {margin-left: 100px}
#nav li #sub_contact_us {margin-left: 100px}
#nav ul li a {border-bottom: 1px solid #999; color: #007AAA; height: 12px; margin: 0; padding: 4px; text-indent: 0; width: 160px}
#nav ul li a:hover {background: #007AAA; color: #FFF}

/* IMAGES ---------- */
img, table {border: none}
.border {border: 1px solid #660033}
.centered {display: block; margin: 0 auto}
.clear {clear: both}
.left {float: left; margin: 0 10px 10px 0}
.right {float: right; margin: 0 0 10px 10px}

/* LAYOUT ---------- */
#tagline {background: url(images/tagline.gif) no-repeat center 0; color: #FFF; font: 25px trebuchet ms; height: 37px; text-align: center; text-indent: -999em}
#container {background: #003366; border: 2px solid #666; border-width: 2px 0}
#wrap {background: #FFF; margin: 0 auto; width: 780px}
#container:after, #wrap:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}
#col1 {background: url(images/layout_col1_bg.gif) no-repeat; float: left; width: 170px; height: 500px}
#col2 {background: url(images/layout_col2_bg.gif) no-repeat; float: left; position: relative; width: 610px}
#content {padding: 20px}
#home #flash {background: url(images/layout_flash_bg.jpg); float: right; height: 310px; margin: 13px -20px 0 0; width: 300px}
#sidebar {background: #D3D7E6; clear: both; padding: 10px; width: 180px}
#footer {color: #FFF; margin: 0 auto; padding: 10px 0 37px 0; position: relative; text-align: center; width: 780px}