@charset "utf-8";

/* CSS reset */
* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; padding:0; margin:0; border:0; outline:0;}
html, body, div, span, object, img, ins, sub, sup, b, i, ol, ul, li, label, table, caption, tbody, tfoot, thead, tr, th, td, footer, header, menu, nav, button {vertical-align:baseline; background:transparent; margin:0; padding:0;}
/* END CSS reset */

body {background-color:#fff; color:#22386f; font-family: Calibri, 'CarlitoRegular', Candara, 'Segoe UI', Optima, Arial, Helvetica, sans-serif; font-size:21px; line-height:1.3em;}
html, body {height:100%;}

@font-face {
  font-family:CarlitoRegular;
  src: url(https://forwardingdirect.com/fonts/Carlito-Regular.ttf);
}

/* COLOURS Light blue #2797c9 Dark blue #22386f Text grey #666666 Dark grey #1c2125 */

/* GLOBAL */
#wrapper {width:100%; margin:0px auto; max-width:1280px; background-color:#fff; border:0px; position:relative; top:0;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:block; height:1px; border:0; border-top:1px solid #22386f; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}

p, h1, h2, h3 {margin: 0 0 20px 0;}
h1, h2, h3 {font-weight:bold;}
h1 {font-size:1.3em;}
h2 {font-size:1.2em;}
h3 {font-size:1.1em;}
h3.schedtitle, p.schednotes {text-align:center;}
p.schednotes {color:#2797c9; font-size:.9em;}
h3.schedprint {display:none;}
.bott {margin-bottom: 0.1em;}
a:link, a:visited {color:#2797c9;}
a:active, a:hover, a:focus {color:#666666;}
ul {display:table; margin:0 0 1em 1em;}
ul.nested {display:table; margin:0 0 1em 0;}
.point9 {font-size:.9em;}
.detail {display:table; clear:left;}
.clear-left {clear:left;}
.clear-right {clear:right;}
.float-left {float:left;}
.float-right {float:right;}
.w120 {width:120px; display:inline-block;}
.w150 {width:150px; display:inline-block;}
.w180 {width:180px; display:inline-block;}
.zero {padding:0; margin:0;}
.no-br, .no-br-spc {white-space:nowrap;}
.no-br-spc {margin:0 .2em 0 .2em;}
.bl {color:#2797c9;}
.bl-bold {color:#2797c9; font-weight:bold;}
a.bl:link, a.bl:visited, a.bl:active, a.bl:hover, a.bl:focus {color:#2797c9;}
.drk-bl, a.drk-bl:link, a.drk-bl:visited, a.drk-bl:active, a.drk-bl:hover, a.drk-bl:focus {color:#22386f;}

/* MOBILE */
.lowres {display:inline;}
.hires {display:none;}
.lowres:hover, .lowres:focus, .hires:hover, .hires:focus {color:#22386f;}
header {width:100%; padding:0; position:relative; margin:10px 0 0 0;}
#logo, nav, #quick-contact {display:inline-block;}
#logo {width:100%; text-align:center; padding:10px 15px 10px 15px; clear:both;}
#logo img {width:100%; max-width:315px; height:auto;}
#quick-contact {display:none;}
a:active, a:hover, a:focus {color:#22386f;}
nav {clear:both; width:100%; position:static;}
nav ul {list-style:none; margin:0; width:100%;}
nav ul li {float:left; width:50%; text-align:center; padding:.3em 0 .3em 0; overflow:hidden; white-space:nowrap;}
nav ul li a:link, nav ul li a:visited {
	display: inline-block;
	width:100%;
	color:#2797c9;
	font-size:1em;
	font-weight:bold;
	text-decoration: none;
   }
.bullet {margin:0; padding:0;}

#page-title {width:100%; display:table; clear:both; padding:0 10px 0 15px;}

#content-pad {width:100%; display:block; margin:0; padding:0; height:0; clear:both;}   
#content-left, #content-right, #contact-left, #contact-right {
	display:inline-block;
	width:100%;
	padding:0 10px 0 15px;
	clear:left;
	float:left;
}
#content-full {
	display:table;
	width:auto;
	padding:0 10px 0 15px;
	clear:both;
	margin:0px auto;
}

#contact-left {}
#contact-right {}
.credit-app-low {display:inline;}
.credit-app-high {display:none;}

#feature {width:100%; display:table; clear:both; padding:0 0 20px 0;}
.feature-left, .feature-right, .feature-full {display:inline-block; width:100%; clear:left; float:left; padding:20px 10px 0px 15px;}
.feature-right {color:#2797c9;}
.feature-left a, .feature-full a {color:#666666;}
.feature-right a {color:#2797c9;}
.feature-full {display:none;}

.feature-nav-left, .feature-nav-right {width:100%; display:inline-block; float:left; clear:left; padding:20px 0 0 0;}
.feature-nav-left a, .feature-nav-right a {display:table; width:220px; padding:0; margin:0px auto; font-size:1.5em; color:#2797c9; position:relative;}
.feature-nav-left a img, .feature-nav-right a img {float:left; width:65px; height:65px; margin:0 10px 0 0;}
.feature-nav-text {display:table; float:left; position:relative; top:20px;}

.graphic_320, .graphic_480, .graphic, #map {width:100%; display:table; clear:both;}
.graphic_320 img, .graphic_480 img, .graphic img, #map img {display:block; width:100%; height:auto;}
.graphic_480, .graphic, #map {display:none;}

/*RESOURCES*/
ul.resources-left, ul.resources-right {list-style-type:none; margin:0px auto; float:left; clear:both;}
li.resource {display:inline-block; float:left; clear:left;}
li.link {display:inline-block; float:left; clear:left; margin: 0 0 20px 0;}

.google {border: #666666 solid 1px;}
input[type=text].google-box {width:auto; clear:none;}
button.google {margin:0 0 0 1.2em;}


table.links {width:auto; margin:0px auto; margin-bottom:1em;}
table.links a {font-weight:bold; padding:0 1em 0 0;}
table.links td {vertical-align:top; padding:.3em 0 0 0;}
table.links img {margin:0; padding:0;}
table.links td.google-cell {padding-top:1.2em; text-align:center;}
input[type=text].google-box {width:100%;}
button.google {display:inline-block; font-weight:bold; color:#fff; margin:.7em 0 0 0; padding:.2em .4em; background: #859874; cursor:pointer;}

/* CONTACT */
#contact-left ul, #contact-right ul {display:table; width:auto; margin:0 0 1em 0; list-style-type:none; padding:0;}
.contact-label, .email-label {float:left; width:140px; font-weight:bold; white-space:nowrap; clear:left;}
.addresses {display:block; width:100% !important; clear:both;}
a.details {display:block; background:url(../images/arrow.png) no-repeat right center; text-decoration:none; width:165px;}
#contact-right h3 {clear:left;}


/* SCHEDULES */
h1.schedhead {display:table; margin:0px auto;}
ul.sched-links {display:table; margin-left:0; clear:right;}
ul.sched-links li {float:left; margin-left:1.5em; margin-top:.6em;}
ul.sched-links li a {white-space:nowrap; color:#22386f;}
ul.schedlist {display:table; padding:0 0 0 1.5em; margin:0px auto; height:auto;}
.sched {display:table; width:auto; margin:0px auto; font-size:.8em; color:#22386f;}
.sched td {padding:2px; text-align:center; white-space:nowrap; border-left:1px solid #ffffff;}
td.hd {font-weight:bold; white-space:nowrap; color:#ffffff; background:#22386f;}
td.vessel {text-align:left; white-space:nowrap; padding-left:10px; text-transform:uppercase;}
td.vessvoy {font-weight:bold; text-align:left; white-space:nowrap; padding-left:10px;}
td.dest, td.dest-hd {font-weight:bold; color:#22386f; text-align:left; background-color:#fff;}
td.dest-hd {padding-top:1em;}

/* ALTERNATING SCHED COLOURS */
.row-one {background-color:#ecf4fc;}
.row-two {background-color:#ffffff;}



/* FOOTER */	
#footer {color:#ffffff; background-color:#22386f; width:100%; display:table; clear:both; font-size:.9em;}
#footer a {color:#ffffff;}
.foot-contact {display:table; clear:both; background-color:#22386f; margin:0px auto; padding:20px 10px 20px 0px; line-height:1.1em;}
.foot-contact ul {display:table; width:auto; margin:0px auto; list-style-type:none; padding:0;}
.foot-contact .city {display:inline-block; width:110px; font-weight:bold; white-space:nowrap;}
.foot-member {display:inline-block; clear:both; width:100%; text-align:center; margin:0; padding:0;}
.foot-member img {width:194px; height:78px;} /* actual is 243x97 */
.to-top {display:table; clear:both; background-color:#22386f; padding:0 0 10px 0; margin:0px auto; text-align:center;}
.to-top li a {display:block; width:auto; text-decoration:none;}	
.foot-icon {width:40px; height:40px; position:relative; top:5px;}
.foot-label {display:block; font-weight:bold; font-size:.8em; margin:-3px 0 0 0;}
.foot-terms {display:table; margin:0px auto; clear:both; padding:20px 0 10px 0;}
.foot-terms p {display:table; margin:0; padding:0;}

/*TERMS AND CONDITIONS*/
#terms p {text-align:justify; font-size:.9em;}
a.terms-top {background:url(../images/arrow_up.png) no-repeat 0px center; color:#22386f; padding:0 0 3px 20px; clear:both; font-size:.8 em; margin:0px auto; margin-bottom:17px;}
a.low, a.high {display:table;}

/*SAWD*/
#sawd, #sawd a {clear:both; width:100%; display:none;}
   
/*HIGHER RESOLUTIONS*/

 /* iPhone 4 landscape */   
@media only screen and (min-width:480px) {
nav ul li {width:25%;}
nav ul li a {padding:0px;}
.feature-nav-left, .feature-nav-right {width:45%;}
.feature-nav-right {width:55%; clear:none;}
.feature-nav-left a, .feature-nav-right a {width:auto;}
.graphic_320 {display:none;}
.graphic_480 {display:block;}
#footer {font-size:.9em;}
.foot-contact {padding:17px 10px 15px 15px; line-height:1.4em;}
.foot-icon {top:7px;}

/* CONTACT and FORM */
form input[type=text], form textarea {width:210px; padding:8px 0px 8px 5px;}
#contact-left, #contact-right {padding:0 10px 20px 80px;}
.contact-label, .email-label {width:150px;}

}


@media only screen and (min-width:568px) {
#page-title {padding:10px 0 0 25px;}
#content-pad {height:10px;}   
#content-left, #content-right, #content-full {padding:0 20px 0 25px;}
#feature {}
.feature-left, .feature-right, .feature-full {padding:25px 20px 0 25px;}
.graphic_320, .graphic_480 {display:none;}
.graphic, #map {display:table;}
.foot-contact {padding:20px 10px 15px 25px;}
.to-top {padding:0 25px 0 0; top:10px;}
/*FORM*/
form label {padding:6px 0 0 0;}
form input[type=text], form textarea {width:230px;}
#contact-left, #contact-right {padding:0 10px 20px 100px;}
}


@media only screen and (min-width:667px) {
.feature-nav-left a, .feature-nav-right a {font-size:1.7em;}
.feature-nav-left a img, .feature-nav-right a img {width:75px; height:75px;}
.feature-nav-text {top:24px;}
.foot-contact {float:left; width:50%; padding:17px 0 0 0;}
.foot-member {width:50%; margin:20px 0 0 0; clear:none; float:right;}
.foot-terms {width:50%; clear:right; float:right; padding:10px 0 10px 0;}
.foot-terms p {line-height:1.1em; margin:0px auto;}
.foot-terms a {font-size:1em;}
.to-top {display:none;}
form input[type=text], form textarea {width:270px;}
}

@media only screen and (min-width:768px) {
#wrapper {top:10px;}
#logo {width:325px; float:left; padding:0 0 0 30px; clear:none;}
#logo img {width:315px; height:70px;}
#quick-contact {width:auto; float:right; display:inline-block; background:url(../images/icon_phone.png) no-repeat left center;}
#quick-contact ul {list-style:none; margin:0; line-height:1.1em; padding:0 10px 0 40px;}
#quick-contact ul li {padding:0 .5em 0 0; font-size:.8em;}
.tel-city {display:inline-block; width:100px;}
nav ul {margin:10px 0 0 0; width:100%;}
nav ul li a:link, nav ul li a:visited {font-size:1.2em;}
.bullet {padding:0 0 2px 0;}
#page-title {padding:10px 0 0 35px;}
#content-left, #content-right, #content-full {padding:0 25px 0 35px;}
#feature {padding:0 0 30px 0;}
.feature-left, .feature-right, .feature-full {padding:35px 25px 0 35px;}
.feature-nav-left a {padding:0 0 0 10%;}
.feature-nav-right a {padding:0 10% 0 0;}
.to-top {padding:0 35px 0 0;}

/* SCHEDULES */
.sched-block {height:11em;}
.sched td {padding:3px 5px;}
td.dest-hd {padding-top:1em;}

/*FORM*/
#contact-left, #contact-right {padding:0 50px 20px 170px;}
.detail {clear:none;}
.foot-member {margin:10px 0 0 0;}
#footer {padding:0 0 20px 0;}
form input[type=text], form textarea {margin:0 0 10px 0; width:230px;}
form textarea, form input[type=submit] {margin-bottom:15px;}
}


@media only screen and (min-width:800px) {
/*RESOURCES*/
ul.resources-right {clear:right; padding:0 0 20px 30px;}
}


@media only screen and (min-width:1024px) {
body {font-size:23px;}
header {margin: 15px 0 0 0;}
#logo {padding:0 0 0 40px;}
.lowres {display:none;}
.hires {display:inline;}
#quick-contact {background:url(../images/icon_phone_sm.png) no-repeat 0px 4px; }
#quick-contact ul {padding:0 15px 0 30px;}
#quick-contact ul li {float:left; font-size:.9em;}
.tel-city {width:auto; font-weight:bold;}
nav {width:auto; float:right; clear:none; position:absolute; top:30px; right:0;}
nav ul {width:auto;}
nav ul li {width:auto; margin:0px auto; padding:5px 25px 5px 5px;}
nav ul li a:link, nav ul li a:visited {font-weight:normal; width:auto; font-size:1.4em;}
#page-title {padding:20px 0 0 40px;}
#content-pad {height:20px;}   
#content-left, #content-right, #content-full {width:50%; padding:0 30px 0 40px;}
#content-full {width:auto;}
#content-right {clear:none;}
#feature {}
.feature-left, .feature-right, .feature-full {width:50%; padding:40px 30px 0 40px;}
.feature-right {clear:none;}
.feature-full {width:100%;}
.foot-member {margin:20px 0 0 0;}
/*RESOURCES*/
ul.resources-right {clear:right; padding:0 0 20px 100px;}
/*FORM*/
#contact-left, #contact-right {width:40%; padding:0 10px 0 80px;}
#contact-left {padding:0 10px 20px 80px;}
#contact-right {width:60%; padding-right:0; clear:none;}
.credit-app-low {display:none;}
.credit-app-high {display:inline;}
.foot-contact .city {width:120px;}
form input[type=text], form textarea {margin:0 0 10px 0; width:300px;}
form textarea, form input[type=submit] {margin-bottom:15px;}
/*SCHEDULES*/
.sched {max-width:1000px; font-size:.9em;}
.sched td {padding:4px 10px;}
td.dest-hd {padding-top:1em;}
ul.sched-links li {margin-top:auto;}
}


@media only screen and (min-width:1220px) {
body {font-size:24px;}
#quick-contact {background:url(../images/icon_phone_sm.png) no-repeat left center; }
#quick-contact ul {padding:0 40px 0 30px;}
nav {top:27px;}
nav ul li {padding:5px 50px 5px 5px;}
nav ul li a:link, nav ul li a:visited {}
.bullet {padding:0 0 3px 0;}
.feature-nav-left a, .feature-nav-right a {font-size:1.8em;}
.feature-nav-left a img, .feature-nav-right a img {width:80px; height:80px;}
.feature-nav-text {top:26px;}
.foot-contact .city {width:125px;}
/*FORM*/
#contact-left, #contact-right {padding-left:150px;}
/*SCHEDULES*/
.sched {max-width:1100px;}
}

/* ----- PRINT STYLES----- */

@media print {
body {font-size: 12pt; line-height: 1.3;}
html, body {height:auto;}
div {margin:0px; padding:0px;}
nav {display:none;}
#header {height:100px;}
#logo, #logo img, #logo a {background:none; clear:none; display:table; float:left; width:315px; height:70px; margin:0px;}
#quick-contact {width:auto; float:right; display:inline-block; background:none; padding:0; margin:0;}
#quick-contact ul {list-style:none; margin:0; line-height:1.5em; padding:12px 10px 0 0; color:#000;}
h1 {font-size: 20pt; margin-top: 12pt;}
h2 {font-size: 18pt;}

#content {padding:0;}
.content-left, .content-right, .contact-block, .gr-about, .yel-about {display:inline; width:100%; vertical-align:auto; padding:0px; margin:0;}
.content-left ul, .content-right ul, .contact-block ul {display:block; margin-top:15px; margin-left:25px;}
.sched-block {display:inline-block; width:50%; float:left; height:auto; margin:0px; padding:0px;}
ul.schedlist {margin:0px; padding-left:120px;}
.contact-block, .contact-table {margin:auto; padding:0px;}
.contact-table {margin-bottom:25px;}
.contact-table p {margin-bottom:5px;}
.contact-block {width:50%; float:left;}
#feature, .feature-left, .feature-right {color:#000000;}
.graphic, .graphic_320, .graphic_480, .feature-full, .feature-nav-left, .feature-nav-right {display:none;}
.sched {width:100%; font-size:10pt; margin:10px 0 0 0; padding:0;}
h3.schedtitle {color:#000; margin-top:1em;}
p.schednotes {color:#000;}
h1.schedprint {font-size:12pt; margin:0; line-height:14pt; display: inline-table; position:relative; top:-22px; left:30px;}
.sched td {padding:0px;}
.med, h1.schedprint, table.sched, table.sched td, table.sched td.dest, table.sched td.dest-hd, table.sched td.vessel, table.sched td.hd {color:#000; background:none;}
td.dest-hd {padding-top:10px;}
.foot-contact {display:table; width:92%; clear:both; float:right; background:none; margin:0; padding:0;}
.foot-contact ul {width:100%; float:none; clear:both; margin:0; padding:0;}
.foot-contact ul li {display:inline-block; width:33%; float:left; margin:0; padding:0;}
.foot-contact .city {width:auto;}
#contact-left, #contact-right, .foot-member, .foot-terms, .to-top, #sawd {display:none;}
* {color:#000000;}

}