<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<script type="text/javascript" src="media/swfobject.js"></script>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my collection </title>
<!-- 
    1 ) Reference to the file containing the javascript. 
    This file must be located on your server. 
-->
<script type="text/javascript" src="photo_album/highslide/highslide.js"></script>
<!-- 
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">    
    hs.graphicsDir = 'photo_album/highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>
<!-- 
    3) These CSS-styles are necessary for the script to work. You may also put
    them in an external CSS-file. See the webpage for documentation.
-->
<style type="text/css">
* {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
}

.highslide {
	cursor: url(photo_album/highslide/graphics/zoomin.cur) , pointer;
	outline: none;
}

.highslide-active-anchor img {
	visibility: hidden;
}

.highslide img {
	border: 2px solid gray;
}

.highslide:hover img {
	border: 2px solid white;
}

.highslide-wrapper {
	background: white;
}

.highslide-image {
	border: 2px solid white;
}

.highslide-image-blur {
}

.highslide-caption {
	display: none;
	border: 2px solid white;
	border-top: none;
	font-family: Verdana, Helvetica;
	font-size: 10pt;
	padding: 5px;
	background-color: white;
}

.highslide-loading {
	display: block;
	color: black;
	font-size: 8pt;
	font-family: sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding: 2px;
	border: 1px solid black;
	background-color: white;
	padding-left: 22px;
	background-image: url(photo_album/highslide/graphics/loader.white.gif);
	background-repeat: no-repeat;
	background-position: 3px 1px;
}

a.highslide-credits, a.highslide-credits i {
	padding: 2px;
	color: silver;
	text-decoration: none;
	font-size: 10px;
}

a.highslide-credits:hover, a.highslide-credits:hover i {
	color: white;
	background-color: gray;
}

a.highslide-full-expand {
	background: url(photo_album/highslide/graphics/fullexpand.gif) no-repeat;
	display: block;
	margin: 0 10px 10px 0;
	width: 34px;
	height: 34px;
}

/* These must always be last */
.highslide-display-block {
	display: block;
}

.highslide-display-none {
	display: none;
}

.container {
	padding:20px;
	width:971px;
	margin-top:0px;
	margin-bottom:0px;
	border:none;
	text-align:center;
	margin:0 auto;
}


body {
	background-image:url(images/pagebck.jpg);
	background-position:center;
	background-repeat:repeat-y;
	background-color:#DDD;
	padding:0;
	margin:0;
}
.band{
   background-color:#000000;
   height:40px;
   letter-spacing:1.5em;
   width:100%;
   padding-top:1px;
 }
.band h1{}
.color1{color:#33CC00;}
.color2{color:#DF544D;}
.color3{color:#00FFFF;}
.color4{color:#c3a893;}
.color5{color:#e1a0c0;}
.color6{color:#99FF99}
.color7{color:#cc3f35;}
.color8{color:#89855c;}
.color9{color:#FFFF66;}
 
   </style>
</head>
<body >
<div   class="container">
 
    <div class="band"><h1>
    <span class="color1">M</span>
    <span class="color2">y </span>
    <span class="color3">C</span>
    <span class="color4">o</span>
    <span class="color5">l</span>
    <span class="color6">l</span>
    <span class="color7">e</span>
    <span class="color8">c</span>
    <span class="color9">t</span>
    <span class="color1">i</span>
    <span class="color2">o</span>
    <span class="color3">n</span>
    </h1>
    </div>

</div>
<div class="container">
  <h2>Photo Album</h2>
  <div>
    <!-- 
    4) This is how you mark up the thumbnail image with an anchor tag around it.
    The anchor's href attribute defines the URL of the full-size image.
-->
    <a id="thumb2" href="photo_album/images/nm1.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="photo_album/images/nm1_thb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="75" width="100" /></a>
    <div class="highslide-caption"> Bandalier Park - click image to close </div>
    <a id="thumb3" href="photo_album/images/nm2.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="photo_album/images/nm2_thb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="75" width="100" /></a>
    <div class="highslide-caption"> Bandalier Park - click image to close </div>
    <a id="thumb1" href="photo_album/images/nm3.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="photo_album/images/nm3_thb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="75" width="100" /></a>
    <div class="highslide-caption"> Bandalier Park - click image to close </div>
    <a id="thumb4" href="photo_album/images/nm4.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="photo_album/images/nm4_thb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="75" width="100" /></a>
    <div class="highslide-caption"> Bandalier Park - click image to close </div>
  </div>




 <h2>Knut</h2>
<div id="container2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to watch this movie.</div>


     <script type="text/javascript">
		var s1 = new SWFObject("../media/mediaplayer.swf","jstest","300","230","8");
		s1.addParam('allowscriptaccess','always');
		s1.addParam("allowfullscreen","true");
		s1.addVariable("width","302");
		s1.addVariable("height","230");
		s1.addVariable("file","../video/knut2_Custom_001.flv");
		s1.addVariable('javascriptid','jstest');
        s1.addVariable('enablejs','true');
		s1.addVariable("showicons","true");
		s1.addVariable("showstop","true");
		s1.addVariable('image','../images/knut_startup.jpg');
	    s1.addVariable('backcolor','0xEEEEEE');
		s1.write("container2");
    </script>
    
    
   <h2>odif, furmat, and me</h2>
<img class="photo" alt="pciture of furmat odif and me"  src="images/furmat-odif-me.jpg"/> 
    <br />
    <br />
    <br />
    <img src="images/eli.jpg" alt="" width="200" height="295" /><br />
    <br />
    <img src="images/spider.jpg" alt="spider " width="500" height="709" /><br />
    <br />
    <br />
    <img src="images/knut.jpg" alt="knut" width="500" height="455" />
<br /><br />
<img src="images/eli-2.jpg" alt="" width="400" height="620" />
</div>
</body>
</html>

