<!-- .........     . .  . .     ..  .............  .....,?N,.           .   .........
.........       .          ..   ....... .... .. ,88NM+ .           .   .........
 ......... . .. ......    ...........,......:7$7I7$N~.. ...   .......  .........
............ .. ...... .  .......,ODMD ..,DDM$?.,MM:. ......  ... : .  .........
    . ... .       . :,.     .. :ZNMDZ   OM$$=,  $D8 . ..    ,7NNMMM     ........
....  .... . .. ...N77.. ...=DM$MO :?M7. ...   =M.... IMMNZ~   M$7...  .........
    ..... .   . . DM::... ?MMN,88+MN8,..  .  . ?8 ..$MD+ .. . $O~ ..  ... ......
    ..... .  ....NDD ... ON== +MON+:....  .  . $$$$MO:...... +M..... O= ........
.........    . ID.M, .+N, ... . ............  77, . . .. .. N$. :~ND~M .........
    . ...    ::M =N $7D  ..      .   ...     .   ..   .....IM ~MMM=.ZO .........
............ DMI.N=D77................................... .MZDM?,..,M, .........
 ........8..M=:.,M:. .....................................:O. ... .M~.......... 
........+$.ID,................................................... ?O...ZZ,..... 
.      .Z? M:....... ......    . ..   ..    .... .. .... ........ N=.~MNM... .. 
  . ..:+M.D~....................................................ZMDM:.:NN...    
......+8M:N ...................................................ONM+...77$. .... 
..  ..?NM$?. .. ....................................................  M... .... 
  . .?78Z8 ......................................................... O+. 7$ .   
.....8$?8? .    .  .................................................,D NNM8.... 
.....NZ=8, .........................................................7$MIIM,.... 
..  .M$,.. ........................................................=M. ++O .... 
 .I~,M$............................................................  ..DD= =7.  
..$$,M$............................................................... MM.~M=...
  7M+M$...............................................................7$$N... . 
 .$M7M$...............................................................$NN, ~,.  
..$DMN7............:88I......................:,............................:.   
 .7$$M7...........:MMM,.........7$ ........ OM~........... ................. ...
 .I$.DI...........M788....... ~D$+ ......,MM+N............ ::............... .  
  ?$............ D=D~~. ... :ZZ 7,  ....?M:,,8...........~ZM8............... .. 
 .+O.......... :M.M=.....7$ ...:I....:D=....M.........88,, M,............. .    
  =D.. ........M.?M    ?O: ... 8...:=7. ..777.....  +M+ ..+D....... . ..........
 .,D........7OO,78:I??+:.?$$7?7~.+~:,....~$$....:?++=. .,+N,.......ZO.......    
  .M.......IZ,.?M8M: ...MMMMMM::$.......,8 ...~8DII.....Z$?.....+7MM:... ,....  
...N,.....:D...MMZ ... $MMMMMOIM:...... O, ..$MMMMMO....MO..  .D8Z+M.. .., ...  
...~Z... D  .~:: .... =MMMMMMMMMD.... ~M.OMMMMMMMMMM...N.  ~MI. ..M,...ZZ.....  
....D. .N, ...........7MMMMMMMMMM.....M7MMMMMMMMMMMM. O+.:$D,...=+D...NOO.....  
....Z,=$?............ ZMMMMMMMMMM. ..8MMMMMMMMMMMMMN ~8:DOI.... $D=.+MM??.......
.....ODMM............ NMMMMMMMMMM. ~+..IMMMMMMMMMMMNOM?........8$7D?.8N.......  
......?MM, .......... DMMMMMMMMMM,.....OMMMMMMMMMMMN~.  ......:MNN. ,MO... ...  
..... ?DM+ .......... NMMMMMMMMMM......OMMMMMMMMMMMD..........:7:...IM~... ...  
......:+MM:...........NMMMMMMMMMM......8MMMMMMMMMMMO. ....... .... ,M7 .......  
....... MMZ ......... NMMMMMMMMMM......ZMMMMMMMMMMM7...............7M~ .........
........~MM ......... NMMMMMMMMMN......8MMMMMMMMMMM:...............MD..... ...  
........ =MM......... 8MMMMMMMMMM......$MMMMMMMMMMM.............. MD...... .... 
..........ZM$,....... OMMMMMMMMMM......7MMMMMMMMMDD.............IZM~...... ...  
...........MM+~.......ZMMMMMMMMMM......=MMMMMMMMM+?........... +8M$....... .... 
....  ..  ..8MMN......+MMMMMMMMMZ..  ..=MMMMMMMMM$Z...........NM+,..............
....... . . .DMM8, . ..NMMMMMMMMI......~MMMMMMMMM::.. .. ....DM=,...   ....... .
....... .  .   NMD,  . ZMMMMMMMM .... .,MMMMMMMM7.... ......8MI .. .   .........
....... .     . .8MM=~  ,IDMMMI......... 78DMM7 ..... . ~IMM?      .   ....... .
 ...    .       ..ZMMM?.. ...  . .   ...   .,. . ......7MMMZ...         ........
