/* 09/24/19 jb CSS for JonathanPalmerArt.com site */

/* General Site Usage */

body {
	margin: 0;
	background-color: darkgrey;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
	}
	
a {
	color: #9FA4CA;
	}
	
a:link {
	text-decoration: underline;
	color: hsl(270, 45%, 40%);
	}
	
a:visited {
	text-decoration: underline;
	color: hsl(270, 45%, 40%);
	}
	
a:hover {
	text-decoration: none;
	color: #7D45B6;
	}
	
a:active {
	text-decoration: underline;
	color: #7D45B6;
	}
		
table {
	border-collapse: collapse;
	width: 100%;
	border: 0px;
	}
	
td {
	padding: 0px;
	}
	
p {
	word-wrap: break-word;
	margin: 0;
	}
	
a {
	font-weight: normal;
	color: hsl(183, 60%, 60%);
	}

img {
	-webkit-animation: boxgrow 5s 1; /* Chrome, Safari, Opera */
	animation: boxgrow 5s 1;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
	animation-fill-mode: forwards;
	text-align: center;
	color: black;
	max-width: 100%;
	height: auto;
	}
	
h1 {
	font-size: 1.75rem;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	margin: 5px 5px 5px 5px;
	padding: 0px 0px 0px 0px;
	}
	
h2 {
	font-size: 1.75rem;
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: center;
	margin: 0px 0px 0px 0px;
	word-wrap: break-word;
	padding: 15px 0px 15px 0px;
	text-decoration: underline;
	}

dl {
	padding: 10px;
	}
	
dt {
	Xfloat: left;
	Xclear: left;
	Xwidth: 100px;
	text-align: left;
	font-weight: bold;
	font-size: 1.20rem;
	color: green;
	}
	
dd {
	margin: 10px 20px 30px 20px;
	text-align: justify;
	}
	
ul, ol {
	padding: 20px 20px 10px 20px;
	}
	
ul li {
	list-style-type: disc;
	text-align: justify;
	margin: 0px 0px 0px 30px;
	text-indent: -20px;
	padding: 5px 0px 5px 20px;
	}

ol li {
	text-align: justify;
	margin: 0px 0px 0px 30px;
	text-indent: -20px;
	padding: 5px 0px 5px 20px;
	}

figure {
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-style: italic;
	text-indent: 0;
	margin: 0;
	}

figcaption {
	text-align: center;
	padding: 5px 20px 10px 20px;
	font-size: 1.10rem
	}

/* For Blog Page */
iframe {
	width: 100vw;
	height: 100vh;
	}

/* Related to Classes */

img.logo {
	-webkit-animation: shapegrow 5s 1;
	animation: shapegrow 5s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
p.caption {
	text-align: center;
	word-wrap: unset;
	}

p.divider {
	text-align: center;
	}

p.divider::after {
	content: "***";
	}
	
.firstword {
	font-weight: bold;
	}
	
.figimage {
	-webkit-animation: boxgrow 5s 1;
	animation: boxgrow 5s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	border-radius: 10px;
	}
	
.stmt {
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: justify;
	margin: 10px;
    padding: 0;
	font-size: 1.10rem;
	}
	
.stmt::first-letter {
	color: #5a3cff;
	font-size: 1.75rem;
	font-weight: bold;
	}
		
.links {
	font-style: normal;
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px ;
	font-weight: bold ;
	white-space: normal ;
	}

.c {
	text-align: center;
	}
	
.boxed {
	border: 2px black;
	border-style: solid;
	padding: 10px;
	margin: 10px;
	}
.boxed::after {
	content: "";
	clear: both;
	display: table;
	}

/* For the Menu and Navigation */

.stellarnav > ul > li > a {
	padding: 12px 30px; 
	color: hsl(183, 60%, 60%);
	}
	 
.stellarnav {
	background-color: black; 
	}
	 
.stellarnav.light li a {
	Xtext-indent: 0;
	}
	
.stellarnav.dark li a {
	text-indent: 0;
    color: rgb(0, 244, 255);
	}

.stellarnav.dark a {
    color: rgb(0, 244, 255);
	}

.stellarnav.mobile ul {
	z-index: 800;
	}

.stellarnav.mobile ul ul {
    margin-left: 20px;
    }
    
.newsnav {
	text-indent: 0;
	text-align: center;
	padding: 10px;
	white-space: nowrap;
    }

.newsnav > a {
	color: red;
    }

#searchbox {
    width: 100%;
    padding: 5px 0px 5px 15px;
    border: 1px solid #ddd;
    margin: 5px 5px 5px 20px;
    background-color: #eeeeee;
	}

/* For the front page image slideshow */

h1.ui-loader-header, img[alt^="slideshow"] {
    display: none;
	}

#krbanner-outer {
	height: 33vh;
	max-height: 400px;
	margin: 0px 0px 20px 0px;
    overflow: hidden;
	}

#krslideshow {
	width: 100%;
	margin: 0;
	}

#krslideshow img {
	width: 100%;
	margin: 0;
	object-fit: cover; 
	object-position: 50% 50%;
	max-height: 33vh;
	}

