/*--------------------------------- Primary bathrooms2u Style Sheet version: 2.0 author: David Ludbrook email: info@truelevity.com website: http://truelevity.com ---------------------------------*/ /* GLOBAL/RESET ------------------------------------------------------------------*/ body { font-family:Helvetica,Arial,sans-serif; font-weight:normal; text-align:left; background:#fff url(/img/bg_body.gif) repeat-x top;} hr {display:none;} body, html, ul, h1, h2, h3, h4, h5, h6, p, blockquote, a img, form { margin:0; padding:0; font-weight:normal; border:none;} ul, ol, li, dl {list-style-type:none;} a {text-decoration:none;} a:visited, a:link {color:#3398ca;} a:hover {text-decoration:underline;} .clear { border:0; clear:both; display:block; float:none; margin:0; overflow:hidden; visibility:hidden; width:0; height:0;} /* LAYOUT ------------------------------------------------------------------*/ #container { width:840px; margin:0 auto;} #header {} #navbar { height:30px; margin-bottom:15px;} #content {} #secondary { float:left; margin:0 5px 20px 0; width:210px;} #primary { float:left; margin:0 0 20px 0; width:625px;} #footer { clear:both; border-top:1px solid #999; padding:10px 0;} /* HEADER ------------------------------------------------------------------*/ /* ----- Logo ----- */ #header h1 {text-indent:-9000px;} #header h1 a { background:transparent url(/img/logo.gif) no-repeat center; display:block; width:840px; height:130px;} /* ----- Main Navigation ----- */ ul#mainNav { height:30px; float:left;} #mainNav li { font-size:12px; float:left; text-align:center; line-height:30px;} #mainNav li a { display:block; height:30px; padding:0 15px; background:url(/img/bg_current.gif) no-repeat 0 -10px;} #mainNav li a:link, #mainNav li a:visited {color:#666;} #mainNav li a:hover { color:#333; text-decoration:underline;} body#intro ul#mainNav li#h_nav a, body#products ul#mainNav li#p_nav a, body#news ul#mainNav li#n_nav a, body#about ul#mainNav li#a_nav a, body#contact ul#mainNav li#c_nav a { color:#333; background-position: bottom center; font-weight:bold;} /* ----- Search Form ----- */ #searchbox { height:30px; float:right;} #searchbox form#search_form .txt { font-size:12px; height:14px; width:124px; padding:2px; margin:5px 0 0 0; border:1px solid #ccc; background:#fff url(/img/bg_input.gif) repeat-x top left;} #searchbox form#search_form .txt:focus {border-color:#666;} #searchbox form#search_form .btn { vertical-align:top; padding:0; margin:5px 5px 0 0; border:1px solid #ccc;} #searchbox form#search_form .btn:hover {border-color:#666;} /* SECONDARY ------------------------------------------------------------------*/ /* ----- side ----- */ #side { padding-bottom:10px; background:url(/img/bg_side_bot.gif) no-repeat bottom;} #side h3 { background:url(/img/bg_side_top.gif) no-repeat top; border-bottom:1px solid #eee;} #side ul { font-size:11px; color:#666; padding:10px 15px;} #side li { background:url(/img/bg_item.gif) no-repeat left -45px; padding:4px 0 4px 18px;} #side li#currententry { background-position:left 3px;} #side li a {color:#666;} #side li#currententry a, #side li a#currententry { color:#333; font-weight:bold;} #side li a:hover { color:#3398ca; text-decoration:underline;} #products #side ul li ul {padding:0;} #products #side ul li ul li { padding:2px 0 2px 18px;} /* ----- products ----- */ #products #side li, #intro #side li { background:url(/img/bg_cat.gif) no-repeat left -45px; padding:4px 0 4px 18px;} #products #side li#currententry { background-position:left 3px;} /* ----- text formatting ----- */ #secondary h3 { font-size:14px; font-weight:normal; padding:15px; color:#333;} #secondary p { font-size:10px; color:#333; padding:10px 15px;} /* ----- news ----- */ #side p#archivelink { text-align:right; margin:0; padding-top:0;} #side p#archivelink a img { border:1px solid #ccc;} #side p#archivelink a:hover img {border-color:#666;} /* ----- further ----- */ #secondary #further { margin:5px 0;} #secondary #further a { text-indent:-9000px; display:block; background:#fff url(/img/bg_further.gif) no-repeat 0 0; width:210px; height:60px;} #secondary #further a:hover { background-position:0 -60px;} /* FOOTER ------------------------------------------------------------------*/ #footer { font-size:11px; color:#666;} #footer a:link, #footer a:visited {color:#666;} #footer a:hover {color:#3398ca;} #footer p {margin:0;} #footer p.address, #footer p.contact { float:left; line-height:18px; padding:0 10px} #footer p.address { border-right:1px solid #999; padding-left:0;} #footer p em { padding-left:20px; font-style:normal;} #footer p em.tel { background:url(/img/ic_phone.gif) no-repeat;} #footer p em.fax { background:url(/img/ic_fax.gif) no-repeat;} #footer p em.email { background:url(/img/ic_mail.gif) no-repeat;} ul#links { float:right; text-align:right;} ul#links li {line-height:18px;} ul#links li#sitemap-link { padding-right:20px; background:url(/img/ic_sitemap.gif) no-repeat right;} /* PRIMARY ------------------------------------------------------------------*/ #primary h1, #primary h2, #primary h3, #primary h4, #primary h5, #primary p { margin-left:15px; color:#333;} #primary h1 { font-size:24px; margin-bottom:20px; margin-top:5px;} #primary h2 { font-size:18px; padding-bottom:5px; margin-bottom:15px; border-bottom:1px solid #ccc;} #primary h3 { font-size:16px; padding-bottom:5px; margin-bottom:10px; border-bottom:1px solid #eee; font-weight:bold;} #primary h4 { font-size:14px; padding-bottom:5px; margin-bottom:10px; border-bottom:1px solid #fafafa; font-weight:bold;} #primary p { font-size:14px; padding-bottom:10px;} #about #primary p img, #news #primary p img { border:1px solid #ccc;float:left; margin:0 10px 5px 0; padding:5px;} #news #primary p a.imgright img, #about #primary p a.imgright img { float:right; margin:0 0 5px 10px;} #primary table { font-family:Arial, sans-serif; font-weight:normal; font-size:12px; color:#404040; width:95%; background-color:#fff; border:5px solid #ccc; border-collapse:collapse; border-spacing:0px; margin:15px;} #primary table tr { border-bottom:1px solid #ccc;} #primary table tr th { border-left:2px solid #ccc; border-bottom:2px solid #ccc; background-color:#f1f1f1; text-align:center; font-weight:bold; font-size:12px; padding:2px 5px;} #primary table tr td { border-left:2px solid #ccc; text-align:left; padding:2px 5px;} #news #primary h2, #about #primary h2 {clear:both;} /* PRIMARY - SITEMAP ------------------------------------------------------------------*/ #sitemap #primary h2 { padding-left:25px; background:url(/img/ic_folder_go.gif) no-repeat left top; } #sitemap #primary h4 { margin-left:60px; padding-left:20px; background:url(/img/ic_bullet_go.gif) no-repeat left top;} #sitemap #primary h4.folder {background-image:url(/img/ic_folder.gif);} /* PRIMARY - NEWS ------------------------------------------------------------------*/ /* ----- recent ----- */ #news-brief { width:350px; float:left; margin-right:55px;} #news-brief h5 { font-size:14px; font-weight:bold;} #news-brief p { font-size:11px; line-height:16px; } #news-brief p.entry-date { color:#999; margin-top:20px; padding:0;} #news-brief img {display:none;} /* ----- manufacturer list ----- */ #manlinks { width:220px; float:left;} #manlinks h2 {margin-left:0;} #manlinks a { display:block; margin-top:20px;} /* ----- news item ----- */ p#articledate { font-weight:bold; margin-bottom:10px; color:#666; background:#fff url(/img/ic_date.gif) no-repeat top left; padding-left:18px;} /* ----- archive ----- */ #primary h2.archiveheader { margin:15px 0 0 15px;} #primary p.archivelist { font-size: 11px; padding:0;} p.archivelist a { color:#3398ca; padding:5px 0 5px 20px; display:block; border-bottom:1px solid #ccc; background:url(/img/ic_newspaper.gif) no-repeat left;} p.archivelist a span { color:#999; display:block; width:130px; float:left;} p.archivelist a:hover { text-decoration:none; background-color:#fcfcfc;} p.archivelist a:hover span {color:#666;} /* PRIMARY - CONTACT ------------------------------------------------------------------*/ /* ----- contact form ----- */ #contactbox { width:400px; float:left; margin-right:15px;} #contactbox form p { margin:0 55px;} #contactbox form p#submission {text-align:right;} #contactbox form p#required { margin-left:0; font-size:11px; padding-left:10px; background:url(/img/bg_require.gif) no-repeat left top;} #contactbox form p label { color:#333; font-size:11px; float:left; display:block; width: 70px; padding-top:3px;} #contactbox form p.require label {background:url(/img/bg_require.gif) no-repeat 95% 20%;} #contactbox form p .txt, #contactbox form p .txtarea { font-family:Helvetica,Arial,sans-serif; font-size:12px; line-height:normal; color:#444; border:1px solid #ccc; padding:3px; width:210px; background:#fff url(/img/bg_input.gif) repeat-x top left;} #contactbox form p .txt {height:14px;} #contactbox form p .txtarea {height:100px;} #contactbox form p .txt:focus, #contactbox form p .txtarea:focus {border-color:#666;} /* ----- contact details ----- */ #contactdetails { width:210px; float:left; padding-bottom:10px; background:url(/img/bg_side_bot.gif) no-repeat bottom;} #contactdetails h3 { background:url(/img/bg_side_top.gif) no-repeat top; font-size:14px; font-weight:normal; padding:15px; margin:0;} #contactdetails dl { font-size:11px; color:#666;} #contactdetails dl dt { font-weight:bold; padding-left:15px;} #contactdetails dl dd { margin-left:80px; margin-top:-13px; margin-bottom:13px;} /* ----- thankyou ----- */ p#thanks { background:#fff url(/img/ic_tick.gif) no-repeat top left; padding-left:18px;} /* PRIMARY - PRODUCTS ------------------------------------------------------------------*/ /* ----- categories ----- */ #primary ul#catimages { margin:5px 0 0 0;} #primary ul#catimages li { float:left; margin:0 8px 8px 0;} #primary ul#catimages li a { text-align:center; background-color:#fff; border:1px solid #ccc; display:block; width:178px; height:198px; padding:10px; text-align:center; overflow:hidden; position:relative;} #primary ul#catimages li a:hover {border-color:#666;text-decoration:none;} #primary ul#catimages li a .thumbholder { width:180px; height:180px; display:table-cell; vertical-align:middle;} #primary ul#catimages li a .thumbholder img {vertical-align:middle;} #primary ul#catimages li a span { background-color:#FFFFFF; bottom:0px; display:block; font-size:13px; font-weight:bold; left:0pt; margin-top:8px; padding:2px 0pt; position:absolute; text-align:center; text-transform:uppercase; width:199px;} /* ----- category ----- */ #primary .prodsummary { position:relative; margin:0 0 10px 15px; border:1px solid #ccc; clear:both; padding:10px 10px 10px 0;} #primary .prodsummary h2 { margin-right:190px; position:relative; margin-bottom:2px; padding-right:60px;} #primary .prodsummary h2 span { display:block; position:absolute; top:0; right:0;} #primary .prodsummary a.thumblink { display:block; float:right; text-align:center;} #primary .prodsummary a .thumbholder { width:180px; height:180px; display:table-cell; vertical-align:middle;} #primary .prodsummary a .thumbholder img {vertical-align:middle;} #primary .prodsummary p {color:#666;} #primary .prodsummary .pad-fix {padding-bottom:20px;} #primary .prodsummary p.manrange, #primary .prodsummary p.mancode { font-size:12px; font-weight:bold; text-transform:uppercase; color:#666; } #primary .prodsummary p.manrange {width:300px;} #primary .prodsummary p.mancode { float:right; margin-right:10px; font-weight:normal; background:#fff url(/img/ic_tag_blue.gif) no-repeat 0 0; padding-left:18px;} #primary .prodsummary p.moreinfo { position:absolute; bottom:0; left:0;} #primary .prodsummary p.moreinfo a { display:block; font-size:11px; color:#666; border:1px solid #ccc; padding:5px; width:380px; background:#fff url(/img/bg_more.gif) repeat-x bottom;} #primary .prodsummary p.moreinfo a:hover { color:#666; border-color:#666; text-decoration:none;} #sortresults { background-color:#eee; padding:5px; margin:0 0 15px 15px; text-align:right; border:1px solid #999;} #sortresults fieldset { border:none; margin:0; padding:0;} #sortresults fieldset legend { padding:0; font-weight:bold; font-size:12px; color:#666; text-transform:uppercase; margin:0 0 -15px 0;} /* ----- item ----- */ #primary #productitem {} #primary #productitem h1 { position:relative; border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:1px;} #primary #productitem h1 span { font-weight:bold; display:block; position:absolute; top:0; right:0;} #primary #productitem p#manrangeitem { text-transform:uppercase; padding-bottom:30px; font-weight:bold; color:#666; font-size:16px;} #primary #productitem p#productcodeitem, #primary #productitem p#manlink { text-align:right; font-size:11px; color:#666; padding:3px 20px;} #primary #productitem p#productcodeitem { background:url(/img/ic_tag_blue.gif) no-repeat right; text-transform:uppercase;} #primary #productitem p#manlink { background:url(/img/ic_mouse.gif) no-repeat right; } #primary #productitem #imggallery { text-align:center; margin:0 0 20px 15px;} #primary #productitem #imggallery a { display:block; float:left; background-color:#fff; padding:0 16px 16px 0; margin-right:7px;} #primary #productitem #imggallery a:hover { background:#fff url(/img/ic_magnifier_zoom_in.gif) no-repeat right bottom; } #primary #productitem #imggallery a div.thumbholder { display:block; width:180px; height:180px; display:table-cell; vertical-align:middle; } #primary #productitem #imggallery a div.thumbholder img {vertical-align:middle;} /* ----- photo ----- */ body #primary.full {width:inherit;} #primary #productphoto {width:840px;} #primary #productphoto #thephoto { clear:both; text-align:center;} #primary #productphoto h1 { position:relative; border-bottom:1px solid #ccc; padding-bottom:10px; margin:0 0 1px 0;} #primary #productphoto h1 span { font-weight:bold; display:block; position:absolute; top:0; right:0;} #primary #productphoto p {margin:0;} #primary #productphoto p#manrangeitem { text-transform:uppercase; padding-bottom:30px; font-weight:bold; color:#666; font-size:16px; float:left; width:400px;} #primary #productphoto p#photonav { text-align:right; float:right; border:1px solid #ccc; border-width:0px 1px 1px 1px; padding:5px; font-size:11px;} #primary #productphoto p#photonav a {padding:1px; margin:0 10px;} #primary #productphoto p#photonav a#navback {} #primary #productphoto p#photonav a#navprev { background:#fff url(/img/ic_arrow_left.gif) no-repeat left; padding-left:20px;} #primary #productphoto p#photonav a#navnext { background:#fff url(/img/ic_arrow_right.gif) no-repeat right; padding-right:20px;} /* PRIMARY - SEARCH ------------------------------------------------------------------*/ /* ----- results ----- */ #primary .result { margin:0 0 10px 15px; border:1px solid #ccc; padding:10px 15px 15px 0;} #primary .result h2 { position:relative; margin-bottom:1px; padding-right:60px;} #primary .result h2 span { display:block; position:absolute; top:0; right:0;} #primary .result p {color:#666;} #primary .result p.manrange, #primary .result p.mancode { font-size:12px; font-weight:bold; text-transform:uppercase; color:#666; } #primary .result p.manrange {width:270px;} #primary .result p.mancode { float:right; font-weight:normal; background:#fff url(/img/ic_tag_blue.gif) no-repeat 0 0; padding-left:18px;} #primary .result p.moreinfo {padding:0;} #primary .result p.moreinfo a { display:block; font-size:11px; color:#666; border:1px solid #ccc; padding:5px; width:380px; background:#fff url(/img/bg_more.gif) repeat-x bottom;} #primary .result p.moreinfo a:hover { color:#666; border-color:#666; text-decoration:none;} /* ----- note ----- */ #primary p#note, #primary p#noresults { font-size:18px; padding:10px 0; margin-bottom:10px;} #primary p#note span, #primary p#noresults span { font-weight:bold; font-style:italic;} #primary p#noresults { padding:15px 60px; background:#fff url(/img/ic_info.gif) no-repeat left;} /* ----- form ----- */ #primary #search_adv { margin:0 0 0 15px; padding:0 0 10px 0;} #primary #search_adv div { display:none; height:0; width:0;} #primary #search_adv #keywords { float:left; width:263px; margin:0 10px 0 0; padding:2px; border:1px solid #ccc; font-size:19px; background:#fff url(/img/bg_input.gif) repeat-x top left; color:#333;} #primary #search_adv #keywords:focus {border-color:#666;} #primary #search_adv .btn { border:1px solid #ccc;} #primary #search_adv .btn:hover {border-color:#666;} /* PRIMARY - INTRO ------------------------------------------------------------------*/ #morecontent a { background:url(/img/bg_intro.gif) no-repeat 0 0; display:block; width:625px; height:80px; margin-bottom:20px;} #morecontent a:hover { background-position:0 -80px;} #morecontent h1 { text-indent:-9000px; padding:0; margin:0; line-height:0px;} #primary #front {} #primary #front h2 { margin:0 4px 10px 4px;} #primary #front a { float:left; display:block; width:180px; height:180px; padding:9px; margin:4px; border:1px solid #ccc; } #primary #front a:hover { border-color:#666; background:#fff url(/img/ic_star.gif) no-repeat right bottom;} #primary #front a div.thumbholder { text-align:center; width:180px; height:180px; display:table-cell; vertical-align:middle; } #primary #front a div.thumbholder img {vertical-align:middle;} /* HOME ------------------------------------------------------------------*/ body#home { background: #1a1a1a none; color:#fff; font-size:14px;} body#home #wrapper { width:700px; margin:0 auto; text-align:center; margin-top:80px;} body#home #wrapper h1 { text-indent:-9000px; background:#1a1a1a url(/img/bg_frn_logo.gif) no-repeat top center; display:block; width:700px; height:58px; margin-bottom:15px;} body#home #wrapper ul{} body#home #wrapper li{} body#home #wrapper ul li a { text-indent:-9000px; display:block; width:255px; height:130px; float:left; background-color:#f00;} body#home #wrapper ul li a#show { margin-left:95px; background:#1a1a1a url(/img/bg_frn_show.gif) no-repeat top center;} body#home #wrapper ul li a#cata { background:#1a1a1a url(/img/bg_frn_cat.gif) no-repeat top center;} /* ----- footer ----- */ body#home ul#frontfoot { position:absolute; bottom:0; left:0; font-weight:bold; text-transform:uppercase;} body#home a { color:#fff; display:block;} body#home a#con {color:#fff;float:left; padding:10px 0 10px 30px; background:transparent url(/img/ic_cursor.gif) no-repeat 10px;} body#home a#pri { color:#fff; float:right; padding:10px 10px 10px 30px; background:transparent url(/img/ic_money_pound.gif) no-repeat 10px;} /* FIX ------------------------------------------------------------------*/ body#about #primary p { line-height:20px; padding-bottom:15px;} body#news #primary p {line-height:20px;}