/**********************
* Templates and Modules
**********************/

/* 
*	TEMPLATES
*/

/* STANDARD CONTENT AREA MODULE - with navigation area but no promo area */
	
	.template_std_content {
		width: 720px; /* is this needed? */
		
	}
	
	#content.flex .template_std_content {
		
		width: auto;
		max-width: 720px; /* max area for semi-flex is 1400px */ /* is this needed? */
	}

/* CENTRE CONTENT AREA TEMPLATE - with navigation and promotion area */
	
	.template_centre_content {
		right: 256px;
		margin-left: 512px;
		position: relative;
	}
	
	#content.flex .template_centre_content {
		right: 256px;
		max-width: 888px; /* is this needed */
		margin-left: 512px;
		position: relative;
	}
	
/* FULL WIDTH CONTENT AREA TEMPLATE - no nav or promo area */
	
	.template_full_content {
		width: 100%;
	}
	
/* SEMI CONTENT AREA TEMPLATE - no nav or promo area*/

	.template_semi_content {
		float: left;
		width: 480px;
	}
	
	.template_semi_content.first {
		margin-right: 16px;
	}
	
	#content.flex .template_semi_content {
		float: left;
		width: 50%;
	}
	
	#content.flex .template_semi_content.first .cb {
		margin-right: 8px;
	}
	
	#content.flex .template_semi_content.second .cb {
		margin-left: 8px;
	}
	
/* PROMO AREA - for use template_cenre_content */

	.template_promo_area {
		width: 240px;
		position: absolute;
		top: 0;
		right: 0;
		text-align:center;
	}

/*
*	MODULES
*/

/* NAVIGATION MODULE */

	#module_navigation {
		width: 240px;
		position: absolute;
		left: 0;
		margin-right: 16px;
	}
	
	#module_navigation ul {
		margin-top: -2px;
	}
	
	#module_navigation li {
		margin: 2px 0;
		line-height: 1.7em;
	}
	
	#module_navigation a {
		font-size: 1.4em;
		display: block;
		width: 100%;
		padding: 2px 0;
	}
	
	#module_navigation span {
		display: block;
		margin-right: 10px;
	}

/* 1st level */

	#module_navigation .level1 li a {
		background: #8a8b8d;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
	}
	
	#module_navigation .level1 li.selected a, #module_navigation .level1 li a:hover {
		background: #d71921 url(/img/module-navigation/bg-level1-selected.png) repeat-x 0 100%;
	}
	
	#module_navigation .level1 li span {
		margin-left: 12px ;
		padding-left: 14px ;
	}
	
	#module_navigation .level1 li span.parent {
		background: url(../img/module-navigation/bullet-level1.gif) no-repeat 0 50%;
	}
	
	#module_navigation .level1 li.selected span {
		margin-left: 10px;
		padding-left: 16px;
	}
	
	#module_navigation .level1 li.selected span.parent, #module_navigation .level1 li.selected a:hover span.parent {
		background: url(../img/module-navigation/bullet-level1-selected.gif) no-repeat 0 50%;
	}
	
	#module_navigation .level1 li a:hover span.parent {
		background: url(../img/module-navigation/bullet-level1-hover.gif) no-repeat 0 50%;
	}

/* 2nd level */

	#module_navigation .level1 .level2 li a {
		color: #8a8b8d;
		background-color: #ddd;
		background-image: none;
		font-weight: normal ;
	}
	
	#module_navigation .level1 .level2 li.selected a, #module_navigation .level1 .level2 li a:hover {
		color: #d41820;
		background-color: #ddd;
		background-image: none;
	}
	
	#module_navigation .level1 .level2 li span {
		margin-left: 41px;
		padding-left: 14px;
	}
	
	#module_navigation .level1 .level2 li span.parent {
		background: url(../img/module-navigation/bullet-level2.gif) no-repeat 0 50%;
	}
	
	#module_navigation .level1 .level2 li.selected span {
		margin-left: 39px;
		padding-left: 16px;
	}
	
	#module_navigation .level1 .level2 li.selected span.parent, #module_navigation .level1 .level2 li a:hover span.parent {
		background: url(../img/module-navigation/bullet-level2-selected.gif) no-repeat 0 50%;
	}

/* 3rd level */

	#module_navigation .level1 .level2 .level3 li a {
		color: #8a8b8d;
		background: #fff;
		font-weight: normal;
	}
	
	#module_navigation .level1 .level2 .level3 li.selected a, #module_navigation .level1 .level2 .level3 li a:hover {
		color: #333;
		background: #fff;
	}
	
	#module_navigation .level1 .level2 .level3 li span {
		margin-left: 74px;
		padding-left: 0;
	}

/* 0 level (Ts&Cs etc)*/

	#module_navigation .level0 {
		margin-top: 10px;	
	}
	
	#module_navigation .level0 a {
		color: #999;
	}
	
	#module_navigation .level0.selected a, #module_navigation .level0 li a:hover {
		text-decoration: underline;
	}
	
	#module_navigation .level0 li span {
		margin-left: 12px;
		padding-left: 14px;
	}
	

