@charset "UTF-8";
/* CSS Document */

/*****  Stylesheet for The Travel Gateway  *****/

/********** note on  TTG colours: ORANGE-#f7941d (rolloverORANGE-#fdba58)  BLUE-#286fb7 (rolloverBLUE-#7bafde) ******/



/*********** Reset CSS  from "http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/" ***********/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; 
	vertical-align: baseline; background: transparent; list-style-type:none;  }

* {margin:0;padding:0;} 
html {	height: 100%; }   /****** this helps with the 'Sticky Footer' ******/
/******see http://www.cssstickyfooter.com/using-sticky-footer-code.html for info on sticky footer********/

ol, ul {	list-style: none; }
blockquote, q {	quotes: none;  }
 
/* remember to define focus styles! */
:focus {	outline: 0; }

 /* remember to highlight inserts somehow! */
ins {	text-decoration: none; }
del {	text-decoration: line-through; }
 
/* tables still need 'cellspacing="0"' in the markup */
table {	border-spacing: 0; }
table img { display:block;   }
 
/*********** END of Reset CSS   ***********/
  
Body {	font: normal 12px/18px Arial, sans-serif;
		letter-spacing: 0.25px;
		text-align : center;
		background: #e3edf9 url(images/TTG-BGnew1500.jpg) no-repeat fixed center bottom;
		height: 100%;
		}

html {	overflow-y: scroll; /****** forces scroll-bar to always appear in Firefox, so no horizontal shift occurs*****/
		height: 100%;
		} 

body #divWrapper { height: auto; min-height: 100%;}

/******************************************************* end of body style and reset *****/

/******************************************************* bread crumbs style *****/
.BreadCrumb {	padding-left: 20px; font-size: 9px; color: #808080; font-weight: normal; }

#crumbs { border:0px;  line-height: 12px; }
#crumbs li {	float:left; color:#666666; padding: 0px 6px 0px 0px;  }                             
#crumbs li a:link, #crumbs li a:visited { color:#666666; font-weight: normal; font-size: 9px; line-height: 12px; text-decoration:none; }             
#crumbs li a:hover, #crumbs li a:focus { color:#ca252c; font-weight: normal;  font-size: 9px; } 

/**********************search bar and breadcrumb divs *****/        
#divSearchHold {
				float:left;
				width: 918px;
				margin: 0px ;
				padding: 10px 20px;
				text-align:right;
				display:inline;
				background-color: #ffffff;
                }                                                             

.searchbox {    font: normal 11px/15px Geneva, Arial, Helvetica, sans-serif; padding: 0px; height: 15px; }

.searchbutton {	font-family: bold 10px Geneva, Arial, Helvetica, sans-serif; color: #ffffff;
				border:none;
				background: url(images/Gsearch_button.jpg) no-repeat 0 0;
				height: 20px;
				width:73px;
				}

.searchbutton:hover { background-position: 0 -30px; }
.searchbutton span	{ display: none; }

#divBreadcrumb {	float: left;
					width:600px;
					margin:0px; padding:0px ;
					text-align:left;
					}

#divsearchbox {	float: right; margin:0px ; padding:0px ; text-align:left; }
       
/*************************************generic links  *****/
a:link, a:visited {	font: bold 12px Arial, Helvetica, sans-serif; color: #286fb7; text-decoration: none; }
a:hover { font: bold 12px Arial, Helvetica, sans-serif; color: #666666; text-decoration: underline; }

/************************ Class for lighter font links style eg on webRes Glass Buttons *****/
.lightLink:link, .lightLink:visited   {	font: normal 11px Arial, Helvetica, sans-serif; color: #286fb7; text-decoration: none; }
.lightLink:hover {	font: normal 11px Arial, Helvetica, sans-serif; color: #7bafde; text-decoration: none; }


/********************************************* navigation starts here *****/
 /******************************* tabs - top-level navigation *****/
#navigation {		font: bold 12px/15px Arial, Helvetica, sans-serif; text-align: left;
					float:right;
					width:100%;
					display: inline;
  				    }

#navigation ul {	list-style:none; float:right; }

#navigation li {	float:left;
                	background: url(images/left_both.jpg) no-repeat left top;
                	padding:0px 3px 0 10px;
               	 	border-bottom: none;
                	list-style:none;
    				}
#navigation a { 	float:left;
					display:block;
					width: 1px;
					background: url(images/right_both.jpg) no-repeat right top;
					padding:5px 10px 7px 0px;
					text-decoration:none;
					color:#bad5f0;
					}

#navigation ul a { width:auto; }  /* Commented Backslash Hack hides rule from IE5-Mac \*/
#navigation a {	float:none; }  /* End IE5-Mac hack */
#navigation a:hover { color:#ffffff; } 
#navigation li:hover, #navigation li:hover a { background-position:0% -150px; }
#navigation li:hover a { background-position:100% -150px; }


/***these give the page id's to keep current page tab highlighted - check they match with IncMenuHeader.htm *****/

#index #nav-index,
#aboutUs #nav-aboutUs,
#TTGcompanies #nav-TTGcompanies,
#ferryOperators #nav-ferryOperators,
#TTGpartners #nav-TTGpartners	{	background-position: 0 -150px;
									border-width: 0;
									}
 
