/* Inspiration Chalkhill CSS Document */ /* ----------------- COLOURS ----------------- Orange : #f5a248 Grey : #666666 Medium Grey : #a7a7a7 Light Grey : #e4e4e4 */ /* ----------------- CLEAR STYLES ----------------- */ .clear { clear: both; } /* ----------------- DEFAULT FONT STYLES ----------------- */ body, td, th, div, h1, h2, p, li { font-family: Verdana, Arial, Helvetica, sans-serif; } /*h1 { font-size: 100%; margin: 0; color: #000; font-weight:bold; } h2 { font-size: 100%; margin: .5em 0 .5em 0; color: #000; font-weight: bold; } h3 { font-size: 90%; margin: .5em 0 .5em 0; color: #000; font-weight: bold; }*/ h4 { font-size: 90%; margin: .5em 0 .5em 0; color: #000; font-weight: bold; } p { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.5em; color: #666666; } li { font-size: 80%; margin: .5em 0 .5em 0; line-height: 1.3em; color: #666666; } a:link { color: #000; } a:visited { color: #000;} a:active { color: #000; } a:hover { color: #000; } a { outline: none; } .tiny { font-size: 70%; } .reserved { font-weight: bold; color: #f00; font-size: 70%; } /* ----------------- PAGE STYLES ----------------- */ body { margin: 10px; background-color: #666666; } #frame { width: 760px; margin-left: auto; margin-right: auto; } /* ----------------- HEADER ----------------- */ #header { width: 760px; background-color: #e4e4e4; } #header-logo { width: 380px; height: 130px; float: left; background: url(../../images/header_logo.gif) top left no-repeat #f5a248; } #header-logo h1, #header-logo h2 { display: none; visibility: hidden; } #header-images { width: 370px; height: 130px; padding-right: 10px; float: left; background-color: #f5a248; } /* -- Notice Panel -- */ #notice-panel { width: 740px; text-align: center; padding: 10px; background-color: #D11A1A; } #notice-panel p { margin: 0; color: #fff; font-size: 90%; } #notice-panel a:link, #notice-panel a:visited { color: #ddd; } #notice-panel a:active, #notice-panel a:hover { color: #ccc; } /* -- Navigation Main -- */ #nav-main { width: 760px; height: 30px; background-color: #e4e4e4; padding: 0; } #nav-main div { height: 30px; float: left; background-position: top left; background-repeat: no-repeat; } #nav-main a { height: 30px; display: block; outline: none; } #nav-main a:hover { background-position: bottom left; background-repeat: no-repeat; } #nav-main span { display: none; visibility: hidden; } #nav-main .selected { background-position: bottom left; } #nav-main .left-end { width: 123px; background-image: url(../../images/nav_left_end.gif); overflow: hidden; } #nav-main .right-end { width: 123px; background-image: url(../../images/nav_right_end.gif); overflow: hidden; } /* buttons */ #nav-main .home, #nav-main .home a:hover { width: 63px; background-image: url(../../images/nav_home.gif); } #nav-main .localarea, #nav-main .localarea a:hover { width: 92px; background-image: url(../../images/nav_localarea.gif); } #nav-main .keyfeatures, #nav-main .keyfeatures a:hover { width: 105px; background-image: url(../../images/nav_keyfeatures.gif); } #nav-main .floorplans, #nav-main .floorplans a:hover { width: 95px; background-image: url(../../images/nav_floorplans.gif); } #nav-main .newbuildhomebuy, #nav-main .newbuildhomebuy a:hover { width: 159px; background-image: url(../../images/nav_newbuildhomebuy.gif); } /*#nav-main .register, #nav-main .register a:hover { width: 75px; background-image: url(../../images/nav_register.gif); }*/ /* -- Sub-Navigation Main -- */ #nav-sub-empty { width: 760px; height: 6px; overflow: hidden; } #nav-sub { height: 14px; background-color: #e4e4e4; padding: 9px 0 7px 0; margin: 0 auto 0 auto; } /*NB: overall width for nav-sub set in header include, must be set 3px bigger than total for some unknown reason! */ #nav-sub div { height: 14px; float: left; background-position: top left; background-repeat: no-repeat; } #nav-sub a { height: 14px; display: block; outline: none; } #nav-sub a:hover { background-position: bottom left; background-repeat: no-repeat; } #nav-sub span { display: none; visibility: hidden; } #nav-sub .selected { background-position: bottom left; } #nav-sub .divider { width: 17px; background-image: url(../../images/nav_sub_divider.gif); overflow: hidden; } /* buttons */ #nav-sub .location, #nav-sub .location a:hover { width: 48px; background-image: url(../../images/nav_sub_location.gif); } #nav-sub .conservation, #nav-sub .conservation a:hover { width: 76px; background-image: url(../../images/nav_sub_conservation.gif); } #nav-sub .regeneration, #nav-sub .regeneration a:hover { width: 76px; background-image: url(../../images/nav_sub_regeneration.gif); } #nav-sub .recreation, #nav-sub .recreation a:hover { width: 61px; background-image: url(../../images/nav_sub_recreation.gif); } #nav-sub .leisureandentertainment, #nav-sub .leisureandentertainment a:hover { width: 139px; background-image: url(../../images/nav_sub_leisureandentertainment.gif); } #nav-sub .shopsandrestaurants, #nav-sub .shopsandrestaurants a:hover { width: 117px; background-image: url(../../images/nav_sub_shopsandrestaurants.gif); } #nav-sub .elevations, #nav-sub .elevations a:hover { width: 55px; background-image: url(../../images/nav_sub_elevations.gif); } #nav-sub .type1, #nav-sub .type1 a:hover { width: 35px; background-image: url(../../images/nav_sub_type1.gif); } #nav-sub .type2, #nav-sub .type2 a:hover { width: 38px; background-image: url(../../images/nav_sub_type2.gif); } #nav-sub .type3, #nav-sub .type3 a:hover { width: 37px; background-image: url(../../images/nav_sub_type3.gif); } #nav-sub .type4, #nav-sub .type4 a:hover { width: 38px; background-image: url(../../images/nav_sub_type4.gif); } #nav-sub .type5, #nav-sub .type5 a:hover { width: 37px; background-image: url(../../images/nav_sub_type5.gif); } #nav-sub .type6, #nav-sub .type6 a:hover { width: 37px; background-image: url(../../images/nav_sub_type6.gif); } /* ----------------- BODY ----------------- */ #body { width: 760px; padding: 0 0 10px 0; background-color: #fff; } /* -- Titles -- */ .title { height: 40px; background-position: 0 13px; background-repeat: no-repeat; } .title h3 { display: none; visibility: hidden; } .title.error { background-image: url(../../images/title_error.gif); } .title.home { background-image: url(../../images/title_home.gif); } .title.localarea-location { background-image: url(../../images/title_localarea_location.gif); } .title.localarea-conservation { background-image: url(../../images/title_localarea_conservation.gif); } .title.localarea-regeneration { background-image: url(../../images/title_localarea_regeneration.gif); } .title.localarea-recreation { background-image: url(../../images/title_localarea_recreation.gif); } .title.localarea-leisureandentertainment { background-image: url(../../images/title_localarea_leisureandentertainment.gif); } .title.localarea-shopsandrestaurants { background-image: url(../../images/title_localarea_shopsandrestaurants.gif); } .title.keyfeatures { background-image: url(../../images/title_keyfeatures.gif); } .title.floorplans-elevations { background-image: url(../../images/title_floorplans_elevations.gif); } .title.floorplans-type1 { background-image: url(../../images/title_floorplans_type1.gif); } .title.floorplans-type2 { background-image: url(../../images/title_floorplans_type2.gif); } .title.floorplans-type3 { background-image: url(../../images/title_floorplans_type3.gif); } .title.floorplans-type4 { background-image: url(../../images/title_floorplans_type4.gif); } .title.floorplans-type5 { background-image: url(../../images/title_floorplans_type5.gif); } .title.floorplans-type6 { background-image: url(../../images/title_floorplans_type6.gif); } .title.newbuildhomebuy { background-image: url(../../images/title_newbuildhomebuy.gif); } .title.register { background-image: url(../../images/title_register.gif); } .title.contact { background-image: url(../../images/title_contact.gif); } /* Home */ .home-strapline { text-align: center; padding: 15px 10px 5px 10px; } /* Elevations */ .legend { margin: 15px 0; width: 220px; } .legend-colour { float: left; width: 22px; } .legend-text { float: left; width: 188px; padding: 3px 0 0 10px; } .legend-text p { font-size: 70%; } .elevation-title { height: 16px; } .elevation-title a { display: block; height: 16px; } .elevation-title span { display: none; visibility: hidden; } .type1 { background: url(../images/title_type1apartment.gif) top left no-repeat; } .type2 { background: url(../images/title_type2apartment.gif) top left no-repeat; } .type3 { background: url(../images/title_type3apartment.gif) top left no-repeat; } .type4 { background: url(../images/title_type4apartment.gif) top left no-repeat; } .type5 { background: url(../images/title_type5apartment.gif) top left no-repeat; } .type6 { background: url(../images/title_type6apartment.gif) top left no-repeat; } /* download pdf box */ .download-floorplans { width: 180px; background-color: #e4e4e4; border: 1px solid #a7a7a7; padding: 10px; margin: 0 auto; } .acrobat-icon { width: 25px; float: left; margin-right: 10px; } .download-instructions { width: 145px; float: left; font-size: 70%; } .download-instructions a { color: #212618; text-decoration: none; } /* -- Columns -- */ .column-400 { width: 400px; float: left; display:inline; } .column-300 { width: 300px; float: left; display:inline; } .column-480 { width: 480px; float: left; display:inline; } .column-220 { width: 220px; float: left; display:inline; } .column-640 { width: 640px; float: left; display:inline; } .column-80 { width: 80px; float: left; display:inline; } .column-720 { width: 720px; } /* -- Margins -- */ .margin20-t { margin-top: 20px; } .margin20-b { margin-bottom: 20px; } .margin20-l { margin-left: 20px; } .margin20-r { margin-right: 20px; } .margin20-t-l { margin: 20px 0 0 20px; } .margin20-t-r { margin: 20px 20px 0 0; } .margin20-t-r-l { margin: 20px 20px 0 20px; } .margin20-r-l { margin: 0 20px 0 20px; } .margin10-t {margin-top: 10px} .margin10-b {margin-bottom: 10px} .margin10-l { margin-left: 10px; } .margin10-t-b { margin: 10px 0; } /* -- Alignment -- */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .float-right { float: right; } /* ----------------- FORM STYLES ----------------- */ form { display: inline; } input, textarea, select { font-family: Verdana, Arial, Helvetica, sans-serif; } .input-text { border: 1px solid #999; padding:2px; } .input-select { border: 1px solid #999; padding:1px; } input.width-full, select.width-full, textarea.width-full { width: 97%; } input.width-50, select.width-50, textarea.width-50 { width: 50px; } /* ----------------- FORM TABLES ----------------- */ .form-table-70, .form-table-80 { border: 1px solid #666666; } /* default heading cell */ .form-table-70 th, .form-table-80 th { background-color: #a7a7a7; color: #fff; font-weight: bold; } .form-table-70 th { font-size: 70%; } .form-table-80 th { font-size: 80%; } /* default cell */ .form-table-70 td, .form-table-80 td { background-color: #efefef; color: #000; } .form-table-70 td { font-size: 70%; } .form-table-80 td { font-size: 80%; } /* label cell */ .form-table-70 td.form-label, .form-table-80 td.form-label { background-color: #e4e4e4; } .form-table-70 td.error, .form-table-80 td.error { color: #ea00a1; } /* buttons cell */ .form-table-70 td.form-buttons, .form-table-80 td.form-buttons { background-color: #a7a7a7; } /* set input fields to take the text size of the table cells */ .form-table-70 input, .form-table-70 select, .form-table-70 textarea { font-size: 100%; color: #000; } .form-table-80 input, .form-table-80 select, .form-table-80 textarea { font-size: 100%; color: #000; } /* ----------------- ERROR ----------------- */ .error { color: #c00; } /* ----------------- FOOTER ----------------- */ #footer { width: 760px; padding-top: 25px; background: url(../../images/footer_tile.gif) top left repeat-x; } #footer-copyright { padding-top: 5px; font-size: 70%; color: #fff; text-align: center; } #footer-copyright a:link, #footer-copyright a:visited { color: #fff; text-decoration: none } #footer-copyright a:active, #footer-copyright a:hover { color: #f5a248; text-decoration: none } /* Temp home page */ .temp-box { width: 495px; margin-right: auto; margin-left: auto; padding: 10px; background-color: #fdecda; border: 1px solid #f5a248; text-align: center; } .temp-box p { margin: 0; }