#mainContent {
	background-image: url(../img/mosaic.png);
	background-repeat: no-repeat;
	background-position: 707px 85px;
	height: 869px;
	
}
.orFix {
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	display: inline-block;
    font-size: 24px;
    font-weight: bold;
    margin: 8px 15px;
    text-align: center;
}
#digitalContent img {
	margin-left: 30px; 
}
#printContent img {
	margin-left: 80px; 
}
#postContent img {
	margin-left: 30px; 
}
#photoContent img {
	margin-left: 120px; 
}
.slideContent p {
	width: 465px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    font-size: 18px;
    width: 465px;
    margin: 10px 0 20px 30px;
}
#photoContent p {
	width: 400px;
}
#FAQs p {
	width: 545px;
	padding: 0;
	font-size: 14px;
	margin: 0;
}
#FAQs ul li {
	list-style: none;
}
#accordion div {
	border: none;
	padding: 0 0 10px 40px;
}
#accordion h3 {
	font-size: 14px;
	text-align: left;
}
.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}
.head {
    background-color: #005B82;
    width: 600px;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-weight: bold;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.head:hover {
    color: #FEBE00;
    text-decoration: none;
}
.findOut {
    background-image: url("../img/sprites.png");
    background-position: -15px -281px;
    display: inline-block;
    height: 18px;
    left: 0;
    position: relative;
    top: 3px;
    width: 19px;
}
span.FBicon {
    background-image: url("../img/sprites.png");
    background-position: -37px -280px;
    display: inline-block;
    height: 41px;
    width: 41px;
    float: left;
    margin: 0 10px 0 30px;
    
}
/* TOP NAV */
#topNav ul {
	display: inline-block;
}
	#topNav ul li {
		float: left;
		list-style: none;
		width: 155px;
		height: 48px;
		margin-right: 10px;
		text-indent: -9999px;
	}
		#topNav ul li.Countries {
			margin-right: 0px;
		}
		.navIcon {
			display: block;
			height: 48px;
		}
.navIcon, .flag, .navArrow, a.whiteBtn, a.goToBtn, a.contBtn {
	background-image: url(../img/sprites.png);
}
	.Balance			{background-position:   -1px  -1px}
	.Balance:hover		{background-position:   -1px -49px}
	.Corporate			{background-position: -158px  -1px}
	.Corporate:hover	{background-position: -158px -49px}
	.TnCs				{background-position: -315px  -1px}
	.TnCs:hover			{background-position: -315px -49px}
	.Retailers			{background-position: -472px  -1px}
	.Retailers:hover	{background-position: -472px -49px}
	.FAQs				{background-position: -629px  -1px}
	.FAQs:hover			{background-position: -629px -49px}
	.Countries			{background-position: -786px  -1px}
	.Countries:hover	{background-position: -786px -49px}

#topNav ul li ul {
	display: none;
}
#topNav ul li:hover > ul {
	background-color: #c9cac8;
	display: block;
    padding: 0px 0 2px 7px;
    width: 83px;
    position: absolute;
    top: 210px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


.flagList li {
	margin: 0 5px 5px 0 !IMPORTANT;
}
#topNav span.flag {
    display: block;
    height: 27px;
    margin-left: 47px;
    margin-top: -5px;
    width: 35px;
}
	#topNav ul li ul li {
    	height: 25px;
    	width: 35px;
	}
	#topNav ul li ul li a {
		float: left;
    	height: 25px;
    	width: 35px;
	}
		
			.flag {
				height: 25px;
				width: 35px;
			}

				.AU 	{background-position:   -1px -322px}
				.CA 	{background-position:  -38px -322px}
				.DK 	{background-position:  -75px -322px}
				.DE 	{background-position: -112px -322px}
				.FI 	{background-position: -149px -322px}
				.NL 	{background-position: -445px -322px}
				.NZ 	{background-position: -186px -322px}
				.NO 	{background-position: -223px -322px}
				.MX 	{background-position: -260px -322px}
				.ROI 	{background-position: -297px -322px}
				.SE 	{background-position: -408px -322px}
				.UK 	{background-position: -334px -322px}
				.USA 	{background-position: -371px -322px}


