/* CSS Document */

/*
	COLORS ARE AS FOLLOWS
	
	DARK GREY: 				#333333;
	BODY COPY LIGHT GREY: 	#666666;
	NEWS_BOX GREY:			#F0F0F0;
	DIVIDER GREY: 			#D4D4D4;
	ORANGE ON: 				#FE8606;
	ORANGE OFF: 			#42382E;
	green was 99cccc then 6699cc then 41acd6 now 99cccc hello
*/


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

FIRST THINGS FIRST

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

*
{
	padding:0px;
	margin:0px;
}

body
{
	background:#666666;
	padding:0px;
	font-size:100%;
	margin:0px 0px 0px 0px;
	/*margin:10px 10px 0px 10px;*/
	background-color:#FBFBFB;
	background:url("../../media/jpg/centre_bg.jpg");/**/
}

.webpage
{
	display:block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	width:900px;
	
	
}
.content
{
	width:780px;
	background-color:#FFFFFF;

	
}

.full_width
{
	width:100%;
	background-color:#FFFFFF;
}


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

MAIN HTML ELEMENTS

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

.webpage h1, .webpage h3, .webpage h4, .webpage h5, .webpage p, .webpage img
{
	margin:0px;
	padding:0px 0px 10px 0px;
}

.webpage h1
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:90%;
	line-height:150%;
	color:#333333;
	margin:15px 10px 10px 10px;
}

.webpage h2
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:90%;
	line-height:150%;
	color:#333333;
	margin:5px 10px 5px 15px;
}

.webpage p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:80%;
	line-height:130%;
	color:#666666;
	padding-bottom:10px;
	margin:10px 10px 10px 10px;
}

.webpage a
{
	border-style:none;
	outline:none;
	color:#99cccc;
}

.webpage a img
{
	border: 0px;
}

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

LAYOUT

*********************************/
.webpage .right_border_container
{
	background:url("../../media/jpg/right_page_border.jpg") top right repeat-y;
	padding-right:50px;
	width:780px;

	/*border:1px solid #00FF00;*/
}

.webpage .left_border_container
{
	background:url("../../media/jpg/left_page_border.jpg") top left repeat-y;
	padding-left:50px;
	width:780px;
}


.one_col_wide
{
	float:left;
	width:25%;
	padding-bottom:0px;
	/*border:1px solid #888;*/
	/*min-width:25%;
	min-height:100px;*/
}

.two_col_wide
{
	float:left;
	width:49%;
	padding-bottom:0px;
	margin-right:7px;
	/*min-width:25%;
	min-height:100px;*/
	/*border:1px solid #888;*/
}

.three_col_wide
{
	float:right;
	width:74%;
	padding-bottom:0px;
	
	/*min-width:25%;
	min-height:100px;*/
	/*border:1px solid #888;*/
}

.one_col_wide_right
{
	float:right;
	width:24%;
	padding-bottom:20px;
	/*border:1px solid #888;*/
	/*min-width:25%;
	min-height:100px;*/
}




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

PAGE HEADER

*********************************/
.header
{
	width:780px;
	height:100px;
	position:relative;
	overflow:hidden;
	background-color:#ffffff;
	padding:0px;
	margin:0px;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#666666;
	/*border-top-width: thin;
	border-top-style: solid;
	border-top-color: #666666;*/
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}

.header .logo_holder
{
	float:left;
	padding:25px 0px 0px 2px;
	margin-left:0px;
	width:196px;
	height:70px;
}

/* NAV HOLDER */

.header .nav_container
{
	padding-top:25px;
	margin-right:0px;
	float:right;
}

.header .nav_holder
{
	font-size:60%;
	/*background-color:#00FF00;*/
	float:left;
}

.header .nav_holder ul
{
	list-style-type:none;
	margin-right:5px;
	padding:0px;
}

.header .nav_holder li
{
	list-style-type:none;
	line-height:120%;
	padding:0px 0px 0px 0px;
	width:177px;
	margin:0px 0px 2px 0px;
	/*background-color:#42382E;*/
}

.header .nav_holder li a
{
	text-decoration:none;
	color:#FFFFFF;
	padding:0px 0px 2px 5px;
	margin:0px 0px 0px 0px;
	display:block;
}

.header .nav_holder li a.on
{
	background:url("../../media/gif/btn_on.gif") top left repeat-x;
	display:block;
}