/* STANDARD CONTENT MODULE */

	.module_standard_content_std { /* non-js replacement version */
		border: 1px solid #cacaca;
		padding: 14px 15px;
		margin-bottom: 16px;
		background: #fff;
		*zoom: 1;
		position: relative;
	}
	
	.module_standard_content_std ul li {
		 list-style-type: circle; margin-left: 25px;
	}
	.module_standard_content_std p ul li {
		 list-style-type: circle; margin-left: 25px;
	}
	#show-bullets {
		 list-style-type: circle; margin-left: 25px; font-size:1.2em;
	}
	#highlight-service {
		border: 1px solid red;
		background: #E8E7E7;
		width: 200px;
	}
	#highlight-service td {
		padding: 10px;
	}
	#highlight-service td .show-bold {
		font-weight: bold
	}
	.module_standard_content {
		margin-bottom: 16px;
		position: relative;
	}
	
	.module_standard_content .top {
		height:15px; /* top corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -446px;
		_background-image: url(../img/bg-modules.gif); /* background matte: #fbfafa */
	}
	.module_standard_content .top div {
		position:relative;
		left:-16px; /* same as bt margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -446px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_standard_content .btm {
		height:15px; /* btm corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -548px; /* -446 (sprite position) - 117 (height of graphic) + 15 (this height) */
		_background-image: url(../img/bg-modules.gif);
	}
	.module_standard_content .btm div {
		position:relative;
		left:-16px; /* same as bb margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -548px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_standard_content .inner1 {
		padding:0 0 0 1px; /* 1/2 width of border image */
		background:url(../img/bg-box-border.gif) repeat-y 0 0;
		_height:1px;
		position: relative; /* fixes weird problems with other relatively positioned elements in IE 6 (and also 7!) */
	}
	
	.module_standard_content .inner2 {
		padding:0 1px 0 0;
		background:url(../img/bg-box-border.gif) repeat-y 100% 0;
	}
	
	.module_standard_content .inner3 { /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
		display:block;
		margin:0;
		padding: 0 15px;
		background:#fff;
		*zoom: 1;
		_display:inline-block;
	}
		
	.module_standard_content .inner3:after, .module_standard_content_std:after { content: '.'; display:block; height:0; clear:both; visibility:hidden; }

