/*----------------------------------------------------- CodePress.co.uk Professional Front-end web development ------------------------------------------------------*/ @import url("reset.css"); body {font:62.5% arial,sans-serif; color:#6c6f70; padding-top:50px;} #skiplinks {position:absolute; left:-9999px;} /* Debug styles: a[href="#"] {background: lime;} a[href="404"] {background: lime;} a[href=""] {background: fuchsia;} *[align], *[valign], *[border], table[cellspacing], table[cellpadding], *[width], *[height], a[href^=”javascript:”], *[onload], *[onunload], *[onchange], *[onsubmit], *[onreset], *[onselect], *[onblur], *[onfocus], *[onkeydown], *[onkeypress], *[onkeyup], *[onclick], *[ondblclick], *[onmousedown], *[onmousemove], *[onmouseover], *[onmouseout], *[onmouseup] {outline:5px solid yellow;} img[width], img[height] {outline:0;} img {outline: 5px solid red;} img[alt][title] {outline-width: 0;} img[alt] {outline-color: fuchsia;} img[alt], img[title] {outline-style: double;} img[alt=""][title], img[alt][title=""] {outline-width: 3px;} img[alt=""][title=""] {outline-style: dotted;} Sometimes a client will have our banners on their site. Here is the HTML and CSS to include; HTML: Code Press - Professional front-end development CSS: #cp_84bannerc {width:84px; height:20px; display:block; background: url('../images/cp/cp-84x20-combo.png') no-repeat 0 0} a:hover#cp_84bannerc {background-position:0 -20px} #cp_84bannerc span {position:absolute; left:-9999px} */ a:link{ color:#57068C; text-decoration:underline;} a:visited{ color:#340255; text-decoration:underline;} a:hover{ color:#8415cd;} embed {display:block;} .wrapper{ width:800px; overflow:hidden; position:relative; margin:0 auto;} #header{ width:100%; height:33px; padding-top:50px; padding-bottom:11px;} #header h1{ width:131px; position:absolute; right:0; top:-2px;} #navigation{ width:100%;} #navigation li{ float:left; font-size:1.4em; height:33px; position:relative;} #navigation li:hover .subnav{ display:block;} #navigation li a{ float:left; text-indent:-999px; overflow:hidden; height:33px;} #navigation li span{ float:left; margin-top:19px; height:13px; width:2px; text-indent:-999px; overflow:hidden; background:url(../images/nav/nav.gif) -404px 0 no-repeat;} #navigation li#nav1 a{ width:47px; background:url(../images/nav/nav.gif) 0 0 no-repeat;} #navigation li#nav2 a{ width:59px; background:url(../images/nav/nav.gif) -47px 0 no-repeat;} #navigation li#nav3 a{ width:51px; background:url(../images/nav/nav.gif) -106px 0 no-repeat;} #navigation li#nav4 a{ width:73px; background:url(../images/nav/nav.gif) -157px 0 no-repeat;} #navigation li#nav5 a{ width:99px; background:url(../images/nav/nav.gif) -230px 0 no-repeat;} #navigation li#nav6 a{ width:75px; background:url(../images/nav/nav.gif) -329px 0 no-repeat;} #navigation li#nav1:hover a{ background:url(../images/nav/nav.gif) 0 -33px no-repeat;} #navigation li#nav2:hover a{ background:url(../images/nav/nav.gif) -47px -33px no-repeat;} #navigation li#nav3:hover a{ background:url(../images/nav/nav.gif) -106px -33px no-repeat;} #navigation li#nav4:hover a{ background:url(../images/nav/nav.gif) -157px -33px no-repeat;} #navigation li#nav5:hover a{ background:url(../images/nav/nav.gif) -230px -33px no-repeat;} #navigation li#nav6:hover a{ background:url(../images/nav/nav.gif) -329px -33px no-repeat;} #navigation li#nav1.on a, #navigation li#nav1.on:hover a{ background:url(../images/nav/nav.gif) 0 -66px no-repeat;} #navigation li#nav2.on a, #navigation li#nav2.on:hover a{ background:url(../images/nav/nav.gif) -47px -66px no-repeat;} #navigation li#nav3.on a, #navigation li#nav3.on:hover a{ background:url(../images/nav/nav.gif) -106px -66px no-repeat;} #navigation li#nav4.on a, #navigation li#nav4.on:hover a{ background:url(../images/nav/nav.gif) -157px -66px no-repeat;} #navigation li#nav5.on a, #navigation li#nav5.on:hover a{ background:url(../images/nav/nav.gif) -230px -66px no-repeat;} #navigation li#nav6.on a, #navigation li#nav6.on:hover a{ background:url(../images/nav/nav.gif) -329px -66px no-repeat;} #navigation #subnav_about{ width:59px;} #navigation #subnav_projects{ width:73px;} #navigation .subnav{ position:absolute; border:2px #919394 solid; border-top:0; border-bottom:0; display:none; background:#fff; left:-2px; top:32px; padding-top:4px;} #navigation .subnav li{ width:100%; height:18px;} #navigation .subnav li a{ float:left; width:100%; height:18px; text-indent:-999px; overflow:hidden;} #navigation #nav2 .subnav li#what a{ background:url(../images/nav/subnav.gif) 0 0 no-repeat;} #navigation #nav2 .subnav li#how a{ background:url(../images/nav/subnav.gif) -59px 0 no-repeat;} #navigation #nav4 .subnav li#commercial a{ background:url(../images/nav/subnav.gif) -118px 0 no-repeat;} #navigation #nav4 .subnav li#leisure a{ background:url(../images/nav/subnav.gif) -191px 0 no-repeat;} #navigation #nav4 .subnav li#education a{ background:url(../images/nav/subnav.gif) -264px 0 no-repeat;} #navigation #nav4 .subnav li#retail a{ background:url(../images/nav/subnav.gif) -337px 0 no-repeat;} #navigation #nav4 .subnav li#exhibitions a{ background:url(../images/nav/subnav.gif) -410px 0 no-repeat;} #navigation #nav2 .subnav li#what a:hover{ background:url(../images/nav/subnav.gif) 0 -18px no-repeat;} #navigation #nav2 .subnav li#how a:hover{ background:url(../images/nav/subnav.gif) -59px -18px no-repeat;} #navigation #nav4 .subnav li#commercial a:hover{ background:url(../images/nav/subnav.gif) -118px -18px no-repeat;} #navigation #nav4 .subnav li#leisure a:hover{ background:url(../images/nav/subnav.gif) -191px -18px no-repeat;} #navigation #nav4 .subnav li#education a:hover{ background:url(../images/nav/subnav.gif) -264px -18px no-repeat;} #navigation #nav4 .subnav li#retail a:hover{ background:url(../images/nav/subnav.gif) -337px -18px no-repeat;} #navigation #nav4 .subnav li#exhibitions a:hover{ background:url(../images/nav/subnav.gif) -410px -18px no-repeat;} #content{ border:2px #b5b7b8 solid; border-left:0; border-right:0; width:100%; overflow:hidden; padding:15px 0; background:url(../images/main_content_bg.gif) right bottom no-repeat;} #intro #content {padding:15px 0 0;} .sidebar{ float:left; width:255px; display:inline;} .main_content{ float:right; width:530px; font-size:1.2em;} .index_nav{ width:100%; overflow:hidden; margin-top:44px;} .index_nav li{ float:left; height:89px; overflow:hidden; display:inline;} .index_nav li a{ float:left; text-indent:-999px; overflow:hidden; height:89px;} .index_nav li#index_nav1{ margin:0 0 0 124px;} .index_nav li#index_nav2{ margin:0 160px 0 80px;} .index_nav li#index_nav3{ margin:51px 0 0 50px;} .index_nav li#index_nav4{ margin:51px 0 0 40px;} .index_nav li#index_nav5{ margin:51px 0 0 40px;} .index_nav li#index_nav1 a{ width:83px; background:url(../images/nav/index_nav.gif) 0 0 no-repeat;} .index_nav li#index_nav2 a{ width:69px; background:url(../images/nav/index_nav.gif) -83px 0 no-repeat;} .index_nav li#index_nav3 a{ width:89px; background:url(../images/nav/index_nav.gif) -152px 0 no-repeat;} .index_nav li#index_nav4 a{ width:130px; background:url(../images/nav/index_nav.gif) -241px 0 no-repeat;} .index_nav li#index_nav5 a{ width:93px; background:url(../images/nav/index_nav.gif) -371px 0 no-repeat;} .index_nav li#index_nav1 a:hover{ background:url(../images/nav/index_nav.gif) 0 -89px no-repeat;} .index_nav li#index_nav2 a:hover{ background:url(../images/nav/index_nav.gif) -83px -89px no-repeat;} .index_nav li#index_nav3 a:hover{ background:url(../images/nav/index_nav.gif) -152px -89px no-repeat;} .index_nav li#index_nav4 a:hover{ background:url(../images/nav/index_nav.gif) -241px -89px no-repeat;} .index_nav li#index_nav5 a:hover{ background:url(../images/nav/index_nav.gif) -371px -89px no-repeat;} .cate_links{ margin-top:28px;} .cate_links li{ line-height:160%;/* margin:26px 0;*/} /* .cate_links li a:link{ text-decoration:underline; color:#6c6f70; font-size:1.9em;} .cate_links li a:visited{ text-decoration:underline; color:#434546; font-size:1.9em;} .cate_links li a:hover{ color:#aaaeaf;}*/ .main_content h3{ line-height:170%; color:#57068C; margin-top:23px;} .main_content .paragraphy{ margin-top:-7px;} .main_content .paragraphy p{ line-height:150%; margin:7px 0; width:405px;} .main_content .links{ margin-top:30px;} .main_content .links p{ line-height:170%;} .main_content .content_intro{ float:left; width:250px; margin-top:20px;} .main_content .download_intro{ float:right;} .main_content .content_intro p{ line-height:170%;} .main_content .content_intro p strong{ color:#57068c; font-weight:normal;} .main_content .content_intro p.resource_link{ margin-top:110px;} .main_content .content_intro p.download_link{ margin:2px 0 12px;} .main_content .content_intro p.contact_info{ margin-top:18px;} .main_content .content_list{ float:left; width:250px; margin-left:20px; margin-top:20px;} .main_content .content_list li{ padding-left:14px; line-height:170%; background:url(../images/what_li_bg.gif) left center no-repeat;} #footer{ width:100%; color:#c8c9ca; line-height:300%;} #footer span{ margin-right:6px;}