/* this is sallys brilliant site */ /* 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: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 14px; color: #ffffff; padding: 0; margin: 0; } /* 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: #989082; text-decoration: none; font-weight: bold; } a:hover { color: #D7B325; } /* LAYOUT * these styles determine the size and location of the page elements */ #container { /* Centres content on screen */ margin: 20px auto; width: 780px; } #page { width: 780px; } #leftcol { float: left; width: 207px; /* margin-right: 10px; if we want a margin */ } #rightcol { float: left; width: 573px; } /* LEFT COLUMN */ #logo { background: url(images/TITLESoKipling.gif) 0 0 no-repeat; /* define image url */ height: 36px; /* define image size */ width: 207px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 40px; } /* MENU STYLES */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu { margin: 0; padding: 0; list-style: none; } #menu li { margin: 0; padding: 0; } #menu a { width: 207px; 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_home a { background: url(images/BUThome.gif) 0 0 no-repeat; height: 30px; } #menu_introduction a { background: url(images/BUTintro.gif) 0 0 no-repeat; height: 30px; } #menu_commissions a { background: url(images/BUTcomm.gif) 0 0 no-repeat; height: 30px; } #menu_kitchens a { background: url(images/BUTkitchen.gif) 0 0 no-repeat; height: 30px; } #menu_kitchenscont a { background: url(images/BUTcontemp.gif) 0 0 no-repeat; height: 30px; } #menu_kitchenstrad a { background: url(images/BUTtrad.gif) 0 0 no-repeat; height: 30px; } #menu_kitchensaccess a { background: url(images/BUTaccess.gif) 0 0 no-repeat; height: 30px; } #menu_kitchensworktops a { background: url(images/BUTworktops.gif) 0 0 no-repeat; height: 30px; } #menu_bedrooms a { background: url(images/BUTbedroom.gif) 0 0 no-repeat; height: 30px; } #menu_final a { background: url(images/BUTfinal.gif) 0 0 no-repeat; height: 30px; } #menu_pm a { background: url(images/BUTpm.gif) 0 0 no-repeat; height: 55px; } #menu_contact a { background: url(images/BUTcontact.gif) 0 0 no-repeat; height: 30px; } /* By defining the :hover property for the links, we can create * rollovers, without one line of javascript. */ #menu_home a:hover, #menu_home.selected a { background: url(images/BUThomeOV.gif) 0 0 no-repeat; } #menu_introduction a:hover, #menu_introduction.selected a { background: url(images/BUTintroOV.gif) 0 0 no-repeat; } #menu_commissions a:hover, #menu_commissions.selected a { background: url(images/BUTcommOV.gif) 0 0 no-repeat; } #menu_kitchens a:hover, #menu_kitchens.selected a { background: url(images/BUTkitchenOV.gif) 0 0 no-repeat; } #menu_kitchenscont a:hover, #menu_kitchenscont.selected a { background: url(images/BUTcontempOV.gif) 0 0 no-repeat; } #menu_kitchenstrad a:hover, #menu_kitchenstrad.selected a { background: url(images/BUTtradOV.gif) 0 0 no-repeat; } #menu_kitchensaccess a:hover, #menu_kitchensaccess.selected a { background: url(images/BUTaccessOV.gif) 0 0 no-repeat; } #menu_kitchensworktops a:hover, #menu_kitchensworktops.selected a { background: url(images/BUTworktopsOV.gif) 0 0 no-repeat; } #menu_bedrooms a:hover, #menu_bedrooms.selected a { background: url(images/BUTbedroomOV.gif) 0 0 no-repeat; } #menu_final a:hover, #menu_final.selected a { background: url(images/BUTfinalOV.gif) 0 0 no-repeat; } #menu_pm a:hover, #menu_pm.selected a { background: url(images/BUTpmOV.gif) 0 0 no-repeat; } #menu_contact a:hover, #menu_contact.selected a { background: url(images/BUTcontactOV.gif) 0 0 no-repeat; } #mission { background: url(images/TEXThome.gif) 0 0 no-repeat; height: 169px; width: 207px; text-indent: -9000px; overflow: hidden; } #contact { position:absolute; top: 545px; } #contact span { display: block; background: url(images/Telephone.gif) 0 0 no-repeat; height: 20px; width: 207px; text-indent: -9000px; overflow: hidden; } #contact a { display: block; background: url(images/BUTemail.gif) 0 0 no-repeat; height: 37px; width: 207px; text-indent: -9000px; overflow: hidden; } #contact a:hover { display: block; background: url(images/BUTemailOV.gif) 0 0 no-repeat; height: 37px; width: 207px; text-indent: -9000px; overflow: hidden; } /* RIGHT COLUMN */ #content { margin-top: 20px; width: 573px; } #content a { color: #5c574f; text-decoration: none; font-weight: bold; } #content a:hover { color: #ffffff; } #subleft { float: left; padding: 10px; height: 186px; } .full{ width: 553px; background-color: #999184; } .fullmustard{ width: 553px; background-color: #D7B325; } .smallmustard{ width: 221px; background-color: #D7B325; } .smallgray{ width: 353px; background-color: #999184; } .smallgray2{ width: 312px; background-color: #999184; } .quote { color: #F4CB2B; font-weight: bold; } #subright { float: right; height: 206px; } #subrighttext { /* Text Right Side */ float: right; width: 165px; height: 186px; background-color: #D7B325; padding: 10px; } #sub4 { /* Image Left Side */ float: left; width: 312px; } .thumb { /* Small Images */ float: right; width: 99px; height: 99px; margin-left: 7px; margin-bottom: 7px; background-color: #D7B325; } /*FOOTER*/ #footer { clear:both; text-align: right; padding: 10px 0px; color: #999184; } .small{ width: 353px; } .gray{ background-color: #999184; }