img, div, li { behavior: url(iepngfix.htc) }

/***
	O2 blueroom v4
	BLUEROOM GENERIC STYLESHEET
	www.aislondon.com (2008)

	-[Inherits]------------------------
	Base.css
	-----------------------------------

	-[Contents]------------------------
	1. CORE LAYOUT STRUCTURE
		1.1 HTML elements (within .inner-content)
		1.2 Site wide anchor links
	2. BRANDING
	3. TOP LEVEL NAV
	4. HAT
		4.1 Local sub nav
		4.2 Global sub nav
	5. LINKS OUT
	5. FOOTER
		5.1 Main footer (Telefonica / external links)
		5.2 Inner footer (Bookmarks / we're better connected)
		5.3 Strapline
	6. BOOKMARKS CONTENT
	7. FORM ELEMENTS	
		7.1 FORM ROW & FORM ELEMENT
			7.1.1	Textbox (for numbers)
			7.1.2	Textbox (for text)
			7.1.3a	Select box (on two lines)
			7.1.3b	Select box row (on one row)
			7.1.4	Select box for dates
			7.1.5	Textarea
			7.1.6a	Checkboxes
			7.1.6b	Checkbox Links (for terms/opt out checkboxes)
			7.1.7	Radio Buttons
		7.2	FEEDBACK MESSAGE
		7.3 STYLED TEXTBOX
		7.4 STYLED QUESTION
		7.5 STYLED ERROR
		7.6 STYLED BUTTONS
			7.6.1	Hover states
		7.7 STANDARD USER DETAILS
			7.7.1	DOB select box
			7.7.2	Terms check box
			7.7.3	Save button
	8. BOXES
		8.1 Priority ticket content box
	
	-----------------------------------

***/

/**
	1. Core layout structure

	Heirachy is as below:
	>		#page-wrapper
	>>		#content
	>>>		.outer-content
	>>>>	.inner-content	
	>>>>>	.panel

*/

.error{
	color:red;
	font-weight:bold;
	width:378px;
}

HTML {
overflow: -moz-scrollbars-vertical;
}

.product_feature{
	/*background-image:url(../../Specific/Preferences/Images/preference-grad.gif);
	background-repeat:repeat-x;
	background-position:bottom;*/
	min-height:72px;
	display:block;
	float:left;
	width:450px;
}
.product_feature p{
	margin-bottom:0px;
}

.venue{
	height:175px;
	overflow:hidden;
}

.venue .blue_title{
	font-size:16px;
	font-weight:normal;
}

.venue .dark_blue_title{
	color: #155AA0;
	font-size:16px;
	font-weight:normal;
}

#left_column{
	width:468px;
	float:left;
	margin-right:12px;
}

#right_column{
	width:468px;
	float:left;
}
.venues #left_column{
	display:block;
	width:468px;
	float:left;
	margin-right:12px;
}

.venues #right_column{
	display:block;
	width:468px;
	float:left;
}


.feature_img{
	float:left; 
	margin:0;
	padding:0;
	border:none;
	padding-right:10px;
	/*background-image:url(../../Specific/Preferences/Images/preference-grad.gif);
	background-repeat:repeat-x;
	background-position:bottom;*/
}

.offer_name{
	font-weight:bold;
	color:#419EDA;
}
.blue_title{
	font-size:1.3em;
	color:#000;
}

body {
	background:	url(../Images/bg-gradient.jpg) top left repeat-x fixed;
}
#background { /* Ensures full screen to work with, and makes the layout more extensible */
	width: 100%;
	height: 100%;
}
#container {
	width: 972px;
	margin: 0 auto;
	background:url(../../../O2Images/EXPERIENCE_CHROME/together-with-blackberry.gif) no-repeat 780px 20px;
}
#page-wrapper {
	position: relative;
	width: 972px;
	background:	url(../Images/top_content.gif) top left no-repeat;
	color: #4f5357;
	overflow:hidden;
}
#content {
	display: block;
	min-height: 38em;
	/* ie6 > height: 380px; */
	background:#fff;
	padding:0px 12px 12px 12px;
	margin-top:12px;
	overflow:hidden;
}
.outer-content {
	position: relative; /*AJM: This is to allow child elements to be position absolutely within the content*/
	background: #EEF6FC;
	overflow:hidden;
}
.inner-content {
	overflow: hidden;
	padding: 12px;
	background: #fff;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
	margin-top:-5px;
}
.venues .inner-content{
	padding:0px;
}
.offer .inner-content{
	padding:12px 0px;
}
.home .inner-content{
	/* CSS 3*/ border-radius: 0em;
    /* Webkit */ -webkit-border-radius: 0em;
	/* Moz */ -moz-border-radius: 0em;
	background:#EEF6FC;
	text-align:center;
	padding: 9px 9px 0;
}
.panel {
	overflow: hidden;
	margin: 0 0 0.6em 0;
	padding: 6px;
	background: #FFF;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;
}
#left_column .panel, #right_column .panel{
	background: #f5f5f5;
	margin-bottom:12px;
}

/**
	1.1 HTML elements (within .outer-content)
*/

.outer-content dl {
	margin: 0 0 1em 0;
}
.outer-content dt {
	display: block;
	margin: 0 0 0.4em;		
	font-size: 1.2em;
	font-weight: bold;
}
.outer-content dd {
	display: block;
	margin: 0 0 1em;
	font-size: 1.2em;
}
.outer-content em {
	font-style: normal;
	text-transform: uppercase;
}
.outer-content h1 {
	margin: 6px 0 0 6px;
	color: #155AA0;
	font-size: 2.2em; /*Changed from 24 to 22*/
	font-weight: normal;
	line-height: 1.2em;
}
.outer-content h1.no-tagline {
	margin-bottom: 0.6em;
}
.outer-content h2,
.outer-content p.tagline {
	display: block;
	/* MB: Had clarification this tagline and h2 should always be 14px, if we see
			PSD's with this not the case we should push back */
	font-size: 1.3em;	
	font-weight: normal;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.8em;
}
form#form1 h2, form#form2 h2{
font-size:18px;
color:#0086C3;
font-weight:normal;
}
.outer-content h2{
	color:#000;
}

.outer-content h2.alternative, 
.outer-content h3.alternative {
	margin: 0 0 0.6em;
	font-size: 1.4em;
	font-weight: bold;
}

.outer-content h3, .outer-content h4 {
	margin: 0 0 0.6em;
	font-size: 1.2em;
	font-weight: normal;
}

.outer-content ol, 
.outer-content ul {
	margin: 0 0 1em 20px;
	/* ie6 > display: inline; */
	/* list-style-position: outside; */
}
.outer-content ol {
	list-style-type: decimal;
}
.outer-content ul {
	list-style-type: disc;
}
.outer-content ol li,
.outer-content ul li {
	font-size: 1.2em; /* This ensures the bullets / numbers are 1.2em as well */
}
.outer-content ol li p, 
.outer-content ul li p {
	font-size: 1em;
	margin: 0;
}
.outer-content ol li li, 
.outer-content ul li li {
	font-size: 1em;
	/* ie7 > margin: 0; */
}
.outer-content p {
	margin: 0 0 0.8em;
	font-size: 12px;
}
.outer-content p.tagline {
	width: 920px; /*Defined limit, tagline should only be one line on normal browser setting */
	color: #005896;
	line-height: 1.2em;
	margin: 0 0 1em 6px;
}
.outer-content p.scrolling{
	display:block;
	height:60px;
	overflow:auto;
}
.outer-content span.tagline {
	display: block;
	font-size: 0.636em; /* MB: 14px from 22 - TB: might wanna address this, probably due to font size being set in the wrong place */
	margin: 6px 0 0 0;
}


/**
	1.2 Site wide anchor links
*/

a {
	color: #0086c3;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	color: #535353;
	text-decoration: underline;
}

/**
	2. Branding
*/

#branding {
	overflow: hidden;
	height: 130px;
	line-height: 2em;
	color: #006;
	font-size: 4em;
	position:relative;
	z-index:1;
}
#branding #logo-o2 {
	position: absolute;
	top:39px;
	left:0px;
}
#branding #logo-blueroom {
	float: right;
	width: 168px;
	height: 31px;
	margin: 66px 0 0 0;
	/*AJM: Make position relative rather than margin so that png displays correctly in IE6*/	
	text-indent: -9999px;
}
#branding #logo-blueroom a {
	display: block;	
	width: 168px;
	height: 31px;
	background: url(../../../O2Images/EXPERIENCE_CHROME/together-with-blackberry.png) no-repeat;
	outline: none;
	cursor: pointer;
	line-height: 0;
}

/**
	3. Top level navigation
*/

#navigation {
	overflow: hidden;
	min-height: 26px; /* Safari doesnt like 2.6em here*/
	/* ie6 > height: 2.6em; */
	margin-top:-30px;
	position:relative;
	z-index:2;
}
#navigation ul {
	float: right;
	padding-right:12px;
	margin:0px;
}
#navigation ul li {
	float: left;
	list-style-type: none;
}
#navigation ul li a{
display:block;
float:left;
height:53px;
font-size:18px;
text-indent:-9999px;
outline:none;
}
#navigation ul li a#tab_home{
background: url(../Images/TopNavigation/tab_home.gif) bottom left no-repeat;
width:90px;
}
#navigation ul li a#tab_why{
background: url(../Images/TopNavigation/tab_why.gif) bottom left no-repeat;
width:248px; 
}
#navigation ul li a#tab_help{
background: url(../Images/TopNavigation/tab_help.gif) bottom left no-repeat;
width:75px;
}
#navigation ul li a:hover{
background-position:top left !important;
}
/**
	4. Hat
*/

#hat {
	background: #064483 url(../Images/Panels/Hat/bg.jpg) repeat-x top;
	min-height: 26px;
	/* ie6 > height: 26px; */
	overflow: hidden;
	height:26px;
}
#hat ol, #hat ul {
	list-style-type: none;
}
#hat ol li a, #hat ul li a {
	background: url(../Images/TopNavigation/white-s.gif) no-repeat left center;
	color: #FFF;
	padding: 0 0 0 15px;
	text-decoration: none;
}
#hat ol li a:hover, #hat ul li a:hover {
	text-decoration: underline;
}

/**
	4.1 Local sub nav
*/

#hat .local-sub-nav {
	float: left;
}
#hat .local-sub-nav li {
	background: url(../Images/Panels/Hat/seperator.gif) no-repeat right center;
	float: left;
	font-size: 1.2em;
	margin: 0.5em 0 0 0;
	padding: 0 10px;
}

/**
	4.2 Global sub nav
*/

#hat .global-sub-nav {
	float: right;
}
#hat .global-sub-nav li {
	background: url(../Images/Panels/Hat/seperator.gif) no-repeat left center;
	float: left;
	font-size: 1.2em;
	margin: 5px 0 0 0;
	padding: 0 10px;
}


#hat .global-sub-nav-left {
	float: left;
}
#hat .global-sub-nav-left li {
	background: url(../Images/Panels/Hat/seperator.gif) no-repeat right center;
	float: right;
	font-size: 1.2em;
	margin: 5px 0 0 0;
	padding: 0 10px;
}
/**
	5. Links out (send to friend etc...)
*/

ul#links-out {
	float: right;
	list-style-type: none;
	overflow: hidden;
	position: absolute; top: 1.3em; right: 12px;
}
ul#links-out li {
	float: left;
	margin: 0 0 0 24px;
	overflow: hidden;
}
ul#links-out li a {
	display: block;
	line-height: 1.8em;
	min-height: 2.4em;
	/* ie6 > height: 24px; */
	padding: 0 60px 0 0;
	text-decoration: none;
}
ul#links-out li#tell-a-friend a {
	/* ie6 > width: 7.6em; */
	background: url(../Images/Buttons/btn-add-a-friend.gif) no-repeat top right;
}
ul#links-out li#tell-a-friend a:hover {
	background: url(../Images/Buttons/btn-add-a-friend-over.gif) no-repeat top right;
}
ul#links-out li#tell-a-friend a:active {
	background: url(../Images/Buttons/btn-add-a-friend-active.gif) no-repeat top right;
}
ul#links-out li#add-to-calendar a {
	/* ie6 > width: 7.2em; */
	background: url(../Images/Buttons/btn-calendar.gif) no-repeat top right;
}
ul#links-out li#add-to-calendar a:hover {
	background: url(../Images/Buttons/btn-calendar-over.gif) no-repeat top right;
}
ul#links-out li#add-to-calendar a:active {
	/* background: yellow;
		MB: It would be good to make use of the active pseudo-class for this example
		MB: Cool, he wanted them active after all
	*/
	background: url(../Images/Buttons/btn-calendar-active.gif) no-repeat top right;
}
ul#links-out li a span {
	display: block;
	/* ie6 > display: inline; */
	padding: 2px 0 0 0;
}

/**
	5.1 Footer (Telefonica and external links)
*/

#footer {
	overflow: hidden;
	margin: 40px 0 0;
	padding: 0 0 60px;
	/* ie6 > position: relative; z-index: 10; */
}
#footer #parentBranding {
	color: #000;
	display: block;
	float: left;
	width: 19.6em;
	height: 2.9em;
	/* background: url(../Images/logo-a_telefonica_company.png) no-repeat;
	text-indent: -9999px; */
}
/*
TB: Associated page:  Generic.Master
#footer #parentBranding img {
	display: block;
	float: left;
	width: 19.6em;
	height: 2.9em;	
}
*/
#footer #offSiteLinks {
	overflow: hidden;
	float: left;
	margin: 0.7em 0 0 100px;
	list-style: none;
}
#footer #offSiteLinks li {
	float: left;
	color: #a7a7a7;
}
#footer #offSiteLinks li a {
	color: #a7a7a7;
	font-size: 1em;
	text-decoration: none;
}
#footer #offSiteLinks li a:hover {
	text-decoration: underline;
}
#footer #copyright {
	float: right;
	margin: 0.5em 0 0;
	color: #000;
	font-size: 1.2em;
}

/**
	5.2 Inner Footer
*/

#inner-footer {
	overflow: hidden;
	margin: 40px 0 0;
}
#inner-footer #additional-links {
	overflow: hidden;
	float: left;
}
#inner-footer #additional-links .links-container {
	float: left;
	margin: 0em 1em 0em 0;
	padding: 0.9em 1.5em 0.7em 0;
	/* background: url(../Images/InnerFooter/seperator.gif) no-repeat center right;  ADD WITH JS */
}
/*.js #inner-footer #additional-links .links-container {
	background: url(../Images/InnerFooter/seperator.gif) no-repeat center right;
}*/
#inner-footer #additional-links .links-container a {
	padding: 0 1.8em 0 0;
	color: #155aa0;
	font-size: 1.2em;
	/*line-height: 1.3em;AJM: this means 15.6px! rounding issues! bah*/
	line-height: 1.08333em;
	text-decoration: none;
}
#inner-footer #additional-links .links-container a:hover {
	text-decoration: underline;
}
#inner-footer #additional-links .links-container div.links-content {
	position: absolute; bottom: -2.5em; left: 0em;
	display: block;
	padding: 0.3em 0.6em;
	background: #EBEBEB;
}
#inner-footer #additional-links .links-container div.links-content h5 {
	display: none;
}
#inner-footer #additional-links .links-container div.links-content ul {
	overflow: hidden;
	list-style: none;
}
#inner-footer #additional-links .links-container div.links-content ul li {
	float: left;
}
#inner-footer #additional-links .links-container div.links-content ul li a {
	background: none;
}
#inner-footer #additional-links .links-container ul {}

#inner-footer #additional-links .links-container#rss a.links-link {
	background: url(../Images/Icons/rss-blue.gif) no-repeat center right;
}
#inner-footer #additional-links .links-container#bookmarks a.links-link {
	padding: 0 1.4em 0 0;
	background: url(../Images/Icons/arrow_right-blue.gif) no-repeat center right;
}

/**
	5.3 Strapline
*/

#inner-footer #strapLine {
	float: right;
}
#inner-footer #strapLine p {
	display: inline; /* TB: IE6 seems to add display block by default thus taking up the full width and cuases its floating parent an issue */
	color: #646567;
	font-size: 2.2em;
}

/**
	6. Bookmark Content
*/

div#bookmark-content {
	background: #D0D0D0 url(../Images/bg-footer.gif) repeat-x scroll top;
	color: #FFF;
	overflow: hidden;
	padding: 0.3em 12px 1em;
}
div#bookmark-content p {
	margin: 0.3em 0;
	font-size:1.2em;
	color: #155aa0;
}
div#bookmark-content ul {
	overflow: hidden;
	list-style-type: none;
}
div#bookmark-content ul li {
	float: left;
	margin: 0.3em 12px 0.3em 3px;
	font-size: 1.2em;
}
div#bookmark-content ul li a {
	color: #155aa0;
	text-decoration: underline;
}
div#bookmark-content li a span {
	padding: 0 0 0 28px;
}
div#bookmark-content li#facebook a span {
	background: url(../Images/Icons/facebook.gif) no-repeat center left;
}
div#bookmark-content li#delicious a span {
	background: url(../Images/Icons/delicious.gif) no-repeat center left;
}
div#bookmark-content li#myspace a span {
	background: url(../Images/Icons/myspace.gif) no-repeat center left;
}
div#bookmark-content li#digg a span {
	background: url(../Images/Icons/digg.gif) no-repeat center left;
}
.js div#bookmark-content {
	position: absolute;
	z-index: 40;
	padding: 0;
	background-color: transparent;
	background-image: none;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;
}
* html .js div#bookmark-content {
	width: 110px;
}
.js div#bookmark-content .bookmarks {
	background-color: #EBEBEB; 
	background-image: none;
	border: 1px solid #f0f0f0;
	border-bottom: none;
	border: 1px solid #fff;
	border-bottom: none;
	padding: 1px 1px 0px 1px;
	overflow: visible;
	/* CSS 3*/ border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-bottom-left-radius: 0.0em; border-bottom-right-radius: 0.0em; 
    /* Webkit */ -webkit-border-top-left-radius: 0.5em; -webkit-border-top-right-radius: 0.5em; -webkit-border-bottom-left-radius: 0.0em; -webkit-border-bottom-right-radius: 0.0em;
	/* Moz */ -moz-border-radius-topleft: 0.5em; -moz-border-radius-topright: 0.5em; -moz-border-radius-bottomleft: 0.0em; -moz-border-radius-bottomright: 0.0em;    
	margin-left: 6px;
	z-index: 50;
	position: relative;
}
.js div#bookmark-content .shadow {
	position: absolute;
	top: 6px;
	left: 0px;
	right: 10px;
	bottom: 0;
	background-color: #000;
	z-index: 10;
	/* CSS 3*/ border-top-left-radius: 0.5em;
    /* Webkit */ -webkit-border-top-left-radius: 0.5em; 
	/* Moz */ -moz-border-radius-topleft: 0.5em;  
	border: 1px solid #000;
	/* what to do with these: */
	filter:alpha(opacity=20);
	-moz-opacity:0.20;
	opacity: 0.20;
}
* html .js div#bookmark-content .shadow {
	width: 6px;
	height: 500px;
	zoom: 1;
}
.js div#bookmark-content p {
	display: none;
}
.js #page-wrapper div#bookmark-content ul {
	padding: 0;
	margin: 0;
}
.js #page-wrapper div#bookmark-content li {
	float: none;
	margin: 0;
	/* background-image: none; */
	/* padding: 0; */
	border-bottom: 1px solid #fbfbfb;
	font-size: 1.1em;
	min-width: 112px;
}     
* html .js #page-wrapper div#bookmark-content li {
	width: 112px;
}
.js div#bookmark-content li a {
	border-bottom: 1px solid #d3d3d3;
	padding: 3px 8px 4px 8px;
	display: block;
	text-decoration: none;
	color: #288d91; /* fixes ie issue - TB: maybe isolate in ie6 only sheet? */
	zoom: 1;
	min-width: 96px;
	/* ie6 > min-width: 96px; */
}
* html .js div#bookmark-content li a {
	width: 112px;
}
.js #page-wrapper div#bookmark-content li a:hover {
	background: #f6f6f6 url(../Images/Bookmarks/bookmarks-selected-grad.gif) repeat-x top;
}
.js div#bookmark-content li.first a {
	padding-top: 6px;
}

/*****/


/**
	7. Form Elements
*/

/**
	7.1 Form row, Form element and Standard Form styling
*/

legend {
	display: none; /* MB: Legends purely for accessiblity for purposes */
}
.form-row {
	display: block;
	/* ie6 > display: inline; zoom: 1; */
	overflow: hidden; 
	margin: 0.3em 0 0;
}
.form-row label {
	cursor: pointer;
}
.form-element {
	overflow: hidden;
	/* ie6 > zoom: 1;  overflow: visible; */
	margin: 0 0 0.6em;
}
.form-element label { /* TB: Will usually wrap around form fields */
	overflow: hidden;
	/* ie6 > zoom: 1; */
	cursor: pointer;
}
.form-element .labelContainer,
.form-element .form-row label {
	float: left;
	font-size: 1.2em;
}
.form-element .inputContainer,
.form-element .form-row input {
	float: left;
}
/* 
	TB: not sure we need this
	
.form-element p.labelContainer {
	cursor: default;
}
*/
.form-element select optgroup {
	font-style: normal;
	margin: 0.3em 0 0.3em;
}
.form-element select optgroup option {
	margin: 0 0 0 0.6em;	
}

/**
	7.1.1 Text Box (for numbers)
*/

.form-element.num {}
.form-element.num .form-row {}
.form-element.num .form-row .labelContainer {
	margin: 0.4em 12px 0 0;
}
.form-element.txt .form-row .inputContianer {}

/**
	7.1.2 Text Box (for text)
*/

.form-element.txt {}
.form-element.txt .form-row {}
.form-element.txt .form-row .labelContainer {
	margin: 0.4em 0px 0 0;
/* MB: Changed 1.2em on the right to 12px for greater control */
}
.form-element.txt .form-row .inputContianer {}


/**
	7.1.3a Select Box
	- Select Box on two lines
*/

.form-element.select {}
.form-element.select .labelContainer,
.form-element.select .inputContainer {
	float: none;
}
.form-element.select select {
	display: block;
	margin: 0.6em 0 0;
	padding: 2px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}
.form-element.select select option {
	padding: 0 8px 0 2px;
}

/**
	7.1.3b Select Box Row
	- Select Box on one line
*/

.form-element.selectRow {}
.form-element.selectRow label {}
.form-element.selectRow .labelContainer {
	margin: 0.4em 12px 0 0;	
}
.form-element.selectRow select {
	float: left;
	padding: 2px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}
.form-element.selectRow select option {
	padding: 0 8px 0 2px;
}

/**
	7.1.4a Select Boxes for Dates
*/

.form-element.selectDateRow {}
.form-element.selectDateRow label {
	margin: 0.4em 12px 0 0;
}
.form-element.selectDateRow select {
	padding: 2px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}
.form-element.selectDateRow select option {
	padding: 0 8px 0 2px;
}

/**
	7.1.4b Select Boxes for Dates 
	 - on two lines
*/

.form-element.selectDate {}
.form-element.selectDate label {
	display: block;
	float: none;
	margin: 0.4em 12px 0.6em 0;
}
.form-element.selectDate .inputContainer {
	display: inline;
}
.form-element.selectDate select {
	padding: 2px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}
.form-element.selectDate select option {
	padding: 0 8px 0 2px;
}


/**
	7.1.5 Textarea
*/

.form-element.txtArea {}
.form-element.txtArea .form-row {}
.form-element.txtArea .form-row label {
	display: block;
	margin: 0 0 0.3em;
	font-size: 1.2em;
}
.form-element.txtArea .form-row textarea {	
	width: 266px;
	padding: 1px 4px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;		
}

/**
	7.1.6a Check boxes
	- for groups of checkboxes, 
	- - perhaps we should style a chkRow also?
*/

.form-element.chk {}
.form-element.chk .form-row {
	margin: 0.4em 0 0;
}
.form-element.chk .form-row label {
	float: left;
	font-size: 1.2em;
}
.form-element.chk .form-row input {
	overflow: hidden;
	/* ie6 >  zoom: 1; */
	display: block;
	margin: 0em 0.4em;
}

/**
	7.1.6b Checkbox Links
	- for one-off 
*/

.form-element.chkLink {}
.form-element.chkLink .form-row {}
.form-element.chkLink .form-row label {
	display: block;
	margin: 0.3em 0 0; 
	/* ie6 > margin: 0.6em 0 0; */
	font-size: 1.1em;
}

.form-element.chkLink .form-row input {
	overflow: hidden;
	display: block;
	margin: 0.3em 0.6em 0;
	/* ie6 >  _zoom: 1; (overflow:hidden fix) */
	/* ie7 > margin-top: 6px; */
}

/**
	7.1.7 Radio buttons
*/

.form-element.radio {}
.form-element.radio .form-row {
	/* ie6 > display: block; */
	margin: 0.4em 0 0;
}

.form-element.radio .form-row label {
    /* Added by Johann to fix a wrapping issue within labels */
    /* MB: Adjusted to 270 for the benefit of IE6 and 7 */
    width: 270px;
}

.form-element.radio .form-row input {
	overflow: hidden;
	display: block;
	margin: 0em 0.4em;
}

/**
	7.1.8 Select Box Group
*/
.form-element.selectGroup {}
.form-element.selectGroup .form-row {}
.form-element.selectGroup .labelContainer {
	display: block;
	float: none;
	margin: 0 0 0.6em 0;
}
.form-element.selectGroup select {
	display: block;
	padding: 5px;
	border: solid 1px #bababa;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}
.form-element.selectGroup select option {
	padding: 0 8px 0 2px;
}

/**
	7.2 Feedback message
*/

.feedback-message { /* Yellow error colour for appearence on blue */
	font-size: 1.2em;
	color: #fff200 !important; /* Use of the forbidden rule to overwrite ASP and its inline styling... */
}

.panel .feedback-message { /* Red error colour for appearence on white */
	color: #d7070d !important; /* Use of the forbidden rule to overwrite ASP and its inline styling... */
}

/* 7.3 Styled textbox */

.form-element.num .inputContainer,
.form-element.txt .inputContainer {
	float: left;
	display: block;
	border: 1px solid #fff;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}
.form-element.num .inputContainer span,
.form-element.txt .inputContainer span {
	display: block;
	border: 1px solid #bababa;
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em;
}
.form-element.num .inputContainer span span,
.form-element.txt .inputContainer span span {
	background-color: #fff;
	border: 1px solid #ebeaea;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
}
.form-element.num .inputContainer input,
.form-element.txt .inputContainer input {
	float: none;
	padding: 1px 4px;
    color: #535353;
    font-size: 1.4em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
}
.form-element.txt .inputContainer input {
    width: 116px;
}
.form-element.num .inputContainer input {
	width: 100px;
}

/**
	7.4 Competition question
*/

#question {}

/** 
	7.5 styled error
*/

.form-element.feedback .inputContainer span { /* Yellow error colour for appearence on blue */
	border: 1px solid #fff200;
}
.form-element.feedback .inputContainer span span { /* reset inner border colour */
	border: 1px solid #EBEAEA;
}
.panel .form-element.feedback .inputContainer span { /* Red error colour for appearence on white */
	border: 1px solid #d7070d;
}
.panel .form-element.feedback .inputContainer span span { /* reset inner border colour */
	border: 1px solid #EBEAEA;
}
.form-element.feedback select,
.form-element.feedback.txtArea textarea {
	border: solid 1px #d7070d;
}


#question .feedback {
	border: 1px solid #d7070d;
	/* CSS 3*/ border-radius: 0.5em;
    /* Webkit */ -webkit-border-radius: 0.5em;
	/* Moz */ -moz-border-radius: 0.5em;	
}


/**
	7.6 Styled Buttons
*/

.button {
	float: left;
}
.button span {
	display: block;
    border: 0.1em solid #9d9d9d;
    text-align: center;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;    
}
.button span.primary {
    color: #fff;
}  
.button span span {
	display: block;
    border:0.1em solid #fff; 
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em;
}
.button span span span {
	display: block;
    border: 0.1em solid #4dd8ff;
    padding: 0px;
    position: inherit;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    background: #d4d3d3 url(../Images/Buttons/Submit/buttongrad3.gif) repeat-x 0 -1px;
}
.button span.primary {
	border:0.1em solid #065ba6; 
}
.button span.primary span {
    border: 0.1em solid #61d8ff;
}
.button span.primary span span {
    /* border: 0.1em solid #61d8ff; */
    border: 0.1em solid #0c84d3;
    background: #0274be url(../Images/Buttons/Submit/buttongradblue.gif) repeat-x;
}
.button span.primary span span:active {
	background: #6ecbff url(../Images/Buttons/Submit/buttongradblue-active.gif) repeat-x;;
}
.button span.primary span span span {
    border: 0px;
}
.button input,
.button a{
    display: block;
    white-space: nowrap;
    border: 0px;
    cursor: pointer;
    color: #fff;
    font-size: 1.2em;
	height:22px;
}
div#go input#ButtonSubmit{
	width:34px;
	background: url(../Images/button_go.gif) 0px 0px no-repeat;
	margin-top:4px;
}
input#ButtonSubmit{
	width:74px;
	background: url(../Images/button_submit.gif) 0px 0px no-repeat;
}
input#ButtonSubmit:hover, input#ButtonSubmit:focus, input#ButtonSubmit:active{
	background-position: 0px -22px !important;
}

