@charset "utf-8";
/* CSS Document */

/* CSS RESET  */    
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, 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, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}  


/* Global Style */

body {
	background-color: #454545;
}

div#header {
	height:65px;margin:0;
	padding-left:10px;
}

/*div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
*/
div#container{
	width:900px;margin:0 auto;
	background:#454545;
	background-image: url(../images/diagnal-bg.png);
	background-position: top left;
	background-repeat: no-repeat;
}

div#content{
	float:right;width:630px
}

div#schedule-content{
	float:right;width:630px
}

div#navigation{
	float:left;width:270px
}

div#extra{
	float:right;width:630px
}

div#footer{
	clear:both;width:100%
}


.logo {
	width: 122px;
	height: 33px;
	margin: 30px;
	float: left;
	background-image: url(../images/fairate-logo.png);
	background-position: top left;
	background-repeat: no-repeat;
}

.company-name {
	width: 142px;
	height: 10px;
	margin: 15px;
	top: 0px;
	right: 0px;
	float: right;
	background-image: url(../images/fairate-chname.png);
	background-position: top left;
	background-repeat: no-repeat;
}

/***************************************************************************************************************/
/*                                            Begin Top Navigation                                             */
/***************************************************************************************************************/

.top-navigation {
	position: relative;
	width: 524px;
	height: 22px;
	margin: 5px 0 5px 0;
	top: 32px;
	left: 172px;
	float: right;
	background-image: url(../images/topnav-bg.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #999;
	color: #fff;
}

ul#top-nav-item {
	list-style-type: none;
	width: auto;
	position: relative;
	display: block;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

ul#top-nav-item li {
	display :block;
	float: left;
	margin: 0px;
	padding: 0px;
	padding-left: 25px;
}

ul#top-nav-item li a {
	float: left;
	color: #fff;
	text-decoration: none;
	padding: 5px 5px 0;
	font-weight: bold;
}

ul#top-nav-item li a:hover {
	color: #F00;
	font-size: 10px;
	padding-top: 5px;
	background-image: url(../images/current-nav-item.png);
	background-position: top center;
	background-repeat: no-repeat;
}
ul#top-nav-item li .top-nav-current {
	color: #F00;
	font-size: 10px;
	padding-top: 5px;
	background-image: url(../images/current-nav-item.png);
	background-position: top center;
	background-repeat: no-repeat;
}

/***************************************************************************************************************/
/*                                             End Top Navigation                                              */
/***************************************************************************************************************/



/***************************************************************************************************************/
/*                                            Begin Top Image List                                             */
/***************************************************************************************************************/
#index-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/index-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#scope-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}


#scope-ocean-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-ocean-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#scope-warehouse-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-warehouse-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#scope-delivery-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-delivery-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#scope-logistics-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-logistics-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#scope-value-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/scope-value-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#region-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/region-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#planning-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/planning-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#schedule-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/schedule-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#tracking-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/tracking-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#booking-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/booking-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#job-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/job-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#contact-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/contact-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#news-top-image {
	position: relative;
	width: 628px;
	height: 230px;
	float: right;
	background-image: url(../images/news-top-image.png);
	background-position: top right;
	background-repeat: no-repeat;
}

/***************************************************************************************************************/
/*                                             End Top Image List                                              */
/***************************************************************************************************************/



/***************************************************************************************************************/
/*                                             Begin Language Bar                                              */
/***************************************************************************************************************/

.language-bar {
	position: relative;
	width: 630px;
	height: 14px;
	margin: 5px 0 5px 0;
	right: 0px;
	float: right;
	background-image: url(../images/lang-nav-bg2.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #999;
}

ul#lang-bar-item {
	list-style-type: none;
	width: auto;
	position: relative;
	display: block;
	font-size: 9px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

ul#lang-bar-item li {
	display :block;
	float: left;
	margin: 0px;
	padding: 0px;
	padding-top: 1px;
	color: #999;
}

ul#lang-bar-item li a {
	float: left;
	color: #999;
	text-decoration: none;
	height: 12px;
	padding: 1px 4px 0;
}

ul#lang-bar-item li a:hover {
	color: #F00;
	font-size: 9px;
}

ul#lang-bar-item li .lang-bar-current {
	color: #FFF;
	font-size: 9px;
}

.find-us-on-facebook {
	cursor: pointer;
	display: block;
	width: 200ox;
	height: 14px;
	padding-left: 19px;
	padding-right: 5px;
	float: right;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #eee;
	background-image: url(../images/facebook-icon.png);
	background-position: top left;
	background-repeat: no-repeat;
}

