Theme Code w/ Popup for desirabledean

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Theme 10; live long and prosper by ~winchestheart.
// http://winchestheart.tumblr.com © //

This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
> http://creativecommons.org/licenses/by-nc/3.0/

Read the rules before using any of my themes:
> http://winchestheart.tumblr.com/rules

Do not remove the credit or use as your own work.
Thank you.

-->


<html><head>

<script type="text/javascript">function tb8_makeArray(n){this.length = n;return this.length;}tb8_messages = new
tb8_makeArray(3);tb8_messages[0] = "listen to me,";
tb8_messages[1] = "you are beautiful";
tb8_messages[2] = "and i love you.";
tb8_rptType = 'infinite';tb8_rptNbr = 5;tb8_speed = 100;tb8_delay = 2000;var tb8_counter=1;var tb8_currMsg=0;var tb8_tekst ="";var tb8_i=0;var tb8_TID = null;function tb8_pisi(){tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);document.title = tb8_tekst;tb8_sp=tb8_speed;tb8_i++;if (tb8_i==tb8_messages[tb8_currMsg].length){tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;}if (tb8_currMsg == tb8_messages.length){if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){clearTimeout(tb8_TID);return;}tb8_counter++;tb8_currMsg = 0;}tb8_TID = setTimeout("tb8_pisi()", tb8_sp);}tb8_pisi()</script>


<!--BEGIN POPUP JAVASCRIPT CODE-->

    <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"><img src="http://media.tumblr.com/b28c104906c576285505ca134600853a/tumblr_inline_mfp5cwdybL1qh7cpd.gif" class="btn_close" title="Close" alt="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 JAVASCRIPT CODE-->


<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<meta name="image:Sidebar" content="" />

<meta name="color:Links" content="#c6c6c6" />
<meta name="color:Main Color" content="#bdcbcc" />
<meta name="color:Text" content="#a7a7a7" />
<meta name="color:Background" content="#ffffff" />
<meta name="color:Post" content="#ffffff" />
<meta name="color:Border" content="#f1f1f1" />
<meta name="color:Navi Background" content="#f9f9f9" />

<meta name="text:Link 01" content="home" />
<meta name="text:Link 02" content="ask" />
<meta name="text:Link 03" content="link" />
<meta name="text:Link 04" content="link" />
<meta name="text:Link 01 URL" content="/" />
<meta name="text:Link 02 URL" content="/ask" />
<meta name="text:Link 03 URL" content="/" />
<meta name="text:Link 04 URL" content="/" />

<meta name="if:Lazy Load" content="" />
<meta name="if:Custom Scrollbar" content="">

<style>@font-face { font-family: Quicksand; src: url('http://static.tumblr.com/sdulnxj/Hhsmrwo3y/quicksand-bold.otf'); }</style>

<style>@font-face{ font-family:Just Realize; src: url(http://static.tumblr.com/sghs9ih/2tFlu5il8/justrealize.ttf); }</style>


<!-- lazy load by Mika Tuupola | http://www.appelsiini.net -------------->

{block:IfLazyLoad}
<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
$j("img").lazyload({
placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
effect: "fadeIn",
});
});
</script>
{/block:IfLazyLoad}


<style type="text/css">

/*BEGIN POPUP CSS CODE*/

   #fade { /*--Transparent background layer--*/
            display: none; /*--hidden by default--*/
            background: #000;
            position: fixed; left: 0; top: 0;
            width: 100%; height: 100%;
            opacity: .80;
            z-index: 9999;
    }
    .popup_block{

            display: none; /*--hidden by default--*/
            background: #fff;
            height:auto;

            padding: 5px;
            border: 3px solid #ddd;
            text-align:center;
            float: left;
            font-size: 12px;
            position: fixed;
            top: 55%; left: 55%;
            z-index: 99999;
            /*--CSS3 Box Shadows--*/
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            /*--CSS3 Rounded Corners--*/
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
    }
    img.btn_close {
            float: right;
            margin: -2px -2px 0 0;
    }
    /*--Making IE6 Understand Fixed Positioning--*/
    *html #fade {
            position: absolute;
    }
    *html .popup_block {
            position: absolute;
    }