#index #nav-index a,
#aboutUs #nav-aboutUs a,
#TTGcompanies #nav-TTGcompanies a,
#ferryOperators #nav-ferryOperators a,
#TTGpartners #nav-TTGpartners a		{	background-position:100% -150px;
										padding-bottom:7px;
										color:#ffffff; }          /******************* colour for selected state *****/


						
/********** sub nav holding divs etc************/							
						
#divSUBNavHold {	float:right;
					width:938px;
					height:22px;
					margin-left: auto; margin-right: auto;
					padding: 0px 20px 0px 0px;
					text-align:right;
					background-color: #286fb7;
              }
.SubNavCurrent {  color:#ffffff }
			  
			  
/********************* this is the sub-navigation ************************/
#vdividermenu ul{ padding: 0px 0px 0px 0px; float: right; font: bold 80%; }

* html #vdividermenu ul{ width: 99%; }/*IE only rule, reduce menu width*/
 
#vdividermenu ul li{ display: inline;
						white-space:nowrap; /* this keeps the words together on the same line */
 }

#vdividermenu ul li a {	float: right; line-height:22px;
						color: #b2deeb;
						padding: 1px 12px;
						text-decoration: none;
						background: transparent url(images/vertical.gif) center left no-repeat;
						}
 
#vdividermenu ul li a:visited { color: #b2deeb; }
#vdividermenu ul li a:hover{ color: #286fb7; background-color: #7bafde; }

/***************** end of sub navigation *****************/
	

#navcontainer	{	text-align : center; width: 100%; 	}
#navcontainer ul {	border : 0 none; list-style-type : none; text-align: center; }
#navcontainer li {	display : block; float: left; text-align : center; }
#navcontainer  a {	border: medium none; color: #4874a4; display: block; height: 26px; text-align: center; text-decoration: none; }

					
#navcontainer a:hover, #navcontainer a:active {	color : #898989; }

 
.Footercenter {	border-left: medium none; border-right: 1px medium;
				margin: 0px; padding: 0px 20px;
				display: inline;
				background-color: #d2e3f5;
				height: 26px;
				text-align: center;
				text-decoration: none;
				}


/************************************************************************* navigation end *****/

/****************************************** main text styles - start *****/
p {	font-size: 12px;
    color:#333333;
    margin-bottom: 8px;
	display: block;
	text-align:justify;
	}

