/* ******************************************************************************************************************

GENERAL STYLES 

****************************************************************************************************************** */

/* *****************************************************
 HTML Tags 
***************************************************** */

html{
	font-size: 100%;
}
body, html{
	height:100%;
}
body {
	margin: 0;
	background-color: #F7F7F7;
	background-image: url("../images/back.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em; /* 12px */
	color: #002244;
	line-height: 1.5;
}
h1 {
	font-size: 2.375em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
.h1 {
	font-size: 2.375em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
h1 img {
	margin-bottom: -5px;
}
h2 {
	font-size: 1.875em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
.h2 {
	font-size: 1.875em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
h3 {
	font-size: 1.625em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #A9966C;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: normal;
	margin: 0;
}
h4 {
	font-size: 1.125em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #002244;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
h5 {
	font-size: 1em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	color: #002244;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: normal;
	margin: 0;
	font-weight: normal;
}
h6 {
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	letter-spacing: 0.05em;
	text-transform: none;
	line-height: normal;
	margin: 0;
	font-weight: normal;
	font-style: italic;
}

input, textarea, file{
	background-color: #F0F0F0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #002244;
	border-top: 1px solid #ABADB3;
	border-left: 1px solid #ABADB3;
	border-right: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;
}
.inputButt{
	color: #FFFFFF;
	background-color: #8D8D8D;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

a:link, a:visited {	color: #00759A;}
a:hover, a:active {	color: #02ACF4;}

img {	
	border: 0;
}



/* *****************************************************
 Classes 
***************************************************** */


/* Links at top of page (language, text size...) */

.topLinks  {
	float: right;
	list-style: none;
	margin: 0;
	padding: 0 15px 0 0;
	width: 300px;
	text-align: right;
	color: #999999;
	font-size: 0.75em;
}
.topLinks  li   {
	margin: 0;
	padding: 0px;
	display:inline;
}
.topLinks a:link, .topLinks a:visited {	color: #999999;}
.topLinks a:hover {	color: #02ACF4;}

/* Text General */


.reverse {
	color: #FFFFFF;
	background-color: #002244;
	font-size: 90%;
	padding: 0 2px 0 2px;
}
.reverse2 {
	color: #FFFFFF;
	background-color: #C7B995;
}
.reverse3 {
	color: #666666;
	background-color: #E2E2E2;
	font-size: 90%;
	padding: 0 2px 0 2px;
}
.reverse4 {
	color: #FFFFFF;
	background-color: #999999;
	font-size: 1em;
	padding: 0 2px 0 2px;
}


.normalBoldGold {
	font-weight: bold;
	color: #A9966C;
}
.normalBold {
	font-weight: bold;
}
.normalBoldItalic {
	font-style: italic;
	font-weight: bold;
}
.normalItalic {
	font-style: italic;
}
.normalBlanc {
	color: #FFFFFF;
}
.normalBlancBold {
	font-weight: bold;
	color: #FFFFFF;
}
.normalBlancItalic {
	font-style: italic;
	color: #FFFFFF;
}
.normalBlancItalicBold {
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}
.normalGris {
	color: #666666;
	font-weight: normal;
}

.copy {
	font-size: 0.8333em;
	color: #949494;
}
.liens {
	font-size: 0.833em;
}
.small {
	font-size: 0.75em;
}
.exp {
	vertical-align: super;
	font-size: 0.75em;
}


.addresse {
	font-size: 0.9em;
	color: #555555;
}
.addresse   img   {
	vertical-align: text-bottom;
}
.portList {
	text-transform: uppercase;
	font-size: 0.85em;
	line-height: 1.45;
}
.portList img {
	vertical-align: text-top;
	margin: 0 2px 1px 0;
}


.port_nolink    a:link, .port_nolink a:visited  {
	text-decoration: none;
	color: #666666;
}
.port_nolink  a:hover {
	color: #00759A;
}


/* Object properties */


.allDivInline div{
	display: inline;
}
.fixedTable {
	table-layout: fixed;
}
.clearBoth {
	clear: both;
}
.marginLeft {
	margin-left: 3px;
}
.marginRight {
	margin-right: 3px;
}
.marginAuto {
	margin-right: auto;
	margin-left: auto;
}
.marginBottom {
	margin-bottom: 6px;
}
.marginAll {
	margin: 10px;
}
.imgTextLeft{
	float: left;
	margin: 0 20px 7px 0;
}
.imgTextRight{
	float: right;
	margin: 0 0 7px 20px;
}
.floatLeft{
	float: left;
}
.floatRight{
	float: right;
}

.fullHeight {
	height: 100%;
}
.pointille {
	background-image:url("../images/back_point.gif");
	font-size: 1px;
}
.backCoord {
	background-image: url("../images/back_rose.gif");
	background-repeat: no-repeat;
	background-position: right top;
}
.alternateRow {
	background-color: #E2E2E2;
}

.zoomLink {
	cursor: url("../cursors/zoomin.cur"), default;
}
.zoomLinkPorts {
	cursor:url("../../cursors/zoomin.cur"), default;
}

.insideStorageBack {
	background-color: #74ACC7;
}
.outsideStorageBack {
	background-color: #C0D7E5;
}
.quayBack {
	background-color: #002244;
}

.twoCols{
	width: 560px;
	margin: 0px;
	padding: 0px;
}
.twoCols .col{
	width: 271px;
	vertical-align: top;
}
.twoCols .spacer{
	width: 18px;
}

div.bordered{
	border: 1px dotted #999999;
	padding: 10px;
}
div.bordered h3{
	font-size: 1.25em;
	color: #988558;
}


/* *****************************************************
 ID's 
***************************************************** */


#centerWrapper {
	width: 925px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 0 0 0;
}

/* Container for logo and top links */
#head {
	padding: 0;
	width: 925px;
	border: 0;
}
#topLogo {
	margin: 0 0 0 20px;
	width: 125px;
}

/* Container for head pic */
#toppic {
	width: 925px;
	height: 240px;
	border: 0;
	margin: -25px 0 0 0;
}
#toppic div {
	float: left;
}
#toppic .toppic_d0 {
	width: 925px;
}
#toppic .toppic_d0_fr {	width: 925px;}
#toppic .toppic_d0_en {	width: 925px;}

#toppic .toppic_d1 {
	width: 6px;
	height: 175px;
}
#toppic .toppic_d2 {
	width: 913px;
	height: 175px;
}
#toppic .toppic_d3 {
	width: 6px;
	height: 175px;
}

/* Containers for menus */

#menu{
	width: 913px;
	height: 30px;
	line-height: 30px;
	margin: 0 auto 0 auto;
	background-image: url("../images/back_menu.png");
	padding: 0;
}



#tabMenu {
  float: left;
  width: 400px;
}
#tabMenuSec {
  float: right;
  width: 450px;
}

