html {
	min-height: 100%; }
body {
	margin: 0;
	/* IE6 : white background only bacause footer doesn't appear to move to bottom */
	background: white url('../gfx/backgr_body.gif') repeat-y center top;
	color: black;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 67.5%;
	text-align: center;
	min-height: 100%; }

input {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif; }

body#toms.order {
	background: white url('../gfx/backgr_order.gif') repeat-y center top; }

/* REMOVE ALL DEFAULTS E.G. MARGINS *********************/
img { border: 0; }
hr { display: none; }
p, form, input, textarea, ul, li, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; font-size: 100%; }
ul, li { list-style-type: none; }
h1 span, h2 span { display: none; }
hr { display: none; }
.break { clear: both; }
table { border-collapse: collapse; }
a { outline: none; }

/* CONTAINER ********************************************/
#main {
	position: relative;
	text-align: left;
	width: 780px;
	margin: 0 auto;
	border-top: 8px solid #336699;
	min-height: 100%; }

	/* HEADER ***************************************************/
	#header h1 span, #header h2 span {
		display: none; }

	/* WEBSITE HEADER *******************************************/
	body#website #header { position: relative; height: 108px; }
		body#website #header h1 {
			position: absolute;
			left: 0;
			top: 0;
			width: 256px;
			height: 108px;
			background: white url('../gfx/bft_logo.gif') no-repeat;
			padding: 0; }
		body#website #header h2 {
			position: absolute;
			left: 256px;
			top: 0;
			width: 523px;
			height: 108px;
			background: white url('../gfx/header_backgr.jpg') no-repeat;
			border-left: 1px solid #B8C8D7;
			padding: 0; }

	/* TOMS HEADER **********************************************/
	body#toms #header { position: relative; height: 102px; }
		body#toms #header h1 {
			float: left;
			width: 256px;
			height: 78px;
			background: white url('../gfx/toms_logo.gif') no-repeat 0 16px;
			padding: 0; }
		body#toms #header h2 {
			float: left;
			width: 523px;
			height: 78px;
			background: white url('../gfx/header_backgr.jpg') no-repeat;
			border-left: 1px solid #B8C8D7;
			padding: 0; }
		body#toms #userinfo {
			width: 780px;
			border-bottom: 8px solid #369;
			background-color: #369;
			color: #96b1cd; }
			body#toms #userinfo p {
				padding: 0 10px; }
			body#toms #userinfo a {
				color: white;
				text-decoration: none; }
				body#toms #userinfo a:hover {
					color: #96b1cd; }
				body#toms #userinfo a.logout {
					position: absolute;
					right: 10px;
					top: 0; }

	/* DIVIDER ******************************************/
	#divider { position: relative; }
		ul#breadcrumbs {
			display: block;
			float: left;
			width: 232px;
			height: 16px;
			padding: 7px 12px;
			color: #888;
			background: #E4E4E4 ;
			text-align: left;
			border-bottom: 1px solid #B8C8D7 ;}
			ul#breadcrumbs li {
				display: inline;
				padding-right: 3px; }
			ul#breadcrumbs a {
				color: #369;
				text-decoration: none; }
				ul#breadcrumbs a:hover {
					color: #777; }
