/*
 * $Id: vzacommon.css,v 1.4 2009/06/15 10:29:05 cvs Exp $
 *
 * $Log: vzacommon.css,v $
 * Revision 1.4  2009/06/15 10:29:05  cvs
 * Most css files brought under this one file.
 * Added support for new pages.
 *
 * Revision 1.3  2006/08/11 15:32:38  cvs
 * Changed the background and merged in the contact list styles
 *
 */

*           {margin:0; padding:0;}
h1,h2,h3,
h4,h5,h6    {margin:.5em 0;}
blockquote  {margin:.3em 3em;}
dd,
ul,ol,li    {margin:.3em 0 .3em 2em;}
p           {margin:.3em 0;}
hr          {margin:.3em auto;}

.number,
.right        {text-align:right;}
.left         {text-align:left;}
.frame        {background-image:none; background-color:transparent; border:none; margin:0px;}
.tip          {color:#444; background-color:#BDD; font-size:1em; text-align:center; margin:0px 4px}
.bold         {font-weight:bold;}
.underline    {text-decoration:underline;}
.valid        {color:#0A0;}
.invalid      {color:#F00;}
.danger       {background-color:#F66;}
.warning      {background-color:#ED0;}
.ok           {background-color:#6C6;}
.errormsg     {background-color:#FFF!important; border:2px solid #F00; color:#000; text-align:left; width:80%; margin:auto;}

body
{
  font-family:"arial", "verdana", "helvetica", sans-serif;
  font-size:medium;
  background:#768EBA url(/images/bg_body.jpg) center fixed no-repeat;
  height:100%;
}

a             {text-decoration:none; font-style:italic;}
a img         {border:none;}
a:link        {color:#00F;}
a:visited     {color:#80F;}
a:hover       {color:#FD0;}
a:active      {color:#0F0;}

br.cb         {clear:both;}
br.cl         {clear:left;}
br.cr         {clear:right;}

div.body          {margin:0 auto; text-align:center; height:100%;}
div.page          {margin:0 auto; width:90%; }
div.title         {position:relative; height:60px; width:90%;}
div.textshadow    {position:absolute; width:inherit; top:0px; left:0px; opacity:0.20; filter:alpha(opacity=20);}
div.shadowtext    {position:absolute; width:inherit; top:-3px; left:-3px;}
div.content       {margin:0 auto; border-top:10px solid #326A99; overflow:auto;}
div.content_bg    {background:#EEE;}
div.contentleft,
div.contentright  {float:left; width:49%;}
div.contentfooter {clear:both; float:left;}
div.contentinner  {margin:0 auto;}
div.relative      {position:relative; width:100%;}
div.exampletext   {position:absolute; width:100%; top:0; left:0; opacity:0.45; filter:alpha(opacity=45);}
div.exampletext p {margin:20px auto; text-align:center;}

fieldset  {border:1px solid orange; -moz-border-radius:8px;}
fieldset legend   {text-indent:5px;}

#footer       {}

/* h1, h2, h3, h4, caption  {color:#FFA500;} */
h1, h2, h3, h4, caption, legend  {color:#D50;}
h5, h6        {color:#800;}

h1.veil   {width:60%;}
div.veil  {background-color: white; padding:2px; opacity:0.10; filter:alpha(opacity=10); width:80%;}
/*h1.text {position: absolute; left:-2px; top:-2px; width:100%;}
h1 span.veil {position: relative; left: 0; top: 0; background-color: white; padding:2px; opacity:0.10; filter:alpha(opacity=10);}*/
h1 span.text{}
h1 span div {position: absolute; left: 0; top: 0; height:100%; width: 100%;}
h2 span {background-color: #FFF; padding:0 2px; opacity:0.40; filter:alpha(opacity=40);}

dt            {color:#00F;}



table.list            {background-color:#DDD; margin:14px auto; border-spacing:1px;}
table.list tbody th   {background:#DDD;}
table.list thead th,
table.list tbody td   {background-color:#EEE;}
table.list td.danger  {background-color:#F66;}
table.list td.warning {background-color:#ED0;}
table.list td.ok      {background-color:#6C6;}
tbody tr.odd          {background-color:#FFF;}
tbody tr.even         {background-color:#F8F8F8;}

table.datatable       {padding:2px;}
caption               {font-size:large;}
caption span.tip      {color:#BBB; font-size:smaller; border:none;}
th                    {background:transparent url(/images/bg_subhead.png) repeat-x; padding:0px 2px; font-size:11pt; font-weight:bold; text-align:center;}
td                    {font-size:10pt; padding:0px 3px; text-align:left;}
td.fill               {background:transparent; width:4px; padding:0;}



/**
 * Forms only:-
 * to make a difference for the user to see when they can fill in data or not
 */
div.form_outer        {margin:0; width:100%; text-align:left; overflow:auto;}
form                  {background:#C1D5EF; margin:4px;}
form *.hilite         {background:#DEF;}
form div.form_inner   {padding:10px; text-align:center;}
form table            {background-color:transparent; margin:4px auto; border:none; border-spacing:1px;}
form table.list       {background-color:#A8BCD7;}
form caption          {color:#FFF; font-weight:bold;}
form h2,
form h3,
form h4               {color:#FFF;}
form tbody tr         {background-color:#EFEFF8;}
form tbody tr.odd     {background-color:#FFF;}
form tbody tr.even    {background-color:#F8F8F8;}
form tbody tr:hover   {background-color:#FDC;}
form thead th,
form tbody th         {background-color:transparent; background-image:none; color:navy;}
form tbody td         {background-color:transparent; background-image:none;}
form td               {border:none;}
form td input[type=text] {border:none; margin:0; padding:0; background-color:transparent; font-size:inherit; display:block;}
form label            {color:navy; font-size:10pt; font-weight:bold;}
form label.enabled    {color:navy;}
form label.disabled   {color:silver;}
form input[type=text] {border:1px solid silver; padding:0px 2px; background-color:#FFF;}
form input[type=checkbox],
form input[type=radio]{width:12px; background-color:transparent;}
form fieldset         {border:1px solid #FFF;}
form fieldset legend  {color:#FFF;}

div.buttons           {clear:both; padding:10px; text-align:center; background:#C1D5EF;}

td input,
td select,
td textarea           {width:100%; background-color:transparent; border:none; font-size:inherit;}

input.hilite,
select.hilite,
textarea.hilite       {background-color:#FFD; color:#000; border:1px solid silver;}

input.error,
select.error,
textarea.error        {background-color:#FFD; color:#F00; border:1px solid #F00;}

button                {font-size:11pt; font-family:sans-serif; color:#CCFFFF; background:#686898 url(/images/bg_button.gif); border-color:#008B8B;}
input                 {border:1px solid silver; padding:0px 2px; background-color:#FFF; font-size:8pt;}
input.enabled         {background-color:white;}
input.disabled        {background-color:#CCC;}
textarea              {border:1px solid silver; padding:0px 2px; overflow:auto;}
select                {border:1px solid silver; padding:0px 2px; background-color:white;}
select.enabled        {border:1px solid silver; padding:0px 2px; background-color:white;}
select.disabled       {border:1px solid silver; padding:0px 2px; background-color:#CCC;}
.writeable            {background-color:#FFF; border:1px solid silver; }
.obligatory           {background-color:#FFC; border:1px solid #F00; }

div.vignette          {opacity:0.85; filter:alpha(opacity=85);}


/* Contact List */
td.status             {color:blue; font-weight:bold;}
td.payment            {color:red; font-weight:bold;}
td.name               {color:navy;}
td.address            {color:#006400;}
td.telephone          {color:#006400;}
td.mobile             {color:#006400;}

/*
td.email      {color:blue; cursor:pointer; font-style:italic;}
td.email:hover {color:maroon;}*/

/*
 * tabbed sheets
 *
 * tabsheetsbody  - container for tabsheets: includes tabs and sheets
 * tsmenu         - container for the tabs
 *                  comprises 4 elements:
 *                  1 <UL>  contains the list of tabs
 *                  2 <LI>  each tab element, display:block / float:left, forces horizontal display
 *                  3 <DIV> allows a extendable background to be merged with the <LI> background
 *                  4 <A>   holds the tab menu text
 * tsframe        - container for the sheets
 */
div.tsmenu
{
  text-align:left;
  height:21px;
  background:url(/images/tab_top_edge.gif) repeat-x bottom;
}

div.tsmenu ul
{
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}

div.tsmenu li
{
  margin:0;
  display:block;
  float:left;
  padding:0px 2px;
  line-height:16px;
  background: url(/images/tab_left.gif) no-repeat left top;
  border-bottom:1px solid #C3D1E5;
}

div.tsmenu li.default
{
  background:url(/images/tab_left.gif) no-repeat left top;
}

div.tsmenu li.selected
{
  background:url(/images/tab_left_selected.gif) no-repeat left top;
  border-bottom:1px solid #326A99;
}

div.tsmenu div
{
  background: url(/images/tab_right.gif) no-repeat right top;
  padding:2px;
  font-size:medium;
  font-weight:bold;
}

div.tsmenu div.default
{
  background:#BBB url(/images/tab_right.gif) no-repeat right top;
}

div.tsmenu div.selected
{
  background:#326A99 url(/images/tab_right_selected.gif) no-repeat right top;
}

div.tsmenu a
{
  padding:0px 6px 0px 2px;
  font-size:medium;
}

div.tsmenu a.default
{
  color:#768EBA;
}

div.tsmenu a.selected,
div.tsmenu a.selected:link
{
  color:#FFF;
}

div.tsmenu a.default:link
{
  color:#768EBA;
}

div.tsmenu a.default:hover,
div.tsmenu a:active
{
  color:#FFF;
}

div.tsframe
{
  width:100%;
  border-top:10px solid #326A99;
}

div.tsframe div.selected
{
  display:block;
  margin:4px auto;
  width:98%;
  text-align:left;
  overflow:auto;
}

div.tsframe div.default
{
  display:none;
}
/* endof tabsheets */

/****************************** Individual Pages ******************************/
/**
 *  Home
 */
#home           {}
#home div.contentleft   {width:49%;}
#home div.homeleft      {width:96%; margin:0 auto; color:#FFF; text-align:left; }
#home div.homeright     {width:96%; margin:0 auto; background-color:#888; text-align:center; }
#home div.homeright img {width:100%; border:1px solid #888;}
#home div.picspanel     {float:right; position:relative; width:260px; margin-left:30px; text-align:center;}
#home div.bg_picspanel  {position:absolute; top:0px; left:0px; height:100%; width:100%; background:#FFF; opacity:0.3; filter:alpha(opacity=30);}
#home div.picspanel a         {display:block;}
#home div.picspanel a:visited {color:#00F;}
#home div.picspanel a:hover   {color:#FD0;}
#home div.picspanel a div     {position:relative; height:100%;}
#home div.picspanel p   {font-size:large; font-weight:bold; margin:3px auto;}
#home div.picspanel p.announcement {text-decoration:underline;}
/* endof home */

/**
 * Contact - public contacts oage
 */
#contact                {margin:0 auto; width:760px;}
#contact .contact       {width:98%; text-align:right;}
#contact #leftcol       {width:54%; float:left;}
#contact #rightcol      {width:42%; float:right;}
#contact #footer        {width:98%; clear:both; text-align:center;}
#contact table.list     {background:transparent; width:80%; margin:20px auto; border-collapse:collapse;}
#contact table.list tr  {height:2em;}

/* endof contact */



/**
 * Logs
 */
/* table#day_overview th {font-size:12px;} */
/* table#day_overview td {font-size:11px;} */

/* endof Logs */



/**
 * Planning
 */
div.rosta_column {float:left; margin:auto; width:640px; text-align:center;}
div.rosta_column table,
div.rosta_column caption {margin:0 auto;}
div.rosta_column table {border-collapse:collapse;}

div.safety {font-size:small;}
div.safety * {background:white; margin:auto;}
div.safety table {border-collapse:collapse; background-color:transparent; width:auto;}
div.safety table th {vertical-align:top; text-align:left; background-image:none; background-color:transparent; font-weight:normal;}
div.safety table td {font-size:small;}
div.safety ul {text-align:left; list-style:none;}
div.safety em {font-size:large; font-weight:bold; color:#F00;}

div#od_column {float:right; margin:auto; width:300px; text-align:center;}
button.od_column {margin:10px auto;}
div#od_frame  {position:relative; text-align:left; border:1px solid maroon;}
div#instructions {position:absolute; visibility:hidden;}
div#odt {position: relative; margin:0; font-size:9pt; overflow:auto;}
div#odt ul,
div#odt ol,
div#odt li {margin-left:1em;}
div#announcements {position:absolute; visibility:hidden; overflow:hidden; font-size:small; width:298px;}
div.announce      {position:relative; margin:5px;}
form.announce {margin:0;}
form.announce button {float:right; font-size:10pt; margin-top:10px;}
form.announce input[type=checkbox] {margin-top:2px;}
form.announce textarea.announce_msg {height:36pt; width:268px; margin:0px auto; font-size:10pt; font-family:inherit;}
div.msg_list {position:relative; overflow:auto; width:100%;}
div.msg_item {position:relative; margin:5px; border:1px solid #888;}
div.msg_item table {border-collapse:collapse; width:100%;}
div.msg_item table thead tr {background:#00B; color:#FFF;}
div.msg_item table tbody tr {background:#FFF; color:#000;}

/* .feestday {background-color:#F8F8E0;} */
.feestday {color:#A84;}
/* tr.feestday td {padding:2px 0px;} */
.saturday {color:#44D;}
.sunday {color:#0B0;}
/* .saturday {background-color:#E8E8FF;} */
tr.saturday td {padding-top:3px;}
/* .sunday   {background-color:#F8F8FF; border-bottom:1px solid #AAA;} */
tr.sunday td {padding-bottom:3px;}
.user_feestday {color:#F00;}
.user_saturday {padding-top:3px; color:#F00;}
.user_sunday   {padding-bottom:3px; color:#F00; border-bottom:1px solid #AAA;}

.towpilot {color:#000;}
.notowpilot {color:#F00;}
.available {color:#080; text-decoration:none;}
.unavailable {color:#FFC0CB; text-decoration:line-through;}

.dr4 {background-color:#FFF;}
.dr2 {background-color:#FFD;}
.dr8 {background-color:#DFD;}
.dr10 {background-color:#DDD;}
.dr14 {background-color:#FDF;}
.dr16 {background-color:#FDD;}
.dr18 {background-color:#FDB;}
.dr23 {background-color:#DDF;}

#altduty  {visibility:visible;}
tbody#dutyrosta td input,
tbody#dutyrosta td select {width:98%;}


#winterwork_sheet table {margin:10px 0;}
/* endof Planning */

/**
* Promotion
*/
tr.tf_default input
{
  color:#000;
}

tr.tf_paid input
{
  color:#0A0;
}

tr.tf_unpaid input
{
  color:#F00;
}

/**
 *  Map
 */
#map
{
 height:300px;
 width:500px;
 float:right;
}
/* endof Map */

/**
*   Tariff
*/
div#tariff
{
  width:790px;
}

table.tariff
{
  background-color:#DDD;
  margin:auto; width:100%;
}

table.tariff th
{
  font-size:small;
}

table.tariff td
{
  background-color:#EEE;
  text-align:right;
  width:9%;
}

table.tariff td.space,
table.tariff th.space
{
  background:transparent;
}

table.tariff td.fill
{
  background:transparent;
  width:4px;
  padding:0;
}

table.tariff tr.fill
{
  height:14px;
}
/* endof Tariff */


/**
*   WebSite
*/
#public_sheet span.tip
{
  background:transparent;
  border:none;
  color:#AAA;
}

form#feedback div.contentleft,
form#feedback div.contentright
{
  text-align:center;
}

form#feedback div.contentleft table
{
  margin:10px auto;
}

form#feedback div.contentright div
{
  margin:10px;
}
/* endof website */


/**
*   Popup screens
*/
div.popupform
{
  position:absolute;
  background-color:#A0A0A0;
  border:5px ridge #A00;
  visibility:hidden;
  text-align:center;
  padding:20px;
}

div.usermsg
{
  position:absolute;
  background-color:#DDD;
  left:100px;
  top:50px;
  width:380px;
  border:5px ridge #B00;
  text-align:left;
}

div.usermsg div.title
{
  background:#A00;
  color:#FFF;
  text-align:center;
  font-size:medium;
  font-weight:bold;
  padding:10px;
}

div.usermsg div.title p
{
  margin:0 auto;
}

div.usermsg div.msg
{
  margin:10px
}

div.usermsg div.msg p span
{
  float:right;
  color:#666;
}
/*#setup table  {background-color:transparent; border:none;}
#setup td     {text-align:left; background-color:transparent;}*/
/* endof popup screens */

/* Help popup
  styles for the overlib library
  NOTE: '!important' is used here to override the inbuilt classes of overlib
*/
#overDiv *
{
  margin:0;
  padding:0;
}

#overDiv
{
  margin:0;
  padding:0;
  position:absolute;
  width:240px;
  visibility:hidden;
  z-index:10000!important;
  background-color:#DCDCDC;
  border:1px maroon solid;
}

#overDiv table
{
  background-color:transparent;
  width:100%;
  border:none;
  border-collapse:collapse!important;
}

#overDiv table td
{
  background-color:transparent;
  border:none;
}

.help_caption
{
  background-color:#A00!important;
  color:#FFF;
  font-size:small;
  font-weight:bold;
  text-align:center;
  padding:3px;
}

.help_text
{
  font-size:9pt;
  padding:3px!important;
}

.help_text ol,
.help_text ul
{
  margin:0 0 0 1em!important;
}

.help_text li
{
  margin:0 0 0 .5em!important;
}

.help_text p:first-line
{
  text-indent:1em!important;
}
/* endof Help popup (#overDiv) */