<!---

15: verboten / cryothemes

--->

<html>
<head>

<html>
<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">


<!--- COLOUR CONTROL --->

<meta name="color:Background Color" content="#fbfbfb">

<meta name="color:Font Color" content="#000000">

<meta name="color:Link Color" content="#2e2e2e">

<meta name="color:Link Hover Color" content="#666666">

<meta name="color:Scrollbar Thumb" content="#000000">

<meta name="color:Scrollbar Background" content="#ffffff">

<meta name="color:Blockquote Background" content="#f3f3f3">

<meta name="color:Header Background" content="#fbfbfb">

<meta name="color:Header Title" content="#000000">

<meta name="color:Menu Link Color" content="#000000">

<meta name="color:Menu Link Hover" content="#dadada">

<meta name="color:Menu Background" content="#fbfbfb">

<meta name="color:Post Border" content="#eaeaea">

<meta name="color:Post Background" content="#ffffff">


<!--- TEXT INPUTS + FONTS --->

<meta name="text:Header Font" content="Lato">

<meta name="text:Before Tags" content="filed under">

<meta name="text:Pop Up Link" content="more">

<meta name="font:Main Font" content="Helvetica">


<!--- SHOW/HIDE ELEMENTS --->

<meta name="if:400px Posts" content="0">
<meta name="if:250px Posts" content="1">


<!--- GOOGLE FONTS --->

<link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,900' rel='stylesheet' type='text/css'>



<!--- LINK INPUTS --->

<meta name="text:Link 1" content="/">
<meta name="text:Link 1 URL" content="/">

<meta name="text:Link 2" content="/">
<meta name="text:Link 2 URL" content="/">

<meta name="text:Link 3" content="/">
<meta name="text:Link 3 URL" content="/">

<meta name="text:Link 4" content="/">
<meta name="text:Link 4 URL" content="/">

<meta name="text:Link 5" content="/">
<meta name="text:Link 5 URL" content="/">

<meta name="text:Link 6" content="/">
<meta name="text:Link 6 URL" content="/">


<!--- SCRIPT CODES | DO NOT ALTER BELOW --->
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


<script>
$(function(){
var shrinkHeader = 50;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.header, .menu').addClass('shrink');
}
else {
$('.header, .menu').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset;
}
});
</script>

<!--- END SCRIPT CODES | DO NOT ALTER ABOVE --->



</head>
<style type="text/css">


/*---- MAIN BODY ----*/


::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track {
background-color: {color:Scrollbar Background}; }

::-webkit-scrollbar-thumb{
border: 5px solid {color:Scrollbar Background};
background-color: {color:Scrollbar Thumb}; }

::-webkit-scrollbar-track-piece { height: 30px; width: 30px; }



body {
background-color: {color:Background Color};
background-image: url('{image:Background Image}');
background-position: left bottom;
background-repeat: no-repeat;
font-family: {font:Main Font};
font-size: 11px;
font-weight:normal;
color: {color:Font Color}
padding:0;
margin:0; }


a {
color: {color:Link Color};
text-decoration: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }

a:hover {
color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }



b, strong { font-weight: 900; }
i, em { font-style: italic; }



small { font-size:9px; }
big { font-size: 13px; font-weight: 700; }



blockquote {
margin:10px;
padding:10px;
background-color: {color:Blockquote Background}; }


/*---- HEADER ----*/


.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: {color:Header Background};
color:{color:Header Title};
z-index: 1000;
height: 170px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
text-align:center;
}


.header.shrink {
height:30px; }




.header h1 {
font-size:31px;
font-family: {text:Header Font};
font-weight:900;
letter-spacing:1px;
padding:60px 0 0 0;
color:{color:Header Background};
text-transform: none;
cursor:pointer;

-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s; }

.header h1 a { color:{color:Header Background};
-webkit-text-stroke-width: 0.05em;
-webkit-text-stroke-color: {color:Header Title};}

.header.shrink h1 {
font-size:0px;
height:0;
padding:0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }






/* MENU / NORMAL */

.menu {
display:block;
width:100%;
padding:12px 0 0px 0;
margin:auto;
background-color:{color:Menu Background};
font-size:7px;
font-weight:900;
letter-spacing:1px;
text-align:center;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s; }

