Relax Theme

<html>
<head>

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

<!-- Relax theme by hendrixrph. Feel free to change the colors/fonts/whatever, just don't remove credit and don't redistribute. Enjoy! -->

<link href="http://cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<link href='http://fonts.googleapis.com/css?family=Muli:400,400italic,300,300italic' rel='stylesheet' type='text/css'>

<style>
    @media all {
        .lightbox { display:none; }
    }

    ::-webkit-scrollbar {width: 6px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ddd ;}

    * {
        margin:0;
        padding:0;
    }

    .header {
        width:610px;
        margin:10px auto;
    }

    .nav {
        list-style-type:none;
        width:100%;
        text-align:center;
        margin:10px auto;
    }

    .nav li {
        display:inline-block;
        margin:0 15px;
        min-width:40px;
    }

    .nav li a {
        text-decoration:none;
        color:#444;
        text-transform:lowercase;
        font-family:"Muli", Arial, Helvetica, sans-serif;
        font-size:13px;
        transition:0.5s all;
    }

    .nav li a:hover {
        color:#888;
    }

    .header h1 {
        text-align:center;
        font-family:"Muli", Arial, Helvetica, sans-serif;
        font-weight:300;
        text-transform:lowercase;
        letter-spacing:2px;
        font-size:40px;
        color:#3e9ac1;
    }

    .wrapper {
        width:610px;
        margin:20px auto;
    }

    .character {
        width:100px;
        height:100px;
        border:1px solid #ccc;
        float:left;
        padding:10px;
        margin:15px;
        background:white;
        display:block;
        position:relative;
    }

    .charname {
        position:absolute;
        margin:0px auto;
        top:44%;left:0;
        width:100%;
        text-align:center;
        opacity:0;
        transition:0.5s all;
        color:rgba(255,255,255,1);
        text-decoration:none;
        font-family:"Muli", Arial, Helvetica, sans-serif;
        font-size:11px;
        font-style:italic;
        letter-spacing:1px;
        text-shadow:1px 1px 3px rgba(0,0,0,0.7);
    }

    .character:hover .charname {
        opacity:1;
        transition:0.5s all;
    }

    .icon {
        height:100px;
        width:100px;
    }

    .clear {
        clear:both;
    }

    .featherlight-content {
        width:700px;
        height:450px;
    }

    .charbox {
        position:relative;
        font-family:"Muli", Arial, Helvetica, sans-serif;
    }

    .portrait {
        width:250px;
        height:450px;
        left:0;
        position:absolute;
    }

    .bio {
        width:400px;
        height:450px;
        left:275px;
        position:absolute;
        overflow-y:auto;
        overflow-x:hidden;
        padding:0 10px;
        font-size:13px;
        line-height:1.35em;
        font-weight:300;
        color:#444;
    }

    .bio p, .bio ol, .bio ul {
        margin:10px 0;
    }

    .bio h1, .bio h2, .bio h3 {
        color:#3e9ac1;
    }

    .bio h1 {
        padding-top:10px;
        font-size:30px;
    }

    .bio h2 {
        padding-top:10px;
        font-size:24px;
    }

    .bio ol, .bio ul {
        margin-left:20px;
    }

    .bio blockquote {
        margin:10px auto;
        background:#eee;
        padding:10px;
        max-width:300px;
    }

    .bio a {
        color:#3e9ac1;
        transition:0.5s all;
        text-decoration:none;
    }

    .bio a:hover {
        color:#a6d0e2;
    }


</style>

</head>
<body>

<div class="header">
    <h1>title</h1> <!-- page title -->
    <ul class="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="http://hendrixrph.tumblr.com">credit</a></li> <!-- DO NOT REMOVE CREDIT -->
    </ul>
</div>

<div class="wrapper">

    <!-- BEGIN COPY/PASTE -->
    <a class="character" href="#" data-featherlight="#char1"> <!-- Change the data-featherlight attribute to something unique. You'll need to match it in the id of the lightbox div below. -->
        <div class="charname">name</div> <!-- The word you get when you hover over the box. -->
        <img class="icon" src=""> <!-- The 100x100 image in the box. -->
    </a>
    <div class="lightbox" id="char1"> <!-- Make sure the id attribute matches what you put for data-featherlight above! -->
        <div class="charbox">
            <img class="portrait" src=""> <!-- The larger image inside the pop-up box. 250x450 px -->
            <div class="bio"> <!-- Here is where your bio information goes. -->
                <p>Character 1 Bio Goes Here</p>
            </div> <!-- END BIO -->
        </div> <!-- END CHARBOX -->
    </div><!-- END LIGHTBOX -->
    <!-- END COPY/PASTE -->

    <!-- BEGIN COPY/PASTE -->
    <a class="character" href="#" data-featherlight="#char2"> <!-- Change the data-featherlight attribute to something unique. You'll need to match it in the id of the lightbox div below. -->
        <div class="charname">name</div> <!-- The word you get when you hover over the box. -->
        <img class="icon" src=""> <!-- The 100x100 image in the box. -->
    </a>
    <div class="lightbox" id="char2"> <!-- Make sure the id attribute matches what you put for data-featherlight above! -->
        <div class="charbox">
            <img class="portrait" src=""> <!-- The larger image inside the pop-up box. 250x450 px -->
            <div class="bio"> <!-- Here is where your bio information goes. -->
                <p>Character 2 Bio Goes Here</p>
            </div> <!-- END BIO -->
        </div> <!-- END CHARBOX -->
    </div><!-- END LIGHTBOX -->
    <!-- END COPY/PASTE -->


    <!-- Do not put characters beyond this point -->
    <br class="clear" />
</div>

</body>
</html>