body {margin: 0px; padding: 0; background: transparent; color: #000; font-weight: normal; 
	font-family: Times New Roman, serif;  }

body#images {background: #F6F3EA; background: white;  fill: currentcolor; color: pink; }

ul {list-style: none;  margin: 0; padding: 0;  }

ul li {max-width: 100%; margin: 0 auto; padding: 10px;   }

li img {border-top:1px solid black; 
	border-left:1px solid black;  
	border-right:1px solid black;  
	border-bottom:1px solid black;  
		}

li .info {color: gray; text-align: center; 
 }
	

/*
	  
li img {
    float: left;
    border-width: 4px;
    border-color: white;
    border-style: groove;	}
*/
	
.clearer {clear: both; }
	
	
a.foo {padding: 45px 40px; background: yellow;  
		transition: all 6.3s ease; }

a.foo:hover,
a.foo:focus
{padding: 45px 40px; background: red; font-weight: bold;    }

@media screen and (min-width: 700px) {
    body {
        
	    }
ul {list-style: none;  margin: 0; padding: 0; float: left }

li {float: left; font-size: 95%; }

}


@media screen and (max-width: 400px) {
    body {
        
	    }
ul {list-style: none;  margin: 0; padding: 0;  text-align: center; font-size: 85%; }

}


img {max-width: 100%; }

img {box-shadow: 4px 4px 10px rgba(0,0,0,0.5); 

*:hover {
	-webkit-transform: rotate(180deg);
	-moz-transform-transform:  rotate(180deg);
	-o-transform:  rotate(180deg);
	transform: rotate(180deg);
	}

*:hover {border: 3px solid green; }