/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { 
	font:1em/1.5em Arial, Helvetica, sans-serif; 
	background: #fff;
	margin: 0; 
	line-height: 1.231; 
	transition:all .5s linear;  -o-transition:all .5s linear;  -moz-transition:all .5s linear;  -webkit-transition:all .5s linear;}

body, button, input, select, textarea { font-family: sans-serif; color: #333; }



/* =============================================================================
   Links
   ========================================================================== */

a { color: #c00; text-decoration: none; }
a:visited { color: #c00; }
a:hover { color: #c00; text-decoration: underline; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr{ display: block;	border: 0; height: 12px; background: url(../img/divider.jpg) center 0 no-repeat; margin: 1em 0; padding: 0;}

.ie7 hr { background: none; height: 1px; border: 1px solid #ccc;}

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

p { font-size: 12px; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

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

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; font-size: 12px; }

/* =============================================================================
   #Tabs 
   ================================================== */
ul.tabs { display: block; margin: 0 0 0 30px; padding: 0; }
ul.tabs li { display: block; width: auto; height: 30px;	padding: 0; float: left; margin-bottom: 0; margin-right: 2px; }
ul.tabs li a { color: #fff; font-size: 13px; display: block; text-decoration: none; width: auto; height: 30px; padding: 0 20px; line-height: 30px; margin: 0; background: #000; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
ul.tabs a:hover {text-decoration: underline;}
ul.tabs li a.active { background: #fff; height: 30px; position: relative; margin: 0; color: #333; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
ul.tabs li:first-child a.active { margin-left: 0; }
ul.tabs li:first-child a { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
ul.tabs li:last-child a { -moz-border-radius-topright: 5px;	-webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }

.tabs-content { margin: 0; display: block; }
.tabs-content > div { display:none; }
.tabs-content > div.active { display: block; }

/* Clearfixing tabs for beautiful stacking */
.tabs:before,
.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
ul.tabs:after { clear: both; }
ul.tabs { zoom: 1; }


/* ==|== primary styles =====================================================
   Author: Virgin Media London Underground Wifi - Jill O'Reilly
   ========================================================================== */
h1 { 
	font-size: 2.375em;
	font-weight: normal; }

h2 { 
	font-size: 1em;
	font-weight: normal; }

h3 { 
	font-size: .8em;
	font-weight: normal;}

h1, h2, h3 { color: #333; }

#container .button {
	background: url(../img/primary_medium_bg.png) 0 0 repeat-x; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#921200), to(#cc1c00)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #cc1c00, #921200); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #cc1c00, #921200); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #cc1c00, #921200); /* IE 10 */
   	background: -o-linear-gradient(top, #cc1c00, #921200); /* Opera 11.10+ */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
	border-radius: 4px;
	 box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	color: #fff;
	display: inline-block;
	font-style: italic;
	padding: 6px 10px;
	text-decoration: none; }

.ie7 #container .button,
.ie8 #container .button {
	padding: 4px 10px; }

#container .button:hover {
	background: url(../img/primary_medium_bg.png) center bottom repeat-x; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc1c00), to(#921200)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #921200, #cc1c00); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #921200, #cc1c00); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #921200, #cc1c00); /* IE 10 */
   	background: -o-linear-gradient(top, #921200, #cc1c00); /* Opera 11.10+ */ }

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */ }

#container {
	background: #eee;
	margin: 0 auto;
	padding: 18px 0 50px; }

#main {
	background: #e4e4e4;
	border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.4);
	padding: 0;
	margin: 0 auto;
	width: 940px; }
	
#main .inner { 
    border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;    
    background-color: #fff;
	margin: 0 30px;
    padding: 30px;}

#main .pFoot {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;	
	background: transparent url(../img/main_panel_bottom_tile_light.gif) 0 0;
    display: block;
    height: 36px; 
	margin-top:5px;}

/*** Header ***/

header a {
	font-size: 12px;}

header #logo {
	border-bottom: 2px solid #8b0101;
	border-top: 2px solid #8b0101;
	margin: 0;
	padding: 10px 0 0;
	background: #000 url(../img/header-tile.gif) 0 0 repeat-x; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #333, #000); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #333, #000); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #333, #000); /* IE 10 */
   	background: -o-linear-gradient(top, #333, #000); /* Opera 11.10+ */} 

header #logo div {
	margin: 0 auto;
	position: relative; 
	width: 940px; }

header #logo a {
	display: block;
	float: left;
	padding-bottom: 10px;
	width: 103px; }

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

/*** Nav ***/

nav {
	padding: 0; }

nav li {
	display: block;
	float: left; }

nav.global-nav {
	background: #fff;
	padding: 4px 0 0;}

nav.global-nav ul {
	margin: 0 auto;
	width: 940px; }

nav.global-nav a {
	background: #f3f3f3;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-box-shadow: 0px -2px 3px rgba(217, 217, 217, 0.75);
	-moz-box-shadow:    0px -2px 3px rgba(217, 217, 217, 0.75);
	box-shadow:         0px -2px 3px rgba(217, 217, 217, 0.75);
	color: #999;
	cursor: pointer;
	display: block;
	float: left;
	margin-right: 5px;
	padding: 3px 12px;
	text-decoration: none; }

nav.global-nav a:hover {
	background: #dc1d00;
 	color: #fff; }

/* menu icon */
#menu-icon { display: none; /* hide menu icon initially */ }

nav.subnav {
	background: #303030; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#201a1a), to(#3e3c41)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #3e3c41, #201a1a); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #3e3c41, #201a1a); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #3e3c41, #201a1a); /* IE 10 */
   	background: -o-linear-gradient(top, #3e3c41, #201a1a); /* Opera 11.10+ */
	border-bottom: 2px solid #8b0101;
	margin: 0; }

nav.subnav ul {
	margin: 0 auto;
	width: 940px; }

nav.subnav li {
	margin-right: 10px; }

nav.subnav li a {
	color:#fff;
	display: block;
	line-height: 30px;
	padding: 0px 10px 0px;
	text-decoration: none;
	-moz-transition: background .3s ease;
	-webkit-transition: background .3s ease;
	-o-transition: background .3s ease;
	transition: background .3s ease;
	width: auto; }

.footer-nav li a {
	color:#fff;
	display: block;
	line-height: 30px;
	padding: 0px 10px 0px;
	text-decoration: none;
	width: auto; }

nav.subnav a:hover,
nav.subnav .selected {
	background: #cc0001; /* fallback */
	text-decoration: none;}

/* nav dropdown */
#nav ul {
	position: absolute;
	display: none; /* hide dropdown */ }
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;	}
#nav li:hover > ul {
	display: block; /* show dropdown on hover*/ }

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

/*** Masthead ***/

.masthead {
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	min-height: 239px;
	padding: 30px 0 0; }

.masthead.faq {
	min-height: inherit;}

.masthead.home { background:url(../img/masthead-home-phase2.jpg) top right no-repeat; }
.masthead.free { background: url(../img/masthead-free-wifi.jpg) top right no-repeat; margin-bottom: -30px; }
.masthead.using { background:url(../img/masthead-using-phase2.jpg) top right no-repeat; margin-bottom: -30px; }
.masthead.stations { background:url(../img/masthead-stations-phase2.jpg) top right no-repeat; }
.masthead.news,
.masthead.news2 { background:url(../img/masthead-home.png) top right no-repeat; }
.masthead.news2 h1 { margin-top: 90px;}

.news2-content { font-size: 12px; }
.news2-content li { padding-bottom: 5px; }

.masthead h1 {
	font-size: 36px;
	margin: 30px 0 0.5em 30px;
	padding: 0;
	width: 350px; }

.masthead.using h1 {
	margin-top: 5px; }

.masthead.free h1 {
	width: 45%; }

.masthead.stations h1 {
	margin-top: 40px;
	width: 45%; }

.masthead.faq h1 {
	margin-top: 0;
	text-align: center;
	width: auto;}

.masthead p {
	color: #555;
	font-size: 18px;
	margin-left: 30px;
	width: 350px; }

.masthead.free p {
	width: 45% ;}

.masthead.faq p {
	margin-left: 0;
	width: auto; }

.masthead-home {
	display: none; }
	
/****************/

.col-three {
	float: left;
	margin: 0 30px 0 0;
	width: 253px; }

.col-three.last,
.col-two.last,
.steps.last,
.col-one-third.last {
	margin-right: 0; }

.col-two {
	float: left;
	margin: 0 30px 10px 0;
	width: 395px; }

.col-two-thirds {
	float: left;
	width: 66%; }

.col-one-third {
	width: 33%; }

.col-one-third img {
	margin: 0 auto; }

/*** Main ***/
h2 {
	font-size: 22px;
	margin: 0;
	padding: 0 0 1em;
	text-align: center; }

h3 {
	font-size: 18px; }

#main p {
	line-height: 1.5em;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 1em; }

#main .intro {
	font-size: 16px;
	text-align: center;
	padding-left: 16px;
	padding-right: 16px; }

.steps {
	margin: 0 0 1em;
	padding: 0; }

.steps li {
	display: block;
	float: left;
	font-size: 12px;
	line-height: 1.5em;
	margin-right: 23px;
	width: 182px;}

.steps img {
	display: block;
	margin: 0 0 20px; }

.launch-stations {
	margin: 0;
	padding: 0; }

.launch-stations li {
	background: url(../img/tick.gif) 0 -2px no-repeat;
	display: block;
	float: left;
	font-size: 12px;
	list-style: none;
	padding: 0 0 10px 30px;
	width: 46%; }

#how-to-get h3 { 
	margin: 5px 0;
	padding: 0; }

.ie7 .infographic-large {
	padding: 15px 0; }

.visible-phone {
	display: none; }

/*** Homepage - Phase 2 ***/
.payg h3 {
	background: #333333; /* Old browsers */
	background: -moz-linear-gradient(left,  #333333 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #333333 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #333333 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #333333 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(to right,  #333333 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#666666',GradientType=1 ); /* IE6-9 */
	color: #fff;
	margin: 0;
	padding: 8px 0;
	text-align: center;
	width: 535px; }
	
.payg .tariffs {
	margin: 0 0 1em;
	padding: 0; }

.payg .tariffs li {
	border-right: 1px solid #bcbcbc;
	display: block;
	float: left;
	width: 133px; }

.payg .tariffs .last {
	border-right: none; }
	
.payg .tariffs h4 {
	display: none;}

.payg .tariffs img {
	display: block; }

.payg .tariffs p {
	color: #000;
	border-bottom: 1px solid #ccc;
	float: none;
	font-weight: bold;
	font-size: 22px;
	margin: 0;
	padding: 10px 0 !important;
	text-align: center; }

.payg .tariffs p.first-price {
	border-left: 1px solid #ccc;
	-webkit-border-radius: 0 0 0 5px;
	-moz-border-radius: 0 0 0 5px;
	border-radius: 0 0 0 5px; }

.payg .tariffs p.special-price {
	border-right: 1px solid #ccc;
	-webkit-border-radius: 0 0 5px 0;
	-moz-border-radius: 0 0 5px 0;
	border-radius: 0 0 5px 0;
	color: #c00;}

.payg p { float: left; }

.payg p strong {
	display: block;
	font-size: 17px;
	margin-top: 7px; }

.payg p.getpayg {
	color: #308406;
	padding-left: 80px;
	position: relative;
	width: 360px;  }

.payg .getpayg .roundel {
	position: absolute;
	left: 0;
	top: -11px;}

.payg .btn-outer {
	margin-right: 5px !important;
	float: right; }
	
.index .stations {
	background: url(../img/lu-logo.gif) left no-repeat;
	padding-left: 45px;
	text-align: left !important; }

.index .col-three h3 {
	line-height: 145%;
	margin: 0 0 1em;
	text-align: center; }
	
.index .col-three img {
	display: block;
	margin: 0 auto; }

	
/** Free WiFi **/	
.free-wifi h3 {
	background: #333333; /* Old browsers */
	background: -moz-linear-gradient(left,  #333333 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #333333 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #333333 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #333333 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(to right,  #333333 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#666666',GradientType=1 ); /* IE6-9 */
	color: #fff;
	margin: 0;
	padding: 8px 0;
	text-align: center; }

.free-wifi div {
	background: #e4e4e4 url(../img/vm-customer-bg.jpg) bottom center no-repeat;
	xborder-left: 1px solid #ccc;
	xborder-right: 1px solid #ccc;
	xborder-bottom: 1px solid #ccc;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	text-align: center; }

#main .free-wifi p {
	font-size: 17px;
	padding: 25px 40px 38px; }
	
.free-wifi .button {
	font-size: 0.813em;
	margin-bottom: 2em; }


/*** Merchandise box ***/
.merch {
	border: 1px solid #dedede;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 30px;
	height: 175px;
	text-align: center;
	width: 251px;
	padding: 0 0 1em; }

.ie7 .merch { padding-top: 1em; }
 
.merch.light {
	background: #eee; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fff)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #fff, #eee); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #fff, #eee); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #fff, #eee); /* IE 10 */
   	background: -o-linear-gradient(top, #fff, #eee); /* Opera 11.10+ */ }

.merch.dark {
	background: #555; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#6a6a6a)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #6a6a6a, #333); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #6a6a6a, #333); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #6a6a6a, #333); /* IE 10 */
   	background: -o-linear-gradient(top, #6a6a6a, #333); /* Opera 11.10+ */
	color: #fff; }

.merch.dark h3 {
	color: #fff; }

.merch h3 {
	padding: 0 15px;}

#main .merch p {
	padding: 0 20px; margin-bottom: 1.5em; }


/*** Station finder ***/

#station-finder ul {
	margin: 0;
	padding: 0 !important;
	position: relative;}

#station-finder li {
	display: block;
	float: left;
	height: auto; 
	list-style: none;
	margin: 0;
	padding: 0; }

#station-finder .tabs {
	margin-top: 1em; }

#station-finder .tabs li a {
	background: #6d6d6d; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5a5a5), to(#858585)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #858585, #a5a5a5); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #858585, #a5a5a5); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #858585, #a5a5a5); /* IE 10 */
   	background: -o-linear-gradient(top, #858585, #a5a5a5); /* Opera 11.10+ */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff; 
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-right: 3px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	width: 28px;}

#station-finder li a:hover,
#station-finder li a.active {
	background: #cc0000; }

#station-finder li.noStation  {
	background: #e9e9e9;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #d5d5d5;
	font-weight: bold;
	margin-right: 3px;
	padding: 5px 0;
	text-align: center;
	width: 28px; }

#station-finder .tabs-content .noStation {display: none;}

#station-finder .tabs-content {
	padding: 40px 0 10px; }

#station-finder .tabs-content a.hook {
	display: none; }

#station-finder table {
	width: 100%;}

