Chrysocolla Faves/Network Page by Ammetrine

<head>
<link href='https://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<!-- start popup coding p1-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<!-- end popup coding p1-->

<style>
a:hover {
letter-spacing:2px;
}
</style>

<link rel="shortcut icon" href="{favicon}">
<link rel="alternate" type="application/rss+xml" href="{rss}">

<style type="text/css">
/* start popup coding p2*/
#fade {
    display:none;
    background:#000;
    position:fixed;
    left:0; top:0;
    width:100%;
    height:100%;
    opacity:.80;
    z-index:9999; }
.popup_block {
    display:none;
    background:#fff;
    padding:10px;
    border:5px solid #B4CCB1;
    float:left;
    font-size:10;
    position:fixed;
    top:50%; left:50%;
    z-index:99999;
}
img.btn_close {
    float:right;
    margin:3px 3px 0px 0px; }
*html #fade { position:absolute; }
*html .popup_block { position:absolute; }
/* end popup coding p2*/

body
{
font-family: 'Lato', sans-serif;
font-size: 13px;
color: #888;
background-color:#fff;

}

a:link, a:active, a:visited
{
color: #B4CCB1;
text-decoration: none;
}


 #credit {
     position:fixed;
     right:20px;
     bottom:5px;
     background:#B4CCB1;
     padding-top:5px;
     padding-right:5px;
     padding-left:5px;
     padding-bottom:2px;
     font-size:12px;
     font-family: 'Handlee', cursive;
     z-index:9999;
 }
 #credit a{
     color:#666;
 }


#all {
    margin-left:235px;
    margin-top:-760px;
}


#pannel {
    width:190px;
    height:190px;
    padding:3px;
    border:1px solid #888;
    background-color:#fff;
}

#poster {
    width:160px;
    height:160px;
    margin-top:10px;
    margin-left:10px;
    position: relative;
    background-color:#fff;
}

#poster img {
    width:160px;
    height:160px;
    padding:6px;
}


#about {
    text-align:left;
    padding:10px;
    padding-top:3px;
    margin-bottom:20px;
    position:absolute;
    width:150px;
    height:10px;
    opacity:0;
    font-size:9px;
    background:white;
    color:#888;
}

#pannel:hover #about {
    opacity:1; /*decrease number to make faded -- eg. 0.6*/
    margin-top:0px;
    height:160px;
    -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out; /*increase numbers to slow down the panel appearing - eg. 0.5s*/
}

#description {
     margin-top:-140px;
     font-size:10px;
     text-align:center;
     text-transform:lowercase;
}

#url {
      margin-top:140px;
      font-size:15px;
      text-align:center;
      border:solid 1px #888;
      padding:7px;
}

#url a {
    color:#B4CCB1;

}

#url a:hover {
    color:#888;
}

#header {
    border:solid 1px #888;
    width:450px;
    height:auto;
    font-size:11px;
    line-height:18px;
    padding:2px;
    margin-top:680px;
    margin-left:455px;
    text-align:center;
    background-color:#fff;
}

#title {
    height:20px;
    color:#888888;
    font-size:18px;
    text-align:center;
    letter-spacing:1px;
    padding:5px 10px;
}

#desc {
    font-size:12px;
    padding-bottom:5px;
}

#navlinks {
    font-size:13px;
    padding-bottom:5px;
}

#navlinks a {
    color:#B4CCB1;
}

#navlinks a:hover {
    color:#888;
}

</style>

<div id="credit"><a href="http://ammetrine.tumblr.com/">AT</a></div>

<div id="header">
<div id="title">Title</div>
<div id="desc">
Put short description here
</div>
<div id="navlinks">
<a href="url">Creator</a>
<a href="#?w=400" rel="02" class="poplight">Information</a>
<a href="http://ammetrine.tumblr.com">Credit</a>
</div>
</div>

<table id="all" border="0" cellpadding="0" cellspacing="20">


              <!-- start table (aka member spots) -->

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>


<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>


<tr> <!-- end row -->


<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<tr> <!-- end row -->

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>

<td><div id="pannel">
<div id="poster">
<div id="about">
<div id="url">
<a href="url">link title</a>
</div>
<div id="description"><p>
put your description here
</div>
</div>
<img width="120px" src="http://40.media.tumblr.com/a16b1b40f320b3bebd0afcda08b7d0a4/tumblr_n9bw9ycWnG1qi1c6wo1_500.jpg"/><!--delete this url and replace with the url of the image you want -->
</div>
</div></td>
                         <!-- end table -->


</table>
</body>

<div id="02" class="popup_block">
<!-- start popup coding p3 -->
<center>
INFO GOES HERE
</center></div></div></div></div></div></div></div></div></div></div></div>
<!-- end popup coding p3 -->

</html>