unreleased | colours

<!DOCTYPE html>
<html>

<!---
            AGGRO MAGIKARP THEMES
                            iii | colours
                    http://aggressivemagikarp.tumblr.com/

General theme/page rules apply. Thank you!

--->

<head>

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

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:300,
               tip_fade_speed:300,
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

/**SCROLL BAR***/
    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: #fc7d94;
    }


    ::-webkit-scrollbar-thumb {
        background-color:#000000;
        height: 1px;
        width: 1px;
        border-top: 4px solid #fc7d94;
        border-bottom: 4px solid #fc7d94;
        border-left: 4px solid #fc7d94;
        border-right: 4px solid #fc7d94;
    }
/**SCROLL BAR END***/

    body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        word-wrap: break-word;
        background-color: #ffdae1; /**BACKGROUND COLOUR***/
        font-family: 'Lato', sans-serif;
        font-size: 14px;
    }

/***TOOLTIP***/
    #s-m-t-tooltip {
        background: #FFDAE1;
        z-index: 999999;
        padding: 3px;
        border: dotted 1px #F95975;
        color: #F95975;
        margin: 15px;
        padding: 5px;
        font-size: 9px;
        text-transform: uppercase;
    }
/***TOOLTIP END***/

    a {
        text-decoration: none;
    }

/***HIGHLIGHT COLOUR***/
    ::selection {
        background: #fea7b6;
    }

    ::-moz-selection {
        background: #fea7b6;
    }
/***HIGHLIGHT COLOUR END***/

    #container {
        position: fixed;
        width: 100%;
        height: 400px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    td {
        width: 600px;
        height: 400px;
        border: none;
    }

.flip-container {
	perspective: 1000;
	position: absolute;
	margin-top: 125px;
	margin-left: 150px;

}

.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 300px;
	height: 150px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	background-color: white;
	opacity: 0.8;
}

.border {
    margin-left: 9px;
    margin-top: 9px;
    border: 1px dotted #000000; /***BORDER OF ALL RECTANGLES***/
    height: 130px;
    width: 280px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: bolder;
}

.back {
	transform: rotateY(180deg);
	background-color: #ffffff;
	opacity: 0.8;
}

.front-blogroll {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}

.back-blogroll {
    transform: rotateY(180deg);
	background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}

.description {
    padding: 2px;
    padding-right: 4px;
    margin: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
    height: 130px;
    width: 280px;
}

/***LINKS IN DESCRIPTION***/
.description a {
    color: #F95975;
    border-bottom: 1px solid transparent;
    text-decoration: none;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }

.description a:hover {
        color: #FEA7B6;
        border-bottom: 1px solid #FEA7B6;
}
/***LINKS IN DESCRIPTION END***/

.linkbox {
    padding: 2px;
    padding-right: 4px;
    margin: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
    height: 130px;
    width: 280px;
}

.link {
    position: relative;
    font-weight: bold;
    height: 20px;
    width: 250px;
    padding: 7px 5px 5px 5px;
    background-color: #FEA7B6; /***BG OF LINKS IN NAVIGATION***/
    display: inline-block;
    text-align: center;
    font-size: 16px;
    border: 1px dotted transparent;
    transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
}

.link:hover {
    background-color: transparent; /***BG OF LINKS IN NAVIGATION UPON HOVER***/
    border: 1px dotted black;
}

.linkbox a {
    color: #000000;
    border-bottom: none;

}

.linkbox a:hover {
    color: #000000;
    border-bottom: none;
}

.blogroll {
    padding: 2px;
    margin: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: justify;
    height: 130px;
    width: 280px;
}

.blogroll a {
    border-bottom: none;
}

.blogroll a:hover {
    border-bottom: none;
}

.blogroll img {
    width: 60px;
    height: 60px;
    padding: 1px;
    border: dotted 1px black; /***BORDER OF ICONS***/
    transition: border 0.2s linear;
        -webkit-transition: border 0.2s linear;
        -moz-transition: border 0.2s linear;
        -ms-transition: border 0.2s linear;
        -o-transition: border 0.2s linear;
}

.blogroll img:hover {
    border: dotted 1px #F95975; /***BORDER OF ICONS UPON HOVER***/
}

/***BLOG TITLE***/
.maintitle {
    position: relative;
    margin: 50px auto;
    padding: 15px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    font-weight: bolder;
    color: black;
}

.maintitle a {
    border-bottom: none;
    padding: 0 0 20px 0;
    color: black;
    transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
}

.maintitle a:hover {
    border-bottom: 1px black dotted;
    color: #fc7d94;
}
/***BLOG TITLE END***/

.bottombox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
}

/***BOTTOM LINKS***/
.links {
    width: auto;
    height: 20px;
    font-size: 15px;
    position: relative;
    margin-bottom: 5px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    color: black;
    word-spacing: 20px;
}

