/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:775px; background:#333333 } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#000; margin:0 0 12px 0; text-align:justify } a { } a:hover { } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ body.index div#container{} #flash {color:#FFFFFF;} div#container { width:921px; margin:0 auto; position:relative; text-align:left } #flash{position:relative; z-index:1; } body.leisure div#container { margin:0 auto; position:relative; text-align:left; background:#ededed url(../images/global/portfolio-bg.gif) repeat-x; } body.commercial div#container { margin:0 auto; position:relative; text-align:left; background:#ededed url(../images/global/portfolio-bg.gif) repeat-x; } body.conservation div#container { margin:0 auto; position:relative; text-align:left; background:#ededed url(../images/global/portfolio-bg.gif) repeat-x; } body.residential div#container { margin:0 auto; position:relative; text-align:left; background:#ededed url(../images/global/portfolio-bg.gif) repeat-x; } body.healthcare div#container { margin:0 auto; position:relative; text-align:left; background:#ededed url(../images/global/portfolio-bg.gif) repeat-x; } body.contact div#container { margin:0 auto; position:relative; text-align:left; background:#000; } .wrapper{ position:absolute; top:418px; z-index:2} /* 3.3 - header */ div#header {} /* 3.4 - content */ div#content { } body.sub div#content { background:#a0a0a0 url(../images/global/sub-content-grey-bg.gif) repeat-x; padding:10px 0 10px 0} body.services div#content { background:url(../images/global/services-content-purple-bg.gif) repeat-x; padding:10px 0 0 0} body.leisure div#content { width:921px; float:left } body.commercial div#content { width:921px; float:left } body.conservation div#content { width:921px; float:left } body.residential div#content { width:921px; float:left } body.healthcare div#content { width:921px; float:left } body.contact div#content { width:921px; float:left } /*3.4.1 - primary navigation*/ #primary-navigation { padding-top:10px} #primary-navigation li{ float:left; list-style:none; font-size:1.4em; color:#FFFFFF; width:87px; } #primary-navigation li a{color:#000000; display:block; font-weight:lighter; text-align:center } #home a{height:14px; width:87px; border-right:1px solid #FFFFFF;} #home a:hover{color:#FFFFFF} #portfolio a{width:87px; border-right:1px solid #FFFFFF;} #portfolio a:hover{color:#FFFFFF } #services a{width:87px; border-right:1px solid #FFFFFF;} #services a:hover{color:#FFFFFF} #profile a{width:87px; border-right:1px solid #FFFFFF;} #profile a:hover{color:#FFFFFF} #contact-us a{width:87px;} #contact-us a:hover{color:#FFFFFF} /* 3.5 - primary content */ div#primary-content { margin:28px 12px; width:434px; float:left; border-right:3px solid #fff } body.sub div#primary-content img { padding:50px 0 50px 40px} body.services .list-services li{list-style:none; padding:10px 5px} body.services .list-services {float:left; padding-top:35px} body.leisure div#primary-content { margin:28px 12px; width:434px; float:left; border-right:none } body.commercial div#primary-content { margin:28px 12px; width:434px; float:left; border-right:none } body.conservation div#primary-content { margin:28px 12px; width:434px; float:left; border-right:none } body.residential div#primary-content { margin:28px 12px; width:434px; float:left; border-right:none } body.healthcare div#primary-content { margin:28px 12px; width:434px; float:left; border-right:none } body.contact div#primary-content { padding:128px 0px 128px 200px; width:529px; float:left; border-right:none } body.contact div#primary-content ul{list-style:none; } body.contact div#primary-content p{color:#b3b3b3; font-style:normal; font-size:1.2em; line-height:1.4em; width:300px } body.contact div#primary-content ul li{color:#b3b3b3; font-style:normal; padding:5px 0 } body.contact div#primary-content address{color:#b3b3b3; font-style:normal; } body.contact div#primary-content address strong{font-size:16px; line-height:50px; color:#FFFFFF} body.contact div#primary-content address span{font-size:14px; line-height:50px; color:#FFFFFF} body.contact div#primary-content address a{color:#FFFFFF;} body.contact div#primary-content address a:hover{color:#999999;} /* 3.6 - secondary content */ div#secondary-content { margin:60px 12px 0 12px; width:420px; float:left } div#secondary-content #pane p{color:#FFFFFF; font-size:1.3em;} body.sub div#secondary-content { margin:0px 12px 0 12px; width:435px; } body.services div#secondary-content { margin:0px 12px 0 12px; width:435px; } /* 3.7 - tertiary content */ div#tertiary-content { } /* 3.8 - footer */ div#footer { } body.sub div#footer { background:url(../images/global/sub-footer-grey-bg.gif) repeat-x; } body.services div#footer { background:url(../images/global/services-footer-purple-bg.gif) repeat-x } div#footer #company-details {padding: 0 0 0 10px;} div#footer #company-details li{list-style:none; color:#000000} div#footer #company-details li a{color:#000000; font-size:0.9em; font-weight:100} div#footer #company-details li a:hover{color:#CCCCCC;} div#footer #footer-navigation {float:right; padding:10px 0; margin:0} div#footer #footer-navigation li {float:left; list-style:none;} div#footer #footer-navigation li a{color:#B2B2B2; padding:0 5px} body.leisure div#footer #footer-navigation li a{color:#000000;} body.leisure div#footer #footer-navigation li{color:#fff;} body.leisure div#footer #footer-navigation {float:left;padding:10px 0; margin:0} body.leisure div#footer { background:url(../images/global/portfolio-footer-bg.gif) repeat-x; float:left; width:921px } body.commercial div#footer #footer-navigation li a{color:#000000;} body.commercial div#footer #footer-navigation li{color:#fff;} body.commercial div#footer #footer-navigation {float:left; padding:10px 0; margin:0} body.commercial div#footer { background:#8db5d8 url(../images/global/commercial-footer-bg.gif) repeat-x; float:left; width:921px } body.conservation div#footer #footer-navigation li a{color:#000000;} body.conservation div#footer #footer-navigation li{color:#fff;} body.conservation div#footer #footer-navigation {float:left; padding:10px 0; margin:0} body.conservation div#footer { background:#8b6437 url(../images/global/conservation-footer-bg.gif) repeat-x; float:left; width:921px } body.residential div#footer #footer-navigation li a{color:#000000;} body.residential div#footer #footer-navigation li{color:#fff;} body.residential div#footer #footer-navigation {float:left; padding:10px 0; margin:0} body.residential div#footer { background:#dea597 url(../images/global/residential-footer-bg.gif) repeat-x; float:left; width:921px } body.healthcare div#footer #footer-navigation li a{color:#000000;} body.healthcare div#footer #footer-navigation li{color:#fff;} body.healthcare div#footer #footer-navigation {float:left; padding:10px 0; margin:0} body.healthcare div#footer { background:#c0c0c0 url(../images/global/healthcare-footer-bg.gif) repeat-x; float:left; width:921px } body.contact div#footer #footer-navigation li a{color:#000000;} body.contact div#footer #footer-navigation li{color:#fff;} body.contact div#footer #footer-navigation {float:left; padding:10px 0; margin:0} body.contact div#footer { background:#b7b7b7 repeat-x; float:left; width:921px } .riba-contact{float:right; padding-top:50px;} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /*Titles*/ #welcome-to-neil-pike-ttl{background:url(../images/global/welcome-to-neil-pike-ttl.png) no-repeat; width:277px; height:136px; float:right; margin:98px 40px 0 0; text-indent:-3000em} #strongly-commited-to-design-ttl{background:url(../images/global/strongly-committed-to-design-ttl.png) no-repeat; width:325px; height:33px; text-indent:-3000em; } #apa-logo{background:url(../images/global/apa-logo.png) no-repeat; margin:80px 0 0 50px; width:324px; height:200px; text-indent:-9999em} #leisure-ttl{background:url(../images/global/leisure-ttl.gif) no-repeat; width:196px; height:38px; text-indent:-3000em} #commercial-ttl{background:url(../images/global/commercial-ttl.gif) no-repeat; width:396px; height:38px; text-indent:-3000em} #conservation-ttl{background:url(../images/global/conservation-ttl.gif) no-repeat; width:396px; height:38px; text-indent:-3000em} #residential-ttl{background:url(../images/global/residential-ttl.gif) no-repeat; width:396px; height:38px; text-indent:-3000em} #healthcare-ttl{background:url(../images/global/healthcare-ttl.gif) no-repeat; width:396px; height:38px; text-indent:-3000em} #contact-ttl{background:url(../images/global/contact-ttl.gif) no-repeat; width:396px; height:38px; text-indent:-3000em} /*Gallery for the portfolio pages*/ #portfolio-gallery{list-style:none; padding:15px 0 131px 0} #portfolio-gallery li{margin:1px 0} .gallery-image li{float:left; list-style:none; padding:1px} #arrow-ttl{background:url(../images/global/arrow-ttl.gif) no-repeat; height:20px; text-indent:2em; color:#8170ac; font-size:1.4em; text-transform:uppercase; padding:4px 0; clear:both} #portfolio-gallery li a{background:#c8bfdf; width:364px; display:block; color:#FFFFFF; font-size:1.4em; padding:6px 6px; font-weight:500 } #portfolio-gallery li a:hover{background:#8170ac; width:364px; display:block} body.commercial #arrow-ttl{background:url(../images/global/arrow-ttl.gif) no-repeat; height:20px; text-indent:2em; color:#6ca5ce; font-size:1.4em; text-transform:uppercase; padding:4px 0} body.commercial #portfolio-gallery li a{background:#bcd6e9; width:364px; display:block; color:#FFFFFF; font-size:1.4em; padding:6px 6px; font-weight:500 } body.commercial #portfolio-gallery li a:hover{background:#6ca5ce; width:364px; display:block} body.conservation #arrow-ttl{background:url(../images/global/arrow-ttl.gif) no-repeat; height:20px; text-indent:2em; color:#775228; font-size:1.4em; text-transform:uppercase; padding:4px 0} body.conservation #portfolio-gallery li a{background:#d5ae81; width:364px; display:block; color:#FFFFFF; font-size:1.4em; padding:6px 6px; font-weight:500 } body.conservation #portfolio-gallery li a:hover{background:#775228; width:364px; display:block} body.residential #arrow-ttl{background:url(../images/global/arrow-ttl.gif) no-repeat; height:20px; text-indent:2em; color:#8a4131; font-size:1.4em; text-transform:uppercase; padding:4px 0} body.residential #portfolio-gallery li a{background:#d49485; width:364px; display:block; color:#FFFFFF; font-size:1.4em; padding:6px 6px; font-weight:500 } body.residential #portfolio-gallery li a:hover{background:#8a4131; width:364px; display:block} body.healthcare #arrow-ttl{background:url(../images/global/arrow-ttl.gif) no-repeat; height:20px; text-indent:2em; color:#5b5b5b; font-size:1.4em; text-transform:uppercase; padding:4px 0} body.healthcare #portfolio-gallery li a{background:#b3b3b3; width:364px; display:block; color:#FFFFFF; font-size:1.4em; padding:6px 6px; font-weight:500 } body.healthcare #portfolio-gallery li a:hover{background:#5b5b5b; width:364px; display:block} div#basescript { width:921px; margin:auto; clear:both; padding-top:100px } div#basescript p { color:#ccc } /*SLIDER STYLING*/ #tabvanilla{padding:15px 0 131px;} .tabnav li {list-style: none;padding-right: 5px;} .tabnav li a {text-decoration: none;color: #222;font-weight: bold;padding: 4px 6px;outline: none;} .tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {background: #dedbd1;color: #222;text-decoration: none; } .tabdiv {margin-top: 2px;padding: 5px;} .tabdiv li {margin-left: 0px; } .ui-tabs-hide { display: none; } /* IE SPECIFIC HACKED STYLES */ .jScrollPaneDragBottom {bottom: -1px} /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .inline-link a{color:#FFFFFF;} .inline-link a:hover{color:#CCCCCC;} .image-padding{padding:0 0 50px 0;} .image-padding-30{padding:0 0 30px 0;} .image-padding-10-25{padding:10px 35px} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }