* {
	margin:0;
	padding:0;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////// #customise_page/#reset_page (9) ////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

#customise_page {
	z-index: 255;
	position: absolute;
	bottom: 198px;
	left: 274px;
}
#customise_page img {
	display: block !important;
}
/*#reset_page {
	z-index: 255;
	position: absolute;
	top: 34px;
	left: 274px;
}*/
#reset_page {
	float: left;
	position: relative;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////// #features (10) /////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/
#features{
	clear: both;
	float: right;
	display: inline;
	width: 626px;
	padding: 0;
	border: none;
	position: relative;
	overflow: hidden;
	margin:0px 12px 0px;
	margin:0px 14px 0px;
	
/*	right: 7px;*/
}
#features #features_data {
	 height: 260px;
	 overflow: hidden;
	 position: relative;
}
#features #features_data.hack2 { /* added by javascript. Without overflow auto, then eg #fragment-2 leaves image blank */
	 overflow: auto;
}
#features .fragment {
	background-color: #808080;
	color: black;
	height: 260px;
	width: 626px;
	float:left !important; /* needed for ie6 */
	overflow: hidden !important;
	margin: 0;
	padding: 0;
	border: none;
}
#features .fragment .fragment-body {
	position: absolute;
	bottom: 5px;
	background-color: white;
	background-color: #ffa;
	background-color: #ececec;
	width: 468px;
	margin: 0;
	padding: 5px 0;
	text-indent: 5px; /* check this looks okay in ie6 - and is it okay anyway? ... only applies to first line */
	border: none;
	color: #333;
}
#features .fragment .fragment-body {
	background-color: rgba(250,250,250,0.95);
}
#features .hovered .fragment-body{
	background-color: #ff9;
}
#features .hovered .fragment-body{
	background-color: rgba(255,255,144,0.95);
}
#features .hovered {
	cursor: pointer;
}
#features .fragment .fragment-body a {
	color: #333;
}
#features #fragment-4 .fragment-body {
	bottom: -775px;
	/*background-color: #cdcdcd;*/
}
#features #fragment-3 .fragment-body {
	bottom: -515px;
	/*background-color: #d7d7d7;*/
}
#features #fragment-2 .fragment-body {
	bottom: -255px;
	/*background-color: #e2e2e2;*/
}
#features #fragment-1 .fragment-body {
	bottom: 5px;
	/*background-color: #ececec;*/
}
#features #fragment-4.ui-tabs-panel .fragment-body,
#features #fragment-3.ui-tabs-panel .fragment-body,
#features #fragment-2.ui-tabs-panel .fragment-body,
#features #fragment-1.ui-tabs-panel .fragment-body {
	bottom: 5px;
}
#features .features_tabs {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	width: 158px;
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	font-weight: bold;
}
#features .features_tabs li{
	background-position: -11px;
}
#features .features_tabs li#item1{
	background-color: #ececec;
	background-image: url(/images/redesign/corner1.gif);
	background-position: top right;
	background-repeat: no-repeat;
}
#features .features_tabs li#item2{
	background-color: #e2e2e2;
}
#features .features_tabs li#item3{
	background-color: #d7d7d7;
}
#features .features_tabs li#item4{
	background-color: #cdcdcd;
	background-image: url(/images/redesign/corner1.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}
#features .features_tabs a {
	display: block;
	height: 65px;
	padding: 0;
	border: none;
	color: white;
	text-decoration: none;
	position: relative;
	left: -11px;
/*	width: 168px;*/
	background-image: url(/images/redesign/features_tab_off_fw.png);
	background-repeat: no-repeat;
	background-color: transparent !important;
	
	width: 169px; /* this is right for Firefox IE7, et al, but stretches
	                 the whole button too wide in IE6. put width: 158px;
					 in ie6.css. This leaves 11px without hover in ie6
					 but it's the best compromise for now*/
	
	outline: 0; /* @ Firefox, prevent dotted border after click */
	
	/* ------- TAB TEXT ------ */
	overflow: visible !important;
}    

#features .features_tabs a span {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
	left: 21px;
	height: 65px !important;
	color: #666;
	
	/* ------- TAB TEXT ------ */
	line-height: 32.5px;
	overflow: hidden;
}
#features .ui-tabs-nav .ui-tabs-selected {
	background-color: #666 !important;
}
#features .ui-tabs-nav .ui-tabs-selected a {
	background-image: url(/images/redesign/features_tab_on_fw.png);
}
#features .ui-tabs-nav .ui-tabs-selected a span{
	color: white !important;
}
#features .ui-tabs-nav a:hover {
	background-image: url(/images/redesign/features_tab_on_fw.png);
}
#features .ui-tabs-nav a:hover span {
	color: black;
}
#features .ui-tabs-hide {
	display: none;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////// #content (11) ///////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

/*div#content_div,
div#content_div * {
	background-color: yellow;
	margin:0;
	padding:0;	
}*/
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////// .column (12) ////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

div.column{
	float: left;
	padding-left: 14px;
	min-height: 350px;
	position: relative;
	width: 306px;
}
/*
#column-1{background-color: #c77;}
#column-2{background-color: #9a7;}
#column-3{background-color: #79a;}
*/

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////// .panel (13) /////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

div.panel{
/*	width: 306px;*/
	margin: 20px 0;
	text-align: left;
	position: relative;
	border: 1px solid gray;
	background-color: white; /* not really needed, as always overwritten below */
	background-image: url(/images/redesign/drag.gif);
	background-position: top right;
	background-repeat: no-repeat;
	
	width: 304px;
	/*overflow: hidden;*/
}
div.panel_locked{
/*	width: 306px;*/
	margin: 20px 0;
	text-align: left;
	position: relative;
	border: 1px solid gray;
	background-color: white;
	
	background-image: url(/images/redesign/pin.gif);
	background-position: top right;
	background-repeat: no-repeat;
	
	width: 304px;
}
div.panel h2{
	cursor: move;	
}
.collapsed div.panel-main{
	display: none;
}
div.panel-main{
	background-color: white;
}
div.panel-main img{
 vertical-align:bottom;
}
div.panel-main p{
	margin: 0;
	padding: 5px 10px 5px 18px;
}
div.panel-main ul{
	margin: 0;
	padding: 5px 10px 5px 30px;
	position: relative; /* IE6 fix - stops background colour from disappearing sometimes */
}
div.panel-main ul li{
	padding: 5px 0;
}
div.panel-top{
	padding: 0px 0px 0px 5px;
}
div.panel-top a{
}
div.panel-top a.toggle-panel{
}
div.panel-top img{
}
div#content_div div.panel-top h2 {
	padding-top: 10px !important; /* to extend grabbable region */
	padding-bottom: 10px !important; /* to extend grabbable region */
}
div.panel-top h2{
	font-size: 1.3em;
	position: relative; /* IE6 fix - stops background colour from disappearing sometimes */
	padding-top: 10px !important; /* to extend grabbable region */
	padding-bottom: 10px !important; /* to extend grabbable region */
}
/* rather than assigning specific "left" values below, might be better to assign
   classes that give the order of these elements and position according to these
   classes instead - alternatively do something like align these left. */
div.panel-top a.toggle-panel{
	z-index: 200;
	position: absolute;
	top: -10px;
	left: 0px;
	height: 17px;
	line-height: 1px; /* does this cause problems for alt text? */
}
div.panel-top a.edit-panel{
	z-index: 200;
	position: absolute;
	top: -10px;
	left: 18px;
	height: 17px;
	line-height: 1px;
}

.ui-sortable-helper{ /* NOT USED - try getting rid of*/
	border: 10px solid red;
	background-color: blue;
	z-index: 20;
	position: relative;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////// weather ///////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

#panel-WEATHER ul {
	list-style: none;
	padding-left: 15px;
}
#panel-WEATHER ul li {
	padding-top: 0;
}
#panel-WEATHER .feed-output {
	width: 100%;
	overflow: hidden;
}
#panel-WEATHER .feed-output img {
	display: block;
	float: left;
	margin: 5px 5px 0 15px;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////// .edit-panel-form (15) ////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

form.edit-panel-form{
	background-color: #474749;
	padding: 8px;
	display: none;
}
form.edit-panel-form .feed-input{
	color: #fff;
	width: 140px;
	display: block;
	float: left;
	margin: 3px 0;
}
form.edit-panel-form label{
	margin-left: 4px;
}
form.edit-panel-form .form_buttons{
	padding: 12px 3px 10px 3px;
	clear: left;
	text-align: right;
}
form.edit-panel-form .form_buttons div input{
	width: 60px;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////// .feed-top (16) ///////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

.feed-top{
	background-color: #eee;
	padding: 8px 2px;
	position: relative; /* IE6 fix - stops background colour from disappearing sometimes */
}
.feed-top h3{
	margin: 0px;
	text-transform: uppercase;
	font-size: 1em;
	padding-left: 16px;
	color: #494949;
	
}
.feed-top a{
	float: right;
	margin-right: 5px;
	position: relative; /* IE6 fix. stops +/- disappearing */
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////// .placeholder (17) ///////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

.placeholder{
	background-color:#ff9;
	border: 1px dashed gray; 
	position: absolute;
	z-index: 1;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////// .form_buttons ///////////////////////////////*/ /* index.cfm and customise.cfm */
/*/////////////////////////////////////////////////////////////////////////////////////*/

div.form_buttons input{
	margin: 0 10px;
	height: 24px;
	color: #5D5D5D;
	border: 1px solid #737373;
	cursor: pointer;
}

div.form_buttons input.yes{
	background-color: #f2f2f2;
}

div.form_buttons input.no{
	background-color: #C4C0C0;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////// #cookie_settings //////////////////////////////*/ /* customise.cfm only */
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*
should replace much of this. images inside labels works in proper browsers.
Should just add some javascript to reproduce this in IE
*/
#cookie_settings{
	margin: 0;
	padding: 0;
	clear: both;
	position: relative;
	margin-right: 14px;
/*	margin-left: 14px;
	width: 946px;*/
}
#cookie_settings form h2{
	padding-top: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
}
#cookie_settings form{
	margin-left: 14px;
	color: white;
	color: black;
}
#cookie_settings div{
	clear: both;
}

#cookie_settings div.form_buttons{
	text-align: center;
/*	background-color: #cf6;*/
}
#cookie_settings form div.form_buttons input{
	width: 80px;
}
#cookie_settings form div.form_buttons input.yes2{
	border: 0;
	width:120px;
	height:120px;
}

/*//////////////////////// #choose-colours /////////////////////////*/
#cookie_settings #choose-colours {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #eee;
}
#cookie_settings #choose-colours ul{
	margin: 0 0 0 5px;
	/*margin: 0;*/
	width: 100%;
	overflow: hidden;
	padding: 0;
}
#cookie_settings #choose-colours ul li{
	list-style: none;
	float: left;
	margin: 0;
	margin-left: 5px;
	padding: 0;
/*	margin-left: 8px; */
}
#cookie_settings #choose-colours ul li div{
	border: 2px solid #fff;
	float: left;
	margin-right: 8px;
}

#cookie_settings #choose-colours ul li.active div{
	border-color: #454547;
}
/* need to be positioned absolutely, not hidden, for IE */
#cookie_settings #choose-colours input{
	position: absolute;
	left: -1000px;
	top: 0;
}
#cookie_settings #choose-colours label{
	width: 44px;
	height: 44px;
	display: block;
	border: 1px solid #fff;
	cursor: pointer;
	background-image: url(/images/redesign/button_grad2.png) !important;
	background-repeat: repeat-x !important;
}
#cookie_settings #choose-colours label span{
	display: none;
}

/*//////////////////////// #choose-location /////////////////////////*/
#cookie_settings #choose-location{
	margin: 0;
	background-color: #eee;
	/*float: left;
	clear: both;*/
	/*margin-right: 14px;*/
}
#cookie_settings #choose-location input{
/*	border-left:   5px solid #ff9;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;*/
	position: relative;
	left: 5px;
}
#cookie_settings #choose-location p{
	margin: 0 0 0 5px;
}

/*//////////////////////// #choose-topics /////////////////////////*/
#cookie_settings #choose-topics {
	margin: 0;
	padding: 0;
	/*float: left;*/
	/*clear: both;*/
	/*background-color: #9c3;*/
	background-color: #eee;
	width: 100%;
	overflow: hidden;
	padding: 0 0 10px 0;
}
#cookie_settings #choose-topics h5{
}
#cookie_settings #choose-topics ul {
	margin: 0;
	width: 100%;
	overflow: hidden;
}
#cookie_settings #choose-topics ul li{
	list-style: none;
	float: left;
	/*clear: both;*/
	width: 306px;
	margin-left: 5px;
	margin-bottom: 20px;
	background-color: #737373;
	padding: 0;
	display: block;
	border: 1px solid #808080;
	overflow: hidden;
	height: 80px;
}
#cookie_settings #choose-topics ul li.active{
	background-color: #F8F8F8;
	color: #5D5D5D;
}
#cookie_settings #choose-topics ul li img{
}
#cookie_settings #choose-topics ul li span {
}
#cookie_settings #choose-topics input{
}
#cookie_settings #choose-topics label{
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////// #dialog-form ///////////////////////////////////*/ /* customise.cfm only */
/*/////////////////////////////////////////////////////////////////////////////////////*/

#datepicker_div { /* when/how/why is this added to the code??? */
}
#dialog-form{
	display: none;
}
#dialog-form div.form_buttons{
	text-align: right;
}
.blockUI{
	border: 10px solid #A4A5A5!important;
	background-color: #444445!important;
	cursor: auto!important;
	color: #fff!important;
	text-align: left!important;
}
.blockUI h1{
	padding:  10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #A4A5A5;
}
.blockUI p{
	margin: 0 10px;
	font-size: 1em;
}
.blockUI form{
	margin: 30px;	
}
.blockUI form input{
	width: 80px;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////// ??????? //////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////*/

.top-panel-links {
	border: 10px solid red !important;
	background-color: blue !important;
}
.top-panel-links a:hover, .top-panel-links a.active{
	width: 306px;
}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////// colours //////////////////////////////////////*/ /* index.cfm and customise.cfm */
/*/////////////////////////////////////////////////////////////////////////////////////*/

/* default */
#verbs a:hover,
div.panel-top a.toggle-panel,
div.panel-top a.edit-panel,
.ui-tabs-nav .ui-tabs-selected a{
	background-color: #94033f;
}
.feed ul li a,
.panel-top h2,
.panel-top a,
.feed ul li,
div.panel-main ul li,
div.panel-main ul li a {
	color: #94033f;
}
#verbs a,
.ui-tabs-nav a{
	background-color: #c06;
}

/* blue */
.custom_blue #verbs a:hover,
.custom_blue div.panel-top a.toggle-panel,
.custom_blue div.panel-top a.edit-panel,
.custom_blue .ui-tabs-nav .ui-tabs-selected a{
	background-color: #0040b7;
}
.custom_blue .feed ul li a,
.custom_blue .panel-top h2,
.custom_blue .panel-top a,
.custom_blue .feed ul li,
.custom_blue div.panel-main ul li,
.custom_blue div.panel-main ul li a {
	color: #0040b7;
}
.custom_blue #verbs a,
.custom_blue .ui-tabs-nav a{
	background-color: #5974b1;
}

/* green */
.custom_green #verbs a:hover,
.custom_green div.panel-top a.toggle-panel,
.custom_green div.panel-top a.edit-panel,
.custom_green .ui-tabs-nav .ui-tabs-selected a{
	background-color: #0b751b;
}
.custom_green .feed ul li a,
.custom_green .panel-top h2,
.custom_green .panel-top a,
.custom_green .feed ul li,
.custom_green div.panel-main ul li,
.custom_green div.panel-main ul li a {
	color: #0b751b;
}
.custom_green #verbs a,
.custom_green .ui-tabs-nav a{
	background-color: #5e8c64;
}

/* grey */
.custom_grey #verbs a:hover,
.custom_grey div.panel-top a.toggle-panel,
.custom_grey div.panel-top a.edit-panel,
.custom_grey .ui-tabs-nav .ui-tabs-selected a{
	background-color: #656565;
}
.custom_grey .feed ul li a,
.custom_grey .panel-top h2,
.custom_grey .panel-top a,
.custom_grey .feed ul li,
.custom_grey div.panel-main ul li,
.custom_grey div.panel-main ul li a {
	color: #656565;
}
.custom_grey #verbs a,
.custom_grey .ui-tabs-nav a{
	background-color: #858585;
}

/* A-Z OF SERVICES STYLE */

#panel-ATOZ .panel-main {
	border-top: 1px solid gray;
}

#panel-ATOZ ul {
	list-style-type: none;
/*	margin-left:12px;
	margin-bottom: 3px;*/
	padding: 10px 5px 8px;
	margin: 0;
	overflow: hidden;
}

#panel-ATOZ li {
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
	color: black;
	margin-right: 3px;
	margin-bottom: 3px;
	width: 2em;
	height: 2em;
}
#panel-ATOZ li span{
	width: 2em;
	height: 1.5em;
	display: block;
	margin: 0;
	padding: 0.5em 0 0 0;
	color: #999;
}
#panel-ATOZ li a{
	width: 2em;
	height: 1.5em;
	display: block;
	margin: 0;
	padding: 0.5em 0 0 0;
	color: black;
	background-color: #efeff0;
	text-decoration: none;
}

#panel-ATOZ li a:hover{
	background-color: #cc0066;
	color: white;
	font-weight: bold;
	position: relative;
	top: -0.25em;
	left: -0.25em;
	font-size: 150%; /* problem for IE6. If we want this, need to add extra line to ie6.css */
}
#panel-ATOZ .feed-output {
	margin: 0 10px;
}
div.panel {
	background-image: none;
}
div.panel h2 {
	cursor: auto;
}
.feed-top {
	height: 1.2em;
}