/* Default font */
html { font-size: 12px; font-family: "Lucida Sans Unicode", arial, sans-serif; color: #333333; }

/* Default link */
a { color: #205527; }
a:hover { color: #008200; }

/* Default header */
h1, h2, h3 { font-weight: normal; }
h1 { font-size: 28px; color: #205527; margin-top: 5px; }
h2 { font-size: 20px; padding: 5px; color: #7ab800; border-bottom: 1px solid #7ab800; }
h3 { font-size: 13px; padding: 5px; background: url("../img/header.png") repeat-x 0% 0% scroll; border-bottom: 1px solid #999999; }

/* Heineken serif-box detail */
body { background: url("../img/container-stretch.png") repeat-y fixed; }
#serif-box { position: fixed; width: 6px; height: 11px; background: url("../img/container-bg.png") no-repeat fixed; }

/* Contains head, body and foot */
#main { width: 980px; margin: 0px auto 0px auto; padding: 0px 10px; }
#head { position: relative; height: 178px; border-bottom: 1px solid #205527; margin-bottom: 10px; background-repeat: no-repeat; background-attachment: scroll; background-position: 75% 0%; }
#body { min-height: 500px; }
#foot { color: #afafaf; clear: both; padding: 5px; text-align: center; width: 600px; margin: 10px auto; }
#foot div { color: #c3c3c3; padding-top: 2px; margin-top: 4px; border-top: 1px solid #afafaf; }

#home { background: url("../img/logo.png") no-repeat scroll; height: 91px; width: 237px; }
#home a { display: block; height: 100%; width: 100%; }
#logout { position: absolute; width: 300px; text-align: right; top: 0px; right: 0px; padding-top: 5px; color: #205527; }

#menu, #submenu { font-size: 14px; height: 24px; line-height: 24px; }
#menu a, #submenu a { display: block; padding: 0px 22px; float: left; text-decoration: none; }
#menu { background: url("../img/header.png") repeat-x 0% 100% scroll; }
#menu a:hover , #menu a.selected { color: #ffffff; background: url("../img/selected.png") repeat-x 0% 100% scroll; }
#submenu { background: url("../img/submenu.png") repeat-x 0% 100% scroll; }
#submenu a { color: #ffffff; padding: 0px 20px 0px 20px; }
#submenu a:hover, #submenu a.selected { color: #7ab800; }

#search { position: absolute; bottom: 5px; right: 0px; }
#search .submit { border: none; background: url("../img/search.png") no-repeat 0% 40% scroll; margin-right: 5px; width: 18px; height: 18px; cursor: pointer; vertical-align: middle; }

/* Detail block style */
.detail { border: 1px outset #dbdbdb; margin-bottom: 10px; }
.detail select, .detail input { max-width: 95%; }
.detail textarea { width: 98%; resize: none; }
.detail .submit { width: 100px; }
.detail th { width: 45%; text-align: right; background-color: #f0f0f0; border-right: 1px solid #c2c2c2; border-top: 1px solid #e0e0e0; }
.detail td { width: 55%; border-top: 1px solid #ededed; }
.detail span { color: #ff2b00; }

.left { float: left; }
.right { float: right; }
.narrow { width: 300px; }
.half { width: 485px; }
.wide { width: 660px; }

/* List layout */
th, td { white-space: normal; padding: 5px; }

.scrollable-list { border: 1px outset #999999; margin-bottom: 10px; }
.scrollable-list div { overflow-y: scroll; overflow-x: hidden; }

.scrollable-list .head, #static-header { background: url("../img/header.png") repeat-x 0% 0% scroll; border-bottom: 1px solid #999999; }
.scrollable-list .body { max-height: 540px; }
.scrollable-list .body tr:hover { background-color: #d7eab2; }

.scrollable-list th { text-align: left; vertical-align: bottom; border-right: 1px solid #ededed; color: #205527; }
.scrollable-list a { display: block; height: 100%; width: 100%; }
.scrollable-list th a { text-decoration: none; }
.scrollable-list img { padding: 1px; vertical-align: middle; }
.scrollable-list td { overflow: hidden; }
.scrollable-list tr { border-bottom: 1px solid #e0e0e0; }
.scrollable-list .asc { background: url("../img/ascending.png") no-repeat 98% 50% scroll; }
.scrollable-list .desc { background: url("../img/descending.png") no-repeat 98% 50% scroll; }
.scrollable-list span { color: #ff7900; }
.scrollable-list .outlet-size { width: 190px; }
.scrollable-list .error-size { width: 500px; }
.scrollable-list .property-size { width: 220px; }
.scrollable-list .check-size { width: 50px; }
.scrollable-list .date-size { width: 100px; }
.scrollable-list .half-size { width: 65px; }
.scrollable-list td.number-format { text-align: right; }
.scrollable-list td.pad25 { padding-right: 25px; }
.scrollable-list td.pad45 { padding-right: 45px; }
.scrollable-list td.pad65 { padding-right: 65px; }
.scrollable-list th.mid { text-align: center; }
.scrollable-list .no-data { padding: 5px; }
.even { background: #f0f0f0; }

.detail-overview { border: 1px outset #dbdbdb; margin-bottom: 10px; }
.overview-list th { width: 105px; text-align: right; background-color: #f0f0f0; border-right: 1px solid #c2c2c2; border-top: 1px solid #e0e0e0; }
.overview-list td { text-align: center; }

.navigation-block { margin-bottom: 10px;}

.navigation { background: url("../img/header.png") repeat-x scroll; border: 1px outset #999999; height: content; min-height: 24px; line-height: 24px; }
.navigation a, .navigation div { display: block; padding: 0px 10px; }
.navigation img { vertical-align: middle; }
.navigation .title { font-size: 13px; }

.filters { background-color: #d7eab2; border: 1px solid #7ab800; display:inline-block; padding:5px;}
.filters input { margin-left: 15px; margin-bottom:5px; margin-top:5px; line-height:24px;}
.filters label {display:block; float:left;}
.filters input[type=submit] { float:left; }

#notification { background-color: #d7eab2; border: 1px solid #7ab800; margin: 5px; padding: 5px; }
#information { background-color: #ffefb2; border: 1px solid #fecb00; margin: 5px; padding: 5px; }
#warning { background-color: #ffbfb2; border: 1px solid #ff2b00; margin: 5px; padding: 5px; }

/* 4-stage outlet creation */
#stage { font-size: 13px; height: 24px; line-height: 24px; margin-bottom: 10px; }
#stage a, #stage div { display: block; padding: 0px 5px; margin-right: 15px; float: left; text-decoration: none; }
#stage a { background-color: #d7eab2; }
#stage div { background-color: #ededed; }
#stage div.selected { background-color: #afd466; }

.tank-full { background: url("../img/tank-full.png") no-repeat 50% 50% scroll; width: 100%; height: 65px; text-align: center !important; line-height: 65px; margin-left: -5px; }
.tank-empty { background: url("../img/tank-empty.png") no-repeat 50% 50% scroll; width: 100%; height: 65px; text-align: center !important; line-height: 65px; margin-left: -5px; }

.head1 { background-image: url("../img/header1.png"); }
.head2 { background-image: url("../img/header2.png"); }
.head3 { background-image: url("../img/header3.png"); }
.head4 { background-image: url("../img/header4.png"); }
.head5 { background-image: url("../img/header5.png"); }
.head6 { background-image: url("../img/header6.png"); }
.head7 { background-image: url("../img/header7.png"); }