....... .......... ~NNMO... ........ ... ...   .... ,IDM8Z:.. ...  ..  ... .  ..
....... .... .. ... .. :8MMDD$:             ,.:$OMMMN~. ..    ...  ..  ....... .
....... .       .    ... =8MMMMNOZ=~:+=?$ZO8MMMMN??,....           .   ....... .
....... .... .. ...... ....,~+ZO88888888OZZZI?:...... .....   ...  ..  ....... .
 ...                                                                     .......
 ...                                                                     .......
 ...                                                                     ....... -->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>MechSoul Dev</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/pngFix.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png-fix');
</script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			var spotlight = {
				 // the opacity of the "transparent" images - change it if you like
				opacity : 0.2,

				/*the vars bellow are for width and height of the images so we can make 
				the &lt;li&gt; same size */
				imgWidth : $('.spotlightWrapper ul li').find('img').width(), 
				imgHeight : $('.spotlightWrapper ul li').find('img').height() 
				
			};
			
			//set the width and height of the list items same as the images
			$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });
			
			//when mouse over the list item...
			$('.spotlightWrapper ul li').hover(function(){
				
				//...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
				$(this).find('img').addClass('active').css({ 'opacity' : 1});
				
				//get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array 
				$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;
				
				//when mouse leave...
			}, function(){
				
				//... find the image inside of the list item we just left and remove the active class
				$(this).find('img').removeClass('active');
				
			});
			
			//when mouse leaves the unordered list...
			$('.spotlightWrapper ul').bind('mouseleave',function(){
				//find the images and change the opacity to 1 (fully visible)
				$(this).find('img').css('opacity', 1);
			});
			
		});
	</script>
	<style type="text/css" media="screen">
		
		.spotlightWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.spotlightWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
		}
		.spotlightWrapper ul li a img { 
			/*width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
			position:relative; /* so we can use top and left positioning */
			border:none; /* remove the default blue border */
		}
		.spotlightWrapper ul li a img.active {
			border:4px solid white; /* choose whatever you like */
			z-index:1; /* show it on top of the other images (they have z-index 0) */
			left: -4px; /* same as border width but negative */
			top: -4px; /* same as border width but negative */
		}
		.clear { clear:both; } /* to clear the float after the last item */
	</style>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#content {
height:100%;
}
</style>
</head> 
<script type="text/javascript">
 
$(document).ready(function(){
 
	$(document).ready(function () {
		$('#page_effect').fadeIn(2000);
      });
 
});
 
</script>
<body>
<div id="page_effect" style="display:none;">
<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-395px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-5px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-395px'},200);
                    }
                );
            });
        </script>


   <div id="overlay" class="png-fix">
  

<div id="container">
        <ul id="navigation">
            <li class="home"><a href="index.html" title="Home"></a></li>
            <li class="webdev"><a href="webdev.html" title="webdev"></a></li>
            <!--<li class="iphone"><a href="iphone.html" title="iphone"></a></li>
            <li class="consult"><a href="consult.html" title="consult"></a></li>--!>
            <li class="contact"><a href="contact.html" title="contact"></a></li>
           <!-- <li class="login"><a href="login.html" title="login"></a></li>-->
        </ul>
 <div id="content">

<p align="center">
<img src="images/logo.gif" alt="" border="0" /></p>
<br />
<h1 align="left"><font face="Arial Black"><img src="images/about.png" /></font></h1>

<p><b>Its fairly simple, we develop 'stuff'. 'Stuff' for us includes websites and iPhone apps.<br />If you want us to develop some 'stuff' for you, contact us...</b>
 <br />
 <br />
 <img src="images/reprojects.png" /><br /><!-- start spotlightWrapper div -->
	<div class='spotlightWrapper'>
		<!-- start unordered list -->
		<ul>
			<li><a href='http://vickypearl.net/'><img src='images/1.png' width="200px" /></a></li>
			<li><a href='http://frankwhelton.com/'><img src='images/2.png'  width="200px"/></a></li>
			<li><a href='http://nintendowificonnect.com/'><img src='images/3.png'  width="200px"/></a></li>
			<li><a href='#'><img src='images/i1.png'  width="200px"/></a></li>
			<li><a href='#'><img src='images/i2.png'  width="200px"/></a></li>
			<li><a href='contact.html'><img src='images/6.png'  width="200px"/></a></li>
			
	
			<div class='clear'></div></div>
		</ul>
</p>

</p>
<p>
			
</p>
</div><p><font color="white"><b><center>Copyleft MechSoul 2010</center></b>
			</p>
         </div>
         
         </div>
    </div>
</body>
</html>