@charset "utf-8";

/*
 * Basic Layout [start]
 *
 * Styles for the basic layout.
 *
 */

html {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/background-tile.jpg) repeat scroll 0 0 transparent;
}



body {
    background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/ecBasePylonBG.png) no-repeat scroll 73% -50px, url(http://images.moneysavingexpert.com/images/cheapenergyclub/ecBulbWatermark.png) no-repeat scroll 22% -50px, url(http://images.moneysavingexpert.com/images/cheapenergyclub/ecBaseBG.png) repeat-x scroll left top transparent;
    font-size: 14px;
	min-width:320px;
}


/*
 * Basic Layout [end]
 */



/*
 * Typography [start]
 *
 * Styles for the standard typography.
 *
 */

/*--- FONTS ---*/



* {
	font-family: "Segoe UI",Candara,"Bitstream Vera Sans","DejaVu Sans", Trebuchet MS,"Verdana","Verdana Ref",sans serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}

h1, .alpha,
h2, .beta,
h3, .gamma,
h4, .delta,
h5, .epsilon,
h6, .zeta {
	color: #ff7600;
	font-family: "museo-slab";
	font-weight: normal;
}


h4.dropdown {cursor:pointer; margin-bottom:1em;}
h4.dropdown:hover {color:#666}

a,
.link {
	color: #0095B2;
	text-decoration: underline;
	cursor: pointer;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease; 
	transition:all 0.2s ease;
}


a:hover { color:#026f84}



a:active,
a:focus{
	/* Give clicked links a depressed effect. */
	top:0;
}



/*
 * Typography [end]
 */


/*
 * Forms [start]
 *
 * Styles for the forms.
 *
 * Using a few media queries so that phones/tablets are forced to use their own rendering for some stuff.
 * (Styling mobile forms is tricky, better to just let them use their own built in styling).
 */
@media (min-width: 720px) {
input[type="radio"],
input[type="checkbox"] ,
input[type="text"],
input[type="password"] {
	display: block;
	float: left;
}



input[type="text"],
input[type="password"] {
	line-height: 1;
	padding: 5px;
	height: 20px;
	width: 250px;
	margin: 0;
	border: 1px solid #DADADA;
	background-color: #FFFFFF;
	
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #666666;
}

.short-text-field {
	width: 140px!important; /* !important needed unfortunately, was getting overridden by width set above */
}
}

/* 
 * Fancy selects, requires the .select-wrapper to wrap each select
 */

.select-wrapper {
	float: left;
	line-height: 1;
	margin: 0;
}
.multi-line-select{
	width:100%;
}
/*
 * Using :not(#foo) so only modern browsers use it
 * Old browsers/phones should use their own form rendering
 */
@media (min-width: 720px) {
.select-wrapper:not(#foo) {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/select-background.png) right 2px no-repeat #FFFFFF;
	height: 29px;
	width: 258px;
	padding: 1px;
	border: 1px solid #DADADA;
	overflow: hidden;
	
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #666666;
}

.select-wrapper:not(#foo) select {
	background: transparent;
	padding: 4px;
	height: 29px;
	width: 292px;
	border: none;
	outline: none;
	-webkit-appearance: none;
}

/* Short select */
.short-select-wrapper:not(#foo) {
	width: 148px!important;
}

.short-select-wrapper:not(#foo) select {
	width: 180px!important;
}
}

.form-row-wrapper {
	display: block;
	margin: 5px 0 5px 30px;
}

.form-row {
	display: block;
}

/* Checkboxes and radio buttons */
.checkbox-label {
	width: 108px;
}

.checkbox-wrapper,
.radio-wrapper {
	position: relative;
	float: left;
}

/* Stuff using :not(#foo) so only modern browsers use it
 * Old browsers/phones should use their own form rendering */
@media (max-width: 719px) {
.checkbox-wrapper,
.radio-wrapper {
	width: 150px;
}

.radio-wrapper input[type='radio'], 
.checkbox-wrapper input[type='checkbox'] {


	float: left;
}

.checkbox-wrapper input[type='checkbox'] {
	margin: 9px 3px;
}

.checkbox-wrapper input[type='radio'] {
	margin: 3px;
}
}
@media (min-width: 720px) {
.radio-wrapper:not(#foo) input[type='radio'], 
.checkbox-wrapper:not(#foo) input[type='checkbox'] {
	position: absolute;
	left: -9999px;
}

/* Checkbox specific
 * These need the extra + input[type='hidden'] + in the selectors because Spring adds hidden fields after checkboxes.
 */
.checkbox-wrapper:not(#foo) label,
.checkbox-wrapper:not(#foo) input[type='checkbox'] + input[type='hidden'] + label {
	margin-left: 25px;
}

.checkbox-wrapper:not(#foo) input[type='checkbox'] + label:before,
.checkbox-wrapper:not(#foo) input[type='checkbox'] + input[type='hidden'] + label:before {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/checkbox-states.png) left top no-repeat;
	height: 18px;
	width: 18px;
	position: absolute;
	top: 6px;
	left: 0;
	content: "\00a0";
}

.checkbox-wrapper:not(#foo) input[type='checkbox']:checked + label:before,
.checkbox-wrapper:not(#foo) input[type='checkbox']:checked + input[type='hidden'] + label:before{
	background-position: 0 -18px;
}

/* Radio specific */
.radio-wrapper:not(#foo) input[type='radio'] + label {
	margin-left: 30px;
}

.radio-wrapper:not(#foo) input[type='radio'] + label:before {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/radio-states.png) left top no-repeat;
	height: 24px;
	width: 24px;
	position: absolute;
	top: 0;
	left: 0;
	content: "\00a0";
}

.radio-wrapper:not(#foo) input[type='radio']:checked + label:before {
	background-position: 0 -24px;
}
}
/*
 * Forms [end]
 */





/*
 * Tables [start]
 *
 * Styles for the tables.
 */

table,
table th,
table tr,
table td {
	border: none;
	background: none;
	vertical-align: middle;
}

table {
	margin: 25px 0 0 0;
}

table th,
table td {
	border-right: 1px solid #E5E5E5;
}

table th:last-of-type,
table td:last-of-type {
	border-right: none;
}

table td {
	border-top: 1px solid #E5E5E5;
}

table .blank-cell {
	margin: 0;
	padding: 0;
	border: none;
}

/*
 * tables [end]
 */





/*
 * Buttons [start]
 *
 * Styles for the buttons.
 */



.button {text-align:center; color:#fff; font-weight:bold; border-radius:5px;  text-shadow:0 1px 0 rgba(0,0,0,0.3); font-family:'Segoe UI', candara, sans-serif; font-size:14px; text-decoration:none; display:inline-block; box-shadow:0 1px 2px rgba(0,0,0,0.2), inset 0 1px rgba(255,255,255,0.3); text-shadow:0 1px 0 rgba(0,0,0,0.3); background:#ff7600; border:1px solid #ff7600; border-bottom:1px solid #e46b03; -webkit-appearance:none; position:relative}


a.button {
	color: #FFFFFF; /* Needed to override the a color */
}

.button:hover,
.button:active {
	background-color: #ff9331;
	text-decoration:none;
	border-bottom:1px solid #ff7600;
}

.button:active { top:1px;}

.small-button {
	padding: 3px 7px;
	height: 30px;
}

a.small-button {
	padding: 7px;
	height: 15px;
}

.large-button {
	padding: 15px 30px;
}

.alternative-button {
	background: #00d5ff;
	
	box-shadow: 1px 1px 1px #247e90;
	-o-box-shadow: 1px 1px 1px #247e90;
	-moz-box-shadow: 1px 1px 1px #247e90;
	-webkit-box-shadow: 1px 1px 1px #247e90;
}

.alternative-button:hover,
.alternative-button:active {
	background: #08b8db;
}

/*
 * Buttons [end]
 */



/*
 * Errors [start]
 *
 * Styles for the error messages.
 *
 */

/* Error notification */
.error-notification-wrapper {
	border: 2px solid #ff7600;
	padding: 25px 40px;
	margin: 15px 0 15px 15px;
	background-color: #f2f2f2;
}

.error-notification-title,
.error-notification-description {
	display: block;
	color: #484848;
	margin: 5px 0;
}

.error-notification-title {
	font: 14px "Segoe UI",Candara,"Bitstream Vera Sans","DejaVu Sans", Trebuchet MS,"Verdana","Verdana Ref",sans serif;
	font-weight: bold;
}

.error-icon {
	width: 21px;
	height: 21px;
	display: inline-block;
	margin: -5px 5px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/error-icon.png) 0 0 no-repeat;
}

/* Error form row */
.error-form-row-wrapper {
	border: 2px solid #ff7600;
	margin: 15px 0 15px 15px;
	padding: 15px 13px 15px 13px;
	background-color: #f2f2f2;
}

.error-row {
	display: block;
	padding: 10px 0 0 25px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/error-icon.png) 0 10px no-repeat;
}

/* mini mse mast */

.mse-banner .grids { margin:0 auto!important; float:none!important; max-width:940px}
.mse-banner { background:url(http://images.moneysavingexpert.com/images/miniMastBG.png) repeat-x center -2px #f6f6f6;box-shadow:0 1px 2px #e5e5e5; padding:3px 0 0 0; height:40px} 
.mse-banner a {text-decoration:none; display:block;}
.mse-banner h3 { font: 12px "Segoe UI",Candara,"Bitstream Vera Sans","DejaVu Sans", Trebuchet MS,"Verdana","Verdana Ref",sans serif; margin:0; color:#666; float:left; line-height:37px; font-style:italic;text-shadow:0 1px 0 rgba(255,255,255,0.95);}
.mse-banner a:hover h3 {color:#000;}
.mse-banner ul.siteNav { list-style:none; display:inline-block; margin:0 0 0 25px;}
.mse-banner ul.siteNav li { display:inline; }
.mse-banner ul.siteNav li a { float:left; font-size:12px; padding:9px 10px; text-decoration:none; color:#666; text-shadow:0 1px 0 rgba(255,255,255,0.95)}
.mse-banner ul.siteNav li a:hover {color:#b31717;}

/*
 * Header [start]
 *
 * Styles for the header.
 *
 */

/* Page title and tagline */

.header {margin:10px 0}
.header .grids {margin: 0 auto;}
.site-header .site-title,
.site-header .site-tagline {display: block;line-height: 1;}

.site-header {position:relative; left:-15px;}
.site-header a,
.site-header a .site-title,
.site-header a .site-tagline {text-decoration:none}

.site-header span.MSEBranding { font-family:'museo-slab'; color:#ff7600; font-size:28px; text-indent: 0; display:block; margin-bottom:-5px; letter-spacing:-0.015em;}
.site-header a {display: block; position: relative;}

.site-header .site-title {
    color: #0095B2;
    display: block;
    font-size: 48px;
    letter-spacing: -0.05em;
    margin: 8px 0 3px 0;
	text-shadow:0 1px 0 #fff;
	padding-left:70px;
	background:url(http://images.moneysavingexpert.com/images/ecHeadLogo.png) no-repeat left 8px}
	
	
	h2.site-title i {display:block; width:108px; height:41px; background:url(http://images.moneysavingexpert.com/images/ecBetaTestLogo.png) no-repeat left top; position:absolute; right:15px; top:41px;}


.site-header .site-tagline {
    color: #0095b2;
    font-family:"Segoe UI",Candara,"Bitstream Vera Sans","DejaVu Sans", Trebuchet MS,"Verdana","Verdana Ref",sans serif;
    font-size: 19px;
letter-spacing:-.027em;
margin:0;}



.site-header .site-tagline em {text-transform:uppercase}

/* Help/FAQ Link */
.help-faq-wrapper {
	display: block;}
.help-faq-wrapper a:before {  width:15px; font-family:'fontello'; content:''; margin-right:5px;}
.help-faq-wrapper a.accountLink:before {content:'\1f464'}
.help-faq-wrapper a.help-faq-link:before {content:'\e704';}
.help-faq-wrapper a.logout:before {content:'\e741'}

.help-faq-wrapper .fb-like {position:absolute; left:15px; top:10px;}
.help-faq-wrapper .twitter-share-button {position:absolute; left:140px; top:10px;}


.help-faq-wrapper a {
    float: right;
    margin: 5px 15px 0;
    text-decoration: none;
}

/* Login form */

.loginHome {margin-top:20px; position:relative}
.loginHome div { float:left; margin-right:5px;}
.loginHome .field-wrapper.last {margin-right:0;}
.loginHome .login-textbox { width:95px;}
.loginHome .login-title {color: #ff7600;display: inline-block;font-size: 16px;margin-bottom: 5px;}

a.helpLink {font-size:12px; display:inline-block}
.login-title:before, .helpLink:before { font-family:'fontello'; content:'\1f464'; float:none; margin-right:3px; float:left;}
a.helpLink.forgot:before {font-size:13px; font-family:'fontello'; margin-right:3px; float:left;content:'\e704'}
a.helpLink.register:before {content:'\e700'}
a.helpLink.register {margin-right:10px;}

.field-wrapper {margin-bottom:9px;}
.label-wrapper { width:100%; line-height:24px; margin-bottom:9px;}



/*
 * Header [end]
 */



/*
 * Main-banner [start]
 *
 * Styles for the banner.
 *
 */

/* Main banner content */

h2.bannerHead {font-family:'museo-slab',sans-serif; font-weight:normal; text-align:center; margin:15px 0px 30px 0; color:#848484; font-size:26px;}
.ctaModule { width:33.3%; float:left; background: url(http://images.moneysavingexpert.com/images/ecBannerSpritev6.png) no-repeat; color:#484848; text-decoration:none; display:block}
.ctaModule.findCheapest { background-position:left top;}

.ctaModule h3 {color:#fff; font-size:24px; line-height:70px; display:block; font-family:league-gothic; margin:0 0 155px 45px;}
.ctaModule:hover {text-decoration:none;}
.ctaModule:hover h3 { text-decoration:underline}

.ctaModule.findCheapest {background-position:0px top;}
.ctaModule.monitorThem { background-position:-313px top}
.ctaModule.tellYou {background-position:-626px top;}
.ctaModule p {margin:15px; text-decoration:none; color:#484848}

.ctaModule i {position:relative; left:-40px;}
.ctaModule i:before { display: block; width:40px;  height: 40px; color:#11d8ff;font-family:'fontello';}
.ctaModule.findThem i:before {content:'\e809'}
.ctaModule.monitorThem i:before {content:'\e70a'}
.ctaModule.tellYou i:before {content:'\2709';}

.ctaStrip { background:#f6f6f6; margin-bottom:3rem; padding:10px 15px;}
.ctaStrip h3 {font-family:'league-gothic', sans-serif; color:#fff; font-size:24px; display:inline-block; line-height:52px; margin:0;}
.ctaStrip a.button { display:block; width:320px; margin:0 auto}

.main-banner-content .rosette .rosette-offer,
.main-banner-content .rosette .rosette-emphasis {
	display: block;
	text-align: center;
	color: #fff;}

.main-banner-content .rosette .rosette-offer {
	font-weight: bold;
	padding: 25px 35px 0 35px;
	line-height:1.25;}

.main-banner-content .rosette .rosette-emphasis {
	padding: 0 12px 6px;
	font: 22px 'league-gothic';
	text-transform: uppercase;}

.video-placeholder {display: block; background-color: #f6f6f6; color: #fff; text-align:center; margin-top:40px;}

/* Top Links */

.appLinks { margin:5px 15px; font-size:12px; list-style:none; top:5px; position:absolute; width:320px; right:0; text-align:right; }


/*
 * What we do [start]
 *
 * Styles for the What we do module.
 *
 */
.what-we-do h2 {
	text-align: center;
	color: #0095B2;
}


@media (max-width: 719px) {
.what-we-do h2 {
	text-align: left;
}
}

.what-we-do .steps {
	display: block;
	margin: 0;
	padding: 15px 0 5px 0;
	list-style: none;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/what-we-do-steps-background.png) center top no-repeat;
	max-width: 324px;
}

.what-we-do .steps .step {
	position: relative;
	display: block;
	padding: 20px 0 0 47px;
	height: 57px;
	font: 22px 'league-gothic';
	color: #fff;
}


.what-we-do .steps .step:before {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/what-we-do-steps-numbers.png) left top no-repeat;
	height: 30px;
	width: 30px;
	position: absolute;
	top: 17px;
	left: 10px;
	content: "\00a0";
}

.what-we-do .steps .second-step:before {
	background-position: 0 -30px;
}

.what-we-do .steps .third-step:before {
	background-position: 0 -60px;
}

/*
 * What we do [end]
 */





/*
 * Page content [start]
 *
 * Styles for the page content.
 *
 */

.page-content-header .welcome-back-title {
	margin: 15px;
	color: #9c9c9c;
	float: left;
}

.page-content-header .welcome-back-username {
	font: inherit;
	color: #0095b2;
}

.page-content-header .logout-link {
	color: #484848;
	margin: 25px 10px 0 0;
	float: right;
}

.page-content {
	background-color: #FFFFFF;
	border-top: 3px solid #ff7600;
	margin: 15px 0 120px 0;
	box-shadow:0 1px 2px #e5e5e5;
	position:relative;
	
}

/*
 * Page content [end]
 */



/*
 * Main content [start]
 *
 * Styles for the main content.
 *
 */


.main-content {
	margin: 0 15px 1.25rem;
	padding:0;
}

.main-content.providers-module, .main-content.frequently-asked-questions { margin-bottom:3rem;}



.main-content h2 {
	color: #0095B2;
}

.main-content .left-column {
	width: 50%;
}

/* Breadcrumb */
.breadcrumb {
	margin: 15px;
}

.breadcrumb li {
	margin-right: 5px;
	font-size: 10px;
}

.breadcrumb a {
	font-size: 10px;
}

/* Providers module */
.providers-module .description {
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #484848;
	font-weight:100;
}

.providers-module .provider-logo {
	margin: 5px;
	float: left;
}


/* Frequently asked questions */
.frequently-asked-questions .title,
.frequently-asked-questions .answer {
	padding-left: 15px;
	margin-bottom: 10px;
}

.frequently-asked-questions .title {
	color: #ff7600;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/orange-arrow.png) 0 6px no-repeat;
}

.frequently-asked-questions .answer {

}

/*
 * Main content [end]
 */





/*
 * Register steps [start]
 *
 * Styles for the register steps
 *
 */
.register-main-content {
	margin: 0;
}

.register-step {
	margin: 17px 0;
	padding: 15px;
	position: relative;
}

.register-step-title {
	position: relative;
	color: #0095B2;
	margin: 15px 0 5px 30px;
}

.register-step-title:after {
	position: absolute;
	left: 0;
	top: 0;
	margin-left: -27px;
	content: "\00a0";
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/registration-header-numbers.png) no-repeat 0 0;
	width: 22px;
	height: 39px;
}

.second-step-title:after {
	background-position: 0 -39px;
}

.third-step-title:after {
	background-position: 0 -78px;
}

.register-step .register-step-sub-title {
	margin: 0 0 0 30px;
	color: #0095B2;
}

.register-step .register-step-sub-sub-title {
	color: #484848;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	margin: 25px 0 0 30px;
	font-weight:100;
}

.register-step-description {
	display: block;
	font-size: 13px;
	line-height: 1;
	margin: 0 0 15px 30px;
}

/* Wanted to use nth-child, but as there will only be 3 steps, using a class to add IE7/IE8 support */
.register-emphasis-step {
	background-color: #E7FBFF;
}

/* Using after and before because CSS3 border-image support is very patchy as of August 2012
 * Doesn't work in IE7 or 8*/
.register-emphasis-step:before,
.register-emphasis-step:after {
	display: block;
	position: absolute;
	width: 100%;
	height: 17px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/step-border.png) no-repeat 0 0;
	content: "\00a0";
}

.register-emphasis-step:before {
	background-color: #E7FBFF;
	margin-top: -17px;
	top: 0;
	left: 0;
}

.register-emphasis-step:after {
	background-position: 0 -17px;
	margin-bottom: -17px;
	top: auto;
	left: 0;
	bottom: 0;
}

/*
 * Register steps [end]
 */





/*
 * Register Form [start]
 *
 * Styles for the register form.
 *
 */

.register-form input[type="text"] {
	float: left;
	margin-right: 10px;
}

.register-form input[type="radio"] {
	float: left;
}

@media (max-width: 719px) {
.register-form .energy-usage-field-wrapper {
	display: block;
	float: left;
	width: 100%;
}
}

.register-form .select-wrapper {
	margin-right: 10px;
}

.register-form label,
.register-form .label {
	display: block;
	color: #ff7600;
	margin: 5px 0;
	float: left;
}

.register-form .label-description {
	display: block;
	float: left;
	color: #484848;
	font-style: italic;
	font-size: 12px;
}

@media (min-width: 720px) {
.register-form .label-description {
	display: block;
	float: left;
	margin: 7px 5px;
}
}

.register-form .inline-label {
	display: block;
	float: left;
	margin: 5px 10px 5px 0;
	color: #484848;
	width: auto;
}

.register-form .radio-label {
	color: #484848;
	margin: 0 10px 0 0;
}

/* Tariff selector */
/* Again using :not(#foo) to stop old browsers and phones from attempting to render this stuff. */
@media (max-width: 719px) {
.tariff-selector-wrapper {
	display: block;
	width: 100%;
	float: left;
}
}

@media (min-width: 720px) {
.tariff-selector-wrapper:not(#foo) input[type="radio"] {
	position: absolute;
	left: -9999px;
	display: none;
}

.tariff-selector-wrapper:not(#foo) .tariff-selector {
	margin: 5px 25px 5px 0;
	padding: 10px;
	background-color: #EAEAEA;
	width: 145px;
	height: 55px;
	font-weight: bold;
	color: #0095b2;
	text-shadow: 1px 1px #FFFFFF;
	position: relative;
		
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 1px 1px #d2d3d3;
	-o-box-shadow: 1px 1px 1px #d2d3d3;
	-moz-box-shadow: 1px 1px 1px #d2d3d3;
	-webkit-box-shadow: 1px 1px 1px #d2d3d3;
}
.tariff-selector-wrapper:not(#foo) input[type='radio']:checked + .tariff-selector {
	background-color: #d6d6d6;
}

.tariff-selector-wrapper:not(#foo) .tariff-selector:before {
	display: block;
	position: absolute;
	right: 5px;
	bottom: 0;
	width: 50px;
	height: 50px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/tariff-selector-background.png) no-repeat 0 0;
	content: "\00a0";
}

.tariff-selector-wrapper:not(#foo) .gas-tariff-selector:before {
	background-position: 0 -50px;
}

.tariff-selector-wrapper:not(#foo) .electricity-tariff-selector:before {
	background-position: 0 -100px;
}


.tariff-selector-wrapper:not(#foo) .sub-label {
	display: block;
	font-weight: normal;
}
}

/*
 * Register Form [end]
 */



/*
 * Module [start]
 *
 * Styles for the modules.
 *
 */

.module {
	margin: -1rem 15px 2.5em 0;
	background-color: #e7fbff;
	padding:0 0 15px;
}


.module .title {
	border-bottom: 1px solid #8fd4e2;
	margin: 0;
	padding: 15px;
	color: #0095b2;
	font-size:19px;
}

.module ul {margin:15px 10px 15px 0;}
.module li { font-size:12px;}
.module li a { font-size:13px;}
.module li a span {font-size:12px; color:#666;}
.module li span {display:block}


/* Alternative module description */
.alternative-module {
	background-color: #fef3ea;
}

.alternative-module .title {
	color: #ff7600;
	border-bottom-color: #ff9636;
}

/* Module content */
.module .description {
	margin: 15px;
}

.module ul {
	margin: 0;
	list-style: none;
}

.module li {
	padding: 5px 0 5px 25px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/blue-arrow.png) 10px 11px no-repeat;
}

.module a {
	text-decoration: none;
}


.module .date {
	display: block;
	font-size:12px;
}

/*
 * Modules [end]
 */



/*
 * User Details Modules [start]
 *
 * Styles for the user details modules.
 *
 */

.user-details-wrapper {
	padding: 15px 15px 0 15px;
}

.user-details-module {
	margin: 0 0 15px 0;
	position: relative;
}

.user-details-module .title {
	border-bottom: none;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-weight:100;
}

.user-details-module .current-tariff-type {
	font: inherit;
	color: #484848;
}

.user-details-module .detail-wrapper {
	display: block;
	padding: 0 15px;
}

.user-details-module .detail-label,
.user-details-module .detail-content {
	padding: 5px 0;
	float: left;
}

.user-details-module .detail-label {
	font-weight: bold;
	padding-right: 5px;
	display: block;
	float: left;
}

.user-details-module .address-content {
	display: inline-block;
}

.user-details-module .button {
	margin: 15px;
	float: right;
}

/*
 * User Details Modules [end]
 */





/*
 * Side content [start]
 *
 * Styles for the side content.
 *
 */

/* Savings counter */
.savings-counter {
	display: block;
	margin: 10px;
}

.savings-counter .pound-sign,
.savings-counter .counter-digit {
	display: block;
	float: left;
	padding: 5px;
	margin: 1px;
	font-weight: bold;
	font: 26px 'league-gothic';
	line-height: 1;
}

.savings-counter .pound-sign {
	color: #ff7600;
}

.savings-counter .counter-digit {
	background-color: #383838;
	color: #FFFFFF;
}

.savings-counter .counter-digit.units {
	background-color: #ff7600;
}

/*
 * Side content [end]
 */





/*
 * Account page [start]
 *
 * Styles for the account page.
 *
 */

.account-page-heading {
	color: #0095b2;
}

/*
 * Side content [end]
 */





/*
 * Your applications [start]
 *
 * Styles for your applications.
 *
 */

.your-applications-wrapper title {
	margin: 15px;
}

.your-applications-details-wrapper {
	margin: 15px;
	background-color: #f6f6f6;
	padding: 15px;
}

.your-active-applications-text {
	color: #484848;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-weight:100;
}

.your-active-applications-count {
	font: inherit;
	color: #0095b2;
}

/* Your applications details table */
.your-applications-details .tariff-type {
	margin: 25px 0;
	display: block;
	line-height: 1;
}

.your-applications-details .tariff-name {
	font-weight: bold;
}

.your-applications-details .saving-you-text {
	display: block;
	margin: 10px 0;
}

.your-applications-details .saving-you-amount {
	font-weight: bold;
	color: #ff9331;
}

.your-applications-details .application-status {
	display: block;
	font-weight: bold;
}

.your-applications-details .status-explanation {
	display: block;
}

.your-applications-details .explanation-popout {
	font-weight: normal;
	color: #ff9331;
	font-size: 12px;
}

/* Cashback text */
.cashback-text-wrapper {
	display: block;
	color: #484848;
	line-height: 1;
	padding: 15px;
	margin: 15px 0 0 0;
	background-color: #FFFFFF;
}

.cashback-text-wrapper .cashback-label,
.cashback-text-wrapper .cashback-value {
	color: #0095b2;
}

.cashback-text-wrapper .cashback-label {
	font: inherit;
}

.cashback-text-wrapper .cashback-value {
	font: inherit;
}

/*
 * Your applications [end]
 */





/*
 * Your comparisons [start]
 *
 * Styles for your comparisons.
 *
 */

.your-comparisons-wrapper .title {
	margin: 15px;
}

.your-comparisons-wrapper .comparison-description {
	display: block;
	margin: 15px;
	font: 20px 'museo-slab', Arial, Helvetica, sans-serif;
	color: #484848;
}

.your-comparisons-wrapper .search-link {
	font: inherit;
}

.your-comparisons-wrapper .comparison-saving {
	font: inherit;
	color: #0095b2;
}

.your-comparisons-wrapper .comparison-saving {
	font: inherit;
	color: #0095b2;
}

/* Comparison type viewer/switcher */
.comparison-type-switcher-wrapper {
	margin: 15px 15px 0 15px;
}

.comparison-type-tabs-wrapper {
	display: block;
}

.comparison-type-tab {
	position: relative;
	display: block;
	margin-right: 21px;
	float: left;
	margin-bottom: -1px;
	width: 200px;
	height: 41px;
	background-color: #e7fbff;
	border: 1px solid #00d5ff;
	border-right: none;
}

.comparison-type-tab:after {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/comparison-tab-background.png) 0 -42px no-repeat;
	height: 42px;
	width: 21px;
	position: absolute;
	top: 0;
	right: 0;
	content: "\00a0";
	margin-right: -21px;
}

.comparison-type-emphasis-tab {
	background-color: #fff;
	border-bottom-color: #fff;
}

.comparison-type-emphasis-tab:after {
	background-position: 0 0;
}

.comparison-type-tab-title {
	margin: 0;
	line-height: 1;
	display: block;
	overflow: hidden;
	padding: 10px 0 10px 25px;
}

.comparison-type-tab-title:hover {
	cursor: pointer;
}

/* Comparison type content */
.comparison-type-content-wrapper {
	border: 1px solid #00d5ff;
	padding: 15px;
}

/* Comparison type dual fuel content */
.last-comparison-wrapper {
	position: relative;
	padding: 15px;
	background-color: #effcff;
}

.last-comparison-text {
	display: block;
	float: left;
	margin: 0 130px 0 0;
}

.compare-now-button {
	position: absolute;
	top: 20px;
	right: 20px;
}

/* Comparison type table */
.comparison-type-results td {
	width: 20%;
}

.comparison-type-results .tariff-name {
	font-weight: bold;
}

.comparison-type-results .tariff-saving,
.comparison-type-results .tariff-cost {
	display: block;
	margin: 10px 0;
}

.comparison-type-results .tariff-cost-period,
.comparison-type-results .tariff-saving-value {
	margin-right: 5px;
}


.comparison-type-results .tariff-cost-period,
.comparison-type-results .tariff-saving-value {
	font-weight: bold;
}

/* Comparison type indicator */
.comparison-type-indicator-wrapper {
	position: relative;
	width: 220px;
}

.comparison-type-indicator-wrapper .comparison-type-indicator-text {
	display: block;
	padding: 40px 10px 0 25px;
	height: 62px;
	width: 175px;
	margin-right: 10px;
	margin-bottom: 1px;
	white-space: nowrap;
	color: #fff;
	font: 18px 'museo-slab', Arial, Helvetica, sans-serif;
}

.comparison-type-indicator-wrapper .comparison-type-indicator-text:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-left: 10px solid transparent;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	margin: 2px 0 0 -3px;
}

/* Comparison type cheapest fixed */
.comparison-type-cheapest-fixed-wrapper .comparison-type-indicator-text {
	background-color: #0095b2;
}

.comparison-type-cheapest-fixed-wrapper .comparison-type-indicator-text:after {
	border-left-color: #0095b2;
}

.comparison-type-cheapest-fixed-wrapper .tariff-saving-value {
	color: #0095b2;
}

/* Comparison type cheapest variable */
.comparison-type-cheapest-variable-wrapper .comparison-type-indicator-text {
	background-color: #00d5ff;
}

.comparison-type-cheapest-variable-wrapper .comparison-type-indicator-text:after {
	border-left-color: #00d5ff;
}

.comparison-type-cheapest-variable-wrapper .tariff-saving-value {
	color: #00d5ff;
}

/* Comparison type cheapest green */
.comparison-type-cheapest-green-wrapper .comparison-type-indicator-text {
	background-color: #ff9636;
}

.comparison-type-cheapest-green-wrapper .comparison-type-indicator-text:after {
	border-left-color: #ff9636;
}

.comparison-type-cheapest-green-wrapper .tariff-saving-value {
	color: #ff9636;
}

/*
 * Your comparisons [end]
 */




/*
 * Share the savings [start]
 *
 * Styles for the share your savings bar.
 *
 */

.share-the-savings-wrapper {
	padding: 15px;
	margin: 15px;
	display: block;
	background-color: #e5fbff;
}

.share-the-savings-title {
	color: #00d5ff;
}

/* Share the savings links */
.share-the-savings-link {
	position: relative;
	display: block;
	background-color: #e3eef0;
	padding: 12px 25px 12px 10px;
	color: #484848;
	text-decoration: none;
	
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.share-the-savings-link:after {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/share-savings-link-background.png) 0 0 no-repeat;
	height: 35px;
	width: 35px;
	position: absolute;
	top: 5px;
	right: 5px;
	content: "\00a0";
}

.share-the-savings-facebook-link:after {
	background-position: 0 -35px;
}

.share-the-savings-twitter-link:after {
	background-position: 0 -70px;
}

/*
 * Share the savings [end]
 */





/*
 * Results [start]
 *
 * Styles for the results
 *
 */

.results-main-content {
	margin: 15px 0 15px 15px;
}

/* Page title */
.results-title {
	margin: 20px;
	color: #0095B2;
	float: left;
}

/* Tariffs summary */
.tariffs-summary-wrapper {
	padding: 15px;
	background-color: #F6F6F6;
}

.tariffs-summary-title {
	margin-bottom: 10px;
}

.tariffs-summary-title .tariff-summary-emphasis {
	font: inherit;
	color: #FF7600;
}

.tariffs-summary-description {
	display: block;
}

/* Filter results module */
.filter-results-form label {
	margin: 3px 0;
	font-weight: bold;
}

.filter-results-button {
	margin: 15px 0;
	background-color: #B7B7B7;
	
	box-shadow: 1px 1px 1px #666666;
	-o-box-shadow: 1px 1px 1px #666666;
	-moz-box-shadow: 1px 1px 1px #666666;
	-webkit-box-shadow: 1px 1px 1px #666666;
}

.filter-results-button:hover,
.filter-results-button:active,
.filter-results-button:focus {
	background-color: #959595;
}

/* Results table */
.results-table {
	text-align: center;
	font-weight: bold;
}

.results-table thead {
	border-bottom: 1px solid #00d5ff;
}

.results-table th {
	border: none;
	padding: 10px 10px 10px 0;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/table-down-arrow.png) right 50% no-repeat;
}

.results-table th:last-of-type {
	background: none;
}

.results-table th,
.results-table td {
	width: 16%;
	border-top: none;
}

.results-table td {
}

.results-table-tariff-name {
	text-align: left;
}

.results-table-value {
	display: block;
	font-size: 18px;
	color: #FF7600;
}

.results-table .button {
	float: none;
	margin-bottom: 10px;
}

/* Results table key info bar */
.key-info-wrapper {
	display: block;
	padding: 10px;
	margin: 5px 0 15px 0;
	background-color: #e5fbff;
	font-weight: bold;
	position: relative;
}

.key-info-wrapper:before {
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/key-info-border-arrow.png) left top no-repeat;
	height: 17px;
	width: 26px;
	position: absolute;
	top: -16px;
	left: 50px;
	content: "\00a0";
}

.key-info-wrapper .key-info-title,
.key-info-wrapper .key-info-description {
	float: left;
}

.key-info-wrapper .key-info-title {
	text-transform: uppercase;
	color: #08B8DB;
	margin-right: 5px;
}

.key-info-wrapper .key-info-description {
	font-weight: normal;
}

.key-info-wrapper .read-more-link {
	color: #333333;
	padding-right: 10px;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/read-more-link-down-arrow.png) right 50% no-repeat;
}

/*
 * Results [end]
 */




/*
 * Footer [start]
 *
 * Styles for the standard footer.
 *
 */

.footer {
	background-color: #e7fbfe;
	padding:5px; text-align:center;
}

.footer a {
	line-height: 30px;
	color: #666666;
	font-size:12px;
}

/* Footer nav */
.footer .footer-nav { width:340px; margin:0 auto;}
.footer .footer-nav li {padding: 10px 10px 5px 10px;line-height: 1;}
.footer .footer-nav a {text-decoration: underline; line-height:20px}
.partners { font-size:13px; margin:5px 10px; color:#666666; line-height:30px;}
.partners a { display:inline-block; text-indent:-9999px; line-height:30px; background:url(http://images.moneysavingexpert.com/images/ecFooterSprite.png) no-repeat;}

.partners a.mseLogo { background-position: 0 5px; width:196px;}
.partners a.msmLogo {background-position:-340px 5px; width:162px;}
.partners a.allfiledLogo {background-position:-230px 5px;width:76px;}









@media (min-width:959px) {
.loginHome .dropContent { display:block!important}
.loginHome .dropdown { display:none;}
	}

@media (max-width:959px) {
.loginHome .dropdown { position: absolute;
height: 2em;
line-height: 1.8em;
color: #ff7600;
font-size: 2em;
text-align: right;
display: block;
cursor: pointer;
right: 0;
top: 0;
width: 98%;
padding: 0 2% 0 0;}
}


/* homepage automated newsbox  */
#news_box {
   margin: 15px 15px 0 0;
   background-color: #E7FBFF;
   padding: 0 0 15px;
   width: 100% !important;
   margin:0 !important;
}

#news_box h4 {
	border-bottom: 1px solid #8fd4e2;
	margin: 0;
	padding: 15px;
	color: #0095b2;
	font-size: 19px;
	font-weight:normal;
} 

#news_box a {
	color: #0095B2 !important;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#news_box a:visited { opacity: 0.8; }

#news_box li span {
	display: block;
	color: #666666 !important;
	font-style: normal !important;
}

#news_box h4.footer { display :none }

#news_box ul {
	margin:15px 10px 15px 0 !important;
	list-style: none;
}

#news_box li {
	padding: 5px 0 5px 25px !important;
	background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/blue-arrow.png) 10px 11px no-repeat;
	font-size:12px;
}

#news_box li a { color:#0095B2; font-size:13px; }
#news_box li a span { font-size:12px; color:#666; }
#news_box li a:hover { text-decoration:none!important; color: #026f84 !important }
#news_box li span { display:block }

@media only screen 
and (min-width : 320px) 
and (max-width : 959px) {
	
* {moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
html {background-image: linear-gradient(bottom, rgb(255,255,255) 21%, rgb(239,252,255) 61%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 21%, rgb(239,252,255) 61%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 21%, rgb(239,252,255) 61%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 21%, rgb(239,252,255) 61%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 21%, rgb(239,252,255) 61%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.21, rgb(255,255,255)),
	color-stop(0.61, rgb(239,252,255)));}
	
body {background: url(http://images.moneysavingexpert.com/images/cheapenergyclub/ecBasePylonBG.png) no-repeat scroll right -50px}
	

.mse-banner { display:none;}
.header { margin-top:0; padding-top:0.5em}
.header .grids > div { float:none; width:100%; margin:0}
.site-header {left:0px; margin-bottom:1em; position:relative}
h2.site-title i {display:none;}

.loginHome {margin:0 0 1em 0; box-shadow:0 1px 2px rgba(0,0,0,0.15); border-radius:5px; padding:1em; background:rgba(255,255,255,0.5);}
.loginHome div {margin:0}
.loginHome .dropContent { width:100%; padding-top:1em;}
.loginHome .login-title {font-size:1.25em}
.login-form .login-textbox { width:100%; border-radius:5px;  padding:1em; border:1px solid #c5c5c5; font-size:1.5em; }
.loginHome .field-wrapper {margin:0.5em 0}
.field-wrapper {width:100%;}
.field-wrapper.last {width:25%; text-align:right; float:right}
.label-wrapper, .loginHome .login-title { margin-bottom:0}
.label-wrapper.forgot{ float:left; width:75%; }
.label-wrapper.forgot a{ font-size:1.25em; line-height:3.75em; margin:0 1em 0 0;}

.loginHome .small-button { width:100%; padding:1em; height:auto;}

.left-column, .right-column {
float: none!important;
width: auto!important;
}
.module {
	margin: 15px 15px 0 15px;}

h2.bannerHead {text-align:center; margin:0.5em 0 0.5em 0; font-size:3em; }

.ctaModule {background:none; width:auto; margin:0 0 1.25rem 15px; font-size:1.25em; padding:15px; display:block; float:right}
.ctaModule h3 { color:#484848; margin:0; font-size:2em; line-height:1;}
.ctaModule p {margin:0}
.ctaModule h3:before {color:#0095B2; width:25%; background-repeat:no-repeat; background-position:left bottom; background-size:contain; float:left; display:block;height:3.5em;  text-align:right; margin-right:15px;}

.main-content .ctaStrip { margin:0; padding:0}

.findCheapest h3:before {content:'1 '; background-image:url(http://images.moneysavingexpert.com/images/BannerBGvone.png)}
.monitorThem h3:before {content:'2 '; background-image:url(http://images.moneysavingexpert.com/images/BannerBGvtwo.png)}
.tellYou h3:before {content:'3 '; background-image:url(http://images.moneysavingexpert.com/images/BannerBGvthree.png)}
.ctaStrip {text-align:center; background:transparent; padding:0 15px 0;}
.ctaStrip a.button {width:75%; font-size:1em; padding:1em;}
.main-content .ctaStrip a.button { width:100%}
.video-placeholder {margin:1.5em 0; padding:15px; border:1px solid rgba(0,0,0,0.05)}
.providers-module .provider-logo {width:21%;}

}

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
body { background:url(http://images.moneysavingexpert.com/images/cheapenergyclub/ecBulbWatermark.png) no-repeat scroll center -50px ;}
	.page-content { border-radius:5px; border-top:none;}
	.site-header { text-align:center;}
	.site-header span.MSEBranding { font-size:0.6em;}
	.site-header .site-title { background:none; padding:0; font-size:2.35em; line-height:1.25; margin:0;}
	.site-header .site-tagline { display:none;}
	
.help-faq-wrapper { display:none}	
h2.bannerHead { margin:1.25rem 0 1.25rem 15px; font-size:1.5em;  color:#0095B2; text-align:left}
h2.bannerHead:before{  display:block; width:24px; height:36px; background:url(http://images.moneysavingexpert.com/images/ecHeadLogo.png) no-repeat left top; background-size:contain; margin:-10px 15px 15px 15px; content:''; float:right;}
.ctaModule {background:none; width:auto; font-size:1em; padding:0 15px;}
.ctaModule h3 { color:#484848; margin:0; font-size:1.5em; line-height:1;}
.ctaModule p {margin:0}
.ctaModule h3:before {margin:0 0 0 -15px; background:none; width:auto; height:auto;}
.findCheapest h3:before {content:'1. '; }
.monitorThem h3:before {content:'2. ';}
.tellYou h3:before {content:'3. ';}
.ctaStrip a.button { width:100%}


.video-placeholder { padding:0; background:transparent; border:none;}
.video-placeholder iframe { max-width:100%}

.label-wrapper.forgot a {line-height:2em;}

.partners {line-height:24px; margin-bottom:10px;}
.partners a {background:none; display:inline; text-indent:0;}

}