/************************************
 * LAYOUT
 ************************************/

	body {
		font-size: 62.5%;
		font-family: Verdana, Helvetica, Sans-Serif;
		background: url(../img/global/page-bg.png) top repeat-x;
		text-align: center;
	}

	#content-wrapper {
		width: 904px;
    padding-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		padding-top: 30px;
	}

	#content {
		width: 723px;
		float: left;
	}

	#content h2 {
		font-size: 2.2em;
		letter-spacing: -2px;
		word-spacing: -1px;
		color: #222E3C;
		text-transform: uppercase;
		padding: 0 10px 20px 10px;
	}


/************************************
 * HEADER
 ************************************/

	#header {
		height: 168px;
		width: 944px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		position: relative;
		background: url(../img/global/header-shadow.png) top left no-repeat;
		overflow: hidden;
	}

	#header #photo {
		position: absolute;
		top: 11px;
		left: 20px;
		width: 904px;
		height: 157px;
		background: url(../img/global/header-photo.jpg) top left no-repeat;
		z-index: 1;
	}

	#header h1 {
		position: absolute;
		top: 36px;
		left: 30px;
		z-index: 12;
	}

  #header h1 a {
		width: 160px;
		height: 80px;
		background: url(../img/global/logo.png) top left no-repeat;
  }

	#header #tag {
		position: absolute;
		top: 36px;
		left: 209px;
		width: 382px;
		z-index: 3;
	}

	#header #tag p {
		color: #FFF;
		font-size: 1.1em;
		line-height: 1.4em;
		padding: 8px 0 0 1px;
	}

	#header #tag span {
		color: #FFF;
		font-size: 1.9em;
		text-transform: uppercase;
		letter-spacing: -2px;
		word-spacing: -1px;
	}