#station-finder th {
	font-size: 15px;
	padding: 10px 15px;	
	text-align: left; }

#station-finder td,
#station-finder th {
	border-bottom: 1px solid #cbcbcb; }

#station-finder tbody td,
#station-finder tbody th {
	background: #fafafa; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5e5e5), to(#fafafa)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #fafafa, #e5e5e5); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #fafafa, #e5e5e5); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #fafafa, #e5e5e5); /* IE 10 */
   	background: -o-linear-gradient(top, #fafafa, #e5e5e5); /* Opera 11.10+ */
	font-size: 12px;
	padding: 15px;}

#station-finder tbody th span {
	display: block;
	font-weight: normal;
	width: auto; }	

#station-finder tbody th {
	width: 35%; }
	
#station-finder td ul {
    list-style: none; }

#station-finder td li {
	float: none;
	margin: 0;
	padding: 0; }
	
#station-finder td li:before {
    content: "";
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	display: block;
    height: 6px;
    left: -1.5em;
    position: relative;
	top: 0.8em;
    width: 11px; }

#station-finder li.victoria:before { background: #3e9ce2; color: #3e9ce2; }
#station-finder li.bakerloo:before { background: #a7630e; color: #a7630e; }
#station-finder li.central:before  { background: #d82623; color:#d82623; }
#station-finder li.circle:before   { background: #f3d700; color: #f3d700; }
#station-finder li.district:before { background: #22731e; color: #22731e; }
#station-finder li.dlr:before      { background: #43bab3; color:#43bab3; }
#station-finder li.hammersmith:before { background: #e199a9; color: #e199a9; }
#station-finder li.jubilee:before  { background: #686e72; color: #686e72;}
#station-finder li.metropolitan:before { background: #833069; color: #833069; }
#station-finder li.northern:before { background: #000; color: #000;}
#station-finder li.overground:before { background: #ed7000; color:#ed7000; }
#station-finder li.piccadilly:before { background: #214ba4; color: #214ba4;}
#station-finder li.waterloo:before { background: #7ec2ce; color: #7ec2ce;}

