Pink Spinel Network Theme by Ammetrine

<head>
<link href='https://fonts.googleapis.com/css?family=Raleway: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-->

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

<style type="text/css">

#infobox{
    padding:5px;
    width:250px;
    height:auto;
    left:120px;
    top:200px;
    color:#888;
    background-color:#ffffff;
    border:1px solid #888;
    position:fixed;
    z-index:9999999;
}
#infoboxT {
    margin-top:2px;
    text-align:center;
    padding-bottom:6px;
    border-bottom:solid 1px #D1B0BD;
    font-size:15px;
}
#infoboxST {
    margin-top:5px;
    text-align:left;
    font-size:13px;
    margin-left:20px;
    font-weight:bold;
}
#infoboxA {
    border-bottom:solid 1px #D1B0BD;
    font-size:11px;
    text-align:right;
    margin-right:20px;
    margin-left:20px;
    padding-bottom:5px;
}


#infobox2{
    padding:5px;
    width:250px;
    height:auto;
    left:120px;
    top:420px;
    color:#888;
    background-color:#ffffff;
    border:1px solid #888;
    position:fixed;
    z-index:9999999;
}
#infoboxT {
    margin-top:2px;
    text-align:center;
    padding-bottom:6px;
    border-bottom:solid 1px #D1B0BD;
    font-size:15px;
}
#infobox2ST {
    margin-top:5px;
    text-align:left;
    font-size:13px;
    margin-left:20px;
}
#infobox2A {
    border-bottom:solid 1px #D1B0BD;
    font-size:11px;
    text-align:right;
    margin-right:20px;
    margin-left:20px;
    padding-bottom:5px;
}

#infobox2A2 {
    text-align:center;
    font-size:12px;
    margin-top:5px;
    margin-right:20px;
    margin-left:20px;
    padding-bottom:5px;
}


/* 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:10px solid #ede5f3;
    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: 'Raleway', sans-serif;
font-size: 13px;
color:#888;
background-color:#fff;

}

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


 #credit {
     position:fixed;
     right:10px;
     bottom:5px;
     background:#D1B0BD;
     padding-top:5px;
     padding-right:5px;
     padding-left:5px;
     padding-bottom:2px;
     font-size:12px;
     font-family: 'Raleway', sans-serif;
     z-index:9999;
 } /*do not remove OR ALTER this - you will be reported if caught doing so*/

 #credit a{
     color:#666;
 }

#header {
    position:fixed;
    border-bottom:solid 1px #D1B0BD;
    width:100%;
    height:auto;
    font-family: 'Raleway', sans-serif;
    font-size:13px;
    margin-top:-80px;
    padding-bottom:20px;
    text-align:center;
    background-color:#fff;
    z-index:999999;
}


#title {
    height:20px;
    color:#888888;
    font-family: 'Raleway', sans-serif;
    font-size:23px;
    text-align:center;
    letter-spacing:1px;
    padding:5px 10px;
}

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


#members {
    margin-top:105;
    margin-left:410px;
}


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

#hoverpannel {
    padding-top:10px;
    margin-bottom:20px;
    position:absolute;
    width:180px;
    height:10px;
    font-family: 'Raleway', sans-serif;
    opacity:0;
    background:white;
}

#memberspot:hover #hoverpannel {
    opacity:1;
    margin-top:0px;
    height:170px;
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
}

#member {
    font-size:15px;
    color:#D1B0BD;
    font-family: 'Raleway', sans-serif;
    letter-spacing:1px;
    text-align:center;
    margin-top:-40px;
}

#memberinfo {
     font-family: 'Raleway', sans-serif;
     font-size:11px;
     color:#888;
     margin-top:55px;
     text-align:center;
     text-transform:lowercase;
}

#imagespot {
    width:170px;
    height:170px;
    margin-top:-1px;
    margin-left:-1px;
    position: relative;
    background-color:#fff;
}

#imagespot img {
    width:170px;
    height:170px;
    padding:6px;
}

</style>

<div id="credit"><a href="http://ammetrine.tumblr.com/">AT</a></div> <!-- do not remove OR ALTER this - you will be reported if caught doing so -->

</div>
<div id="header">
<div id="title">Title</div>
<div id="desc">Put a short Description here</div>
</div>

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


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

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>


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


<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>


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


<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

<td>
<div id="memberspot">
<div id="imagespot">
<div id="hoverpannel">
<div id="memberinfo"><p>put your description here</div>
<div id="member"><a href="url">link</a></div>
</div>
<img src="http://40.media.tumblr.com/2ebc0f87ed961008da800a0a0d358bf5/tumblr_nrzr9pysKS1s6beoyo1_500.jpg"/><!--delete this url and replace with the IMAGE ADRESS of the image you want -->
</div></div></td>

                         <!-- end table -->
</table>

<div id="infobox">
<div id="infoboxT">Information</div>
<div id="infoboxST">Subtitle:</div>
<div id="infoboxA">Info</div>

<div id="infoboxST">Subtitle:</div>
<div id="infoboxA">Info</div>

<div id="infoboxST">Subtitle:</div>
<div id="infoboxA">Info</div>

<div id="infoboxST">Subtitle:</div>
<div id="infoboxA">Info</div>
</div>

<div id="infobox2">
<div id="infoboxT">Apply</div>
<div id="infoboxST">Applications:</div>
<div id="infoboxA">Open/Closed</div>
<div id="infobox2A2">Write some info about the network here</div>

</div>

</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>