/* Martin CSS  version 2.0 */

/* 2.0 Convert old site to grid format */


* {box-sizing:border-box;}

html,body {height:100%;
			max-height:100%;}

body {
	margin:0; 
	border:0;
	padding:0; 
	color: #778;
	background-color:#f0f3f3;  /*  */
/*	background-image:url("images2/off white cloth from bricks 300x300.png");	/*	*/
/*	background-image:url("images2/blue cloth from 300x300.png");

	font-size:100%;   /* 100% of html which should be default browser size, often 16px but
							can be changed by user.  Believed a necessary line to cover some 
							old browser bugs.  May be obsolete now.  Default should be 100% */
	font-family: 'Maven Pro', sans-serif;
	}	
				
.container 
	{
	display:grid;
	max-height:100vh;  	/*  */
	height:100vh;		/*  */
	padding: 2vh 3vw;  /* ??? */
	grid-gap: 15px;
	justify-content: space-between; 
	
	grid-template-columns:auto 1fr 2fr;
	grid-template-rows: auto minmax(50vh, 1fr) auto;
	grid-template-areas: 'headerLeft ....    navbar'
					     'main       main    main'
						 'footer     footer  footer';
	
	overflow:hidden;
/*	background-color:blue;       /* useful for deug */	
					 
	}
	

	
.headerLeftDiv {
/*	padding-left:3vw;		*/
	grid-area:headerLeft;

	}
	
.title 
	{
	margin:0;
	margin-bottom:5px;
	font-size:4.3vw;
	justify-self:center;
	text-align:center;
	}


.job {
	margin:0;
	padding-top:0;
	font-size:2.3vw;
	justify-self:center;
	text-align:center;
	color:#889;
	border-color:#889;
	border-top-style:solid;
	border:width:5px;
	}

.navbarUL
	{
	padding: 20px 0 15px 0;
	grid-area: navbar;
	display:grid;
	grid-template-columns: auto auto auto auto ;
	grid-template-rows: auto ;
	justify-self:end;
	} 
	

.navbarUL a {
				font-family:'Maven Pro', sans-serif;
				font-weight:bold;
				font-size:1.6vw;
				margin:0;
   				padding:0px 10px 0px 10px;
   		 		color: #99a;
   		 		text-decoration:none;
   				text-align: center;		/*  */
				}

.navbarUL a:hover:not(.active) {color: #333;
								text-shadow: 2px 2px 2px #778;
								}

.navbarUL a.active {color:#667;}    /* make sure to define link to active page as class=active */


.mainDiv 
	{
	grid-area:main;
/*	height:100%;    /* Appears to make a difference in Safari. With this in Safari 
						expands to fit entire contents */
	max-height:100%;
	max-width:100vw;
	min-width:50vw;
	}
	

	
/*  Each main formatted differently in it's own CSS file  */

.footerP 
	{
	grid-area:footer;
	margin: 0;
	padding:5px;	
	padding-bottom:15px;  
	padding-left:3vw;    
	
	}
	
	
	
	/*   *********************  Responsive  Design ***************************** */
		@media screen and (max-width: 800px)													
	{
	
		.container 
		 {
			grid-template-columns: 1fr ;
			grid-template-rows: auto auto minmax(60vh, 1fr) auto; 
			grid-template-areas: 'headerLeft'   
								 'navbar'
					 		     'main'
								 'footer';
		 }
		
		.title {
					font-size:6vw;		
			}	
		.job {
			font-size:3.5vw;
			border:none;
			}

    	.navbarUL
    	 { 
    	 padding: 0 4vw 0 4vw;			/* Top right bottom left  */
    	 margin:0;
    	 justify-self:center;
   		 }
		 	
		.navbarUL  a 
			{
			margin:0; 
			font-size:3vw;       
			}

	}  /* end @media for mobile  */


/*   ***************************   Modify Scroll Bars ********************************** */
/*   ************ Make narrower & force appearance when there is overflow ************** */

::-webkit-scrollbar {
					appearance: none;
					-moz-appearance: none;		/* don't think this is helping */
					-webkit-appearance: none;	/* don't think this is helping */
					background-color:rgba(50, 50, 50, .5);
					width: 8px;
					border-radius:2px; 			
					}
::-webkit-scrollbar-thumb {
 					 background-color: rgba(250, 250, 255, .7);
 					 -webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, .5);
					 border-radius: 4px;
					}