#tabMenu li {	float: left;}
#tabMenuSec li {	float: right;}


/* Main Container for all body content */

#main {
	padding: 10px 0 0 0;
	border: 0;
	width: 925px;
}
#main ul {
	margin: 0 0 0 15px;
	padding: 0;
	list-style-type: circle;
	list-style-position: outside;
	list-style-image: url("../images/bullet.gif");
}

#main ul.linkList {
	list-style-image: url("../images/bullet2.gif");
}
#main ul a:link, #main ul a:visited {
	text-decoration: none;
	text-transform: uppercase;
	color: #002244;
	font-size: 90%;
	line-height: 1.5;
}
#main ul a:hover{
	color: #02ACF4;
	/*background-color: #FFFFFF;*/ /* This is cool but waaaaay to slow !! -LHR */
}
#main li {
}


.videoLinksContainer {
	width: 560px;
}

#main ul.videoLinks {
	list-style-image: url("../images/bullet3.gif");
	list-style-position: inside;
	margin: 0;
	padding: 0;
}
#main ul.videoLinks a:link, #main ul.videoLinks a:visited {
	text-decoration: none;
	text-transform: none;
	color: #002244;
	font-size: 90%;
	line-height: 1.5;
}
#main ul.videoLinks a:hover{
	color: #02ACF4;
	/*background-color: #FFFFFF;*/ /* This is cool but waaaaay to slow !! -LHR */
}
#main ul.videoLinks li {
	margin: 0;
	padding: 0;


	/*display:block;
	padding: 0 15px 0 15px;*/
}
/*
#main ul.linkList ul {
	display:none;
}
#main ul.linkList ul a:link, #main ul.linkList ul a:visited {
	text-decoration: none;
	text-transform: uppercase;
	color: #A9966C;
	font-size: 90%;
	line-height: 1.5;
}
#main ul.linkList ul a:hover{
	color: #002244;
}
*/

