/* comment: border of bg image with lavendar floating inner table */

html
{ background: url('https://kpservices.us/KPSGRAFX/MAIN/KPS-Lav-PageGrad900v.jpg') repeat-x top left;
background-color: plum;
background-image: linear-gradient(plum,white,plum);

}


body {	
	font-family:  'Trebuchet MS', Arial, Helvetica, Verdana, Geneva, sans-serif;
	border-color: #000000;
	color: #000000;
	padding-top: 3em;
	padding-bottom: 3em;
	padding-left: 3em;
	padding-right: 3em;
	
}
/* comment: dark green bold links with medium plum hovering, red active, and grey visited underline are default */



a {font-weight: bold; text-decoration: underline;}

a:link {color: #006600; }
a:visited {color: #333333; }
a:hover {color: #660066; background-color: #99ff99;	}
a:active {color: #ff0000; }


/* attempt to round corners  - need to do both this page div and nameplate */
html body div#pagediv div#nameplate.left a img 
			{		
	
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			}


/* a4d2a4 = lt green good color & round corners in combo with above */
#nameplate {background-color: #a4d2a4;
		
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;

					}
					
					
#nameplate a {background: none; }



#imagelink a img {background: none;}

#imagelink a:link {text-decoration: none; }
#imagelink a:visited  {text-decoration: none; }
#imagelink a:hover  {text-decoration: none; background: none;	}
#imagelink a:active  {text-decoration: none; background: none; }




#pagediv-ADPi { 		padding: 20px;
					border: none ;
					background-color: #000000;
					 }


/* border radius in conjunction with nameplate and img divs above*/
#pagediv { 	width:85%;	
		
					margin: 0px auto;
					border: none ;
					background-color: #ffffff;

			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
					 }


.centeredlink { text-align: center; }
.boldtextlink { text-decoration: underline; }

.textlink {  text-decoration: underline;  font-weight: normal}

.nolinetextlink {  text-decoration: none;  font-weight: normal}










.h1center { text-align: center; }

/* comment: H2--plum */

h2 {	font-size: 120%;
	text-align: left;
	
	font-weight: bold;
	border-color: #000000;
	color: #660066;
	}
.h2small { font-size: 100%; }

	
/* comment: H3--plum */

h3 {	font-size: 100%;
	text-align: left;
	
	font-weight: bold;
	border-color: #000000;
	color: #660066;
	}
	
.headgrey { color: #333333; }


/* comment: H4--deep grey */

h4 {	font-size: 90%;
	text-align: left;

	font-weight: bold;
	border-color: #000000;
	color: #333333;
	}
	
.h4right-red { text-align: right;
				color: #990000; }


li {line-height: 1.2em;
	padding-bottom: .5em; 
}


/* KP-now ok - used on portfolio page only? */		
.pictureright	
	{	text-align: center;
		margin-right: auto;
		padding-right: 0px; 
		float: right;
		display: inline;
		z-index: 100;
		font-size: 85%;
		font-weight: bold;
		}

/* for general pictures */
.rightpic
	{	text-align: center;
		padding-right: 10px;
		padding-left: 10px; 
		float: right;
		display: inline;
		z-index: 100;
		font-size: 75%;
		font-weight: bold;
		}
	

.centeredlist { font-size: 90%; 
	text-align: center;
	color: #ffcc99;
	vertical-align: top; }
	

.leftlist { font-size: 90%; 
	text-align: left;
	color: #ffcc99;
	vertical-align: top; }
	
.boldplum  { font-weight: bold;
				 color: #660066; }
				
.lavander  { color: #FFC5F9; }
				
.brown { color: #3C1d00; }
.green { color: #006600; }
.darkgreen { color: #003300; }

.rose { color: #cc9999; }

.red { color: #990000; }  
.redred { color: #ff0000; }  
.blue { color: #000066; }
.lightblue { color: #c6daf8; }
.brightblue { color: #000099; }

.brightyellow  { color: #ffff66; }
.lightyellow  { color: #ffe680; }
.yellowcellbg  { color: #ffffcc; }
.lightgreen  { color: #a4d2a4; }

.black { color: #000000; }
.white { color: #ffffff; }



/* DEFINE GENERIC STYLES */
	
.small { font-size: 92%; }
.smaller { font-size: 86%; }
.smallest { font-size: 78%; }
.small95 { font-size: 95%; }
.small90  { font-size: 90%; }
.small85 { font-size: 85%; }
.small80  { font-size: 70%; }
.small75 { font-size: 75%; }
.small70 { font-size: 70%; }

.big { font-size: 110%; }
.bigger { font-size: 120%; }
.biggest { font-size: 130%; }
.big110 { font-size: 110%; }
.big115 { font-size: 115%; }
.big120 { font-size: 120%; }
.big125 { font-size: 125%; }
.big130 {font-size: 130%; }
.big135 {font-size: 135%; }
.big140 {font-size: 140%; }
.big145 {font-size: 145%; }
.big150 {font-size: 150%; }
.big155 {font-size: 155%; }

.bold { font-weight: bold; }
.normal { font-weight: normal; }
.lighter	 { font-weight: lighter; }
.italic { font-style: italic; }
.underline { text-decoration: underline;}

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify {text-align: justify; }


/* also text-top and text-bottom values */
.super {vertical-align: super;}
.top {vertical-align: top;}
.baseline {vertical-align: baseline;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}
.sub {vertical-align: sub;}


/* SPECIAL/CUSTOM STYLES */

.nostyle { font-weight: normal; font-style: normal; }


.hr90 { width: 90%;  }
.hr80 { width: 80%;  }
.hr70 { width: 70%;  }
.hr50 { width: 50%;  }


.copyright { font-size: 80%; text-align: center; }


/* DROP DOWN MENUS  */

/* NAVBAR BOF */
/* Add top level navigation menu drop downs */

/* navbar ID: general characteristics of navigation */

#navbar { margin: 0px;
width: 100%;
padding-top: 3px;
font-size: 90%;
z-index: 50;
background-color: transparent;
}


/* all list items */

/* unless overridden below by #navbar li ul li style */
#navbar li {
float: left;
position: relative;
padding-top: .5em;
padding-bottom: .5em;
width: 20%;
text-align: center;
list-style: none;
background-image: url('https://kpservices.us/KPSGRAFX/MAIN/KPS-Lav-NavGrad40v.jpg');
				background-repeat: repeat-x;
				


}

/* all lists - reset */
#navbar ul {
padding: 0px;
margin: 0px;
list-style: none;				
}


.collapse {line-height: 20%;}



/* kp trying to fix for IE positioning - main culprit here */
/* second-level lists  - -  check 'top' on firefox... was 2 em, check padding top - was 2em 
border not seen??
 */
#navbar li ul {
display: none;
position: absolute;
top: 0px;
left: 0px;
padding-top: .5em;
padding-left: .3em;
text-align: left;
width: 100%;

}



/* SUBLIST ITEMS attempt to not have BG image in sublists plus reset width to 100  */
#navbar li ul li {
background-image: none; 
background-color: #FFC5F9;	
color: #006600;	
text-align: left;
padding-left: 0em;
width: 100%;
line-height: 110%;
}



/* This  works with IE7 which will position to the top right of the containing li, rather than bottom left  - - commented out, now, put top as 1.5em, zindex as 0, now left to 0

*/
#navbar a { text-decoration: none; display: block; padding: .3em .8em;}

#navbar a:link {color: #006600;}
#navbar a:visited {color: #333333;}
#navbar a:hover {color: #660066; background-color: #99ff99; 	}
#navbar a:active {color: #ff0000; }




 /* affects dropdown list background & position */
#navbar li>ul { 
top: 2.5em;
left: 0px;
z-index: 0;
background:  #FFC5F9;	

}



 /* lists nested under hovered list items */
#navbar li:hover ul, li.over ul {
display: block;
padding-left: 0px;
overflow: hidden;

}



 /* NAV BAR EOF  */
 
/* try to get header to pulse! no hover needed  /  scale uses integers not %
	WORKS!!! */

@keyframes pulsateSize {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(2,2);
    }
     100% {
        transform: scale(1,1);
    }
}



/* comment: H1--Plum  - ADD some TRANSITION - MAY 2022, added more 8/22 but not taking?? so move it here to bottom of page. May have to add as inline! */

h1 {font-size: 120%;
	text-align: center;
	font-weight: bold;
	line-height: 200%;
	color: #660066;
	animation-name: pulsateSize;
	animation-iteration-count: infinite;
	animation-duration: 3s;	
	

}


/* small screen media query! added 052622  */


@media only screen and (min-width:0px) and (max-width: 800px){
	
	
	#pagediv {width: 100%;}
	

	
	body {	padding-top: .3em;
	padding-bottom: .3em;
	padding-left: .3em;
	padding-right: .3em;
	}
	
}