.intro {	font-size: 15px; color:#666666; }

.introLink:link, .introLink:visited { font-size: 15px; color:#666666; text-decoration: none; }
.introLink:hover { font-size: 15px; color:#333333; text-decoration: underline; }
  
.copyright {	clear:both;
				font-size: 9px;
                color:#888888;
				background-color:#FFFFFF;
				width:958px;
				margin-right:auto; margin-left:auto;
				text-align:center;
				}

h1 {	font: bold 17px/17px Arial, Helvetica, sans-serif; color: #f7941d;
		text-transform: uppercase;
   		margin-bottom: 8px;
		display: block;
		}
h1 strong {	font-weight: normal; }

/******* this is an 'adjacent sibling' tag, that says 'when a <p> tag is followed by a <h1> tag, the <h1> tag will have these attributes, overriding the standard <h1> attributes' *****/
p+h1 {	margin: 15px 0px 0px 0px; padding: 0px 0px; }

h2 {	font: normal 17px/15px Arial, Helvetica, sans-serif; color: #f7941d; 
		display: block;
		margin: 15px 0px 3px 0px; padding: 0px 0px; }

/******* this is an 'adjacent sibling' tag, that says 'when a <h1> tag is followed by a <h2> tag, the <h2> tag will have these attributes, overriding the standard <h2> attributes' *****/
h1+h2 {	margin: 4px 0px 4px 0px; padding: 0px 0px; }
 
.h2:link, .h2:visited {	font: normal 17px Arial, Helvetica, sans-serif; color: #f7941d; text-decoration: none; }
.h2:hover {	font: normal 17px Arial, Helvetica, sans-serif; color: #fdba58; text-decoration: none; }

h3 {	font: normal bold 15px/15px Arial, Helvetica, sans-serif; color: #444; 
 		margin: 12px 0px 2px 0px; padding: 0px;
		display: block;
		}
/******* this is an 'adjacent sibling' tag, that says 'when a <h2> tag is followed by a <h3> tag, the <h3> tag will have these attributes, overriding the standard <h3> attributes' *****/
h2+h3 {	padding: 0px; margin: 5px 0px 2px 0px; }
 
h4 {	font: normal 13px Arial, Helvetica, sans-serif; color: #286fb7; 
		margin: 0px; padding: 0px;
		display: inline;
		}

h5 {	font: bold 23px/23px Arial, Helvetica, sans-serif; color: #f7941d; 
		text-align:center;
		margin: 7px 0px; padding: 0px ;
		display:block;
		}
		
.h5:link, .h5:visited  { font: bold 23px/23px Arial, Helvetica, sans-serif; color: #f7941d; margin: 12px 0px; padding: 0px; display:inline-block; text-decoration: none;  }
.h5:hover {	font: bold 23px/23px Arial, Helvetica, sans-serif; color: #fdba58; margin: 12px 0px; padding: 0px; display:inline-block; text-decoration: none; }

/******* this is the highlight colour for h5, on the html page you just use the 'strong' tag, and because it's within this h5 tag, it will pick up the h5 attributes and add this colour *****/
h5 strong {	font: bold 23px Arial, Helvetica, sans-serif; color: #fdba58; }
 
.BtmMenu A:link, .BtmMenu A:visited  { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #286fb7; text-decoration: none; }
.BtmMenu A:hover { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #0d528f; text-decoration: none; }

 
 /******* 'page' is the link style for the Ferry Operators page, nicked from AFerry's ContentPage.css stylesheet *****/
A.page:link, A.page:visited {	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #286fb7; text-decoration: none; }
A.page:hover {	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #f7941d; text-decoration: underline; }
/****end of 'page' style ***/


/********************* LEFT nav text styles *****/

.leftNavHead {  font: normal 9px/9px Arial, Helvetica, sans-serif; color: #286fb7; letter-spacing: 0.5px; text-align: left; letter-spacing: 0.5px;
				text-decoration:none;
				display: block;
				margin: 0px;
				}

.leftNavHead a:link, .leftNavHead a:visited  {	font: normal 9px/9px Arial, Helvetica, sans-serif; color: #286fb7; text-decoration:none; }
.leftNavHead a:hover {	font: normal 9px/9px Arial, Helvetica, sans-serif; color: #7bafde; text-decoration:none; }

.LeftNav {	font: normal 9px/13px Verdana, Arial, sans-serif; color: #286fb7; text-decoration: none; text-align: left;	
			display: block;
			margin: 7px 0px 9px 0px;
			}

.LeftNav a:link, .LeftNav a:visited {	font: normal 9px Verdana, Arial, sans-serif; color: #286fb7; text-decoration: none; }
.LeftNav a:hover {	font: normal 9px Verdana, Arial, sans-serif; color: #7bafde; text-decoration: none;	}
 
/************************************************************************* main text end *****/

 /*******sticky footer-friendly main container divs - avoid using top + bottom margin on these to help sticky footer work *****/


/***divWrapper contains everything ABOVE "#footer", which must be outside divWrapper to make Sticky Footer work ***/
#divWrapper {	min-height: 100%;
				height: 100%;
				width:958px;
				border-right: 1px solid #d2d3d4;
				border-left: 1px solid #d2d3d4;
				margin-left:auto; margin-right:auto;
				padding:0px;
				text-align:left;
				background-color: #ffffff;
				overflow:hidden;
				}


/***divTopBanner contains the logo, Glass Icons and Main Navigation tabs ***/
#divTopBanner {	width:958px;
				height:120px;
				padding:0px 0px 0px 0px;
				margin: 0px auto;
				text-align:left;
				background-color: #ffffff;
           }

/*** "#central" contains the 3 main 'column' divs, divMain, divLeftNav and divRight ***/
#central {	overflow:auto;
			clear:both;
			padding-bottom: 40px;}  /* must be same height as the footer */
			
#divMain {		display: inline;
                float:left;
                width: 428px;
                margin-left: 170px;
                padding: 0px 0px 30px 20px;
				}

/***divLeftNav appears in  browsers before divMain, but in html is after divMain, to make search robots find main content first. this is achieved by negative margin-left ***/
 #divLeftNav{	float: left;
				width: 150px;
				margin-left: -598px;
				}                             

/*******************these are the exceptions: 2 column versions for the 'search result' page only*****/
 
#divMain2column {	display: inline;
					float: right;
					width: 728px;
					padding: 0px 40px 20px 20px;
					}

#divLeftNav2column{	float: left;
					width: 150px;
					margin-left: 20px;
					}					             

/********************end of 2-column exceptions*****/

#divRight{	padding-right: 20px;
			float: right;
			width: 300px;
            }

			
/*** #footer sits BENEATH divWrapper, helps to make Sticky Footer work ***/
#footer {	position: relative;
			margin-top: -40px; /* negative value of footer height */
			height: 40px;
			clear:both;
			border-right: 1px solid #d2d3d4;
			border-left: 1px solid #d2d3d4;
			width:958px;
			margin-left:auto; margin-right:auto;
			} 


/*Opera Fix for Sticky Footer */
body:before {/* thanks to Maleika (Kohoutec)*/
				content:"";
				height:100%;
				float:left;
				width:0;
				margin-top:-32767px;/* thank you Erik J - negate effect of float - measurement is Opera's limit*/
				}

/************************* Logo, Glass Icons and Main Navigation divs, which go inside divTopBanner *****/        
#divLogoHold {	float:left;
				width:300px;
				padding:10px 0px 0px 20px;
				margin:0px auto;
             }
			 
#LogoRollover { display: block; width: 298px; height: 104px; background: url(images/TTGLogo-72.jpg) no-repeat 0 0; }
/* this is for iPhone4, where pixel density is twice that of iPhone3 */			
@media only screen and  
 (-webkit-min-device-pixel-ratio: 2) {  
#LogoRollover  {
	background-image: url(images/TTGLogo-144.jpg) no-repeat 0 0;
 	width: 298px; height: 104px; display: block;   }  
}  
#LogoRollover:hover { width: 298px; height: 104px; background-position: 0 -104px; }
#LogoRollover span { display: none; }


 
#divGlassHold {	text-align:right;
				padding:20px 20px 0px 20px;
				margin:0px 0px 0px auto;
              	}
 
#divNavHold {	float: right;
				width:600px;
				height:29;
				margin:0px auto;
				padding: 16px 18px 0px 0px;
				text-align:right;
            	}
/************************* Sub and bottom navigation divs *****/        

#divBtmNavHold {	clear: both;
					width:918px;
					padding: 0px 20px;
					text-align:center;
					background-color: #d2e3f5;
					}
 
/*****************these two divs are for the homepage, to let text sit next to icons*****/

.divIconOnly {	float: none;
				width:60px;
				margin:0px 0px;
				padding:0px 0px;
				text-align:left;
				}

.divTextOnly {	float: none;
				width: 362px;
				margin: -72px 0px 0px 65px;
				padding:10px 0px 0px 0px;
				text-align:left;

                                }
/*****************end of icons/text divs for Entee Homepage *****/

#divBannerRotator {
				float: none;
				width:290px;
				margin:-0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				text-align:left;
				}
                           
/*----------------------------------------Glass Icon rollovers --------------------------------------------------*/
#GlassEntee { display: block; width: 53px; height: 60px; background: url(../images/GlassEnteeboth.jpg) no-repeat 0 0; }
#GlassEntee:hover { background-position: 0 -72px; }
#GlassEntee span { display: none; }
 
#GlassLCT { display: block; width: 53px; height: 60px; background: url(../images/GlassLCTboth.jpg) no-repeat 0 0; }
#GlassLCT:hover { background-position: 0 -72px; }
#GlassLCT span { display: none; }

#GlassTTG { display: block; width: 53px; height: 60px; background: url(../images/GlassTTGboth.jpg) no-repeat 0 0;
}
#GlassTTG:hover { background-position: 0 -72px; }
#GlassTTG span { display: none; }

