/* 
-------------------------------------------------------------------
Land Securities - St. Johns Shopping Centre
Authored by: Reading Room Ltd.
All editable styles for reskinning

All styles that need to be changed for each different look and feel 
should be in this file.  All other elements that don't change are 
in default.css or generic.css

-------------------------------------------------------------------
*/

body {
	text-align:center;
	font: 68% verdana, arial, sans-serif; /* Unusual font size is used so resizing in IE and Firefox is the same */
	margin:0;
	padding:0;
	color: #333;
	background: url(/images/backgrounds/stjohns-body-bg.jpg) top left repeat-x;
}

h1 {
	font-size: 1.3em;
	margin: 0 0 .6em 0;
	padding:0;
	color: #000;
	line-height: 1.2em;
	text-transform:uppercase;
	clear:both;
}

h2 {
	font-size: 1.2em; 
	color: #000;
}

h3 {font-size: 1em;}

h4 {font-size: 1em}

ul, ol {
	margin:0;
	padding:0;
	list-style:none;
}

p {
	line-height: 1.2em;
	margin:1em 0;
}

a {color: #000; text-decoration:none}
a:hover {color: #333; text-decoration:underline}
a:visited { }

img {border:0; margin:0;}

table {
	clear:both; 
	margin:.5em 0; 
	padding:0; 
	border-collapse:collapse; 
	width:100%;
	font-size: 1em;
}
caption {text-align:left; }
td, th {
	vertical-align:top; 
	text-align:left; 
	padding-right:1em; 
	margin:0;
}

#wrapper {
	width: 73em;
	margin:.5em auto 0 auto;
	text-align:left;
	display: block;
}

/* Divs to create the drop shadow effect that wraps around the white border */
.topShadow {}
.leftShadow {}
.rightShadow {}
.bottomShadow {}

/* Div to create the white border around the whole site */
#borderWrapper {}

/* Branding for the site 
--------------------------------------------------------------------------
*/

/* Image for print only */
#printHeader {display:none;}
#printHeader img {display:none;}

#header {
	width:100%;
	background:#fff;
	background:url(/images/backgrounds/header-stjohns.gif) no-repeat #fff;
}

#logo {float:left;  }
#logo h1, #logo a {margin:0; display:block; text-indent: -5000px; background:url(/images/logos/stjohns.gif) no-repeat; height:130px; width:192px;}

/* Contact us links and newsletter registration at the top of the page */
#globalLinks {
	float:right;
	width: 40%; 
	text-align:right;
	padding-right:3em;
	padding-top:3em;
	display:inline;
	background:url(/images/backgrounds/header-stjohns-topc.gif) no-repeat top right;
}

#globalLinks ul {
	margin: 0 0 .3em 0;
	padding:0;
}

#globalLinks ul li {
	margin:0;
	padding:0;
	display:inline;
	list-style: none;
	line-height: 1.7em;
}

#globalLinks ul li a {
	border-right: 1px solid #000;
	padding: 0 .4em 0 0em;
	color:#000;
}

#globalLinks ul.pageTools {width:100%;margin:1em 0 1em 0;}

#globalLinks ul li.last a {border-right:none}


/* Main content area & wrapper 
--------------------------------------------------------------------------
*/

/* Main wrapper for leftnav, content area and right column */
#mainContent {background: #fff}

/* Sitewide box displaying opening times - under the leftnav */
#openingTimes {width:100%;  height:15.4em; background: url(/images/opening-corner.gif) no-repeat bottom left #02a8cb}
#openingTimes h2 {color:#fff;margin:0 .5em .2em .9em; padding-top: 0.7em; font-size:110%; }
#openingTimes p {color:#fff; margin:0; padding:.4em 0 .3em .9em; line-height:1.4em;}
#openingTimes span {color:#fff; font-weight: bold; float: left; width: 7.5em; }
#openingTimes a {text-decoration:underline; color:#fff; }
#openingTimes a:hover {text-decoration:none;}
#contentArea span.openDays, #contentAreaWide span.openDays {color:#6d5495; float:left; width:24em; clear:left; font-weight:bold;}


