/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║ bbsite.css                                                                                           ║
║  by J. Laccone                                                                                       ║
║                                                                                                      ║
║ Document Best Viewed/Printed: Page{Letter, Landscape, 0.25in Side Margins}                           ║
║                               Font{Monospace Font, Normal, 10pt}                                     ║
║                                                                                                      ║
╠══════════════════════════════════════════════════════════════════════════════════════════════════════╣
║                                           Revision History                                           ║
╠══════════════════════════════════════════════════════════════════════════════════════════════════════╣
║ VV.vv.DOYyy.bb (dd MMM yy) - Initial Creation/Development Update/Maintenance Update                  ║
║                                                                                                      ║
║  1.00.03405.xx (03 Feb 05) - Initial Creation                                                        ║
║  1.01.04605.xx (15 Feb 05) - Development Update                                                      ║
║                                 Modified source for CSS compliance                                   ║
║  1.02.23405.xx (22 Aug 05) - Development Update                                                      ║
║                                 Modified source to remove table off main page                        ║
║                                 Modified tabs extensively                                            ║
║  1.03.24305.xx (31 Aug 05) - Development Update                                                      ║
║                                 Modified menu CSS                                                    ║
║  1.04.25005.xx (07 Sep 05) - Development Update                                                      ║
║                                 Modified div and page layout                                         ║
║  1.05.07506.xx (16 Mar 06) - Development Update                                                      ║
║                                 Added pic div                                                        ║
║                                 Added comments, cleaned up code                                      ║
║  1.06.06816.xx (08 Mar 16) - Development Update                                                      ║
║                                 Converted file from ASCII to UTF-8                                   ║
║                                 Updated header block to new format                                   ║
║  1.07.00618.xx (06 Jan 18) - Development Update                                                      ║
║                                 Added canvas css for clock                                           ║
║                                                                                                      ║
╠══════════════════════════════════════════════════════════════════════════════════════════════════════╣
║                                               Reference                                              ║
╠══════════════════════════════════════════════════════════════════════════════════════════════════════╣
║                                                                                                      ║
║   CSS3 Animated Dropdown Menu                                                                        ║
║   ───────────────────────────                                                                        ║
║      http://red-team-design.com/css3-animated-dropdown-menu/                                         ║
║                                                                                                      ║
║   HTML Color Codes                                                                                   ║
║   ────────────────                                                                                   ║
║      https://html-color-codes.info/                                                                  ║
║                                                                                                      ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/

/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                    A                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
/*
a:link, a:visited, a:active, a:hover
{
   text-decoration:          none;
}
*/
/*
a.siteMenu
{
   color:                    white;
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   font-weight:              bold;
   margin:                   0;
   padding:                  0;
   text-decoration:          none
}

a.siteMenu:hover
{
   color:                    red;
   font-weight:              bold
}
*/
a.title
{
   color:                    rgb( 192, 192, 0 );
   cursor:                   default;
   font-family:              arial, helvetica, sans-serif;
   font-size:                12pt;
   font-weight:              bold
}