.find-us-on-facebook a, a:hover {
	text-decoration: none;
	font-size: 9px;
	color: #333;
}
/***************************************************************************************************************/
/*                                              End Language Bar                                               */
/***************************************************************************************************************/




.content-container {
	width: 900px;
	height: auto;
	position: relative;
	overflow: auto;
}

/******************* Background **********************/
.content-container#index-bg {
	width: 760px;
	height: 560px;
	float: right;
	background-image: url(../images/index-bg.png);
	background-position: top right;
	background-repeat: no-repeat;
}

.content-container#introduction-bg {
	position: relative;
	width: 760px;
	height: 700px;;
	float: right;
}

.content-container#membership-bg {
	position: relative;
	width: 860px;
	height: 850px;;
	float: right;
	background-image: url(../images/membership-bg.png);
	background-position: 57px 60px;
	background-repeat: no-repeat;
}

.content-container#awards-bg {
	position: relative;
	width: 860px;
	height: 550px;;
	float: right;
	background-image: url(../images/membership-bg.png);
	background-position: 57px 60px;
	background-repeat: no-repeat;
}

/******************* Background **********************/

.section-title {
	position: absolute;
	width: 630px;
	height: 45px;
	right: 0px;
}


#subnav {
	width: 280px;
	height: 24px;
	margin-top: 20px;
	background-image: url(../images/subnav-bg.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #999;
}

ul#subnav-nav-item {
	list-style-type: none;
	width: auto;
	position: relative;
	display: block;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
}

ul#subnav-nav-item li {
	display :block;
	float: left;
	margin: 0px;
	padding: 0px;
}

ul#subnav-nav-item li a {
	float: left;
	color: #c5c5c5;
	font-size: 10px;
	text-decoration: none;
	height: 14px;
	padding: 5px 13px 0;
}

ul#subnav-nav-item li a:hover {
	color: #fff;
	padding-top: 5px;
}

ul#subnav-nav-item li .sub-nav-current {
	color: #fff;
	border-bottom: 5px solid #6ac2e3;
}

#section-caption {
	position: relative;
	width: 620px;
	display: block;
	top: 50px;
	float: right;
	font-size: 13px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #6ac2e3;
	text-align: left;
	margin: 0;
	padding: 0;
}

.content {
	position: relative;
	top: 60px;
	width: 760px;
	height: auto;
}


#back-to-top {
	width: 56px;
	height: 9px;
	cursor: pointer;
	margin: 20px 20px 40px auto;
	background-image: url(../images/backtotop-btn.png);
	background-position: top left;
	background-repeat: no-repeat;
}

#next-page {
	width: 24px;
	height: 9px;
	cursor: pointer;
	margin: 20px 130px auto auto;
	background-image: url(../images/next-btn.png);
	background-position: center left;
	background-repeat: no-repeat;
}

#prev-page {
	width: 25px;
	height: 9px;
	cursor: pointer;
	margin: 20px auto auto 15px;
	float: left;
	background-image: url(../images/back-btn.png);
	background-position: center left;
	background-repeat: no-repeat;
}

#back-page {
	width: 25px;
	height: 9px;
	cursor: pointer;
	margin: 20px 130px auto auto;
	background-image: url(../images/back-btn.png);
	background-position: center left;
	background-repeat: no-repeat;
}





/***************************************************************************************************************/
/*                                           Begin Bottom Navigation                                           */
/***************************************************************************************************************/
.bottom-navigation {
	position: relative;
	width: 700px;
	height: 22px;
	margin: 5px 0 5px 0;
	right: 0px;
	float: right;
	background-image: url(../images/bottom-nav-bg.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #999;
}

ul#bottom-nav-item {
	list-style-type: none;
	width: auto;
	position: relative;
	display: block;
	font-size: 9px;
	font-weight: bold;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0px;
	padding: 0px;
	padding-left: 30px;
}

ul#bottom-nav-item li {
	display :block;
	float: left;
	margin: 0px;
	padding: 0px;
}

ul#bottom-nav-item li a {
	float: left;
	color: #fff;
	text-decoration: none;
	height: 22px;
	padding: 5px 10px 0;
}

ul#bottom-nav-item li a:hover {
	font-size: 9px;
	color: #F00;
	padding-top: 5px;
}

ul#bottom-nav-item li .bottom-nav-current {
	font-size: 9px;
	color: #F00;
	padding-top: 5px;
}
/***************************************************************************************************************/
/*                                            End Bottom Navigation                                            */
/***************************************************************************************************************/




/***************************************************************************************************************/
/*                                              Begin Footer Area                                              */
/***************************************************************************************************************/