/* Div for the main promo image on the homepage */
#homepagePromo {float:right; width:56.65em; border-left: 1px solid #fff; }
#homepagePromo img.main {width:56.55em; /*height:30.7em;*/ display:block;  }

/* Spotlight boxes on the homepage */
#homepageBoxes {float:left; border-top:1px solid #fff; display:inline; width: 55.3em; background: url(/images/promos/promo-bg-stjohns.gif) no-repeat bottom right #c9c9c9; display:inline; padding: .5em}/* margin and width altered in iestyles.css */
	#homepageBoxes div {float:left; height:15.3em; height: 14.3em}
	
	#spotlight1 { width:18.1em; position:relative; background: url(/images/promos/promo-bg.jpg) repeat-x bottom #fff; }
	#spotlight2 {width:18.1em; position:relative; background: url(/images/promos/promo-bg.jpg) repeat-x bottom #fff; border-left: .5em solid #c9c9c9}
	#spotlight3 {  width:18.1em; position:relative; background: url(/images/promos/promo-findus.jpg) no-repeat right bottom #fff; border-left: .5em solid #c9c9c9}

	#spotlight4 {display:none;}
	
	#spotlight1 h2,
	#spotlight2 h2,
	#spotlight3 h2 {font-size:120%;  color:#ed1c24; margin:0;  padding:.5em .5em .5em .7em; background: url(/images/spotlight-bg.gif) no-repeat 95% 60%}
	#spotlight1 p, 
	#spotlight2 p,
	#spotlight3 p {color:#333; padding: 0 .8em; margin:0}
	
	#spotlight1 a, 
	#spotlight2 a, 
	#spotlight3 a {margin-top:.6em; color:#c20e1b; margin-left:.8em; margin-top:.5em; position:absolute; bottom:.8em; }
	
/* Smaller content area so the rightCol can be displayed */
#contentArea {float:left; width:45.5%; margin-left:2%; display:inline;}
	#contentArea h2, #contentAreaWide h2 {margin-top:2em;}
	#contentArea ul li, #contentAreaWide ul li {padding-left:1.5em; background:url(/images/externalLink-bullet.gif) no-repeat left; line-height:1.5em;}
	#contentArea a:active, #contentArea a:link, #contentArea a:visited {text-decoration:underline}
	#contentArea a:hover {text-decoration:none;}
	
/* Full width content area without the right column */
#contentAreaWide {float:right; width:75%; margin-right:1.5%; display:inline;}

#contentAreaWide .listing {padding-bottom:1.5em;}
#contentAreaWide .listing h2 {margin:1.5em 0 1em 0; padding:0; text-transform:uppercase; line-height:0;}
#contentAreaWide .listing p {margin:.5em 0; padding:0; line-height:1.3em;}
#contentAreaWide .altListing h2 {margin:1.5em 0 1em 0; padding:0; line-height:0;}
#contentAreaWide .altListing p {margin:.5em 0; padding:0;}
#contentAreaWide .vacancyListing h2 {margin:1.5em 0 1em 0; padding:0; line-height:0;}
#contentAreaWide .vacancyListing p {margin:.5em 0; padding:0;}
#contentAreaWide .listitem {float:left;}

#contentArea .column h2, #contentAreaWide .column h2 {font-weight:normal;font-size:100%; margin:1em; padding:0}
#contentArea #facilitiesListing h2, #contentAreaWide #facilitiesListing h2 {display:inline; margin:0; padding:0; color:#00889f;}
#contentArea #facilitiesListing p, #contentAreaWide #facilitiesListing p {padding-left:2.8em;}
#contentArea #facilitiesListing ul, #contentAreaWide #facilitiesListing ul{list-style:disc; margin-left:2.8em;}
#contentArea #facilitiesListing ul li, #contentAreaWide #facilitiesListing ul li { line-height:1.5em; margin-left:0em; padding-left:1.5em; list-style:none;}
#contentArea #facilitiesListing ul li a, #contentAreaWide #facilitiesListing ul li a {display:block;}