/*
	MB: See how we get on without this. Probably not needed.
		Needs to be moved to CC anyway
	TB: Put back in, IE needs this to render the correct button widths
	TB: Now in individual CSS docs

* html .button input,
* html .button a {
    overflow: visible;
    width: 1%;
}
*+html .button input,
*+html .button a {
    overflow: visible;
    width: 1%;
}
*/


/**
	7.6.1 Button Hover states
*/

/* Normal buttons*/
.button:hover span span {
    border: 0.1em solid #4dd8ff;
}
.button:hover span span span {
    /* background: #d4d3d3 url(../Images/Buttons/Submit/buttongrad3-over.gif) repeat-x 0 -1px;
    MB: Background is too much, needs to be more subtle so taken out
	MB: Look to implement HIT/HOVER/NORMAL states */
    border: 0.1em solid #fff;
}
.button:hover span span span a,
.button:hover span span span input {
	color: #228ace;
}

/*Primary buttons*/
.button:hover span.primary span {
	border: 0.1em solid #0c84d3;
	/*border: 0.1em solid #FFF;*/
}
.button:hover span.primary span span {
	/*border: 0.1em solid #FFF;*/
	border: 0.1em solid #fff;
}
.button:hover span.primary span span a,
.button:hover span.primary span span input {
	color: #E8E8E8;
}

/* MB: Is this section really generic or page specific for Non O2 customers, look to refine this doc */

/**
	7.7 Standard user details
*/

.userDetails fieldset {
	overflow: hidden;
}
.userDetails .form-element {
	min-height: 2em;
	/* ie6 > height: 2em; */
	margin-bottom: 0.3em;
}
.userDetails .form-element label {}
.userDetails .form-element .labelContainer {
	width: 148px;
	margin-top: 0.4em;
}
.userDetails .form-element.txt .inputContainer input,
.userDetails .form-element.num .inputContainer input {
	width: 225px;
}
.userDetails .form-element.txt .inputContainer input#p,
.userDetails .form-element.num .inputContainer input#p {
	width: 100px;
}
.userDetails .form-element .feedback-message {
	display: block;
	margin: 5px 0 0 101px;
}
/* MB: Margin-left is not required for the terms and conditions error state */
.userDetails #terms.form-element .feedback-message {
	margin: 0 0 0 6px;
}

