/* styles for thumbnail pages*/

body {
	display: grid;
	margin: 20px;
	background-color: #666;
	height: 800px;
	width: 1350px;
	
	font-family:Helvetica, sans-serif;
	font-size:12pt;
	line-height:1.2;
	text-align: left;
	color:#000;
	
	grid-template-columns: 975px 250px fr;
	grid-column-gap: 50px;
	grid-template-rows: 375px 375px;
	grid-row-gap: 20px;
	grid-template-areas: 
		"grid   info  ."
		"grid   nav   .";
	}


.image_block {grid-area: grid;}
.image_grid {display:grid;
	grid-template-columns: 175px 175px 175px 175px 175px fr;
	grid-template-rows: 175px 175px 175px 175px fr;
	grid-column-gap: 50px;
	grid-row-gap: 20px;
	grid-template-areas:
		"box1 box2 box3 box4 box5"
		"box6 box7 box8 box9 box10"
		"box11 box12 box13 box14 box15"
		"box16 box17 box18 box19 box20";
}
 

.box1{grid-area: box1; justify-self:center; align-self: center;}
.box2{grid-area: box2; justify-self:center; align-self: center;}
.box3{grid-area: box3; justify-self:center; align-self: center;}
.box4{grid-area: box4; justify-self:center; align-self: center;}
.box5{grid-area: box5; justify-self:center; align-self: center;}
.box6{grid-area: box6; justify-self:center; align-self: center;}
.box7{grid-area: box7; justify-self:center; align-self: center;}
.box8{grid-area: box8; justify-self:center; align-self: center;}
.box9{grid-area: box9; justify-self:center; align-self: center;}
.box10{grid-area: box10; justify-self:center; align-self: center;}
.box11{grid-area: box11; justify-self:center; align-self: center;}
.box12{grid-area: box12; justify-self:center; align-self: center;}
.box13{grid-area: box13; justify-self:center; align-self: center;}
.box14{grid-area: box14; justify-self:center; align-self: center;}
.box15{grid-area: box15; justify-self:center; align-self: center;}
.box16{grid-area: box16; justify-self:center; align-self: center;}
.box17{grid-area: box17; justify-self:center; align-self: center;}
.box18{grid-area: box18; justify-self:center; align-self: center;}
.box19{grid-area: box19; justify-self:center; align-self: center;}
.box20{grid-area: box20; justify-self:center; align-self: center;}




.link 		{text-decoration: none; color: #00f;}

/*for index pages*/


.info_block{
	grid-area: info;
}

.title {	
	font-family:Verdana, sans-serif; font-size:14pt;
	text-align:center;}

.nav_block {
	grid-area: nav;
}
.nav {
	display: grid;
	grid-template-columns: 80px 80px fr;
	grid-template-rows: 25px 70px 70px 70px fr;
	grid-template-areas:
		"left_link right_link ."
		"up1_link up1_text up1_text"
		"up2_link up2_text up2_text"
		"up3_link up3_text up3_text";
}

.link 		{text-decoration: none; color: #00f;}
.no_link    {text-decoration: none; color: #888; }
.arrow {font-size: 30pt;}
.up_arrow {font-size: 24pt;}
.link_text{
	font-family:Verdana, sans-serif; 
	font-size:12pt;
	text-decoration: none; 
	text-align: center;
	}

.left_link {grid-area: left_link; justify-self:center;}
.right_link {grid-area: right_link; justify-self:center;}
.up1_link {grid-area: up1_link; justify-self:center;}
.up1_text {grid-area: up1_text; justify-self:start; align-self: center;}
.up2_link {grid-area: up2_link; justify-self:center;}
.up2_text {grid-area: up2_text; justify-self:start; align-self: center;}
.up3_link {grid-area: up3_link; justify-self:center;}
.up3_text {grid-area: up3_text; justify-self:start; align-self: center;}


/*

/*




/*
.box_1{grid-column: 1/2; grid-row: 2/3; }
.box_2{grid-column: 2/3; grid-row: 2/3; }
.box_3{grid-column: 3/4; grid-row: 2/3; }
.box_4{grid-column: 4/5; grid-row: 2/3; }
.box_5{grid-column: 5/6; grid-row: 2/3; }

.box_6{grid-column: 1/2; grid-row: 3/4; }
.box_7{grid-column: 2/3; grid-row: 3/4; }
.box_8{grid-column: 3/4; grid-row: 3/4; }
.box_9{grid-column: 4/5; grid-row: 3/4; }
.box_10{grid-column: 5/6; grid-row: 3/4; }

.box_11{grid-column: 1/2; grid-row: 4/5; }
.box_12{grid-column: 2/3; grid-row: 4/5; }
.box_13{grid-column: 3/4; grid-row: 4/5; }
.box_14{grid-column: 4/5; grid-row: 4/5; }
.box_15{grid-column: 5/6; grid-row: 4/5; }
≈

.link_text{width: 200px;
	font-family:Verdana, sans-serif; font-size:12pt;
	text-align:center;	
	margin-top:0; margin-bottom:0; 
	margin-left: 0px;
}

.nav {
	grid-column: 3/4 ;grid-row: 5/6;
	width: 200px;
	display: grid;
	grid-template-columns: 75px 50px 75px;
	margin-top: 0pt;
	font-size:36px; 
}


.link {text-decoration: none;color: #00f;}
.link_left  {grid-column: 1/2; text-align: right;
		text-decoration: none; color: #00f;
		 }

.link_cent  {grid-column: 2/3; text-align: center;
		text-decoration: none; color: #00f;}

.link_right {grid-column: 3/4; text-align: left;
		text-decoration: none; color: #00f; }


.no_link    {text-decoration: none; color: #888; }
*/