/* ================================== */

/*
Modular-CSS styles for njscuba.net
(c) 2015-2018 Rich Galiano
PAGE LAYOUT - all
*/

/* resets ============================== */

*
{ 
margin:  0 ; 
padding: 0 ; 
}

/* html, body ============================== */

html 
{ 
height: 100% ; /* scroll bars always on */
}

body 
{ 
height:            100% ;   /* scroll bars always on */
background:        #00004A url( "/z-misc/background.jpg" ) ; 
/* background-attachment: fixed; /* */
font-family:   Arial, Helvetica, sans-serif ; 
line-height:   1.2 ;
}

main
{
width:         580px ;
background:    white ;
color:         black ;
padding:       0px 11px 500px 11px;
z-index:       100 ;
}

/* font sizes ============================== */

*  { font-size: 16px ; }

h1 { font-size: 22px ; } /* 138% */
h2 { font-size: 20px ; } /* 125% */
h3 { font-size: 18px ; } /* 113% */
h4 { font-weight: bold ;   } /* same as default bold */
h5 { font-weight: normal ; } /* same as default      */
h6 { font-weight: normal ; } /* not used */

/* borders ============================== */

main
{
border-top:    0px ;
border-right:  4px ;
border-bottom: 0px ;
border-left:   4px ;
}

div.tab
{
border-top:    4px ;
border-right:  0px ;
border-bottom: 4px ;
border-left:   4px ;
}

div.debug
{
border-top:    4px ;
border-right:  4px ;
border-bottom: 4px ;
border-left:   4px ;
}

main, div.tab, div.debug
{
border-style:  solid ;
border-color:  #d0e0ef ;
}

/* top title ============================== */

table.title
{
width: 570px;
margin: 0px auto ;
}

h1.title 
{ 
text-align:  center ;
margin:      0px 0px 0px 0px ;
padding:     10px 0px 10px 0px ;
font-style:  italic ; 
font-size:   30px ; 
text-shadow: 2px 2px #D4D4D4 ;
}

