mpage #04

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<!--

PAGE MADE BY MORGANE (kilmorecove@tumblr / teen-wolf@tumblr)

Made for personal use only.

RULES:
- Do not remove the credits
- Do not move the credits to a secondary page
- Do not take snippets from this code
- Do not redistribute and/or claim the code as your own

You're allowed to edit the code as you want as long as you respect the rules.
For help message me @ kilmorecove.tumblr.com

Enjoy! :)

-->


 <head>
<title>Navigation{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}        </title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link rel="shortcut icon" href="http://i1225.photobucket.com/albums/ee381/enix-directory/Pixels/laco.gif">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

    <head>
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
        <style>

#tumblr_controls {display:none;}

/* scrollbar */

::-webkit-scrollbar-thumb:vertical {
    height:12px;
    background-color:#bbb;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color:#fff;
    }
::-webkit-scrollbar {
    width:5px;
    height:7px;
    border:2px solid #fff;
    background-color:#bbb;
    }


body {
    font: 10px cambria;
    letter-spacing:1px;
    line-height:110%;
    color:#bbb; /* text color */
    text-align:justify;
    background:#fff url('http://static.tumblr.com/rmo8by6/Whjmsrb1l/bg_287978.png');
    }

a, a:hover, a:active, a:visited {
    text-decoration:none;
    color:#bbb; /* links color */
    -webkit-transition: all 0.3s ease-in-out;
    	-moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
    }

#container {
    left:50%;
    top:50%;
    margin:-300px 0 0 -300px;
    width:600px;
    height:600px;
    position:fixed;
        }


#about, #navigation, #askbox, #faq {
    width:228px;
    height:228px;
    border:1px dotted #eee;
    float:left;
    margin:25px;
    padding:10px;
    overflow:auto;
    position:relative;
    background-color:#fff;
      -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    	transition: all 0.5s ease-in-out;
    }

.title {
    text-align:center;
    margin-bottom:5px;
    color:#888;
    font:13px petit formal script;
    letter-spacing:0px;
    }

.description:first-letter {
    color:#fff;
    background:#aaa;
    font: italic 20px georgia;
    padding:5px;
    border:2px solid #fff;
    outline:1px solid #aaa;
    margin-right: 10px; /* adjust margin right of fisrt letter in the about me section*/
    margin-bottom: 5px; /* adjust margin bottom of fisrt letter in the about me section*/
    float:left;
    }

.links a {
    display:block;
    width:228px;
    padding: 5px 0;
    border-bottom:1px solid #bbb;
    text-align:center;
    font-style:italic;
    }

.links a:hover {
    letter-spacing:4px;
    text-shadow: 1px 0 .2px rgba(255,108,143, 0.5), -1px 0 .2px rgba(150,207,250, 1);
    color:#777;
    }

.subtitle {
    color:#999;
    font-weight:bold;
    font-style:italic;
    text-decoration:underline;
    }


#image {
    position:fixed;
    left:50%;
    top:50%;
    background-color:#fff;
    width:548px;
    height:548px;
    margin:-275px 0 0 -275px;
    display:block;
    z-index:2;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    	transition: all 0.5s ease-in-out;
        border:1px solid #eee;
    }

#image img {
    width:200px;
    height:200px;
    position:absolute;
    margin:-112px 0 0 -112px;
    border: 14px solid #333;
    top:50%;
    left:50%;
    padding:10px;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }


#container:hover  #image {
    opacity:0;
    width:0px;
    height:0px;
    margin:0;
    }

#container:hover #image img {
    width:0px;
    height:0px;
    margin:0;
    }

#crd {position: fixed; right:10px; bottom:10px; text-transform:uppercase;font-weight:bold; font-style:normal; font-family:'calibri'; letter-spacing:3px; font-size:9px; background-color:#777; width:18px; height:18px; line-height:18px; -webkit-border-radius: 4px; border-radius: 4px;}
#crd a {color:#fff; padding:2px;}

        </style>
    </head>
    <body>


<div id="container">


    <div id="image"><img src="http://static.tumblr.com/rmo8by6/Y3Pmsrdk7/2.png"/> <!-- replace the url with the picture you want. image size is 200 x 200 pixels --> </div>


  <div id="about">
  <div class="title">About the blogger</div>
  <div class="description"><!-- under this line you write the "about me" -->
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
      </div></div>

  <div id="navigation"><!-- navigation links -->
  <div class="title">Navigation</div>
      <div class="links">
      <a href="/">home</a>
      <a href="/archive">archive</a>
      <a href="URL">link 1</a>
      <a href="URL">link 2</a>
      <a href="URL">link 3</a>
      <a href="URL">link 4</a>
      <a href="URL">link 5</a>
      <a href="URL">link 6</a> <!-- you can add more if you want or delete some if you don't need them -->
      </div>
  </div>

  <!-- BE SURE TO REPLACE "YOUR USERNAME" WITH YOUR ACTUAL USERNAME OR THE ASK WON'T WORK! -->
  <div id="askbox">
  <div class="title">Message</div>
   <iframe frameborder="0"
height="250"
id="ask_form"
scrolling="auto"
src="http://www.tumblr.com/ask_form/YOUR USERNAME.tumblr.com"
width="100%">
</iframe>
  </div>

  <div id="faq"><div class="title">Interests</div>
  <!-- here you can either write the fandoms you're in or a faq page -->
      <span class="subtitle">Title 1:</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <!-- use <br> to go on a new line -->
      <span class="subtitle">Title 2:</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      <span class="subtitle">Title 3</span>: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      <span class="subtitle">Title 4:</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
    </div>

<div id="crd"><a href="http://kilmorecove.tumblr.com" title="By Morgane">th</a></div>

    </body>
</html>