.header .nav_holder li a:hover
{
	background:url("../../media/gif/btn_on.gif") top left repeat-x;
	display:block;
}








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

SUBNAV 

*********************************/
.sub_nav_container
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:70%;
	line-height:130%;
	color:#666666;
	margin-top:10px;
	margin-left:0px;
}

.sub_nav_container ul
{
	list-style:none;
}

.sub_nav_container li a
{
	color:#333333;
	text-decoration:none;
	background-color:#FFFFFF;
	display:block;
	margin:0px 0px 1px 0px;
	padding:2px 0px 2px 7px;
	border: 1px solid #CCCCCC;
}

.sub_nav_container li a.on
{
	color:#333333;
	background-color:#99cccc;
}

.sub_nav_container li a:hover
{
	color:#333333;
	background-color:#99cccc;
}


.sub_nav_container li a.open
{
	color:#333333;
	background:#99cccc url(../../media/gif/open_btn_arrow.gif) no-repeat scroll right center;
	padding-right:10px;
}


.sub_nav_container li a.child_page
{
	background-color:#E6E6E6;
	color:#333333;
	padding-left:15px;
}

.sub_nav_container li a:hover.child_page 
{
	background-color:#99cccc;
}


.sub_nav_container li a.child_page_open
{
	background:#FFCC80 url(../../media/gif/child_btn_on.gif) no-repeat scroll right center;
	padding-left:15px;
}

.sub_nav_container li a.child_page_child_page
{
	background-color:#fff;
	color:#333333;
	padding-left:25px;
}

.sub_nav_container .sub_nav_child 
{
	background-color:#666666;
	display:block;
}

/** TESTING DIFFERENT WAY OF CONSTRUCTING SUBNAV **/

.sub_nav_container .child_page a
{
	background-color:#E6E6E6;
	color:#333333;
	padding-left:15px;
}

.sub_nav_container .child_page a.open 
{
	background:#FFCC80 url(../../media/gif/child_btn_on.gif) no-repeat scroll right center;
	padding-left:15px;
}


.sub_nav_container .child_page_child_page a
{
	background-color:#fff;
	color:#333333;
	padding-left:25px;
}



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

journey planner

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

.tfl-journey-planner
{
}

.page_title p {
color:#666666;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:80%;
line-height:130%;
margin:0px;
padding-bottom:10px;

padding:5px 20px 0px 30px;
}

.tfl_small{
color:#99cccc;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:90%;
line-height:130%;
margin:0px;
padding-bottom:10px;
padding:5px 20px 0px 0px;
font-weight:strong;
}



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

PAGE HEADER

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

.page_title
{
}

.page_title h1
{
	font-size:110%;
	color:#666666;
	font-family:Helvetica, sans-serif;
	padding:5px 0px 0px 30px;
	margin:0px 0px 0px 0px;
}

.page_title h2
{
	font-size:90%;
	font-family:Helvetica, sans-serif;
	color:#666666;
	padding:0px 0px 5px 30px;
	margin:0px 0px 0px 0px;
}

.page_title .divider
{
	margin:0px 20px 0px 30px;
}

.page_title .img_holder
{
	padding:0px 0px 0px 0px;
	margin-right:0px;
	position:relative;
	
}

.page_title .img_holder_drink
{
	padding:10px 0px 0px 10px;
	margin-right:0px;
	position:relative;
	
}
.page_title .title_text
{
	position: absolute;
	top: 20px;
	left: 25px;
	width: 400px;
	padding: 0px;
	font-weight: normal;
	font-size: 90%;
	line-height:1.3em;
	color: #ffffff;
	font-family: Futura, "Lucida Grande", Arial, Helvetica;	
}

.page_title p {
color:#666666;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:80%;
line-height:130%;
margin:0px;
padding-bottom:10px;
padding:5px 20px 0px 30px;
}
/********************************

IMG HOLDER

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

.img_holder
{
	padding:0px 0px 0px 0px;
	margin:10px 0px 10px 0px;
	float:right;

}




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

QUOTE BOX

*********************************/
.quote_box_container
{
	padding-top:0px;
}

.quote_box_container p
{
	padding:15px 10px 20px 10px;
	margin:0px 0px 0px 0px;
}

.quote_box_container h1
{
	padding:5px 10px 0px 10px;
	margin:0px 0px 0px 0px;
}

