Ocean Depths Theme - by Chloe

<!DOCTYPE html>
<head>
<!------------------------------------------
 _                  _     _
| |__  _   _    ___| |__ | | ___   ___
| '_ \| | | |  / __| '_ \| |/ _ \ / _ \
| |_) | |_| | | (__| | | | | (_) |  __/
|_.__/ \__, |  \___|_| |_|_|\___/ \___|
       |___/

Ocean Depths Theme by Chloe | @dontbrag | @bychloethemes

Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.

If I find any of this anywhere me & my squad (aka @fruitelf and @costalies) will personally drag ur name thru the dirt do not test us.

For html help go to @htmlqueens

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

<!--meta tags-->
<meta name="image:Background" content="" />

<meta name="color:Background" content="#fff"/>

<meta name="color:Text" content="#666"/>
<meta name="color:Accent" content="#006175" />

<meta name="if:Tiled Background" content="1"/>
<meta name="if:3 columns" content="0" />

<meta name="text:Link 1" content="link 1" />
<meta name="text:Icon 1" content="flash" />
<meta name="text:URL 1" content="http://" />
<meta name="text:Link 2" content="link 2" />
<meta name="text:Icon 2" content="paw" />
<meta name="text:URL 2" content="http://" />
<meta name="text:Link 3" content="link 3" />
<meta name="text:Icon 3" content="star-o" />
<meta name="text:URL 3" content="http://" />

<meta charset="UTF-8" />
<title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Dancing+Script|Roboto+Condensed|Roboto:400,300' rel='stylesheet' type='text/css'>
<style type="text/css">
#tumblr_controls {
    top:0px!important;
    right:0px!important;
    -webkit-filter: invert(100%);
    position:fixed!important;
}
::-webkit-scrollbar {
    background-color:#fff;
    height: 7px;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    background-color:{color:Accent};
    border:2px solid #fff;
}
body{
    background:{color:background} url({image:Background})
    {block:IfTiledBackground}
    repeat fixed;
    {/block:IfTiledBackground}
    {block:IfNotTiledbackground}
    no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    {/block:IfNotTiledbackground}
    color:{color:text};
    font-size:13px;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
}
a {
    text-decoration:none;
    color:{color:Text};
}
iframe, img, embed, object, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
    vertical-align:middle;
}
#infscr-loading {
    position:absolute;
    bottom:30px;
    width:200px;
    margin-left:50%;
    left:-100px;
    text-align:center;
}
#infscr-loading img{
}
#bottom-right {
    top:0;
    right:0;
    position:fixed;
    z-index:0;
    width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 600px;
border-color: {color:Accent} transparent transparent transparent;
}
#bottom-left {
    bottom:0;
    left:0;
    position:fixed;
    z-index:0;
    width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 600px;
border-color: transparent transparent transparent {color:Accent};
}
#sidebar {
    position:fixed;
    width:200px;
    text-align:right;
    padding:10px;
    top:20px;
    {block:IfNot3Columns}
    left:calc(50% - 280px);
    {/block:IfNot3Columns}
    {block:If3Columns}
    left:calc(50% - 420px);
    {/block:If3Columns}
    z-index:999;
    border-right:2px solid {color:Accent};
    -webkit-transform: translate(-100%, 0%);
    -moz-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    -o-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
}
#sidebar h1 {
    font-weight:normal;
    font-size:2.8em;
    margin:0;
    font-family: 'Dancing Script', cursive;
    text-shadow:1px 1px rgba({RGBcolor:Accent}, 0.6);
    color:rgba({RGBcolor:Accent}, 1);
}
ul#navlinks {
    position:fixed;
    width:90px;
    text-align:left;
    bottom:20px;
    {block:IfNot3Columns}
    left:calc(50% + 280px);
    {/block:IfNot3Columns}
    {block:If3Columns}
    left:calc(50% + 420px);
    {/block:If3Columns}
    list-style-type:none;
    font-size:12px;
    margin:5px 0 0 0;
    padding:2px 0;
    border-left:2px solid {color:Accent};
    z-index:99;
}
ul#navlinks li {
    line-height:20px;
    display:block;
    margin:2px 3px;
    text-transform:uppercase;
    padding:0 4px;
    font-family: 'Roboto Condensed', sans-serif;
}
ul#navlinks a {
    color:{color:Accent};
}
ul#navlinks a:hover li {
    background:{color:Accent};
}
ul#navlinks a:hover {
    color:#fff;
}
ul#navlinks .fa {
    line-height:20px;
    float:right;
}
#sidebar p {
    margin:10px auto 0 auto;
    width:90%;
}
#posts {
    {block:IndexPage}
    {block:IfNot3Columns}
    width:530px;
    {/block:IfNot3Columns}
    {block:If3Columns}
    width:810px;
    {/block:If3Columns}
    {/block:IndexPage}
    margin-top:20px;
    margin-left:50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
}
.credit {
    width:14px;
    height:14px;
    color: {color:Accent};
    position:fixed;
    bottom: 15px;
    right: 15px;
    line-height: 14px;
    font-size:12px;
    text-transform: uppercase;
    padding:3px 4px;
    overflow: hidden;
        z-index:999999999999999999;
    text-align:left;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
  }