.krbanner-text {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translate(-50%, -50%);
    border-radius: 0px 0px 20px 20px;
    padding: 0px 10px 5px 10px;
    background: black;
    color: rgb(0, 244, 255);
    white-space: nowrap;
	z-index: 200;
   	}

.krbanner-loading {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:-100;
	white-space: nowrap;
   	}

/* For the front page portfolios */

#portfolio-div, #shows-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	align-items: center;
    }

#portfolio-div > div {
    max-width: 300px;
    padding: 40px;
	}
	
#shows-div > p {
    max-width: 400px;
    padding: 8px;
	}

/* For the front page listing and other multi-column listings */

ul.front, ol.front {
	-webkit-column-width: 200px; /* Chrome, Safari, Opera */
	-moz-column-width: 200px; /* Firefox */
	column-width: 200px;
	padding: 10px 0px 10px 0px;
	}

ul.multicolumn, ol.multicolumn {
	-webkit-columns: 3 400px; /* Chrome, Safari, Opera */
	-moz-columns: 3 400px; /* Firefox */
	columns: 3 400px;
	}

li.front {
	color: black;
	list-style-type: none;
	padding: 2px 2px 8px 15px;
	text-align: left;
	line-height: 0.75rem;
	font-size: 0.75rem;
	display: block;
	}
	
li.front::before {
	content: '\2022';
	color: red;
	font-weight: bold;
	font-size: 1.50rem;
	vertical-align: middle;
}

/* For the Categories page */

figure.figureBox {
    border: 5px solid white;
    padding: 15px 15px 0 15px;
	}
    
.thumbnail {
	cursor: url('/paintings/images/zoom-in-2-24.png'), auto;
	}

.catpoop {
	text-align:justify;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px 0 20px;
    }

/* Magnifying icon: top left */
.magnify {
	position: absolute;
	top: 0px;
	left: -5px;
	animation: none;
	width: unset;
	}

/* Close Icon on Modal page */
#modal-close {
	position: fixed;
	top: 5px;
	right: 5px;
	animation: none;
	width: unset;
	}

/* Categories Page, The Modal (background) */
#modal-outer {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10000; /* Sit on top */
	padding-top: 0px; /* Location of the box */
	left: 0;
	right: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	background-color: hsl(0,0%,66%); 
	cursor: url('/paintings/images/x-mark-16.png'), auto;	
	}

.modal-bar-left {
	position: fixed ;
	height: 70%;
	top: 15%;
	width: 15%;
	left: 0%;
	cursor: url('/paintings/images/arrow-95-24.png'), auto;	
	z-index: 2000 ;
    }

.modal-bar-right {
	position: fixed ;
	height: 70%;
	top: 15%;
	width: 15%;
	right:0;
	cursor: url('/paintings/images/arrow-30-24.png'), auto;	
	z-index: 2000 ;
    }

.modal-arrow {
	position: fixed; /* Stay in place */
	opacity: 0.7 ;
	top: 45%;
	-webkit-animation: none;
    animation: none;
    }

.modal-text-centered {
	position: fixed ;
	height: 100% ;
	width: 100% ;
	top: 45% ;
	left: 40% ;
	z-index: 500 ;
	color: black ;
	}

/* Categories Page, The Large Image in Modal */
div#modal-imgs {
	position: relative;
	width: 100%;
	object-fit: contain; 
	}

.modal-img {
	width: 100%;
	object-fit: contain; 
	max-height: 93%;
	z-index: 1000 ;
	animation: none;
	position: absolute;
	height: 100% ;
	}

#modal-img-outgoing {
	transform:translate(-100%) scale(1) ;
	-webkit-transform:translate(-100%) scale(1) ;
	}


/* Categories Page: Caption of Modal Image */
#modal-caption {
	text-align: center;
	color: black;
    position: fixed;
    bottom: 10px;
    width: max-content;
	background-color: hsl(0, 0%, 66%);
    padding: 5px;
    border-radius: 10px 10px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    font-weight: bold;
    max-width: 80%;
	z-index: 1100 ;
	-webkit-animation-name: zoomInAnimation;
	-webkit-animation-duration: 0.6s;
	animation-name: zoomInAnimation;
	animation-duration: 0.6s;
}

#modal-nickname, .seq {
	font-weight: bold ;
	font-size: 13px ;
	color: red ;
	font-style: normal ;
	}

#modal-loading h3 {
	padding: 20px;
	background-color: hsl(0, 0%, 66%); 
	border-radius: 20px;
	width: fit-content;
	opacity: 0.0;
	}
    
#modal-loading {
    z-index: 1500 ;
    }

