@charset "utf-8";
/* CSS Document for my week 13 iframe etc stuff */

body {text-align: center; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 h1 {font-weight: normal; }

#wrapper {width: 470px; margin: 0 auto; border: dotted red 1px; padding: 5px;
 }

#pix1 {float: left; width: 72px; height: 72px; 
margin: 0 3px 3px 5px; padding: 5px;
border: 1px black solid;
 }
 
#pix2 {float: left; width: 72px; height: 72px; 
margin: 0 3px 3px 5px; padding: 5px;
border: 1px black solid;
 }
 
#pix3 {float: left; width: 72px; height: 72px; 
margin: 0 3px 3px 5px; padding: 5px;
border: 1px black solid;
 }
 
#pix4 {float: left; width: 72px; height: 72px; 
margin: 0 3px 3px 5px; padding: 5px;
border: 1px black solid;
 }
 
iframe {height: 320px; width: 320px; float: right; padding: 10px; margin-right: 5px; }

#bigpix {height: 310px; width: 320px; float: right; 
padding: 20px 10px 10px 10px; border: 1px solid black; 
z-index: 1; margin-right: 5px; }
 
footer {clear: both; height: 25px; font-size: 14px; line-height: 200%; text-align:center;}
 
nav {display: block; height: 50px; background: #ccc; padding: 5px;}

/* menu */

#menu, #menu * {margin: 0; padding: 0; list-style:none;}

#menu a {display: block; height: 30px; width: 95px; padding: 10px; 
text-decoration:none; line-height: 30px; background: red; color: white;	}

#menu a:hover { background: #bbb; color: red;}

#menu li {float: left; }

#main {padding: 5px; border: 1px solid black; clear: both;
}

/* add slideshow info here */

#slideshow {position:relative; height: 334px; }

#slideshow img { position: absolute;
 top: 10px; right: 70px; z-index: 8; 
 opacity: 0.0;
 border: 1px solid black;
 padding: 10px;	
}

#slideshow img.active { z-index: 10;
opacity: 1.0;
}

#slideshow img.last-active { z-index: 9; }