CSS - http://www.millcreekdentistry.com/ * Collapse All * Expand All http://www.millcreekdentistry.com/ http://www.millcreekdentistry.com/css/styles.css /* ------------------------------------------------------------------------------------- */ /* Copyright Einstein Industries 2004. Used with Permission. */ /* May not be duplicated or reproduced. */ /* */ /* Please check for cross-browser compatibility prior to making changes */ /* MINIMUM BROWSER CHECK :: IE5.x/IE6/Op7/NS7/Safari/FireFox */ /* */ /* CSS Document */ /* ------------------------------------------------------------------------------------- */ /* undohtml.css * (CC) 2004 Tantek Celik. Some Rights Reserved. * http://creativecommons.org/licenses/by/2.0 * This style sheet is licensed under a Creative Commons License. **********************************************************************/ /* Purpose: undo some default styling of common (X)HTML browsers */ /* link underlines tend to make hypertext less readable, * because underlines obscure the shapes of the lower halves of words *********************************************************************/ :link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p, blockquote, fieldset, input, em { margin:0; padding:0 } a img,:link img,:visited img { border:none } a:link, a:visited {outline: none;} a:hover, a:active {outline: none;} /* more varnish stripping as necessary... */ /* basic elements * ------------------------------------------------------------------------------------- */ body { background: #04456B url(../images/bg.jpg) top left repeat-x; text-align: center; } body#privacy { background: #D7E0E5; text-align: left; font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; font-size: 12px; line-height: 16px; } body#privacy-thankyou { background: #05456B; text-align: left; font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; font-size: 12px; line-height: 16px; width: 640px; } #thankyou-privacy {background: url("../images/sub/thankyou.jpg") top no-repeat; height: 303px; padding-top: 135px; margin-top: 30px;} #thankyou-privacy p {margin: 0 80px 100px 90px;} #thankyou-privacy a:link, #thankyou-privacy a:visited { color: #0C598D; text-decoration: underline; } #thankyou-privacy a:hover, #thankyou-privacy a:active { color: #794B7C; text-decoration: underline; } body#privacy ul {margin: 0 20px 10px 40px; list-style:disc;} body#privacy ul li {margin-bottom: 5px;} body#privacy p { margin: 0 20px 10px 20px;} p.privacy-head {background-color: #04456B ; font-size: 1.2em; width: 600px; padding-left: 7px; height: 25px; font-weight: bold; padding-top: 5px; color:#FBFBFB; text-align:center;} p.privacy-title {background-color: #0C598D; font-size: 1.1em; width: 600px; padding-left: 7px; height: 20px; font-weight: bold; color: #D7E0E5; padding-top: 4px;} body#privacy form label {width: 300px;} body#privacy form label.two-liner {float: left; margin-right: 210px;} body#privacy form label input {width: 180px; height: 16px; margin-top: 2px;} p, div, li, div, h1, h2, h3, h4, td, input, select, textarea { font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; font-size: 12px; line-height: 16px; } #content-left p { color: #000000; } #content-left a:link, #content-left a:visited { color: #0C598D; text-decoration: underline; } #content-left a:hover, #content-left a:active { color: #794B7C; text-decoration: underline; } #content-right p { color: #506986; } #content-right a:link, #content-right a:visited { color: #506986; text-decoration: underline; } #content-right a:hover, #content-right a:active { color: #04456B; text-decoration: underline; } span { display: none; } /* main structural elements * ------------------------------------------------------------------------------------- */ #wrapper { width: 780px; margin: 0 auto; background: url(../images/bg-wrapper.jpg) left top repeat-y; text-align: left; } /* Horizontal sprite nav * ------------------------------------------------------------------------------------- */ #menu { background: url(../images/menu.jpg) left top no-repeat; width: 780px; /* Width of buttons, not entite image (or half of entire image) */ height: 61px; /* Height of entire image */ } #menu span { display: none; } #menu li, #menu a { height: 61px; /* Each button must have the same height, define it here */ display: block; } #menu li { float: left; list-style: none; display: inline; /* fixes IE/Win double margin float bug (safe) */ } /* margin-left - you will need to adjust this value to "center" your nav, if needed */ /* width - width of each button, they will each most likely be unique */ #menu-01 { width: 46px; margin-left: 44px; } #menu-02 { width: 63px; } #menu-03 { width: 113px; } #menu-04 { width: 123px; } #menu-05 { width: 105px; } #menu-06 { width: 109px; } #menu-07 { width: 83px; } #menu-08 { width: 51px; } /* First value should = the starting X position of the buttin - Second value = image height */ #menu-01 a:hover {background: transparent url(../images/menu.jpg) -44px -61px no-repeat;} #menu-02 a:hover {background: transparent url(../images/menu.jpg) -90px -61px no-repeat;} #menu-03 a:hover {background: transparent url(../images/menu.jpg) -153px -61px no-repeat;} #menu-04 a:hover {background: transparent url(../images/menu.jpg) -266px -61px no-repeat;} #menu-05 a:hover {background: transparent url(../images/menu.jpg) -389px -61px no-repeat;} #menu-06 a:hover {background: transparent url(../images/menu.jpg) -494px -61px no-repeat;} #menu-07 a:hover {background: transparent url(../images/menu.jpg) -603px -61px no-repeat;} #menu-08 a:hover {background: transparent url(../images/menu.jpg) -686px -61px no-repeat;} /* VERTICAL sprite nav * ------------------------------------------------------------------------------------- */ #nav { position: relative; background: url(../images/procedures.jpg) top left no-repeat; width: 552px; /* Width of buttons, not entite image (or half of entire image) */ height: 326px; /* Height of entire image */ } #nav li span { display: none; } #nav li { margin: 0; padding: 0; list-style: none; position: absolute; } #nav li, #nav a { height: 33px; /* Each button must have the same height, define it here */ display: block; } /* Fix IE5.01Win jumping bug - Hide from IE Mac \*/ * html #nav li { height:1% } /* End */ /* Increments of each button height defined above */ #nav-01 { top: 70px; } #nav-02 { top: 103px; } #nav-03 { top: 136px; } #nav-04 { top: 169px; } #nav-05 { top: 202px; } /* width set here should be same width set in #nav */ #nav-01, #nav-02, #nav-03, #nav-04, #nav-05 { left: 0px; width: 552px; } /* Changed values should match "top" numbers specified above */ #nav-01 a:hover { background: transparent url(../images/procedures.jpg) -552px -70px no-repeat; } #nav-02 a:hover { background: transparent url(../images/procedures.jpg) -552px -103px no-repeat; } #nav-03 a:hover { background: transparent url(../images/procedures.jpg) -552px -136px no-repeat; } #nav-04 a:hover { background: transparent url(../images/procedures.jpg) -552px -169px no-repeat; } #nav-05 a:hover { background: transparent url(../images/procedures.jpg) -552px -202px no-repeat; } /* logo elements * ------------------------------------------------------------------------------------- */ #header { position:relative; width: 780px; height: 118px; background: url(../images/header.jpg) left top no-repeat; } #header a { position: absolute; width: 270px; height: 51px; top: 43px; left: 44px; } /* image replacement * ------------------------------------------------------------------------------------- */ #active-x {height:182px;} .index { background: url(../images/flash/bkgrnd01.jpg) left top no-repeat; padding-left:18px; height: 182px; width: 780px; } .about { background: url(../images/banners/about.jpg) left top no-repeat; } .cosmetic { background: url(../images/banners/cosmetic.jpg) left top no-repeat; } .restorative { background: url(../images/banners/restorative.jpg) left top no-repeat; } .gallery { background: url(../images/banners/gallery.jpg) left top no-repeat; } .contact { background: url(../images/banners/contact.jpg) left top no-repeat; } .sitemap { background: url(../images/banners/sitemap.jpg) left top no-repeat; } #about-title { width: 552px; height: 70px; background: url(../images/page-titles/about.jpg) left top no-repeat; } #cosmetic-title { width: 552px; height: 70px; background: url(../images/page-titles/cosmetic.jpg) left top no-repeat; } #restorative-title { width: 552px; height: 70px; background: url(../images/page-titles/restorative.jpg) left top no-repeat; } #gallery-title { width: 552px; height: 70px; background: url(../images/page-titles/gallery.jpg) left top no-repeat; } #contact-title { width: 552px; height: 70px; background: url(../images/page-titles/contact.jpg) left top no-repeat; } #thankyou-title { width: 552px; height: 70px; background: url(../images/page-titles/thankyou.jpg) left top no-repeat; } #implant-title { width: 552px; height: 70px; background: url(../images/page-titles/implant.jpg) left top no-repeat; } #sedation-title { width: 552px; height: 70px; background: url(../images/page-titles/sedation.jpg) left top no-repeat; } #sitemap-title { width: 552px; height: 70px; background: url(../images/page-titles/sitemap.jpg) left top no-repeat; } #forms-title { width: 552px; height: 70px; background: url(../images/page-titles/title-patient-forms.jpg) left top no-repeat; } #contactus { width: 228px; height: 60px; background: url(../images/contactus.jpg) left top no-repeat; } #location { width: 228px; height: 60px; background: url(../images/sub/location.jpg) left top no-repeat; } #patientforms { width: 228px; height: 60px; background: url(../images/sub/patientforms.jpg) left top no-repeat; } #printforms { width: 228px; height: 60px; background: url(../images/sub/printforms.jpg) left top no-repeat; } #articles { width: 228px; height: 60px; background: url("../images/articles.jpg") left top no-repeat; margin-top: 20px; } #title-procedures-index { height: 73px; background: url(../images/index/title-procedures-index.jpg) no-repeat; } /* content * ------------------------------------------------------------------------------------- */ #banner { width: 780px; height: 184px; } #content-container { width: 780px; } #content-left { width: 552px; float: left; } #content-left p { margin: 0px 30px 14px 64px; } #content-left h1 { margin: 0px 30px 14px 64px; font-size: 14px; color: #794B7C; } #content-left h2 { margin: 0px 30px 14px 64px; font-size: 13px; color: #506986; } #content-left h3 { margin: 0px 30px 14px 64px; color: #000; } #content-left h4 { margin: 0px 30px 14px 64px; } #content-left ul { margin: 10px 0px 10px 0px; } #content-left li { margin: 0px 30px 5px 84px; list-style-image: url(../images/bullet.jpg); } #content-left li.procedures { margin: 0; } #content-left li ul li{ margin: 0px 30px 5px 20px; list-style-image: url(../images/bullet.jpg); } #welcome { width: 552px; padding-bottom: 10px; background: url(../images/index/welcome.jpg) left top no-repeat; } #welcome p { margin: 0px 30px 14px 64px; } #welcome .toppadding { padding-top: 83px; } #dr { width: 280px; float: left; } #dr p { margin: 13px 10px 9px 64px; } #featured { width: 272px; float: left; } #featured p { margin: 13px 38px 9px 28px; } #featured img.bna { margin: 0 auto; padding-left: 20px; } #content-right { width: 228px; float: left; } #content-right p { margin: 5px 50px 10px 27px; } #content-right form { margin: 5px 0px 40px 27px; } #content-right img { margin-left: 27px; } #contact_main input.margin { margin-left:285px; } #bna-left { width: 276px; float: left; } #bna-left img { margin: 0px 0px 10px 60px; } #bna-right { width: 266px; float: left; } #bna-right img { margin: 0px 0px 10px 10px; } #procedures-div { width: 552px; float: left; } #img-girl { width: 282px; height: 263px; float: left; background: url(../images/index/img-girl.jpg); } /* footer * ------------------------------------------------------------------------------------- */ #page-footer { background: url(../images/page-footer.jpg) left top no-repeat; width: 780px; height: 125px; clear: both; } #footer { width: 780px; margin: 0px auto; padding: 14px; text-align: center; } #footer p { margin: 10px 0px 10px 0px; color: #FFFFFF; } #footer ul {margin: 0 20px 10px 10px; line-height:25px;} #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 7px; display: inline; border-left: 1px solid #fff; } #footer li.first { border: none; } #footer a:link, #footer a:visited { color: #FFFFFF; text-decoration: underline; } #footer a:hover, #footer a:active { color: #D9E3E8; text-decoration: underline; } /* quick contact elements * ------------------------------------------------------------------------------------- */ input, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border: 1px solid #A3BFE0; background-color: #A3BFE0; margin-bottom: 3px; } .quickcontact { width: 150px; } #contact_business { display: none; } /* do not remove */ .qc-submit { width: 63px; height: 20px; margin-left: 87px; margin-top: 5px; border: none; } /* patient form elements * ------------------------------------------------------------------------------------- */ #patient-main input, #patient-main textarea, #patient-main select { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border: 1px solid #A3BFE0; background-color: #A3BFE0; margin: 0 0 5px 0; clear: both; vertical-align: middle; } #patient-main-wrapper { width: 490px; margin-left: 0px; } #patient-main p.form-title { width: 375px; background-color: #A3BFE0; font-size:1.1em; font-weight: bold; color: #04456B; clear:both; margin-bottom: 24px; } #health-history p, #health-history h1 { padding: 0 40px 0 65px; } td.heading-bg { padding: 10px 0 0 65px; } #health-history td label { padding-left: 50px; width: 240px;} #health-history td label.line2 { margin-bottom: 13px;} #health-history td label.line3 { margin-bottom: 26px;} td.directions { padding: 10px 0 5px 75px; } #contact_main label.form-align, #patient-privacy label.form-align { width: 520px; text-align:center;} /* main contact elements * ------------------------------------------------------------------------------------- */ #contact_main input, #contact_main textarea, #contact_main select, #patient-privacy input, #patient-privacy textarea, #patient-privacy select { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border: 1px solid #A3BFE0; background-color: #A3BFE0; margin: 0 0 5px 0; clear: both; vertical-align: middle; } #contact-main-wrapper { width: 490px; margin-left: 0px; } input.button, #contact_main label input.button, #patient-main label input.button, #patient-privacy label input.button { width: 63px; height: 20px; left: 110%; border: none; margin: 10px 0px 0px 0px; } input.button-digital { margin: 0px 0px 20px 0px; } input submit a:hover { text-decoration: underline; } #contact #quickcontact-wrapper { display: none; } #contact-main, #contact-main-history, #patient-privacy { margin-top: 25px; } #contact_main br, #contact-main-history br, #patient-privacy br { clear: both; } #contact_main p, #contact_main h1, #contact-main-history p, #contact-main-history h1, #patient-privacy p, #patient-privacy h1 { text-align: left; margin: 10px 0 10px 0; } #contact_main p.clear-textarea, #contact-main-history p.clear-textarea, #patient-privacy p.clear-textarea { margin-top:80px; } #contact_main p.clear-textarea2, #contact-main-history p.clear-textarea2 { margin-top: 2px; } #contact_main .radio, #contact-main-history .radio { width: 14px; background: transparent; border: none; } #contact_main label input, #contact_main label select, #contact-main-history label input, #contact-main-history label select { position: absolute; left: 276px; width: 150px; top: -2px; } #patient-privacy label input{ position: absolute; left: 350px; width: 150px; top: -2px; } #contact_main label, #contact-main-history label, #patient-privacy label { position: relative; width: 250px; display: block; margin: 0 10px; text-align: right; height: 20px; } #contact_main label textarea, #contact-main-history label-textarea, #patient-privacy label textarea { position: absolute; left: 110%; top: 0px; width: 160px; height: 100px; } #contact_main label.print, #contact-main-history label.print { margin-top: 40px; } #contact_main label input.small-box, #contact-main-history label input.small-box { clear: none; float: left; width: 30px; margin-right: 10px; } #contact_main .checkbox, #contact-main-history .checkbox, #patient-privacy .checkbox { width: 14px; background: transparent; border: none; float: inherit; } .table-text { text-align: right; } /* misc layout elements * ------------------------------------------------------------------------------------- */ .top { display: block; text-align: right; font-size: 11px; } img.img-left { float: left; margin: 0px 10px 10px 0px; } img.img-right { float: right; margin: 0px 30px 10px 10px; } div.clear { clear: both; } .bna { margin: 0px 0px 5px 5px; }