@charset "UTF-8";

/* Body starts, dont edit! */

* {margin: 0; padding: 0;}

body {
	margin: 0;
	padding: 0;
	text-align: center;
	min-width: 600px;
	
}

.box {
	position: relative;
	top: 0px;
	right: 0px;
	margin: 0 auto;
	width: 900px;
	text-align: left;
	height: auto;
	left: 0px;
}
.footer_bg {
	/* Background image */
	}
.footer_bg_subpage {
	 /* Background image on subpages, it's little bit longer */
	background-repeat: no-repeat;
	background-position: center top;
}
#footerBG {
	position:absolute;
	width:100%;
	height:auto;
	z-index:0;
	top: 0px;
	left: 0px;
	visibility: visible;
}
#background {
	position:absolute;
	width:100%;
	height:auto;
	z-index:-10;
	left: 3px;
	top: 11px;
}
	
/* Body ends */

/* Text Styling starts, read Read_me.pdf to see editable contents
SOME DIV IDS AND CLASSES INCLUDE LETTERS "SP" ON END, THAT MEANS THAT DIV IS USED ON SUBPAGE (=SP) */

IMG {
	border-color: white;
	left: 10px;
}
A:hover IMG, A:active IMG {border-color: black; }

#slideshow {
	position: absolute;
	top: 95px; /* 121px */
	left: 0px; /* 21px */
	margin: 0 auto 15px auto; /* was padding ?? */
	clear: both;
	height: 200px;
	width:900px;
	border: 0px solid #083F88;
	overflow: hidden;
	text-align: center;
	/*	background-image: url(../images/slider_images/container-port-haulage.jpg); 
	background-position: center; */
}

/*	left: 10px;
	background: #000 url(../images/black-grid.png);
	color: #666; 
	width: 879px; */

#banner {  /* Banner's background box image */
	position:absolute;
	width:900px;
	height:290px;
	z-index:2;
	top: 113px;
	left: 0px;

}
#content { /* Content Div */
	position:absolute;
	width:900px;
	height:340px;
	z-index:3;
	background-color: #FFFFFF;
	top: 300px; /* was 292px */
	left: 0px;
}
#bottom { /* bottom Div */
	position:absolute;
	width:900px;
	height:150px;
	z-index:4;
	background-color: #FFFFFF;
	top: 700px;
	left: 0px;
}
#footer { /* Footer Div and background on homepage*/
	position:absolute;
	width:900px;
	height:30px;
	z-index:5;
	top: 853px;
	left: 0px;
	background-image: url(../images/footer.jpg);
}
#menu { /* Menu Div */
	position:absolute;
	width:700px;
	height:20px;
	z-index:7;
	left: 274px;
	top: 63px;
}
#verticalline1 {  /* Vertical line on homepage */
	position:absolute;
	width:3px;
	height:115px;
	z-index:8;
	left: 299px;
	top: 303px;
}
#verticaline2 { /* Vertical line on homepage */
	position:absolute;
	width:3px;
	height:115px;
	z-index:10;
	left: 597px;
	top: 302px;
}
.titles { /* This style is used on tiltes */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFF;
	line-height: 36px;
	margin-left: 10px;
}
#aboutus { /* Homepages about us column */
	position:absolute;
	width:280px;
	height:40px;
	z-index:12;
	left: 10px;
	top: 310px; /* 302 */
	background-color: #083F88;
}
#products { /* Homepages Products column */
	position:absolute;
	width:284px;
	height:40px;
	z-index:14;
	left: 307px;
	top: 310px; /* 302 */
	background-color: #083F88;
}
#services { /* Homepages Services column */
	position:absolute;
	width:284px;
	height:40px;
	z-index:15;
	left: 607px;
	top: 310px; /* 302 */
	background-color: #083F88;
}
#footerimg {  /* Footer's image DIV */
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	top: 8px;
	left: 10px;
}
#quicklink { /* Quicklinks on homepage */
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 455px;
	top: 8px;
}
#quicklinksp {  /* Quicklinks on subpages */
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 455px;
	top: 8px;
}
#aboutustext { /* About Us text's DIV */
	position:absolute;
	width:260px;
	height:270px;
	z-index:1;
	left: 20px;
	top: 60px;
}
.bodytext { /* Bodytext used on every page */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	line-height: 21px; /* 21 */
}

#content .bodytext {
	line-height: 19px; /* 18px */
}