/*** this is a container div for the 3 icons ***/
.GlassIconHolder {	float:right; padding:0px 5px 0px 15px;  display: inline; }

/*** this is the style for partner logos ***/
.partnerLogo img {
	float: left;
	background-color: #fff;
	padding: 4px 10px 0 0;
	margin: 0px 60px 20px 0px;
	}
/*------------------------------------style for square blue bullets -------------------------------------------------*/

.squareBullet {
	list-style: square url(images/squareBullet.gif) inside;
	text-indent: 0px;
}

/*** border style and 'ship' style, which is for hidden text *****/

.border1 {	border: 1px solid #666666; }

.ship 			{	color: #ffffff; text-decoration: none; text-align:center; }
a.ship:link 	{	color: #ffffff; text-decoration: none; }
a.ship:visited 	{	color: #ffffff; text-decoration: none; }
a.ship:hover 	{	color: #ffffff; text-decoration: none; }

/***** for google map *****/
#map{	width:428px; height:500px; display: block; border: 1px solid #666666; }
		
/*** worldchoice logo *****/
#WorldChoice {	padding:1px 0px 0px 0px;
				margin:20px 0px 0px 0px;
				display: block;
				width: 95px;
				height: 45px;
				background: url(../images/worldchoiceLogo-both.jpg) no-repeat 0 0;
				}
#WorldChoice:hover { background-position: 0 -50px; }
#WorldChoice span { display: none; }

/*** psa logo *****/
#psa {			padding:1px 0px 0px 0px;
				margin:20px 0px 0px 0px;
				display: block;
				width: 102px;
				height: 45px;
				background: url(../images/psa-logo-both.jpg) no-repeat 0 0;
				}
#psa:hover { background-position: 0 -46px; }
#psa span { display: none; }

#divRightHolder4index  { width:300px; height:230px; display:block; background: transparent url(images/DeckPerspective.jpg) top left no-repeat; } /* note: this may not work 211110 */






/************ gallery for Companies, based on AFRY groups ******************/

.galleryPhoto img {	
				background-color: #FFF;
				padding-bottom: 2px;
				
				}

.figure {
	float: left;
	text-align:center;
	width: 160px;
	margin: 0px 17px 10px 0px;
	height: 85px;
	display: inline;
}
.figure a:link, .figure a:visited, .figure a:hover { 	font: normal 12px/14px Arial, Helvetica, sans-serif; 
						text-align: center; color: #666666;
						 text-decoration: none;
						 display: block;

					}


.figure a:hover { color: #999999; text-decoration: underline; }
. a:hover { color: #999999; border-bottom:none;}

. {	width: 152px;
			height: 46px;
			display: block;
			overflow: hidden;
			background: url(content-ttg/Images/drop_shadow.gif) right bottom no-repeat; 
			text-align:center;}


#gallery {	margin: 20px 0px 0px 0px; padding: 0px 0px 20px 0px; 			}
			
	
.partnerLogos {	float:left;
				width: 100%;
				display: block;
				margin: 0px auto 20px 0px;
				}


/******Ryan Fait form contollers *****/

.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(content-ttg/images/checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
.radio { 	background: url(content-ttg/images/radio.png) no-repeat; }
.select {
	position: absolute;
	width: 118px; /* With the padding included, the width is 150 pixels: the actual width of the image. */
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(images/select150.jpg) no-repeat;
	overflow: hidden;
}

.divContactForm { width:428px; 	}
				
#contactUsForm  { width:428px;}

#contactUsForm .label {
	color: #666666;
	float: left;
	width: 118px;
	margin-right: 10px;
	text-align:left;
	font-weight:bold;
	clear:left;
	}				
	
#contactUsForm .responses{ width: 300px; }	
	
#refer { font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; }

#selTitle, #txtForename, #txtSurname, #txtJobTitle, #txtCoName,  #txtAddr1, #txtAddr2, #selContact, #txtEmail, #txtTelNum, #selHearAbout, #txtMessage
	{	background-color: #eeeeee; /***background colour of text boxes***/
		font-family:"Lucida Console", arial, sans-serif;
		font-size: 12px;
		padding:3px;
		width:290px;  /*** width of the Responses boxes ***/
		margin-top: -2px;
		}

#selTitle:focus, #txtForename:focus, #txtSurname:focus, #txtJobTitle:focus, #txtCoName:focus, #txtAddr1:focus, #txtAddr2:focus, #selContact:focus, #txtEmail:focus, #txtTelNum:focus, #selHearAbout:focus, #txtMessage:focus {	background-color: #fddfad;	} /*** highlight background colour***/
	
.submitButton {	margin-left:128px;
			font-family: Geneva, Arial, Helvetica, sans-serif;
			border:none;
			FONT-WEIGHT: bold;
			FONT-SIZE: 10px;
			COLOR: #FFFFFF;
			background: url(images/Submit-button.jpg) no-repeat 0 0;
			height: 20px;
			width:73px;
			 float:right;}
.submitButton:hover { background-position: 0 -30px; }
.submitButton span	{ display: none; }
	
.resetButton {	margin-left:128px;
			font-family: Geneva, Arial, Helvetica, sans-serif;
			border:none;
			FONT-WEIGHT: bold;
			FONT-SIZE: 10px;
			COLOR: #FFFFFF;
			background: url(images/Reset-button.jpg) no-repeat 0 0;
			height: 20px;
			width:73px;
			float: left; }

.resetButton:hover { background-position: 0 -30px; }
.resetButton span	{ display: none; }