/*
Property Investment Providers Limited - CSS file
Rules for minimum screen of 1024x768, taking a slightly reduced minimum live space as 990x550
*/
* {
color: inherit;
}
body {
padding: 12px 0 12px 0; /* was 0 0 0 0 */
margin: 0;
border: 0;
color: #000000;
background-color: #bcbcbc; /* was #979797 */
font: normal normal 1em/1 'century gothic', arial, helvetica, sans-serif;
}
.textonly { /* Don't make text-only content hidden, as screenreaders might not render it either. Instead just translate it off-screen:- */
position: absolute;
top: -999999px;
left: -999999px;
}
.plain { /* rule to assign to some otherwise normal body content that doesn't look right in Century Gothic. Currently the only example of this is the "?" Question Mark character, which is almost illegible. */
font-family: verdana, arial, helvetica, sans-serif; /* primary font is that of headings and #rightcol */
}
/* Basic defaults. Menus and important links may need different treatment:- */
a { text-decoration: underline; color: #000000; }
a:link { text-decoration: underline; color: #000000; }
a:visited { text-decoration: underline; color: #000000; }
a:active { text-decoration: underline; color: #000000; }
a:hover { text-decoration: underline; color: #4d4e9b; }
a:focus {background-color: #ffcc00 !important; color: #000000 !important;} /* accessibility */
/* stops IE doing stupid things:- */
li a { color: #000000; }
li a:link { color: #000000; }
li a:visited { color: #000000; }
li a:active { color: #000000; }
li a:hover { color: #4d4e9b; }
li a:focus {background-color: #ffcc00 !important; color: #000000 !important;} /* accessibility */
/* stops IE doing stupid things (again):- */
a img { border: 0; }
a:link img { border: 0; }
a:visited img { border: 0; }
a:active img { border: 0; }
a:hover img { border: 0; }
/* unify browsers on this front:- (Deal with other requirements in other css rules/files.) */
ul, ol, li, dl, dt, dd, fieldset, address {
margin: 0;
padding: 0;
}
address {
margin-bottom: 1em;
}
ul, ol {
list-style-position: inside;
margin-bottom: 1em;
}
ul ul, ul ol, ol ul, ol ol { /* for recursive indentation on eg sitemaps */
margin-left: 1em;
}
/* and again:- */
p, h6, h5, h4, h3, h2, h1 {
margin-top: 0;
padding-top: 0;
}
/* and again:- */
fieldset, acronym, abbr {
border: 0;
}
/* and again:- */
strong {
font-weight: bold;
color: #4d4e9b;
}
/* Plus some additional refinements: */
strong.normal {
color: #4a4a4a;
}
strong.heavy {
color: #000000;
}
/* and again:- */
address {
white-space: pre;
font-style: normal;
line-height: 1.2;
}
/* simple rules for elements with functional purposes: */
.float_left {
float: left;
}
.clear_left {
clear: left;
}
.float_right {
float: right;
}
.clear_right {
clear: right;
}
.float_none {
float: none;
}
.clear_both {
clear: both;
}
/* =============================================================== */
#master_container {
text-align: center; /* needed solely for IE to centre its child */
}
/* =============================================================== */
#pip_body_outer { /* 990px = min live space; -2px for borders = 988px. */
margin: 0 auto;
text-align: left;
width: 988px;
border: 1px solid #000000;
/* border-top: 0; */
background-color: #ffffff; /* Could be changed to a buff/manilla colour for dyslexics, etc */
}
/* Box Model Hack for IE6 (counts border as part of width) */
* html #pip_body_outer {
width: 990px;
}
/* And for IE7 (counts border as part of width) */
*+html #pip_body_outer {
width: 990px;
}
/* But what about IE8 ?? Hopefully this remains compliant... */
/* =============================================================== */
#menu_accessibility_top {
list-style-type: none;
list-style-position: outside;
padding: 14px 18px 2px 14px;
margin: 0;
display: block;
text-align: right;
}
#menu_accessibility_top li {
display: inline;
margin: 0 0 0 32px;
text-align: right;
}
#menu_accessibility_top li a {
text-decoration: none;
}
/* =============================================================== */
#pip_body_inner { /* 988 = width of parent, then -14 and -14 for margins = 960 usable width herein: */
margin: 14px;
background: transparent url(/images/pip_bg-edge-lines_960x6.png) scroll repeat-y top left;
/* 14*2 = 28; 988-28 = 960. 960px is the width of the site logo and the width of #pip_body_outer. */
/* do NOT specify a width here - be as sparing with box model issues as you can - let the content flow naturally without letting browsers screw things up. For width see (1)pip_body_outer and (2)pip_content_inner. See also pip_content_outer for a no-width ruleset. */
}
/* =============================================================== */
/* Inside #pip_head now: */
h1 { /* this element contains an image with alt text. The image is 960x152. */
margin: 0;
padding: 0;
height: 152px;
overflow: hidden;
}
/* =============================================================== */
/* Inside #pip_content_outer now: */
#pip_content_outer { /* 960 = width or parent, then -2 and -2 for padding = 956 usable width herein */
/* do NOT specify a width here: Specify the width in pip_content_inner, and hopefully the BoxModelHack for pip_body_outer will make everything alright... */
padding: 32px 2px 21px 2px;
/* 2px padding is for the purple vertical edge lines which are the CSS background-image to #pip_body_inner (this element's parent). */
min-height: 600px;
}
* html #pip_content_outer {
height: 653px /* IE6 treats height as min-height, but its box model is shite, hence the different value too. */
}
*+html #pip_content_outer {
min-height: 653px /* IE7 recognises min-height, but its box model is also shite, hence the different value. */
}
/* =============================================================== */
/* Inside #pip_menu now: */
#pip_menu { /* this div is not just for the menu - it is the container for the whole left column of all pages. Within it, sits #menu_main, rules for that follow... */
float: left;
width: 220px;
margin-top: 0; /* mirrors #rightcol */
/*background-color: yellow;*/
}
ul#menu_main {
list-style-position: outside;
list-style-type: none;
text-align: left;
margin-bottom: 0;
font-family: 'century gothic', verdana, arial, helvetica, sans-serif;
font-size: 1em;
line-height: 1.2em;
letter-spacing: 0.05ex;
}
ul#menu_main ul {
list-style-position: outside;
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
}
#menu_main li {
margin: 0;
text-align: left;
margin-bottom: 14px;
}
#menu_main ul.sub { /* width of parent div is 220px on all browsers. */
margin-left: 14px; /* width now 206px */
margin-right: 14px; /* width now 192px */
font-size: 80%;
line-height: 1em;
}
#menu_main ul.sub li {
margin-bottom: 0;
}
#menu_main li.last {
margin-bottom: 0;
}
#menu_main li a { /* this selector covers ALL levels of nav on main menu, not just ".top" - remember this! */
/* width of parent div is 220px on all browsers. */
text-decoration: none;
color: #353535;
background-color: #dee0e7;
border: 1px solid #bcbcbc; /* width of "li.top a" now 218px. Width of "ul.sub li a" now 190px */
border-left: 0;/* width of "li.top a" now 219px. Width of "ul.sub li a" REMAINS as 190px because in a mo we reinstate the left border of sub-menu items... */
display: block; /* need width, see lower down... */
margin: 0;
padding: 6px; /* width of "li.top a" now 207px. Width of "ul.sub li a" now 178px */
}
/* box-model hacks needed now for ie6 and ie7 because we're specifying widths and borders (AND padding!):- */
#menu_main li a {
width: 207px;
}
/* Box Model Hack for IE6 (counts border as part of width) */
* html #menu_main li a {
width: 220px;
}
/* And for IE7 (counts border as part of width) */
*+html #menu_main li a {
width: 220px;
}
/* But what about IE8 ?? Hopefully this remains compliant... */
#menu_main ul.sub li a {
width: 178px;
}
/* Box Model Hack for IE6 (counts border as part of width) */
* html #menu_main ul.sub li a {
width: 192px;
}
/* And for IE7 (counts border as part of width) */
*+html #menu_main ul.sub li a {
width: 192px;
}
/* But what about IE8 ?? Hopefully this remains compliant... */
#menu_main li a:hover {
text-decoration: none;
/*color: #414141;*/
color: #000000;
background-color: #aaabd5;
/*font-weight: bold;*/
}
#menu_main li a.selected {
color: #ffffff;
background-color: #4d4e9b;
border: 1px solid #000000;
border-left: 0;
/*font-weight: bold;*/
}
#menu_main li a.selected:hover { /* this is needed to override the more global ":hover" rules. */
color: #ffffff;
}
#menu_main ul.sub li a {
border-top: 0;
border-left: 1px solid #bcbcbc; /* This is different from top-level anchors, which have no left border. This affects usable inner width! See above for rules. */
}
#menu_main ul.sub li a {
background-color: #eff0f4;
}
#menu_main ul.sub li a:hover {
background-color: #dee0e7;
}
#menu_main ul.sub li a.selected {
border-left: 1px solid #000000;
background-color: #4d4e9b;
}
#menu_main ul.sub li a.selected:hover {
background-color: #4d4e9b;
}
/* =============================================================== */
/* Inside the PIP Lettings menu container */
#pip_menu_lettings {
margin: 0 14px 28px 14px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
ul#menu_main_lettings {
list-style-type: none;
margin: 0;
padding: 7px 0;
position: relative;
text-align: center;
/*background-color: yellow;*/
}
ul#menu_main_lettings li {
display: inline;
position: relative;
text-transform: uppercase;
margin: 0 14px;
/*background-color: red;*/
}
ul#menu_main_lettings li.first {
margin-left: 0;
}
ul#menu_main_lettings li.last {
margin-right: 0;
}
ul#menu_main_lettings li a {
text-decoration: none;
font-weight: bold;
color: #808080;
}
ul#menu_main_lettings li a.selected {
color: #000000;
}
ul#menu_main_lettings li a:hover {
color: #4d4e9b;
}
/* =============================================================== */
/* Inside the right-hand column: */
div#rightcol {
width: 220px;
float: right;
margin-right: 14px; /* this margin is not mirrored on div#menu_main. This means that the centre column, to follow, is not quite centred on screen because the overall widths that the left and right columns occupy are not the same. Remember this! */
/*margin-right: 0;*/ /* testing only (make left & right symmetrical */
margin-top: 0; /* mirrors #pip_menu */
/*background-color: yellow;*/
font-family: verdana, arial, helvetica, sans-serif;
font-size: 90%;
}
/* Box-model hack (IE6, IE7) */
* html div#rightcol, *+html div#rightcol {
width: 234px;
}
div#rightcol .photobox {
width: 220px; /* must be no greater than the usable width of div#rightcol */
height: 165px;
background-color: #cccccc;
}
div#rightcol .caption {
font-size: 70%;
padding: 1px 4px;
}
/* =============================================================== */
div#pip_content_inner { /* 956px = width of parent, then -240 and -254 = 462px usable width herein */
margin-left: 240px; /* must be >= #pip_menu and its margins (is 220 + 20 gap). */
margin-right: 254px; /* must be >= #rightcol and its margins (is 220 + 14 margin, + 20 gap). */
/*margin-right: 240px;*/ /* testing only (makes usable width 476px) */
text-align: left;
/*background-color: yellow;*/
/* Width (Net) is 462px - do NOT specify width here though */
}
div#pip_content_inner.full { /* Full-width, i.e. no right col, just a margin. Used for pages like the sitemap */
margin-right: 14px; /* makes usable width 462 + 240 = 702px */
}
/*
3-col layout, centre col is 462 wide.
2-col layout, right col is 716 wide.
*/
/* h2 is for page title and subsections - multiple instances per page allowed
h3 is for subheads within pages - multiple instances per page are allowed too */
h2, h3 {
font-family: verdana, arial, helvetica, sans-serif; /* No Century Gothic here */
font-weight: normal;
}
h2 {
margin-top: 2em;
}
h2#page_title {
margin-top: 0;
margin-bottom: 1.2em;
font-size: 1.3em;
}
h3 {
margin-top: 1.7em;
margin-bottom: 0.5em;
color: #4d4e9b;
}
p.pseudo_h3 { /* Sometimes we want some of the aesthetics of a element to mimick those of an
(see above rules), but retaining standard spacing as per normal
s */
margin-top: 0;
margin-bottom: 1em;
font-size: 1.2em;
font-family: verdana, arial, helvetica, sans-serif;
color: #4d4e9b;
}
h3.pseudo_p { /* And likewise sometimes we want some of the aesthetics of a
applied to an
element, which is there for structural (i.e. semantic - purposeful) reasons */
font-weight: bold; /* as per the COLOURED element, but without the colour. */
font-size: 1em;
margin-top: 0;
margin-bottom: 1em;
font-family: 'century gothic', verdana, arial, helvetica, 'sans-serif';
color: #000000;
}
p.first, span.first {
font-weight: bold;
color: #4a4a4a;
}
#pip_content_inner p {
line-height: 1.2;
}
#pip_content_inner ul {
list-style-position: outside;
list-style-type: none;
list-style-image: url(/images/pip_bullet-point.png);
}
#pip_content_inner ol {
list-style-position: outside;
}
#pip_content_inner ul ul, #pip_content_inner ol ol, #pip_content_inner ul ol, #pip_content_inner ol ul {
margin-bottom: 0.5ex;
}
#pip_content_inner ul li {
margin-left: 40px;
line-height: 1.6;
text-align: left;
}
#pip_content_inner ol li {
margin-left: 28px;
margin-bottom: 1ex;
line-height: 1.6;
text-align: left;
}
ul.sitemap { /* all sitemap uls - from top-most to inner-most. See also next rule. */
padding: 0;
margin: 0;
}
ul#sitemap_main { /* the top-most ul of the sitemap - needs a bottom margin */
margin-bottom: 1em;
}
ul#sitemap_main li#sm_homelink {
margin-left: 15px;
}
ul.sitemap .sm_label a {
color: #4d4e9b;
font-weight: bold;
text-decoration: none;
margin-left: 4px;
}
ul.sitemap .sm_label a:hover {
text-decoration: underline;
}
/* =============================================================== */
/* Inside #pip_foot now: */
#pip_foot {
height: 18px;
overflow: visible;
padding: 0 14px;
margin-bottom: 14px;
font-size: 0.8em;
line-height: 1.4;
color: #ffffff;
text-align: right;
background: transparent url(/images/pip_bottom-curve.png) scroll no-repeat bottom left;
}
#pip_foot a, #pip_foot a:link, #pip_foot a:visited, #pip_foot a:hover, #pip_foot a:active {
color: #ffffff;
text-decoration: none;
}
#pip_foot a:hover {
color: #ffd21c;
}
/* no rule here for ":focus" - inherit main rule see top of file. */
/* =============================================================== */
/* The site footer is for links & logos for affiliates, standards, memberships etc - unimportant small-print etc - NOT functional. */
#site_footer {
margin: 21px auto 0 auto;
text-align: left;
width: 960px;
}
#site_footer #sf_validates {
margin-top: 0;
text-align: right;
}
/* end */