.ie7 #station-finder table li { background: url(../img/stationsprite.gif); background-repeat: no-repeat; padding-left: 15px; }
.ie7 #station-finder table .victoria {background-position: 0 4px;}
.ie7 #station-finder table .bakerloo {background-position: 0 -12px;}
.ie7 #station-finder table .central {background-position: 0 -28px;}
.ie7 #station-finder table .circle {background-position: 0 -44px;}
.ie7 #station-finder table .district {background-position: 0 -60px;}
.ie7 #station-finder table .dlr {background-position: 0 -76px;}
.ie7 #station-finder table .hammersmith {background-position: 0 -92px;}
.ie7 #station-finder table .jubilee {background-position: 0 -108px;}
.ie7 #station-finder table .metropolitan {background-position: 0 -124px;}
.ie7 #station-finder table .northern {background-position: 0 -140px;}
.ie7 #station-finder table .overground {background-position: 0 -156px;}
.ie7 #station-finder table .piccadilly {background-position: 0 -172px;}
.ie7 #station-finder table .waterloo  {background-position: 0 -188px;}


/*** Station map ***/
#station-map area:hover {
	cursor: pointer; }

.map-container {
	height: 400px; 
	overflow: auto;
	position: relative;
	width: 820px; }

.map-container img {
	max-width: none;}

.map-container .overlay {
	position: absolute;
	z-index: 5;}

.container {
	position: absolute;
	width: 2682px;
	height: 1795px;
	z-index: 2;}
	
.container img {
	float: left;
	margin: 0;
	padding: 0;}	

/*** FAQ ***/

#main .faq-tabs {
	margin-top: 1em; }

.faq-content a.hook {
	display: none; }

.faq-content h2 {
	margin: 0 0 1.5em;
	padding: 0 0 0 10px;
	text-align: left; }