.fa-diamond {
    position:absolute;
    right:3px;
  }
.credit:hover {
    width:126px;
    background:#444;
    color:#fff;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
  }
.credit a {
    color:#fff;
    text-decoration: none;
  }
.credit .mine {
    opacity:0;
    visibility:hidden;
  }
.credit:hover .mine {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease-in-out 0.5s;
       -moz-transition: all 0.5s ease-in-out 0.5s;
         -o-transition: all 0.5s ease-in-out 0.5s;
            transition: all 0.5s ease-in-out 0.5s;
}
article {
    margin-bottom:30px;
    position:relative;
    {block:IndexPage}
    width:250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    background:rgba(255,255,255,0.5);
    {/block:PermalinkPage}
}
article a {
    color:{color:Accent};
}
article h2 {
    margin:0;
    font-size:1.3em;
}
article p {
    margin:10px 0;
}
article blockquote {
    margin: 5px 0 5px 10px;
    border-left:2px solid {color:Accent};
    padding-left:10px;
}
article ul, article ol {
    padding-left:25px;
}
.quote-post cite {
    text-align:right;
    display:block;
    margin:5px 5px 10px 5px;
}
ul.chat-list {
    padding:0;
    list-style-type:none;
}
ul.chat-list li {
    line-height:17px;
}
ul.chat-list .label {
    color:{color:Accent};
    font-weight:bold;
}
.album-art img {
    {block:IndexPage}
    width:80px;
    height:80px;
    {/block:IndexPage}
    float:left;
    margin-right:10px;
    {block:PermalinkPage}
    width:120px;
    height:120px;
    {/block:PermalinkPage}
}
.audio-info {
    {block:IndexPage}
    min-height:80px;
    {/block:IndexPage}
    {block:PermalinkPage}
    min-height:120px;
    line-height:140%;
    {/block:PermalinkPage}
    margin-bottom:10px;
}
.tumblr_audio_player {
    position: absolute;
    {block:IndexPage}
    top: 25px;
    left: 25px;
    {/block:IndexPage}
    {block:PermalinkPage}
    top: 45px;
    left: 45px;
    {/block:PermalinkPage}
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0.8;
}
{block:PermalinkPage}
.text-post, link-post, .chat-post, .quote-post, .audio-post {
    padding:2px;
}
{/block:PermalinkPage}
.photo-mask {
    width:100%;
    height:100%;
    position:absolute;
    background:rgba(255,255,255,0.9);
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
    outline:2px solid {color:Accent};
    outline-offset:-17px;
}
article:hover .photo-mask {
    opacity:1;
    visibility:visible;
    outline-offset:-12px;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
.photo-info {
    top:50%;
    left:50%;
    padding: 20px;
    position:relative;
    text-align:center;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color:{color:Accent};
}
.photo-info a {
    color:{color:Accent};
}
.other_perma {
    text-align:center;
    background:{color:Accent};
    color:#fff;
    padding:3px 10px;
}
.other_perma a {
    color:#fff;
}

.extra-info {
    padding: 10px 0;
    line-height: 20px;
    text-align: left;
}
.extra-info .fa {
    color:{color:Accent};
}
ol.notes {
    padding: 0px;
    margin: 20px 0;
    list-style-type: none;
}
ol.notes a {
    border-bottom:0;
}
ol.notes li.note {
    padding: 3px;
    margin-bottom:3px;
}
ol.notes li.note img.avatar {
    float:right;
    border-radius:50%;
}
ol.notes li.note blockquote {
    border-color: {color:text};
    padding-left: 6px;
    margin: 6px;
}
ol.notes li.note blockquote a {
    text-decoration: none;
}
a:focus {
    outline:none;
}
</style>
</head>
<body>
<div id="bottom-middle"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

<div id="sidebar">
    <h1>{Title}</h1>
    {block:Description}<p>{Description}</p>{/block:Description}
</div>


    <ul id="navlinks">
        <a href="/"><li><i class="fa fa-refresh"></i>home</li></a>
        {block:AskEnabled}
        <a href="/ask"><li><i class="fa fa-commenting-o"></i>ask</li></a>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <a href="/submit"><li><i class="fa fa-file-o"></i>submit</li></a>
        {/block:SubmissionsEnabled}
        {block:IfLink1}
        <a href="{text:URL 1}"><li><i class="fa fa-{text:Icon 1}"></i>{text:Link 1}</li></a>
        {/block:IfLink1}
        {block:IfLink2}
        <a href="{text:URL 2}"><li><i class="fa fa-{text:Icon 2}"></i>{text:Link 2}</li></a>
        {/block:IfLink2}
        {block:IfLink3}
        <a href="{text:URL 3}"><li><i class="fa fa-{text:Icon 3}"></i>{text:Link 3}</li></a>
        {/block:IfLink3}
        <a href="/archive"><li><i class="fa fa-eye"></i>archive</li></a>
        <a href="http://dontbrag.tumblr.com" target="_blank"><li><i class="fa fa-code"></i>theme</li></a>
    </ul>

<div id="posts">
{block:Posts}
<article>
    {block:Text}
    <div class="text-post">
        {block:Title}<h2>{Title}</h2>{/block:Title}
        {Body}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Text}

    {block:Photo}
    <div class="photo-post">
        {block:IndexPage}
        <div class="photo-mask">
            <div class="photo-info"><a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a></div>
        </div>
        <img src="{PhotoURL-250}">
        {/block:IndexPage}
        {block:PermalinkPage}
        <img src="{PhotoURL-500}">
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div class="photo-post">
        {block:IndexPage}
        <div class="photo-mask">
            <div class="photo-info"><a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a></div>
        </div>
        {Photoset-250}
        {/block:IndexPage}
        {block:PermalinkPage}
        {Photoset-500}
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photoset}

    {block:Quote}
    <div class="quote-post">
        <h2><span style="color:{color:Accent};">❝</span> {Quote} <span style="color:{color:Accent};">❞</span></h2>
        {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Quote}

    {block:Link}
    <div class="link-post">
        <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="fa fa-angle-right"></i></a></h2>
        {block:Description}{Description}{/block:Description}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Link}

    {block:Chat}
    <div class="chat-post">
        {block:Title}<h2>{Title}</h2>{/block:Title}
        <ul class="chat-list">
        {block:Lines}
            <li class="{Alt}">
            {block:Label}<span class="label">{Label}</span>{/block:Label}
            {Line}</li>
         {/block:Lines}
         </ul>
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Chat}

    {block:Audio}
    <div class="audio">
        {block:AlbumArt}
        <div class="album-art">
            <img src="{AlbumArtURL}">
        </div>
        {/block:AlbumArt}
        <div class="audio-info">
        Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
        Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
        Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
        Plays: {FormattedPlayCount}</div>
        {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {block:PermalinkPage}
    {block:Caption}{Caption}{/block:Caption}
    {/block:PermalinkPage}
    {/block:Audio}

    {block:Video}
    <div class="video-post">
        {block:IndexPage}
        {Video-250}
        {/block:IndexPage}
        {block:PermalinkPage}
        {Video-500}
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;~&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Video}

    {block:PermalinkPage}
    <div class="extra-info">
        {block:Date}<i class="fa fa-clock-o"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
        {block:NoteCount}&nbsp;~&nbsp;<i class="fa fa-files-o"></i> {NoteCount}{/block:NoteCount}
        {block:RebloggedFrom}&nbsp;~&nbsp;<i class="fa fa-retweet"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
        {block:ContentSource}&nbsp;~&nbsp;<i class="fa fa-copyright"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
        {block:HasTags}&nbsp;~&nbsp;<i class="fa fa-tag"></i> {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}
    </div>
    {block:PostNotes}
    <div id="notes">
        {PostNotes-16}
    </div>
    {/block:PostNotes}
    {/block:PermalinkPage}

