body{	 
		   text-align:center;
		  margin:0px;
		   width:100%;
		   padding:0px;
		   background:rgb(122, 140, 146);
		   overflow-x: hidden;
		/*  background: linear-gradient(rgb(153, 134, 87), rgb(105, 105, 105), #2E5459) repeat scroll 0% 0% transparent;  */

		   }
#pagewrapper {  
     /*  min-width:640px;	*/
	 width:100vw;
	 padding:0px;
	}
		  @media (min-width: 1000px) {
.row {
			display: flex;
			width: 100%;
			height:100%;
			
		}
.column-half {	
padding:0px;
margin:0px;
		}		
	}
.header {
		  width:100vw;
	
		  margin-bottom:0px;
		  height:280px;
		  z-index:500;
		  background: linear-gradient(-10deg, #637E8D, #F2DFB4, #AE754B) repeat scroll 0% 0% transparent;
		   border-bottom: 5px solid #666;
		   box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.9);
		   opacity:0.9;	
          }
.nuccImg {
		  background:url('nuchHead.png') no-repeat;
		  background-size:cover;		  
		  height:280px;
 		  max-width:960px;
		  min-width:100px;
		  margin-bottom:0px;
		  }
.footer {
		   background:#1E1818;
		 /* border: 8px solid #443; */
		  margin-top: 18px;
		  /* padding:12px; */
		  width:100vw;
		 /* min-width: 740px; */
		  }
.footerDiv{
padding: 22px;
background: none repeat scroll 0% 0% #111;
margin-left: auto;

margin-right: auto;
border-top:3px solid #3B3A1F;
}		  
 p{
	font-family:arial;
	font-size:16px;
	color:#47461F;
	width:90%;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.0;
	font-weight:bold;
	}	
.footerP{
	font-family:arial;
	font-size:16px;
	color:#47461F;
	width:80%;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.0;
	}
p.noshad{
	font-family:arial;
	font-size:16px;
	color:#F3D299;
	max-width:280px;
	margin-left: auto;
	margin-right: auto;	
	}
h1{
	font-family:arial black;
	font-size:22px;
	color:black;
	text-align:center;
	}
h2{
	font-family:arial;
	font-size:20px;
	width:50%;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	color:beige;
	padding:8px;
	background: linear-gradient(90deg, #988D6C, #77665D, #988D6C) repeat scroll 0% 0% transparent;
	}
h3{
	font-family:arial;
	font-size:22px;
	color:white;
	max-width:280px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 1px 1px 6px #333;
	}		
.col2mid{	
	height: 100%;
	/*min-width:460px; */
	}
#leftie{
	left: 180px;
	background:teal;
	padding:0px;
	height: 100%;
	background:url('oldWood.gif') repeat-y;
	background-size:100% 100%;
	border-right: 10px solid #443;
	/*min-width: 740px; */
	
	}
#playtune{
	background:linear-gradient(#AA9D7B, #A6B8C9, #C0AB8B) repeat scroll 0% 0% transparent;
	max-width: 380px;
	margin-left:auto;
	margin-right:auto;
	 box-shadow:  0px 4px 18px rgba(0,0,0,0.9) ; 
	 outline: 5px solid #666;
	}
a.tipper{
    font-family:arial;
	font-size:14px;
	color:#47461F;
	max-width:280px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.0;
     }	
a.tipper:hover{
    color:white;
     }	
a.linker{
	font-family:arial black;
	font-size:18px;
	color:burlywood;
	text-decoration:none;	
	}
a.linker:hover{
	color:white;
	}
em.pEm{
	font-family:arial ;
	font-size:18px;
	color:black;
	text-decoration:none;
}
.logo{
		background: linear-gradient(-10deg, #AE754B, #F2DFB4, #637E8D) repeat scroll 0% 0% transparent;
		padding:8px;
		opacity: 0.7;
			 outline: 5px solid #666;
		box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.9);
		width:45%;
		min-width:240px;
}	
.imgIn{
		border: 6px solid #555;
		box-shadow:  0px 4px 8px rgba(0,0,0,0.9) ;
		}
#namer{
		width:50%;
		height:24px;
		background:blue;
		}
#thisDiv{
		background:peru;
		height:64px;
		}