.links a {
    color: black;
    border-bottom: none;
    transition: all 0.5s linear;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
}

.links a:hover {
    border-bottom: 1px black dotted;
}
/***BOTTOM LINKS END***/

#outside {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 100px;
    height: 20px;
    overflow: hidden;
}

#outside a {
    border-bottom: none;
    color: black;
}

#inside {
    width: 5px;
    height: 20px;
    font-family: 'Playfair Display', serif;
    padding: 5px;
    font-size: 10px;
    background: #fff;
    float: right;
    transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
}

#inside:hover {
    width: 55px;
}

</style>
</head>

<body>

<div class="maintitle"><a href="/">{Title}</a></div>

<div id="container">
    <table cellpadding="0" cellspacing="0">
        <tr>

<!---BIOGRAPHY---->
<td><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
		    <div class="border"></div>
			<div class="title">biography</div>
		</div>
		<div class="back">
			<div class="description">Lorem <a href="www.inspire-madness.tumblr.com">ipsum</a> dolor sit amet, <b>massa</b> ante vestibulum <i>consequat</i> dui porta dictum, mauris eget in amet scelerisque, elit wisi leo, eros rhoncus justo. Eu eu neque velit sit, id integer libero, lacinia tempus harum neque sit non, feugiat euismod et. Feugiat commodo vestibulum nulla, ut a ullamcorper mauris convallis, pretium feugiat nec leo, orci wisi a turpis amet sed. Fusce dui congue, in condimentum, mauris pellentesque eleifend. Nulla porttitor neque integer imperdiet, aliquam lobortis a in aenean ut platea, etiam sociis duis justo. Et elit sem nunc, ut felis est congue id at conubia.</div>
		</div>
	</div>
</div>

<!---picture link for Biography background---->
<img src="http://68.media.tumblr.com/e1834cf35330ce777b9d6cc1d0c877ca/tumblr_nlq5ddGhEh1rm7fruo1_1280.jpg" style="width: 600px; height: 400px;" />
</td>

<!---ASK BOX---->
<td>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
		    <div class="border"></div>
			<div class="title">contact</div>
		</div>
		<div class="back">
			 <div class="description"><iframe frameborder="0" height="250px" border="none" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/inspire-madness.tumblr.com" width="278px" ></iframe></div>
		</div>
	</div>
</div>

<!---picture link for Ask Box background---->
<img src="http://68.media.tumblr.com/3ad7c3faa5377e79fd6d08ed69195fec/tumblr_nlq5ddGhEh1rm7fruo2_1280.jpg" style="width: 600px; height: 400px;" />
</td>

<!---NAVIGATION---->
<td>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
		    <div class="border"></div>
			<div class="title">navigation</div>
		</div>
		<div class="back">
		<div class="linkbox"> <!---links go here---->
			<a href="/"><div class="link" style="margin: 0px 5px 10px 5px;">#melting</div></a>
			<a href="/"><div class="link" style="margin: 0px 5px 10px 5px;">#LoveSong</div></a>
			<a href="/"><div class="link" style="margin: 0px 5px 10px 5px;">#MissA</div></a>
			<a href="/"><div class="link" style="margin: 0px 5px 10px 5px;">#baesuji</div></a>
			</div>
		</div>
	</div>
</div>

<!---picture link for Navigation background---->
<img src="http://68.media.tumblr.com/8dc14726f76c1da6aa9c7f0b56afcebf/tumblr_nlq5ddGhEh1rm7fruo3_1280.jpg" style="width: 600px; height: 400px;" /></td>

<td>
<!---BLOGROLL--->
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
		    <div class="border"></div>
			<div class="title">blogroll
			</div>
		</div>
		<div class="back">
		<div class="blogroll">
            {block:Following}{block:Followed}
                <a target="_blank" href="{FollowedURL}"><img src="{FollowedPortraitURL-64}" title="{FollowedName}"></a>
            {/block:Followed}{/block:Following}
		</div>
		</div>
	</div>
</div>

<!---picture link for Blogroll background---->
<img src="http://68.media.tumblr.com/2632ac95886d2582675a4a8b1aebf248/tumblr_nlq5ddGhEh1rm7fruo4_1280.jpg" style="width: 600px; height: 400px;" /></td>
        </tr>
    </table>
</div>

<div class="bottombox"><div class="links">
    <a href="/">home</a> -
    <a href="/archive">archive</a> -
    <a href="/dashboard">dashboard</a>
</div></div>

<!---please do not remove---->
<a href="http://aggressivemagikarp.tumblr.com/" title="credit"><div id="outside">
    <div id="inside">
        aggro magikarp
    </div>
</div></a>

</body>
</html>