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

/* *basic-styles* */
    * {
        box-sizing: border-box;
        text-size-adjust: none;
        }
    
    html {
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
        }
    body {
        margin: auto;
        padding: 10px;
        
        width: 1130px;
        height: 100%;
        
        font-family: "Times New Roman";
		font-size: 15px;
        }
        
/* Wrapper */

    .wrapper {
        overflow: visible;
        
		display: grid;
		grid-template-columns: 250px 750px;
		
		justify-content: center;
		margin: 0 auto;
		padding: 2px;
	}

    .header {
		width: 1000px;
		margin: auto;
		margin-top: 15px;
		padding: 10px;
	}
	
	.footer {
		width: 1000px;
		margin: auto;
		margin-top: 15px;
		padding: 10px;
	}
	
	.left {
		width: 311px;
		/*padding: 10px;*/
		padding: 0px;
	}
	
	.right {
		width: 311px;
		padding: 10px;
	}
	
	.main {
		width: 750px;
		/*padding: 10px;*/
		padding: 0px;
	}
	
	.updates {
		height: 205px;
		overflow-y: scroll;
		padding: 7px;
	}
	
	.navlink {
		display: block;
		margin-bottom: 5px;
		padding-left: 10px;
	}
    
    .main h2{
        margin: 0;
        margin-bottom: 5px;
        text-align: center;
        padding: 3px;
        font-size: 100%;
    }
   
   .main p {
       padding-left: 20px;
       padding-right: 20px;
	   padding-bottom: 10px;
	}
     
	h4 {
	    margin: 0;
	    margin-bottom: 5px;
	    padding: 3px;
	    font-size: 100%;
	}
	
	table {
		border-collapse: separate;
		border-spacing: 5px;
	}
	
	a:link {
	  text-decoration: none;
	}

	a:visited {
	  text-decoration: none;
	}

	a:hover {
	  text-decoration: underline;
	}

	a:active {
	  text-decoration: underline;
	}
	


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

    footer {
        border-style: outset;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        overflow: auto;
        text-align: justify;
        }
        
    .update-date {
        text-align: center;
        color: #6600CC;
        }
        
    .Copyright {
        text-align: center;
        }

/*Index=======================================================================*/
    
    /* Index Banner */
        
        .indexbanner {
            /*Default*/
                content: url("/images/index/bannerwlogo.jpg");
            /*Halloween
                content: url("/images/index/bannerwlogo_halloween.png");*/
            /*Thanksgiving
                content: url("/images/index/bannerwlogo_thanksgiving.png");*/
            /*Christmas
                content: url("/images/index/bannerwlogo_christmas.gif");*/
            display: block;
            margin: 0 auto;
            width: 80%;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	            
	        }

    /* Index Table - Table */
    /*
        table.index_table, .index_table th, .index_table tr, .index_table td {
            border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }

        table.index_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            
            font-size: medium;
            }
        
        @media screen and (max-width: 600px) {
            table.index_table {
                width: 100%;
                }
            }
        
        .index_table tr, .index_table td{
            padding: 15px 10px 15px 10px;
            }
        
        .index_table th {
            padding: 5px;
            
            text-align: center;
            }
          
    /* Index Table - br */
    
            .index_table_br {
                line-height: 5%;
                }
                
            @media screen and (min-width: 600px) {
                .index_table_br {
                    display: none;
                    }
                }
            
    /* Index Table - a */
    
            .index_table a{
                font-weight: bold;
                }
                
            @media screen and (max-width: 600px) {
                .index_table a {
                    text-align: left;
                    }
                }
                
    /* Index Table - img */
    
            .index_table img {
                width: 50px; 
                margin-right: 5px; 
                float:left;
                }
        