a:link { /* Basic linkstyles, first red and black on hover */
	color: #690000;
	text-decoration: none;
}
a:visited { /* Basic linkstyles, first red and black on hover */
	text-decoration: none;
	color: #690000;
}
a:hover { /* Basic linkstyles, first red and black on hover */
	text-decoration: none;
	color: #000000;
}
a:active { /* Basic linkstyles, first red and black on hover */
	text-decoration: none;
	color: #690000;
}
a { /* Basic linkstyles, first red and black on hover */
	font-weight: bold;
}
.class2 a:link { /* These linkstyles I used on homepage's codaslider, first white and dark blue on hover, look's good with blue background */
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 21px;
	text-decoration: none;
}
.class2 a:visited { /* These linkstyles I used on homepage's codaslider, first white and dark blue on hover, look's good with blue background */
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 21px;
	text-decoration: none;
}
.class2 a:hover { /* These linkstyles I used on homepage's codaslider, first white and dark blue on hover, look's good with blue background */
	color: #00254E;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 21px;
	text-decoration: none;
}
.class2 a:active { /* These linkstyles I used on homepage's codaslider, first white and dark blue on hover, look's good with blue background */
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 21px;
	text-decoration: none;

}

.input_fields {	color: #000000;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	padding: 5px;	margin: 3px 0 0 0; background-color: #EEE;	border: 1px; border-color:#CCC; border-style:solid} /* Form field style */

.input_fields:hover {	color: #000000;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	padding: 5px;	margin: 3px 0 0 0; background-color: #DDD;	border: 1px; border-color:#CCC; border-style:solid} /* Form field style */

.input_button {	color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	margin-top: 6px; padding: 5px 10px 5px 10px;	background-color: #990007;	border: 0px;} /* Button style */

.input_button:hover {	color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	margin-top: 6px; padding: 5px 10px 5px 10px;	background-color: #242424;	border: 0px;} /* Button style */


.navmenu {	 /* Top pages navigation */
	position:absolute;
	z-index:12;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 588px;
	top: 5px;
	left: 0px;
}
.navmenu ul {/* Top pages navigation */
	margin: 0;
	padding: 0;
	list-style-type: none; 
	list-style-image: none;
}
	
.navmenu li {/* Top pages navigation */
	display: inline; 
	list-style-type: none; 
	list-style-image: none;
}

.navmenu li a {/* Top pages navigation */
	text-decoration:none;
	padding: 8px 10px 8px 10px;
	color: #083F88;
	list-style-type: none;
	list-style-image: none;
	border-right: 1px solid #DDD;
	background: none;
	font-weight: bold;
}
	
.navmenu li a:hover {/* Top pages navigation */
	color: #CCC;
	list-style-type: none;
	list-style-image: none;

}
	
	
#producttext { /* Product Text's DIV */
	position:absolute;
	width:260px;
	height:270px;
	z-index:2;
	left: 323px;
	top: 60px;
}
#servicetext { /* Service Text's DIV */
	position:absolute;
	width:265px;
	height:270px;
	z-index:3;
	left: 620px;
	top: 60px;
}
#logo { /* Logo Div */
	position:absolute;
	width:200px;
	height:95px;
	z-index:13;
	left: 10px;
	top: 0px;
}
#quickproduct { /* Quickproducts */
	position:absolute;
	width:121px;
	height:109px;
	z-index:1;
	top: 10px;
	left: 15px;
	color: #333333;
}
#quickservice { /* Quickservices */
	position:absolute;
	width:128px;
	height:109px;
	z-index:2;
	left: 162px;
	top: 10px;
}
#apDiv1 { /* Quickgalleries */
	position:absolute;
	width:104px;
	height:112px;
	z-index:3;
	left: 314px;
	top: 10px;
}
#footermenu { /* Footermenu */
	position:absolute;
	width:450px;
	height:26px;
	z-index:1;
	left: 10px;
	top: 4px;
}
#copyright { /* Copyright Div */
	position:absolute;
	width:380px;
	height:30px;
	z-index:2;
	left: 510px;
	top: 4px;
}
#codaslider { /* Coda Slider DIV */
	position:absolute;
	width:879px;
	height:267px;
	z-index:4;
	left: 10px;
	top: 103px;
}
.slider-wrap { /* Coda Slider's stuff */
	margin: 20px 0;
	position: relative;
	width: 100%;
	left: 0px;
	top: 0px;
}

#boxes { /* Slider's little changing boxes */
	position:absolute;
	width:89px;
	height:17px;
	z-index:17;
	left: 801px;
	top: 380px;
}

#clicktheboxes { /* More boxes */
	position:absolute;
	width:177px;
	height:20px;
	z-index:18;
	left: 620px;
	top: 377px;
}