/* Container for breadcrumbs */

#breadcrumbs{
	width: 905px;
	margin: 0;
	padding: 0px;
	text-align: right;
	font-size: 0.75em;
	line-height: 16px;
	color: #999999;
	float: left;
	height: 16px;
}
#breadcrumbs a:link, #breadcrumbs a:visited {
	color: #666666;
	text-decoration: none;
}
#breadcrumbs a:hover, #breadcrumbs a:active {	
	color: #02ACF4;
}

/* Container for page title */

#contentTitle {
	float: left;
	margin: 0 20px 25px 20px;
	padding: 0 0 0 0;
	width: 560px;
	text-align: left;
}

/* Container for sub links */

#contentMiniNav {
	width: 220px;
	float: right;
	margin: 5px 20px 0 0;
	padding: 0;
	text-align: right;
	font-size: 90%;
	line-height: 1.25;
}

/* Container for body text */

#mainContent {
	color: #002244;
	float: left;
	margin: 0 20px 0 20px;
	padding: 0;
	width: 560px;
	text-align: left;
}
#mainContent p {
	text-align:justify;
}

/* Container for side nav (right!!) */

#leftnav {
	width: 200px;
	float: right;
	margin: 0 10px 0 0;
	padding: 0 0 0 10px;
	text-align: left;
	font-size: 90%;
	line-height: 1.25;
}
#leftnav h1 {
	font-size: 1.5em;
	color: #999999;
}

#leftnav p {
	margin: 0;
	padding: 0;
}



/* Container for footer */

#foot {
	padding: 10px 0 50px 0;
	background-color: #E2E2E2;
	border-top-width: 2px;
	border-top-style: double;
	border-top-color: #CCCCCC;
	margin: 40px 0 0 0;
	width: 100%;
	float: left;
}
.footContent{
	font-size: 0.75em;
	color: #666666;
	text-align: justify;
	width: 888px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

/* Container for map city mobile indicator */

#carte_indic {
	visibility: hidden;
	display: block;
	position: relative;
	left: 0px;
	top: 0px;
}

#carte_indic_names {
	visibility: hidden;
	display: inline;
	position: relative;
	left: 0px;
	top: 25px;
	background-color: #00759A;
	width: auto;
	padding: 3px 3px 2px 3px;
	color: #FFFFFF;
	font-size: 0.75em;
	text-transform: uppercase;
	border: 1px solid #FFFFFF;
}


/* Container for port images - fixes the font-size so the space between images will not vary with page font size */
#portImages{
	font-size:13px;
}

/* Container for Video link */
/*
#pres01 a:link, #pres01 a:visited, #pres02 a:link, #pres02 a:visited {
	text-decoration: none;
	color: #002244;
}
#pres01 a:hover, #pres01 a:active, #pres02 a:hover, #pres02 a:active {	
	text-decoration: none;
}
*/

/*  */

#fullHeight {
	height: 100%;
}
#bordered {
	border: 1px solid #333333;
}
#videoContainer {
  width: 500px;
  position: relative;
  height: 450px;
  right: 300px;
  top: 15em;
  border: none;
}