/*Gallery Index===============================================================*/

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

    /*Tama Links Table */
    	table.tama_links, .tama_links th, .tama_links tr, .tama_links td {
    	    border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
    	    }     
    	table.tama_links {
            width: 70%;
            margin: 0 auto;
            margin-bottom: 20px;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            table.tama_links {
                width: 100%;
                }
            }
        
        .tama_links tr, .tama_links td{
            padding: 15px 10px 15px 10px;
            }
        .tama_links td {
            width: 50%;
            
            text-align: center;
            }
            
        .tama_links th {
            padding: 5px;
            
            text-align: center;
            }
    	
    /*Tama Table */	
        table.tama_table, .tama_table th, .tama_table tr, .tama_table td {
            border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }
        
        table.tama_table {
            width: 90%;
            margin: 0 auto;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            table.tama_table {
                width: 100%;
                }
            }
        
        .tama_table tr, .tama_table td{
            padding: 15px 10px 15px 10px;
            }
            
        .tama_table th {
            padding: 5px;
            
            text-align: center;
            }
        

        
    /* Index Table - br */
    
        .tamaindex_table_br {
            line-height: 5%;
            }
        
        @media screen and (min-width: 600px) {
            .tamaindex_table_br {
                display: none;
                }
            }
    
    /* Index Table - a */
        .tama_links a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .tama_links a {
                text-align: left;
                }
            }
        
        .tama_table a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .tama_table a {
                text-align: left;
                }
            }
        
    /* Index Table - img */
    
        .tama_table img {
            width: 35px; 
            margin-right: 5px; 
            float:left;
            }
            
    /* Tama Bar */   
    
        .tama-bar {
            display: table;
            margin: 0 auto;
            }
        
        .tama-bar img {
            width: 35px;
            }
            
        @media screen and (max-width: 600px) {
            .tama-bar img {
                width: 25px;
                } 
            }
            
    /* Ufo img */   
    
        .ufo-topleft {
            width: 60px; 
            position: absolute; 
            top: 150px; 
            left: 5px;
            }
            
        .ufo-topright {
            width: 60px; 
            position: absolute; 
            top: 150px; 
            right: 5px;
            }
            
        .ufo-bottomleft {
            width: 60px; 
            position: absolute;
            bottom: 125px; 
            left: 5px;
            }
        
        .ufo-bottomright {
            width: 60px; 
            position: absolute;
            bottom: 125px;
            right: 5px;
            }
        
        @media screen and (max-width: 600px) {
            .ufo-topleft, .ufo-topright, .ufo-bottomleft, .ufo-bottomright {
                display: none;
                }
            }
            
/*Website Links Index=========================================================*/

    /* Websitelinks Tale - Table */
    	        
        .websitelinks_table, .websitelinks_table th, .websitelinks_table tr, .websitelinks_table td {
            border-collapse: collapse;
            
            text-align: justify;
            }
        
        .websitelinks_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            .websitelinks_table {
                width: 100%;
                }
            }
            
        .websitelinks_table tr, .websitelinks_table td{
            padding: 15px 10px 15px 10px;
        }
        
        .websitelinks_table th {
            padding: 5px;
            
            text-align: center;
            }
       
    /* Websitelinks Table - br */
    
        .websitelinks_table_br {
            line-height: 5%;
            }
        
        @media screen and (min-width: 600px) {
            .websitelinks_table_br {
                display: none;
                }
            }
        
    /* Websitelinks Table - a */
    
        .websitelinks_table a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .websitelinks_table a {
                text-align: left;
                }
            }
            
    /* Warning message */  
    
        #warning {
            margin: 0 auto;
            
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            }
            
/*Login Page==================================================================*/

    #login-container {
        width: 50%;
        border-style: outset;
        box-sizing: border-box;
        padding: 20px;
        margin: auto;
        margin-bottom: 40px;
        
        text-align: center;
        }
        
    @media screen and (max-width: 600px) {
        #login-container {
            width: 100%;
            }
        }
    
    #loginfield-container {
        width: 50%;
        margin: 0 auto;
        border-style: outset;
        box-sizing: border-box;
        
        text-align: center;
        }
    
    @media screen and (max-width: 600px) {
        #loginfield-container {
            width: 100%;
            }
        }

    #login-container input[type=text], #login-container input[type=password]{
    	width: 110px;
    	display: block;
    	margin: 0 auto;
        }
    
    @media screen and (max-width: 600px) {
        #login-container input[type=text], #login-container input[type=password] {
            width: 70%;
            }
        }
        
    #login-container input[type=submit] {
        margin-top: 10px;
        }

/*Contact Me==================================================================*/
    table.contact_table, .contact_table th, .contact_table tr, .contact_table td {
        border-collapse: collapse;
        text-align: left;
        }
    table.contact_table {
        width: 70%;
        margin: 0 auto;
        border-style: outset;
        }
    @media screen and (max-width: 600px) {
        table.contact_table {
            width: 100%;
            }
        }
    .contact_table tr, .contact_table td{
        padding: 15px 10px 15px 10px;
        }
    .contact_table th {
        text-align: center;
        padding: 5px;
        }
    .contact_table a {
       text-decoration: none;
        }
    .contact_table a:hover {
        text-decoration: underline;
        }
/*Journal Pages===============================================================*/
        
    .returnbutton {
        display: inline-block;
        float: left;
        width: fit-content;
        padding: 14px 16px;
        box-sizing: border-box;
        border-style: outset;
        
        font: inherit;
        font-weight: bold;
        text-decoration: none;
        }