/* HIGH STREET SIGNS V2 FINAL--------------------------------------- Syle version for 1.5.0.11 Firefox browswer Version 1.0 Authour: Melvyn Phillips Email: info@bromel ---------------------------------------- */ /* Body ----------------------------------------*/ body{margin:0; padding:0; height: 100%; font-family: Georgia, "Times New Roman", Times, serif; background: #FFFFFF url(../../Interface/bannerback.gif) repeat -3px;} /*----- Menu links --------------- */ .contactstate a, .servicestate a, .workstate a, .aboutstate a{display: block; height: 222px; width: 148px; cursor: default;} .contactstate a{background: url(../../Interface/CONTACTON.png) no-repeat;} .servicestate a{background-image: url(../../Interface/SERVICEON.png);} .workstate a{background-image: url(../../Interface/WORKSON.png);} .aboutstate a{background-image: url(../../Interface/ABOUTON.png);} .servicestate2 a{display: block; height: 222px; width: 148px; background-image: url(../../Interface/SERVICEON.png);} /* Structual elements ------------------------------------------*/ #logo { height: 100%; width: 100%; text-indent: -9000px; background-image: url(../../Interface//HSSlogo2.png); background-repeat: no-repeat; } #logo h1 {float:left;} #chipboard{background: #0000CC url(../../Interface/chipboard.jpg) repeat;} #leftofruler {background: url(../../Interface//Tapecentre.png) no-repeat -15px; height: 32px; width: 134px; overflow:hidden; float:left; width:30%;} #rightofruler {background: url(../../Interface//Tapecentreend.png) no-repeat 2px; float: right; height: 32px; width: 37px;} #rulermain {overflow:hidden; width:100%; clear:left; height:32px; background: url(../../Interface//whitetape-measure.gif) repeat;} #menu, #introductory, #introwelcome, #aboutwelcome, #contactwelcome, #serviceswelcome, #workwelcome {background: url(../../Interface//Tapebottom.png) no-repeat -14px top; padding-top: 50px;} #sub-section {background: url(../../Interface//Tapeendbottom.png) no-repeat 101% top; width:25%;} #footer {background: url(../../Interface//footer.jpg);height:200px; clear:left} #spirtlevel {background:url(../../Interface//ruler.gif) repeat; height:28px;} #mainmenu {background: url(../../Interface//Tapeendtop.png) no-repeat 602px bottom; width:613px; height: 222px; float: right;} /*-------------------------------------------------------------------------------------*/ #chipboard, #header,#menu,#content,#sub-section,#footer,#crown,#spirtlevel,#leftpillar,#mainmenu,#logo,#search, #introductory, #introwelcome, #aboutwelcome, #contactwelcome, #serviceswelcome, #workwelcome {overflow:hidden; } /*-------------------------------------------------------------------------------------*/ /* safari and opera need this */ #chipboard,#footer, #spirtlevel {width:100%} #menu,#content,#sub-section,#leftpillar, #logo,#introductory, #mainsection, #servsection, #introwelcome, #aboutwelcome, #contactwelcome, #serviceswelcome, #workwelcome{float:left} #menu, #introductory, #introwelcome, #aboutwelcome, #contactwelcome, #serviceswelcome, #workwelcome {width:22.5%} #content, #servsection, #mainsection {width:52.5%} /*footer settings -----------------------*/ #footer p {font-size: 0.8em; font-variant: small-caps;} #footer .p1 {float: left;color: #736554;} #footer .p2 {float: right; font-variant: normal; font-size: 70%; color: #736554;} #footer .p2 a{color: #666;font-weight: bold;} #footer .p2 a:hover{color: #FFF;} #copyrightfooter {height: 30px; margin: 120px 3% 0 3%; padding: 0px 20px 10px 20px; border: 0px solid #808080;} /*add column navigation -------------------------------------------------------------------------------------------------------*/ #mainmenu ul {margin: 0;padding: 0;list-style: none;width: 600px; height: 222px; text-indent: -9000px;} #mainmenu ul li {float: left;} /*mainmenu states -------------------------------------------------------------------------------------------------------*/ ul .about a, ul .services a, ul .work a, ul .contact a {display: block;height: 222px;width: 148px;} ul .about a{background: url(../../Interface//ABOUT.png) no-repeat;} ul .services a{background: url(../../Interface//SERVICE.png) no-repeat;} ul .work a{background: url(../../Interface//WORKS.png) no-repeat;} ul .contact a{background: url(../../Interface//CONTACT.png) no-repeat;} /*mainmenu hover states -------------------------------------------------------------------------------------------------------*/ ul .about a:hover, ul .services a:hover, ul .work a:hover, ul .contact a:hover{display: block; height: 222px; width: 148px;} ul .about a:hover{background: url(../../Interface//ABOUT.png) no-repeat -148px;} ul .services a:hover{background: url(../../Interface//SERVICE.png) no-repeat -148px;} ul .work a:hover{background: url(../../Interface//WORKS.png) no-repeat -148px;} ul .contact a:hover{background: url(../../Interface//CONTACT.png) no-repeat -148px;} /*header styles -------------------------------------------------------------------------------------------------------*/ #introductory h3, #menu h3, #introwelcome h3, #aboutwelcome h3, #contactwelcome h3, #serviceswelcome h3, #workwelcome h3 { font-family:georgia,serif; color:#6192AB; font-size:13px; font-weight:bold; margin: 0px; padding-bottom: 0.63em;} #introductory h2, #menu h2, #introwelcome h2, #contactwelcome h2, #serviceswelcome h2, #workwelcome h2, #aboutwelcome h2{ font-family: Arial, Helvetica, sans-serif; font-size:0.95em; word-spacing: 0.1em; margin: 0px; padding-bottom: 2px; color: #b4350c} #introductory h4, #menu h4, #introwelcome h4, #aboutwelcome h4, #contactwelcome h4, #serviceswelcome h4, #workwelcome h4 { font-family: Arial, Helvetica, sans-serif; font-size: 0.55em; word-spacing: 0.1em; margin: 0px; padding-bottom: 0.9em; color: #b4350c;} #introductory p, #menu p, #introwelcome p, #aboutwelcome p, #contactwelcome p, #serviceswelcome p, #workwelcome p{ font-family: Arial, Veranda, Helvetica, sans-serif; font-size: 0.7em; word-spacing: 0.2em; margin: 0px; padding-bottom: 0px; line-height:160%; color: #666666;} /*maincontent -------------------------------------------------------------------------------------------------------*/ #mainsection h2, #content h2 {font-size: 1.8em; margin-bottom: -11px; color: #6898AE;} #mainsection h2 {color: #746B50;} #servsection h3{color:#999999; font-size:0.9em; line-height:125%; letter-spacing:0.1em; padding:5px 0px 5px 0px; text-transform: uppercase; display: block; background: url(../../Interface/divcont.gif) repeat-x bottom;} #servsection h2{font-size: 2em; margin-bottom: -10px; color: #CC9900;} #servsection p{ color:#000000; font-size:1em; font-weight:normal; line-height:150%;} #contentinfo {margin-top: 40px; padding: 0px 35px 0px 50px;} #mainsection h3, #content h3 {color:#6192AB; font-size:0.9em; line-height:125%; letter-spacing:0.1em; padding:9px 0px 5px 0px; text-transform: uppercase; display: block; background: url(../../Interface/divcont.gif) repeat-x bottom;} #mainsection h5, #content h5 {background: url(../../Interface/Signature.png) no-repeat -3px 20px; height: 120px; width: 150px; font-size: 1em;} #mainsection h6, #content h6 {padding:0px;font-size: 0.9em;font-variant: small-caps;color: #6F7867; margin: -30px 0px 0px 0px;} /*paragraph styling -------------------------------------------------------------------------------------------------------*/ .parastyle, .pfix{color:#000000; font-size:1em; font-weight:normal; line-height:150%;} .firstpara {margin-top: -9px;} /*rightsub section -------------------------------------------------------------------------------------------------------*/ #sub-content, #services-content, #contact-content{margin: 100px 0px 0px 12px; border-left-style: solid; border-left-color: #E3E3CE; padding: 20px 0px 0px 20px; } #sub-content h3, #services-content h3, #contact-content h3 {font:1.09em Verdana, Arial, Helvetica, sans-serif; word-spacing: 0.2em;margin: 0px; padding-bottom: 0.5em; color: #4F432D; text-transform: uppercase; letter-spacing:0.19em; background: url(../../Interface/divcontblack.gif) repeat-x bottom; width: 10em;} #sub-content h4, #services-content h4, #contact-content h4 {color: #993366; font-size: 1.0em; margin-bottom: 7px;} #sub-content p, #services-content p, #contact-content p {font: bold 0.7em/160% Veranda, Helvetica, sans-serif; word-spacing: 0.1em; color: #82755E; width: 222px; margin-top: 7px; padding: 0px 0px 10px 0px ;} #sub-content h4 a {text-decoration: none; color: #993366;} #sub-content h4 a:hover {text-decoration: underline; color: #E3E3CE; background-color: #746B50;} #sub-content a img {color: #33CCFF; border: none;} #services-content h3 {letter-spacing:0.12em; width: 12em; font-weight: bold;} #servicecats {padding: 0; list-style: none; font-size: 1em; margin-top: 10px; font-weight: bold;} #servicecats li {padding: 7px 0px 7px 0px; } #servicecats a {background: url(../../Interface/servx4.png) no-repeat; height: 28px; color: #999999; padding: 5px 0px 5px 32px;text-decoration: none;} #servicecats a:hover {color: #C4A200; background: url(../../Interface/servx3.png) no-repeat; height: 30px;} #servicecats .status a {color: #746B50; background: url(../../Interface/servx5.png) no-repeat; height: 28px; padding: 5px 0px 5px 32px; text-decoration: none; cursor:default;} /*------Works, About, Services and contact display colours ---*/ #introwelcome h2, #introwelcome h4{color: #0941BC;} #aboutwelcome h2, #aboutwelcome h4{color: #996600;} .dropcap, .dropcap2 {float:left;color:#D4D4C7;font-size:7em;line-height:70px;padding:14px 9px 0px 0px;} .dropcap2 {color:#666666;} .dropcap3 {float:left;color:#C5C5C5;font-size:5.2em;line-height:70px;padding:0px 9px 0px 0px;} #contactwelcome h2, #contactwelcome h4{color: #67286F;} #serviceswelcome h2, #serviceswelcome h4{color: #CC7A00;} /*-------------Punctuation----------------*/ #introcontent, #menucontent {margin: 15px 0px 0px 25px; color: #460000;} blockquote {font-size: 1.3em; font-weight: bold; font-style: italic; color: #555; width: auto; padding: 0px; line-height: 150%; margin: 0px 15px 0px 15px;} blockquote span{font-size: 1.4em; color: #999999;} #contentinfo img {padding-bottom: 0px;} .base {background-image: url(../../Interface/homeboarder2.gif); height: 13px; border: 0px;} .title {font-weight: bold; font-style: normal;} .caption {font-style: italic; font-size: 0.9em; margin-top: 2px; margin-bottom: 10px; text-align: center;} /*---breadcrumbs---------------------------*/ #bread {color: #EBEBEB;padding: 5px 5px 5px 25px;margin: 25px 0 25px 0;font-size: 0.8em; background: #000 url(../../Interface/pathpoint.jpg) no-repeat 10px center;} #bread ul {margin-left: 0; padding-left: 0;display: inline; border: none;} #bread ul li {margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline;} .first {color: #000000;} #bread a{font-weight: bold; text-decoration: none; color: #EBEBEB;} #bread a:hover{color: #6FC6FF;text-decoration:underline;} /*---Quotation source name---------------------------*/ .source li{text-align: right;} .source {font-size: 0.8em;list-style-type: none; margin-top: -8px; } .source span{color: #684522;font-weight: bold;} /*---Additions--------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------*/ #Philos {padding: 0; list-style: none; font-size: 1.2em; margin-top: 10px; font-weight: bold;} #Philos li {height: 28px; color: #746B50; padding: 3px 0px 5px 32px; text-decoration: none; background:url(../../Interface/qualitypoints.png) no-repeat;} .remember {font-weight: bold;color: #666666;} /*---Contact--------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------*/ #contact-content p, #contact-content h4{font-family: Georgia, "Times New Roman", Times, serif} #contact-content p {font-size: 1em;margin-top: 0px;font-weight: normal;color: #333333;} #contact-content h4{font-size: 0.8em; color: #669999; padding: 0px; margin-bottom: 3px;font-style: italic;} #contact-content p a {text-decoration: underline; color: #333333;} #contact-content p a:hover{color: #E7E4D1; background-color: #666666; font-weight: bold; padding: 4px 6px 4px 0px; text-decoration: none;} #mainsection p a {text-decoration: underline; color: #333333;} #mainsection p a:hover{color: #E7E4D1; background-color: #666666; padding: 4px 0px 4px 0px;}