/* Bush Telegraph Website */ /* 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; orange = #F78E1D; */ body { background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; color: #000000; padding: 0; margin: 0; } /* BLOCK STYLES- * this definition will remove all margins and padding from the default blocks */ h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; font-family: Arial; } h2 { margin: 20px 0 10px 0; font-size:1.2em; } h3 { text-transform: capitalize; } #content p { padding: 0; margin: 0; } /* LINK STYLES * these style definitions affect all links, unless explicitly overridden */ a { color: #F78F1D; text-decoration: none; font-weight: bold; } a:hover { color: #000000; } /* LAYOUT * these styles determine the size and location of the page elements */ #container { /* Centres content on screen */ margin: 20px auto; width: 800px; } #page { width: 800px; } /* HEADER */ #logo { float: left; background: url(images/Bush_Logo.gif) 0 0 no-repeat; /* define image url */ height: 110px; /* define image size */ width: 585px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 0; } #telephone { float: right; background: url(images/LocalTelephone.gif) 0 0 no-repeat; /* define image url */ height: 110px; /* define image size */ width: 215px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 0; } h2#telephone { margin:0; padding:0; } #banner { float: left; width: 800; height: 150px; } p#banner { margin:0; padding: 0;} /* MENU STYLES */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu { clear: both; margin: 0; padding: 0; list-style: none; } #menu li { float: left; margin: 0; padding: 0; } #menu a { height: 24px; 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: 84px; } #menu_telecoms a { background: url(images/BUTtelecoms.gif) 0 0 no-repeat; width: 90px; } #menu_networks a { background: url(images/BUTnetworks.gif) 0 0 no-repeat; width: 160px; } #menu_partners a { background: url(images/BUTpartners.gif) 0 0 no-repeat; width: 117px; } #menu_history a { background: url(images/BUThistory.gif) 0 0 no-repeat; width: 111px; } #menu_products a { background: url(images/BUTshop.gif) 0 0 no-repeat; width: 110px; } #menu_contact a { background: url(images/BUTcontact.gif) 0 0 no-repeat; width: 128px; } /* 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_home a:hover, #menu_home.selected a { background: url(images/BUThomeOV.gif) 0 0 no-repeat; } #menu_telecoms a:hover, #menu_telecoms.selected a { background: url(images/BUTtelecomsOV.gif) 0 0 no-repeat; } #menu_networks a:hover, #menu_networks.selected a { background: url(images/BUTnetworksOV.gif) 0 0 no-repeat; } #menu_partners a:hover, #menu_partners.selected a { background: url(images/BUTpartnersOV.gif) 0 0 no-repeat; } #menu_history a:hover, #menu_history.selected a { background: url(images/BUThistoryOV.gif) 0 0 no-repeat; } #menu_products a:hover, #menu_products.selected a { background: url(images/BUTshopOV.gif) 0 0 no-repeat; } #menu_contact a:hover, #menu_contact.selected a { background: url(images/BUTcontactOV.gif) 0 0 no-repeat; } /* Content */ #welcome { float: left; background: url(images/homeintro.gif) 0 0 no-repeat; /* define image url */ height: 420px; /* define image size */ width: 525px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ margin-bottom: 0; } #title { /* Section Title */ float: left; width: 760px; height: 40px; margin: 20px 20px 0px 20px; } #info1 { /* content*/ float: left; width: 760px; margin: 0 20px 20px 20px; } #infopartners { /* content*/ float: left; width: 760px; margin: 0 20px 20px 20px; } #infopartners a { color: #000000; } #logos { width: 760px; margin: 20px 20px 0px 20px; border-bottom: 1px Solid orange; } .orange { color: #FF9900; } /*Form Content*/ #contactform { clear: both; width: 760px; margin: 0 0 20px 20px; } form .field { width: 200px; background-color: #ffffff; } 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: 470px; } form label { display: block; width: 120px; float: left; } #leftcolform { /* content */ float: left; width: 70px; margin: 0 20px 20px 20px; line-height: 25px; } #leftcolform2 { /* content */ float: left; width: 200px; margin: 0 20px 20px 20px; } #rightcolform { /* content */ float: left; width: 50px; margin: 0 20px 20px 20px; } #rightcolform2 { /* content */ float: left; width: 200px; margin: 0 20px 20px 20px; } p#address { /* Address Left Side */ float: left; padding: 10px 15px 15px 15px; } #rightlogo { /* Image Right Side */ float: right; } /* LOGIN BUTTONS */ #engineer a { display: block; background: url(images/BUT_E_Login.gif) 0 0 no-repeat; height: 26px; width: 139px; text-indent: -9000px; overflow: hidden; } #engineer a:hover { display: block; background: url(images/BUT_E_LoginOV.gif) 0 0 no-repeat; height: 26px; width: 139px; text-indent: -9000px; overflow: hidden; } #customer a { display: block; background: url(images/BUT_C_Login.gif) 0 0 no-repeat; height: 26px; width: 139px; text-indent: -9000px; overflow: hidden; } #customer a:hover { display: block; background: url(images/BUT_C_LoginOV.gif) 0 0 no-repeat; height: 26px; width: 139px; text-indent: -9000px; overflow: hidden; } /* dwl */ .clear { clear: both; } .content { margin-left: 20px; } div.content h2 { clear: both;} div.content img.bullet-image { margin: 0 30px 10px 0; float: left; } div.content img.right { float: right; margin-left: 10px; } div.content img.left { float: left; margin-right: 10px; } div#content { } div#content p { margin-bottom: 10px; } .footer-links { margin: 0px 0 0 15px; clear: left; color: #666; } .big-text, .page-title { color: #F78E1D; letter-spacing:90%; font-weight:200; } .page-title { text-transform:uppercase; font-size:1.5em; } h1.page-title { margin: 26px 0 25px 20px;} div.hp-welcome { margin: 0px 0 0 20px; } div.hp-welcome p.mission { font-weight:normal; font-size:1.3em; font-family: Arial; text-align:center; color:#333; } div.hp-welcome div.left, div.hp-welcome div.mid { margin-right:30px; } div.hp-welcome div.left, div.hp-welcome div.mid, div.hp-welcome div.right { margin-top:20px; width: 240px; float: left; } div.hp-welcome h2 { margin: 0 0 3px 0; font-size: 1.4em; } div.hp-welcome p {margin-bottom: 5px; } div.hp-welcome img { float: right; margin-left: 5px; } .hp-intro { float: left; width: 500px; margin: 25px 0 0px 20px; height: auto; padding: 0 40px 0 0; } .hp-intro p { text-align: justify; } p.news-date { color: #666666; margin-top:3px; } div.profile { overflow:hidden; margin-bottom:20px; } div.profile p { margin-bottom:10px; } div.profile h2 { margi: 0 0 10px 0; } div.profile img { float: right; margin: 0 0 10px 10px; } #homenews{ float: left; width: 240px; margin-top:25px; font-size:0.9em; } div#homenews p { margin:0px; text-align:justify;} /* blog */ a.post-footer-link { font-size:inherit; color: inherit; margin-bottom: 10px; font-weight: normal; } div.post { margin-bottom: 30px; } div.post h3.post-title { margin-bottom: 0px; padding-bottom: 0px; } div.post p.news-date { margin-bottom: 10px; } div#header h1.page-title a { font-weight: inherit; } /* remote help */ div.remotehelp { border: 1px solid #ddd; background-color:#efefef; padding: 10px; margin-top: 20px; } div.remotehelp h2 { margin: 0 0 3px 0; font-size: 1.4em; } div.remotehelp img { float: right; margin: 0 0 10px 10px; } /* menu styles */ #jsddm { margin: 0; padding: 0; clear:both; background-color: #F3882C; height:auto; overflow:hidden; padding-left:100px; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #F3882C; padding: 5px 12px; text-decoration: none; border-right: none; width: auto; color: #000; white-space: nowrap; letter-spacing:0.05em; text-transform:uppercase; font-size:0.85em; margin-right:10px; } #jsddm li a:hover, #jsddm li a.selected { color: #fff; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline; } /*#jsddm li ul li a { width: auto; background: #A9C251; color: #24313C}*/ /*#jsddm li ul li a:hover { background: #8EA344}*/ /*FOOTER*/ #footer { clear:both; text-align: left; background-color:#000000; width: 800px; height: 100px; color: #ffffff; } #footer a { color: #F78F1D; text-decoration: none; font-weight: normal; } #footer a:hover { color: #ffffff; } div#footer p { margin-bottom:0; padding-bottom: 5px;} /* buttons */ a.ovalbutton{ background: transparent url('images/buttons/oval-orange-left.gif') no-repeat top left; display: block; float: left; font: normal 13px Tahoma; /* Change 13px as desired */ line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */ height: 24px; /* Height of button background height */ padding-left: 11px; /* Width of left menu image */ text-decoration: none; } a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{ color: #494949; /*button text color*/ } a.ovalbutton span{ background: transparent url('images/buttons/oval-orange-right.gif') no-repeat top right; display: block; padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/ } a.ovalbutton:hover{ /* Hover state CSS */ background-position: bottom left; } a.ovalbutton:hover span{ /* Hover state CSS */ background-position: bottom right; color: black; } .buttonwrapper{ /* Container you can use to surround a CSS button to clear float */ overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */ width: 100%; margin-bottom:10px; } /* end - buttons */