/*END POPUP CSS CODE*/

#bite
#bite a{
display:block
}
#bite .death {
margin-top:0px;filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#bite:hover .death {
margin-top:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:100;
}

#actualnews {
font-family:calibri;
font-size:10px;
color: #000000;
width:140px;
height:auto;
padding-top:3px;
border:0px dashed #b8b8b8;
margin-left:0px;
margin-top:80px;
text-align:center;
position:fixed;
line-height:110%;
}

#thekey img{
width:150px;
margin-top:-10px;
margin-left:-10px;
position:fixed;
}

{block:IfCustomScrollbar}
::-webkit-scrollbar {width:5px;height:5px;background:{color:sidebar background};}
::-webkit-scrollbar-thumb:vertical {height:5px;background:{color:main color};}
::-webkit-scrollbar-thumb:horizontal {height:5px;background:{color:main color};}
{/block:IfCustomScrollbar}

iframe#tumblr_controls {top:0px!important;right:3px!important;position: fixed!important;}

body {font-family:calibri;font-size:10px;background-color:{color:background};color:{color:text};line-height:11px;letter-spacing:0px;}

a {text-decoration:none;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;-ms-transition: all .3s linear;-o-transition: all .3s linear;transition: all .3s linear;color:{color:links};}
a:hover {color:{color:main color};}

strong, bold, b {font-weight:normal;color:{color:links};}

small {font-size:10px;}
sub {font-size:10px;}
code {font-size:10px;font-family:calibri;}
pre {word-wrap:break-word;font-size:10px;font-family:calibri;}

blockquote {padding-left:8px;margin-left:10px;border-left:3px solid {color:border};}

blockquote img {max-width:300px;}

h1 {font-size:10px;font-weight:normal;}

.label {font-weight:bold;color:{color:main color};}
.chat {line-height:12px;margin:8px;}

#credit {position:fixed;bottom:5px;right:5px;text-transform:uppercase;font-size:8px;font-weight:bold;font-family:calibri;padding:3px;border:1px solid {color:border};}


/* SIDEBAR */

#sidebar {position:fixed;width:180px;margin-left:180px;margin-top:200px;}

.navigation {text-align:center;margin:8px 0px;line-height:15px;background-color:{color:Navi Background};padding:2px;letter-spacing:1px;font-size:9px;font-family:cambria;}
.navigation a {padding:2px 3px;margin:0px 1px;color:{color:text};}
.navigation a:hover {text-decoration:underline;}

.description {margin-top:5px;text-align:center;padding:0px 10px;}

.pagination {text-align:center;margin-top:5px;color:{color:links};}

/* POST */


#post {width:500px;margin-left:450px;padding:1px;padding-bottom:8px;text-align:justify;background-color:{color:background};}

.line {width:500px;margin-left:450px;margin-top:6px;height:1px;background-color:{color:border};}

.permalink {margin-left:448px;margin-top:-7px;text-transform:uppercase;font-size:7px;text-align:left;letter-spacing:1px;font-family:trebuchet ms;}

.tags {font-style:italic;width:500px;margin-left:452px;margin-top:5px;color:{color:links};}
.tags a:hover {text-decoration:underline;color:{color:links};}


/* QUOTE */

.quote {font-size:12px;font-family:cambria;line-height:15px;}
.source {font-size:8px;text-transform:uppercase;font-family:calibri;font-weight:bold;padding-top:10px;text-align:center;margin-bottom:10px;}


/* QUESTION */

.question {padding:10px;text-align:justify;font-style:italic;background-color:{color:border};}
.asker {font-size:8px;font-weight:bold;text-transform:uppercase;text-align:right;margin-right:10px;margin-top:-2px;font-family:calibri;}


