/* J&B Plastering main CSS layout : 15 December 2008 : v1.01 : (c) 2008 simonised.com ========================================================================================= FF , IE7+ is a fluid width layout 750px-100px IE5.x , IE6 is fixed width layout 750px Colour scheme: Body Text #666 Light Grey H1 text #333 Dark Grey Footer text #999 Lighter Grey NavBar #39F Medium Blue NavBar hover #06C Dark Blue hilight & Spanned text 2 columns = content, sidebar ========================================================================================= */ * { margin:0 0 0 0; padding:0 0 0 0; border:0; /* reset borders & margins */ font-size: 12px; } /* fix IE5/6 font-size, overriding browser "text-size" */ body,html { margin:0; padding:0; width:100%; font-size: .9em; font-family: Arial, Verdana, Helvetica, sans-serif; background-color:white; color:#333333; /* dark grey colour body text, NB. use light grey #666666 for big text */ text-align: center; /* IE5/6 centre margins hack */ } * html #banner { margin: 60px 0 20px 0px; \width: 508px; wid\th: 504px } #container { max-width:1000px; min-width:750px; text-align:left; margin: 0 auto 2px auto; /* Do NOT use OVERFLOW here. It affects NN6 navbar */ width:98% } /*allow 1% whitespace left & right */ * html #container { width:750px; /* fix width for IE5+ */ position: relative; } /* bugfix IE5.x strip position */ #container-header { height: 3.25em; min-height:100px; font-size:220%; line-height:.95em; margin-top: 4px; letter-spacing:-0.1px; font-weight:bold; background: url(images/walltile.jpg) repeat 300px top;} #container-company { padding-top:10px; max-width:80%; float:left; word-spacing:-1.5px; color:#666666;} /* lighter grey colour big text. */ #container-catchphrase { float:right; text-align:right; width:45%; line-height:.9em; font-size:70%; font-weight:normal; font-style:italic; word-spacing:-1px; padding: .7em 6px .2em 6px !important; padding: .1em 6px 1.4em 6px; margin: 0 !important; margin: 10px 0 0 0; } /* IE height hack */ /* height: 1px is a hack to make the navigation bar butt-up to the header. Delete it if you want a gap */ #container-image { float:left; height: 1px; } #container-image img { display: inline; } span, #container-company span, #container-slogan span { color: #0066cc } /* dark blue colour alternate text */ #container-company em { font-size: 60%; color: #999; font-style: normal; vertical-align: middle } /******************** BEGIN Navigation bar *********************/ #container-content { width: 100%; clear: both; } #content { float:left; overflow:hidden; width: 69%; margin: 0px 0px 0px 1px; padding: 24px 0px 20px 8px; } * html #content { float:left; width:522px;} /* prevent IE5/IE6 from expanding width underneath right column */ #container-navigation { overflow:auto; width: 72%; float:left;/* fixes navbar background for NN6 */ border-right: 1px solid white; padding: 0 1px 0 0; /* FF fix to prevent scroll bar on rightmost menu item click */ background-color: #06C } /* medium blue colour nav bar background */ * html #container-navigation { float:left; margin: 0; padding: 0; width: 538px; } /* bugfix IE6 fixed width */ ul#navigation { margin: 0; padding: 0; } #navigation li { display: inline; text-align:center; } /* Navigation Bar items: white lettering, white right edge. Left aligned */ #navigation li a { float:left; font-size: 1em; font-weight:bold; text-align:center; color:white; text-decoration: none; padding: .4em 24px .5em 24px; border-right: 1px solid white; } /* Navigation Bar SPAN items: Right aligned in reverse order*/ #navigation li span a { float:right; margin: 0; border-left: 1px solid white; border-right: none;} #navigation li a:hover { text-decoration: underline; background-color: #39C; cursor:pointer; } #page-home #navigation .home a, #page-news #navigation .news a,#page-showcase #navigation .showcase a, #page-faq #navigation .faq a, #page-legal #navigation .legal a { background-color: #03C;} /* light blue colour nav bar CURRENT page hilight */ #navbar-text h1 { display:block; font-size: 1em; font-weight:bold; text-align: center; color: white; text-decoration: none; padding: .4em 8px .5em 8px; background: #06C scroll; margin: 0 0 4px 0;} /*needed for IE compatibility */ /******************** END Navigation bar *********************/ .sidebar { float: right; width: 27.8%; margin: 0 0 0 0px; padding: 0px .2% 20px 0px; text-align: center; background: url(images/sidewalltile.jpg) repeat 0px top fixed; } * html .sidebar { \width: 28.6%; w\idth: 28%} /* set 222px for IE5.x, 210px for IE6 based on 750px width */ /******************** BEGIN splash bar ***********************/ #container-splash { clear:left; padding: 0 0 0 0; border: none; background: url(images/SplashBack.jpg) repeat left top scroll } #container-splash img { clear:both; margin-left: 5px; margin-bottom: -2px; border: none } /******************** END splash bar *************************/ #block { overflow:hidden; margin: 0 0 0 0; border-style: none } /* makes FIXED width divs completely contain floated elements */ /******************** BEGIN splash bar ***********************/ #content-splash { padding: 0px; margin: 0 0 10px 0; border: none; background-image: url(images/SplashBack.jpg); background-repeat: repeat; } #content-splash img.splash { width: 100%; margin: 0 0 -2px 0; padding: 0; border: none } /******************** END splash bar *************************/ .clearer { clear: both; height: 1px; overflow:hidden } a { text-decoration:none; border:none; } img { border:none;} .sidebar .section { margin: 8px 4px 20px 0px; text-align:center;} .sidebar h1 { display:block; font-size: 1em; font-weight:bold; text-align: center; color: white; text-decoration: none; padding: .4em 8px .5em 0px; background: #06C scroll; margin: 0 0 4px 0;} /*needed for IE compatibility */ .sidebar h2 { padding: 10px 0 0 0; font-size: 1.3em; font-weight: bold; color: black;} .sidebar h3 { font-size: 1.1em; font-weight: normal; color: black; margin: 3px 5px 3px 0px; text-transform: none; } .sidebar h3 span { margin: 0; font-weight: normal; } .sidebar h4 { font-size: 1.4em; color: black; font-weight: bold; margin: 3px 5px 9px 0px; text-transform: none; } .section img { margin: 6px auto 4px auto; border-bottom: 4px solid white; padding: 0;} .sidebar .section a.ext { border: none;} .sidebar .section a.ext img{ border: none;} .sidebar .section img{ border: none;} #content h1 { font-size: 1.6em; color: #666; /* light grey colour for main headings */ margin: 0px 0 12px 0; line-height: 1.2em } #content h2 { font-size: 1.3em; color: #666; margin: 8px 0 0px 0px; text-transform: uppercase } #content h3 { font-size: 1em; color: #666; margin: 0px 0 10px 0px; text-transform: uppercase; } #content h4 { font-size: 1em; font-weight: bold; color: #06C; margin: 0px 0 8px 0px; text-transform: uppercase; padding-bottom: 8px; } #content h4 span {font-weight: normal; text-transform: none; } #content h5 { font-size: 1em; color: #06C; margin: 0 0 6px 0; letter-spacing: 0px } #content h6 { font-size: 1em; font-weight: bold; color: white; padding: 4px 4px 4px 4px; margin: 10px 0px 10px 0px; text-transform: none; background-color: #06C } .sidebar h6 { font-size: 1em; font-weight: bold; color: white; padding: 4px 4px 4px 4px; margin: 10px 0px 10px 0px; text-transform: none; background-color: #06C } hr { clear:both; border: none 0; border-top: 2px solid #cccccc; height: 2px; line-height: 5em; } .sidebar hr { border: none 0; border-top: 2px solid #999999; height: 2px; } div.hr { clear: both; margin: 24px 0 20px 0} * html div.hr { clear: both; margin: 15px 0 11px 0} /* IE5+IE6 */ #content p { line-height: 1.6em; text-align: justify; color: #666666; margin: 0 0 16px 0px } #content p.line { margin: 0 0 0 0px } #content p.break { margin: 0 0 40px 0 } .sidebar p { line-height: 16px; font-size: .9em; color: #666666; margin: 0 5px 16px 0px } .sidebar p.line { margin: 0 0 0 0 } .sidebar p span { font-size: 150%; color: #666666; font-weight: bold } .sidebar p.break { margin: 0 0 40px 0 } #content p a, .sidebar p a, .content li a, .sidebar li a { text-decoration:none; color:#06C; border-bottom:1px dotted #06C; margin:0px 0px 2px 0px } #content p a:hover, .sidebar p a:hover, #content li a:hover, .sidebar li a:hover, .sidebar span a:hover { text-decoration: none; color: #FFFFFF; background-color: #0066CC; margin: 0px 0px 2px 0px } /* dark blue hover hilight */ /* Mark up links to external sites */ #content a.ext { color: #336666; font-weight: bold; border-bottom: 1px dotted #336666;} .sidebar a.ext { color: #336666; font-weight: bold; border-bottom: 1px dotted #336666;} .centered a.ext, #news a.ext {border: none} #content ul { margin: .5em 0px 1em 0px } #content ul.indent { margin-left:180px } /* indent bullets to the left of a photo */ #content li { color: #666666; list-style: none url(elements/bullet1.gif); margin: 2px 0 2px 25px; text-align:justify;} #glossary h5 { font-size: 1em; line-height: 1em; color: #0066CC; margin: 0px 0 0px 0; letter-spacing: 0px} #glossary p { font-size: 12px; color: #666666; margin: 0 0 30px 0px; font-weight: normal } /* To indent the list items properly to the right of a floated picture, DO NOT enlcose inside UL tags. Use LI only!! */ /******************** BEGIN Footer *********************/ #container-footer { height: 2.2em; border-top: 2px solid #CCCCCC; margin: 4px 0 4px 0; clear: both } #container-footer a { font-weight: bold; color: #999999 } /* very light grey colour for footer text */ #container-footer a:hover { color: #0066CC } #footer { color: #999999; width: 100% } #footer-copyright { margin: 6px 0px 8px 10px; font-size: .9em; float: left; width: 60%; line-height: 1em } #footer-meta { margin: 3px 10px 8px 0px; font-size: .8em; float: right; text-align: right; width: 240px } /******************** END Footer **********************/ /** Quotation **

= Quotation, = Attribution

This text appears blue inside large blue quotation marks

Who said it, in grey
*/ #quotation { margin: 4px 20px 16px 20px; padding: 10px 4px 8px 4px; text-align:right; border: 1px solid #cccccc; background:url(elements/quoteopen.gif) no-repeat 2px 10px #f2f2f2 } #quotation.right {width: 45%; float: right; margin: 4px 0px 8px 10px } #quotation.left {width: 45%; float: left; margin: 4px 10px 8px 0px } #quotation span { margin-right: 20px; color: #333333; font-size: 0.85em } /* attribution */ #quotation p {color: #0066CC; font-style: italic; padding: 0px 20px 0px 20px; color: #0066CC; font-style: italic; background:url(elements/quoteclose.gif) no-repeat 100% 95%; text-align: justify } #brushquote { width: 360px; height: 7.2em; margin: 4px auto 12px auto; padding: 8px 24px 8px 96px; text-align:right; border: 0px solid #ccc; background:url(images/hand1.jpg) no-repeat 0px 0px #f2f2f2 } #brushquote p {color: #06C; font-style: italic; padding: 0; color: #06C; font-style: italic; text-align: justify; line-height: 18px; margin-bottom: auto; } #brushquote span { color:#333; font-size:0.85em } /* attribution */ /************************ END QuoteBlock ****************************/ ul#subnavigation { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image: none } #subnavigation li { padding: 2px 0px 2px 10px; margin: 0px 0px 5px 0px; list-style: none } #subnavigation li a { text-decoration: none; color: #006AC3; border-bottom: 1px dotted #0066CC } /* dark blue hilight */ #subnavigation li a:hover { font-weight: bold; text-decoration: none; border-bottom: 1px solid #0066CC } /* dark blue hover */ ul#news { padding:0 0 0 0; margin:0 0 0 0; background-image: none; } #news li { list-style: none; margin: 0 0 10px 0px; padding: 2px 0px 2px 15px; background-image: url(elements/bgbullet1.gif); background-repeat: no-repeat; background-position: 2px 7px } #content ul.ulaz { list-style-type: lower-alpha} /* .content imgblue { background-color: #E7F1FF; padding: 4px 4px 4px 4px; border: 1px solid #006AC3; }*/ #strip.img { border: none; margin: 0; padding: 0 } /* .content img { background-color: white; padding: 1px 4px 1px 4px; border: none } */ img.alignleft { float:left; margin:8px 10px 2px 0px; border:none} img.alignright { float:right; margin:8px 0px 2px 10px; border:none } img.alignabove { background-color: #FDFDFD; padding: 4px 4px 4px 4px; border: 2px solid #0066CC; margin: 4px 0px 4px 12px } img.alignlist { float: left; margin: 0px 8px 2px 10px; border: none; border-style: none } img.trowel { float:right; margin: 28px auto 26px auto; border: none; padding: 4px; background-color: white } img.left {float:left; padding:4px 4px 0px 0px; border:none; margin:8px 0px 0px 0px } img.center200 { padding:0; border:none; margin:8px 0px 0px -100px; position:relative; top:0px; left:50%} img.rightm36 { float:right; padding:4px 0px 0px 4px; border:none; margin:8px 0px 0px 4px; position:relative; top: -36px; } img.rightm16 { float:right; padding:4px 0px 0px 4px; border:none; margin:8px 0px 0px 4px; position:relative; top: -16px; } img.right16 { float:right; padding:4px 0px 0px 4px; border:none; margin:8px 0px 0px 4px; position:relative; top: 16px; } img.right { float:right; padding:4px 0px 0px 4px; border:none; margin:8px 0px 0px 4px; position:relative; top: 0px; } #idphoto {margin-left: 20px } #idphoto h2 {font-size: 1.4em; color:#003399; margin-left:-2px; padding: 10px 0 0px 0px; letter-spacing: .2px; text-transform: uppercase } #idphoto p.title { color: #0066CC; margin-top:-10px; margin-bottom: 8px; font-weight: bold } #idphoto img {padding: 4px 4px 4px 4px; border: 2px solid #0066CC; margin: 6px 12px 2px 0px } #idphoto img.right {float: right; padding: 4px 4px 4px 4px; border: 2px solid #0066CC; margin: 4px 0px 4px 12px } #idphoto img.left {float:left; padding: 4px 4px 4px 4px; border: 2px solid #0066CC; margin: 4px 16px 4px 0px } #idphoto img.logo {float:right; padding: 4px 4px 4px 4px; border: none; margin: 8px 0px 4px 4px } .banner {width: 99.2%; margin: 60px 0 20px 0; padding: 10px 0px 4px 0px; text-align: center; background-color: #ececec; border: 2px solid #999999 } #content .banner img, #content a .banner img { background-color: transparent } /* centre the image in a banner */ .sidenote { margin: 4px 0 0 0; padding: 4px 4px 4px 4px; background-color: #ececec; border: thin solid #333333; } .spacer { padding: 10px 0 0 0;} /* use
to insert vertical space of 10px */ .centered { text-align: center; } .centered img { margin: 6px auto 8px auto } .centered img.center { margin: 6px auto 2px auto } .centered img.left { float: left; margin: 8px 8px 8px 8px} .centered img.right { float: right; margin: 8px 8px 8px 8px} /*.centered span { display: none; } .centered:hover span { margin: 10px; display:block; border: solid 2px #999999; background-color: #FFFF99; position:relative; top: -69px; } */ .sidebar img.bordered { margin:2px 2px 2px 8px; border:3px solid #0066CC;} a.mail {margin:0 0 2px 0; padding:0; border:none; vertical-align: -18% } /* fudge vertical alignment cross-browser */ #content a.mail:hover {text-decoration: none; border-bottom: 1px dotted #336666; margin: 0px 0px 2px 0px} #sidebar a.mail:hover {text-decoration: none; border-bottom: 1px dotted #336666; margin: 0px 0px 2px 0px} * html a.mail img{ \vertical-align: bottom; } /* and adjust for IE5.x/6.0 */ #qa h2 { font-size: 1.3em; color: #0066CC; padding: 8px 0 20px 0px; text-transform: uppercase } #qa p.question { margin: 32px auto 8px 0; width: 92%; padding: 4px 10px 4px 30px; font-size: 1em; font-weight: bold; color: #0066CC; background: url(elements/question.gif) no-repeat 4px #EEEEEE; } #qa p.answer { width: 88%; padding: 0px 0px 0px 30px; font-size: 1em; } #qa ol li { margin: 0 0 0 60px;} /***** gallery Page ***************************/ .project { margin: 10px 0 50px 0px; padding: 0; border: 2px solid #06C; } * html .project { padding: 0 0 8px 0; width: 510px;} /* IE5/6 adjust to stop left edge of box drifting left*/ #content .project h1 { font-size: 1.4em; height: 1.6em; line-height: 1.6em; margin: 0px auto 12px auto; padding: 0px 6px 0px 6px; background-color: #06C; color: white; } /* format the Project gallery info table */ #content #ProjectInfo table { width: auto; margin: 0 6px 0 6px; font-size: 0.9em; line-height: 1.6em; border-collapse: collapse;} #content #ProjectInfo caption { caption-side: bottom; line-height: 4em; font-size: .95em; font-style: italic;} #content #ProjectInfo th { color: white; font-size: 1.1em; font-weight: bold; line-height: 1.6em; background-color: #00C} #content #ProjectInfo td { color: #333; font-size: 1em; border-bottom: 1px solid; border-color: #06c; line-height: 1.5em; padding: 2px 4px 2px 0; } #content #ProjectInfo img { float:right; padding: 4px 6px 4px 10px;} #content #ProjectInfo td h1 { color: #06c; font-size: 1em; text-transform: none; margin: 0; background: none;} /* Row Title font */ #content #ProjectInfo h2 { font-size: 1.3em; color: #666; text-transform: none; margin: 0; } /* Larger, bold, text font for emphasis */ #content #ProjectInfo h3 { font-size: 1em; color: #333; text-transform: none; margin: 0; font-weight: normal; } /* default table text font, but NEW line */ #content .gallery {width:506px; height: 320px; margin: 10px 0 10px 6px; position:relative; padding: 4px; background: url(elements/galleryback.gif) repeat-y top left; } * html .gallery {width: 490px;} /* IE5/6 width adjust */ #content .gallery ul {list-style:none; padding:0; margin:0; width:64px; position:relative; float:left; } #content .gallery ul li {display:inline; width:60px; height:68px; float:left; margin: 4px 4px 2px 2px; border-bottom: 2px solid #333; border-right: 2px solid #333; padding: 2px; background-color: white;} * html #content .gallery ul li { margin: 2px 0px 2px 1px;} /* IE5/6 adjust */ /* display the thumbnails */ #content .gallery ul li a {display:block; width:62px; height:60px; padding: 0; text-decoration:none; border: none; } #content .gallery ul li a img {display:block; width:60px; height:60px; } * html #content .gallery ul li a img { width: 62px;} #content .gallery ul li a span { display: none;} /* hide the "photograph notes" */ /* when a thumbnail is hovered over, hide it, and display the large version instead.. */ #content .gallery ul li a:hover, #content .gallery ul li a:focus {white-space:normal; border-color:#ddd; background-color: white; background-image: url(elements/magnifier.gif); background-repeat: no-repeat } #content .gallery ul li a:hover img, #content .gallery ul li a:focus img {position:absolute; left: 100px; top:-4px; width:auto; height:auto; /* force resize to actual image size (MUST be 360x270!!) */ padding: 6px 6px 48px 6px; border: 2px solid #333; background-color: white;} /* add the photo frame */ /* and display the "photograph notes" under the 360x270 image */ #content .gallery ul li a:hover span, #content .gallery ul li a:focus span {overflow: hidden; display:block; position:absolute; left: 108px; top:280px; text-align: center; color:#333; font-size: 1em; font-weight:normal; font-style: oblique; width:360px; height: 40px;} #content .gallery ul li a:active {white-space:normal; border-color:#ddd; background-color: white; background-image: none; background-repeat: no-repeat } /* .gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;} */ #content .gallery b { clear: both; min-height: 0px;} #content .gallery b.default {position: absolute; display: block; left: 104px; top:60px; width:352px; height:auto; border: 2px solid #333; padding: 12px 4px; background-color: white;} #content .gallery b.default img {display:block; margin:auto auto; /* border:4px solid #cde; border-color:#555 #ddd #eee #333; */ } #content .gallery b.default span {display:block; color:#666; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; margin: 6px auto 10px auto; text-align: center } /*** formatting for the custom 404 error page : 30th May 2009 ***/ #content404 { margin: 0; padding: 1px 32px 20px 0; background: url(images/404back.jpg) repeat-x left 1px; } #img404 img { float:left;} #content404 p { font-size: 1.2em; line-height: 1.4em; color: #06C; text-align: justify;} #content404 h2 { padding: 16px 0 12px 0;} #content404 ul { margin: 12px 0px 48px 0px } #content404 li { color: #06C; list-style: lower-alpha; font-size: 1em; line-height: 1.1em; margin: 0px 0 10px 24px; text-align: justify; } #content404 a { text-decoration: none; color: #06C; border-bottom: 1px dotted #06C; } .clients table {width:100%;background-color:yellow;}