/*
    Styles for Esperance Ports Sea and Land web site
*/

html, body { margin: 0; min-height: 100%; }

body { color: #000000; background: #94b5c4 url(images/page-bg.jpg) bottom right no-repeat; font-size: 0.83em; margin: 0; }


/* header */
div#header { color: #11387e; /* background: #817377; */ background: #ffffff url(images/banner-pic01.jpg) top right no-repeat; height: 170px; margin: 0; padding: 0; }
div#header img { border: none; margin-top: 25px; margin-bottom: 25px; margin-left: 75px; margin-right: 0; padding: 0; float: left; }
div#header p { color: #ffffff; /* background: #795850; */ background: #11387e url(images/slogan-bg.jpg) top right no-repeat; height: 20px; line-height: 20px; margin: 0; padding-top: 10px; padding-bottom: 5px; padding-left: 35px; clear: left; }
div#header p img { margin: 0; }

div.communitypage { background-image: url(images/banner-pic02.jpg) !important; }
div.environmentpage { background-image: url(images/banner-pic03.jpg) !important; }
div.profilepage { background-image: url(images/banner-pic04.jpg) !important; }
div.informationpage { background-image: url(images/banner-pic05.jpg) !important; }
div.shippingpage { background-image: url(images/banner-pic06.jpg) !important; }
div.chargespage { background-image: url(images/banner-pic07.jpg) !important; }
div.formspage { background-image: url(images/banner-pic08.jpg) !important; }
div.tenderspage { background-image: url(images/banner-pic09.jpg) !important; }
div.securitypage { background-image: url(images/banner-pic10.jpg) !important; }
div.jobpage { background-image: url(images/banner-pic11.jpg) !important; }
div.contactspage { background-image: url(images/banner-pic12.jpg) !important; }
div.sitemappage { background-image: url(images/banner-pic13.jpg) !important; }


/* sidebar and menu */
#sidebar { color: #ffffff; background: #1b6f99; /* background: #5b94b1; */ }

ul#nav { padding: 0; margin: 0; list-style: none; font-family: Verdana, sans-serif; width: 149px; }
ul#nav li { padding: 0; margin: 0; list-style: none; display: inline; width: 149px; }

ul#nav a { display: block; color: #ffffff; background: #1b6f99; text-decoration: none; text-transform: uppercase; padding: 5px 10px; font-size: 0.83em; font-weight: normal; width: 129px; text-align: right; border-top: 2px solid #2b7fa9; border-bottom: 2px solid #0b5f89; }
ul#nav a:hover { border-top: 1px solid #0b5f89; border-bottom: 1px solid #2b7fa9; padding: 6px 10px; }

ul#nav li ul { position: absolute; left: -999em; padding: 0; margin-top: -26px; margin-bottom: 0; margin-left: 0; margin-right: 0; list-style: none; font-family: Verdana, sans-serif; width: 195px; border-top: 1px solid #0b5f89; border-right: 1px solid #0b5f89; border-left: 1px solid #0b5f89; border-bottom: none; }
ul#nav li ul a { color: #ffffff; background: #1b6f99; text-transform: none; font-weight: normal; width: 175px; text-align: left; border-top: none; border-bottom: 1px solid #0b5f89; }
ul#nav li ul a:hover { color: #ffffff; background: #0b5f89; border-top: none; border-bottom: 1px solid #0b5f89; padding: 5px 10px; }

ul#nav li:hover ul, ul#nav li.sfhover ul { left: 149px; }


/* content area */
#content { font-family: Arial, Helvetica, sans-serif; color: #666666; background-color: #ffffff; background-image: url(images/content-bg.gif); background-repeat: no-repeat; background-position: right bottom; padding: 30px; text-align: left; vertical-align: top; }
#content a:link { color: #0084af; }
#content a:visited { color: #0084af; }
#content a:hover { color: #99372c; }
#content p { font-family: Arial, Helvetica, sans-serif; color: #666666; }
#content li { font-family: Arial, Helvetica, sans-serif; color: #666666; padding-bottom: 5px; }
#content li img { vertical-align: middle; }

ul#pagemenu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; font-style: normal; font-weight: normal; text-align: center; text-transform: none; color: #ffffff; background: #61aecb; border: 1px solid #61aecb; padding: 10px; line-height: 2em; list-style: none; }
ul#pagemenu li { list-style: none; margin: 15px; padding: 0; display: inline; line-height: 2em; text-align: center; }
ul#pagemenu a:link { color: #ffffff; background: #61aecb; white-space: nowrap; }
ul#pagemenu a:visited { color: #ffffff; background: #61aecb; white-space: nowrap; }
ul#pagemenu a:hover { color: #ffffff; background: #61aecb; white-space: nowrap; }

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.72em; color: #0084af; font-weight: normal; margin-top: 0; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.44em; color: #61aecb; font-weight: bold; text-transform: uppercase; margin-top: 2em; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; color: #61aecb; font-weight: bold; margin-bottom: 0.25em; }

h1 + h2 { margin-top: 1em; }

hr { color: #1b6f99; background: #1b6f99; border: 1px solid #1b6f99; height: 1px; }

div.centredpics { text-align: center; width: 332px; margin: 0 auto; }
div.width2 { width: 684px; }
div.width3 { width: 1046px; }

div.centredpics div { clear: both; }

div.centredpic { width: 320px; margin-left: 20px; padding: 5px; text-align: center; border: 1px solid #cccccc; float: left; clear: none !important; }
div.centredpic img { border: none; margin: 0; padding: 0; width: 320px; }
div.centredpic p { font-size: 0.83em; margin-top: 0.25em; margin-bottom: 0; }

div.centredpics div.centredpic:first-child { margin: 0; }

fieldset { border: none; padding: 1em; }
fieldset span.label { font-weight: bold; display: block; float: left; width: 16em; padding-right: 0.5em; }
fieldset p.instruction { padding-left: 17em; }
ul.radiolist { list-style: none; margin: 0; padding: 0; }
ul.radiolist li { list-style: none; margin: 0; padding: 3px; }

dt { font-weight: bold; margin-top: 0.25em; }

.notice { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.83em; font-style: normal; font-weight: normal; text-align: center; text-transform: none; color: #ffffff !important; background: #61aecb; border: 1px solid #61aecb; padding: 5px; }

#thumbnailbox { width: 99%; }
.thumbnail { float: left; border: 1px solid #000000; margin: 3px; height: 70px; /*width: 70px;*/ text-align: center; line-height: 1.25em; }
.thumbnail img { border: none; }

.spacer { clear: both; }


/* data tables */
table.data { border: 1px solid #61aecb; border-collapse: collapse; margin-bottom: 2em; }
table.data caption { font-family: Arial, Helvetica, sans-serif; color: #666666; background-color: #ffffff; font-weight: bold; text-align: right; }
table.data th { border: 1px solid #61aecb; color: #ffffff; background: #61aecb; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }
table.data td { border: 1px solid #61aecb; color: #666666; background: #ffffff; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }

table.data th.center  { text-align: center; vertical-align: middle; }
table.data th.number  { text-align: right; }
table.data td.number  { text-align: right; }
table.data td.label   { font-weight: bold; background: #c3e5f4; }
table.data td.total   { font-weight: bold; background: #e7f7ff; text-transform: uppercase; }

table.data .status    { font-weight: bold; background: #ffff99; text-transform: uppercase; font-size: 1.2em; text-align: center; vertical-align: middle; }
table.data .shipname  { font-weight: bold; }
table.data .comment   { font-style: italic; font-weight: normal; }
table.data .berth     { white-space: nowrap; }
table.data .cargo     { white-space: nowrap; }

table.data td p { margin-top: 0 !important; }

table.withsubsections { border: 1px solid #61aecb; border-collapse: collapse; }
table.withsubsections th { border: 1px solid #61aecb; color: #ffffff; background: #61aecb; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }
table.withsubsections td { border-top: none; border-bottom: none; border-left: 1px solid #61aecb; border-right: 1px solid #61aecb; color: #666666; background: #ffffff; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }
table.withsubsections td.subheading { border-top: 1px solid #61aecb; border-bottom: none; border-left: 1px solid #61aecb; border-right: 1px solid #61aecb; color: #666666; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: underline; padding: 3px; text-align: left; vertical-align: top; }
table.withsubsections td.rate { text-decoration: none; text-align: left; vertical-align: bottom; white-space: nowrap; }


/* maps */
img.map { border: 1px solid #ffffff; margin-top: 0; margin-bottom: 10px; margin-left: 0; margin-right: 0; }

div.mapkey { border: 1px solid #666666; width: 318px; margin-left: 10px; padding: 0; float: left; }
div.mapkey h3 { margin: 0; padding: 0.25em; color: #ffffff; background: #666666; }

div#mapkey-berths { border-color: #ff0000; }
div#mapkey-berths h3 { color: #000000; background: #ff0000; }
div#mapkey-facilities { border-color: #ffff00; }
div#mapkey-facilities h3 { color: #000000; background: #ffff00; }


/* footer */
#footer { color: #ffffff; height: 20px; text-align: right; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.83em; padding: 5px; margin: 0; border-top: 4px solid #11387e; }


/* front page */

a.featurelink { display: block; height: 68px; line-height: 68px; font-size: 1.2em; width: 185px; text-align: center; float: left; margin-right: 68px; }



/*********************
* instant news
**********************/
#newsitems .newsheading { font-family: Arial, Helvetica, sans-serif; font-size: 1.44em; color: #61aecb; font-weight: bold; text-transform: uppercase; padding-bottom: 0.5em; }
#newsitems .newsheading p { font-family: Arial, Helvetica, sans-serif; font-size: 1.44em; color: #61aecb; font-weight: bold; text-transform: uppercase; }
#newsitems .newsdate { font-family: Arial, Helvetica, sans-serif; font-size: 1.44em; color: #61aecb; font-weight: bold; text-transform: uppercase; display: none; }

#newsitems p,#newsitems ul,#newsitems ol,#newsitems li { font-family: Arial, Helvetica, sans-serif; color: #666666; }

/*********************
* job management
**********************/
table.jobs { border: 1px solid #61aecb; border-collapse: collapse; }
table.jobs th { border: 1px solid #61aecb; color: #ffffff; background: #61aecb; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }
table.jobs td { border: none; color: #666666; background: #ffffff; font-family: Arial, Helvetica, sans-serif; padding: 3px; text-align: left; vertical-align: top; }

table.jobs th.number { text-align: right; }
table.jobs td.number { text-align: right; }

/*********************
* print tweaks (mostly to avoid white text disappearing)
**********************/
@media print {
  #content { color: #000000; }
  table.data { page-break-inside: avoid; }
  table.data th,table.data td { color: #000000; background: #ffffff; }
  #pagemenu,#pagemenu a:link,#pagemenu a:visited,#pagemenu a:hover { color: #000000; background: #ffffff; }
  #newsitems p,#newsitems ul,#newsitems ol,#newsitems li { color: #000000; background: #ffffff; }
  .notice { color: #000000; background: #ffffff; }
  #sidebar { display: none; }
  #footer { color: #000000; background: #ffffff; }
}