/* NOTES */

.notes {margin-left:210px;margin-top:30px;width:480px;}
.notes a:hover {background-color:transparent;color:{color:links};}
ol.notes {list-style-type:none;}
ol.notes li.note {padding-bottom:7px;margin-bottom:12px;border-bottom:1px solid {color:border};}
ol.notes li.note img.avatar {vertical-align:-8px;}
ol.notes li.note img {padding:2px;border:1px solid {color:border};}
ol.notes li.note blockquote {padding-left:5px;margin-left:30px;}

</style>
</head>

<body>

<script type="text/javascript" src="http://i0.poll.fm/survey.js" charset="UTF-8"></script>
<script type="text/javascript" charset="utf-8">
  polldaddy.add( {
    type: 'slider',
    embed: 'poll',
    delay: 100,
    visit: 'single',
    id: 7668490
  } );
</script>
<noscript><a href="http://polldaddy.com/poll/7668490/">when i hit 1k, what should i do to celebrate?</a></noscript>




<div id="bite">
<div id="thekey"><img src="http://media.tumblr.com/b7a07158acbf9801d6eaf52eab0d434a/tumblr_inline_mnmlirdA361rikao3.jpg"></div>
<div class="death">
<div id="actualnews">

<div style="color:#fff; background-color:#C887E4; padding:3px;"><font face="quicksand">ABOUT</font></font></div><br>
<font face="just realize" font size="4.7">multi-fandom</font>
<p>
<font color="6cb9c6">my current time: </font color><p>
<iframe src="http://free.timeanddate.com/clock/i3yb2nhn/n70/fs9/fcc887e4" frameborder="0" width="63" height="15"></iframe>
<p>
QUEUE RUNS 1AM - 8PM <p>
+ previously: claraclause<br>
+ tracking: desirabledean <p>

<script language="JavaScript">
var ref = (''+document.referrer+'');
var w_h = window.screen.width + " x " + window.screen.height;
document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID3737255&&r=' + ref + '&wh=' + w_h + '"><\/script>');
</script>
|
<script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=ID2360679&name=fallen claras"></script>

<div style="color:#fff; background-color:#C887E4; padding:3px;"><font face="quicksand">UPDATES</font></font></div><br>
<b>→Reading:</b> allegiant
<p>
<b>→Watching:</b> supernatural (S6), ahs (S3)
<p>
<b>→Waiting On:</b> doctor who (s8)

<div style="color:#fff; background-color:#C887E4; padding:3px;"><font face="quicksand">NETWORKS</font></div>
<a href="http://whouffle.co.vu/whoufflenetwork" title="whouffle network">✰</a>
<a href="http://odairlucifer.tumblr.com/kazzacrew" title="the kazza crew">✰</a>
<a href="http://thecamelotnetwork.tumblr.com/" title="the merlin network">✰</a>
<a href="http://charliebradburie.co.vu/ninesnetwork" title="nine's network">✰</a>
<a href="http://perfectlyjennanetwork.tumblr.com/" title="the perfectly jenna network">✰</a>
<a href="http://shadowclara.tumblr.com/" title="the shadow clara network">✰</a>
<a href="http://amyjpond.co.vu/twentyone" title="the twentyone network">✰</a>
<a href="/hellonwheelsnetwork" title="the hell on wheels network">✰</a>
<a href="http://claraspumpkin.tumblr.com/theyowzahnetwork" title="the yowzah network">✰</a>
<a href="http://thetimesoldier.tumblr.com/doctorwhynetwork" title="the doctor why network">✰</a>
<p>
<div style="color:#fff; background-color:#C887E4; padding:3px;"><font face="quicksand">FRIENDS</font></div>
<a href="http://bowtiesgoodbye.tumblr.com/"title="Ginny, the genius">♡</a>
<a href="http://ellyblatz.tumblr.com/"title="Elyse, my Doctor Who Bitch">♡</a>
<a href="http://queen-jlaw-forever.tumblr.com/"title="Jadea, my best friend since 3rd grade">♡</a>
<a href="http://whouffle.co.vu/"title="Ariel, whouffle jesus">♡</a>
<a href="http://onthehuntforshadows.tumblr.com/"title="Charlotte, my beauty">♡</a>
<a href="http://oswinbosswin.tumblr.com/"title="Ivana, my friend who i can count on">♡</a>
<a href="http://novaknoel.tumblr.com/"title="Elizabeth, my inspiration">♡</a>
<a href="http://dontflymetotrenzalore.tumblr.com/"title="Olivia, the coolest">♡</a>
<p>
<div style="color:#fff; background-color:#C887E4; padding:3px;"><font face="quicksand">GOODBYE, RAGGEDY MAN</font></div>
<img height="55" src="http://fc08.deviantart.net/fs70/f/2011/302/3/2/doctor_who_chibi__s_by_silly_peach-d4ebi0f.png" width="115"/>





