2.3 LONDON LIGHTS

<!DOCTYPE html>

<!---------------


        2-3 "London Lights" by DOMINICWRITES
        Rules and Regulations:
        #1: Please DO NOT commit thievery and steal this theme/page. I've  worked hard on in so I'd appreciate if you didn't.

        #2: DO NOT redistribute this theme/page,

        #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.


        CREDITS:
        Masonry code - Manatopia's Tutorial on Masonry
        Header background - Google Images
        Oranienbaum & Source Sans Pro - Google Fonts


        ---------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>

    <meta charset="utf-8">

    <meta name="description" content="{MetaDescription}" />

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

    <!-- FONT SCRIPT CODES -->

<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>


    <!-- JAVASCRIPT CODES -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script type="text/javascript">
$(function(){
var $container = $('#navigation');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#navbox',
});
});
$container.infinitescroll({
itemSelector : "#navbox",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>


</head>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    list-style: none;
    background-color: #FFFFFF;
    background-image:url('http://static.tumblr.com/kamm2qy/Yxlnjjezc/linedpaper.png');
    background-attachment: fixed;


}

a {
    text-decoration: none;
    color: #0195ab;
}

b,i,strong,em {
    color: #cbd165;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #e1a5a3;
    height: 10px;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color: #e1a5a3;
    height: 7px!important;
    }
::-webkit-scrollbar {
    background-color: transparent;
    height: px;
    width: 2px;
    }

#content {
    width: 750px;
    height: auto;
    margin: 0px auto 100px auto;
    padding: 40px;
    display: block;
    margin-top: 100px;
}

header {
    display: block;
    width: 670px;
    height: auto;
    padding: 40px;
    background-color: #FFFFFF;
}

header img {
    width: 670px;
    height: auto;
}

.title {
    display: block;
    padding: 15px 0px;
    background-color: #e1a5a3;
    font-family: 'Oranienbaum', Arial, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    width: 100%;
    margin-bottom: 10px;
}

#about {
    display: block;
    margin-bottom: 10px;
    background-color: #EEEEEE;
    padding: 60px;
    text-align: justify;
    font-family: 'Libre Baskerville', 'Oranienbaum', 'Source Sans Pro', Arial, sans-serif;
    font-style: italic;
    font-size: 10px;
    color: #202020;
    width: 630px;
    height: auto;
}

#navigation {
    width: 720px;
    height: auto;
    padding: 15px;
    background-color: #EEEEEE;
    margin-bottom: 10px;
}

#navbox {
    width: 185px;
    height: auto;
    background-color: #FFFFFF;
    margin: 17px;
    padding: 10px;
}

.portrait {
    display: table;
    width: 185px;
    height: 145px;
    background-color: #DDDDDD;
    margin-bottom: 10px;
}

.portrait .navt {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'Oranienbaum', 'Source Sans Pro', Arial, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0px 0px 10px #202020;
}

.links {
    display: block;
}

.links a {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFFFFF;
    background-color: #e1a5a3;
    padding: 7px;
    display: block;
    margin-bottom: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.links a:hover {
    color: #e1a5a3;
    background-color: #FFFFFF;
}

#current {
    display: block;
    width: 750px;
    background-color: #EEEEEE;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}

#curbox {
    width: 335px;
    height: auto;
    padding: 20px;
    background-color: #FFFFFF;
    display: inline-block;

}

.curtitle {
    display: block;
    font-family: 'Oranienbaum', Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #e1a5a3;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    width: 315px;
    margin-bottom: 10px;
}

.currentpic {
    display: block;
    width: 335px;
    height: 125px;
    margin-bottom: 5px;
}

.currentpic img {
    width: 335px;
    height: 125px;
    background-color: #202020;
}

.event {
    font-family: 'Oranienbaum', Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    color: #e1a5a3;
    padding: 5px 0px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 10px;
}

.evdesc {
    font-family: 'Libre Baskerville', Arial, sans-serif;
    font-size: 10px;
    text-align: justify;
    font-style: italic;
    padding: 20px;
    color: #202020;
    overflow: auto;
    max-height: 125px;
    margin-bottom: 15px;
}

</style>
<body>


<div id="content">
    <header>
        <img src="LARGE HEADER URL HERE" />
    </header>
    <div class="title">TITLE HERE</div>

    <div id="about">
        INSERT BIOGRAPHY HERE.
    </div>

    <div id="navigation">
        <!-- NAV BOX START -->
        <div id="navbox" style="float: left;"> <!-- ONLY THIS BOX SHOULD HAVE THE FLOAT:LEFT FEATURE! -->
            <div class="portrait" style=" background-image:url('SMALL NAV PIC URL HERE');"> <!-- SMALL PIC URL HERE -->
                <div class="navt">NAV SECTION TITLE</div>
            </div>
            <div class="links">
                <a href="#">LINK</a>
                <a href="#">LINK</a>
                <a href="#">LINK</a>
                <a href="http://dominicwrites.tumblr.com">THEME CREDIT</a>
            </div>

        </div>
        <!-- NAV BOX END -->


        <!-- PASTE ALL NAV BOX CODES BEFORE THIS </DIV> -->

    </div>

	<!-- CURRENT EVENTS / ADMIN UPDATES SECTION -->
    <div id="current">

        <div id="curbox">
            <div class="curtitle">Current Events</div>

		<!-- EVENT SECTION START -->
            <div class="currentpic">
                <img src="EVENT PIC URL HERE" />
            </div>
            <div class="event">EVENT TITLE</div>
            <div class="evdesc">
                DESCRIPTION ABOUT EVENT.
            </div>
		<!-- EVENT SECTION END -->

		<!-- PASTE ALL EVENT CODES BEFORE THIS </DIV> -->

        </div>

        <div id="curbox">
            <div class="curtitle">Administrative Updates</div>

		<!-- UPDATE SECTION START -->
            <div class="event">DATE OF UPDATE</div>
            <div class="evdesc">
                DESCRIPTION OF UPDATE.
            </div>
		<!-- UPDATE SECTION END -->

            <!-- PAST ALL UPDATE CODES BEFORE THIS </DIV> -->


        </div>
    </div>


</div>
</body>
</html>