/* Global  */ 

body {
    margin:0 0 200px;
    padding:0; 
    font-size:18px;   
    background:url(../img/bkgds/canvas.jpg)repeat;
    overflow-y:scroll;  
    overflow-x: hidden;           
}        
a {
    color:green;
    text-decoration: none;
}            
a:hover {                
    color:#000; 
}            
a:visited {
    color:#999; 
} 
b {
    color:#000;
}
h3 {  
    width:60%; 
   
    padding-left:2em;                
    overflow:hidden;
    color:#999;                
    font-size:1.6rem;
    font-family:monospace,serif;
    border-bottom:1px dashed #777; 
}

/* Home Page Image */

#hpImage {           
    position: absolute;
    width:10%;
    top:62%;
    left:6%; 
    overflow:hidden;
    border:1px solid #000; 
}
#artRhyme {
	margin:6% 2%;
	font-family:verdana, Garamond, 12-point Times New Roman, Goudy, Baskerville, serif;
	font-size:1.2rem;
	line-height:1.8rem;
	color:#333;
	text-transform:lowercase;
} 



/*  Image Hovers  */

.imgLegend {               
    position: relative;
    display: inline;
    width:200% !important;
}
.imgLegend .imgDetails {
    position: absolute;
    top:0;
    left:0;  
    margin-left: 0;
    margin-top:0;
    padding:0.8em 1.5em;
    border-radius: 6px;
    z-index: 1;
    visibility: hidden;  
    background-color: rgba(34, 34, 34, 0.56);
    font-size:14px!important;
    font-family:arial narrow,verdana,arial,serif,sans-serif;
    color: #fff;
    text-align: left!important;
    opacity: 0;
    transition: opacity 0.3s;     
}  
.imgDetails {    
    width:300% !important;     
}  
.imgDetails b {                
    color:#cfe050;
}
.imgDetails span {
    word-break:break-all;
    font-size:10px!important;
}
.imgLegend:hover .imgDetails {
    visibility: visible;
    opacity: 1;    
}

 /*  Stamp and Logo  */   

#stamp {
    position: absolute; 
    top:150px;
	left:1%;
    margin:0;
    padding:0 0.2em;          
    font-size:0.9vmax;       
    font-family:monospace,Times New Roman;
    color:rgba(59, 39, 58, 0.38);
    font-weight:normal; 
}
h2 {    
    font-size:2em;
    font-weight: normal;
    letter-spacing: 0.02em;     
    color:#555;
    text-shadow: 2.5px 2px 2px #d0d0d0;     
    font-family:arial,serif;
    z-index: 3;                
}
h2 b {            
    color:#000;
}
details, summary  {          
    outline:0;       
    padding:0;   
}
summary {              
    font-size:1.5em;
    }
details {
    font-size: 1em!important;
    } 

/* Section Classical-Consumer Art  */


#consumerArt {         
    width:50%;
    margin:0 auto 0;
    text-align:left;
}            
#consumerArt h2 { 
    margin-bottom:10%;    
    text-align: left;
    color:#444;
    font-weight:bold;
    text-shadow: 2.5px 2px 2px #d0d0d0; 
} 
#consumerArt p  > span {
    font-size:180%;
    font-weight:bold; 
    color:#555;  
}   
#consumerArt p {
    font-size:1.2em;    
    text-align:justify;
}
#consumerArt p:first-child {
    margin-top:8%;    
}
section {
    margin:2em 2em 0;
    color:#000;    
    text-align:justify;
}
section h5 {
    font-weight:normal;
    color:#333;
    font-size:1.2em;
    margin-top:0;
    
}
#cola {    
    margin:11% auto;
    padding:2em 1em;
    font-size:16px;
    text-align:left;
}

details {
        
    width:50%;
    margin:4% 25%;
    display:block;
    text-align:center; 
}
		     
#imgWarhol {    
    margin:2em auto;
    padding:2em 3em;   
    box-shadow: 4px 6px 2px 2px  rgba(172, 153, 153, 0.81);    
}
#imgDetailsWarhol {
    margin-top:-10em;;
    margin-left:-1%;
    width:100%!important;
    min-height: 100%;
    font-size:14px;
    background-color: rgba(34, 34, 34, 0.56);
}
#authorQuote {
    margin-left:40%; 
    font-size:18px;
    font-weight:normal;              
}
.hoverText {
  position: relative;
  display: inline-block;  
}
.hoverText .hoverTextContent {
      position: absolute;
      top:10%;
      left: -80%;      
      width: 320px;
      padding:14px;
      font-size:14px;
      background-color: rgba(34, 34, 34, 0.67);
      color:#fff;
      border-radius: 5px;
      visibility: hidden;
      z-index: 1;
      opacity: 0;      
}   
.hoverText .hoverTextContent::after {
  content: "";
  position: absolute;
  top:100%;
  left:100%;  
}
.hoverText:hover .hoverTextContent {
  visibility: visible;
  opacity: 1;
}   


/* Section Readymade  */

#readymade {
    width:50%; 
    margin:2% 25%;    
    padding: 1em;     
    text-align:center;
    box-sizing: border-box; 
}
#readymadeHeader {
    width:50%;    
    margin-left:20%;                 
    margin-top:0;
    padding-top:20px;    
    color:#000;
}
#readymadeHeader span {
    color:#555;
    font-size:70%;
    font-family:cursive;
    padding-left: 4em;
}
#readymade  p {
margin-top:1em;
    padding:0.5em;   
    text-align:justify;    
}
#readymade img {    
    max-width:130px;
    max-height: 180px;               
    border-radius:5%;
    box-shadow: 2px 6px 4px #999;
    padding:1em 2em;    
}
#readymade .imgDetailsReadymade {      
    margin-top:-106%!important;
    left:-15%;;
    text-align:left!important;
    min-height: 200px;
    max-width:200px;
    min-width:100px!important;    
    padding:1em 2em;
}


    /* Styles for Banner & Aside */

#banner {
    width:100%;
    top:0.5em;
    margin:0;
    text-align: center;
}
#banner img {
    width:50%;
    margin:0 25%;
    max-width:1024px;
}
#imgDetailsBanner {
    position:relative;
    margin-left:25%!important; 
    padding:1.5em !important;
    width:30%!important;
    margin-top:0!important;
    background-color: #222;
} 
aside h4 {
    letter-spacing: 0.04em;
}
#banner-dolphins {
    margin:0 20%;
    padding:0;
    width:60%;
}