/* 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: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #6D6E71; 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: #009F8A; text-decoration: none; font-weight: bold; } a:hover { color: #939393; } /* 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; } /* STATIC PAGE ELEMENTS */ #logomark { float: right; background: url(images/halogo.gif) 0 0 no-repeat; /* define image url */ height: 100px; /* define image size */ width: 220px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ } #logomark a { float: right; background: url(images/halogo.gif) 0 0 no-repeat; /* define image url */ height: 100px; /* define image size */ width: 220px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ } /* MENU STYLES */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu ul { clear: both; margin: 0; padding: 0; list-style: none; } #menu li { float: left; margin-bottom: 15px; padding: 0; background-color: #EBEBEB; } #menu a { height: 25px; 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; width: 63px; } #menu_blog a { background: url(images/BUTblog.gif) 0 0 no-repeat; width: 49px; } #menu_services a { background: url(images/BUTservices.gif) 0 0 no-repeat; width: 68px; } #menu_portfolio a { background: url(images/BUTportfolio.gif) 0 0 no-repeat; width: 79px; } #menu_websites a { background: url(images/BUTwebsites.gif) 0 0 no-repeat; width: 71px; } #menu_vacancies a { background: url(images/BUTvacancies.gif) 0 0 no-repeat; width: 80px; } *#menu_contact a { background: url(images/BUTcontact.gif) 0 0 no-repeat; width: 52px; }* #menu_twitter a { background: url(images/BUTtwitter.gif) 0 0 no-repeat; width: 226px; } /* 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_blog a:hover, #menu_blog.selected a { background: url(images/BUTblogOV.gif) 0 0 no-repeat; } #menu_services a:hover, #menu_services.selected a { background: url(images/BUTservicesOV.gif) 0 0 no-repeat; } #menu_portfolio a:hover, #menu_portfolio.selected a { background: url(images/BUTportfolioOV.gif) 0 0 no-repeat; } #menu_websites a:hover, #menu_websites.selected a { background: url(images/BUTwebsitesOV.gif) 0 0 no-repeat; } #menu_vacancies a:hover, #menu_vacancies.selected a { background: url(images/BUTvacanciesOV.gif) 0 0 no-repeat; } #menu_contact a:hover, #menu_contact.selected a { background: url(images/BUTcontactOV.gif) 0 0 no-repeat; } #menu_twitter a:hover, #menu_twitter.selected a { background: url(images/BUTtwitterOV.gif) 0 0 no-repeat; } /* SUB MENU STYLES */ #menu_sub { clear: both; margin: 20px; padding: 0; list-style: none; } #menu_sub li { float: left; padding: 0; } #menu_sub a { height: 38px; display: block; text-indent: -9000px; overflow: hidden; } /* replace menu items*/ /*services*/ #menu_services_corporate a { background: url(images/BUTcorp.gif) 0 0 no-repeat; width: 276px; } #menu_services_print a { background: url(images/BUTprint.gif) 0 0 no-repeat; width: 236px; } #menu_services_3d a { background: url(images/BUT3d.gif) 0 0 no-repeat; width: 141px; } #menu_services_package a { background: url(images/BUTpackage.gif) 0 0 no-repeat; width: 153px; } #menu_services_photo a { background: url(images/BUTphoto.gif) 0 0 no-repeat; width: 197px; } #menu_services_websitedesign a { background: url(images/BUTwebdesign.gif) 0 0 no-repeat; width: 204px; } /*portfolio*/ #menu_portfolio_salcombe a { background: url(images/BUTsalcombe.gif) 0 0 no-repeat; width: 349px; } #menu_portfolio_cruising a { background: url(images/BUTcruising.gif) 0 0 no-repeat; width: 253px; } #menu_portfolio_truronian a { background: url(images/BUTtruronian.gif) 0 0 no-repeat; width: 167px; } #menu_portfolio_library a { background: url(images/BUTlibrary.gif) 0 0 no-repeat; width: 278px; } #menu_portfolio_rustler a { background: url(images/BUTrustler.gif) 0 0 no-repeat; width: 257px; } #menu_portfolio_trevaskis a { background: url(images/BUTtrevaskis.gif) 0 0 no-repeat; width: 225px; } #menu_portfolio_cch a { background: url(images/BUTcch.gif) 0 0 no-repeat; width: 379px; } #menu_portfolio_menai a { background: url(images/BUTmenai.gif) 0 0 no-repeat; width: 347px; } #menu_portfolio_trewithen a { background: url(images/BUTtrewithen.gif) 0 0 no-repeat; width: 158px; } #menu_portfolio_nare a { background: url(images/BUTnare.gif) 0 0 no-repeat; width: 156px; } #menu_portfolio_wing a { background: url(images/BUTwing.gif) 0 0 no-repeat; width: 292px; } #menu_portfolio_kob a { background: url(images/BUTkob.gif) 0 0 no-repeat; width: 225px; } #menu_portfolio_roundhouse a { background: url(images/BUTroundhouse.gif) 0 0 no-repeat; width: 195px; } #menu_portfolio_cvc a { background: url(images/BUTcvc.gif) 0 0 no-repeat; width: 214px; } /*replace rollovers*/ /*services*/ #menu_services_corporate a:hover, #menu_services_corporate.selected a { background: url(images/BUTcorpOV.gif) 0 0 no-repeat; } #menu_services_print a:hover, #menu_services_print.selected a { background: url(images/BUTprintOV.gif) 0 0 no-repeat; } #menu_services_3d a:hover, #menu_services_3d.selected a { background: url(images/BUT3dOV.gif) 0 0 no-repeat; } #menu_services_package a:hover, #menu_services_package.selected a { background: url(images/BUTpackageOV.gif) 0 0 no-repeat; } #menu_services_photo a:hover, #menu_services_photo.selected a { background: url(images/BUTphotoOV.gif) 0 0 no-repeat; } #menu_services_websitedesign a:hover, #menu_services_websitedesign.selected a { background: url(images/BUTwebdesignOV.gif) 0 0 no-repeat; } /*portfolio*/ #menu_portfolio_salcombe a:hover, #menu_portfolio_salcombe.selected a { background: url(images/BUTsalcombeOV.gif) 0 0 no-repeat; } #menu_portfolio_cruising a:hover, #menu_portfolio_cruising.selected a { background: url(images/BUTcruisingOV.gif) 0 0 no-repeat; } #menu_portfolio_truronian a:hover, #menu_portfolio_truronian.selected a { background: url(images/BUTtruronianOV.gif) 0 0 no-repeat; } #menu_portfolio_library a:hover, #menu_portfolio_library.selected a { background: url(images/BUTlibraryOV.gif) 0 0 no-repeat; } #menu_portfolio_rustler a:hover, #menu_portfolio_rustler.selected a { background: url(images/BUTrustlerOV.gif) 0 0 no-repeat; } #menu_portfolio_trevaskis a:hover, #menu_portfolio_trevaskis.selected a { background: url(images/BUTtrevaskisOV.gif) 0 0 no-repeat; } #menu_portfolio_cch a:hover, #menu_portfolio_cch.selected a { background: url(images/BUTcchOV.gif) 0 0 no-repeat; } #menu_portfolio_menai a:hover, #menu_portfolio_menai.selected a { background: url(images/BUTmenaiOV.gif) 0 0 no-repeat; } #menu_portfolio_trewithen a:hover, #menu_portfolio_trewithen.selected a { background: url(images/BUTtrewithenOV.gif) 0 0 no-repeat; } #menu_portfolio_nare a:hover, #menu_portfolio_nare.selected a { background: url(images/BUTnareOV.gif) 0 0 no-repeat; } #menu_portfolio_wing a:hover, #menu_portfolio_wing.selected a { background: url(images/BUTwingOV.gif) 0 0 no-repeat; } #menu_portfolio_kob a:hover, #menu_portfolio_kob.selected a { background: url(images/BUTkobOV.gif) 0 0 no-repeat; } #menu_portfolio_roundhouse a:hover, #menu_portfolio_roundhouse.selected a { background: url(images/BUTroundhouseOV.gif) 0 0 no-repeat; } #menu_portfolio_cvc a:hover, #menu_portfolio_cvc.selected a { background: url(images/BUTcvcOV.gif) 0 0 no-repeat; } /* CLOCK */ #liveclock { background-color:#EBEBEB; float: right; height: 15px; width: 82px; padding: 5px; } /* CONTENT STYLES */ #content { border: 1px Solid LightGray; clear:both; width: 778px; margin-bottom: 15px; } .homepage { background: url(images/IMAGEhomepage.jpg) 24px 20px no-repeat; height: 425px; } .puzzlebanner { background: url(puzzlegal/puzzlebanner.gif) 24px 20px no-repeat; height: 720px; } .news { background: url(images/IMAGEnews.jpg) 475px 0 no-repeat; height: 900px; } .contact { background: url(images/map.gif) 411px 0 no-repeat; height: 400px; } .vacancies { background: url(images/IMAGEvacancies.jpg) 476px 0 no-repeat; height: 400px; } .services { height: 426px; } .portfolio { height: 600px; } .websiteexamples { height: 1050px; } .bg { color: #009F8A; } .websiteframe { margin: 0px 20px 10px 0px; border: 0; } #sampleimage{ clear: both; float:left; height: 350px; width: 440px; } #pagetitle { width: 305px; float: left; margin: 50px 0px 20px 0px; font-weight: bold; } #photopagetitle { width: 305px; float: left; margin: 20px 0px 0px 20px; font-weight: bold; } .gallerythumbs { float: left; margin: 10px 20px 10px 0px; border: 0; } .calendargallery { float: left; margin: 10px 20px 10px 0px; border: 1px solid grey; } #pagetitleimage { width: 300px; float: left; margin: 70px 0px 20px 20px; font-weight: bold; } .info { margin: 100px 30px 20px 20px; } /* WEBSITE EXAMPLE BUTTONS */ #menu_sites { clear: both; margin: 20px; padding: 0; list-style: none; } #menu_sites li { float: left; width: 182px; padding: 0; } #menu_sites a { display: block; } .smallnames{ height:30px; } /* SMALL EXAMPLE BUTTONS */ #menu_examples { margin: 20px; padding: 0; list-style: none; } #menu_examples li { float: left; width: 20px; padding: 0; } #menu_examples a { height: 15px; display: block; text-indent: -9000px; overflow: hidden; } .menu_example a { background: url(images/BUTsquare.gif) 0 0 no-repeat; } .menu_example a:hover, .selected a { background: url(images/BUTsquareOV.gif) 0 0 no-repeat; } /* FOOTER STYLES */ #footer { background-color:#009F8A; color: #ffffff; clear:both; padding: 7px; } #footer a { color: #ffffff; } #footer a:hover { color: #BFE7E2; } /*NEW HOMEPAGE */ #welcometext { float: left; background: url(images/HOMEtextbox.gif) 0 0 no-repeat; /* define image url */ margin-left: 20px; margin-top: 20px; height: 258px; /* define image size */ width: 727px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ } .homepagenew { height: 900px; } #menu_graphics { clear: both; margin: 20px; padding: 0; list-style: none; } #menu_graphics li { margin-bottom: 20px; float: left; padding: 0; } #menu_graphics a { height: 204px; width: 229px; display: block; text-indent: -9000px; overflow: hidden; } #menu_graphics a:hover { background-position: 0 -204px; } #menu_graphics_id a { background: url(images/HOMEcorporate.jpg) 0 0 no-repeat; margin-right: 20px; } #menu_graphics_print a { background: url(images/HOMEprint.jpg) 0 0 no-repeat; margin-right: 20px; } #menu_graphics_web a { background: url(images/HOMEweb.jpg) 0 0 no-repeat; } #menu_graphics_3d a { background: url(images/HOME3d.jpg) 0 0 no-repeat; margin-right: 20px; } #menu_graphics_package a { background: url(images/HOMEpackage.jpg) 0 0 no-repeat; margin-right: 20px; } #menu_graphics_photo a { background: url(images/HOMEphoto.jpg) 0 0 no-repeat; } #blog { display:block; float:left; background-color:#ebebeb; height: 140px; width: 229px; margin: 0 20px 20px 20px; } #portfolio { display:block; float:left; background: url(images/HOMEportfoliomag.gif) 0 0 no-repeat; background-color:#ebebeb; height: 140px; width: 478px; margin: 0 0 20px 0; } .boxcontent { margin: 10px; } .boxcontent b { color: #009f8a; font-size: 15px; line-height: 20px; }