/************************************
 * MENU
 ************************************/

	#menu {
		top: 0;
		left: 50%;
		z-index: 10;
		position: absolute;
     height: 186px;
     margin-left: -452px;
		width: 904px;
		text-align: center;
		xoverflow: hidden;
	}

	#menu a {
		display: block;
		text-decoration: none;
	}

	#menu ul.root {
		left: 109px;
		position: absolute;
		text-align: left;
     top: 136px;
     z-index: 9999;
	}

	#menu ul #quicklinks-open a {
		width: 121px;
		height: 18px;
		text-indent: -1000em;
		background: url(../img/global/form-button-quick-links.png) top left no-repeat;
		margin: 0 0 20px 30px;
	}

  #menu ul.root li  {
    float: left;
    margin-right: 1px;
    padding-top: 0px;
	}

  #menu-home { left: 111px; width: 75px; }
	#menu-passengers { left: 187px; width: 140px; }
	#menu-freight { left: 328px; width: 140px; }
	#menu-about-us { left: 469px; width: 140px; }
	#menu-faqs { left: 610px; width: 70px; margin-right: 0; }

  #menu ul.root a  {
		display: block;
		color: #FFF;
		font-size: 1.5em;
		padding: 8px 0 0;
		height: 42px;
		text-indent: -1000em;
	}

  #menu-home a { background: url(/img/homepage_redesign/sprite_en.png) no-repeat -700px -500px; }
	#menu-passengers a { background: url(/img/homepage_redesign/sprite_en.png) no-repeat -700px -600px; }
	#menu-freight a { background: url(/img/homepage_redesign/sprite_en.png) no-repeat -700px -700px; }
	#menu-about-us a { background: url(/img/homepage_redesign/sprite_en.png) no-repeat -700px -800px; }
	#menu-faqs a { background: url(/img/homepage_redesign/sprite_en.png) no-repeat -700px -900px; }

  #menu-home a:hover,
  #menu-home.active a  { background-position: -850px -500px; }

	#menu-passengers a:hover,
  #menu-passengers.active a  { background-position: -850px -600px; }

	#menu-freight a:hover,
  #menu-freight.active a  { background-position: -850px -700px; }

	#menu-about-us a:hover,
  #menu-about-us.active a  { background-position: -850px -800px; }

	#menu-faqs a:hover,
  #menu-faqs.active a  { background-position: -850px -900px; }

	#menu ul.root  ul  { background-color: #222E3C; }

	#menu-passengers ul li {	width: 140px; }
	#menu-freight ul li { width: 140px; }
	#menu-about-us ul { width: 140px; }
	#menu-faqs ul { width: 70px; }

	#menu ul.root ul a  {
		visibility: visible !important;
		border-top: 1px solid #36424E;
		font-size: 1.0em;
		line-height: 1.2em;
		padding: 4px 6px 5px 6px!important;
		background: none;
		height: auto;
		text-indent: 0;
	}

	#menu ul.root li ul li a:hover { background: url(../img/global/menu-item-bg.png) top repeat-x; }

	#menu ul.root #menu-passengers ul li a:hover { color: #CAA226; }
	#menu ul.root #menu-freight ul li a:hover { color: #C26FE5; }
	#menu ul.root #menu-about-us ul li a:hover { color: #1CB6D2; }
	#menu ul.root #menu-faqs ul li a:hover { color: #1CB6D2; }

  /*
	#menu #newsletter-open {
		display: block;
		position: absolute;
		text-indent: -1000em;
		width: 140px;
		height: 140px;
		top: 112px;
		left: 50%;
		margin-left: 332px;
		background: url(../img/global/newsletter-open-off.png) top left no-repeat;
		z-index: 200;
		cursor: pointer;
		opacity: 0.8;
	}

	#menu #newsletter-open:hover {
		opacity: 1.0;
	}

	#menu #newsletter {
		position: absolute;
		width: 332px;
		top: 172px;
		left: 50%;
		margin-left: 120px;
		background: url(../img/global/newsletter-bg.png);
		z-index: 100;
		text-align: left;
	}

	#menu #newsletter form {
		padding: 6px 10px 10px 10px;
	}

	#menu #newsletter form label {
		background: url(../img/global/newsletter-title-bg.gif) left no-repeat;
		padding-left: 18px;
		color: #FFF;
		font-size: 1.5em;
		text-transform: uppercase;
		letter-spacing: -2px;
		word-spacing: -1px;
	}

	#menu #newsletter form input {
		border: 1px solid #293543;
		background: #FFF url(../img/global/form-input-bg.png) top repeat-x;
		font-size: 1.1em;
		color: #375F5F;
		padding: 3px 4px 3px 4px;
		width: 120px;
		float: left;
	}

	#menu #newsletter form button {
		border: none;
		width: 68px;
		height: 21px;
		float: left;
		cursor: pointer;
		text-indent: -1000em;
		background: #293543 url(../img/global/newsletter-btn-off.png) left no-repeat;
	}

	#menu #newsletter form button:hover {
		background: #293543 url(../img/global/newsletter-btn-on.png) left no-repeat;
	}

	#menu #newsletter form button.sending {
		background: #293543 url(../img/global/newsletter-btn-loading.gif) center no-repeat;
	}

	#menu #newsletter form button:hover { color: #FFF; }
	#menu #newsletter form button:active { outline: none;	}

	#menu #newsletter form p {
		padding: 4px 0 4px 0;
		width: 200px;
		color: #FFF;
		font-size: 1.1em;
		line-height: 1.4em;
	}

	#menu #newsletter form strong {
		color: #E5E8EB;
		font-weight: normal;
		font-size: 1.1em;
		line-height: 1.6em;
	}

*/
/************************************
 * LEFT HAND NAVIGATION
 ************************************/

	#navigation {
		background: #FFF url(../img/global/navigation-bg.png) top repeat-y;
		margin-bottom: 30px;
		width: 180px;
		float: left;
	}

	#navigation div.top { height: 3px; background: url(../img/global/navigation-top-bg.png) top no-repeat; }
	#navigation div.bottom { height: 3px; background: url(../img/global/navigation-bottom-bg.png) bottom no-repeat; }

	#navigation a {
		display: block;
		text-decoration: none;
	}

	#navigation ul {
		margin: 0 6px 0 6px;
	}

	#navigation ul li a {
		color: #FFF;
		font-size: 1.5em;
		margin-top: 3px;
		height: 29px;
		background-position: top left;
		background-repeat: no-repeat;
		text-indent: -1000em;
	}

	#navigation ul li.passenger-port a { background-image: url(../img/global/navigation-passenger-port-bg.gif); }
	#navigation ul li.freight-port a { background-image: url(../img/global/navigation-freight-port-bg.gif); }
	#navigation ul li.portsmouth-port a { background-image: url(../img/global/navigation-portsmouth-port-bg.gif); }

	#navigation ul li ul {
		margin: 6px 0 0 0;
		padding-bottom: 5px;
		border-top: 1px solid #D1D1D1;
	}

	#navigation ul li ul li {
		width: 168px;
	}

	#navigation ul li ul li a {
		background: url(../img/global/navigation-item-bg.png) bottom repeat-x!important;
		color: #222E3E;
		border-bottom: 1px solid #D1D1D1;
		font-size: 1.1em;
		line-height: 1.3em;
		margin: 0;
		padding: 3px 6px 4px 6px!important;
		height: auto;
		text-indent: 0;
	}

	#navigation ul li ul li ul {
		margin-top: 0;
		border-bottom: 1px solid #D1D1D1;
		border-top: none;
		padding: 2px 0 0 0;
	}

	#navigation ul li ul li ul li a {
		background: none!important;
		height: auto;
		text-indent: 0;
		border: none;
		margin-left: 5px;
	}

	#navigation ul li.passenger-port ul a:hover { color: #CAA226; }
	#navigation ul li.freight-port ul a:hover { color: #C26FE5; }
	#navigation ul li.portsmouth-port ul a:hover { color: #1CB6D2; }

	#navigation ul li.passenger-port ul a.active { color: #CAA226; }
	#navigation ul li.freight-port ul a.active { color: #C26FE5; }
	#navigation ul li.portsmouth-port ul a.active { color: #1CB6D2; }


