/* Twiss Dental Style Sheet ----------------------------------------------- Author: LongboredSurfer.com Author URL: www.longboredsurfer.com Version: 2006.09 ----------------------------------------------- */ body {text-align:center; color:#036; background-color: #FFF; text-align:center; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif;} body td {vertical-align:text-top;} /* Page Layout ----------------------------------------------- */ #main {width:783px; float:inherit; text-align:left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; top: 50px; position:relative;} #menuholder {display:block; width:779px; height:20px; font-size:11px; float:right; margin-bottom:5px;} #title {display: block; float:right; position:relative; width:425px; height:25px; font-size:20px; font-weight:bolder; text-align:right; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #1A4876; margin-bottom: 3px; padding-right:25px; margin-top:10px;} #body2 {display: block; float:right; position:relative; width:530px; margin-right:15px;} #footer {display: block; float:right; height:10px; font-size:10px; margin-top:2px; width:779px; text-align:right; } /* Body - the main, expand-o area. Not much of a figure though, but still nice curves. ----------------------------------------------- */ #bodytop {display: block; float: right; width:579px; line-height:25px; background-image: url("Main-top.jpg"); background-repeat:no-repeat; background-position:left top;} #bodybottom {display: block; float: right; width:579px; position:relative; padding-bottom:30px; background-image: url("Main-bottom.jpg"); background-repeat:no-repeat; background-position:left bottom;} #bodymiddle {display: block; float: right; width:579px; background-image: url("Main-middle.jpg"); position:relative;} /* Side Bar - we're not in court, and this isn't some off-topic conversation. Nice try though. ----------------------------------------------- */ #sidebar {display:block; width:200px; float:left;} #logo {display:block; width:200px; height: 150px; background-image: url(Logo-leftywhite.gif);} #sidetop {display: block; width:200px; float:left; background-image: url("Side-top.gif"); background-repeat:no-repeat; padding-top:20px; background-position:top;} #sidebottom{display: block; width:200px; float:left; background-image: url("Side-bottom.gif"); background-repeat:no-repeat; padding-bottom:15px; background-position:bottom;} #sidemiddle{display: block; width:200px; float:left; background-image: url("Side-middle.gif"); background-repeat:repeat-y;} /* Extra Stuff - all added to make an expandable box at the bottom of the static box at the top. This is an optional box, and hopefully works. ----------------------------------------------- */ #extrastuff {display:block; float:right; position:relative; width:379; margin-top:5px;} #extra1 {display: block; width:379px; float:right; background-image: url("Extra-top.jpg"); background-repeat:no-repeat; padding-top:18px; background-position:top;} #extra2 {display: block; width:379px; float:right; background-image: url("Extra-bottom.jpg"); background-repeat:no-repeat; padding-bottom:15px; background-position:bottom;} #extra3 {display: block; width:379px; float:right; background-image: url("Extra-middle.jpg"); background-repeat:repeat-y;} /* Menu - I'll have your finest quesadilla Cameron Moll is to thank for showing me this type of menu setup. Super handy stuff. ----------------------------------------------- */ #menulist {margin: 0; padding: 0; list-style: none; float:right; position:relative; right:0px;} #menulist li { display: block; float: left; position: relative; background-image: url(../images/MenuForms.gif); width: 58; } #menulist li a.on {display: block; height: 18px; padding: 0 !important;} #menulist li a.on strong {display: none;} li#menuhome {width:28px; background: transparent url(MenuHome.gif) bottom left no-repeat; margin-left:55px;} li#menuabout {width:34px; background: transparent url(MenuAbout.gif) bottom left no-repeat; margin-left:55px;} li#menuourstaff {width:58px; background: transparent url(MenuOurStaff.gif) bottom left no-repeat; margin-left:55px;} li#menuservices {width:44px; background: transparent url(MenuServices.gif) bottom left no-repeat; margin-left:55px;} li#menuouroffice {width:58px; background: transparent url(MenuOurOffice.gif) bottom left no-repeat; margin-left:55px;} li#menuforms {width:34px; background: transparent url(MenuForms.gif) bottom left no-repeat; margin-left:55px;} li#menucontact {width:49px; background: transparent url(MenuContact.gif) bottom left no-repeat; margin-left:55px; margin-right:30px;} li#menuhome a.on {background: transparent url(MenuHome.gif) bottom left no-repeat;} li#menuhome a.on:hover {background-position: top left;} li#menuabout a.on {background: transparent url(MenuAbout.gif) bottom left no-repeat;} li#menuabout a.on:hover {background-position: top left;} li#menuourstaff a.on {background: transparent url(MenuOurStaff.gif) bottom left no-repeat;} li#menuourstaff a.on:hover {background-position: top left;} li#menuservices a.on {background: transparent url(MenuServices.gif) bottom left no-repeat;} li#menuservices a.on:hover {background-position: top left;} li#menuouroffice a.on {background: transparent url(MenuOurOffice.gif) bottom left no-repeat;} li#menuouroffice a.on:hover {background-position: top left;} li#menuforms a.on {background: transparent url(MenuForms.gif) bottom left no-repeat;} li#menuforms a.on:hover {background-position: top left;} li#menucontact a.on {background: transparent url(MenuContact.gif) bottom left no-repeat;} li#menucontact a.on:hover {background-position: top left;} /* Links - Breakfast sausage is wonderful, really ----------------------------------------------- */ a img {text-decoration:none; border: 0px;} #body2 a:link {color:#258; text-decoration:none; border-bottom: 1px solid #FFF;} #body2 a:visited {color:#258; text-decoration:none; border-bottom: 1px solid #FFF;} #body2 a:hover {color:#666666; text-decoration:none; border-bottom: 1px solid #036;} #sidebody a:link {color:#258; text-decoration:none; border-bottom: 1px solid #036;} #sidebody a:visited {color:#258; text-decoration:none; border-bottom: 1px solid #036;} #sidebody a:hover {color:#666666; text-decoration:none; border-bottom: 1px solid #FFF;} #sidebody h3 {font-size:14px; font-weight:bold; line-height:18px; margin:0px;} #footer a:link {color:#258; text-decoration:none;} #footer a:visited {color:#258; text-decoration:none;} #footer a:hover {color:#0099CC; text-decoration:none;} /* Main Body Area Junx ----------------------------------------------- */ #body2, #sidebody {font-size: small;} #body2 p, #sidebody p {margin-top: 0px; margin-bottom: 10px; line-height:21px;} #body2 ul li, #sidebody ul li {list-style-image: url(Bullet.gif); line-height:21px;} #body2 ul, #sidebody ul {margin-top: 3px; margin-bottom: 3px;} #body2 img, #sidebody img {border: 2px solid #FFFFFF; margin-right:10px; margin-bottom:5px; margin-top:5px; margin-left:10px;} #body2 h3 {font-size:14px; font-weight:bold; margin-bottom:5px; text-align:left; line-height:21px;} #sidebody {margin-left: 10px; margin-right:10px;} /* Forms - fill out in triplicate, blue ink ----------------------------------------------- */ input {margin: 0; padding: 2px 2px 2px 2px; font-size: 12px; font: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif;} .inputareas {border: #CCCCCC solid 1px; background: url(Input-background-short.gif) repeat-x; background-color:#FFFFFF;} textarea {margin: 0; padding: 2px 2px 2px 2px; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 12px; width:200px; border: #CCCCCC solid 1px; background: url(Input-background-tall.gif) repeat-x; background-color:#FFFFFF;} input:focus, textarea:focus, select:focus{padding: 2px 2px 2px 2px; border: #A3B5C7 solid 1px;} select{margin: 0; padding: 2px 2px 2px 2px; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 12px; width:200px; border: #CCCCCC solid 1px; background: url(Input-background-tall.gif) repeat-x; background-color:#FFFFFF;} label{margin: 0; padding: 0px 0px 2px 0px; font-size: 13px; line-height:125%;} .labelbold{font-weight:bold;} /* Photo Alignment - for those smiling teeth ----------------------------------------------- */ .picleft { float:left;} .picright { float:right;}