/* CSS Document */

/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0 0 0 0; background:#1f3e5d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:17px; color:#091a2c;}
#footer a {color:#FFF; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#col2 p {padding:20px 0 0 0;}
#col2 a {color:#254361; text-decoration:underline;}
#col2 a:hover {text-decoration:none;}
#footer p {padding:0 0 18px 0; line-height:20px;}
#col2 ul {padding:15px;}
blockquote {margin:10px;}


/* edit.com visible styles */
body, td, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 17px; color: #091A2C; }

.Title		{ color: #2A5070; font-size: 26px; font-weight: bold; font-family: Papyrus, Arial, Verdana; }
.Header		{ color: #1F3E5D; font-size: 14px; font-weight: bold; font-family: Verdana; text-transform: uppercase; }

.Blue		{ color: #1F3E5D; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 1em; }
.LargeText	{ font-size: 24px; line-height: 1em; }

IMG.FloatLeft 	{ float: left; margin: 0 10px 10px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 10px 10px; }

IMG.WhiteBorder	{ border: 7px solid #FFF; }
IMG.WhiteBorderFloatLeft { border: 7px solid #FFF; float: left; margin: 0 10px 10px 0; }
IMG.WhiteBorderFloatRight { border: 7px solid #FFF; float: right; margin: 0 0 10px 10px; }

/* LAYOUT ---------- */
* #wrap {width:790px; background:url(images/tile.gif) repeat-y; padding:0; margin:0 auto; overflow:auto; position: relative;}

#facebook {
position:absolute;
left:40px;
top:480px;
}

* #content {width:790px; background:url(images/bg.jpg) no-repeat; overflow:auto; min-height: 760px;}

* #col1 {width:248px; float:left; padding:10px 0 0 0;}
* #col2 {width:542px;  float:left;}
* #text {width:436px; margin-left:35px;}
* #address {width:166px; margin:0 auto; font-size:14px; line-height:18px; padding:29px 0 140px 0;}
* #bottom {background:url(images/bottom.jpg) no-repeat; clear:both; width:790px; margin:0 auto; }
* #footer {width:767px; font-size:11px; line-height:16px; color:#FFF; text-align:center; clear:both; margin:0 auto; padding:15px 0 15px 0;}

/* HEADERS ---------- */
#col2 h1 {background-repeat: no-repeat; height: 35px; width:300px; text-indent: -999em; margin: 15px 0 0 150px; padding:0;}
#address h1 {font-size:15px;}
#col2 h2 {font-size:14px; text-transform:uppercase; color:#1f3e5d; margin-top:20px;}
#col2 h3 {font-size:15px; color:#1f3e5d; margin-bottom:6px; text-align:right; font-weight:normal; }
#col2 h4 {font-size:12px; color:#1f3e5d; margin-top:20px;}

/* CLASSES ---------- */
* #footer .sesame {color:#6ba1dd;}
* .img {border:#FFF 7px solid; margin:0 10px 0 0;}
* .left {float:left;}
* #text .top  {text-align:center; padding-bottom:10px;}
* .lower {font-size:20px; text-transform: none;}

/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 1px 0 0 21px; margin:0; width:211px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 31px; overflow: hidden; text-indent:-999em; width:211px}

/* Set the image for each nav item */
* #aboutouroffice {background: url(images/nav-about-our-office.jpg); }
* #aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); }
* #braces101 {background: url(images/nav-braces-101.jpg); }
* #emergencycare {background: url(images/nav-emergency-care.jpg); }
* #thegameroom {background: url(images/nav-the-game-room.jpg); }
* #contactus {background: url(images/nav-contact-us.jpg); }
* #commentform {background: url(images/nav-comment-form.jpg); }
* #referralforms {background: url(images/nav-referral-forms.jpg); }
* #home {background: url(images/nav-home.jpg); }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #aboutouroffice, #nav li.sfhover #aboutouroffice, 
#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 
#nav li:hover #braces101, #nav li.sfhover #braces101, 
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 
#nav li:hover #thegameroom, #nav li.sfhover #thegameroom, 
#nav li:hover #commentform, #nav li.sfhover #commentform, 
#nav li:hover #referralforms, #nav li.sfhover #referralforms, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-211px 0pt;}

/* Set the cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}

* #nav, #nav ul {list-style: none; margin: 0 0 0 3px; }
#nav li {display: inline; }
#nav li ul {background: #FFF; left: -999em; padding: 0; position: absolute; z-index: 1; border:1px #9eacb9 solid;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 180px; color:#edca58;}
#nav ul li a {height:24px; margin: 0; text-decoration: none; width: 211px; text-indent:0; color:#091a2c; font-size:13px;	padding-left:5px; border:1px #9eacb9 solid;  padding-top:4px;}
#nav ul li a:hover {background:#5884b1;}



/* LOGO NAVIGATION ---------- */
ul#logo { list-style: none; padding: 0; margin:0; width:241px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#logo a {display: block; height: 175px; width:241px; overflow: hidden; text-indent:-999em;}

/* Set the image for each nav item */
* #logolink {background: url(images/spacer.gif);}

/* Set the cursor to default arrow so link does not appear clickable */
#logo .active {cursor: default}


* #braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px}
#braces-diagram a {cursor: help; display: block; position: absolute}
#braces-diagram a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
#braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}

div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}

ul#sesame-games li {
clear: both;
display: block}

ul#sesame-games img {
border: 0;
margin: 0 0 10px 10px}

ul#sesame-games a.button {
float:right;
height:85px;
width:200px}

ul#sesame-games p {
padding-bottom: 1em}