/* 
    Document   : Biblioso.css
    Created on : December 13, 2025
    Author     : J. Michael Newlight
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
A:link  {
    color: #3333FF;
    text-decoration: none;
}
A:visited  {
    color: #3333FF;
    text-decoration: none;
}
A:hover  {
    color: #FF0033;
    text-decoration: none;
}
A:active  {
    color: #3333FF;
    text-decoration: none;
}
body  {
    font-family: verdana,arial,helvetica,sans-serif;
    font-family: helvetica;
    font-size: 12pt;    
    text-decoration: none;
    color: #000000;
    background-color: #EEEEEE;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
}
.button     {
    color: #FFFFFF;
    background-color: #999999;
    border: solid 2px #000000;
    font-size: 10pt;
    font-weight: normal;
    padding: 1px 3px 3px 3px;
    text-align: center;
}
.button:hover     {
    color: #000000;
}
.center-text {  /*center text in textarea */
  text-align: center;
}
#comment {
    position: relative;
    bottom: 0px;
    height: auto;
    /*border: 3px solid orange;*/
}
#content {    /*contains list of records * data */
    position: relative;
    top: 0px;
    /*left: 0px;*/
    width: 100%;
    width: 98%;  
    /*border: 3px solid orange;*/
    border: 1px solid transparent; /*apparently neeeded to properly locate Number of Sources*/
}
#content td  {
    border: solid gray 1px;
    word-wrap: break-word;
}
#copyright {
    position: relative;
    width: 100%;
    font-size: .6em;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
}
/* BEGIN DROPDOWN MENU STYLE from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover */
.dropbtn {          
    color: white;
    font-size: 10pt;
    border: none;      
    background-color: transparent;
}
.dropbtn a:hover {
    color: red;
    text-decoration: none;  
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    min-width: 80px;
    text-align: right;
    padding-right: 10px;
    background-color: #000000;
    background-color: transparent;
    background-color: #FFFFFF;
    color: black;
    z-index: 3;
    border: 1px solid black; /*added 12-14-25 */
    border-radius: 10px; /*added 12-14-25 */
}
.dropdown-content a {
    color: white;
    padding-top: 5px;
    text-decoration: none;
    background-color: #000000; 
    background-color: transparent;
    background-color: #FFFFFF; 
    color: black;
    display: block;
}
.dropdown-content a:hover {
    color: red;
    text-decoration: none;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    color: #FF0033;
}
/* END DROPDOWN MENU STYLE */
#enterForm {
    position: relative;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    color: #FFFFFF;
    color: black;
    text-align: center;
}
.fontred    {
    color: red;
    font-size: 10px;
    font-size: 1em; /*added 12-14-25 */
}
#form2  {
    position: relative;
    top: 0px;
    height: auto;
    width: 310px;
    text-align: center;
    margin: 0 auto;
    z-index: 5;
}

#formcontainerAuthors  {  /*?*/
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 295px;
    /*font-size: 10pt;  */
}
#formcontainerComments  {  /*?*/
    position: relative;
    top: 0px;
    width: 100%;
    height: 75px;
    /*font-size: 11pt;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;   
}
#formcontainerCurrent {  /*?*/
    position: relative;
    top: 0px;
    width: 100%;
    height: 50px;
    /*font-size: 11pt;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}
#formcontainerMain  {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 435px;
    height: auto;
    /*border: 3px solid black;*/
}
#formcontainerOtherStuff  { /*?*/
    position: relative;
    top: 20px;
    width: 100%;
    height: 60px;
    /*font-size: 11pt;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;   
}
#formcontainerPrint  { /*?*/
    position: relative;
    top: 0px;
    width: 100%;
    height: 120px;
    /*font-size: 11pt;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}
formcontainerUser   {  /*?*/
    position: relative;
    top: 100px;
    height: 200px;
}
#formInterior  {
    position: relative;
    top: 0px;
    height: auto;    
    width: 310px;
    width: 400px;
    text-align: right;
    text-align: center;
    margin: 0 auto;
    /*border: 3px solid green;*/
}
#formLabels {
    text-align: right;
    border: 3px solid yellow;
}
.full-width-input {  /*not iusing this? */
  width: 100%;
  box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
  padding: 8px; /* Example input padding for better appearance */
  border: 1px solid #ddd;
  margin: 0; /* Remove default margins if any */
}
h3  {
    font-size: 1em;
 }
