<html>
<head>
<meta charset="UTF-8">


<!------------------------
NOTES FROM TENTACOOL
ALL IMAGES MUST BE 250X250
------------------------->


<!--------------------------------------------
FILMS PAGE [SQUARES]
MADE BY: http://lostmemento.tumblr.com (lmthemes)
---------------------------------------------

TERMS OF USAGE:
- DO NOT REMOVE THE CREDIT
- DO NOT REDISTRIBUTE
- DO NOT CLAIM AS YOUR OWN
- DO NOT USE AS A BASE

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


<title>EDIT YOUR TITLE HERE</title>
<link rel="shortcut icon" href="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/114/movie-camera_1f3a5.png">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
<style type="text/css">

body{
font-family: calibri;
margin:0px;
padding:0px;
font-size: 12px;
line-height: 110%;
background-color: #fff;
color: #000;
overflow-x: hidden;}

a {text-decoration: none;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

a:-webkit-any-link {text-decoration: none;}

img {margin-bottom: -2px;}

::-webkit-scrollbar-thumb:vertical {background-color: #000; border: 3px solid #fff; height: 10px;}
::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;}
::-webkit-scrollbar {background-color: #fff; height:10px; width:12px;}

#s-m-t-tooltip{
position:absolute;
z-index:90000;
display:inline-block;
background-color: #fff;
color: #fff;
padding: 6px 10px;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
line-height: 120%;}

img {display: block;}

.container {width: 1040px; margin: auto; margin-top: 108px;}

.top {width: 990px;
padding: 20px;
background-color: #111; /* change topbar background color */
position: fixed;
border-bottom: 10px solid #fff;
border-top: 20px solid #fff;
z-index: 5;
top: 0px;
color: #fff;
font-size: 8px;
letter-spacing: 1px;}

.tti {font-family: 'Open Sans'; font-size: 26px;}

.tli {border: 1px solid #fff; padding: 10px; display: inline-block; float: right;}

.tli a {color:#fff; font-family: 'Open Sans'; font-size: 10px; letter-spacing: 2px;}
.tli a:hover {color: #f4e909;}

#sb {border: 1px solid #111; color: #111;}
#sb:hover {background-color: #111; color: #fff;}

.tent {width: 250px;
height: 250px;
font-family: 'Open Sans';
font-size: 16px;
background-color: #f1f1f1;
font-weight: 700;
display: table;
float: left;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.tsub {color: #222;
text-align: center;
letter-spacing: 2px;
width: 250px;
display: table-cell;
vertical-align: middle;}

.ti {background-color: #fff;
text-align: center;
padding: 10px;
line-height: 110%;
text-transform: uppercase;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.tent:hover .ti {opacity: 0.0;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.hhover {opacity: 0.0;
position: absolute;
width: 230px;
height: 230px;
padding: 10px;
left: 0px;
color:#fff;
text-align: center;
display: table;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.tent:hover .hhover {background-color: rgba(0,0,0,0.6);
opacity: 1.0;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.htent {display: table-cell;
vertical-align: middle;
font-size: 10px;
font-family: calibri;
color: #ddd;}

.hti {letter-spacing: 2px;
width: 90%;
margin: auto;
border-bottom: 1px solid #fff;
margin-bottom: 4px;
font-size: 16px;
font-family: 'Open Sans';
padding: 4px 0px;
color: #fff;
line-height: 110%;
text-transform: uppercase;}

.dat {font-family: times; font-style: italic; letter-spacing: 1px;} /* change date font family */

.dat strong {font-weight: normal; color: #e4c519;} /* change gold text color */

</style>
</head>
<body>
<div class="container">

<div class="top">


<div class="tti" style="margin: 5px 0px;">YOUR TITLE GOES HERE</div>
SOME MORE TEXT CAN GO HERE
</div>

<!--- ALL FILM IMAGES SHOULD BE 250 X 250 --->

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub">
<div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div>
<div class="hhover"><div class="htent">
<div class="hti">kiss kiss bang bang (2005)</div>
<span class="dat"><strong>watched</strong> february 23<br></span>
&#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub">
<span class="ti">monsters inc.</span></div>
<div class="hhover"><div class="htent">
<div class="hti">monsters inc. (2001)</div>
<span class="dat"><strong>watched</strong> january 02<br></span>
&#9733; &#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub">
<div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div>
<div class="hhover"><div class="htent">
<div class="hti">kiss kiss bang bang (2005)</div>
<span class="dat"><strong>watched</strong> february 23<br></span>
&#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub">
<span class="ti">monsters inc.</span></div>
<div class="hhover"><div class="htent">
<div class="hti">monsters inc. (2001)</div>
<span class="dat"><strong>watched</strong> january 02<br></span>
&#9733; &#9733; &#9733;
</div></div></div>


<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub">
<div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div>
<div class="hhover"><div class="htent">
<div class="hti">kiss kiss bang bang (2005)</div>
<span class="dat"><strong>watched</strong> february 23<br></span>
&#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub">
<span class="ti">monsters inc.</span></div>
<div class="hhover"><div class="htent">
<div class="hti">monsters inc. (2001)</div>
<span class="dat"><strong>watched</strong> january 02<br></span>
&#9733; &#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub">
<div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div>
<div class="hhover"><div class="htent">
<div class="hti">kiss kiss bang bang (2005)</div>
<span class="dat"><strong>watched</strong> february 23<br></span>
&#9733; &#9733;
</div></div></div>

<!--- START FILM --->


<div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub">
<span class="ti">monsters inc.</span></div>
<div class="hhover"><div class="htent">
<div class="hti">monsters inc. (2001)</div>
<span class="dat"><strong>watched</strong> january 02<br></span>
&#9733; &#9733; &#9733;
</div></div></div>

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