/* HEAD TITLES */
#headTitle {
	background-image: url(../img/title.png);
	height: 131px;
	width: 451px;
	margin: 30px 0 30px 40px;
}
#headTitle h1, #headTitle p {text-indent: -9999px}


/* SIDE NAV */
.navTxt {
	text-indent: -9999px;
	display: inline-block;
}


#sideNav ul {
	float: right;
	margin: 40px 114px 0 0;
}
	#sideNav ul li {list-style: none outside none;}
	#sideNav ul li div{
		height: 45px;
    	list-style: none outside none;
    	margin-bottom: 10px;
    	width: 260px;
    	border: none;
	}
		a.whiteBtn {
			background-position: -793px -190px;
		    display: inline-block;
		    height: 21px;
		    margin: 12px 0 0 135px;
		    text-indent: -9999px;
		    width: 67px;
		}
			a.whiteBtn:hover { background-position: -793px -211px;}
#TMgiftCard {
	background-image: url(../img/gift-card.png);
	height: 295px;
	width: 454px;
	position: absolute;
	margin: -7px 0 0 650px;
	z-index: 100;
}

.navArrow{
	position: relative;
	left: 0px; /* need to finish at -163px */
	cursor: pointer;
}
.gc_tabs .active{
	left: -163px;
}
	#Digital 	{
		background-position: -1px -99px;
		
	}
		#Digital:hover 	{
			background-position: -1px -144px;
			
		}

	#Print 		{
		background-position: -261px -99px;
	}
		#Print:hover 		{
			background-position: -261px -144px;
		}

	#Post 		{
		background-position: -522px -99px;
	}
		#Post:hover 		{
			background-position: -522px -144px;
		}

	#Photo 		{
		background-position: -784px -99px;
	}
		#Photo:hover 		{
			background-position: -784px -144px;
		}


/* CONTENT DIVs */
#printContent {display: none;}
#postContent {display: none;}
#photoContent {display: none;}



/* OVERLAYS */
#digitalBox, #retailersBox {border: 2px #DD5A14 solid;}
#printBox, #landingBox {border: 2px #D80F13 solid;}
#postBox {border: 2px #741D66 solid;}
#landingBox {padding-bottom: 10px;}
#FAQs {border: 2px #003478 solid; padding: 0 10px}
.window h3 {
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    font-size: 24px;
    text-align: center;
    padding-bottom: 15px;
}
.window ol {
	display: inline-block;
	margin-bottom: 15px;
}