/**
	7.7.2 Terms checkbox
*/
.userDetails .form-element.chkLink {
	/* Remember these rules are just for generic style - we expect them to differ should the layout differ from a standard user collection form */
	margin-left: 101px; 
	/* 
		TB: not sure yet... check if required.. 
		min-height: 0; 
	*/
}
.userDetails .form-element.chkLink#optin {
	margin-top: 1em;
	margin-bottom: 1em;
}
.userDetails .form-element.chkLink .labelContainer {
	width: auto;
	margin-top: 0.3em;
}
.userDetails .form-element.chkLink.feedback {
	margin-top: 0;
}
.userDetails .form-element.chkLink .feedback-message {
	margin-left: 0;
	line-height: 2em;
}

/**
	7.7.3 Save button
*/
.userDetails .form-element#saveChanges {
	float: right;
	margin: 1.4em 0 0;
}

/**
	MB: not sure what the following section is all about. Doesn't seem to be missed...
	8. Boxes

	Boxes comprise of sections seperated outside of the normal flow that cannot be constructed with pure CSS on the elements
*/


/**
	8.1 Priority ticket content box

div.event-info-section {
	margin: 0 0 1.2em 0;
	width: 477px;
}

div.event-info-section .box-top {
	background: url(../Images/Panels/EventDetailSection/box-top.gif) no-repeat top left;
	height: 5px;
	_font-size: 1px;
}

div.event-info-section .box-bottom {
	background: url(../Images/Panels/EventDetailSection/box-bottom.gif) no-repeat bottom left;
	padding: 0.8em 12px 1.2em 12px;
}
*/

/* ----------------------------------- SUBPAGES HEADER CUST0MIZATION & STYLES --------------------------------------- */
ul.help_page{
	list-style:none;
	margin:0px;
}
ul.help_page li{
	margin:0px 0px 15px 0px;
}
div#help_header, div#why_header, div#terms_header{
	background: url(../Images/top_why.gif) 0px 0px no-repeat;
	height:60px;
	padding:20px 12px;
}
div#why_header{
	background: url(../Images/top_why.gif) 0px 0px no-repeat;
}
div#terms_header{
	background: url(../Images/top_why.gif) 0px 0px no-repeat;
}
div#help_header h1, div#help_header p, div#why_header h1, div#why_header p, div#terms_header h1, div#terms_header p{
	margin-left:0px;
	margin-top:0px;
	color:#fff;
}
div#help_header p, div#why_header p, div#terms_header p{
	color:#88CCFF;
}
div.container_help_page, div.container_why_page, div.container_terms_page{
	padding:0px !important;
	background:none !important;
	margin-top:0px !important;
}
div.container_help_page .outer-content, div.container_why_page .outer-content, div.container_terms_page .outer-content {
	background:none;
	overflow:visible;
}
div.container_help_page .panel{
	padding:0px;
}
.CollapsiblePanelClosed, .CollapsiblePanelOpen{
	border-bottom: 2px dotted #c2ddec;
	margin:10px 0px;
	padding:5px 0px 10px 0px;
}
.CollapsiblePanelClosed span.blue_title, .CollapsiblePanelOpen span.blue_title{
	cursor:pointer;
	padding-left:30px;
}
.CollapsiblePanelOpen span.blue_title{
	color:#386eab;
}
.CollapsiblePanelClosed span.blue_title{
	background: url(../Images/widget-arrow-closed.gif) 0px 1px no-repeat;
}
.CollapsiblePanelOpen span.blue_title{
	background: url(../Images/widget-arrow-opened.gif) 0px 1px no-repeat;
}
.CollapsiblePanelContent{
	padding-left:30px;
}
div.Solar, div.Beauty, div.Hamper, div.Radios, div.Fruit, div.Meals, div.Education, div.Tap, div.Water,
li.Solar, li.Beauty, li.Hamper, li.Radios, li.Fruit, li.Meals, li.Education, li.Tap, li.Water{
display:none !important;
}
div.Days div#map2, div.Hotel div#map{
display:none;
}

ul.listings{
list-style:none;
padding:0px;
margin:0px;
}
#tabs{
display:block;
float:left;
width:500px;
overflow:hidden;
}
#tabs .ui-tabs-nav{
overflow:hidden;
margin:0px;
padding:0px;
}
#tabs .ui-tabs-nav li{
width:120px;
}
#tabs .ui-tabs-nav li.ui-tabs-selected{
padding-bottom:0px;
}
#tabs .ui-tabs-nav li a{
display:block;
width:120px;
text-align:center;
padding:0px;
line-height:30px;
background: url(../Images/tabs.gif) top left no-repeat;
}
#tabs .ui-tabs-nav li.ui-tabs-selected a{
background: url(../Images/tabs.gif) bottom left no-repeat;
outline:none;
color:#666;
}
.ui-tabs .ui-tabs-panel{
overflow:hidden;
border:1px solid #ddd !important;
}