.faq-content dl {
	border-bottom: 2px solid #e3e3e3; }

.faq-content dt {	
	background: url(../img/arrows-faq.png) 96% 25px no-repeat;
	border-top: 2px solid #e3e3e3;
	color: #333;
	cursor: pointer;
	font-weight: bold;
	padding: 20px 80px 20px 10px;}

.faq-content dt.contract {
	background: url(../img/arrows-faq.png) 96% -63px no-repeat;}

.faq-content dd {
	font-size: 12px;
	margin: 0 65px 0 0;
	padding: 0 0 20px 10px;}

.faq-content dd ol {
	margin: 0 0 14px 20px;
	padding: 0;}

.faq-content dd li {
	font-size: 12px;
	line-height: 1.5em; }

.faq-content .wifi-logo {
	background: url(../img/wifizone-mini50x50.gif) top right no-repeat;
	margin-right: 30px;
	padding: 0 60px 10px 0; }
	
/*** Free WiFi ***/
.help {
	border: 1px solid #dedede;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #eee; /* fallback */
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fff)); /* Safari 4-5, Chrome 1-9 */
  	background: -webkit-linear-gradient(top, #fff, #eee); /* Safari 5.1, Chrome 10+ */
   	background: -moz-linear-gradient(top, #fff, #eee); /* Firefox 3.6+ */
   	background: -ms-linear-gradient(top, #fff, #eee); /* IE 10 */
   	background: -o-linear-gradient(top, #fff, #eee); /* Opera 11.10+ */  }

.help { margin: 0; padding: 0 25px; }

.help li {
	display: block;
	float: left;
	padding-bottom: 1em;
	text-align: center;
	width: 33%; }

.help h3 {
	padding: 0 15px; }

#main .help p {
	padding: 0 0 0.5em; }
	
/*** Error page ***/

.error  h2 { text-align: center; }
.error .masthead { min-height: auto; }
.error .inner {min-height: 115px;}
.error #main { margin-bottom: 340px;}
	

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

/*** Footer ***/

footer {
	background: #000;
	border-top: 2px solid #8b0101;
	bottom: 0;
	display: block;
	margin: 0;
	padding: 10px 0;
	width: 100%; }

.footer-inner {
	margin: 0 auto 10px;
	padding-bottom: 5px;
	width: 940px; }

footer p {
	color: #fff;
	float: right; }

.ie8 footer  p {
	width: 275px;}

footer img {
	width: 50px; }

footer ul {
	float: left; }

footer li {
	display: block;
	float: left;
	list-style: none;
	margin-right: 5px; }

footer li a {
	color: #fff; 
	border-right: 1px solid #fff;
	font-size: 11px;
    padding: 0 10px 0 2px; }

footer a:visited { color: #fff; }
footer a:hover { color: #fff; }

footer li a:hover {
	color: #fff; }

.footer-nav {
	display: none; }

/*********/


/*
 * Media queries for responsive design github.com/h5bp/mobile-boilerplate/wiki/The-Style
 */


@media screen and (min-width: 768px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;}

}
	
/*** Tablet Portrait size to standard 960 (devices and browsers) ***/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#container { padding-top: 0; }
	#main { 
		background: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
		margin: 0 auto;
		padding: 0;
		width: 768px; }
	#main .masthead { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; min-height: 190px; }
	#main .masthead.news {min-height: 239px;}
	.masthead.news h1 {font-size: 27px; width: 238px; margin-top: 48px;}
	.masthead.news2 h1 { margin-top: 25px; }
	.masthead h1 { font-size: 30px; }
	.masthead.stations { background:url(../img/masthead-stations-phase2-tablet.jpg); }
	.masthead.stations h1 {width: 30%; }
	.masthead.home { background:url(../img/masthead-home-phase2-tablet.jpg) top right no-repeat; }
	.masthead.free { background:url(../img/masthead-free-wifi-tablet.jpg) top right no-repeat; }
	.masthead.using { background:url(../img/masthead-using-phase2-tablet.jpg) top right no-repeat; }
	.masthead p { font-size: 16px; margin-left: 30px; width: 250px; }
	.masthead.home p {width: 270px;}
	.masthead.faq p { padding: 0 30px; }
	#main .inner { margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
	#main .pFoot { display: none; }
	header #logo div { margin: 0 auto; width: 768px; }
	header #logo div a { margin-left: 30px; }
	nav.global-nav ul {	width: 768px; }
	nav.global-nav li:first-child {margin-left: 20px; }
	nav.subnav ul {	width: 768px; }
	nav.subnav li a { line-height: 39px; font-size: 15px; }
	nav.subnav li:first-child { margin-left: 30px; }
	header #logo nav.subnav li a { font-size: 15px; }
	.col-three { width: 216px; margin-right: 30px;}
	.col-two { width: 339px; }
	.merch { width: 214px; }
	.freewifi .merch { height: 185px; }
	.steps li { margin-right: 15px;	width: 162px;}
	.map-container { width: 708px; }
	.footer-inner { width: 768px; }
	.footer-inner p { padding-right: 20px; }
	.footer-nav {display: none;}
	#station-finder .tabs li a { padding: 0; width: 24px; }
	#station-finder .tabs li.noStation { padding: 5px 0; width: 24px; }
	.launch-stations li { width: 55%; }
	
	/*** Homepage - Phase 2 ***/
	.payg h3 { width: 451px; }
	.payg .tariffs { width: 454px; }
	.payg .tariffs li {	width: 112px;}
	.payg .tariffs p strong { font-size: 19px; }
	.payg p strong { font-size: 15px; }
	.payg p.getpayg { width: 280px; padding-left: 65px; }
	.payg .btn-outer { margin-right: 13px !important; }
	
	/** Free WiFi **/	
	#main .free-wifi p { font-size: 15px; padding: 25px 30px 30px; }
	

}

/*** Smartphone all ***/
@media only screen and (max-width: 767px) {
	header { background-image: none; height: auto; }
	header #logo { 
		background: #000; /* fallback */
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#202020), to(#000)); /* Safari 4-5, Chrome 1-9 */
		background: -webkit-linear-gradient(top, #000, #202020); /* Safari 5.1, Chrome 10+ */
		background: -moz-linear-gradient(top, #000, #202020); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #000, #202020); /* IE 10 */
		background: -o-linear-gradient(top, #000, #202020); /* Opera 11.10+ */
		border: none;
		padding: 0; }
	header #logo div { margin: 0 auto; }
	header #logo p { width: 70%; margin: 5px 0 0 10px;}
	header #logo a { padding: 15px 10px; }
	nav.subnav { background: none; border: none; position: relative; top: 0; left: 0; margin: 0 auto; }
	nav.subnav ul {	margin: 0 auto; display: none; }
	header .subnav li { float: none; margin-right: 0; }
	header nav.subnav li a,
	.footer-nav li a { 
		background: #000; /* fallback */
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#202020), to(#000)); /* Safari 4-5, Chrome 1-9 */
		background: -webkit-linear-gradient(top, #000, #202020); /* Safari 5.1, Chrome 10+ */
		background: -moz-linear-gradient(top, #000, #202020); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #000, #202020); /* IE 10 */
		background: -o-linear-gradient(top, #000, #202020); /* Opera 11.10+ */
		float: none;
		font-family: Arial, Helvetica, sans-serif; 
		font-size: 14px; 
		line-height: 41px; }
	header nav.subnav li a:hover,
	header nav.subnav li .selected,
	.footer-nav li a:hover,
	.footer-nav li .selected {
		background: #a90000; /* fallback */
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cb0000), to(#8a0000)); /* Safari 4-5, Chrome 1-9 */
		background: -webkit-linear-gradient(top, #8a0000, #cb0000); /* Safari 5.1, Chrome 10+ */
		background: -moz-linear-gradient(top, #8a0000, #cb0000); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #8a0000, #cb0000); /* IE 10 */
		background: -o-linear-gradient(top, #8a0000, #cb0000); /* Opera 11.10+ */
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0; }
	/* menu icon */
	#menu-icon {
		color: #7e7e7e;
		display: block; /* show menu icon */
		font-size: 18px;
		height: 38px;
		margin-top: -38px;
		text-align: right; }
	#menu-icon span { margin-top: 7px; display: block; float: right; }
	#menu-icon a {
		background: url(../img/menu-icon.gif) 0 0 no-repeat;
		cursor: pointer;
		display: block;
		float: right !important;
		height: 38px;
		margin: 0 0 0 14px;
		padding: 0 !important;
		text-indent: -999999px !important;
		width: 46px !important;}
	/* main nav */
	#nav { display: none; /* visibility will be toggled with jquery */ }
	#nav li { clear: both; float: none;	margin: 0; }
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit; }
	#container {
		background: #fff;
		margin: 0 auto; 
		padding: 0; }
	.masthead { padding: 0; min-height: 75px; /* Remove this when we have visuals */ }
	.masthead.home { background: none; padding: 0 20px; text-align: center; }
	.masthead.home p { margin: 0; width: auto; }
	.masthead h1 { margin: 0; width: auto;}
	.masthead.faq {padding: 0 20px;}
	.masthead-home {display: block; margin: 0 auto; }
	.masthead.free { background: none; margin: 0;}
	.masthead.free h1 { margin: 0 0 .2em; padding: 0; text-align: center; width: 100%;}
	.masthead.free p { font-size: 15px; margin: 0 auto; text-align: center;  width: 70%; }
	.masthead.using { background: none; margin: 0; }
	.masthead.using p, .masthead.stations p { margin: 0 20px;; width: auto;}
	.masthead.stations { background: none; margin: 0; padding: 0; min-height:50px;}
	.masthead.stations h1 { margin: 0 0 .2em; padding: 0; text-align: center; width: 100%;}
	.masthead.news, .masthead.news2 { background: none; min-height: 25px; }
	.masthead.news h1, .masthead.news2 h1 { font-size: 30px; text-align: center; width: auto; margin-top: 0; }
	.masthead-news { margin: 20px 0; }
	#main { 
		background: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		box-shadow: none;
    	-moz-box-shadow: none;	
    	-webkit-box-shadow: none;
		margin: 0;
		padding: 15px 0; }
	#main .inner {	margin: 0; padding: 0 20px; }
	#main .inner h2:first-of-type { font-size: 30px; text-align: center; }
	.index #main .inner h2:first-of-type { font-size: 23px; }
	#main .intro { text-align: left; margin-top: 1em; padding-left: 0; padding-right: 0;  }
	#main .intro-mobile {font-size: 12px; margin-top: 0; }
	#main .pFoot { display: none; }
	#main h2 { font-size: 20px; text-align: left; margin-bottom: 0; }
	.col-three {
		float: none ;
		margin: 0 ;
		width: 100% !important;}
	.col-two {
		float: none;
		margin: 0 0 1em;
		width: 100%; }
	.col-two-thirds,
	.col-one-third {
		float: none;
		margin: 0 0 1em;
		width: 100%; }
	.col-one-third img {
		display: block; 
		margin: 0 auto; }
	.col-two-thirds .btn-outer { text-align:center; }
	ul.tabs { margin: 0; }
	hr { display: none; }
	#main .how-tabs {display: none;}
	#how-to-get, #mobile, #broadband { display: block !important; }
	.launch-stations li { float: none; width: auto; }
	.merch { margin-bottom: 1em; }
	.global-nav { display: none; }
	.faq-tabs li { float: none !important; }
	.footer-nav { bottom: 0; display: block; }
	.footer-nav ul { margin: 0 auto; }
	.footer-nav li { float: none; }
	.footer-nav .footer-link a { background: #202020; border-top: 1px solid #000; }
	/* Station finder */
	#station-finder .tabs { display: none; }
	#main .faq-tabs { display: none !important; }
	#station-finder .tabs-content {position: relative; padding-top: 0;}
	#station-finder .tabs-content > div,
	#main .faq-content > div { display: none;}
	#station-finder .tabs-content a.hook,
	.faq-content a.hook { 
		background: #5b5b5b; /* fallback */
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7a7a7a), to(#5b5b5b)); /* Safari 4-5, Chrome 1-9 */
		background: -webkit-linear-gradient(top, #5b5b5b, #7a7a7a); /* Safari 5.1, Chrome 10+ */
		background: -moz-linear-gradient(top, #5b5b5b, #7a7a7a); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #5b5b5b, #7a7a7a); /* IE 10 */
		background: -o-linear-gradient(top, #5b5b5b, #7a7a7a); /* Opera 11.10+ */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #fff;
		display: block !important;
		font-weight: bold;
		margin: 0 0 3px;
		padding: 5px 0 5px 0;
		text-align: left;
		text-decoration: none;
		width: 100%; }
	#station-finder .tabs-content a.hook:hover,
	.faq-content a.hook:hover {
		background: #e5e5e5; /* fallback */
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5b5b5b), to(#7a7a7a)); /* Safari 4-5, Chrome 1-9 */
		background: -webkit-linear-gradient(top, #7a7a7a, #5b5b5b); /* Safari 5.1, Chrome 10+ */
		background: -moz-linear-gradient(top, #7a7a7a, #5b5b5b); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #7a7a7a, #5b5b5b); /* IE 10 */
		background: -o-linear-gradient(top, #7a7a7a, #5b5b5b); /* Opera 11.10+ */ }
	#station-finder .tabs-content a.active:hover,
	#station-finder .tabs-content a.active,
	.faq-content a.active:hover,
	.faq-content a.active { background: #c00; }
	#station-finder .tabs-content .noStation  {
		background: #e9e9e9;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #d5d5d5;
		display: block !important;
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 3px;
		padding: 3px 0 3px 18px;
		text-align: left; }
	#station-finder table { margin: 0 0 3px; }
	#station-finder thead th {
		display: none; }
	#station-finder td {
		background: none;
		font-size: 13px; 
		padding: 5px;}
	.faq-content {margin-bottom: 1em; position: relative;}
	.faq-content h2 { display: none; }
	.faq-content h3 { font-size: 12px; font-weight: bold;}
	.faq-content dl { border: none; margin: 0; padding: 0;}
	.faq-content dt { font-size: 12px; background-position: 6px 17px; padding: 15px 10px 15px 32px }
	.faq-content dt:first-child {border-top: none;}
	.faq-content dt.contract { background-position: 6px -73px;}
	.faq-content dd { margin: 0 10px 0 32px; padding: 0;}
	.faq-content .wifi-logo { margin-right: 0; }
	.hidden-phone {display: none;}
	.visible-phone {display: block;}
	
	/*** Homepage - Phase 2 ***/
	.home.ir, .free.ir, .using.ir, .stations.ir { text-indent: 0; text-align: center; }
	
	#main .free-wifi h3 { background: none; color: #333; text-align: left; }
	#main .free-wifi div { background: none; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;	}
	#main .free-wifi p { font-size: 13px;	padding: 0 0 15px; text-align: left; }
	#main .free-wifi .button { margin-bottom: 0; }
	
	.payg h3 { clear: both;	background: none; color: #333; font-size: 18px; text-align: left; width: 100%; }
	.payg h3 span {display: block; font-size: 13px; }
	.payg .tariffs { margin: 0 auto 1em; padding: 0;}
	.payg .tariffs li { display: block; float: left; border: 1px solid #ccc; margin-bottom: 6px; }
	.payg .tariffs li:nth-child(odd) {margin-right: 6px; }
	.payg .tariffs .last { border: 1px solid #ccc; }
	.payg .tariffs p { background: #fff; border: none; }
	.payg p { float: none; text-align: center; }
	.payg p.getpayg { padding-left: 0; width: 100%; text-align: center; }
	.payg p strong { font-size: 13px; margin-top: 0; }
	.payg .btn-outer { float: none;	margin-right: 5px !important; }
	
	/*** Free WiFi ***/
	#main #broadband h2, #main #mobile h2 { font-size: 18px; text-align: left; }
	.help {	border: none; -webkit-border-radius: 0;	-moz-border-radius: 0; border-radius: 0; background: none; }
	.help { margin: 0; padding: 0; }
	.help li { float: none;	padding-bottom: 1em; text-align: left; width: 100%; }
	.help h3 {	padding: 0; }
	
	/** Error page **/
	.error #main {margin-bottom: 157px;}
	.error .inner p {text-align: center !important; }
	
}

/*** Mobile Landscape Size to Tablet Portrait (devices and browsers) ***/
@media only screen and (min-width: 479px) and (max-width: 767px) {
	header #logo div { width: 480px; }
	nav.subnav { width: 480px; }
	nav.subnav ul { width: 480px; }
	#container { width: 420px; }
	#main { width: 420px; }
	.col-one-third img { width: 50%; }
	.map-container { width: 420px; }
	.merch { height: 130px; }
	.steps li { margin-right: 0; width: 100%; }
	.steps img { float: left; }
	.steps span { display: block; margin: 40px 0 0; }
	.footer-inner { width: 420px; }
	.footer-nav ul {width: 480px; }
	/* Station finder */
	#station-finder .tabs-content > div,
	#main .faq-content > div { width: 380px; }
	#station-finder .tabs-content a.active span,
	.faq-content a.active span { background: url(../img/arrows.png) 96% -25px no-repeat; } 
	#station-finder .tabs-content .hook span,
	.faq-content .hook span { 
		background: url(../img/arrows.png) 96% 6px no-repeat;
		display: block;
		padding: 0 8px 0 18px; }
	#station-finder .tabs-content .noStation  {	width: 362px; }
	#station-finder tbody th { width: 50%; }
	.payg .tariffs { width: 278px; }
	.freewifi .merch { height: 155px; }
	}

/*** Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ***/
@media only screen and (max-width: 479px) {
	header #logo div { width: 320px; }
	nav.subnav { width: 320px; }
	nav.subnav ul {	width: 320px; }
	#container { width: 300px; }
	#main { width: 300px; }
	.col-one-third img { width: 60%; }
	.map-container { width: 300px; }
	.merch { height: 160px; }
	.steps li { margin-right: 0; width: 100%; margin-bottom: 20px; }
	.steps img { float: left; margin-bottom: 10px; margin-right: 10px; margin-top: 5px; width: 50%; }
	.steps span { display: block; margin: 0px 0 0; }
	.footer-inner { width: 300px; }
	.footer-nav ul { width: 320px; }
	/* Station finder & FAQ */
	#station-finder .tabs-content > div,
	#main .faq-content > div {width: 260px;}
	#station-finder .tabs-content a.active span,
	.faq-content a.active span { background: url(../img/arrows.png) 94% -25px no-repeat; } 
	#station-finder .tabs-content .hook span,
	.faq-content .hook span { 
		background: url(../img/arrows.png) 94% 6px no-repeat;
		display: block;
		padding: 0 8px 0 18px; }
	#station-finder .tabs-content .noStation  {	width: 242px; }
	#station-finder tbody th { width: 55%; }
	.payg .tariffs { width: 260px; }
	.payg .tariffs li { width: 125px;}
	.freewifi .merch { height: 160px; }
	}	
	
	/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
	  /* Styles */
	}


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* prevent callout */
.nocallout {-webkit-touch-callout: none;}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {-webkit-appearance: none;}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden {position: absolute; left: -100%;}

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Floats */
.floatleft { float: left !important; }
.floatright{ float: right !important; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}