@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'ptf45';
    src: url('ptf45-webfont.woff2') format('woff2'),
         url('ptf45-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ptf65';
    src: url('ptf65-webfont.woff2') format('woff2'),
         url('ptf65-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ptf46';
    src: url('ptf46-webfont.woff2') format('woff2'),
         url('ptf46-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'prentlt_';
    src: url('prentlt_-webfont.woff2') format('woff2'),
         url('prentlt_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


* {
    font-family: 'ptf45';
	font-weight: normal;
	font-style: normal;
	color: rgb(80,80,90);
}

body {
	background-color: rgb(235,230,226);
	text-align:center;
	margin:0;
	padding:0;
}

form {
	margin:0;
}

p a {
	font-family: 'ptf65';
	color:rgb(75,5,140);
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-color:rgb(140,140,160);
    text-underline-offset:5px;
}

p a u {
    
    text-decoration-style:dotted !important;
   
}

p a:hover {
    color:rgb(0,126,248);
    text-decoration-line:underline;
    text-decoration-style:solid;
    text-decoration-color:rgb(160,160,175);

}

strong {
	font-family: 'ptf65';
	font-weight: normal;
	font-style: normal;
	color:rgb(30,30,45);
}

b {
	font-family: 'ptf65';
	font-weight: normal;
	font-style: normal;
	color:inherit;
}

em {
	font-family: "ptf46";
    font-weight: normal;
    font-style: normal;
	color:rgb(30,30,45);
}

i {
	font-family: "ptf46";
    font-weight: normal;
    font-style: normal;
	color:inherit;
}




.indexhead {
	margin: 0;
	margin-top: 40px;
	margin-bottom: 20px;
	font-size:6vw;
}

.indexicon {
	display: inline-block;
	margin:2%;
	margin-top:5%;
	width:20%;
}

.indexicon img{
	display: block;
	margin-bottom:10px;
	width:100%;
	border: 3px solid rgb(235,230,226);
}

.indexicon img:hover{
	border: 3px solid white;
}

.indexicon a{
	display: block;
	margin-top:12px;
	margin-bottom:0;	
	font-size:1.8vw;
	color:rgb(75,5,140);
    text-decoration-line:none;
    text-decoration-style:dotted;
    text-decoration-color:rgb(140,140,160);
    text-underline-offset:5px;
    cursor:pointer;
}

.indexicon a:hover {
    text-decoration-line:underline;
    text-decoration-style:solid;
    text-decoration-color:rgb(160,160,175);
    text-underline-offset:5px;
}


.topnav {
	display: inline-block;
	width:100%;
	text-align:center;
	height: 100px;

}


nav a.navhead {
	display:inline-block;
	font-size: 33px;
	margin: 0;
	line-height: 80px;
	cursor:pointer;
	padding:0px;
	padding-left: 20px;
	padding-right: 40px;
	text-decoration: none;
}

nav a.navhead:hover {
	color: rgb(125,50,120);
}

.topnavlinks {
	display:inline-block;
	margin: 0;
	padding: 0;
}


nav a.topnavlink {
	text-decoration: none;
	font-size:18px;
	line-height: 80px;
	padding:0px;
	padding-left: 20px;
	padding-right: 20px;
	border-left: 1px solid rgb(255,255,255);
	color: rgb(125,50,120);

	display: inline-block;
	cursor:pointer;
}

nav a.topnavlinkright {
	border-right: 1px solid rgb(255,255,255);
}

nav a.topnavlink:hover {
	background-color:rgb(255,255,255);
	background-color:rgb(245,243,242);

}

.navthumbnails {
	display:inline-block;
	margin-left:calc(15% - 116px) ;
	margin-right:15%;
	background-color:transparent;
	width:70%;

}


.thumbnail {
	display:inline-block;
	margin:6px;
	border:1px solid rgb(255,255,255);
	width:100px;
	height:100px;
}

.thumbnail:hover {
	border:1px solid rgb(120,120,255);
}


.sidenav {
	display:block;
	margin-left:16px;
	background-color:transparent;
	width:100px;
	float:left;
	text-align:left;
}

.sidenavlink {
	display:block;
	font-family: 'prentlt_', sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
	font-size:14px;
	color:rgb(170,170,190);
	color:rgb(130,130,145);
	text-decoration:none;
	line-height:18px;
	margin-top:16px;

}

.sidenavlink:hover {
	color:rgb(75,5,140);
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-color:rgb(140,140,160);
    text-underline-offset:5px;
}


.displaycontainer {
	display:block;
	margin-left:auto;
	margin-right:auto;
	background-color:transparent;
	width:100%;
	height:calc(100vh - 100px);
	text-align:center;
	border:none;
	//border: 1px solid orange;
}


.imgcontainer {
	display:inline-block;
	height:auto;
	border:none;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:100%;
	height:100%;

}

.imgcontainer img {
	display:inline-block;
	object-fit:contain;
	object-position:top center;
	max-width:80%;
	max-height:calc(100vh - 180px);
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}

.imgcontainer p {
	display:inline-block;
	margin:0;
	margin-top:10px;
	margin-left:10px;
	text-align:left;
	font-size:14px;
	width: 10vw;
	vertical-align:top;
}

.imagetitle {
	font-family: 'ptf65';
	font-weight: normal;
	font-style: normal;
	color:inherit;
	font-size:18px;
}

.displaybuttons {
	display:inline-block;
	height:35px;
	text-align:center;
}

.displaybuttons table {
	margin-left:auto;
	margin-right:auto;
}

.displaybuttons button {
	appearance:none;
	padding-top:1px;
	padding-left:6px;
	padding-right:6px;
	padding-bottom:2px;
	border:1px solid rgb(210,200,220);
	border-radius:4px;
	font-family: 'prentlt_', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color:rgb(80,80,90);
	background-color:rgb(240,235,231);
}

.displaybuttons button.greyed {
	color:rgb(200,200,205);
}

.displaybuttons select {
	appearance:none;
	padding-top:1px;
	padding-left:6px;
	padding-right:6px;
	padding-bottom:2px;
	border:1px solid rgb(210,200,220);
	border-radius:4px;
	font-family: 'prentlt_', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color:rgb(100,100,120);
	background-color:rgb(240,235,231);
}

.displaybuttons button:hover {
	border:1px solid rgb(180,170,190);
	background-color:rgb(245,243,242);
}

.displaybuttons select:hover {
	border:1px solid rgb(180,170,190);
	background-color:rgb(245,243,242);
}


#copyrightstrip {
	background-color:rgb(235,230,226); 
	display:box; 
	position:fixed;
	left:0;
	top:calc(100% - 20px);
	height:20px; 
	font-size:10px;
	line-height:20px;
	width:100%; 
	font-family:'prentlt_', sans-serif;
}

#copyright {
	box-shadow: 1px 1px 6px #000000; 
	border:1px solid rgb(75,5,140);
	display:none;
	position:fixed;
	left:32%;
	top:23%;
	margin-left:auto;
	margin-right:auto;
	background-color:white;
	padding:12px;
	width:25%;
	cursor:pointer;

}


/*----------------------------------------------------------media query for small browser window----------------------------------------------------------*/
@media screen and (max-width:1020px) {

.topnav a.navhead {
	font-size:45px;;
	margin-top:10px;
	line-height: 45px;
	padding-left: 10px;
	padding-right: 10px;
}

.topnavlinks {
	display:block;
}

.topnav a.topnavlink {
	font-size:16px;
	line-height: 36px;
	border:0;
	padding-left: 3%;
	padding-right: 3%;
}

.navthumbnails {
	margin-left:auto;
	margin-right:auto;
}

.sidenav {
	display:block;
	margin-left:30%;
	background-color:transparent;
	width:70%;
	clear:both;
	text-align:left;
}

.sidenavlink {
	color: rgb(125,50,120);
    font-family: 'ptf45';
	font-weight: normal;
	font-style: normal;
	
}

.indexicon {
	display: inline-block;
	margin-left:2%;
	margin-right:2%;
	margin-top:1%;
	width:20%;
}

.indexicon a {
	font-size:18px;
}


.thumbnail {
	width:90px;
	height:90px;
}

.displaycontainer {
	width:90%;
}

.imgcontainer {
	width:100%
}

.imgcontainer p {
	display:inline-block;
	margin:0;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
	text-align:center;
	width: 80vw;
	vertical-align:top;
}

.imgcontainer img {
	display:inline-block;
	object-fit:contain;
	object-position:top center;
	max-width:90%;
	max-height:calc(100vh - 220px);

}



}

/* ----------------------------------------------------- Media query for tablets ----------------------------------------------------------*/
@media screen and (max-width:900px) {

.indexicon a{

}


.topnav {
	display: inline-block;
	width:100%;
	text-align:center;
	height: 100px;
}


.topnavlinks {
	display:block;
}

.topnav a.navhead {

}

.topnav a.topnavlink {
	//font-size:16px;
	//border:0;
	//padding-left: 3%;
	//padding-right: 3%;
}

.navthumbnails {
	//margin-top:60px;
	width:90%;

}

.thumbnail {
	width:80px;
	height:80px;
}

.displaycontainer {
	//width:90%;
	//margin-top:60px;
}

}


/*----------------------------------------------------------media query for small screen devices----------------------------------------------------------*/
@media screen and (max-width:480px) {

.indexicon {
	display: block;
	margin-left:auto;
	margin-right:auto;
	margin-top:1%;
	width:33%;
}

.indexicon a {
	font-size:16px;
}


.indexhead {
	display:block;
	font-size:32px;
	line-height:32px;
	//color:red;
	margin-top:20px;
	margin-bottom:25px;
}

.topnav a.navhead {
	margin-top:10px;
	line-height: 40px;
	font-size:32px;
}

.topnav a.topnavlink {

}

.navthumbnails {
	//margin-top:40px;
	width:90%;
}

.thumbnail {
	width:70px;
	height:70px;
}

.sidenav {
	display:block;
	margin-left:18%;
	background-color:transparent;
	width:80%;
	clear:both;
	text-align:left;
}


.displaycontainer {
	width:100%;
	//margin-top:40px;
}

.imgcontainer {
	display:inline-block;
	height:auto;
	border:none;
	margin-left:auto;
	margin-right:auto;
	//border: 2px solid blue;
	text-align:center;
	width:100%;
	height:100%;

}

.imgcontainer img {
	display:inline-block;
	object-fit:contain;
	object-position:top center;
	max-width:86%;
	max-height:calc(100vh - 350px);

}

.imgcontainer p {
	display:inline-block;
	margin:0;
	margin-top:10px;
	margin-left:10px;
	text-align:center;
	//border: 1px solid red;
	width: 90vw;
	vertical-align:top;
}

#copyrightstrip {

}

#copyright {
	box-shadow: 1px 1px 6px #000000; 
	border:1px solid rgb(75,5,140);
	display:none;
	position:fixed;
	left:20%;
	top:20%;
	background-color:white;
	padding:12px;
	width:55%;

}

}