@charset "utf-8";
/* Metro Dental Center.com stylesheet
   by: Chuck Reynolds of WebMediaRx
   lastmod: 25 Feb 08 */

@import 'reset.css';
@import 'typography.css';
@import 'forms.css';


body{margin:0 auto; background: #ffe9c4 url('../assets/bg-body.gif') top center repeat-x}
img{border:none; padding:0; margin:0}

/*  Layout
------------------------------------------- */
#head{width:780px; height:136px; margin:0 auto; background:url('../assets/bg-head.gif') no-repeat}
#head h1.logo{float:left; width:208px; height:136px}
#head h1 span{display: none}
#column-container{width:780px; margin:0 auto; background: url('../assets/bg-container.gif') top repeat-y; padding:0}
.clear-float-fix{clear:both; height:1px}  /* so container BG tiles the span of the columns */

/*  Primary Navigation
------------------------------------------- */
#primarynav{float:left; margin-top:95px; height:41px; width:572px; padding:0; border:0; background:transparent}
#primarynav ul#menu{height:41px;width:572px;  background:transparent url('../assets/bg-nav.gif') top left no-repeat; overflow:hidden; margin:0; padding:0; position:relative}
#primarynav ul#menu li{margin:0; padding:0; list-style:none; position:absolute; top:0}
ul#menu li,ul#menu a{ height:41px; display:block}
div#primarynav ul#menu li a{text-decoration:none; text-indent:-9999px; 
/* Commented backslash hack for IE Mac \*/ overflow: hidden /* end hack */}
#home    {left:0px; width:99px  }
#services{left:99px; width:114px}
#gallery {left:213px; width:146px}
#about   {left:359px; width:107px}
#contact {left:466px; width:106px}

#home a:hover    {background:transparent url('../assets/bg-nav.gif') 0 -41px no-repeat     }
#services a:hover{background:transparent url('../assets/bg-nav.gif') -99px -41px no-repeat }
#gallery a:hover {background:transparent url('../assets/bg-nav.gif') -213px -41px no-repeat}
#about a:hover   {background:transparent url('../assets/bg-nav.gif') -359px -41px no-repeat}
#contact a:hover {background:transparent url('../assets/bg-nav.gif') -466px -41px no-repeat}

#home a.current, li#home.current        {background:transparent url('../assets/bg-nav.gif') 0 -82px no-repeat; text-indent:-9999px     }
#services a.current, li#services.current{background:transparent url('../assets/bg-nav.gif') -99px -82px no-repeat; text-indent:-9999px }
#gallery a.current, li#gallery.current  {background:transparent url('../assets/bg-nav.gif') -213px -82px no-repeat; text-indent:-9999px}
#about a.current, li#about.current      {background:transparent url('../assets/bg-nav.gif') -359px -82px no-repeat; text-indent:-9999px}
#contact a.current, li#contact.current  {background:transparent url('../assets/bg-nav.gif') -466px -82px no-repeat; text-indent:-9999px}

/*  Left Column---Secondary Nav
------------------------------------------- */
#left-column{background:url('../assets/bg-small-column.gif') top no-repeat; float:left; margin:0; width:208px; text-align:left}
#left-column ul{padding:0; margin:32px 0 0 22px; list-style-type:none; width:165px; text-transform:uppercase}
#left-column li a{background:transparent url('../assets/bg-sub-nav.gif') bottom left repeat-x; font-size:0.86em; height:25px; display:block; color:#f7e1bd; list-style-type:none; text-decoration:none; line-height:2; font-weight:bold; text-indent:5px}
#left-column li a:hover, #left-column li a.current{background-color:#6f5f50; color:#e1daae}
#left-column h5{color:#e1daae; margin:10px 0 0 22px; font-weight:bold; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; letter-spacing:0; font-size:1.3em}
#left-column p{width:165px; color:#ffe9c4; margin:0 0 0 22px; font-size:11px}
#left-column p span{color:#ff6666; font-weight:bold}
#left-column a.left-column{color:#e1daae; text-decoration:underline; font-weight:bold}

/*  lets style those form elements
------------------------------------------- */
#left-column form{width:165px; margin:5px 0 0 22px}
#left-column input#txtFullName, #left-column input#txtEmail, #left-column textarea#txtMessage{width:165px; border:none}
#left-column input{color:#e1daae; background-color:#655547}
#left-column input#submit{border-top:1px solid #ac9886; border-left:1px solid #ac9886; border-right:1px solid #36271b; border-bottom:1px solid #36271b}
#left-column input p{color:#e1daae;}
#left-column textarea{color:#e1daae; background-color:#655547}
#left-column label{color:#ecd7b5}
#left-column #thankYou{width:165px; margin:0 0 0 22px; padding:0}
#left-column #thankYou p{padding:0; margin:0}
#left-column #thankYou h6{color:#ec876c; padding:0 0 10px 0; margin:0; letter-spacing:0}
#left-column textarea{overflow:auto}
#left-column input p{color:#e1daae}
#left-column #element.error{font-weight:bold; font-size:0.75em; color:#fbaf9c; background-color:#7e2f1a}

/*  Right Column
------------------------------------------- */
#right-column{float:right; margin:0; width:572px; text-align:left}
#right-column .img-float{float:right; margin:0 0 5px 5px; clear:both}
#right-column ul.body {list-style-position: inside; margin:10px 0}

#promonav{height:160px; width:572px; padding:0 ;border:0; background:transparent}
#promonav ul#promomenu{height:160px;width:572px; background:transparent url('../assets/bg-service-nav.gif') top left no-repeat; overflow:hidden; margin:0; position:relative}
#promonav ul#promomenu li{margin:0; padding:0; position:absolute; top:0; list-style:none; background:none}
#promonav ul#promomenu li, ul#promomenu a {height:160px; display:block; list-style:none}
#promonav ul#promomenu li a {text-decoration:none; text-indent:-9999px; list-style:none;/* Commented backslash hack for IE Mac \*/ overflow: hidden; /* end hack */ }
#cosmetic   {left:0; width:191px    }
#restorative{left:191px; width:190px}
#preventive {left:381px; width:191px}

#cosmetic a:hover{background:transparent url('../assets/bg-service-nav.gif') 0 -160px no-repeat}
#restorative a:hover{background:transparent url('../assets/bg-service-nav.gif') -191px -160px no-repeat}
#preventive a:hover{background:transparent url('../assets/bg-service-nav.gif') -381px -160px no-repeat}

#right-column #content{width:535px; margin:10px 0 0 16px; padding-bottom:10px}
#right-column #content a.btt{font-weight:bold; text-transform:uppercase; font-size:10px; margin-left:5px; line-height:3}

/*  Footer
------------------------------------------- */
#footer{width:780px; height:35px; background-color:#cec697; text-align:left; clear:both}
#footer p{color:#eee8c2; padding:13px 5px 0 0; font-size:10px; line-height:1.2; margin-left:208px}
#footer p a:link, #footer p a:hover, #footer p a:visited{color:#eee8c2; text-decoration:underline}