/*
 * $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       {text-align:right;}
.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:#0C0;}
.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:50%; text-align:center; margin:auto;}

body          {font-family:"arial", "verdana", "helvetica", sans-serif; font-size:medium; background:#768EBA url(/images/bg_body.jpg) center fixed no-repeat;}
a             {text-decoration:none; font-style:italic;}
a img         {border:none;}
a:link        {color:#00F;}
a:visited     {color:#80F;}
a:hover       {color:#FFA500;}
a:active      {color:#0F0;}

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

div.body      {margin:0 auto; text-align:center; }
div.page      {margin:0 auto; width:90%; }
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;}

#footer       {}

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

dt            {color:#00F;}

table.list    {background-color:#DDD; margin:14px auto; border-spacing:1px;}
table.list th {background-color:#EEE;}
table.list 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;}
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 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:hover {background-color:#FDC;}
form tr.even  {background-color:#EFEFF8;}
form tr.odd   {background-color:#F8F8FF;}
form th       {background-color:transparent; background-image:none; color:navy;}
form td       {border:none;}
form td input {border:none; margin:0; padding:0; background-color:transparent; font-size:inherit;}
form label    {color:navy; font-size:10pt; font-weight:bold;}
form label.enabled {color:navy;}
form label.disabled {color:silver;}
form input    {border:1px solid silver; padding:0px 2px; background-color:#FFF;}
div.buttons   {clear:both; padding:10px; text-align:center; background:#C1D5EF;}

td input,
td select,
td textarea {width:100%;}

input.hilite    {background-color:#FFD; color:#000; border:1px solid silver;}
select.hilite   {background-color:#FFD; color:#000; border:1px solid silver;}
textarea.hilite {background-color:#FFD; color:#000; border:1px solid silver;}
input.error     {background-color:#FFD; color:#F00; border:1px solid #F00;}
select.error    {background-color:#FFD; color:#F00; border:1px solid #F00;}
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 {color:#FFF;}
div.tsmenu a.default:link {color:#768EBA;}
div.tsmenu a.selected:link {color:#FFF;}
div.tsmenu a.default:hover {color:#FFF;}
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 div {position:relative; height:100%;}
#home div.picspanel p {font-size:large; margin:3px auto;}
/*
#home #leftcol object {float:left; margin:0px 10px;}
#home #leftcol li   {padding:2px 0px;}
#home #leftcol img  {float:right;}

#home #rightcol {left:460px; height:600px; width:420px; background-color:#FFF; margin:0px auto;}
#home #rightcol #text {position:relative; top:370px; height:190px; width:420px; margin:0px; padding:0px; z-index:1; background-color:#FFF; border:1px solid red;}
#home #rightcol #text #location {width:200px; padding:24px 0 0 0; border:1px dotted #00F;}
#home #rightcol #text p {font-size:xx-small; }
#home #rightcol h2 {color:#00F; text-align:center; text-transform:uppercase; font-weight:bold; margin:0px; padding:0px;}
#home #rightcol h3 {color:#F00; margin:0px; padding:0px; }
#home #rightcol p  {color:#000; margin:0px; padding:0px; }
#home #rightcol img {width:420px;}
#home #rightcol span.img {position:absolute; clip:rect(0px 420px 370px 0px);}
#home #rightcol span.tip {background-color:transparent; font-size:x-small; border:none; }
#home #rightcol #text #invite {left:180px; width:240px; padding:24px 0 0 0; border:1px dotted #0F0;}
*/
/* 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.org_column {float:right; margin:auto; width:300px; text-align:center;}
div#odt {text-align:left; border:1px solid maroon; overflow:auto;}
div.odt {margin:4px; font-size:10pt;}
div.rosta_column {float:left; margin:auto; width:460px; 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.org_column iframe {height:90%; width:98%; border:1px solid #A00; margin:0;} */

div#announcements {font-size:small; text-align:left;}
div#announce form * {margin:auto 2px;}

.feestday {background-color:#F8F8E0;}
tr.feestday td {padding:2px 0px;}
.satcolour {color:#44D;}
.suncolour {color:#0C0;}
.saturday {background-color:#E8E8FF;}
tr.saturday td {padding-top:4px;}
.sunday   {background-color:#F8F8FF; border-bottom:1px solid #AAA;}
tr.sunday td {padding-bottom:4px;}
.user_feestday {color:#F00;}
.user_saturday {padding-top:4px; color:#F00;}
.user_sunday   {padding-bottom:4px; 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 */

/**
 *  Meteo
 */
#wximages       {position:relative; margin:0 auto; height:550px; width:880px;}
#wximages #img0 {position:absolute; top:30px; left:80px; background:#FFF;}
#wximages #img0 img {margin:10px;}
#wximages #img1 {position:absolute; top:290px; left:200px;}
#wximages #img2 {position:absolute; top:170px; left:0px;}
#wximages #img2 img {border:3px solid #FFF;}
#wximages #img2 p {height:90px; width:260px; opacity:.85; filter:alpha(opacity=85);}
#wximages #img3 {position:absolute; top:400px; left:270px;}
#wximages #img4 {position:absolute; top:290px; left:520px;}
#wximages #img5 {position:absolute; top:390px; left:440px;}
#wximages #img6 {position:absolute; top:280px; left:20px;}
#wximages #img7 {position:absolute; top:0px; left:410px;}
#wximages #img7 table,
#wximages #img7 td {background-color:transparent; border:none; border-collapse:collapse;}
#wximages #wximages #img7 table caption {font-size:medium;}
#wximages #img7 img {border:none;}
#wximages #w3cxhtml {position:absolute; top:450px; left:10px; width:180px;}
#wximages #img8 {position:absolute; top:300px; left:380px; background:#98B0DC;}
#wximages #new  {position:absolute; top:280px; left:400px;}
#wximages img   {border:none;}
#wximages div   {width:auto;}
/* endof Meteo */


/**
*   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:4px;}
/* 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; }


/**
*   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;}*/


/* 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,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;}