#thatDiv{
		background:maroon url('play.png');
		background-repeat:no-repeat;
		text-align:center;
		width:25%;
		height:64px;
		}
 #ss{ 
		 opacity:0; 
		 -webkit-transition:opacity 1.0s linear 0s; 
		 transition:opacity 1.0s linear 0s; 
		 width:200px;
		 height:200px;
		 margin-top:18px;
		 margin-left:auto;
		 margin-right:auto;
		 box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.4);
		 border: 5px solid #444;
		}
p.tipnote{
		font-family:arial;
		font-size:11px;
		color:silver;
		max-width:280px;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.0;	
		}
.tipImg{
		 box-shadow:  0px 4px 6px rgba(0,0,0,0.8);
		  border: 3px solid #333;
		   }
 .tooltip{
   			display: inline;
    		position: relative;
		    }
.tooltip:hover:after{
    		background: #444;
    		background: rgba(0,0,0,.8);
    		border-radius: 5px;
    		bottom: 26px;
    		color:pink;
    		content: attr(title);
    		left: 20%;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 400;
    		width: 220px;
			font-family:arial;
        	font-size:16px;
		}
.tooltip:hover:before{
    		border: solid;
    		border-color: #333 transparent;
    		border-width: 6px 6px 0 6px;
    		bottom: 20px;
    		content: "";
    		left: 50%;
    		position: absolute;
    		z-index: 400;
	    	}
.tooltip2{
		  text-decoration:none;
		  position:relative;
		  color:white;
          }
.tooltip2 span{
		  display:none;
		  -moz-border-radius:6px;
		  -webkit-border-radius:6px;
		  border-radius:6px;
		  color:black;
		  background:#555; 
		  text-decoration:none;
		  box-shadow:  0px 4px 6px rgba(0,0,0,0.8);
		   }
.tooltip2 span img{
		  float:left;
		  margin:8px;
		  }
.tooltip2:hover span{
		  display:block;
		  position:absolute;
		  top:0;
		  left:0;
		  z-index:1000;
		  width:auto;
		  max-width:320px;
		  min-height:128px;
		  border:1px solid black;
		  margin-top:32px;
		  margin-left:0;
		  overflow:hidden;
		  padding:8px;
			text-decoration:none;
		  }		
title{
			color:hotpink;
			}	
button{
		font-family:arial;
		font-size:20px;
		font-weight:bold;
		color:white;
		background: linear-gradient(#A89E82, #9AB4D5, #A49377) repeat scroll 0% 0% transparent;
		 border: 3px solid #444;
		 padding:4px 8px 4px 8px;
		 box-shadow:  0px 4px 6px rgba(0,0,0,0.8);
		 text-shadow: 1px 1px 6px #333;
		 }
 button:hover{
		   background: linear-gradient(#A89E82, #C8DEFB, #A49377) repeat scroll 0% 0% transparent;
		 }
		 
		 
		 .color-list {
  display: flex;
  /* 
    On small displays we want each .color stacked.
    Flexbox let's us determine stacking direction via
    flex-direction: column;
  */
  flex-direction: column;
  height: 100vh;
}

.color {
  /*
    Each .color is also a flex item. We do this so that we have reasonable
    distribution of space between elements. We use flex-direction so that
    flexbox knows which way to position each element (in this case, vertical).
  */
  display: flex;
  flex-direction: column;
  
  /*
    .color can grow but not shrink (we want space for first three elements).
    10em is enough space to see name, hsl, and hex values. 
    Try shrinking vertically on a small display.
  */
  flex: 1 0 10em;  
  box-shadow: 0 0 30px #424242;
  
  /* Handles any clipping/overflow issues on transition */
  overflow: hidden;
  padding: 1em;
  color: white;
  transition: flex-basis 500ms ease-in-out;
}

.color:hover {
  /*
    Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
  flex-basis: 20em;
}

.color:hover .details {
  opacity: 1;
}

.name {
  font-size: 1.2em;
  font-weight: 600;
}

.details {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.details li {
  font-size: 1em;
  line-height: 2em;
}

@media (min-width: 100vw) {
  .color-list {
    /*
      Change the direction so that each .color
      aligns horizontally
    */
    flex-direction: row;
  }
  
  .color {
    /*
      No scrollbars on mobile
    */
    flex-shrink: 1;
  }
}