#newstopics { /* News topics DIV */
	position:absolute;
	width:500px;
	height:38px;
	z-index:1;
	left: 41px;
	top: 106px;
}
.style2 { /* Big white text used on Coda Slider and banner text's */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #FFFFFF;
}
#newstitle { /* Newstitle DIV, located in homepage top of first panel*/
	position:absolute;
	width:286px;
	height:81px;
	z-index:1;
	left: 92px;
	top: 156px;
}
#paneltext2 { /* Second Panel text */
	position:absolute;
	width:312px;
	height:67px;
	z-index:1;
	left: 936px;
	top: 42px;
}
#paneltext3 { /* Third Panel text */
	position:absolute;
	width:138px;
	height:43px;
	z-index:1;
	left: 1973px;
	top: 94px;
}
#paneltext4 { /* Fourth Panel text */
	position:absolute;
	width:167px;
	height:46px;
	z-index:1;
	left: 2971px;
	top: 126px;
}
#paneltext5 { /* Fifth Panel text */
	position:absolute;
	width:200px;
	height:30px;
	z-index:1;
	left: 3894px;
	top: 206px;
}
#form { /* Contact form on contact page */
	position:absolute;
	width:408px;
	height:115px;
	z-index:1;
	left: 200px;
	top: 1px;
}
#info { /* info column on contact page */
	position:absolute;
	width:187px;
	height:370px;
	z-index:1;
}
.style4 {color: #FF0000
}
#bannersp { /* Banner's background box image on subpages */

	position:absolute;
	width:900px;
	height:154px;
	z-index:0;
	top: 94px;
}
#imagesp { /* Image DIC on subpages */
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	top: 10px;
	left: 10px;
}
#contentsp { /* Content background on subpages */
	position:absolute;
	width:900px;
	height:495px;
	z-index:15;
	background-image: url(../images/container-transport-bg.jpg);
	top: 259px;
	left: 0px;
}
#titlesp { /* Titles on subpage */
	position:absolute;
	width:624px;
	height:41px;
	z-index:1;
	left: 10px;
	top: 12px;
	color: #FFF;
	background-image: url(../images/container-transport-title.png);
}
#footerboxsp { /* Footerbox on subpages */
	position:absolute;
	width:900px;
	height:150px;
	z-index:16;
	left: 0px;
	top: 650px;
	background-color: #FFFFFF;
}
#footersp { /* Footer on subpages */
	position:absolute;
	width:900px;
	height:50px;
	z-index:17;
	/* background-image: url(../images/footer.jpg); */
	background-color: #E3E3E3;
	left: 0px;
	top: 803px;
}
#footerimgsp { /* Footer image on subpages */
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	top: 8px;
	left: 10px;
}
#quicklinksp { /* Quicklinks subpages */
	position:absolute;
	width:436px;
	height:132px;
	z-index:18;
	left: 454px;
	top: 660px;
}
#bodytextsp { /* Bodytext on subpages */
	position:absolute;
	width:624px;
	height:411px;
	z-index:2;
	left: 10px;
	top: 63px;
}
#productsp { /* Quickproducts on subpages */
	position:absolute;
	width:121px;
	height:115px;
	z-index:1;
	left: 3px;
	top: 12px;
}
#servicesp { /* Quickservices on subpages */
	position:absolute;
	width:116px;
	height:115px;
	z-index:2;
	left: 162px;
	top: 10px;
}
#gallerysp { /* Quickgalleries on subpages */
	position:absolute;
	width:104px;
	height:115px;
	z-index:3;
	left: 314px;
	top: 10px;
}
#producttitle { /* Product's title */
	position:absolute;
	color: #083F88;
	width:175px;
	height:34px;
	z-index:3;
	left: 690px;
	top: 12px;
}
.style3 {color: #000000} 
#contactitlesp { /* Contact title on subpages */
	position:absolute;
	color:#083F88;
	width:150px;
	height:34px;
	z-index:4;
	left: 690px;
	top: 272px;
}
#linklist { /* Left column where links are */
	position:absolute;
	width:160px;
	height:179px;
	z-index:19;
	left: 690px;
	top: 330px;
}
#contactinfo { /* Contacting info */
	position:absolute;
	width:171px;
	height:163px;
	z-index:5;
	left: 690px;
	top: 324px;
}
#bannertext {  /* BANNER TEXT */
	position:absolute;
	width:294px;
	height:38px;
	z-index:1;
	left: 47px;
	top: 71px;
}
#footermenusp { /* FOOTERMENU TEXT DIV */
	position:absolute;
	width:435px;
	height:22px;
	z-index:1;
	top: 3px;
	left: 10px;
}
#copyrightsp { /* COPYRIGHT TEXT  DIV */
	position:absolute;
	width:410px;
	height:24px;
	z-index:2;
	top: 4px;
	left: 480px;
}
.imagebox { /* IMAGE PLACED INSIDE OF CONTENT TEXT */
	border: solid 1px #083F88;

}


/* CODASLIDER STARTS, DO NOT EDIT */

		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
/* RESET : */

ul {
	margin: 0;
	padding: 0;
	border: 2px;
	list-style: none;
	font-weight: normal;
	text-align: left;
	overflow: visible;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
		

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 267px; overflow: scroll}
		.csw .loading {margin: 200px 0 267px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 879px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 267px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 879px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
			display: none;

		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 0 15px;
		}
		
		.stripNav a:hover {
			background: #9cf;
		}
		
		.stripNav a.current {
			background: #39c;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
			display: none;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
			display: none;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}