.copyright {
	width: 530px;
	display: block;
	font-size: 9px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #999;
	text-align: right;
	margin: 0;
	padding: 0;
	float: left;
}

.credit {
	width: 170px;
	display: block;
	font-size: 9px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #999;
	margin: 0;
	padding: 0;
	float: right;
}

/***************************************************************************************************************/
/*                                                End Footer Area                                              */
/***************************************************************************************************************/


/***************************************************************************************************************/
/*                                           Begin Diagnal Navigation                                          */
/***************************************************************************************************************/
.diagnal-navigation {
	position: relative;
	width: 265px;
	height: 170px;
	z-index: 1000;
	left: 93px;
}

.information a{
	background-image: url(../images/nav-item.png);
	width: 173px;
	height: 35px;
	display: block;
	position: absolute;
	top: 6px;
	right: 8px;
}
.information a {background-position: 0 0;}

.information a:hover, #info-current {background-position: 0 -35px;}

.scope a{
	background-image: url(../images/nav-item.png);
	width: 173px;
	height: 35px;
	display: block;
	position: absolute;
	top: 51px;
	right: 28px;
}
.scope a {background-position: 0 -70px;}
.scope a:hover, #scope-current {background-position: 0 -105px;}

.region a{
	background-image: url(../images/nav-item.png);
	width: 173px;
	height: 35px;
	display: block;
	position: absolute;
	top: 95px;
	right: 47px;
}
.region a {background-position: 0 -140px;}
.region a:hover, #region-current {background-position: 0 -175px;}

.planning a{
	background-image: url(../images/nav-item.png);
	width: 173px;
	height: 35px;
	display: block;
	position: absolute;
	top: 140px;
	right: 67px;
}
.planning a {background-position: 0 -210px;}
.planning a:hover, #planning-current {background-position: 0 -245px;}

/***************************************************************************************************************/
/*                                            End Diagnal Navigation                                           */
/***************************************************************************************************************/



/***************************************************************************************************************/
/*                                               Begin News List                                               */
/***************************************************************************************************************/

.news-list {
	position: relative;
	width: 235px;
	height: 300px;
	z-index: 1001;
	top: 60px;
	left: 5px;
}

.news-list #news-header{
	position: absolute;
	width: 160px;
	height: 20px;
	right: 5px;
	display: block;
	font-size: 14px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	border-bottom: 1px solid #fff;
}

.news-title {
	display: block;
	font-size: 11px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	padding-left: 8px;
	background-image: url(../images/single-red-dot-bullet.png);
	background-position: left center;
	background-repeat: no-repeat;
}

.news-list #first-news{
	position: absolute;
	width: 135px;
	height: 55px;
	right: 20px;
	top: 25px;
	display: block;
	font-size: 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #fff;
}

.news-list #first-news a{
	text-decoration: none;
	color: #fff;
}

.news-list #first-news a:hover{
	text-decoration: underline;
	color: #fff;
	font-size: 10px;
}

.news-list #second-news{
	position: absolute;
	width: 135px;
	height: 55px;
	right: 47px;
	top: 85px;
	display: block;
	font-size: 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #fff;
}

.news-list #second-news a{
	text-decoration: none;
	color: #fff;
	font-size: 10px;
}

.news-list #second-news a:hover{
	text-decoration: underline;
	color: #fff;
}

.news-list #third-news{
	position: absolute;
	width: 135px;
	height: 55px;
	right: 74px;
	top: 145px;
	display: block;
	font-size: 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #fff;
}

.news-list #third-news a{
	text-decoration: none;
	color: #fff;
	font-size: 10px;
}

.news-list #third-news a:hover{
	text-decoration: underline;
	color: #fff;
}

.news-list #forth-news{
	position: absolute;
	width: 135px;
	height: 55px;
	right: 98px;
	top: 205px;
	display: block;
	font-size: 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #fff;
}

.news-list #forth-news a{
	text-decoration: none;
	color: #fff;
	font-size: 10px;
}

.news-list #forth-news a:hover{
	text-decoration: underline;
	color: #fff;
}

.news-list #more-news{
	position: absolute;
	width: 120px;
	height: 20px;
	left: 0px;
	bottom: 5px;
	display: block;
	font-size: 10px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #fff;
	border-top: 1px solid #fff;
}

.news-list #more-news a{
	text-decoration: none;
	color: #fff;
	font-size: 10px;
}

.news-list #more-news a:hover{
	text-decoration: underline;
	color: #fff;
}


/***************************************************************************************************************/
/*                                                End News List                                                */
/***************************************************************************************************************/