a.title:hover
{
   color:                    red;
   font-weight:              bold
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                 BODY                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
body
{
   color:                    black;
   background:               white;
   /* background-image:         url("http://www.beardboy.org/picture/bbbackground.jpg"); */
   /* background-repeat:        no-repeat; */
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   margin:                   0;
   padding:                  0
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                CANVAS                                                ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
#clockcanvas
{
   background-color:         #111;
   background-image:         linear-gradient(#444, #111);
   margin:                   10px 0 10px 225px;
   padding:                  0;
   position:                 relative
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                  DIV                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/

/* Common To All Pages */
/*
div
{
   border:                   1px solid black;
}
*/
div.main
{
   margin:                   0;
   padding:                  0;
   position:                 relative;
   width:                    960px
}

div.modified
{
   color:                    rgb( 178, 34, 34 );   /* firebrick red */
   font-family:              arial, helvetica, sans-serif;
   font-size:                8pt;
   /* left:                     150px; */
   margin:                   0;
   text-align:               center;
   padding:                  0;
   position:                 relative;
   width:                    960px
}

div.notice
{
   font-style:               italic;
   font-size:                10pt;
   font-weight:              bold;
   /* left:                     150px; */
   margin:                   0;
   text-align:               center;
   position:                 relative;
   width:                    960px
}

div.search
{
   left:                     475px;
   margin:                   0;
   padding:                  0;
   position:                 absolute;
   top:                      -2px
}
/*
div.sideMenu
{
   margin:                   0;
   padding:                  0;
   position:                 absolute;
   width:                    150px
}
*/
/*
div.sideMenu label
{
   color:                    white;
   font-family:              arial, helvetica, sans-serif;
   font-size:                9pt;
   font-weight:              bold
}
*/
/*
div.sideMenu ul
{
   list-style-type:          none;
   margin:                   0;
   padding:                  0;
   position:                 relative;
   text-indent:              15px;
   top:                      0
}
*/

#siteMenu, #siteMenu ul
{
   list-style:               none;
   margin:                   0;
   padding:                  0
}


#siteMenu
{
   background-color:         #111;
   background-image:         linear-gradient(#444, #111);
   border:                   1px solid #222;
   border-radius:            6px;
   box-shadow:               0 1px 1px #777;
   margin:                   10px 0 0 0;
   width:                    960px;
   zoom:                     1;
}

#siteMenu:before, #siteMenu:after
{
   content:                  "";
   display:                  table;
}

#siteMenu:after
{
   clear:                    both;
}

#siteMenu a
{
   color:                    #999;
   float:                    left;
   font:                     bold 12px Arial, Helvetica;
   padding:                  12px 30px;
   text-decoration:          none;
   text-shadow:              0 1px 0 #000;
   text-transform:           uppercase
}

#siteMenu li
{
   border-right:             1px solid #222;
   box-shadow:               1px 0 0 #444;
   float:                    left;
   position:                 relative
}

#siteMenu li:hover > a
{
   color:                    #fafafa
}

#siteMenu li:hover > ul
{
   margin:                   0;
   opacity:                  1;
   visibility:               visible
}

#siteMenu ul
{
   background:               #444;
   background-image:         linear-gradient(#444, #111);
   border-radius:            3px;
   box-shadow:               0 -1px 0 rgba(255, 255, 255, .3);
   left:                     0;
   margin:                   20px 0 0 0;
   _margin:                  0;
   opacity:                  0;
   position:                 absolute;
   top:                      38px;
   transition:               all .2s ease-in-out;
   visibility:               hidden;
   z-index:                  1
}

#siteMenu ul a
{
   display:                  block;
   float:                    none;
   _height:                  10px;
   padding:                  10px;
   text-transform:           none;
   white-space:              nowrap;
   width:                    130px
}

#siteMenu ul a:hover
{
   background-color:         #0186ba;
   background-image:         linear-gradient(#04acec, #0186ba)
}

#siteMenu ul li
{
   border:                   0;
   box-shadow:               0 1px 0 #111, 0 2px 0 #666;
   display:                  block;
   float:                    none;
   _line-height:             0;
}

#siteMenu ul li:first-child
{
   border-radius:            3px 3px 0 0
}

#siteMenu ul li:last-child
{
   box-shadow:               none
}

#siteMenu ul ul
{
   box-shadow:               -1px 0 0 rgba(255, 255, 255, .3);
   left:                     150px;
   margin:                   0 0 0 20px;
   _margin:                  0;
   top:                      0
}









/*
div.siteMenu
{
   height:                   150px;
   margin:                   0;
   padding:                  0;
   position:                 relative;
   width:                    800px;
}

div.siteMenu ul
{
   list-style-type:          none;
   margin:                   0;
   padding:                  0;
   position:                 absolute;
   top:                      5px
}

div.siteMenu ul li
{
   display:                  inline;
   padding-left:             25px
}
*/
div.text
{
   color:                    black;
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   margin:                   0;
   padding:                  0 20px 20px 20px;
   left:                     150px;
   position:                 relative;
   width:                    450px
}

/* Picture Page Related */
div.pic
{
   margin:                   0;
   padding:                  0 20px 20px 20px;
   left:                     150px;
   position:                 relative;
   width:                    650px
}

div.pic table tr td
{
   color:                    black;
   font-family:              arial, helvetica, sans-serif;
   font-size:                9pt
}

div.pic table tr td.title
{
   color:                    rgb( 178, 34, 34 );   /* firebrick red */
   font-family:              arial, helvetica, sans-serif;
   font-size:                14pt;
   text-align:               center
}


/* Main Page Specific */
div.mantra
{
   color:                    rgb( 0, 128, 128 );
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   font-style:               italic;
   font-weight:              bold;
   left:                     150px;
   text-align:               center;
   margin:                   0;
   padding:                  0;
   position:                 relative;
   width:                    450px
}

div.mantra p
{
   padding:                  10px 30px 10px 30px;
}



/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                    H                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
h1.title
{
   color:                    rgb( 0, 128, 128 );   /* teal green */
   font-family:              "Times New Roman", Tahoma, serif;
   text-align:               center
}

h2
{
   color:                    rgb( 128, 0, 128 );   /* purple */
   font-family:              arial, helvetica, sans-serif;
   font-size:                14pt;
   font-weight:              bold;
   text-align:               center
}

h3.title
{
   color:                    rgb( 0, 128, 128);   /* teal green */
   font-family:              "Times New Roman", Tahoma, serif;
   text-align:               center
}














img.land
{
   width:                    288px;
   height:                   216px
}

img.pic
{
   border-width:             0
}

img.port
{
   width:                    216px;
   height:                   288px
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                 SPAN                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
span.header
{
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   font-weight:              bold
}

span.ltitle
{
   color:                    red;
   font-family:              arial, helvetica, sans-serif;
   font-size:                12pt;
   font-weight:              bold
}

span.section
{
   color:                    rgb( 0, 128, 128);
   font-style:               italic;
   font-weight:              bold
}

span.stitle
{
   color:                    rgb( 192, 205, 255 );
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   font-style:               italic;
   font-weight:              bold
}

span.title
{
   color:                    rgb( 192, 192, 128 );
   font-family:              arial, helvetica, sans-serif;
   font-size:                12pt;
   font-weight:              bold
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                 TABLE                                                ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
table.asciiChart
{
   border:                   thin solid black;
   border-spacing:           0;
   margin:                   0 0 0 100px;
   position:                 relative;
   width:                    800px
}

table.asciiChart td
{
   border:                   thin solid black;
   font-family:              arial, helvetica, sans-serif;
   font-size:                10pt;
   padding:                  5px;
   text-align:               center
}

table.content
{
   display:                  table;
   visibility:               visible
}

table.hcontent
{
   display:                  none;
   visibility:               hidden
}

table.links
{
   /* border:                   thin solid black; */
   width:                    500px
}

table.links td
{
   /* border:                   thin solid black; */
   color:                    #666666;
   font-family:              arial, sans-serif;
   font-size:                9pt;
   vertical-align:           top
}

table.main
{
   margin:                   150px 0px 0px 0px
}

table.menu
{
   background:               rgb( 0, 128, 128 )
}

table.picTable
{
   border:                   0;
   border-spacing:           0;
   width:                    100%
}

table.picTable td
{
   padding:                  5px;
   vertical-align:           top
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                   TD                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
td.blank
{
   width:                    10px
}

td.data
{
   color:                    rgb( 70, 130, 180 )   /* steel blue */
}

td.content
{
   width:                    240px
}

td.picRight
{
   text-align:               right
}

td.pivot
{
   width:                    20px
}

td.section
{
   color:                    rgb( 0, 128, 128) !important;
   font-size:                12pt !important;
   font-style:               italic;
   font-weight:              bold;
   text-align:               center
}

td.title
{
   background:               rgb( 211, 211, 211);   /* light grey */
   color:                    black;
   font-weight:              bold;
   text-align:               center;
   width:                    40px
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                   TR                                                 ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
tr.content
{
   display:                  table-row;
   visibility:               visible
}

tr.hcontent
{
   display:                  none;
   visibility:               hidden
}

tr.title td
{
   background:               rgb( 211, 211, 211);   /* light grey */
   color:                    black;
   height:                   30px;
   font-weight:              bold;
   text-align:               center
}


/* Search Field */
form.search
{
   display:                  inline;
   margin:                   0;
   padding:                  0
}

input.search
{
   border:                   thin solid white;
   border-style:             inset inset inset inset;
   font-size:                8pt;
   height:                   18px;
   margin:                   0;
   padding:                  0;
   width:                    95px
}

/****************************************************************************/
/*                           Side Menu CSS                                  */
/****************************************************************************/


/* Menu Items */
/*
a.sideMenu
{
   color:                    white;
   font-family:              arial, helvetica, sans-serif;
   font-size:                9pt;
   font-weight:              bold;
   margin:                   0;
   padding:                  0;
   text-decoration:          none
}

a.sideMenu:hover
{
   color:                    red;
   font-weight:              bold
}
*/
















/****************************************************************************/
/*                        Tab Link Related CSS                              */
/****************************************************************************/
/*
#contents
{
   background:               #fff;
   border:                   1px solid #ccc;
   border-top:               none;
   clear:                    both;
   left:                     2.0in;
   margin:                   0;
   padding-bottom:           20px;
   padding-left:             20px;
   padding-right:            20px;
   padding-top:              30px;
   position:                 relative;
   top:                      150px;
   width:                    6.0in;
   z-index:                  -1
}

#picTabs
{
   border-bottom:            1px solid #ccc;
   display:                  inline;
   left:                     2.0in;
   margin:                   0;
   padding-left:             10px;
   position:                 absolute;
   list-style-type:          none;
   top:                      150px;
   width:                    6.0in
}

#picTabs a:hover
{
   color:                    red
}

#picTabs ul a:hover
{
   color:                    red !important
}

#picTabs a:link, #picTabs a:visited
{
   background:               #E8EBF0;
   border:                   1px solid #ccc;
   color:                    gray;
   float:                    left;
   font-size:                small;
   font-weight:              normal;
   line-height:              14px;
   margin-right:             8px;
   padding:                  2px 10px 2px 10px;
   text-decoration:          none
}

#picTabs a:link.active, #picTabs a:visited.active
{
   background:               #fff;
   border-bottom:            1px solid #fff;
   color:                    #000
}
*/
/* Makes The Active Tab White */
/*
body.section-1 #picTabs li#tab-1 a,
body.section-2 #picTabs li#tab-2 a,
{
   background:               #fff;
   border-bottom:            1px solid #fff;
   color:                    black;
   margin-bottom:            0
}

#picTabs ul a:hover
{
   color:                    #f00 !important
}

#picTabs li
{
   display:                  inline;
   padding:                  10px
}

#picTabs ul
{
   display:                  inline;
   list-style-type:          none;
   position:                 absolute;
   top:                      24px
}

#picTabs ul li
{
   display:                  inline
}
*/

/* Subtab Menu For Tab 1 - Working */
/*
body.section-1 #picTabs ul#subtab-1
{
   display:                  inline;
   left:                     10px;
   position:                 absolute;
   top:                      25px
}
*/
/* Subtab Links For Tab 1 - Working */
/*
body.section-1 #picTabs ul#subtab-1 a
{
   background:               white;
   border:                   none;
   border-left:              1px solid #ccc;
   color:                    #999;
   font-size:                smaller;
   font-weight:              bold;
   line-height:              10px;
   margin-right:             4px;
   padding:                  2px 10px 2px 10px;
   text-decoration:          none
}
*/

















/****************************************************************************/
/*                              Link Related CSS                            */
/****************************************************************************/
/*
col.link
{
   width:                    40%
}

col.linkdesc
{
   width:                    60%
}
*/
/*


label.quicklink
{
   color:                    white;
   font-size:                9pt
}

select.quicklink
{
   font-size:                8pt;
   margin:                   0;
   padding:                  0;
   width:                    100px
}
*/