</article>
{/block:Posts}
</div>

{block:Pagination}
<div class="pagination" style="visibility:hidden;">
{block:PreviousPage}
<a href="{PreviousPage}">previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" id="next">next</a>
{/block:NextPage}
</div>
{/block:Pagination}
<div class="credit">
  <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
</div>
{block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
<script>
(function () {
 var $tumblelog = $('#posts');
 $tumblelog.imagesLoaded(function () {
    $tumblelog.masonry({
        itemSelector: 'article',
        isAnimated:true,
        columnWidth:250,
        gutterWidth:30,
    });
});
$tumblelog.infinitescroll({
    navSelector : "div.pagination",
    nextSelector : ".pagination a#next",
    itemSelector : "article",
    loading: {
        finishedMsg: "<p>You've reached the end of the Earth.</p>",
        img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
        msg: null,
        msgText: ""
    },
},

function( newElements ) {
        var $newElems = $(newElements)
        $newElems.hide();
		$newElems.imagesLoaded(function(){
			$tumblelog.masonry( 'appended', $newElems, {
				isAnimated: true,
				animationOptions: {
				    duration: 250,
				    easing: 'linear',
				    queue: false
				}
			},
			    function(){
				    $newElems.fadeIn('slow');
			    }
			);
		});
    });
})();
</script>
{/block:IndexPage}
<div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5092977";
var ref = (''+document.referrer+'');var pn =  window.location;var w_h = window.screen.width + " x " + window.screen.height;
fhs.src = "http://freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
</script>
</div>
<!--/////////End Masonry//////////-->

</body>
</html>