/* Contents of this file:
* |basic-styles |
* |navbar.php |
* |Page Title |
* |Writing Container|
* |Footer bar |
* |General |
* ============ *
* |Index |
* |Gallery Index |
* |Journal Index |
* |Tamagotchi Index |
* |Website Links Index |
* |Login Page |
* |Contact Me |
* ============ *
* |Journal Pages |
* |Gallery Pages|

*/

:root {
    /*Main*/
    --border_main_color: #54D9FF;
    --bg_main_color: #596475;
    --text_main_color: white;
    
    /*Tables*/
    --table_bg_color: #D8D8D8;
    --th_bg_color: #ababab;
    --table_hover_color: #f0f0f0;
    --table_a_color: blue;
}

/* *basic-styles* */
    body {
        background-color: grey;
        background-image: url("/images/Hawaii_BG1.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        }
        
/*navbar.php==================================================================*/

    .topnav {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        }
    
    .topnav a {
        color: var(--text_main_color);
        }
    
    .dropdown .dropbtn {
        background-color: inherit;
        color: var(--text_main_color);
        }
    
    .dropdown-content {
        background-color: var(--border_main_color);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
    
    .dropdown-content a {
        color: black;
        }
    
    .topnav a:hover, .dropdown:hover .dropbtn {
        background-color: var(--border_main_color);
        color: var(--text_main_color);
        }
    
    .dropdown-content a:hover {
        background-color: #ddd;
        color: black;
        }

/*Page Title==================================================================*/

    #pagetitle {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        color: var(--text_main_color);
        }
        
    #pagetitle h1 {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        color: var(--text_main_color);
        }

/*Writing Container===========================================================*/

    #writing-container {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        color: var(--text_main_color);
        }


/*Footer bar==================================================================*/

    footer {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        color: var(--text_main_color);
        }

    .update-date {
        color: orange;
        }


/*General=====================================================================*/
    .pagecreationdetails {
        text-align: center;
        }
    .pagecreationdetails .dateitem {
        text-decoration: underline;
        color: orange;
        }
    .pagecreationdetails .dateinfo {
        color: cyan;
        }
/*Index=======================================================================*/

    /* Index Table - Table */
    
        table.index_table, .index_table th, .index_table tr, .index_table td {
            background-color: var(--table_bg_color);
            border: 1px solid black;
            }

        table.index_table {
            border: 2px solid var(--border_main_color);
            }

        .index_table tr, .index_table td{
            border-color: var(--table_bg_color);
            }
        
        .index_table th {
            background-color: var(--th_bg_color);
            }
        
        .index_table td:hover {
            background-color: var(--table_hover_color);
            }
            
    /* Index Table - a */
    
        .index_table a{
            color: var(--table_a_color);
            }

/*Gallery Index===============================================================*/

    table.galleryindex_table, .galleryindex_table th, .galleryindex_table tr, .galleryindex_table td {
        background-color: var(--table_bg_color);
        border: 1px solid black;
        }
        
    table.galleryindex_table {
        border: 2px solid var(--border_main_color);
        }
        
    .galleryindex_table th {
        background-color: var(--th_bg_color);
        }
        
    .galleryindex_table a {
        color: var(--table_a_color);
        }

/*Journal Index===============================================================*/

    /* Journal Table - Table */
    
        table.journal_table, .journal_table th, .journal_table tr, .journal_table td {
            background-color: var(--table_bg_color);
            border: 1px solid black;
            }
        
        table.journal_table {
            border: 2px solid var(--border_main_color);
            }
            
        .journal_table th {
            background-color: var(--th_bg_color);
            }
        
    /* Journal Table - a */
    
        .journal_table a {
            color: var(--table_a_color);

            }

/*Tamagotchi Index============================================================*/

    /*Tama Links Table */
    	table.tama_links, .tama_links th, .tama_links tr, .tama_links td {
            background-color: var(--table_bg_color);
            border: 1px solid black;
            }
        
        table.tama_links {
            border: 2px solid var(--border_main_color);
            }
        
        .tama_links tr, .tama_links td{
            border-color: var(--table_bg_color);
            }
            
        .tama_links th {
            background-color: var(--th_bg_color);
            }
        
        .tama_links td:hover {
            background-color: var(--table_hover_color);
            }

    /*Tama  Table */
    	     
        table.tama_table, .tama_table th, .tama_table tr, .tama_table td {
            background-color: var(--table_bg_color);
            border: 1px solid black;
            }
        
        table.tama_table {
            border: 2px solid var(--border_main_color);
            }
        
        @media screen and (max-width: 600px) {
            table.tama_table {
                width: 100%;
                }
            }
        
        .tama_table tr, .tama_table td{
            border-color: var(--table_bg_color);
            }
            
        .tama_table th {
            background-color: var(--th_bg_color);
            }
        
        .tama_table td:hover {
            background-color: var(--table_hover_color);
            }

    /* Index Table - a */
    
        .tama_links a{
            color: var(--table_a_color);
            }
        
        .tama_table a{
            color: var(--table_a_color);
            }

/*Website Links Index=========================================================*/

    /* Websitelinks Tale - Table */
    	        
        .websitelinks_table, .websitelinks_table th, .websitelinks_table tr, .websitelinks_table td {
            background-color: var(--table_bg_color);
            border: 1px solid black;
            }
        
        .websitelinks_table {
            border: 2px solid var(--border_main_color);
            }

        .websitelinks_table tr, .websitelinks_table td{
            border-color: var(--table_bg_color);
        }
        
        .websitelinks_table th {
            background-color: var(--th_bg_color);
            }

    /* Websitelinks Table - a */
    
        .websitelinks_table a{
            color: var(--table_a_color);
            }
            
    /* Warning message */  
    
        #warning {
            color: orange;
            }
            
/*Login Page==================================================================*/

    #login-container {
        background-color: var(--bg_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        color: var(--text_main_color);
        }

    #loginfield-container {
        background-color: var(--text_main_color);
        background-image: url("/images/bodytexture.png");
        border-color: var(--border_main_color);
        }
        
/*Contact Me==================================================================*/
    table.contact_table, .contact_table th, .contact_table tr, .contact_table td {
        background-color: var(--table_bg_color);
        border: 1px solid black;
        }
    table.contact_table {
        border: 2px solid var(--border_main_color);
        }
    .contact_table tr, .contact_table td{
        border-color: var(--table_bg_color);
        }
    .contact_table th {
        background-color: var(--th_bg_color);
        }
    .contact_table a {
       color: var(--table_a_color);
        }
    .contact_table a:visited {
        color: var(--table_a_color);
        }
        
/*Journal Pages===============================================================*/
        
    .returnbutton {
        background-color: orange;
        border-color: var(--border_main_color);
        color: black;
        }
        
/*Gallery Pages===============================================================*/

    #gallery-container {
        background-image: url("/images/bodytexture.png");
        background-color: var(--bg_main_color);
        border-color: var(--border_main_color);
        }
    #gallery-info {
        color: var(--text_main_color);
        }
    .gallery-tile:hover {
        border-color: var(--border_main_color);
        box-shadow: 0 0 10px var(--border_main_color);
        }
    .gallery-tile .picture-title {
        color: var(--text_main_color);
        }	   
    .gallery-tile a:hover{
        color: var(--border_main_color);
        }
    .gallery-tile a:visited {
        color:  var(--border_main_color);
        }
    .thumbnail-box:hover {
        box-shadow: 0 0 10px var(--border_main_color);
        }
    .thumbnail-title {
        color: #54D9FF; 
        }
    .thumbnail-desc {
        color: var(--text_main_color);
        }
    .del_button input {
        color: red;
        }