/*=======================================================
 CSS Document for 123 Dental
=======================================================*/

@import url("global.css");

.hidden { display: none; }
.show { display: inline-block; visibility: visible; }

/*=============================================================
	Main layout
=============================================================*/

#container { width: 970px; height: auto; display: block; margin: 0 auto; background: url('../images/bg-repeat.jpg') repeat-y 0 0; clear: both; }
#container:after, body#popup #container:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
/*popup*/body#popup #container { width: 550px; height: auto; margin: 0 auto; border: 5px solid #fff; display: block; padding: 0; background: #fff url('../images/bg-popup.jpg') no-repeat 0 0; }

/*=============================================================
	Header - nav + logo + banner
=============================================================*/

#header { width: 960px; height: 301px; padding: 0 5px; background: url('../images/bg-body.jpg') no-repeat 0 0; display: inline-block; clear: both; }
#logo { width: 510px; height: 80px; display: block; float: left; margin-left: 15px; position: relative; top: 45px; z-index: 100; left: auto; clear: both; }
/*popup*/body#popup #logo { width: 550px; height: 120px; margin: 0; padding: 0; top: 5px; display: block; clear: both; }
#flash, object#flash { position: relative; z-index: 10; width: 960px; height: 265px; display: block; float: left; clear: both; margin-top: -80px; padding: 0; }
#flash p, object#flash p { text-indent: -9999em; }
/*body#profile #flash { background: url('../images/banner1.jpg') no-repeat 100% 0; }
body#services #flash { background: url('../images/banner2.jpg') no-repeat 100% 0; }
body#contact #flash { background: url('../images/banner3.jpg') no-repeat 100% 0; }*/

/*navigation*/
ul#nav { list-style: none; width: 100%; height: 36px; float: left; margin: 0 0 0 64px; display: inline; clear: both; }
ul#nav li { display: block; position: relative; float: left; border-right: 1px solid #69a73c; z-index: 100; }
ul#nav li.first { border-left: 1px solid #69a73c; }
ul#nav a { height: 36px; overflow: hidden; display: block; text-indent: -999em; float: left; margin: 0 auto; text-align: center; background-color: #3f8f09; }
ul#nav a:hover { background-color: #6bbe36; background-position: 50% -36px!important; }
ul#nav li ul { list-style: none; width: 960px; height: auto; background-color: #6bbe36!important; display: inline-block; left: -9999px; position: absolute; top: 100%; margin: 0 0 0 -257px; border-top: 1px solid #69a73c; border-bottom: 10px solid #fff; padding: 0; }
ul#nav li li { display: inline; float: left; border: none; }
ul#nav ul a { border-right: 1px solid #69a73c; float: left; display: inline-block; width: auto; height: 12px!important; padding: 5px 16px 10px 17px!important; text-align: left; text-indent: 0!important; font-size: 0.9em;  background-color: #6bbe36!important; text-decoration: none; color: #fff; }
ul#nav ul a.last { border: none; padding-right: 20px!important;  }
ul#nav ul a:hover, ul#nav li li a.current { text-decoration: none; background-color: #d1f192!important; color: #000; }
/* hover actions */
ul#nav li:hover ul, ul#nav li.over ul { left: 0; }
/*background img*/
a#navhome { background: url('../images/nav-home.gif') no-repeat 50% 0; width: 90px; }
a#navprofile { background: url('../images/nav-profile.gif') no-repeat 50% 0; width: 100px; }
a#navservices { background: url('../images/nav-services.gif') no-repeat 50% 0; width: 110px; }
a#navlatest { background: url('../images/nav-latest.gif') no-repeat 50% 0; width: 162px; }
a#navcontact { background: url('../images/nav-contact.gif') no-repeat 50% 0; width: 110px; }
/*hovered on page*/
body#homepage a#navhome, body#profile a#navprofile, body#services a#navservices, body#latest a#navlatest, body#contact a#navcontact { background-color: #6bbe36; background-position: 50% -36px!important; }

/*=============================================================
	Main body - text and CTA
=============================================================*/

#mainpage { width: 840px; height: auto; margin: 0; display: inline-block; float: left; padding: 50px 65px 10px 65px; clear: both; background: url('../images/bg-body.jpg') no-repeat 0 -301px; }
/*popup*/body#popup #mainpage { width: 520px; height: auto; display: block; padding: 25px 15px!important; clear: both; background: none;  }
.cta { width: 190px; height: auto; display: inline; float: right; margin: 0 0 20px 35px; padding: 100px 0 15px 0; background: url('../images/bg-cta.jpg') no-repeat 0 0; }
.img-area { width: 190px; height: auto; display: inline; float: right; margin-left: 35px; margin-bottom: 15px;  padding: 10px; border: 1px solid #e0efbb; background: #f1f9df; }
.img-area p { margin-bottom: 5px; display: inline-block; text-align: center; }
.cta p { line-height: 15px; padding: 0 15px; display: block; }
a#booking { background: url('../images/booking.gif') no-repeat 0 0; width: 190px; height: 35px; display: inline-block; clear: both; text-indent: -999em; overflow: hidden; float: left;}
a#booking:hover, .cta a#booking.bookinghover { background-position: 0 -35px!important; }
#map { position: absolute; z-index: 1000; left: auto; margin: 0 0 0 -70px; display: inline; top: 430px; padding: 15px; border: 1px solid #bad576; width: 500px; height: 420px; overflow: hidden; background-color: #fff;  text-align: center; line-height: 30px; font-size: 1.1em; font-weight: bold; clear: both; }

/*=============================================================
	Footer
=============================================================*/

ul#footer { list-style: none; width: 940px; height: 90px; padding: 20px 15px; overflow: hidden; margin: 0; background: url('../images/bg-footer_test.jpg') no-repeat 0 0; float: left; display: inline-block; clear: both; }
ul#footer li { display: block; font-size: 1em!important; margin: 0!important; color: #2d5400; text-align: right; float: left; }
ul#footer li.breadcrumb { width: 390px; padding: 10px 0 0 10px; display: inline-block; margin: 0; text-align: left!important; }
ul#footer a { color: #3e9224; text-decoration: none;}
ul#footer a:hover { color: #c53d08; text-decoration: underline;}



/*=======================================================
 End of CSS Document for 123 Dental
=======================================================*/