/* TITLED CONTENT MODULE */

	.module_titled_content_std { /* non-js replacement version */
		border: 1px solid #cacaca;
		padding: 13px 15px;
		margin-bottom: 16px;
		background: #fff;
		*zoom: 1;
		position: relative;
	}

	.module_titled_content {
		margin-bottom: 16px;
		position: relative;
	}
	
	.module_titled_content .top {
		height:33px;
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -299px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_titled_content .top div {
		position:relative;
		left:-16px; /* same as bt margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -299px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_titled_content .btm {
		height:15px; /* btm corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -401px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_titled_content .btm div {
		position:relative;
		left:-16px; /* same as bb margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -401px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_titled_content .inner1 {
		padding:0 0 0 1px; /* 1/2 width of border image */
		background:url(../img/bg-box-border.gif) repeat-y 0 0;
		_height:1px;
		position: relative; /* fixes weird problems with other relatively positioned elements in IE 6 (and also 7!) */
	}
	
	.module_titled_content .inner2 {
		padding:0 1px 0 0;
		background:url(../img/bg-box-border.gif) repeat-y 100% 0;
	}
	
	.module_titled_content .inner3 { /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
		display:block;
		margin:0;
		padding: 0 15px;
		background:#fff;
		*zoom: 1;
		_display:inline-block;
	}
		
	.module_titled_content .inner3:after, .module_titled_content_std:after { content: '.'; display:block; height:0; clear:both; visibility:hidden; }
	
	.module_titled_content h1, .module_titled_content_std h1 {
		font-weight: bold;
		font-size: 1.4em;
		min-height: 1.8em;
		color: #8a8b8d;
		text-align: right;
	}
	
	.module_titled_content h1 {
		position: relative; 
		padding-top: 1px;
		top: -26px;
		margin: 0 0 -21px 0;
	}
	
	.module_titled_content_std h1 {
		background-color: #ececec;
		margin: -13px -15px 0 -15px;
		padding: 4px 15px 0 15px;
	}

/* TABBED CONTENT MODULE */

	.module_tabs_content_std { /* non-js replacement version */
		border: 1px solid #cacaca;
		padding: 13px 15px;
		margin-bottom: 46px;
		background: #fff;
		*zoom: 1;
		position: relative;
		top: 30px;
	}

	.module_tabs_content {
		padding-top: 30px;
		margin-bottom: 16px;
		position: relative;
	}
	
	.module_tabs_content .top {
		height:15px;
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -152px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_tabs_content .top div {
		position:relative;
		left:-16px; /* same as bt margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -152px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_tabs_content .btm {
		height:15px; /* btm corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -254px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_tabs_content .btm div {
		position:relative;
		left:-16px; /* same as bb margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -254px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_tabs_content .inner1 {
		padding:0 0 0 1px; /* 1/2 width of border image */
		background:url(../img/bg-box-border.gif) repeat-y 0 0;
		_height:1px;
		position: relative; /* fixes weird problems with other relatively positioned elements in IE 6 (and also 7!) */
	}
	
	.module_tabs_content .inner2 {
		padding:0 1px 0 0;
		background:url(../img/bg-box-border.gif) repeat-y 100% 0;
	}
	
	.module_tabs_content .inner3 { /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
		display:block;
		margin:0;
		padding: 0 15px;
		background:#fff;
		*zoom: 1;
		_display:inline-block;
	}
		
	.module_tabs_content .inner3:after, .module_tabs_content_std:after, .module_tabs_controller:after { content: '.'; display:block; height:0; clear:both; visibility:hidden; }
	
	.module_tabs_controller {
		*zoom: 1;
		position: absolute;
		z-index: 10;
	}
	
	.module_tabs_controller li {
		background: url(../img/bg-modules.png) no-repeat 0 -91px;
		_background-image: url(../img/bg-modules.gif);
		width: 138px;
		height: 31px;
		float: left;
	}
	
	.module_tabs_controller li.selected {
		background: url(../img/bg-modules.png) 0 -30px;
		_background-image: url(../img/bg-modules.gif);		
	}
	
	.module_tabs_controller a {
		display: block;
		width: 138px;
		height: 31px;
		color: #8a8b8d;
		font-weight: bold;
		font-size: 1.5em;
		text-align: center;
		line-height: 2.1em;
		vertical-align: bottom;
	}
	
	.module_tabs_controller li.selected a, .module_tabs_controller li a:hover {
		color: #d41820;
	}
	
	.module_tabs_content .tabarea {
		display: none;
	}
	
	.module_tabs_content .tabarea.selected {
		display: block;
	}
	
/* FOOTER BACKGROUND TO STANDARD CONTENT MODULE, TABBED CONTENT MODULE AND TITLED CONTENT MODULE */

	.module_standard_content .module_footer_std, .module_standard_content_std .module_footer_std, 
	.module_titled_content .module_footer_std, .module_titled_content_std .module_footer_std,
	.module_tabs_content .module_footer_std, .module_tabs_content_std .module_footer_std {
		background: url(../img/bg-box-btm-alt.png) repeat-x 0 0;
		min-height: 80px;
		margin-left:-15px;
		margin-right: -15px;
		padding: 1px 15px 0 15px;
	}
	
/* IMPORTANT/ERROR CONTENT MODULE */

	.module_important_content_std { /* non-js replacement version */
		border: 1px solid #cacaca;
		padding: 14px 15px;
		margin-bottom: 16px;
		background: #fff5cd;
		*zoom: 1;
		position: relative;
	}

	.module_important_content {
		margin-bottom: 16px;
		position: relative;
	}
	
	.module_important_content .top {
		height:15px; /* top corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -593px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_important_content .top div {
		position:relative;
		left:-16px; /* same as bt margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -593px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_important_content .btm {
		height:15px; /* btm corner width */
		margin:0 0 0 16px;
		background:url(../img/bg-modules.png) no-repeat 100% -695px;
		_background-image: url(../img/bg-modules.gif);
	}
	.module_important_content .btm div {
		position:relative;
		left:-16px; /* same as bb margin */
		width:16px;
		height:100%;
		background:url(../img/bg-modules.png) no-repeat 0 -695px;
		_background-image: url(../img/bg-modules.gif);
		font-size:0;
		line-height:0;
	}
	
	.module_important_content .inner1 {
		padding:0 0 0 1px; /* 1/2 width of border image */
		background:url(../img/bg-box-important-border.gif) repeat-y 0 0;
		_height:1px;
		position: relative; /* fixes weird problems with other relatively positioned elements in IE 6 (and also 7!) */
	}
	
	.module_important_content .inner2 {
		padding:0 1px 0 0;
		background:url(../img/bg-box-important-border.gif) repeat-y 100% 0;
	}
	
	.module_important_content .inner3 { /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
		display:block;
		margin:0;
		padding: 0 15px;
		background:#fff5cd;
		*zoom: 1;
		_display:inline-block;
	}
		
	.module_important_content .inner3:after, .module_important_content_std:after { content: '.'; display:block; height:0; clear:both; visibility:hidden; }
	
	/*
	sprite styles
	
.bg-tab-selected { background-position: 0 -30px; } 
.bg-tab { background-position: 0 -91px; } 
.bg-box-tabs { background-position: 0 -152px; } 
.bg-box-titled { background-position: 0 -299px; } 
.bg-box { background-position: 0 -446px; } 
.bg-box-btm-alt { background-position: 0 -740px; } 
	
	*/
	