/* Previous and Next links for listing pages */
#contentArea ul.pagination, #contentAreaWide ul.pagination {width:100%;}
	#contentArea ul.pagination li, #contentAreaWide ul.pagination li {padding-left:0em; width:33.3%; float:left; background:none;}
	#contentArea ul.pagination li.next, #contentAreaWide ul.pagination li a {color:#333; background:#cbe0ec; font-size:110%; padding:.2em .3em .3em .3em; cursor:pointer; c\ursor:hand; border:1px solid #7f7f7f;}
	#contentArea ul.pagination li.next, #contentAreaWide ul.pagination li.previous a {float:left;}
	#contentArea ul.pagination li.next, #contentAreaWide ul.pagination li.next a {float:right;}

/* 2 column content */
.column {float:left;width:49%;}

/* Right column included on some pages for latest news */
#rightCol {float:right; width:25%; color:#333;margin-right:1.5%;display:inline;}
	#rightCol h2 {margin:.5em 0em 1em 0em;}
	#rightCol p {margin:1em 0;}

/* Styles for the alternative Latest News column */
#rightColAlt {float:right; width:25%; margin-right:1.5%; display:inline;}
	#rightColAlt h2 {margin:.5em 0;}
	#rightColAlt h3 {margin:.5em 0;}
	
/* Wrapper divs to create 3 equal height columns*/


	
/* Footer 
--------------------------------------------------------------------------
*/
#footer {
	padding: .6em 0 1em 0; 
	clear:both;
	float:left; 
	width: 100%;
	display:inline;
	font-size: .9em
}

#footer a:link, #footer a:visited, #footer a:active  {
	color:#333;
}	

#footer p {
	float:right; 
	text-align:right;
	padding-right:1em;
	margin: .1em 0 0 0;
	line-height: 1.8em;
	display:inline;
	background:url(/images/logos/landsecurities-alt.gif) no-repeat;
}

#footer ul {
	float:left;
	width: 62%;
	margin:0;
	padding:0;
	display:inline;
	line-height: 1.8em;
	padding-left:.9em;
}

#footer ul li {
	margin:0;
	padding:0;
	display:inline;
}

#footer ul li a {
	border-right: 1px solid #563973;
	padding: 0 .4em 0 0em;
}

#footer ul li.last a {border-right:none;}



/*
-------------------------------------------------------------------
FORM ELEMENTS
-------------------------------------------------------------------
*/

form {
	margin:0; 
	padding:0;
	border:0;
}

fieldset label {font-weight:normal;}

fieldset {
	border:0; 
	margin:0; 
	padding:0;
}