image {
    border: none;    
}
#includeOtherStuff {
    position: relative;
    height: 100px;
    width: 98%;
    /*border: 3px solid yellow;*/
}
input {
    font-family: verdana,arial,helvetica,sans-serif;
    /*font-size: 10pt;*/
    text-align: left;
    padding-left: 5px;
    width: 295px; 
    height: 20px;    
}
input[type="checkbox"] {
    margin-top: 5px; 
    height: 12px;
}
input[type="email"] { /*added 11-22-25 */
    height: 20px;
    width: 250px;
    text-align: center;
    padding: 5px;
    color: black;
    background-color: white;
    border: 1px black solid;
}
input[type="password"] { /*added 11-22-25 */
    height: 20px;
    width: 310px;
    text-align: center;
    padding: 5px;
    background-color: white;
    color: black;
    border: 1px black solid;
}
input[type="radio"] {  /*see label, below*/
    margin-left: auto;
    margin-right: auto;
    height: 13px; 
    width: 25px;
}
input[type="submit"] { /*added 11-22-25 */
    height: 30px;
    width: 250px;  
    font-size: 1em;
    text-align: center;
    padding: 5px;
    color: blue;
    background-color: white;
    border: 1px black solid;
}
input[type="submit"]:hover  { 
    color:#FF0000;
}
input[type="text"] {
    height: 30px;
    width: 310px;
    width: 400px;
    font-size: .9em;
    text-align: center;
    padding: 0px;
    color: black;
    background-color: white;
    border: 1px black solid;
}
#keyword {
    position: relative;
    height: 50px;
    width: 98%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /*border: 1px solid red;*/
}
#left { /*styling for otherStuff*/
    position: absolute;
    left: 0px;
    /*height: 25px;*/
    height: auto;
    width: 150px;
    text-align: left;
    padding-top: 5px;
    padding-left: 10px;
    line-height: 31px;
    font-style: italic;
    color: green;    
    /*border: 1px solid red;*/
}
#logo  {
    position: absolute;
    position: relative;
    height: auto;
    width: 100%;
    font-family: georgia, serif;
    font-size: 42px;
    text-align: center;
    padding-top: 10px;
}*
#menu	{
    position: absolute;
    top: 30px;
    right: 0px;
    height: 15px;
    /*font-size: 10pt;*/
    font-size: 1em;
    text-align: right;
    padding-right: 10px;
}
option {  /*do i need this?*/
    font-size: 1em;
    font-style: italic;
    color: green;
}
#other { /*styling for otherStuff*/
    position: relative;
    width: 400px;
    width: 98%;
    height: 670px;
    /*border: 3px solid purple;*/
}
#otherSmall { /*styling for otherStuff*/
    position: relative;
    width: 400px;
    width: 98%;
    height: 130px;
    /*border: 3px solid blue;*/
}
::placeholder {
    text-align: center;
    font-size: 1em;
    font-style: italic;
    color: D3D3D3;
    color: green;
}
#printer { /*added 1-17-26*/
    position: relative;
    height: 80px;
    width: 98%;
    /*border: 3px solid green;*/
}
#printButtons {
    position: absolute;
    top: 110px;
    left: 10%;
    height: 70px;
    width: 70px;
    text-align: left;
    padding-left: 10px;
    z-index: 2;
    /*border: 3px solid yellow;*/
}
#quotes {
    position: relative;
    top: 40px;
    width: 98%;
    height: auto;  
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
    /*border: 3px solid red;*/
}
.quotes {
    display: flex;
    justify-content: center; /* Centers horizontally */
    /*border: 3px solid red;*/
}
#quotesNumber {
    position: absolute;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    top: 240px;
    /*border: 3px solid blue;*/
}
#return {
    /*position: absolute;*/
    position: relative;
    top: 0px;
    /*height: 400px;*/
    height: auto;
    /*width: 230px;*/
    width: 98%;
    /*font-size: 10pt;*/
    font-size: 1em;
    text-align: center;
    margin: 0;
    /*border: 3px solid blue;*/
}
#returnToSources {
    position: relative;
    top: 20px;
    height: auto;
    width: 100%;
    font-size: 1em;
    text-align: center;
    margin: 0;
}
#right { /*styling for otherStuff*/
    position: absolute;
    right: 0px;
    height: 30px;
    width: 65%;
    /*width: 250px;*/
    text-align: center;
    /*margin-right: 10px;*/
    /*border: 1px solid red;*/
}
/*
#search { 
    position: relative;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 100%;
    text-align: center;
    border: 3px solid red;
} */
#searchContainer {
    position: relative;
    height: 100px;
    width: 98%;
    /*border: 3px solid blue;*/
}
select  {   /*To center selection in select box. Doesn't work in IE or Google+*/
    text-align: center;
    height: 30px;
    width: 312px;
    width: 250px;
    font-size: 1em;
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
}
/*
::invalid {
*/
select:invalid {
    color: red;
    font-style: normal;
}