.quote_box_container ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:80%;
	color:#FFFFFF;
	padding:5px 10px 20px 25px;
	margin:10px 0px 0px 0px;
}

.quote_box_container li
{
	padding-bottom:5px;
}

.quote_box_container .quote_box_top
{
	/*background:url("../../media/gif/quoteBox_top.gif") top right no-repeat;*/
	padding-top:8px;
	padding-bottom:0px;
	margin-bottom:0px;
}

.quote_box_container .quote_box_bottom
{
	/*background:url("../../media/gif/quoteBox_bottom.gif") bottom right no-repeat;*/
	padding-top:32px;
}

.quote_box_container .quote
{
	background-color:#99cccc;
	width:196px;
	margin:0px 0px 0px 0px;
}

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

forms

*********************************/
#verticalForm{
padding:5px 0px 0px 20px;
}
#verticalForm legend
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	
	 	
}  
  #verticalForm fieldset
{
	border: 1px solid #cccccc;
	display: block;
	/*width: 30em;*/
	/*margin: 0 0 .5em 0;*/
	/*padding: 0 .5em 0 .5em;
	margin:0px 10px 10px 0px;
	padding:10px 10px 10px 0px;*/
}


#verticalForm fieldset.radio
{
	width: 11.5em;
	margin: 1em 0 .5em 0;
}

#verticalForm fieldset.radio input
{
	clear: both;
	float: left;
	width: auto;
}

#verticalForm fieldset.radio label
{
	font-weight: normal;
}

#verticalForm input
{
	display: block;
	width: 20em;
}

#verticalForm input.safe_place
{
	display: block;
	width: 300px;
	height: 50px;
	float:left;

}

#verticalForm input.check_box
{
	
width: 1em;
}

#verticalForm input.submit_button
{
	
width: 8em;
}

#verticalForm label
{
	display: block;
	margin-bottom: .75em;
	
}

#verticalForm label.first
{
	padding-top: .5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #999999;
}

 .error
{
	padding-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ff0000;
}

#password{
	font-size: 8pt;
}

#submit{
	
	font-size: 8pt;
}

#username{
		font-size: 8pt;

}

#verticalForm select
{
	display: block;
}

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

MISC

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

.clear
{
	clear:both;
	height:1px; 
	width:100%;
	overflow:hidden;
}

.divider
{
	border-top:1px solid #D4D4D4;
}

.divider_dark
{
	border-top:1px solid #333;
	margin-left:15px;
	margin-right:5px;
}

.reg_logo_container
{
	padding:30px 0px 0px 10px;
}

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

FOOTER

*********************************/
.footer
{
	width:780px;
	height:50px;
	position:relative;
	overflow:hidden;
	background-color:#ffffff;
	padding:0px;
	margin:0px 0px 0px 0px;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#666666;
	border-top-width: thin;
	border-top-style: solid;
	
}

.footer p
{
	padding:0px 0px 0px 0px;
	line-height:80%;
	font-size:70%;
}

.footer .link_container 
{
	padding:25px 0px 0px 10px;
	margin:0px;
	color:#666666;
}

.footer .link_container a
{
	text-decoration:none;
	font-size:70%;
	color:#CCCCCC;
	margin:0px;
	padding:0px;
}


.footer .three_col_wide
{
	padding:0px;
}

.footer .one_col_wide img
{
	float:right;
	padding:10px 10px 0px 0px;
}

tr.header {background:#666666;  padding: 5px; width:500px; height:50px;}
tr.real_odd td {background:#D2E3EB;  padding: 5px; width:350px;}
tr.even td {background:#ffffff;  padding: 5px; width:350px;}






form {
	width:300px;
	margin:15px auto 10px 0px;
	}
label {
	display:block;
	font-weight:normal;
	}
textarea {
	width:250px;
	height:150px;
	}
.textInput {
	width:250px;
	}
/* Rules added when inserting checkboxes */
.chkRad {
	float: left;
	margin-bottom: 8px;
	margin-left: 0px;
}
.chkRad label {
	display:inline;
	}
.clearIt {
	clear:both;
	}
/*select { put this back in for form
	margin:5px 0 8px 30px;
	}*/
/* Add this style for warning messages */
.warning {
	font-weight:normal;
	color:#FF0000;
	}



INPUT.hintTextbox       { color: #888;width:130px; }
INPUT.hintTextboxActive { color: #000; width:130px;}