/*				ul#breadcrumbs li a.clientLogin img {
					padding-right: 8px;	}*/
				ul#breadcrumbs li a.clientLogin {
					display: block;
					float: left;
					width: 214px;
					margin: -7px -12px;
					padding: 7px 12px 7px 30px;
					/* different background position in default_ie.css */
					background: url('../gfx/icon_secure.gif') no-repeat 13px 9px;
					color: #727272;
					text-decoration: none; }
					ul#breadcrumbs a.clientLogin:hover {
						color: #272727;
						background-color: #ddd; }
		ul#navigation {
			height: auto;
			float: left;
			width: 510px;
			background-color: #336699;
			padding: 7px 0 7px 13px;
			margin: 0;
			border-bottom: 1px solid #7c9cb9;
			border-left: 1px solid #B8C8D7;	}
			ul#navigation li { display: inline; }
			ul#navigation li a {
				padding: 7px 1.4em;
				color: white;
				text-decoration: none; }
			ul#navigation li a:hover, ul#navigation li a.active { color: #FFF; background: #205284; }

	/* CONTENT (LEFT) ************************************/
	#sideBar {
		position: relative;
		float: left;
		width: 256px;
		border-bottom: 1px solid #B8C8D7; }
		#sideBar a {
			color: #369;
			text-decoration: none; }
			#sideBar a:hover {
				color: #999; }
		#sideBar h3 {
			font-size: 140%;
			font-style:italic;
			font-weight: bold;
			color: #336699;
			padding: 5px 10px 0 10px;
			margin: 10px 0; }
		#sideBar h4 {
			font-size: 120%;
			font-style:italic;
			font-weight: bold;
			color: #336699;
			position: relative;
			border-top: 1px solid #B8C8D7;
			padding: 10px 10px 0 10px;
			margin: 15px 0; }
		body#toms #sideBar h4 {
			margin: 0;
			background: #b8c8d7;
			padding: 7px 10px;
			border-top: 1px solid #90aac4;
			border-bottom: 1px solid #90aac4; }
		#sideBar form#login {
			display: none;
			background-color: #ddd;
			padding: 15px 20px;
			border-bottom: 1px solid #b8c8d7; }
			#sideBar form#login label {
				display: block;
				float: left;
				clear: left;
				width: 70px;
				padding: 3px 0 3px 10px; }
			#sideBar form#login input.username, #sideBar form#login input.password {
				width: 109px;
				padding: 1px 2px;
				margin: 2px 0;
				border: 1px solid #b8c8d7; }
			#sideBar form#login input.queryBlurred {
				width: 122px;
				padding: 0 2px;
				color: #aaa;
				border: 1px solid #b8c8d7; }
			#sideBar form#login input.button {
				width: 113px;
				background: #369;
				border: 1px solid #369;
				color: #ffff6f;
				cursor: pointer;
				margin: 4px 0 4px 81px; }
				#sideBar form#login input.button:hover {
					cursor: pointer;
					border: 1px solid #ffff6f; }
		#sideBar form#search {
			background-color: #ddd;
			padding: 15px 20px; }
			#sideBar form#search img {
				vertical-align: middle;
				padding: 0 0 4px 3px;
				cursor: help; }
			#sideBar form#search input.query {
				width: 122px;
				padding: 1px 2px;
				border: 1px solid #b8c8d7; }
			#sideBar form#search input.queryBlurred {
				width: 122px;
				padding: 1px 2px;
				color: #aaa;
				border: 1px solid #b8c8d7; }
			#sideBar form#search input.button {
				width: 50px;
				background: #369;
				border: 1px solid #b8c8d7;
				color: #ffff6f;
				cursor: pointer; }
				#sideBar form#search input.button:hover {
					cursor: pointer;
					border: 1px solid #ffff6f; }
		#sideBar table { width: 96%; }
			#sideBar table th { color: #336699; width: 12em; }
			#sideBar table td {
				width: 6em;
				font-weight: normal;
				text-align: right;
				padding-right: 0px; }
				#sideBar table td.unit {
					color: #aaa; }
			table.waterStatus th {
				padding-left: 30px;
				background: url('../gfx/icon_pitcher.gif') no-repeat 10px 4px; }
			table.waterStatus span {
				display: block;
				float: left;
				overflow: hidden;
				margin-top: 4px;
				height: 6px;
				width: 6px;
				border: 1px solid gray; }
				table.waterStatus span.legendBasel { background-color: #103d6b; }
				table.waterStatus span.legendKeulen { background-color: #c4c4c4; }
				table.waterStatus span.legendKaub { background-color: #c99d93; }
			table.freightRates span {
				display: block;
				float: left;
				overflow: hidden;
				margin-top: 4px;
				height: 6px;
				width: 6px;
				border: 1px solid gray; }
				table.freightRates span.legendStrasburg { background-color: #c99d93; }
				table.freightRates span.legendBasel { background-color: #103d6b; }
				table.freightRates span.legendKeulen { background-color: #c4c4c4; }
			table.freightRates th {
				padding-left: 30px;
				background: url('../gfx/icon_freigh.gif') no-repeat 10px 4px; }
			table.bunkerPrices {
				position: relative;
				border-top: 1px solid #B8C8D7;
				padding: 10px 10px 0 10px;
				margin-top: 10px; }
				table.bunkerPrices th {
					font-size: 120%;
					font-style: italic;
					font-weight: bold;
					color: #369;
					padding: 10px; }
			#sideBar table.anchors th {
				padding-left: 30px;
				background: url('../gfx/icon_anchor.gif') no-repeat 10px 4px; }
			#sideBar table.anchors td {
				text-align: left;
				padding-left: 30px;
				color: #999; }
			#sideBar .bargePlanning span { display: block; width: 216px; }
				#sideBar .bargePlanning span {
					padding: 3px 10px 3px 30px;
					background: url('../gfx/icon_paper.gif') no-repeat 10px 4px; }
				#sideBar bargePlanning span {
					text-align: left;
					padding: 0 10px 3px 30px;
					color: #999; }
				#sideBar #bargePlanning.active {
					color: #333;
					background: #e2e3e6 url('../gfx/backgr_bargeplanning_active.gif') repeat-x left bottom; }
				#sideBar a #bargePlanning.active {
					cursor: pointer; }
#sideBar span.tip {
			display: block;
			font-size: 90%;
			color: #808e9b;
			padding: 4px;
			text-align: center;
			background: #e4e4e4 url('../gfx/icon_lightbulb.gif') no-repeat 12px 4px;
			border-top: 1px solid #b8c8d7;
			margin-top: 8px; }

	/* CONTENT *******************************************/
	#content {
		position: relative;
		float: left;
		border-left: 1px solid #B8C8D7;
		width: 523px; }
		#content h3 {
			font-size: 140%;
			font-style:italic;
			font-weight: bold;
			padding: 15px 30px;
			color: #336699; }
		#content h4 {
			font-size: 130%;
			font-style:italic;
			font-weight: bold;
			padding: 5px 30px 5px 30px;
			border-bottom: 1px solid #B8C8D7; }
		#content h3 a.linkBack { position: absolute; right: 30px; top: 20px; font-size: 80%; }
		#content p, #content table { padding: 10px 30px 4px 30px; margin-left: 0px; }
		#content address { padding: 0 30px 4px 0; margin-left: 0px; font-style: normal; }
		#content q {
			padding: 7px 0px;
			margin: 0;
			font-style: italic;
			font-size: 110%; }
		#content a { color: #336699; text-decoration: none; }
			#content a:hover { color: #B8C8D7; text-decoration: none; }
		#content .blueArea {
			background: #6087AE;
			color: #fff;
			padding-bottom: 24px;
			float:left;
			width: 303px;
			height: 141px; }
			#content .blueArea p {
				position: absolute;
				top: 40px;
				left: 0;
				width: 230px; }
		#content .blueArea h3 { color: #fff; }
		#content img.waterways {
			float: right;
			background-color: #6087ae;
			border-bottom: 1px solid #c3d0dc; }
		#content .column {
			position: relative;
			float: left;
			width: auto;
			height: 204px;
			background: #E7EAED;
			border-bottom: 1px solid #B8C8D7; }
			#content #column1.column {
				width: 303px;
				height: 235px; }
			#content .column h3 {
				background: #fff;
				font-size: 120%;
				color: #336699;
				padding: 8px 30px;
				border-bottom: 1px solid #C3D0DC;
				margin-bottom: 10px; }
			#content #flashcontent {
				float: right;
				background: #e7eaed;
				height: 400px;
				border-bottom: 1px solid #C3D0DC; }
			#content .column ul li { padding: 2px 30px; color: #336699; }
			#content .column#column1 ul { padding: 5px 0; }
			#content .column#column1 ul li {
				padding: 4px 10px 4px 50px;
				color: #336699;
				background: url('../gfx/bullet_plus_blue.gif') no-repeat 30px 7px; }
				#content .column#column1 ul li em {
					font-style: normal;
					color: orange; }

			/* Text algemeen *****************************/
			#content .text {
				background: #e7eaed;
				color: #555;
				border-top: 1px solid #C3D0DC;
				border-bottom: 1px solid #C3D0DC;
				min-height: 349px; }
				#content .text h4 {
					color: #336699;
					border: none;
					padding: 10px 10px 0 30px;
					margin: 0; }
				#content .text table {
					border-collapse: collapse;
					padding: 0;
					margin-left: 30px; }
					#content .text table.documents {
						width: 454px; }
						#content .text table.documents th {
							padding: 15px 20px 5px 0;
							border-bottom: 1px solid #a1b7ce; }
						#content .text table.documents td {
							padding: 5px 20px 5px 0;
							vertical-align: middle;
							border-bottom: 1px solid #c3d0dc; }
							#content .text table.documents td img {
								vertical-align: middle; }

				/* Text Certificates ******************************/
				#content .text.certificate {
					text-align: center;
					padding: 20px; }

			/* Fleet *************************************/
			.bargeName {
				text-transform: uppercase; /* barge name should always be uppercase */
			}
			.fleetBarges {
				width: 500px;
				padding: 10px 0 0 22px;
				background: #E7EAED;
				border-top: 1px solid #C3D0DC;
				border-bottom: 1px solid #C3D0DC; }
				.fleetBarges a {
					display: block;
					float: left;
					width: 78px;
					height: 95px;
					padding: 5px 2px;
					text-align: center;
					color: #336699; }
				.fleetBarges a:hover {
					background: #336699;
					color: white; }
			#bargeSummary { padding: 10px 15px; color: white; }
				#bargeSummary img {
					float: left;
					width: 140px;
					height: 105px;
					padding: 5px 30px 5px 15px; }
				#bargeSummary div.float { float: left; width: 295px; }
				#bargeSummary h4 {
					font-size: 150%;
					padding: 5px 0; }
				#bargeSummary ul li {
					padding: 8px 0px 0;
					color: #B8C8D7;
					font-size: 110%;
					font-style: italic; }
				#bargeSummary ul li span { color: white; font-style: normal; }
			#bargeSummary.blueArea {
					width: 493px;
					height: auto;
					margin-bottom: 20px; }
			#bargeDetails { padding: 15px; background: #E7EAED; }
				#bargeDetails a { padding-right: 15px; }
				#bargeDetails table {
					float: left;
					width: 225px;
					margin: 0 0 0 15px;
					border: 1px solid #B8C8D7;
					border-collapse: collapse; }
				#bargeDetails table th {
					font-size: 110%;
					color: #336699;
					background: #B8C8D7;
					border-top: 1px solid #D1DDE9;
					padding: 4px; }
				#bargeDetails table td {
					border-top: 1px solid #D1DDE9;
					padding: 4px;
					background: white; }
				#bargeDetails table#draftTable {
					margin-left: 20px; }
				#bargeDetails table tr.even { }

				/* Dashboard *************************/
				#content #dashboard {
					background: #e7eaed;
					color: #555;
					border-top: 1px solid #C3D0DC;
					border-bottom: 1px solid #C3D0DC;
					min-height: 313px; }
					#content #dashboard .summary {
						position: relative;
						min-height: 120px;
						clear: both;
						background: #e7eaed; }
						/* changes background when hovered */
						#content #dashboard .summary.active {
							background: #e7eaed url('../gfx/backgr_summary_active.gif') repeat-x left bottom;
							cursor: pointer; }
						#content #dashboard .summary h4 {
							background-color: #369;
							color: #ff6;
							font-style: normal;
							font-size: 100%;
							font-weight: bold;
							padding: 8px 13px 8px 30px; }
							#content #dashboard .summary.active h4 {
								background: #369 url('../gfx/backgr_dashboard_orderheader.gif') repeat-x center bottom; }
							#content #dashboard .summary h4 a, #content #dashboard .summary h4 a:hover {
								color: #ff6; }
							#content #dashboard .summary h4 em {
								float: right;
								font-weight: normal;
								font-style: normal;
								font-size: 95%; }
						#content #dashboard .summary img {
							float: left;
							margin: 18px 20px;
							padding: 2px;
							border: 1px solid #aabdd0; }
						#content #dashboard .summary table {
							width: 154px;
							padding: 0;
							overflow: hidden;
							float: left;
							margin: 10px 0;
							position: relative; }
							#content #dashboard .summary table th {
								color: #8b8c8e;
								font-weight: normal;
								padding: 2px 0;
								width: 46px; }
						#content #dashboard .summary ul {
							margin: 10px 0;
							float: left; }
							#content #dashboard .summary ul li {
								padding: 2px 0 2px 14px; }
								#content #dashboard .summary ul li strong {
									font-weight: normal;
									font-size: 85%;
									color: #8b8c8e; }
								#content #dashboard .summary ul li.fax {
									background: url('../gfx/file_fax.gif') no-repeat 0 3px; }

				/* Order history *************************/
				#content h4.monthHeader {
					background-color: #369;
					color: #ffff5d;
					font-size: 115%;
					font-style: normal;
					padding: 8px 4px 8px 30px;
				}
				#content ul#orderHistory {}
					#content ul#orderHistory li {
						display: block;
						background: #e7eaed;
						border-bottom: 1px solid #c6d2dd;
						clear: left;
						padding: .5em 4px 2.3em 30px; }
						#content ul#orderHistory li.active {
							background: #e7eaed url('../gfx/backgr_history_orderlist.gif') repeat-x left bottom;
							cursor: pointer; }
							#content ul#orderHistory li.active a, #content ul#orderHistory li.active a:hover {
								color: #369; }
						#content ul#orderHistory li.load, #content ul#orderHistory li.discharge {
							background: url('../gfx/file_fax_small.gif') no-repeat 0 6px;
							color: #aaa;
							float: left;
							border: none;
							clear: none;
							height: auto;
							padding: 3px 0 0 12px;
							margin-right: 7px; }
						#content ul#orderHistory li strong {
							display: block;
							float: left;
							width: 100px;
							height: 3.5em; }

				/* profile *************************/
				#content h4.profileHeader {
					background-color: #369;
					color: #ffff5d;
					font-size: 115%;
					font-style: normal;
					padding: 8px 4px 8px 30px; }
				#content table.profile {
					width: 523px; }
					#content table.profile th {
						width: 160px;
						padding: 4px 0 4px 30px;
						border-bottom: 1px solid #dae3ed;
						color: #999; }
					#content table.profile td {
						padding: 4px 0 4px 0;
						border-bottom: 1px solid #dae3ed; }
					#content span.notavailable {
							color :gray; }

	/* ORDER ***************************************************/
	#order {
		/*background: white url('../gfx/backgr_order.gif') repeat-y center top;
		height: 500px; */}
		#order h2 {
			position: relative;
			color: #369;
			background: white;
			padding: 20px;
			font-size: 140%;
			font-style: italic;	}

	/* ORDER: highlights ***************************************/
	#main #highlights {
		background: #7294b6 url('../gfx/backgr_highlights.gif') repeat-y center top;
		color: white; }
		#main #highlights #orderInfo {
			float: left;
			width: 256px;
			background: #688db2; }
		#main #highlights #freightInfo {
			float: left;
			width: 267px;
			background-color: #7294b6; }
		#main #highlights #locationInfo {
			float: left;
			width: 255px;
			background-color: #7294b6;
			border-left: 1px solid #678cb1; }
		#main #highlights h3 {
			background: #718fae;
			color: #ffef54;
			padding: 5px 20px;
			border-bottom: 1px solid #5f86ad;
			font-size: 110%; }
			#main #highlights #orderInfo h3 {
				background: #6385a8; }
		#main #highlights table {
			margin: 5px 20px; }
			#main #highlights table th, #main #highlights table td {
				vertical-align: top; }
			#main #highlights table th {
				width: 58px;
				color: #a1b88d;
				font-size: 95%; }
		#main #highlights a {
			color: #ffef54;
			text-decoration: none; }
			#main #highlights a:hover {
				color: #369; }

	/* ORDER: columns 'locations', 'progress report', 'communication' ******/

	#orderColumns table th { color: #336699; width: 12em; font-weight: normal; }
	#orderColumns table td { width: 4em; font-weight: normal; text-align: right; }
	#orderColumns h4 {
		background: #369;
		padding: 4px 20px;
		color: white; }
	#orderColumns h5 {
		color: #369;
		font-weight: bold;
		font-style: italic;
		padding: 10px 20px; }
	#orderColumns #locations {
		float: left;
		width: 256px;
		border-right: 1px solid #d0d9e2; }
		#orderColumns #locations ul li {
			clear: left;
			width: 216px;
			padding: 4px 20px 4px 20px;
			background: url(../gfx/icon_anchor.gif) no-repeat 4px 6px;
			border-bottom: 1px solid #d0d9e2; }
			#orderColumns #locations ul li em {
				display: block;
				color: #aaa; }
		#orderColumns #locations a {
			color: #369;
			text-decoration: none; }
			#orderColumns #locations a:hover {
				color: #999; }
	#orderColumns #progress {
		float: left;
		width: 266px;
		border-right: 1px solid #c4cfdc; }
		#orderColumns #progress table {
			width: 265px; }
			#orderColumns #progress table td, #orderColumns #progress table th {
				vertical-align: top;
				text-align: left;
				width: 126px;
				padding: 6px 0;
				border-bottom: 1px solid #d0d9e2; }
			#orderColumns #progress table th {
				color: #aaa;
				width: 130px;
				padding-left: 20px;
				background: url('../gfx/icon_clock.gif') no-repeat 5px 9px; }
	#orderColumns #documents {
		float: left;
		width: 256px; }
		#orderColumns #documents ul li {
			color: #555;
			border-bottom: 1px solid #b1c2d4; }
			#orderColumns #documents ul li a {
				display: block;
				text-decoration: none;
				color: #369;
				background: url('../gfx/file_fax_small.gif') no-repeat 6px 7px;
				padding: 5px 20px; }
			#orderColumns #documents ul li:hover {
				background: #e7eaed url('../gfx/backgr_order_communication.gif') repeat-x left bottom; }
			#orderColumns #documents ul li em {
				font-style: normal;
				color: #aaa; }

	/* FOOTER *******************************************/
	#footer {
		position: relative;
		width: 780px;
		height: 35px;
		background: white;
		border-top: 1px solid #C1D1E0;
		color: #7f95ac;
		/* IE6 : adds bottom border and overflowed height */
		/* negative margin to prevent double borders when #content stretches to footer */
		margin: -1px auto 0 auto;}
		#footer a {
			color: #93acc6;
			text-decoration: none; }
			#footer a:hover {
				color: #336699; }
		#footer #footerLeft {
			float: left;
			position: relative;
			color: #ABACAF;
			width: 236px;
			border-right: 1px solid #D1DDE9;
			padding: 10px;}
			#footer #footerLeft span {
				position: absolute;
				right: 15px; }
		#footer ul#footerRight {
				margin: 10px 30px 0 30px; }
			#footer ul#footerRight li {
				display: inline;
				margin: 10px 10px 0 26px; }

	/* DUMMIES *********************************************/
	span.dummy {display: block;}
	span.dummy.barge {
		background: url('../gfx/dummy_barge.gif') no-repeat 28px 15px;
		width: 116px;
		height: 90px;
		float: left; }
	/* AUTHENTICATION block *********************************************/
	span.error {
		color: red;
		display: block;
  		background: #e5c7aa url('../gfx/exclamation.png') no-repeat 4px 5px;
		border: 1px solid #ff7e00;
		margin: 6px 20px 0 6px;
  		padding: 5px 0 5px 25px;
	}