.window ol li {
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 14px;
	display: block;
    float: left;
    list-style: none outside none;
    margin-left: 32px;
    text-align: center;
    width: 115px;
}
.window ol li span {
	background-image: url("../img/sprites.png");
    display: block;
    height: 100px;
    width: 110px;
}
.window {
    width: 630px;
    background-color: #fff;
}
#corporateBox p {
	text-align: center;
	margin-bottom: 10px;
}
	#corporateBox p a {font-size: 12px;}

	.window ol .olDigital1 {
	    background-image: url(../img/sprites.png);
	    background-position: 20px -451px;
	    margin: 0 0 10px 0;
	}
	.window ol .olDigital2 {
	    background-image: url(../img/sprites.png);
	    background-position: -146px -451px;
	    margin: 0 0 10px 0;
	}
	.window ol .olDigital3 {
	    background-image: url(../img/sprites.png);
	    background-position: -312px -451px;
	    margin: 0 0 10px 0;
	}
	.window ol .olDigital4 {
	    background-image: url(../img/sprites.png);
	    background-position: -478px -451px;
	    margin: 0 0 10px 0;
	}

	.window ol .olPrint1 {
	    background-image: url(../img/sprites.png);
	    background-position: 20px -553px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPrint2 {
	    background-image: url(../img/sprites.png);
	    background-position: -146px -553px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPrint3 {
	    background-image: url(../img/sprites.png);
	    background-position: -312px -553px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPrint4 {
	    background-image: url(../img/sprites.png);
	    background-position: -476px -553px;
	    margin: 0 0 10px 0;
	}

	.window ol .olPost1 {
	    background-image: url(../img/sprites.png);
	    background-position: 20px -348px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPost2 {
	    background-image: url(../img/sprites.png);
	    background-position: -144px -348px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPost3 {
	    background-image: url(../img/sprites.png);
	    background-position: -311px -348px;
	    margin: 0 0 10px 0;
	}
	.window ol .olPost4 {
	    background-image: url(../img/sprites.png);
	    background-position: -477px -348px;
	    margin: 0 0 10px 0;
	}
.phoneIcon {
	    background-image: url(../img/sprites.png);
	    background-position: 0px -280px;
	    height: 12px;
	    width: 12px;
	    margin: 0 5px 0 0;
	    float: left;
	}
a.goToBtn {
	background-position: -1px -190px;
    display: inline-block;
    float: left;
    height: 44px;
    margin-left: 112px;
    text-indent: -9999px;
    width: 221px;
}
a.goToBtn:hover {
	background-position: -1px -234px; 
}
a.contBtn {
	background-position: -224px -190px;
    display: inline-block;
    float: right;
    height: 44px;
    margin-right: 130px;
    text-indent: -9999px;
    width: 112px;
}
a.contBtn:hover {
	background-position: -224px -234px;
}
/* BUTTONS */
.olBtn {
    height: 44px;
    width: 112px;
    display: block;
    background-image: url(../img/sprites.png);
    background-position: -338px -190px;
    text-indent: -9999px;
    margin: auto;
}
.btnDigital:hover {
    background-position: -338px -234px;
}
.btnPrint {
    background-position: -452px -190px;
}
.btnPrint:hover {
    background-position: -452px -234px;
}
.btnPost {
    background-position: -566px -190px;
}
.btnPost:hover {
    background-position: -566px -234px;
}
.quickLinks {
	width: 440px;
	margin: auto;
}
	#corporateBox .quickLinks {width: 305px}
#FAQs .quickLinks {
	width: 255px;
	margin: auto;
}
	.quickLinks ul {
	    display: inline-block;
	}
		.quickLinks ul li {
			font-family: "Century Gothic", Arial, Helvetica, sans-serif;
		    float: left;
		    list-style: none outside none;
		    margin: 10px;
		    font-size: 12px;
		}
/* RETAILERS */
ul.storeList {
	display: inline-block;
}
	ul.storeList li {
		display: block;
		margin: 15px 27px;
		list-style: none;
		float: left;
	}
		ul.storeList li a {
			width: 98px;
			height: 60px;
			display: block;
			list-style: none;
			text-indent: -9999px;
		}
.ASDA, .WHSmith, .Boots, .Sainsburys, .Superdrug, .Morrisons, .Coop, .Clintons {
	background-image: url(../img/retailers-logos.gif);
}
.ASDA			{background-position: -14px -15px}
.WHSmith		{background-position: -264px -105px}
.Boots			{background-position: -139px -15px}
.Sainsburys		{background-position: -14px -105px}
.Superdrug		{background-position: -139px -105px}
.Morrisons		{background-position: -388px -15px}
.Coop			{background-position: -388px -105px}
.Clintons		{background-position: -264px -15px}

/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
	#nav li{
		float:left;
		margin-right:10px;
		position:relative;
	}
		#nav a{
			display:block;
			padding:5px;
			color:#fff;
			background:#333;
			text-decoration:none;
		}
			#nav a:hover{
				color:#fff;
				background:#6b0c36;
				text-decoration:underline;
			}

/*--- DROPDOWN ---*/
#nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}

.cornerBox {
    background: none repeat scroll 0 0 red;
    border-bottom-right-radius: 10px;
    display: inline-block;
    height: 35px;
    width: 47px;
}
span.flag {margin: 5px 0 0 6px;}

/* MODAL BOX */
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:fixed;
  display:none;
  z-index:9999;
  top: 25% !IMPORTANT;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}

a.close {
    background-image: url("../img/sprites.png");
    display: block;
    height: 25px;
    left: 595px;
    margin-top: 10px;
    position: relative;
    text-indent: -9999px;
    width: 25px;
}
.orangeClose {background-position: -80px -280px}
.redClose {background-position: -107px -280px}
.purpleClose {background-position: -134px -280px}
.blueClose {background-position: -188px -280px}
.paleblueClose {background-position: -215px -280px}
.greyClose {background-position: -161px -280px}