/* Main Screen CSS Document */ /* ----------------- COLOURS ----------------- */ /* ---- DEFAULT TEXT STYLES ---- */ body, td, div, h1, h2, h3, h4, h5, p, li, label { font-family: Arial, Helvetica, sans-serif; } h1 {} h2 { font-size: 120%; margin: 0 0 .5em 0; color: #006363; font-weight: bold; } h3 { font-size: 100%; margin: .5em 0 .5em 0; color: #c0143c; font-weight: bold; } h4{ font-size: 90%; margin: .5em 0 .5em 0; color: #c0143c; font-weight: bold; } h5 {} p { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.5em; color: #000; } /* -- Lists -- */ ul, ol { margin-top: 0; margin-bottom: 0; } li { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #000; } /* -- Links -- */ a:link { color: #006363; } a:visited { color: #006363; } a:active, a:hover { color: #c0143c; } a { outline: none; } /* -- Other text sizes -- */ .tiny { font-size: 70%; } .big { font-size: 110%; } .large { font-size: 120%; } /* ---- MOUSE POINTER STYLES ---- */ .wait-pointer { cursor: wait; } .default-pointer { cursor: default; } .help-pointer { cursor: help; } .pointy-pointer { cursor: pointer; } /* ---- DEFAULT FORM STYLES ---- */ form { display: inline; } input, textarea, select { font-family: Arial, Helvetica, sans-serif; } textarea { resize: none; } /* ---- DEFAULT RULE STYLE ---- */ hr { border: 0; border-top: 1px dotted #006363; height: 1px; clear: both; } /* ---- CLEAR STYLES ---- */ .clear { clear: both; } /* ---- ERROR STYLES ---- */ /* ---- Error Text ---- */ .error { color: #c00 !important; } /* -- Error Box -- */ .error-box { border: 1px solid #c00; padding: 1px; } .error-box .error-title { padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold; } .error-box .error-text { padding: 3px 5px; } .error-box .error-text p { color: #c00; margin: 0; } /* ---- MARGIN STYLES ---- */ .margin-center { margin-left: auto; margin: auto; } /* -- 1 side -- */ .margin10-t { margin-top: 10px; } .margin10-r { margin-right: 10px; } .margin10-b { margin-bottom: 10px; } .margin10-l { margin-left: 10px; } .margin20-t { margin-top: 20px; } .margin35-t { margin-top: 35px; } /* -- 2 sides -- */ .margin10-t-r { margin-top: 10px; margin-right: 10px; } .margin10-t-b { margin-top: 10px; margin-bottom: 10px; } .margin10-t-l { margin-top: 10px; margin-left: 10px; } .margin10-r-l { margin-right: 10px; margin-left: 10px } .margin10-r-b { margin-right: 10px; margin-bottom: 10px; } .margin10-b-l { margin-bottom: 10px; margin-left: 10px; } /* -- 3 sides -- */ .margin10-t-r-b { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; } .margin10-t-r-l { margin-top: 10px; margin-right: 10px; margin-left: 10px; } .margin10-t-b-l { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; } .margin10-r-b-l { margin-right: 10px; margin-bottom: 10px; margin-left: 10px; } /* -- 4 sides -- */ .margin10 { margin: 10px; } /* ---- TEXT ALIGNMENT STYLES ---- */ .text-align-left { text-align: left !important; } .text-align-center { text-align: center !important; } .text-align-right { text-align: right !important; } /* ---- DIVIDERS ---- */ .hr-divider { border-top: 1px solid #e9e9e9; height: 0; margin:10px 0; padding:0; overflow: hidden; } .hr-divider hr { display: none; visibility: hidden; } .hr-divider-dotted { background: url(../../images/divider_dotted.gif) top left repeat-x; height: 1px; margin:10px 0; padding:0; overflow: hidden; } .hr-divider-dotted hr { display: none; visibility: hidden; } /* ---- COLUMNS ---- */ .column-205 { width: 205px; float: left; } .column-525 { width: 525px; float: left; } /* ---- BODY ---- */ body { margin: 0 10px 10px 10px; background: url(../../images/body_background.gif) #e6f0f0 top left repeat; } /* ---- CONTAINER ---- */ #frame { width: 740px; margin: 0 auto 0 auto; padding: 25px 55px 10px 55px; background-color: #fff; } /* ---- HEADER ---- */ #header { width: 740px; height: 114px; margin-bottom: 10px; } #header-logo { width: 740px; height: 68px; margin-bottom: 20px; border-bottom: 2px solid #d8e7e7; } /* ---- NAVIGATION ---- */ #header-navigation { width: 740px; height: 24px; } #header-navigation div { height: 24px; float: left; display: inline; margin-right: 4px; background-position: 0 0; background-repeat: no-repeat; } #header-navigation a { height: 24px; display: block; outline: none; } #header-navigation a:hover { background-position: 0 -24px; background-repeat: no-repeat; } #header-navigation span { display: none; visibility: hidden; } #header-navigation .selected, #header-navigation .selected a:hover { background-position: 0 -48px; } /* -- Buttons --*/ #header-navigation .home, #header-navigation .home a:hover { width: 49px; background-image: url(../../images/nav_main_home.gif); } #header-navigation .benefitsofpersonalisation, #header-navigation .benefitsofpersonalisation a:hover { width: 170px; background-image: url(../../images/nav_main_benefitsofpersonalisation.gif); } #header-navigation .universitiesandcolleges, #header-navigation .universitiesandcolleges a:hover { width: 162px; background-image: url(../../images/nav_main_universitiesandcolleges.gif); } #header-navigation .positiveenvironmentalimpact, #header-navigation .positiveenvironmentalimpact a:hover { width: 192px; background-image: url(../../images/nav_main_positiveenvironmentalimpact.gif); } #header-navigation .aboutus, #header-navigation .aboutus a:hover { width: 69px; background-image: url(../../images/nav_main_aboutus.gif); } #header-navigation .contactus, #header-navigation .contactus a:hover { width: 78px; background-image: url(../../images/nav_main_contactus.gif); margin-right: 0; } /* ---- SUB NAVIGATION ---- */ #sub-navigation {} #sub-navigation ul { width: 205px; margin: 0; padding: 0; } #sub-navigation li { width: 205px; height: 22px; margin: 0 0 6px 0; padding: 0; background-position: 0 0; background-repeat: no-repeat; list-style: none; } #sub-navigation a { width: 205px; height: 22px; display: block; outline: none; } #sub-navigation a:hover { background-position: 0 -22px; background-repeat: no-repeat; } #sub-navigation span { display: none; visibility: hidden; } #sub-navigation .selected, #sub-navigation .selected a:hover { background-position: 0 -44px; } /* -- Buttons --*/ #sub-navigation .introduction, #sub-navigation .introduction a:hover { background-image: url(../../images/nav_sub_introduction.gif); } #sub-navigation .jamesking, #sub-navigation .jamesking a:hover { background-image: url(../../images/nav_sub_jamesking.gif); } #sub-navigation .grahampeace, #sub-navigation .grahampeace a:hover { background-image: url(../../images/nav_sub_grahampeace.gif); } #sub-navigation .whychange, #sub-navigation .whychange a:hover { background-image: url(../../images/nav_sub_whychange.gif); } #sub-navigation .howitworks, #sub-navigation .howitworks a:hover { background-image: url(../../images/nav_sub_howitworks.gif); } #sub-navigation .designandlayoutcontent, #sub-navigation .designandlayoutcontent a:hover { background-image: url(../../images/nav_sub_designandlayoutcontent.gif); } #sub-navigation .productionandfulfilment, #sub-navigation .productionandfulfilment a:hover { background-image: url(../../images/nav_sub_productionandfulfilment.gif); } #sub-navigation .support, #sub-navigation .support a:hover { background-image: url(../../images/nav_sub_support.gif); } #sub-navigation .inhousemigration, #sub-navigation .inhousemigration a:hover { background-image: url(../../images/nav_sub_inhousemigration.gif); } #sub-navigation .consultancy, #sub-navigation .consultancy a:hover { background-image: url(../../images/nav_sub_consultancy.gif); } /* ---- NAVIGATION BANNER ---- */ #banner-navigation { width: 205px; } #banner-navigation div { width: 205px; background-position: 0 0; background-repeat: no-repeat; } #banner-navigation a { display: block; outline: none; } #banner-navigation a:hover { background-repeat: no-repeat; } #banner-navigation span { display: none; visibility: hidden; } /* -- Buttons --*/ #banner-navigation .whatwedo, #banner-navigation .whatwedo a { height: 50px; background-image: url(../../images/nav_banner_whatwedo.gif); } #banner-navigation .whatwedo a:hover { background-position: 0 -50px; } #banner-navigation .prospectus, #banner-navigation .prospectus a { height: 80px; background-image: url(../../images/nav_banner_prospectus.gif); } #banner-navigation .prospectus a:hover { background-position: 0 -80px; } /* ---- BODY ---- */ #body { width: 740px; margin-bottom: 10px; } /* -- Titles -- */ #title { width: 740px; height: 42px; background: url(../../images/title_background.gif) bottom left repeat-x; } #title div { width: auto; height: 42px; background-position: 10px 0; background-repeat: no-repeat; } #title h1 { display: none; visibility: hidden; } #title .benefitsofpersonalisation { background-image: url(../../images/title_benefitsofpersonalisation.gif); } #title .universitiesandcolleges { background-image: url(../../images/title_universitiesandcolleges.gif); } #title .positiveenvironmentalimpact { background-image: url(../../images/title_positiveenvironmentalimpact.gif); } #title .aboutus { background-image: url(../../images/title_aboutus.gif); } #title .contactus { background-image: url(../../images/title_contactus.gif); } #title .whatwedo { background-image: url(../../images/title_whatwedo.gif); } /* ---- FOOTER ---- */ #footer { width: 740px; padding: 0; } #footer-contact { width: 740px; height: 21px; background: url(../../images/footer_contact.gif) top left no-repeat; overflow: hidden; } #footer-contact p, #footer-contact span { display: none; visibility: hidden; } #footer-contact a { width: 180px; height: 15px; display: block; margin: 2px 0 0 365px; } #footer-copyright { width: 600px; float: left; padding: 5px 0 0 0; } #footer-copyright p { font-size: 70%; color: #006363; margin: 0; } #poweredby2c { width:100px; height: 21px; float:right; margin-top:5px; margin-bottom:0; background: url(../../images/poweredby_2c.gif) top left no-repeat; display: inline; } #poweredby2c a { width:100px; height: 21px; display: block; outline: none; } #poweredby2c a:hover { background: url(../../images/poweredby_2c.gif) bottom left no-repeat; } #poweredby2c span { display: none; visibility: hidden; } /* -- Home -- */ #home-specialities { width: 740px; height: 140px; background: url(../../images/home_specialities.gif) top left no-repeat; } #home-specialities p, #home-specialities ul { display: none; visibility: hidden; } /* -- Positive environmental impact --*/ #content-positive-environmental-impact ul { background-color: #d9e8e8; border: 1px solid #006363; padding: 5px 40px; margin: 0 0 15px 0; } #content-positive-environmental-impact li { font-size: 90%; } #content-positive-environmental-impact li strong { color: #006363; } #footer-positive-environmental-impact { } /* -- About --*/ #content-about { } #content-about img { } /* -- Contact -- */ #content-contact em { font-size: 120%; font-weight: bold; font-style: normal; } .panel-525 { width: 525px; background-color: #d9e8e8; } .panel-525 .panel-header { width: 525px; height: 10px; background: url(../../images/panel_525_header.gif) top left no-repeat; overflow: hidden; } .panel-525 .panel-footer { width: 525px; height: 10px; background: url(../../images/panel_525_footer.gif) top left no-repeat; overflow: hidden; } .panel-525 .panel-body { width: 505px; padding: 1px 10px; } .form-table {} .form-table .label { text-align: right !important; padding-top: 8px; } .form-table .label label { font-size: 80%; } .form-table .input-text { } .form-table .input-text input { width: 97%; font-size: 80%; border: 1px solid #99c1c1; padding: 2px; } .form-table .input-text textarea { width: 97%; font-size: 80%; border: 1px solid #99c1c1; } .form-table .input-button { text-align: center; }