table.title a:link    { color: #0000bb ; text-decoration: none ;      }
table.title a:visited { color: #0000bb ; text-decoration: none ;      }
table.title a:hover   { color: #0000bb ; text-decoration: none ; }
table.title a:active  { color: #0000ff ; text-decoration: none ; }

/* header bars ============================== */

table.header
{
width: 570px;
border-style: none ;
margin: 0px 0px 15px 0px ;
}

table.header tr td:first-child
{
width:        47px;
height:       30px;
background:   url( "/z-misc/dive_flag_small.png" ) no-repeat ;
border-style: solid ;
border-width: 1px ;
border-color: black ;
}

table.header tr td:last-child
{
height:         30px;
background:     linear-gradient( to right, #B4B4B4, white ) ;
border-style:   solid ;
border-width:   1px 0px 1px 0px ;
border-color:   black ;
vertical-align: middle ;
}

table.header h2
{
float: left ;
font-size: 18px ;
margin: 2px 5px 0px 15px ;
padding: 0px 0px 0px 0px ;
}

table.header p
{
float: right ;
margin: 0px 10px 0px 0px ;
padding: 2px 0px 0px 0px ;
}

/* main text links ============================== */

a:link    { color: #0000bb ; text-decoration: none ;      }
a:visited { color: #0000bb ; text-decoration: none ;      } /* navy is too dark  */
a:hover   { color: red     ; text-decoration: underline ; }
a:active  { color: blue    ; text-decoration: underline ; }

a.a-red:link    { color: red     ; }
a.a-red:visited { color: red     ; }
a.a-red:hover   { color: #0000bb ; }
a.a-red:active  { color: blue    ; }

a.a-green:link,  a.a-green:visited  { color: #0fbb0f  ; }
a.a-blue:link,   a.a-blue:visited   { color: blue   ; }
a.a-brown:link,  a.a-brown:visited  { color: #c66537  ; }
a.a-purple:link, a.a-purple:visited { color: #b642f4 ; }
a.a-orange:link, a.a-orange:visited { color: orange ; }
a.a-gray:link,   a.a-gray:visited   { color: gray   ; }
a.a-silver:link, a.a-silver:visited { color: silver ; }

/* whitespace tweak ============================== */

main > p, 
main > h4, 
main > h5, 
main > h6 
{ padding: 10px 20px 10px 20px ; }

main > h1, 
main > h2, 
main > h3
{ padding: 10px 10px 10px 10px ; }

main > hr              { width:  90% ; }
main > ul, main > ol   { padding: 10px 20px 10px 40px ; }
main > dl              { padding: 10px 10px 10px 20px ; }

/* containers ============================== */

object.scraper
{
display: block ;
height:   300px ;
width:    540px ;
padding:  5px 0px 5px 0px ; 
margin:   10px auto 10px auto ;
border:   1px solid black ; 
clear:    both ;
}

article
{
width:         520px ;
margin:        10px auto 10px auto ;
padding:       10px 20px 10px 20px ; 
border:        1px solid black ; 
border-radius: 3px ;
box-shadow:    3px 3px 5px gray ;
clear:         both ;
}

section
{
margin:       10px auto 10px auto ;
padding:      10px 20px 10px 20px ; 
border-style: none ;
clear:        both ;
/* background: yellow ; /* visualize */
}

aside
{
padding: 10px 20px 10px 20px ;
margin:  10px 5px 10px 15px ;
float:   right ; 
clear:   both ;
/* background: yellow ; /* visualize */
}

iframe.youtube
{
border: 1px solid black ;
}

pre { font-family: "Courier New", courier ; font-size: 15px ; }

/* odd bits ============================== */

table.chronology tr td,
table.chronology tr th
{
padding-right: 10px ;
}

table.chronology tr td:last-child,
table.chronology tr th:last-child
{
padding-right: 0px ;
}

table.chronology tr td:first-child
{
text-align: center ;
font-weight: bold ;
}

tr.chrono-header
{
font-weight: bold ;
}

/* text, links, images ============================== */

p, h1, h2, h3, h4, h5, h6
{ padding: 10px 0px 10px 0px ; }

br {}
hr { margin: 10px auto 10px auto ; }

blockquote, q { margin: 0px 40px 0px 40px ; }
blockquote, q { quotes: none ; }
blockquote:before, blockquote:after, q:before, q:after 
{ content: '' ; content: none ; }

img, a img { border-style: none ; }

img.pimg
{
display: block ;
margin: 20px auto 0px auto ;
}

p.pimg /* caption matches image width */
{
padding:    10px 20px 10px 20px ;
margin:     0px auto 10px auto ;
text-align: center ;
box-sizing: border-box ;
/* background: yellow ; /* visualize */
}

p.pimg:empty
{
padding: 0px ;
}

.imgmap 
{ 
cursor: default ;
}

area 
{ 
cursor: pointer ;
}

/* tables & lists ============================== */

table
{ 
border-collapse: collapse ; 
border-width :   0px ; 
border-spacing:  0;
margin:          0px auto 0px auto ; 
}

td { vertical-align: top ; }

tr.header td, 
td.header
{ font-weight: bold ; padding: 20px 0px 0px 0px ; }

table.tpd-0  td { padding: 0px ; }
table.tpd-1  td { padding: 1px ; }
table.tpd-2  td { padding: 2px ; }
table.tpd-3  td { padding: 3px ; }
table.tpd-4  td { padding: 4px ; }
table.tpd-5  td { padding: 5px ; }
table.tpd-10 td { padding: 10px ; }

table.highlight tr:hover,
ul.highlight li:hover,
ol.highlight li:hover
{ background: #eeeeee ; }

table.contents{ width: 550px; }

ul, ol, dl
{ padding: 0px 0px 0px 20px ; }

li { vertical-align: baseline ; padding: 3px 0px 3px 0px ; }

dt { float: left ; clear: left ; padding: 4px 0px 4px 0px ; font-weight: bold ;  }
dd { margin: 0px 0px 0px 120px ; padding: 4px 0px 4px 0px ; clear: right ;}

dl.spec-list{ clear: both ; }
dl.spec-list dd { margin: 0px 0px 0px 110px ; } /* to fit "Dedication" */

/* forms ============================== */

button, 
input[type="button"],
input[type="submit"],
input[type="reset"]
{
padding:       5px 5px;
border:        1px solid gray ;
border-radius: 3px ;
background:    linear-gradient( to bottom right, #eeeeee, #aaaaaa ) ;
outline:       none;
box-shadow:    2px 2px 5px gray ;
cursor:        pointer ;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus
{
outline: none;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active
{
outline: none ;
box-shadow: inset 0px 0px 5px gray ;
}

button.pagemode { width: 150px ; }
button.sidebar  { width: 150px ;}

button.up-button
{
position:    fixed ; 
height:      40px ;
width:       40px ;
padding:     10px ;
bottom:      10px ; 
z-index:     250 ; 
z-index:     500 ; /* over everything */
}

input[type="checkbox"]
{
position: relative ;
left: 0px ;
top: -2px ;
}

input[type="radio"]
{
position: relative ;
left: 0px ;
top: -3px ;
}

input[type="text"],
textarea
{ 
padding:       5px ;
border:        1px solid gray ;
border-radius: 3px ;
}

div.search-form
{
background:    linear-gradient( to bottom right, #eeeeee, #aaaaaa ) ;
margin:        10px 20px 10px 20px ;
padding:       5px ;
border:        1px solid gray ;
border-radius: 3px ;
clear:         both ;
}

div.search-form input
{ 
padding:       5px ;
border:        1px solid gray ;
border-radius: 3px ;
margin:        5px ;
}

div.search-form-tiny
{
margin:        0px ;
padding:       5px 0px ;
clear:         both ;
}

div.search-form-tiny input
{ 
padding:       5px ;
border:        1px solid gray ;
border-radius: 3px ;
margin:        1px 0px ;
}

/* master.com results ============================== */

section.search-results dl    { margin: 20px 0px 20px 0px ; }
section.search-results td    { padding: 3px; }
section.search-results input { margin: 0px 7px 0px 7px ; }
section.search-results img   { display: none ; }
section.search-results b     { font-weight: normal ; }

section.search-results li { vertical-align: baseline ; }
section.search-results dt { float: none ; padding: 0px 0px 10px 0px ; font-weight: bold ;  }
section.search-results dd { margin: 0px ; padding: 0px ; }

section.search-results table
{ display:none ; }

/* other styles ============================== */

.antique    
{ font-family: "Times New Roman", Times, serif ; }
.antique *  { font-size: 19px ; }
.antique h1 { font-size: 25px ; }
.antique h2 { font-size: 23px ; }
.antique h3 { font-size: 21px ; }
.antique h4 { font-size: 19px ; }
.antique h5 { font-size: 19px ; }
.antique h6 { font-size: 19px ; }

.typewriter 
{ font-family: "Courier New", courier ; }
.typewriter *  { font-size: 18px ; }
.typewriter h1 { font-size: 24px ; }
.typewriter h2 { font-size: 22px ; }
.typewriter h3 { font-size: 20px ; }
.typewriter h4 { font-size: 18px ; }
.typewriter h5 { font-size: 18px ; }
.typewriter h6 { font-size: 18px ; }

.tbw1 { background-image: url( "/z-sites/njscuba_tbw_bg.jpg"      ) ; }
.tbw2 { background-image: url( "/z-sites/njscuba_dorea_bg.jpg"    ) ; }
.tbw3 { background-image: url( "/z-reefs/pa_00ds_njscuba_bg.jpg"  ) ; }
.tbw4 { background-image: url( "/z-sites/black_sunday_bg.jpg"     ) ; }
.tbw5 { background-image: url( "/z-sites/njscuba_carolina_bg.gif" ) ; }

.embed-pdf
{
width:      530px ;
height:     660px ;
border:     solid 1px black ;
overflow-y: scroll ;
overflow-x: hidden ;
margin:     0px auto 0px auto;
padding:    0px ;
clear:      both ;
}

/* debug panel ================================ */

div.debug
{
background:    #f6f6f8 ; /* */
/* background:    linear-gradient( to bottom right, #eeeeee, #aaaaaa ) ; /* */
border-radius: 12px ;
font-size:     16px;
width:         500px ;
left:          780px ;
top:           0px ;
margin-top:    10px ;
color:         black ;
padding:       10px 20px 10px 20px ;
z-index:       20 ;
}

div.popup
{
position:      fixed ;
width:         600px ;
height:        600px ;
padding:       0px ;
margin:        0px ;
left:          10px ;
bottom:        60px ;
background:    white ;
border:        1px solid black ;
box-shadow:    5px 5px 10px black ;
z-index:       10000 ;
overflow:      hidden ;
}

div.popup-header 
{
height:           20px ;
padding:          20px ;
margin:           0px ;
cursor:           move ;
z-index:          10001 ;
background-color: silver ;
}

div.popup-content 
{
margin:        0px ;
padding:       10px 20px 10px 20px;
height:        520px ;
overflow:      scroll ;
}

a.popup-close 
{
margin:   5px ;
float:    right ;
cursor:   default ;
}

a.popup-max 
{
margin:   5px ;
float:    right ;
cursor:   default ;
}

button.reload-button,
button.check-html-button,
button.check-spell-button,
button.check-links-button,
button.check-google-button,
button.view-source-button
{ /* same as up-button */
position:    fixed ; 
height:      40px ;
width:       40px ;
padding:     10px ;
bottom:      10px ; 
z-index:     250 ; 
z-index:     500 ; /* over everything */
}

/* ================================== */