.menu a {
display:inline-block;
color: {color:Menu Link Color};
text-transform:uppercase;
text-align:left;
margin-right:10px;
padding-bottom:10px;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.menu a:last-child { margin-right:0; }

.menu a:hover {
color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }






/* MENU / SHRINK */

.menu.shrink {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s; }





/* CONTENT + POSTS */

.content {
width:100%;
height:auto;
background-color:transparent; }


#entries {
display: block;
{block:IndexPage}
{block:if400pxPosts}
width: 416px;
{/block:if400pxPosts}
{block:if250pxPosts}
width: 266px;
{/block:if250pxPosts}
{/block:IndexPage}

{block:PermalinkPage}
width:416px;
{/block:PermalinkPage}
margin:290px auto 0 auto;
text-align:center; }


.post {
display:block;
{block:IndexPage}
{block:if400pxPosts}
width:400px;
{/block:if400pxPosts}
{block:if250pxPosts}
width: 250px;
{/block:if250pxPosts}
{/block:IndexPage}

{block:PermalinkPage}
width:400px;
{/block:PermalinkPage}
text-align: justify;
padding:8px;
font-weight:lighter;
line-height:170%;
margin-top:130px;
background-color:{color:Post Background};
{block:IndexPage}
border:1px solid {color:Post Border};
{/block:IndexPage}
}



.post img {
margin-bottom:-5px;
max-width:100%; }


.photoset { display:block; width:100%; }

.photoset img { width:100%; }




.caption { padding:0; {block:IndexPage}display:none;{/block:IndexPage} }


.title {
display:block;
font-size:15px;
font-family:{text:Header Font};
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
padding:5px; }


.post-info {
font-weight:normal;
{block:IndexPage}
position:absolute;
opacity:0;
font-size:8px;
{block:if400pxPosts}
width: 400px;
{/block:if400pxPosts}
{block:if250pxPosts}
width: 250px;
{/block:if250pxPosts}
text-align:center;
padding-top:20px;
{/block:IndexPage}

{block:PermalinkPage}
position:absolute;
width:400px;
opacity:1;
margin-bottom:30px;
font-size:10px;
{/block:PermalinkPage}

font-family:Lato;
text-transform:uppercase;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s; }



.tags {
display:block;
margin-top:20px;
text-transform:lowercase;
font-size:10px; }

.tags a:after { content: ","; }
.tags a:last-child:after { content:""; }


.post:hover .post-info { opacity:1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;}


.post-notes {
display:block;
width:400px;
margin:130px auto;
height:300px;
overflow-y:auto;
text-align:left;
overflow-x:hidden;
font-size:9px;
padding:0 20px;
background-color: transparent; }

.notes img { display:none; }
ol.notes, .notes li { width:400px; list-style:none; padding:3px; }


.post-notes h1 {display:block; font-family:Lato; font-weight:900;
text-transform:uppercase; padding:10px 5px; margin:0; font-size:12px; }




/* MISC */


#pagi {
display:block;
width:100%;
font-size:11px;
text-transform:lowercase;
margin-top:100px;
padding-top:10px;
text-align:left;
height:100px; }

#pagi a {
display:inline-block;
font-family:Lato;
font-weight:900;
text-transform:uppercase;
font-size:9px; }

#pagi a:last-child {
float:right; }



/* AUDIO */

.aud {
width:110px;
height:110px;
margin:0;
background-color: {color:Font Color};
display:inline-block;
background-attachment:repeat; }

.aud2{
height:26px;
width:20px;
margin-left: 41%;
padding:40px 0;
overflow:hidden;
opacity:1;}


.audinfo {
display:inline-block;
margin-left:10px;
vertical-align:top; }


.audline {
display:block;
width:120px;
text-transform:uppercase;
margin-bottom:10px;
font-family:Lato;
font-weight:700;
font-size:8px;
letter-spacing:1px;
border-bottom:1px solid rgba(00,00,00,0.1); }


/* QUOTE */

.quote {
display:block;
font-family:Lato;
text-transform:uppercase;
font-size:9px;
font-weight:900;
letter-spacing:1px; }