select, input, textarea {padding:.1em; border:1px solid #999; font-size:110%;}
textarea { font-size: 100%; font-family: sans-serif; }

input.button {color:#fff; background:#e20033;font-size:110%; padding:.1em .2em .1em .1em; border:0;cursor:pointer;c\ursor:hand;} /* top and bottom padding set to 0 in iestyles.css */
#contentAreaWide input.button {display:block; border:1px solid #e20033; margin: .5em 0 0 11.3em; clear:both;} /* Left margin is increased in iestyles.css */

#contentArea input.standardField, #contentAreaWide input.standardField {margin:0 0 .7em 0; width:18em;}
#contentArea input.ageField, #contentAreaWide input.ageField {margin:0 0 .7em 0; width:3em;}
#contentArea select.standardField, #contentAreaWide select.standardField {margin:0 0 .7em 0;}
#contentArea textarea.standardField, #contentAreaWide textarea.standardField {margin:0 0 .7em 0; width:21.5em; height:7em;}/* smaller width in iestyles.css */

.inpageForm {padding:1em;}
.inpageForm fieldset {width:75%;}
#contentArea  .inpageForm h2, #contentAreaWide .inpageForm h2 {margin:0 0 .5em 10.3em; color:#000;} /* Left margin is increased in iestyles.css */
.inpageForm a {padding:0 .2em; color:#000; font-weight:bold; font-size:110%;line-height:1.5em; text-decoration:underline;}
.inpageForm a:hover {text-decoration:none;}
.inpageForm fieldset select#byCategory {width:18.2em;}
.inpageForm fieldset input#byName {width:18em;}
.inpageForm fieldset input#byPhone {width:18em;margin-bottom:1em;}
.inpageForm label {float:left; width:10.3em; color:#000; font-weight:bold; font-size:120%; }
.inpageForm input {padding:.1em;}
.inpageForm .alphabetBox {margin-left:12.2em; width:43%;}

/* Layout for groups of Radio buttons */
.inpageForm fieldset .radioButtons {float:left; width:60%; }
	.inpageForm fieldset .radioButtons label {float:left; width:auto; margin: 0 .5em .5em 0; font-weight:normal;}
	.inpageForm fieldset .radioButtons input {float:left; border:0; margin-top:.2em; margin-right:1em;}
	.inpageForm fieldset .radioButtons .column label {width:5em; font-weight:normal;}

/* Layout for disclaimer with text and checkbox */
.inpageForm fieldset .disclaimer {float:left; clear:left; width:80%; margin:.3em 0 1em 12.5em; display:inline;}/* Margins altered in iestyles.css */
	.inpageForm fieldset .disclaimer label {margin-left:0;font-weight:normal;width:auto;display:inline;float:none;  font-size:100%;}
	.inpageForm fieldset .disclaimer input {border:0;}
	.inpageForm fieldset .disclaimer p {margin:.3em 0;}

.inpageForm #fCompetition fieldset {padding-bottom:1em;}

#storeSearch .inpageForm input {margin-bottom:0;}

/* Sitewide box for searching the website - under the leftnav */
#searchBox {color:#575265; padding:.8em 1em .6em .9em; height:6.7em;} /* height is altered in iestyles.css */
	#searchBox h2 {color:#0479c3; font-size:110%; margin:.4em 0; }
	#searchBox input#keywordsField {width:8.5em; border:1px solid #fff;}
	#searchBox label {color:#575265; display:block; margin:0 0 .4em 0;}



/*
-------------------------------------------------------------------
NAVIGATION ELEMENTS
-------------------------------------------------------------------
*/


#leftContentcol {
	float: left;
	width: 22.13%;
	width: 22.25%
}

/* Nav for Second, Third, Fourth and Fifth Levels */
#leftNav {
	float: left;
	width: 100%;
	background: url(/images/nav-bg-stjohns.jpg) no-repeat left top;
}

/* Widths for the links in the subnav are overridden in iestyles.css */
/*1st Level */
#leftNav ul {font-size:80%; list-style:none; padding:.9em 0 0 0; margin:0; background: url(/images/nav-bg-stjohns-tc.gif) no-repeat top right; }
#leftNav ul li {font-size:130%; padding:0; margin: 0 .9em .1em .9em;   }

#leftNav ul li a {background: url(/images/nav-button-bg.gif) repeat-x top #b6042c }

#leftNav ul li a {padding:.6em .8em .7em .8em; display:block; color:#fff; }
#leftNav ul li.onNav {}
#leftNav ul li.onNav a {color:#000; }
#leftNav ul li.onNav a.current {color:#000;}
#leftNav ul li a.currentTopLev {font-weight:bold; color: #fff;}
#leftNav ul li a:active.current, 
#leftNav ul li a:link.current, 
#leftNav ul li a:visited.current { color:#000; font-weight:bold; }
#leftNav ul li a.subNavOn {color:#000; }

#leftNav ul li.first a  {padding:0; background: url(/images/nav-first-tr.gif) no-repeat top right #b6042c}
#leftNav ul li.first span {display: block; padding:.6em .8em .7em .8em; background: url(/images/nav-first-tl.gif) no-repeat top left }

#leftNav ul li.last a {padding: 0; background: url(/images/nav-last-br.gif) no-repeat bottom right #ef2351; }
#leftNav ul li.last span {display: block; padding:.6em .8em .7em .8em; background: url(/images/nav-last-bl.gif) no-repeat bottom left }

#leftNav ul li.last { }

/*2nd Level */
#leftNav ul ul {margin:0 .5em;  background: #feedee; padding-bottom:.5em;font-size:110%;}
#leftNav ul li ul li { border-bottom:none; margin-bottom:.5em; padding-right:.2em;font-size:90%; background: none}
#leftNav ul li.onNav ul li a {padding:0 0 0 1em;  background: none}

/*3rd Level */
#leftNav ul ul ul {margin:.5em 0; padding:0; }
#leftNav ul ul ul li {margin-bottom: 0;}

/* Breadcrumb */
#breadcrumb {float:left; width:100%; font-size:100%; margin-bottom:1em;   color:#000; background: url(/images/bc-stjohn-tr.gif) no-repeat top right #02a8cb}

#breadcrumb ul {margin:0; padding:.5em 1em; list-style:none;  background: url(/images/bc-stjohn-tl.gif) no-repeat top left}
#breadcrumb ul li {
	display:inline;
	list-style:none;
	background:url(none);
	padding:0;
	font-weight:normal;
	color: #fff;
}
#breadcrumb ul li a {color:#fff;}

#breadcrumb .divider {display: none}




/* 
--------------------------------------------------------------------------
GENERIC SITE WIDE CLASSES
--------------------------------------------------------------------------
 */
 
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;} /* For IE 7 & IE5Mac */
/* Hide from IE Mac \*/	
.clearfix {display:block;}
/* End hide from IE Mac */