select:valid {
    color: green; /* Example style for the select box when a valid option is chosen */
    font-style: italic;
    /*color: black;*/
    /*font-style: normal;*/
}
#sourcesCount {
    position: relative;
    /*top: -40px;*/
    top: 0px;
    width: 100%;
    height: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid blue;
}
#sourcesNumber {
    position: absolute;
    /*top: -40px;*/
    top: 0px;
    width: 100%;
    height: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /*border: 3px solid green;*/
}
table {
    margin-top: 50px;
    table-layout: auto;
    border: 0px;
    border-spacing: 0;
    font-size: .9em;
    width: 90%;
    /*border: 3px solid blue;*/
}
td {
    text-align: center;
    background-color: #FFFFFF;
    padding: 5px;
    border: 1px solid black;
}
textarea {
    width: 100%; /*will fill width of parent container */
    height: 100px;  
    font-size: 1em;
    text-align: center;
    /*field-sizing: content;*/
    box-sizing: border-box; /*includes padding in sizing to fit parent container */
    padding: 10px;   
 }
th {
    text-align: center;
}
.tm  {
    font-size: 16px;
    vertical-align: super;
}
#top {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 98%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    /*border: 3px solid black;*/
}
#topcenter {   /* contains data entry forms, comments, quotes */
    position: relative;
    width: 1024px;
    width: 98%;
    height: auto;
    /*border: 3px solid red;*/
}
#topcenterSecondary {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    /*border: 1px solid red;*/
}
#user {
    position: relative;
    height: auto;
    width: 100%;
    font-size: .8em;
    text-align: center;
    margin-left:  auto;
    margin-right: auto;
}
#userLogin {
    position: relative;
    top: 50px;
    top: 0px;
    left: 0px;
    width: 1024px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*for iPad*/
}

@media only screen and (max-width: 750px) { /*for mobile phone */
    
    table  {
        width: auto; /*is this needed? */
    }
    #formInterior  {
        width: 98%;
    }
    #printButtons {
        top: 75px;
        left: 0px;
    }
    #right {
        width: 68%;
    }
}

@media print {
    .new-page { /*added 2-3-26*/
        display: block;
        page-break-before: always;
        break-before: always; /* Newer syntax */
    }
    @page { /*added 2-3-26*/
        margin-top: 1in;
        margin-left: .5in;
        margin-right: .5in;
        margin-bottom: 1in;
    }
    #printButtons {
        display: none !important;
    }
    table {  /*added 2-4-26*/
        border-collapse: collapse !important;
    }
    tr {  /*added 2-4-26*/
        /*display: block;*/
        page-break-inside: avoid !important;
        break-inside: avoid !important;; /* Newer syntax for compatibility */
        /*page-break-after: auto;
        break-after: auto; /* Newer syntax for compatibility */
     }
      td {  /*added 2-4-26*/
        /*page-break-inside: avoid !important;
        break-inside: avoid !important; /* Newer syntax for compatibility */
        /*page-break-after: auto;
        break-after: auto; /* Newer syntax for compatibility */
     }
}