/************************************
 * BREADCRUMB TRAIL
 ************************************/

	#breadcrumb-trail {
		margin: 0 0 17px 0;
		background: #FFF url(../img/global/breadcrumb-trail-bg.png) top repeat-y;
	}

	#breadcrumb-trail div.top { height: 3px; background: url(../img/global/breadcrumb-trail-top-bg.png) top no-repeat; }
	#breadcrumb-trail div.bottom { height: 3px; background: url(../img/global/breadcrumb-trail-bottom-bg.png) bottom no-repeat; }

	#breadcrumb-trail ul {
		margin: 5px 12px 6px 12px;
	}

	#breadcrumb-trail ul li {
		display: inline;
		font-size: 1.1em;
		color: #0D5AA2;
		background: url(../img/global/breadcrumb-trail-item-seperator.png) 0 60% no-repeat;
		padding: 0 5px 0 13px;
	}

	#breadcrumb-trail ul li.first {
		background: none;
		padding-left: 0;
	}

	#breadcrumb-trail ul li a {
		color: #868686;
		text-decoration: none;
	}

	#breadcrumb-trail ul li a:hover {
		color: #0D5AA2;
		text-decoration: none;
	}


/************************************
 * FORMS
 ************************************/

	form legend {
		font-size: 1.2em;
		line-height: 1.6em;
		font-weight: bold;
		color: #262F36;
	}

	form fieldset {
		margin: 0 0 10px 0;
	}

	form .form-row {
		padding: 7px 0 0 0;
	}

	form .form-row label {
		float: left;
		width: 130px;
		text-align: right;
		padding-top: 2px;
		padding-right: 20px;
		font-size: 1.1em;
		line-height: 1.6em;
	}

	form .form-row label.error {
		background: url(../img/global/form-error-icon.gif) right no-repeat;
	}

	form em {
		color: #900;
	}

	form .form-row select {
		float: right;
		border: 1px solid #7F9DB9;
		font-size: 1.1em;
		color: #375F5F;
		padding: 1px 1px 1px 1px;
		margin-left: 3px;
		width: 180px;
	}

	form .form-row input {
		float: right;
		border: 1px solid #7F9DB9;
		font-size: 1.1em;
		color: #375F5F;
		padding: 3px 4px 3px 4px;
		width: 170px;
	}

	form select#NewsletterRegistrationDateOfBirthDay { width: 41px; }
	form select#NewsletterRegistrationDateOfBirthMonth { width: 80px; }
	form select#NewsletterRegistrationDateOfBirthYear { width: 53px; }

	form .checkbox .form-row {
		padding: 0;
	}

	form .checkbox input {
		float: left;
		width: 20px;
		border: none;
		text-align: left;
	}

	form .checkbox label {
		float: left;
		width: 140px;
		text-align: left;
		padding-right: 0;
	}

	form .checkbox label.wide {
		width: 300px;
		padding-right: 0;
	}


	form.module div.hr {
		background: #D1D1D1;
		height: 1px;
		margin: 10px 0 10px 0;
	}

	form ul.errors {
		font-size: 1.1em;
		line-height: 1.5em;
		color: #900;
		font-weight: bold;
		margin-left: 0!important;
	}

	form ul.errors li {
		padding-left: 0!important;
		background: none!important;
	}

	form button {
		height: 18px;
		width: 121px;
		border: none;
		cursor: pointer;
	}

	form button#register { background: url(../img/global/form-button-register.png) top left no-repeat; }

