@charset "UTF-8";
/* CSS Document */


/* =Mashead - christmas
----------------------------------------------------------------------------------------------------*/
.brandColor {}
.siteDescripter { padding-bottom:0; }



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* Text colours

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

h1, h2, h3 { color:#006b95; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* Breadcrumb colours

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

 .Breadcrumb li { background: transparent url(../cssImages/life/BreadcrumbArrow.gif) no-repeat 0 5px !important; }
.Breadcrumb a:hover { background-color:#c4dbf0; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* General link colours

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.content a:hover, .content410 a:hover, .content605 a:hover, .contentWide a:hover, .AdBox a:hover, div.listbox a:hover { background-color:#c4dbf0; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* OLD Left hand side Navigation colours



.leftColNav a, .leftColNav a:visited
{ 
   color: #0066cc;
}

.leftColNav .bold
{ 
   color: #0066cc;
}

.leftColNav a:hover{
color:#0066cc;
background-color:#c4dbf0;
}

.leftColNav .bold{
background-color: #c4dbf0;

}


.leftColNav li:hover
{  
   	background-color:#c4dbf0;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */





/* nav - reset normal navigation

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.depth0 a:hover { background-color:#d6e9f4; }
/* nav - selected content area only

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


.leftColNav .bold { color: #006b95; background-color: #DCEBFA; }
.depth1 a, .depth1 a:visited { color:#000066; font-weight:bold; }
.depth1 a:hover { color:#006b95; background-color:#eaeaea; font-weight:bold; }
.depth2 a, .depth2 a:visited { color:#000066; font-weight:bold; }
.depth2 a:hover { color:#006b95; background-color:#eaeaea; font-weight:bold; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* topNav link colours

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

 .topNav a:hover { background-color: #c4dbf0; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* coloured panel of CTA's 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.colourPanel1 { background-color:#dcebfa; }
.colourPanel2 { background-color:#d6e9f4; }
.callToAction { color:#006b95 !important; background: transparent url(../cssImages/life/BreadcrumbArrow.gif) no-repeat right 6px !important; }
/* ///////////////////////// blue headings
.colourPanel1 .cta h3{
color:#000066;
}
////////////////////// */





/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* extra box / find out more / more articles to read

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */



.roundedBox { background-color:#c4dbf0; color:#006b95; }
.roundedBox h1 { color:#000066; }
.roundedBox h2 { color:#000066; }
.roundedBox h3 { color:#000066; font-weight:bold; }
.roundedBox a { color:#0066cc !important; }
.roundedBox .top { background:transparent url(../cssImages/life/roundBoxTop.jpg) no-repeat; }
.roundedBox .top .right { background:transparent url(../cssImages/life/roundBoxTopRight.jpg) no-repeat; }
.roundedBox .bottom { background:transparent url(../cssImages/life/roundBoxBottom.jpg) no-repeat; background-color:#0066cc; }
.roundedBox .bottom .right { background:transparent url(../cssImages/life/roundBoxBottomRight.jpg) no-repeat; }
.roundedBox .innerBox { background-color:#ffffff; color:#000000; }
a.extraBoxLink { color:#006b95 !important; background: transparent url(../cssImages/life/BreadcrumbArrow.gif) no-repeat right 6px !important; font-weight:bold; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* quote box colours

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */




p.quoteRgt, p.quoteLft { color:#006b95; background:#dcebfa url(../cssImages/life/quoleft.jpg) left top no-repeat; }
* html p.quoteRgt, * html p.quoteLft { margin:0 10px 0 7px; }
p.quoteRgt strong, p.quoteLft strong, p.quoteRgt b, p.quoteLft b { background:transparent url(../cssImages/life/quoright.jpg) right bottom no-repeat; }
p.quoteRgt strong a, p.quoteLft strong a { color:#0066cc !important; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


Introduction - bold text for intros - weight set within structure stylesheet

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.introduction { color:#006b95; }
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////


Large text - takes on styling of H2

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.textXL { color:#006b95; }
.magNav li a.active { background-color:#006b95; color:#FFFFFF; }


/* Colour changes go here... */
.header .brandColor { background-color: #0099cc; } /* remember to update logo */
.firstLevelNavigation li.current { background: #0099cc url(img/financial/tab-bg-current.jpg) no-repeat bottom center !important; } /*  1st level nav tab - remember to update file www.co-operative.coop/upload/Magazine/css/img/financial/tab-bg-current.jpg */
.secondLevelNavigation { background-color: #e5f5fa; border-top: 1px solid #0099cc; border-bottom: 1px solid #0099cc; } /*  10% fill and 1 pixel keylines */
.secondLevelNavigation li.current { background: url(img/financial/2nd-tab-bg-current.jpg) no-repeat center bottom #0099cc; } /*  2nd level nav tab - remember to update file www.co-operative.coop/upload/Magazine/css/img/financial/2nd-tab-bg-current.jpg *//*  CSS styling [RAPP] 14 July 2011 */
/* header color */
.header .brandColor {background-color:#0099cc}
.firstLevelNavigation li.current,
.secondLevelNavigation li.current {
    background: url("img/financial/tab-bg-current.jpg") no-repeat scroll center bottom #0099CC !important;
}

.secondLevelNavigation {border-top:1px solid #0099cc;border-bottom:1px solid #0099cc}
	
/* Section colour ff7c00  fff2e5 */
#articles-container .article {border-bottom:1px solid #dcebfa}
	

/* Latest article block */
h1.latest-article-title-header {
padding: 5px 20px;
width: 240px;
color:#fff;
background:#0099cc;
font-size:1.4em;
font-weight:bold;
letter-spacing: 1px;
}

h1.latest-article-title-header span {font-weight:normal}
.colourPanel1 {background: #dcebfa; border:1px solid #0099cc;margin-bottom:0;padding-top:10px;padding-bottom:10px;}
.colourPanel1-bottom {width:705px;padding-bottom:15px;background: url('../images/latest-article-bottom.png') no-repeat center bottom}
img.imgTop {padding: 6px 5px;background: url('../images/image-frame.png') no-repeat;}
.inner .description p {margin:0;padding:0;color:#696561;font-size: 0.9em;}
.inner .description .cta .inner h2 {margin:0}
.inner .description p.latest-article-date {color:#cfc7be}

/* Latest in the news block */

.content .latest-article-header h2 {
margin:0;
padding: 5px 20px;
width: 270px;
color:#fff;
font-size:1.4em;
font-weight:normal;
background:#0099cc;
}

.mag-title-box {
width:705px;
padding:10px 0 0 0;
margin-bottom:10px;
border-bottom: 1px solid #0099cc;
}

.content .mag-title-box h2 {
margin:0;
padding: 5px 20px;
width: 100px;
color:#fff;
font-size:1.4em;
font-weight:normal;
background:#0099cc;
}

.latest-article-carousel {
width:705px;
padding:10px 0 0 0;
margin-bottom:10px;
border-bottom: 1px solid #0099cc;
}

.content .latest-article-carousel h2 {
margin:0;
padding: 5px 20px;
width: 120px;
color:#fff;
font-size:1.4em;
font-weight:normal;
background:#0099cc;
}

.news-more-article a {background:#fdeacc;color:#fff;text-decoration: none;margin-top:10px;padding:5px 15px;font-size:1.4em;width: 105px;display:block;}
#pagecontrol .news-more-article a:hover {background:#ff7c00;color:#fff;}

/* ------- subcategory banner -------- */

/** FIXME: CHANGED THE COLOUR!!!! */
.sub-section-banner h1 {color:#01137a;}
.sub-section-banner {border:1px solid #0099cc;}

/* subcat article listing */
img#ctl00_ctl00_Content_MainBannerSelector_ctl00_magazineSubcategoryArticles_ctl00_articleImage {border:2px solid #ff6802;}
	
/* ---- Article Page ------- */

.article-banner img {width:697px;border:3px solid #0099cc;margin-bottom:10px;position:relative;}

/* full article page top banner */
.article-page-banner-label {
position:relative;
top:-38px;
background:#09C;
float:left;
color:#fff;
padding: 5px 15px;
position: relative;
margin-bottom: -35px;
font-size:1.1em;
}

/* banner for white title text */
a#main-content h1 {
/*	color: #FFFFFF;
	float: left;
	font-size: 2.8em;
	margin-left: 20px;
	margin-top: 10px;
	position: absolute;
	width: 320px;
	z-index: 100;
	font-weight:bold;*/
}
.hideOffScreen {display:none}

h1.article-page-banner-white-title {
  	float: left;
	font-size: 2.8em;
	margin-left: 20px;
	margin-top: 10px;
	position: absolute;
	width: 320px;
	z-index: 100;
  color:#fff;
  font-weight:bold;
}

/* banner for blue title text */
h1.article-page-banner-blue-title {
  	float: left;
	font-size: 2.8em;
	margin-left: 20px;
	margin-top: 10px;
	position: absolute;
	width: 320px;
	z-index: 100;
  color:#000066;
  font-weight:bold;
}

/* quote */	
.article-quote {background: url('/upload/Magazine/css/img/quote/family-quote-bg.png') no-repeat;}
.article-quote-txt {color:#0099cc;font-size: 1.5em;line-height:1.3em;}
.article-quote-txt-grey {border-top:2px solid #0099cc;color:#666;padding-top:10px;margin-top: 10px;}
.article-quote-bottom {background: url('/upload/Magazine/css/img/quote/family-quote-bottom.png') no-repeat;}

.more-article a,
.more-article a:hover {
margin:0;
padding: 5px 20px;
color:#ff7c00;
background:#fff2e5;
font-size:1.2em;
letter-spacing: 1px;
text-decoration:none;
display:block;
width:240px;
clear:both;
}

/* list style */
.content ul li {list-style-image: url('/upload/Magazine/css/img/bullet-list-family.png');}

/* cat listing RHS panel */ 
.rightCol, #rightCol {}
#mag-article-count-banner {background:#dcebfa;padding-bottom:20px;margin-top:14px}
#mag-article-count-banner a {text-decoration:none;font-weight:bold;color:#333;}
#mag-article-count-banner h2 {margin:0;padding:10px 10px 0 10px}
#mag-article-count-banner ul {margin:0}
#mag-article-count-banner ul li {
  margin-left:-30px;
  width:200px;
  list-style:none;
  border-top:1px solid #ccc;
  margin-top:5px;
  padding-top:5px
 }
 
span.count-text {font-size:0.84em;color:#333}


/* carousel */
#contentSlider {border-bottom: 1px solid #dcebfa;}

#contentSliderCarousel li div, .jcarousel-prev-horizontal, .jcarousel-next-horizontal {background-color: #0099cc;}



/* ******** global styling ********* */
.content .content749 {width:705px;margin-bottom:25px;}
.cta {margin:0 8px}

#pagecontrol {margin-bottom:30px}
/*.rightCol, #rightCol {margin-right:20px}*/

/* Landing page */
.publishDate {display: block;margin-bottom: 3px;}

#hedMainHeading {margin:0;padding:2px 0 5px 0}
	
.mag-news-item.first {float:left;width:109px;margin-right:38px}
.mag-news-item a {text-decoration:none;}
.mag-news-item a:hover {text-decoration:none;}

.mag-news-item.last {margin-right:0;float:left;width:109px;} /* jquery to append last to news item */

.mag-news-img img {
	height: 109px;
	padding: 7px 6px;
	margin-left:-5px;
	width: 109px;
	background: url('/upload/Magazine/cssImages/leisure/news-thumb-frame.png') no-repeat;
}

.mag-news-date {color:#555;}

.cta .callToAction {padding-right:10px;}

/* --- subcategory article listing --- */
#articles-container .article img {float:left;width:206px;height: 106px;background: url('/upload/Magazine/cssImages/leisure/article-listing-thumb-frame.png') no-repeat;padding:7px 7px 10px 7px;}
#articles-container .article-content {float:left;padding-left:20px;width: 450px;}
.article-content a {font-weight:bold;color:#000;text-decoration: none;} /* read more link */

/** FIXME: CHANGED COLOUR !!!! **/
.article-content h3 {margin-top:3px;}
.article-content h3 a {font-size:1.2em;text-decoration:none;color: #000;}
#articles-container .article {float: left;margin-bottom: 15px;padding-bottom: 15px;}


/* Subsection */
.gradient-white {
	height: 110px;
	left: 10px;
	position: relative;
	top: 0;
	width: 400px;
	z-index: 100;
	background: url('/upload/Magazine/css/img/gradient-white.png') no-repeat;
}

.sub-section-banner h1 {font-size:3em;padding:10px 5px}
p.subsection-banner-text, h2.subsection-banner-text {color:#333;padding-left: 7px;padding-right: 80px;}
img.sub-section-banner {
	float: right;
    margin-bottom: -90px;
    position: relative;
    right: -1px;
    top: -111px;
    z-index: 20;
}
	

/* full article page */
.publishDate {display: block;margin-bottom: 5px;font-size:0.8em;color:#b4b4b4}
.article-inner {padding-bottom: 40px;}
.introduction {color:#000}
.content h2, .content .h2, .competitionEventsListing .linkIntroduction h2 a {color:#002663;}

.article-thumb-wrapper {
  float: right;
  margin-left: 10px;
}

img.article-thumb,
img#imgTop {
	width:206px;
	height:107px;
	padding:7px 7px 10px 7px;
	margin:5px;
	background: url('/upload/Magazine/cssImages/leisure/article-listing-thumb-frame.png') no-repeat;
}
a:hover#lnkImage {background:none}
/*.article-thumb img {border:1px solid #ff6802;margin:0;padding:0; width:205px;height: 106px;}*/
			
#articles-container .article-image-wrapper {background:none}

/** !!!!! FIXME: CHANGE COLOUR **/
#articles-container .article-content p {margin:0;margin-bottom:0.5em; color: #333;}
.article-content a { colour: #333; }

/* quote */
.quote-outer {float:right;margin-bottom:10px}
.article-quote {
width:184px;
padding:10px 20px;
margin-left:30px;
margin-top:20px;
}
.article-quote-txt {color:#ff6802;font-size: 1.5em;line-height:1.3em;}
.article-quote-bottom {
	width:224px;
	height:20px;
	margin-left: 30px;
}

#bottomBannerDiv a:hover {background:none;}

/*
.inner h2#hedMainHeading,
.inner .description,
.inner .latest-article-date {padding:0 5px}
*/
.clear {clear:both}
/** NEW date functions on for the landing pages*/
.dateLarge {
	font-size: 0.9em !important;
	font-weight: bold;
	padding: 0 !important;
	margin:0 !important;
	color: #888 !important;
}

.cta .inner {
	padding: 0 5px 5px 14px; /* Fix to align the text under the image nicely*/
}
#hedMainHeading {
	font-size: 1.1em; /** Reduce the font size slightly */
}
.AdBox {
	border: none !important; /** Remove the nasty border at the bottom*/
}
.AdBox p {
	color: #002663;
	font-size: 1.1em;
}
.mag-news-date {
	font-size: 0.9em;
}
#lnkBottom {
	color: #999 !important;
	background: none !important;
	font-weight: normal; 
}
#contentSlider {
	height: 120px !important;
	position: relative;
}
/* New RHS Banners */
.mag-rhs-banner{
	background-color: #0099CC;
}
.mag-rhs-banner h3{
    color: #ffffff;
}