/* CSS Document */



/* HTML, BODY ---------- */

body {margin:0 0 0 0; background: url(images/tile.jpg) repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#FFF;}

#footer a {color:#388285;}

a:hover {text-decoration:none;}

#content li, a {color:#38195f;}

.no-border {
	border: 0;	
}



/* LAYOUT ---------- */

#wrap {margin:0 auto; width:780px; background:url(images/tile-body.jpg) repeat-y; overflow:auto}

#body {background: url(images/banner.jpg) no-repeat; width:775px; overflow:auto; padding-left:5px;}

#col1 {float:left; width:234px; font-weight:bold; padding-bottom:30px;}

#col2 {float:left; width:536px;}

#content {width:506px; margin:0 auto; clear:both;}

#footer {width:730px; line-height:16px; color:#388285; background:url(images/bottom.jpg) no-repeat #FFF; text-align:center; margin:0 auto; padding:30px 25px 20px 25px;}

#addresses {padding-left:7px; width:229px; padding-top:14px;}



/* HEADERS ---------- */

h1 {background-repeat: no-repeat; height: 47px; width:381px; text-indent: -999em; margin:0; padding:0;}

#content h2 {font-size:12px; font-style:italic; font-weight:normal;}

#content h3 {font-size:13px; color:#311b3c;}

#footer h3 {color:#311b3c; font-weight:normal; font-size:11px; margin:0; padding:0;}

#footer h2 {font-size:11px; color:#388285; margin:0; padding:0;}



/* CLASSES ---------- */

#footer .sesame {color:#311b3c; font-weight:bold;}

.img {margin:0 10px 10px 10px;}

.right {float:right;}

.left {float:left;}

.top  {color:#e4a732; font-size:11px; font-weight:bold;}

.city {color:#b9aebe;}

.phone {color:#86b3b5;}

.big-text {
	font-size:15px;
	}

.map {
	border:#ffffff solid 4px;
	float:right;
	}

/* NAVIGATION ---------- */





/* NAVIGATION MAIN ---------- */

ul#nav {list-style: none; padding: 0 0 30px 0; margin:27px 0 0 0; width:217px; }



/*  Sets styles for all links that are inside the ul id="nav" */

#nav a {display: block;height: 30px; overflow: hidden; text-indent:-999em; width:217px}



/* Set the image for each nav item */

#ouroffice {background: url(images/nav-our-office.jpg); }

#aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); }

#braces101 {background: url(images/nav-braces-101.jpg); }

#suresmile {background: url(images/nav-suresmile.jpg); }

#inovation {background: url(images/nav-in-ovation.jpg); }

#invisalign {background: url(images/nav-invisalign.jpg); }

#technology {background: url(images/nav-technology.jpg); }

#gameroom {background: url(images/nav-game-room.jpg); }

#smilegallery {background: url(images/nav-smile-gallery.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 #ouroffice, #nav li.sfhover #ouroffice, 

#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 

#nav li:hover #braces101, #nav li.sfhover #braces101, 

#nav li:hover #suresmile, #nav li.sfhover #suresmile, 

#nav li:hover #invisalign, #nav li.sfhover #invisalign, 

#nav li:hover #inovation, #nav li.sfhover #inovation, 

#nav li:hover #technology, #nav li.sfhover #technology, 

#nav li:hover #thegameroom, #nav li.sfhover #thegameroom,

#nav li:hover #smilegallery, #nav li.sfhover #smilegallery, 

#nav li:hover #home, #nav li.sfhover #home, 

#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-217px 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; }

#nav li {display: inline; }

#nav li ul {background: #388285; left: -999em; padding: 3px 0 3px 0; position: absolute; z-index: 1; }

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 180px; color:#FFF;}

#nav ul li a {height:15px; margin: 0; text-decoration: none; width: 183px; text-indent:0; color:#FFF; font-size:11px;	padding-left:5px; font-weight:bold;}

#nav ul li a:hover {color:#311b3c;}



/* CALLOUTS MAIN ---------- */

ul#callouts {list-style: none; padding: 0; margin:0 0 0 0; width:216px;}

/*  Sets styles for all links that are inside the ul id="nav" */

#callouts a {display: block; overflow: hidden; text-indent:-999em; width:216px}

#callouts-suresmile { padding-top:10px;}

/* Set the image for each nav item */

#contests {background: url(images/nav-healthy-grins.jpg); height:86px;}

#kidsclub {background: url(images/nav-kids-club.jpg); height:112px;}

#smilegalleryCall {background: url(images/smile-home.jpg); height:123px;}

#brink1 { color:#fff}

#brink2 { color:#ee9141}
#brink2 a{ color:#ee9141; text-decoration:underline;}
#brink2 a:hover{ color:#ee9141; text-decoration:none;}
/* Shift the image position up to show the active state */

#callouts a:hover, #callouts .active, #callouts li:hover, #callouts li.sfhover, 

#callouts li:hover #contests, #callouts li.sfhover #contests, 

#callouts li:hover #kidsclub, #callouts li.sfhover #kidsclub,

#callouts li:hover #smilegalleryCall, #callouts li.sfhover #smilegalleryCall, {background-position:-216px 0pt;}



/* Set the cursor to default arrow so link does not appear clickable */

#callouts .active {cursor: default}



/* LOGO NAVIGATION ---------- */

ul#logo { list-style: none; padding: 0; margin:0; width:215;}



/*  Sets styles for all links that are inside the ul id="nav" */

#logo a {display: block; height: 119px; width:215px; 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}





/* LOGINS NAV ITEMS ---------- */



ul#logins {height: 22px; width:446px; list-style: none; padding:0 0 98px 0; margin:0; float:right;}



/*  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: 22px; overflow: hidden; text-indent:-999em;}



/* Set the image for each nav item */

#patientlogin {background: url(images/nav-patient-login.jpg);width:171px;}

#doctorlogin {background: url(images/nav-doctor-login.jpg);width:137px;}

#contactus {background: url(images/nav-contact-us.jpg);width:138px;}



/* Shift the image position up to show the active state */

#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover,

#logins li:hover #contactus, #logins li.sfhover #contactus {background-position:0 -22px;}

/* Set the cursor to default arrow so link does not appear clickable */

#logins .active {cursor: default}



#logins, #logins ul {list-style: none; margin: 0; }

#logins li {display: inline; }

#logins li ul {background: #388285; left: -999em; padding: 3px 0 3px 0; position: absolute; z-index: 1; }

#logins li ul li {float:none;}

#logins li:hover ul, #logins li.sfhover ul {left: auto; margin: 0; color:#FFF;}

#logins ul li a {height:15px; margin: 0; text-decoration: none; width: 183px; text-indent:0; color:#FFF; font-size:11px;	padding-left:5px; font-weight:bold;}

#logins ul li a:hover {color:#311b3c;}



/* THE GAME ROOM ---------- */

div#sesame-game {

background: #000;

line-height: 0;

margin: 10px auto;

text-align: center;

width: 400px; color:#FFF;}



ul#sesame-games {

list-style: none;

margin: 0;

padding: 0; color:#FFF;}



ul#sesame-games li {

clear: both;

display: inline-block; color:#FFF;}



ul#sesame-games img {

border: 0;

float: right;

margin: 0 0 10px 10px}



ul#sesame-games p {

padding-bottom: 1em; color:#FFF;}





/* SURESMILE ---------- */

.clear {

clear:both;}

h2.media-center {

background:#000033;

color:#FFF;

margin:0;

padding:5px;}

div.media-center {

background:#336699;

color:#FFF;

display:inline-block;

margin-bottom:10px;

overflow:auto;

padding:10px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}





/* IN-OVATION ---------- */

.clear {

clear:both;}

h2.media-center {

background:#000033;

color:#FFF;

margin:0;

padding:5px;}

div.media-center {

background:#336699;

color:#FFF;

display:inline-block;

margin-bottom:10px;

overflow:auto;

padding:10px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}


/* Social Networks */
#social-networks {
	width: 155px;
	margin: 0 auto;
}

.white-link {
	color: #fff;	
}

pp_description {
	color: #000 !important;	
}