.slideOutToLeft {
	-webkit-animation: slideOutToLeftAnimation 1s 1;
	animation: slideOutToLeftAnimation 1s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.slideInFromRight {
	-webkit-animation: slideInFromRightAnimation 1s 1;
	animation: slideInFromRightAnimation 1s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.slideOutToRight {
	-webkit-animation: slideOutToRightAnimation 1s 1;
	animation: slideOutToRightAnimation 1s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.slideInFromLeft {
	-webkit-animation: slideInFromLeftAnimation 1s 1;
	animation: slideInFromLeftAnimation 1s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.zoomIn {
	-webkit-animation: zoomInAnimation 0.6s 1;
	animation: zoomInAnimation 0.6s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.fadeInLoading {
	-webkit-animation: fadeInLoadingAnimation 1.0s 1;
	animation: fadeInLoadingAnimation 1.0s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	
.zoomOut {
	-webkit-animation: zoomOutAnimation 0.6s 1;
	animation: zoomOutAnimation 0.6s 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	}
	

/* For the Current Shows and Press Pages */
div.multicolumn {
	margin: 60px 0px 0px 0px;
	text-align: center;
	-webkit-columns: 2 400px;
	-moz-columns: 2 400px;
	columns: 2 400px;
	}
	
/* For the About Page */
#first-stuff {
	margin-top: 50px;
	}

.figurediv {
	text-align: center;
	}

.figurediv figure {
	width: 30%;
	margin: 20px 3% 0px 3%;
	min-width: 250px;
	}

/* For Animations */

/* Chrome, Safari, Opera */
@-webkit-keyframes shapegrow {
	from {-webkit-filter: drop-shadow(8px 8px 7px transparent); }
	to {-webkit-filter: drop-shadow(8px 8px 7px #222222); }
	}
	
/* Standard syntax */
@keyframes shapegrow {
	from {filter: drop-shadow(8px 8px 7px transparent); }
	to {filter: drop-shadow(8px 8px 7px #222222); }
	}
	
/* Chrome, Safari, Opera */
@-webkit-keyframes boxgrow {
	from {box-shadow: 8px 8px 14px transparent;}
	to {box-shadow: 8px 8px 14px #222222;}
	}
	
/* Standard syntax */
@keyframes boxgrow {
	from {box-shadow: 8px 8px 14px transparent;}
	to {box-shadow: 8px 8px 14px #222222;}
	}
	
/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes slideOutToLeftAnimation {
  from { -webkit-transform:translate(0%) } 
  to { -webkit-transform:translate(-100%) }
}

/* Categories Page: Standard Syntax * /
@keyframes slideOutToLeftAnimation {
  from { transform:translate(0%) } 
  to { transform:translate(-100%) }
}

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes slideInFromRightAnimation {
  from { -webkit-transform:translate(100%) } 
  to { -webkit-transform:translate(0%) }
}

/* Categories Page: Standard Syntax * /
@keyframes slideInFromRightAnimation {
  from { transform:translate(100%) } 
  to { transform:translate(0%) }

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes slideOutToRightAnimation {
  from { -webkit-transform:translate(0%) } 
  to { -webkit-transform:translate(100%) }
}

/* Categories Page: Standard Syntax * /
@keyframes slideOutToRightAnimation {
  from { transform:translate(0%) } 
  to { transform:translate(100%) }
}

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes slideInFromLeftAnimation {
  from { -webkit-transform:translate(-100%) } 
  to { -webkit-transform:translate(0%) }
}

/* Categories Page: Standard Syntax * /
@keyframes slideInFromLeftAnimation {
  from { transform:translate(-100%) } 
  to { transform:translate(0%) }
}

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes zoomInAnimation {
  from { -webkit-transform:scale(0); opacity: 0; } 
  to { -webkit-transform:scale(1); opacity: 1; }
}

/* Categories Page: Standard Syntax * /
@keyframes zoomInAnimation {
  from { transform:scale(0); opacity: 0; } 
  to { transform:scale(1); opacity: 1; }
}

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes zoomOutAnimation {
  from { -webkit-transform:scale(1); opacity: 1; }
  to { -webkit-transform:scale(0); opacity: 0; } 
}

/* Categories Page: Standard Syntax * /
@keyframes zoomOutAnimation {
  from { transform:scale(1); opacity: 1; }
  to { transform:scale(0); opacity: 0; } 
}

/* Categories Page: Chrome, Safari, Opera */
@-webkit-keyframes fadeInLoadingAnimation {
  from { opacity: 0.0 } 
  to { opacity: 1.0 }
}

/* Categories Page: Standard Syntax * /
@keyframes fadeInLoadingAnimation {
  from { opacity: 0.0 } 
  to { opacity: 1.0 }
}

/* Tablet or Landscape Phone Settings */
@media (max-width: 820px) {

/* Limit iPhone Landscape Text Magnifying */
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}

.c {
	text-align: center;
	}
	
}

/* Phone Settings */
@media (max-width: 575px) {

ul {
	padding: 10px 10px 0px 10px;
	}
	
li {
	padding: 5px 15px 5px 15px;
	}
	
h2 {
	font-size: 1.25rem;
	padding: 5px 5px 0px 5px;
	}
	
h1 {
	font-size: 1.25rem;
	margin: 10px 0px 0px 0px;
	}
	
img {
	margin: 5px 0px 5px 0px;
	}
	
.figimage {
	border-radius: 5px;
	}
	
.c {
	text-align: center;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}

ol li, ul li {
	text-align: justify;
	margin: 0px 0px 0px 5px;
	text-indent: unset;
	padding: 5px 0px 5px 5px;
	}

figure.figureBox {
	padding: 5px 5px 0 5px;
	}

}