/*----------------------------------------------------------------------------- Screen Style Sheet Author: Dinkum Web Solutions Email: info@dinkumweb.com.au Project: Donna Whitehouse-Pike http://www.donnawhitehouseppike.com Version: 1.0 -----------------------------------------------------------------------------*/ /* ---IMPORTANT -------------------------------------------------------------- This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. ---------------------------------------------------------------------------*/ /* =CSS reset ------------------------------- -----------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin: 0; } li, dd { margin: 0; } fieldset { padding: .5em; } select option { padding: 0 5px; } ul, li { list-style: none; } .hide { display: none; } .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; width: 0; height: 0; font-size: 0; overflow: hidden; } a img, img { border: none; } /* =General (usage throughout the entire site) ------------------------------- -----------------------------------------------------------------------------*/ body { background: #5d7113; } /* =Typography (Global) ------------------------------------------------------ -----------------------------------------------------------------------------*/ body { font: 62.5%/1.6 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } p { font: 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 10px 30px 20px 30px; text-align: justify; } p.smaller { font: 1.0em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 10px 30px 0 30px; text-align: justify; } p.pink { color: #ed0180; } #footer_menu p { font: 1.1em/1.1 Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: 40px 10px 0 10px; text-align: right; } #copyright_left p { font: 1.1em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: 0 0 0 20px; } span.textZoom { font: italic 85%/1.3 Verdana, Arial, Helvetica, sans-serif; color: #000; display: block; } span.textGrey, #contactList span { font-weight: bold; color: #333; font-style: italic; } h1 { font: bold 1.6em/1.6 Verdana, Arial, Helvetica, sans-serif; color: #0821aa; margin: 0; padding: 15px 0 10px 0; text-align: center; } h2 { position: relative; width: 643px; height: 72px; font: bold 1.3em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #0821aa; margin: 0 0 25px 359px; padding: 0; text-align: left; } h2.headerIntroducing { background: url(../images/headings/image-headingAbout.gif) no-repeat; } h2.headerAccessibility { background: url(../images/headings/image-headingAccessibility.gif) no-repeat; } h2.headerWeddings { background: url(../images/headings/image-headingWeddings.gif) no-repeat; } h2.headerNaming { background: url(../images/headings/image-headingNaming.gif) no-repeat; } h2.headerFunerals { background: url(../images/headings/image-headingFunerals.gif) no-repeat; } h2.headerVow { background: url(../images/headings/image-headingVow.gif) no-repeat; } h2.headerThankYou { background: url(../images/headings/image-headingThankyou.gif) no-repeat; } h2.headerBookings { background: url(../images/headings/image-headingBookings.gif) no-repeat; } h2.headerContact { background: url(../images/headings/image-headingContact.gif) no-repeat; } h3 { font: bold 1.6em/1.6 Verdana, Arial, Helvetica, sans-serif; color: #ed0180; margin: 0 30px 20px 30px; padding: 0; } h4 { font: bold 1.5em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 10px 30px 20px 30px; padding: 0; } h5 { font: bold 1.3em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #ffffff; margin: 0; padding: 0; } .listAccessibility li { font: 1.1em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 5px 50px 0 50px; padding: 0; list-style: disc; } #listNumber li { font: 1.2em/1.3 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 15px 50px 0 50px; padding: 0; list-style: decimal; } ul.listStandard li { font: 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0 50px 5px 50px; padding: 0; list-style: disc; } ol.listStandard li { font: 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0 50px 0 80px; padding: 0; list-style: decimal; } p#ni1 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textCounselling.gif) no-repeat; } p#ni2 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textBirths.gif) no-repeat; } p#ni3 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textMusicians.gif) no-repeat; } p#ni4 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textJewellery.gif) no-repeat; } p#ni5 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textCoordinators.gif) no-repeat; } p#ni6 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textVenues.gif) no-repeat; } p#ni7 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textPhotographers.gif) no-repeat; } p#ni8 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textWear.gif) no-repeat; } p#ni9 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textStationary.gif) no-repeat; } p#ni10 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textFlorists.gif) no-repeat; } p#ni11 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textCarHire.gif) no-repeat; } p#ni12 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textMakeUp.gif) no-repeat; } p#ni13 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textHair.gif) no-repeat; } p#ni15 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textCatering.gif) no-repeat; } p#ni18 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textGraphics.gif) no-repeat; } p#ni19 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textCarDolls.gif) no-repeat; } p#ni20 { width: 900px; height: 50px; text-indent: -9999px; text-decoration: none; display: block; background: url(../images/contact/image-textGowns.gif) no-repeat; } /* =Layout (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_container { position: relative; width: 1001px; margin: 0 auto; padding: 0; text-align: left; background: url(../images/image-bgMiddle.gif); } #wrapper_header { position: relative; width: 1001px; height: 207px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgHeader.jpg) no-repeat; } #wrapper_middle { position: relative; width: 1001px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgMiddle.gif); } #wrapper_middle img.pageImage { margin: 0 20px 0 20px; } #wrapper_middle img.border { margin: 0 5px 0 0; padding: 2px; border: 1px solid #ed0180; } #middle_leftColumn { position: relative; width: 300px; margin: 0; padding: 0; text-align: left; float: left; } #middle_rightColumn { position: relative; width: 690px; margin: 0; padding: 0; text-align: left; float: left; } ul.contactMenuList li { font: bold 1.5em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0 0 0 50px; padding: 0 0 3px 0; list-style: disc; } ul.contactMenuList li.noBullet { width: 205px; height: 205px; margin-top: 10px; padding: 0; float: left; background: url(../images/weddings/image-contactLink.gif) no-repeat; list-style: none; } ul.contactMenuList li.noBullet a {width: 205px; height: 205px; text-indent: -9999px; text-decoration: none; display: block; } hr { width: 96%; margin: 0 0 20px 10px; } hr.hrCalendar { margin: 0 20px 0 20px; } #wrapper_footer { position: relative; width: 1001px; height: 86px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgFooter.jpg) no-repeat; } #footer_menu { position: relative; width: 721px; height: 61px; margin: 0; padding: 0; text-align: left; background: #fff; } /* =Hidden (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_header h1, #wrapper_header img, #wrapper_middle h2 span { display: none; } /* =Main Navigation (Global) ------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_menu { position: relative; width: 1001px; height: 76px; margin: 0; padding: 0; list-style: none; font-size: 80%; text-align: left; background: url(../images/image-bgMenu.jpg); } #wrapper_menu ul#menu { position: absolute; width: 987px; margin: 28px 0 0 7px; padding: 0; list-style: none; } #wrapper_menu ul#menu li { position: relative; height: 48px; top: 0; padding: 0; float: left; } ul#wrapper_menu li, ul#menu a { /*\*/overflow: hidden;/**/ height: 48px; display: block; } #wrapper_menu ul#menu li a { text-indent: -9999px; text-decoration: none; } #menuAbout a { left: 0; top: 0; width: 142px; background: url(../images/menu/menu-about.gif) top left no-repeat; } #menuWeddings a { left: 142px; top: 0; width: 123px; background: url(../images/menu/menu-weddings.gif) top left no-repeat; } #menuFunerals a { left: 265px; top: 0; width: 114px; background: url(../images/menu/menu-funerals.gif) top left no-repeat; } #menuBaby a { left: 379px; top: 0; width: 185px; background: url(../images/menu/menu-baby.gif) top left no-repeat; } #menuVow a { left: 564px; top: 0; width: 196px; background: url(../images/menu/menu-vow.gif) top left no-repeat; } #menuBookings a { left: 760px; top: 0; width: 122px; background: url(../images/menu/menu-bookings.gif) top left no-repeat; } #menuContact a { left: 882px; top: 0; width: 105px; background: url(../images/menu/menu-contact.gif) top left no-repeat; } #menuAbout a:hover { background: url(../images/menu/menu-about.gif) 0 -48px no-repeat; } #menuWeddings a:hover { background: url(../images/menu/menu-weddings.gif) 0 -48px no-repeat; } #menuFunerals a:hover { background: url(../images/menu/menu-funerals.gif) 0 -48px no-repeat; } #menuBaby a:hover { background: url(../images/menu/menu-baby.gif) 0 -48px no-repeat; } #menuVow a:hover { background: url(../images/menu/menu-vow.gif) 0 -48px no-repeat; } #menuBookings a:hover { background: url(../images/menu/menu-bookings.gif) 0 -48px no-repeat; } #menuContact a:hover { background: url(../images/menu/menu-contact.gif) 0 -48px no-repeat; } /* =Sub Navigation ----------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Breadcrumbs -------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Anchors & =Links --------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_middle a.noLink:link { text-decoration: none; } #wrapper_middle a.noLink:active { text-decoration: none; } #wrapper_middle a.noLink:visited { text-decoration: none; } #wrapper_middle a.noLink:hover { text-decoration: none; background: none; } #wrapper_middle a:link { color: #ed0180; text-decoration: underline; } #wrapper_middle a:visited { color: #ed0180; text-decoration: underline; } #wrapper_middle a:active { color: #ed0180; text-decoration: underline; } #wrapper_middle a:hover { color: #fff; text-decoration: none; background: #ed0180; } #wrapper_middle a.linkExternal:link { color: #ed0180; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #wrapper_middle a.linkExternal:visited { color: #ed0180; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #wrapper_middle a.linkExternal:active { color: #ed0180; text-decoration: underline; } #wrapper_middle a.linkExternal:hover { color: #fff; text-decoration: none; background: #ed0180 url(../images/image-linkExternalOn.gif) no-repeat right center; padding-right: 12px; } #footer_menu a:link, #copyright_left a:link { color: #ffffff; text-decoration: underline; } #footer_menu a:visited, #copyright_left a:visited { color: #ffffff; text-decoration: underline; } #footer_menu a:hover, #copyright_left a:hover { color: #fec60b; text-decoration: underline; } #footer_menu a:active, #copyright_left a:active { color: #ffffff; text-decoration: underline; } /* =Search ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Forms -------------------------------------------------------------------- -----------------------------------------------------------------------------*/ label { width: 140px; margin: 0 0 0 20px; padding: 8px 0 0 0; font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #000; float: left; clear: both; } label.labelMedium { width: 230px; margin: 0; padding: 8px 0 0 0; font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: left; color: #000; float: left; clear: both; } label.labelLarge { width: 100%; margin: 0; padding: 8px 0 0 0; font: bold 1.3em/1.3 Verdana, Arial, Helvetica, sans-serif; text-align: left; color: #000; float: left; clear: both; } form { width: 100%; } .imageForm { margin: 0 20px 0 0; } textarea { width: 400px; margin: 5px 20px 0 20px; padding: 10px 5px 2px 5px; font: bold 150%/1.4 Verdana, Arial, Helvetica, sans-serif; border: 1px solid #000; float: left; } textarea.formTextAreaSmall { width: 300px; margin: 5px 20px 0 20px; padding: 10px 5px 2px 5px; font: bold 150%/1.4 Verdana, Arial, Helvetica, sans-serif; border: 1px solid #000; float: left; } input { width: 400px; height: 1.3em; margin: 5px 20px 0 20px; padding: 5px 5px 2px 5px; font: bold 150%/1.4 Verdana, Arial, Helvetica, sans-serif; float: left; border: 1px solid #000; } input.formInputMedium { width: 300px; height: 1.3em; margin: 5px 20px 0 20px; padding: 5px 5px 2px 5px; font: bold 150%/1.4 Verdana, Arial, Helvetica, sans-serif; float: left; border: 1px solid #000; } input.formInputSmall { width: 100px; height: 1.3em; margin: 5px 20px 0 20px; padding: 5px 5px 2px 5px; font: bold 150%/1.4 Verdana, Arial, Helvetica, sans-serif; border: 1px solid #000; } input.button { width: 213px; height: 50px; margin: 20px 20px 20px 260px; font: bold 110%/1.1 Verdana, Arial, Helvetica, sans-serif; border: none; } form span { width: 80px; margin: 0 0 0 20px; padding: 8px 0 0 0; font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #000; float: left; } /* =Tables ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Copyright ---------------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_copyright { position: relative; width: 1002px; height: 100px; margin: 0; padding: 0; background: #5d7113; } #copyright_left { position: relative; width: 821px; height: 16px; margin: 0; padding: 20px 0 0 0; float: left; } #copyright_right { position: relative; width: 180px; height: 16px; margin: 0; padding: 20px 0 0 0; float: left; } .validXHTML { width: 40px; height: 16px; background: url(../images/image-iconXHTML.gif) top left no-repeat; float: left; display: block; } .validXHTML:hover { background-position: 0 -16px; } .validXHTML span { display: none; } .validCSS2 { width: 40px; height: 16px; background: url(../images/image-iconCSS2.gif) top left no-repeat; float: left; display: block; } .validCSS2:hover { background-position: 0 -16px; } .validCSS2 span { display: none; } .validWAI { width: 40px; height: 16px; background: url(../images/image-iconWAI.gif) top left no-repeat; float: left; display: block; } .validWAI:hover { background-position: 0 -16px; } .validWAI span { display: none; } .siteDWS { width: 40px; height: 16px; background: url(../images/image-iconDWS.gif) top left no-repeat; float: left; display: block; } .siteDWS:hover { background-position: 0 -16px; } .siteDWS span { display: none; } /* end of css */