/************************************
 * QUICKLINKS
 ************************************/

 	#quicklinks {
 		width: 676px;
 		height: 447px;
 		background: url(../img/global/quicklinks-bg.png) top left no-repeat;
 		position: absolute;
 		left: 50%;
 		top: 180px;
 		margin-left: -338px;
 		z-index: 500;
 	}

 	#quicklinks-close {
 		position: absolute;
 		width: 27px;
 		height: 27px;
 		left: 50%;
 		top: 214px;
 		margin-left: 277px;
 		background: url(../img/global/quicklinks-close-bg.png) top left no-repeat;
 		z-index: 501;
 		cursor: pointer;
 	}

 	#quicklinks .content {
 		margin: 43px;
 		width: 590px;
 		height: 361px;
 		background: url(../img/global/quicklinks-content-bg.png);
 	}

 	#quicklinks .content ul {
 		width: 150px;
 		margin-left: 35px;
 		margin-top: 35px;
 		float: left;
 	}

	#quicklinks .content ul li {
		padding: 5px 0 5px 10px;
		background: url(../img/global/quicklinks-link-bg.gif) 0 1.0em no-repeat;
	}

	#quicklinks .content ul li.title {
		background-position: top left;
		background-repeat: no-repeat;
		text-indent: -1000em;
		margin-bottom: 10px;
	}

	#quicklinks .content ul li.passenger-port { background-image: url(../img/global/quicklinks-passenger-port-bg.png); }
	#quicklinks .content ul li.freight-port { background-image: url(../img/global/quicklinks-freight-port-bg.png); }
	#quicklinks .content ul li.portsmouth-port { background-image: url(../img/global/quicklinks-portsmouth-port-bg.png); }

	#quicklinks .content ul li a {
		color: #FFF;
		font-size: 1.1em;
		line-height: 1.2em;
		text-decoration: none;
	}

	#quicklinks .content ul li a:hover {
		color: #cba226;
	}


/************************************
 * FOOTER
 ************************************/

	#footer {
		margin: 0 0 50px 0;
		padding: 21px 0 15px 0;
		background: #FFF url(../img/global/footer-bg.jpg) top no-repeat;
		text-align: center;
	}

	#footer ul li {
		display: inline;
		background: url(../img/global/footer-item-seperator.png) left no-repeat;
		padding: 0 8px 0 11px;
	}

	#footer ul li.first { background: none; }

	#footer ul li a {
		color: #868686;
		text-decoration: none;
	}

	#footer ul li a:hover {
		color: #0D5AA2;
	}

	#footer p {
		margin-top: 10px;
		color: #C7C7C7;
	}

 /************************************
 * COMMOM
 ************************************/

  .replacement {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
  }