.clearer {
	clear:both; 
	font-size: 1px; 
	line-height: 1px; 
	overflow:hidden;
	width:100%;
	height:1px;
}

.hidden {
	padding: 0;
	text-indent: -9999px;
	line-height:1px;
	height: 1px;
	overflow:hidden;
	font-size:1px;
}
.hidden:lang(en) {display:none} /* for opera */

.rtFloat {float:right;}
.ltFloat {float:left;}
.ltImgFloat {float:left; margin: .5em 1em 1em 0;}
.rtImgFloat {float:right; margin: .5em 0 1em 1em;}
.imgCentered {width:73%; margin:0 auto;}
.imgPromo {text-align:center; }


.topMargin {margin-top:1em;}
.rightMargin {margin-right:1em;}
.leftMargin {margin-left:1em;}
.bottomMargin {margin-bottom:1em;}

/* Dividing lines used in various sections and an alternate divider for inversed colours */
.wrappingDivider {
	height: 1px;
	line-height:1px;
	background-color: #92b6c9;
	overflow:hidden;
	margin:1em 0 1em 0;
	}
.closeDivider {
	clear:both;
	height: 1px;
	background-color: #92b6c9;
	width:100%;
	overflow:hidden;
	margin:1em 0 1em 0;
	}
.divider {
	clear:both;
	height: 1px;
	line-height:1px;
	background-color: #92b6c9;
	width:100%;
	overflow:hidden;
	margin:2em 0 1em 0;
	}
#breadcrumb .divider {margin:.5em 0 0 0;}
#rightCol .divider {margin:.5em 0;}
#rightColAlt .divider, .listing .divider, .altListing .divider {margin:1em 0;}
#openingTimes .divider {background-color: #92b6c9;	color:#92b6c9;	margin:0;}

.altDivider {
	clear:both;
	height: 1px;
	background-color: #92b6c9;
	color:#fff;
	width:100%;
	overflow:hidden;
	margin:0;
	font-size:1px;
	}

/* Document icons */
.pdfDoc {padding:.5em 0 .5em 2.5em; background:url(/images/icons/pdf.gif) no-repeat top left; display:block;}

/* spacing and alignment for icons */
img.icon {vertical-align:middle;margin-right:.5em;display:none;}

.externalLinks {color:#008ca3;}

.navlevel1 {margin:0em 0 0.8em 1em; padding: 0 0 0 1.2em; background:url(../images/externalLink-bullet.gif) no-repeat center left;font-size:1.1em;}
.navlevel2 {margin:0em 0 0.8em 4em; padding: 0 0 0 1.2em; background:url(../images/externalLink-bullet.gif) no-repeat center left;font-size:1.1em;}


.galleryimage {margin:6px 4px 6px 4px;padding:8px;background-color:#eeeeee;border:1px solid #dddddd;float:left;width:150px;height:105px;text-align:center;}
.gallerythumb {margin:12px;padding:8px;background-color:#eeeeee;border:1px solid #dddddd;float:left;width:60px;height:56px;text-align:center;}