.source {
display:block;
text-align:right;
padding-top:10px;
}



/* ASK POSTS */


.ask { display:block; background-color: {color:Blockquote Background}; padding:10px; margin:5px; }

.asker { display:block; text-align:center; font-weight:900; font-family:Lato; text-transform:uppercase; font-size:9px; letter-spacing:1px; }

.answer { padding:0 10px; }



/* POP UP */


.box {
background-color: rgba(00,00,00,0.5);
position:fixed;
top: 0;
display:none;
left: 0;
width: 100%;
height: 100%;
z-index:9999; }


.inbox {
background-color:rgba(255,255,255,0.4);
position:absolute;
top: 50%;
left: 50%;
margin-left:-200px;
margin-top:-200px;
width: 400px;
height: 300px;
z-index:999999; }

.show {
display:inline-block;
color: {color:Menu Link Color};
text-transform:uppercase;
text-align:left;
padding-bottom:10px;
cursor:pointer;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s; }

.show:hover {
color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }

.inbox a.hide {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
padding:7px 0;
background-color:{color:Post Border};
text-align: center;
font-size: 7px;
letter-spacing:1px;
font-family:Lato;
cursor:pointer;
font-weight:900;
text-transform:uppercase;
display: block; }


.stuff {
margin: 10px;
padding: 20px;
background-color:white;
height: 240px;
width: 340px;
font-size: 11px;
letter-spacing: 1px;
line-height: 170%;
overflow: auto;
text-align: justify; }


.stufftext {
display:block;
letter-spacing:0;
margin-right:25px;
max-height:170px;
overflow:auto;
padding-right:10px;}

.stufflinks {
position:absolute;
width:330px;
display:block;
top:205px; }

.stufflinks a {
display:inline-block;
text-align:center;
padding:3px 0px;
width:150px;
font-weight:900;
font-family:Lato;
font-size:9px;
text-transform:uppercase;
margin:5px 5px 5px 0;
border:1px solid {color:Post Border}; }

.stufflinks a:hover {
background-color:rgba(00,00,00,0.4);
color:{color:Background Color}; }



/* --- DO NOT REMOVE OR ALTER --- */

.credit {
position:fixed;
bottom:0;
right:0;
font-weight: bold;
color:black;
padding:20px;
font-size:13px; }

.cryo {
display:inline-block;
font-size:7px;
color:black;
letter-spacing:1px;
float:left;
text-transform:uppercase;
padding-right:15px;
padding-bottom:1px;
opacity:0; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}

.credit a, .credit a:hover { color:black; }

.credit:hover .cryo { opacity:1; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}


</style>
<body>


<!-- do not remove --> <div class="credit"><div class="cryo">cryothemes</div><a class="cr" href="http://cryothemes.tumblr.com/"><i class="ion-android-radio-button-on"></i></a></div> <!-- do not remove -->



<div class="box">
<div class="inbox">

<a class="hide">exit</a>

<div class="stuff">

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

<div class="stufflinks">
<a href="{text:Link 3 URL}">{text:Link 3}</a>
<a href="{text:Link 4 URL}">{text:Link 4}</a><br>
<a href="{text:Link 5 URL}">{text:Link 5}</a>
<a href="{text:Link 6 URL}">{text:Link 6}</a>
</div>

</div>

</div>
</div>




<div class="header">

<h1><a href="/">{Title}</a></h1>

<div class="menu">
<a href="/">home</a>
<a href="{text:Link 1 URL}">{text:Link 1}</a>
<a href="{text:Link 2 URL}">{text:Link 2}</a>
<div class="show">{text:Pop Up Link}</div>
</div>


</div>




<div class="content">


<div id="entries">

{block:Posts}

<div class="post">









<!-- TEXT -->

{block:Text}

{block:Title}
<div class="title"><a href="{Permalink}">{Title}</a></div>
{/block:Title}
<div style="padding:0px 5px;">
{Body}
</div>
{/block:Text}




<!-- PHOTO -->


{block:Photo}


<center>
{block:IndexPage}

{block:if400pxPosts}
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{/block:if400pxPosts}

{block:if250pxPosts}
<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
{/block:if250pxPosts}

