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

/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:url(images/bg.jpg);}
p, h2, h3, ul, blockquote, ol {padding-bottom:10px; padding-top:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:10px; padding-top:10px;}
a {color:#401702;}
a:hover {text-decoration:none;}
a img {border-style:none;}
* #footer a {color:#fff3d1;}
* #col1 a {color:#ecd59a;}
input {margin-right:5px;}

/* edit.com visible styles */
BODY, TD, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-family: Arial, Helvetica, Times New Roman, sans-serif; font-size:13px; line-height:16px; color:#401702; }

.Title		{ color: #07767D; font-size: 32px; font-weight: normal; font-family: Times New Roman; line-height: 32px; }
.Header		{ color: #E2B55E; font-size: 14px; font-weight: bold; font-family: Arial; }
.Subheader	{ color: #AA5021; font-size: 12px; font-weight: normal; font-family: Arial; font-style: italic; }

.Beige		{ color: #E2B55E; }
.Blue		{ color: #07767D; }
.LightBrown	{ color: #AA5021; }
.DarkBrown	{ color: #401702; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

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

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

/* LAYOUT ---------- */
* #wrap {width:780px; margin:0 auto; background:url(images/tile-body.gif) repeat-y; position:relative;}
* #body {width:780px; background: url(images/bg-body.jpg) no-repeat; overflow:auto;}
* #address {width:170px; margin:62px 0 0 12px; color:#FFF; font-size:13px; line-height:17px; float:left;}
* #content {width:487px; margin:0 0 0 235px; padding-bottom:40px; clear:both; min-height:350px; height:auto !important; height:350px;}
* #bannerinvisalign {position:absolute; z-index:50; top:567px; margin-left:12px; margin-bottom:50px;}
* #bannerinvisalign img {padding-bottom:5px;}
* #footer {width:780px; margin:0 auto; background:url(images/bg-footer.jpg) no-repeat; height:290px; color:#fff3d1; font-size:11px; line-height:13px; padding-top:177px; clear:both;}
* #col1 {float:left; width:175px; margin-left:12px; font-size:10px;}
* #col2 {float:left; width:477px; margin-left:50px;}
* #homelists {width:440px; margin:0 auto;}
ul#beforeafter {width:487px; margin:0 auto; padding:0;}
* #beforeafter li {width:220px; float:left; text-align:center; padding-right:5px; list-style:none;}
* #beforeafter img {border:1px solid #07767d;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 48px; width:419px; text-indent: -999em; margin: 0; padding:0;}
* #col2 h2 {font-size:11px; font-weight:normal; margin:0 0 5px 0; padding:0;}
* #content h2 {color:#e2b55e; font-size:14px;}
* #content h3 {font-weight:normal; font-size:12px; font-style:italic; color:#aa5021; margin-top:0; padding-top:0;}

h1#logo {float:left; 
margin: 0 0 320px 31px;
padding: 0;
background-repeat: no-repeat; 
width: 547px;/* this width reflects the width of the logo image */
height: 223px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 223px;/*same height as logo h1*/ 
width: 547px;/*same width as logo h1*/}

/* CLASSES ---------- */
* #col1 .sesame {color:#fff3d1;}
* .img {position:absolute; top:230px; margin-left:525px; z-index:101;}
* .right {float:right;}
* .left {float:left;}
* .top  {color:#e4a732; font-size:11px; font-weight:bold;}
* .hide {display:none;}
* .flash {margin:0 0 0 245px; width:475px; height:288px; position:absolute; z-index:61; top:230px;}
* .flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:220px;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .resources {border:1px solid #07767d;}
* .breadcrumbs, .breadcrumbs a {color:#07767d; font-size:12px; padding-top:40px; text-transform:capitalize}
* .homelists {float:left; width:170px; }
* .beforeafterpic {margin:0 0 0 247px; width:475px; height:288px; position:absolute; z-index:61; top:230px;}

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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0; width:194px; position:absolute; z-index:80; top:237px;}

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

/* 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); }
* #beforeandafter {background: url(images/nav-before-and-after.jpg); }
* #emergencycare {background: url(images/nav-emergency-care.jpg); }
* #asktheorthodontist {background: url(images/nav-ask-the-orthodontist.jpg); }
* #orthodontictreatments {background: url(images/nav-orthodontic-treatments.jpg); }
* #contactus {background: url(images/nav-contact-us.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 {background-position:-194px 0pt;}

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


/* SUB NAVIGATION ---------- */
* #sub {width:273px; margin-left:244px; background-repeat:no-repeat; position:absolute; z-index:70; top:265px;}
* .aboutortho {background:url(images/bg-sub-about-ortho.jpg)}
* .aboutoffice {background:url(images/bg-sub-about-our-office.jpg)}
* .braces {background:url(images/bg-sub-braces-101.jpg)}
* .contact {background:url(images/bg-sub-contact-us.jpg)}
* .treatments {background:url(images/bg-sub-orthodontic-treatments.jpg)}
* #sub ul {padding-top:50px; color:#fff3d1; padding-left:40px; list-style:none; padding-bottom:30px;}
* #sub ul li a {color:#fff3d1;}
* #sub ul li a:hover, #sub ul li .active  {list-style:none; color:#a6dadd; font-weight:bold; text-decoration:none;}


/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 20px; width:181px; list-style: none; padding:0; margin:0 0 0 5px; position:absolute; z-index:90; top:203px;}

/*  Makes the list items sit next to each other */
* #logins li {float: left;}

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

/* Set the image for each nav item */
* #patientlogin {background: url(images/nav-patient-login.gif);width:115px;}
* #doctorlogin {background: url(images/nav-doctor-login.gif);width:66px;}

/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -20px;}
/* Set the cursor to default arrow so link does not appear clickable */
* #logins .active {cursor: default}

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}



#content h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px; width:410px;}
#content div.media-center {
background:#336699;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px; width:400px;}
#content div.media-center a {
color:#FFF;}
#content div.media-center img {
border:1px solid #FFF;}
#content div.media-center h3 {color:#FFF;}