</div>
</div></div>









<div id="credit"><a href="http://winchestheart.tumblr.com" target="_blank" title="theme by winchestheart">THEME</a></div>

<!-- sidebar -->

<div id="sidebar">

<center><img src="{image:Sidebar}" width="180"></center>

<div class="navigation">
<a href="{text:Link 01 URL}">{text:Link 01}</a> <a href="{text:Link 02 URL}">{text:Link 02}</a> <a href="{text:Link 03 URL}">{text:Link 03}</a> <a href=#?w=400" rel="popup" class="poplight">{text:Link 04}</a></div>

<div class="description">{Description}</div>

<div class="pagination">{block:PreviousPage}<a href="{PreviousPage}"><i>prev</i></a> {/block:PreviousPage}{block:NextPage} — <a href="{NextPage}"><i>next</i></a>{/block:NextPage}</div>

</div> <!-- sidebar -->

<!-- posts -->

{block:Posts}

<br><br><br>

<div id="post">

{block:Text}{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}{Body}{/block:Text}

{block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}

{block:Photoset}{Photoset-500}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}

{block:Quote}<div class="quote">"{Quote}"</div>{block:Source}<div class="source">- {Source}</div>{/block:Source}{/block:Quote}

{block:Link}<h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}<div id="chat">{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}<div class="chat">{block:Lines}<div class="{Alt} user_{UserNumber}">{block:Label}<span class="label">{Label} </span>{/block:Label}{Line}</div>{/block:Lines}</div></div>{/block:Chat}

{block:Video}{Video-500}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video}

{block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}

{block:Answer}<div class="question">{Question}</div><div class="asker"><span style="font-size:20px;color:{color:border};">◥</span> {Asker}</div>{Answer}{/block:Answer}

{block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

</div><!-- post -->

<div class="line"></div>

<center><div class="permalink">
{block:Date}<span style="background-color:{color:background};padding:3px;"><a href="{Permalink}" style="letter-spacing:1px;font-weight:normal;background-color:{color:main color};padding:2px;padding-left:3px;color:{color:post};">{DayOfMonthWithZero} {Month}</a>{/block:Date}{block:NoteCount}&nbsp;&nbsp;<span style="color:{color:main color};opacity:.8;font-family:arial;"><big> ♥ </big></span><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom}&nbsp;&nbsp;<span style="color:{color:main color};opacity:.8;"><big>▲</big> </span><a href="{ReblogRootURL}" title="posted by {ReblogRootName}" target="_blank">{ReblogRootName}</a>{/block:RebloggedFrom}</span></div></center>
<div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</div>



{block:PostNotes}<div class="notes">{PostNotes}</div>{/block:PostNotes}

</div><!-- post -->

{/block:Posts}


<br><br><br>

<!--START POPUP HTML-->

 <div id="popup" class="popup_block"><center>

all of your text, links, whatever you want to show up in the pop up will go here

</div>

<!--END POPUP HTML-->

</body>

</html>