{/block:IndexPage}


{block:PermalinkPage}

<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>

{/block:PermalinkPage}

</center>

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

{/block:Photo}



<!-- PHOTOSET -->


{block:Photoset}

<center>

{block:IndexPage}

{block:if400pxPosts}
{Photoset-400}
{/block:if400pxPosts}

{block:if250pxPosts}
{Photoset-250}
{/block:if250pxPosts}

{/block:IndexPage}


{block:PermalinkPage}
{Photoset-400}
{/block:PermalinkPage}

</center>

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

{/block:Photoset}


<!-- QUOTE -->


{block:Quote}
<div class="quote">{Quote}</div>
{block:Source}
<div class="source">&mdash; {Source}</div>
{/block:Source}

{/block:Quote}




<!-- LINK -->


{block:Link}

<center><div class="title"><a href="{URL}" class="link" {Target}>{Name}</a></div></center>
{block:Description}
<div class="post-in">
{Description}
</div>
{/block:Description}


{/block:Link}




<!-- CHAT -->


{block:Chat}

{block:Lines}<div style="padding:4px 3px; text-align:left; ">{block:Label}<span style="text-transform: uppercase; font-size:9px; letter-spacing: 1px;"><b>{Label}</b></span>{/block:Label}<span style="padding-left:5px; font-size:11px;">{Line}</span><br></div>{/block:Lines}

{/block:Chat}




<!-- AUDIO -->


{block:Audio}

<div class="aud"><div class="aud2"><center>{AudioPlayerBlack}</center></div></div>
<div class="audinfo">
<div class="audline">
{block:Artist}{Artist}{/block:Artist}
</div>
<div class="audline">
{block:TrackName}
{TrackName}
{/block:TrackName}
</div>

<div class="audline">
{block:PlayCount} {PlayCount} plays{/block:PlayCount}
</div>
</div>
</span>

{/block:Audio}





<!-- VIDEO -->

{block:Video}
<center>

{block:IndexPage}

{block:if400pxPosts}
{Video-400}
{/block:if400pxPosts}

{block:if250pxPosts}
{Video-250}
{/block:if250pxPosts}

{/block:IndexPage}

{block:PermalinkPage}
{Video-500}
{/block:PermalinkPage}

</center>

{block:Caption}
{Caption}
{/block:Caption}

{/block:Video}






<!-- ANSWER -->


{block:Answer}

<div class="asker">{Asker}</div>
<div class="ask">
{Question}</div>

<div class="answer">{Answer}</div>


{/block:Answer}




{block:IndexPage}
<div class="post-info">

<div class="date">
{block:Date}
<b>
<a href="{Permalink}">
{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>
</b>
<br>

{block:NoteCount}
<a href="{Permalink}">{NoteCount}</a><br>
{/block:NoteCount}

{/block:Date}
</div>

</div>
{/block:IndexPage}



{block:PermalinkPage}
<div class="post-info"><br><center>

<div class="date">
{block:Date}
<b>
<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} </a>
</b>

{block:NoteCount}&nbsp;<a href="{Permalink}">{NoteCountWithLabel}</a><br>
{/block:NoteCount}

{/block:Date}


{block:ContentSource}
<a href="{SourceURL}">source</a>

{block:RebloggedFrom}
/ <a href="{ReblogParentURL}">via</a>
{/block:RebloggedFrom}

{/block:ContentSource}


</div>

{block:HasTags}
<div class="tags">
<b>{text:Before Tags}</b>: {block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}


</center></div>
{/block:PermalinkPage}



</div>


{block:PostNotes}
<div class="post-notes">
{block:NoteCount}<h1>{NoteCountWithLabel}</h1> {/block:NoteCount}
{PostNotes}
</div>
{/block:PostNotes}


{/block:Posts}


<div id="pagi">
{block:PreviousPage}
<a href="{PreviousPage}">back</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">forth</a>
{/block:NextPage}
{/block:Pagination}
</div>


</div>







</div>




<script>
$(document).ready(function(){
$(".show").click(function(){
$(".box").fadeToggle("slow");
});
$(".hide").click(function(){
$(".box").fadeToggle("slow");
});
});
</script>


</body>
</html>