/* Calweton Veterinary Practice - Designed and Built by Hudson Armstrong Design */ /* BODY STYLE * this definition will affect both the block e.g. margin, padding, * and some styles will be inherited by the tags inside e.g. font, background; */ body { background-color: #408297; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #ffffff; padding: 0; margin: 0; } .mustard { color: #E8DE6A; font-size: 12px; } /* BLOCK STYLES * this definition will remove all margins and padding from the default blocks */ h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; } /* LINK STYLES * these style definitions affect all links, unless explicitly overridden */ a { color: #ffffff; text-decoration: none; font-weight: bold; } a:hover { color: #E8DE6A; } /* LAYOUT * these styles determine the size and location of the page elements */ /* Centres content on screen */ #container { margin: 40px auto; width: 840px; background-image:url(images/pageedge.gif); background-repeat:repeat-y; } #page { width: 800px; } /* HEADER */ #logo { float: left; background: url(images/LOGOcalweton.gif) 0 0 no-repeat; /* define image url */ height: 164px; /* define image size */ width: 368px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 0; margin-left: 20px; } #telephone { float: right; background: url(images/phonenumber.gif) 0 0 no-repeat; /* define image url */ height: 137px; /* define image size */ width: 157px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 0; margin-right: 10px; } /* MENU STYLES HOMEPAGE 1 */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu_home { clear: both; margin: 20px 0 10px 0; height:200px; padding: 0; list-style: none; } #menu_home li { float: left; } #menu_home a { height: 230px; display: block; text-indent: -9000px; overflow: hidden; } /* Use the background-image property to specify the graphic we want * to display for each menu item. */ #menu_practice a { background: url(images/BUTourpractice.jpg) 0 0 no-repeat; width: 193px; } #menu_farms a { background: url(images/BUTfarms.jpg) 0 0 no-repeat; width: 194px; } #menu_pets a { background: url(images/BUTyourpets.jpg) 0 0 no-repeat; width: 193px; } #menu_horses a { background: url(images/BUThorses.jpg) 0 0 no-repeat; width: 180px; } /* By defining the :hover property for the links, we can create * rollovers, without one line of javascript. */ #menu_practice a:hover, #menu_practice.selected a { background: url(images/BUTourpracticeOV.jpg) 0 0 no-repeat; } #menu_farms a:hover, #menu_farms.selected a { background: url(images/BUTfarmsOV.jpg) 0 0 no-repeat; } #menu_pets a:hover, #menu_yourpets.selected a { background: url(images/BUTyourpetsOV.jpg) 0 0 no-repeat; } #menu_horses a:hover, #menu_horses.selected a { background: url(images/BUThorsesOV.jpg) 0 0 no-repeat; } /* MENU STYLES HOMEPAGE 1 */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu_home2 { clear: both; margin: 10px 0 10px 0; padding: 10px 0 0 0; width: 760px; list-style: none; border-top: 1px solid #fff; } #menu_home2 li { float: left; margin: 0; padding: 0; } #menu_home2 a { display: block; text-indent: -9000px; overflow: hidden; } /* Menu Items */ #menu_pre a { background: url(images/BUTpre_home.gif) 0 0 no-repeat; width: 200px; } #menu_shop a { background: url(images/BUTshop_home.gif) 0 0 no-repeat; width: 120px; } #menu_news a { background: url(images/BUTnews_home.gif) 0 0 no-repeat; width: 176px; } /*ROLLOVERS*/ #menu_pre a:hover, #menu_pre.selected a { background: url(images/BUTpre_homeOV.gif) 0 0 no-repeat; } #menu_shop a:hover, #menu_shop.selected a { background: url(images/BUTshop_homeOV.gif) 0 0 no-repeat; } #menu_news a:hover, #menu_news.selected a { background: url(images/BUTnews_homeOV.gif) 0 0 no-repeat; } /* MENU STYLES MAIN MENU AREAS */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu_main { margin: 0 10px 0 0; height:119px; padding: 0; list-style: none; } #menu_main li { float: right; } #menu_main a { height: 119px; display: block; text-indent: -9000px; overflow: hidden; } /* Use the background-image property to specify the graphic we want * to display for each menu item. */ #menu_practice2 a { background: url(images/BUTSMLourpractice.jpg) 0 0 no-repeat; width: 97px; } #menu_farms2 a { background: url(images/BUTSMLfarms.jpg) 0 0 no-repeat; width: 97px; } #menu_pets2 a { background: url(images/BUTSMLyourpets.jpg) 0 0 no-repeat; width: 97px; } #menu_horses2 a { background: url(images/BUTSMLhorses.jpg) 0 0 no-repeat; width: 93px; } /* Rollovers */ #menu_practice2 a:hover, #menu_practice2.selected a { background: url(images/BUTSMLourpracticeOV.jpg) 0 0 no-repeat; } #menu_farms2 a:hover, #menu_farms2.selected a { background: url(images/BUTSMLfarmsOV.jpg) 0 0 no-repeat; } #menu_pets2 a:hover, #menu_pets2.selected a { background: url(images/BUTSMLyourpetsOV.jpg) 0 0 no-repeat; } #menu_horses2 a:hover, #menu_horses2.selected a { background: url(images/BUTSMLhorsesOV.jpg) 0 0 no-repeat; } /* MENU STYLES LEFT COLUMN MENU*/ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu_leftside { margin: 20px 10px 0 0; padding: 0; list-style: none; } #menu_leftside li { float: left; } #menu_leftside a { height:20px; width: 150px; display: block; text-indent: -9000px; overflow: hidden; } /* Use the background-image property to specify the graphic we want * to display for each menu item. */ #menu_operation a { background: url(images/BUT2operation.gif) 0 0 no-repeat; } #menu_supplies a { background: url(images/BUT2supplies.gif) 0 0 no-repeat; } #menu_dentistry a { background: url(images/BUT2dentistry.gif) 0 0 no-repeat; } #menu_repeat a { background: url(images/BUT2repeat.gif) 0 0 no-repeat; } #menu_advice a { background: url(images/BUT2advice.gif) 0 0 no-repeat; } #menu_ortho a { background: url(images/BUT2ortho.gif) 0 0 no-repeat; } #menu_pengh a { background: url(images/BUT2pengh.gif) 0 0 no-repeat; } #menu_behav a { background: url(images/BUT2behav.gif) 0 0 no-repeat; } #menu_matters a { background: url(images/BUT2matters.gif) 0 0 no-repeat; } #menu_equine a { background: url(images/BUT2equine.gif) 0 0 no-repeat; } #menu_team a { background: url(images/BUT2team.gif) 0 0 no-repeat; } #menu_facilities a { background: url(images/BUT2facilities.gif) 0 0 no-repeat; } #menu_contact a { background: url(images/BUT2contact.gif) 0 0 no-repeat; } #menu_equine a { background: url(images/BUT2equine.gif) 0 0 no-repeat; } /* Rollovers */ #menu_operation a:hover, #menu_operation.selected a { background: url(images/BUT2operationOV.gif) 0 0 no-repeat; } #menu_supplies a:hover, #menu_supplies.selected a { background: url(images/BUT2suppliesOV.gif) 0 0 no-repeat; } #menu_dentistry a:hover, #menu_dentistry.selected a { background: url(images/BUT2dentistryOV.gif) 0 0 no-repeat; } #menu_repeat a:hover, #menu_repeat.selected a { background: url(images/BUT2repeatOV.gif) 0 0 no-repeat; } #menu_advice a:hover, #menu_advice.selected a { background: url(images/BUT2adviceOV.gif) 0 0 no-repeat; } #menu_ortho a:hover, #menu_ortho.selected a { background: url(images/BUT2orthoOV.gif) 0 0 no-repeat; } #menu_pengh a:hover, #menu_pengh.selected a { background: url(images/BUT2penghOV.gif) 0 0 no-repeat; } #menu_behav a:hover, #menu_behav.selected a { background: url(images/BUT2behavOV.gif) 0 0 no-repeat; } #menu_matters a:hover, #menu_matters.selected a { background: url(images/BUT2mattersOV.gif) 0 0 no-repeat; } #menu_equine a:hover, #menu_equine.selected a{ background: url(images/BUT2equineOV.gif) 0 0 no-repeat; } #menu_team a:hover, #menu_team.selected a{ background: url(images/BUT2teamOV.gif) 0 0 no-repeat; } #menu_facilities a:hover, #menu_facilities.selected a{ background: url(images/BUT2facilitiesOV.gif) 0 0 no-repeat; } #menu_contact a:hover, #menu_contact.selected a{ background: url(images/BUT2contactOV.gif) 0 0 no-repeat; } /* CONTENT ON SITE */ #pagetitles { clear: both; float: right; width: 330px; height: 35px; margin-right: 10px; } #content { float: left; width: 760px; border-top: 1px solid #fff; margin: 0 30px 20px 30px; border-bottom: 1px solid #fff; } #leftcol { float: left; width: 170px; margin: 10px 0 0 0; } #rightcol { float: left; width: 590px; margin: 10px 0 0 0; } /*FOOTER*/ #footer { clear: both; width: 760px; height: 40px; margin: 20px 30px 0px 30px; } #address { float: left; width: 620px; } #hatag { float:right; width: 100px; text-align: right; } #bottom{ width: 840px; height: 22px; background-image:url(images/pageedgebottom.gif); background-repeat:no-repeat; } #top{ width: 840px; height: 22px; background-image:url(images/pageedgetop.gif); background-repeat:no-repeat; } /*Form Content*/ #contactform { clear: both; width: 500px; } form .field { width: 200px; } form ol { list-style: none; margin: 1em 0 0 0; padding: 0; } form ol li { height: 30px; list-style: none; margin: 0; padding: 0; } #enqfield { position: absolute; margin-top: -210px; margin-left: 350px; } #buttons { padding-left: 130px; } form label { display: block; width: 130px; float: left; } .rightcolimage { padding-right: 20px; }