/*------------------------------------------- REFORMATTED HTML TAGS --------------------------------------------*/ /* controls the appearence of standard HTML elements where there is no class or div specific formatting */ a:link, a:visited { color: #009; } a:hover { color: #c06; } body { background-color: #fff; margin: 0; padding: 0; color: #000; font: normal 1.0em Verdana, Arial, sans-serif; } /* used to divide forms into sections */ fieldset { padding: 5px 5px 20px 5px;} h1 { font: bold 1.2em "Trebuchet MS", Verdana, Arial, sans-serif; padding: 0; color: #ff0d00; margin: 16px 0 0; } h2 { font: bold 1.0em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #ff0d00; } h3 { font: bold 0.9em "Trebuchet MS", Verdana, sans-serif; color: #a86608; } h4 { font: bold 0.8em "Trebuchet MS", Verdana, sans-serif; color: #666; } /* used to connect form input fields and their labels */ label { font: bold 0.8em Verdana, Arial, sans-serif; color: #666; padding: 16px 0px 3px; display: block; } label.inline { display: inline; font-weight: normal; } legend { font: bold 0.9em Verdana, Arial, sans-serif; color: #b33900; } ol, p, td, ul { font: normal 0.8em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #666; } /* correct sizing where p appears inside other block level elements */ td p, ol p, ul p { font-size: 1.0em } th { font: normal 0.8em/1.5 Verdana, Arial, Helvetica, sans-serif; color: #666; background-color: #ccc; text-align: left; } /*------------------------------------------- STYLES USED TO POSITION HEADER, CONTENT, AND FOOTERS --------------------------------------------*/ /* group everything in one overall box so that we can centre it etc. */ #container { width: 758px; margin: 0 auto 15px; border: 1px solid #666; background-color: #fff; } /* Style for the header and footer sections */ #header { padding: 5px; text-align: right; height: 73px; } #header img { float: left; } #header p { margin: 0; } #footer { color: #fff; background-color: #808281; text-align: right; padding: 3px 1%; border-top: 1px solid #666; font: normal 0.7em Verdana, Arial, Helvetica, sans-serif; clear: both; } #footer a { color: #fff; text-decoration: underline; } #footer a:visited { color: #fff; text-decoration: underline; } #footer a:hover { color: #fff; text-decoration: none; } /*------------------------------------------- TWO COLUMN LAYOUT USED ON HOME AND TOP LEVEL PAGES --------------------------------------------*/ /* Apply a background to the whole content section to give the illusion of two columns */ .content2 { background: url(../_img/backgrounds/twocol.gif) top left repeat-y; margin: 0; padding: 10px 0 0; } /* position the left hand column */ #leftcol { margin: 0; padding: 310px 15px 0; float: left; width: 470px; } /* leftcol for the homepage (allow grey box text) */ #hleftcol { margin: 0; padding: 300px 0 0; float: left; width: 500px; } #hleftcol p, #hleftcol h { padding: 0 15px; } /*text in the grey box */ div.intro { border-bottom: 1px solid #666; border-top: 1px solid #666; background-color: #efefef; padding: 10px 5px 5px 5px; } div.intro p { font-size: 0.7em; margin-top: 0; } /* set the different background images by applying a class to div id="leftcol" */ .home { background: url(../_img/backgrounds/cover.jpg) top left no-repeat; padding: 0; margin: 0; } .about { background: url(/_img/backgrounds/alpha1.jpg) top left no-repeat; padding: 0; margin: 0; } .carers { background: url(/_img/backgrounds/hands_supporting.jpg) top left no-repeat; padding: 0; margin: 0; } .service { background: url(/_img/backgrounds/payslip.jpg) top left no-repeat; padding: 0; margin: 0; } .contact { background: url(/_img/backgrounds/contact.jpg) top left no-repeat; padding: 0; margin: 0; } .serviceusers { background: url(/_img/backgrounds/service_users_home.jpg) top left no-repeat; padding: 0; margin: 0; } .councils { background: url(/_img/backgrounds/carers.jpg) top left no-repeat; padding: 0; margin: 0; } /* position the right hand column */ .rightcol { width: 230px; font-size: 0.85em; margin: 0 0 0 510px; padding: 0; } /* change standard display for h1 in right-hand column */ .rightcol h1 {background-color: #999999; color: #fff; padding: 5px; margin-top: 0em; font: bold 1.1em Helvetica, Arial, Verdana, sans-serif; } /* change colors of h1s in the right-hand column */ #councils .rightcol h1 { background-color: #1c0d81; } #home .rightcol h1 { background-color: #ffffff; font: normal 1.5em Helvetica, Arial, Verdana, sans-serif; } #carers .rightcol h1 { background-color: #106224; } #about .rightcol h1 { background-color: #20248C; } #service .rightcol h1 { background-color: #0e6821; } #serviceusers .rightcol h1 { background-color: #ff0d00; } #news .rightcol h1 { background-color: #ff0d00; } /* change standard display for h2 in right-hand column */ .rightcol h2 { color: #666; font: bold 0.9em Helvetica, Arial, Verdana, sans-serif; } /* change display for h2s in right-hand column when they are links */ .rightcol h2 a:link, .rightcol h2 a:visited { color: #666; text-decoration: underline; } .rightcol h2 a:hover { color: #b33900; text-decoration: none; } /* change colors of h1s in the left-hand column */ #councils .leftcol h1 { background-color: #1c0d81; } #home .leftcol h1 { background-color: #ffffff; font: normal 1.5em Helvetica, Arial, Verdana, sans-serif; } #carers .leftcol h1 { background-color: #106224; } #about .leftcol h1 { background-color: #20248C; } #service .leftcol h1 { background-color: #0e6821; } #serviceusers .leftcol h1 { background-color: #ff0d00; } div.infopack { margin: 0 0 20px; background: url(/_img/backgrounds/info_pack_bottom.gif) bottom left no-repeat; color: #fff; font-size: 1.2em; padding: 0 15px; } .infopack p { line-height: 1; color: #fff; padding: 0 0 15px; margin: 0.5em 0; } .infopack p.first { background: url(/_img/backgrounds/info_pack_top.gif) top left no-repeat; margin: 0 -15px 0; padding: 15px 15px 0; line-height: 1; } .infopack a:link, .infopack a:visited { color: #fff; } /*------------------------------------------- TWO COLUMN LAYOUT USED ON LOW LEVEL PAGES (IN THIS SECTION ON LEFT) --------------------------------------------*/ .content3 { background: url(/_img/backgrounds/twocolb.gif) top left repeat-y; margin: 0; padding: 15px 0 0; } #columna { margin: 0; padding: 20px 10px 10px; float: left; width: 200px; font-size: 0.8em; } #columna h3 { color: #fff; background-color: #FF0D00; padding: 2px; margin-top: 0; } #serviceusers #columna h3 { color: #fff; background-color: #20248C; padding: 2px; } #carers #columna h3 { color: #fff; background-color: #106224; padding: 2px; } #councils #columna h3 { color: #fff; background-color: #1c0d81; padding: 2px; } #service #columna h3 { color: #fff; background-color: #0e6821; padding: 2px; } #about #columna h3 { color: #fff; background-color: #20248C; padding: 2px; } #columnb { margin: 0 0 0 250px; padding: 10px 0 10px; width: 490px; } #columnb h1 { margin-top: 0; color: #ff0d00; } #about .columnb h1 { margin-top: 0; color: #20248C; } #service .columnb h1 { margin-top: 0; color: #0e6821; } #service .columnb h3 { color: #fff; background-color: #0e6821; padding: 2px; } /*------------------------------------------- SINGLE COLUMN LAYOUTS --------------------------------------------*/ /* content runs (almost) the full width of the page */ .solecol { padding: 2% 5%; width: auto; } /* content runs 50% */ .solecol50p { padding: 2% 25%; width: auto; } .clear { clear: both; height: 1px; font: normal 1px Verdana, Arial, Helvetica, sans-serif; } /* add a picture at the top */ #pictureservice { height: 200px; background: url(../_img/backgrounds/payslip1.jpg) top left no-repeat; border-bottom: 1px solid #666;} #picturecontact { height: 300px; background: url(../_img/backgrounds/contact1.jpg) top left no-repeat; border-bottom: 1px solid #666;} #pictureserviceusers2 { height: 200px; background: url(../_img/backgrounds/service_users.jpg) top left no-repeat; border-bottom: 1px solid #666; } #picturesubscribe { height: 300px; background: url(../_img/backgrounds/go.jpg) top left no-repeat; border-bottom: 1px solid #666; } #picturenews { height: 300px; background: url(../_img/backgrounds/news.jpg) top left no-repeat; border-bottom: 1px solid #666; } #pictureabout2 { height: 200px; background: url(../_img/backgrounds/coins.jpg) top left no-repeat; border-bottom: 1px solid #666; } #pictureabout3 { height: 200px; background: url(../_img/backgrounds/about3.jpg) top left no-repeat; border-bottom: 1px solid #666; } #picturecarers2 { height: 200px; background: url(../_img/backgrounds/hands_deep.jpg) top left no-repeat; border-bottom: 1px solid #666; } #picturecouncils2 { height: 200px; background: url(../_img/backgrounds/carers_deep.jpg) top left no-repeat; border-bottom: 1px solid #666; } #picturenews3 { height: 200px; background: url(../_img/backgrounds/news3.jpg) top left no-repeat; border-bottom: 1px solid #666; } #charityevent { height: 200px; background: url(../_img/backgrounds/comedians1.jpg) top left no-repeat; border-bottom: 1px solid #666; } /*------------------------------------------- STYLES USED IN THE NAVIGATION BAR --------------------------------------------*/ #nav ul { margin: 0px; padding: 0px; cursor: default; list-style-type: none; display: inline; } #linkbar li { display: inline; padding: 0px; margin: 0px; } #nav { background-color: #FF0D00; padding: 3px; font: normal 1em Helvetica, Arial, Verdana, sans-serif; margin-top: 8px; } #nav a { color: #ffffff; text-decoration: none; padding: 2px 10px; } #nav a:hover { padding: 1px 9px; color: #fff; border: 1px solid #fff; } #nav a#thissection { color: #ffffff; font: bold 1em Helvetica, Arial, Verdana, sans-serif; } #nav a#thissection:hover { color: #fff; text-decoration: none; } /* change background color of the navigation bar for various sections */ #councils #nav { background-color: #1c0d81; } #councils #nav a:hover { background-color: #1c0d81; } #carers #nav { background-color: #106224; } #carers #nav a:hover { background-color: #106224; } #agencies #navigation { background-color: #454545; } #agencies #navigation a:hover { background-color: #747474; } #about #nav { background-color: #20248C; } #about #nav a:hover { background-color: #20248C; } #service #nav { background-color: #0e6821; } #service #nav a:hover { background-color: #0e6821; } #members #navigation { background-color: #a52900; } #members #navigation a:hover { background-color: #a52900; } #serviceusers #nav { background-color: #FF0D00; } #serviceusers #nav a:hover { background-color: #FF0D00; } .locator { width: 758px; margin: 0 auto; padding: 10px 0; font: normal 0.7em Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #999; background-color: #fff; } /*------------------------------------------- STYLES USED IN FORMS --------------------------------------------*/ .textbox { font: normal 1.0em Verdana, Arial, Helvetica, sans-serif; color: #333; background-color: #ccc; width: 95%; border: 1px solid #000; padding: 2px; } .textbox2 { font: normal 1.0em Verdana, Arial, Helvetica, sans-serif; color: #333; background-color: #ccc; width: 50%; border: 1px solid #000; padding: 2px; } .menubox { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; background-color: #cccccc; border: 1px solid #000000; padding: 2px; } .textbox50 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; background-color: #cccccc; width: 50%; border: 1px solid #000000; padding: 2px; } .textbox4 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; background-color: #cccccc; width: 40px; border: 1px solid #000000; padding: 2px; } .formleft { float: left; width: 45%; margin-right: 5%; } .formright { width: 45%; float: left; } .formcenter { width: 400px; margin: 0 auto; } /*------------------------------------------- MISCELLANEOUS STYLES --------------------------------------------*/ .small { font-size: 85%; } p.small { font-size: 70%; } .error { color: #c00; } /* position the logos at the bottom of the home page which show we are W3C compliant for accessibility */ .accesscheck { width: 758px; margin: 15px auto; } /*------------------------------------------- STYLES USED IN ACCESSIBILITY FEATURES --------------------------------------------*/ .switchertop { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; background-color: #ccc; border-bottom: 1px solid #000; width: 98%; text-align: right; padding: 3px 1%; } .switcherbottom { display: none; font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; background-color: #efefef; border-bottom: 1px solid #000; width: 98%; text-align: right; padding: 3px 1%; } #jump { display: none; } #heardText { font-size: 0.8em; }