BS ; 03 // Beloved Café
<!---------------------------------------------------------------------------
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>Purple Café</title>
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(https://i.imgur.com/wTxBtlk.jpg) no-repeat bottom right;
background-size:950px;
cursor:url(https://media.tumblr.com/tumblr_lpyq1ipTIe1qcn2vb.gif);
progress !important;
font-family:Gudea;
font-size:13px;
color:#d9a7fc;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #d9a7fc;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #d9a7fc;}
::-webkit-scrollbar { width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff; }
::-webkit-scrollbar-thumb{border:1px solid #e8c9ff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
text-decoration:none;
padding:2px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:60% 70%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u {
text-decoration:underline;
border-bottom:1px solid #e8c9ff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
border-bottom:4px double #fff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
.post-title{text-align:left; border-bottom:1px solid #f4e8ff;}
.page-title{
font-family: 'Julius Sans One';
font-size:22px;
border-bottom:1px solid #f4e8ff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-data {
width:500px;
margin: 1em .3em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #e8c9ff;}
.comment-body p{
width:500px;
text-align:left;
margin:-1px 5px 2px -2.65em;
padding:4px;
border:1px solid #e8c9ff;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
padding:5px;
border-radius:0 20px 20px 0px ;
border:1px solid #e8c9ff;
box-shadow:inset 2px 0 2px #f8f2ff;
-webkit-transition: all 0.6s;}
blockquote:hover{
box-shadow:inset 800px 0 10px #f8f2ff;
-webkit-transition: all 0.6s;}
a.li {
border:1px solid #e8c9ff;
padding: 3px;
display:inline-block;
width:100px;
margin:2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #e8c9ff;
background: url(https://media.tumblr.com/tumblr_m8lz69z8XK1qb1380.gif) no-repeat bottom right;}
/* NAVIGATION
----------------------------------------------- */
#nav{position:fixed;width:64px;}
.bar{
font-family:Over The Rainbow;
font-size:28px;
margin-top:-60px;
margin-left:0px;
opacity:0;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav:hover .bar{
margin-left:70px;
opacity:1;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav2{position:fixed;width:64px;}
.bar2{
font-family:Over The Rainbow;
font-size:28px;
margin-top:-60px;
margin-left:0px;
opacity:0;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav2:hover .bar2{
margin-left:-75px;
opacity:1;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
a.navii1 , a.navii2 , a.navii3 , a.navii4 , a.navii5 , a.navii6 , a.navii7{
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;}
/* Pages
----------------------------------------------- */
.back {
background:#f7ebff;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
opacity:0.5;}
.other, .me, .links, .stuff , .post {
position:fixed;
top:160px;
left:25%;
right:25%;
width:600px;
background:#fff;
padding:10px;
border:4px double #e4bdff;
-moz-border-radius: 20px;
-moz-box-shadow: 0 1px 8px #efd6ff;
-webkit-box-shadow: 0 1px 8px #efd6ff;
z-index:101;
display:none;}
a.otherclose, a.meclose, a.linksclose, a.stuffclose , a.postclose {
float:right;
width:13px;
height:13px;
background:transparent url("https://i1245.photobucket.com/albums/gg581/elaine960211/close-p_zps38c4a64e.png") repeat top left;
margin-top:-5px;
margin-right:-5px;
border:none !important;}
.content {
width:580px;
height:350px;
overflow:auto;
padding:10px;}
/* ImgHover
----------------------------------------------- */
.imgh-full {
width: 250px;
height: 250px;
border-radius:50%;
border: 1px solid #cb9cf7;
box-shadow: inset 0 0 0 0 #f8f2ff ,inset 0 0 0 4px #fff;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;}
.imgh-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh95fFoL2YMOosJ-5hjHAIChOZGhTHtQNJU-R549Lq0yBDG4EOqpJEUHLSbFriG6HvohkJ4zVTBVU2wNArk8wI67DO9KasYRJ9TjzSaJBl2jwWVXKDnv_X8RcnyIIheOkBbhwuS35xR7VF/s1600/cafe-p.jpg);
background-size:250px;}
.imgh-info {
background:rgba(255,255,255,0.7);
font-size:13px;
position: fixed;
width: 250px;
height: 250px;
opacity: 0;
border-radius:50%;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);}
.imgh-full:hover {
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.7), inset 0 0 0 4px #f8f2ff;}
.imgh-full:hover .imgh-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<!-------------------POP----------------------->
<script type="text/javascript" src="https://yoursweetestlullaby.webs.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navii1').click(function(){
$('#back').fadeIn('fast',function(){
$('#post').fadeIn(750);
});
});
$('#postclose').click(function(){
$('#post').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii2').click(function(){
$('#back').fadeIn('fast',function(){
$('#me').fadeIn(750);
});
});
$('#meclose').click(function(){
$('#me').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii3').click(function(){
$('#back').fadeIn('fast',function(){
$('#links').fadeIn(750);
});
});
$('#linksclose').click(function(){
$('#links').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii4').click(function(){
$('#back').fadeIn('fast',function(){
$('#stuff').fadeIn(750);
});
});
$('#stuffclose').click(function(){
$('#stuff').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii5').click(function(){
$('#back').fadeIn('fast',function(){
$('#other').fadeIn(750);
});
});
$('#otherclose').click(function(){
$('#other').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<!-------------------Navi----------------------->
<div id="nav" style="top:170px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWpYJSeuejYDDtJwXHvGd4u_36vQ27Pj-CBa_SUogs27rNhKIBgnylLX4YWQwkAEg_Tw-2OjrA3tCNU85t-uD-RLfoRF0xQir7PFU_KCVvB3x8vHpMt5w2BiatUia3q28wX-sT_8Sx1O9B/s1600/ad-canape_64.png"width="64" height="64"/>
<div class="bar"><a class="navii1" id="navii1">Post</a></div>
</div>
<div id="nav2" style="top:220px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFcxDWfqNs45uP3wV-X99Ab9cIT1iXOtaToTt35iHZUCAS1s-pLKWlbaQHYV8XZtXwYpC0xb-es7-BiHQ_YMU1YUGUGMY-w58Jij8jdUWOyfHqvzlj7PfiyPJM57KoIXN90GKwT5i3K7-/s1600/ad-coffee_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii2" id="navii2">Owner</a></div>
</div>
<div id="nav" style="top:270px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefcCYZhJISTYNWQtEp7a7ZMjTKI58ir4e3xMZhhNXJgbrsFonAey6s65lADpGD_up9QEQD7yTXvp32gFTHWsDezWoPpr9DIibhVQtvbHuzoCYdN8vZjpryzz3987arnsDRyBuUcAgP4U_/s1600/ad-donut_64.png"width="64" height="64"/>
<div class="bar"><a class="navii3" id="navii3">Links</a></div>
</div>
<div id="nav2" style="top:320px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAnRDzs9-HN8f4qujYH0mVTNrln3tuCNoIsZDsvqiEK7dGQFE-TWrcinO0ZY8KuyYCd3uPuNE7gmYMNQFDJ-yUh3B0wHBfrxn1dcq8jZ0cYwC_rg8GwurOXkorjWsAs9wPQcjYp7hsF69/s1600/ad-tea_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii4" id="navii4">Stuff</a></div>
</div>
<div id="nav" style="top:370px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PaVzt3bgCtUiriaTxoSLdrSbbmadGpv9a-fWrSaH-uGqUj0gjmv7n1r18kfWV1Olq_h5EjF50QhS6ttI1-bDKAlhogQruxoIpCHaxmRkmDS-ZWNLhgFqvyuIsxiNRXke6REKG-j-JBzN/s1600/ad-pudding_64.png"width="64" height="64"/>
<div class="bar"><a class="navii5" id="navii5">Other</a></div>
</div>
<div id="nav2" style="top:420px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkT0R4MJcAPs5DOz8gtW47C_zjQQhLYLg8N-C0LfzZVsXuwQooYCTf4Bp7zhpbbVljTjfdy7sK5kxC8dDEyTZHrnL-Z8a5jg6-qmwqPbHjLJ2er_a7ZRlJ1pQwUF0K8N-yZPTpYB6qwpk/s1600/ad-matcharoll_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii6" href="https://www.blogger.com/follow-blog.g?blogID=Yr Blog ID">Follow</a></div>
</div>
<div id="nav" style="top:470px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhtaRrwLhqsxFeMtpsM-Mm76OyiZ1AhnFKmA4o9buM4r7fKrw-d3q8xkjom-O6TCgUuZB6yt0ASkLPNNi4SNSP11WzVw9YxJpsYHZL5VOK9lWz5xA1VKxX-ysn5ofl06x7b7FS6EDaSW2y/s1600/ad-waffle_64.png"width="64" height="64"/>
<div class="bar"><a class="navii7" href="https://www.blogger.com/">Home</a></div>
</div>
<!-------------------IMG----------------------->
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/menu_zps5d72ca20.png" style="position:fixed;top:30px; left:40px;">
<div style="position:fixed; top:50px;left:390px; background:#fff; padding:2px; border-radius:50%; border:1px solid #cb9cf7;">
<div class="imgh-full imgh-img-1"><div class="imgh-info">
<center>
<br><br><br>
Your Text Here
<br><br> MISIC PLAYER</center>
</div></div></div>
<!-------------------Post----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="post" id="post">
<a class="postclose" id="postclose"></a>
<div id="content" class="content">
<blogger>
<div class="post-title"> ▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
Date : <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> # <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Coffee(s)</a></BlogItemCommentsEnabled>
<div class="post-body"><p><$BlogItemBody$></p></div>
<ItemPage>
<div style='background:#fff; border:3px ridge #eddbff; padding:3px;'>
<div style='background:#fff;border:1px dashed #eddbff;padding:6px;'>
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$></dd>
</BlogItemComments><br/>
<$CommentPager$></dl>
<p class="comment-timestamp"><$BlogItemCreate$></p>
</div></div>
</ItemPage>
</Blogger>
<center><br>
<NewerPosts><a href=<$NewerPosts$>> ← Newer Post</a></NewerPosts> • <OlderPosts><a href=<$OlderPosts$>> Older Post → </a></OlderPosts></center>
</Blogger>
</div></div></div>
<!-------------------PAGE1----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="other" id="other">
<a class="otherclose" id="otherclose"></a>
<div id="content" class="content">
<div class="page-title"> Credit</div>
<br> • Template Design by : <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="YOUR LINK">Yr Name</a>
<br> • Tutorials For : <a href="https://angelbii.blogspot.com/">Bii Babey</a> & <a href="https://yoursweetestlullaby.blogspot.com//">Lullaby</a>
<br> • Materials For : <a href="https://pixel-dreams.tumblr.com/">Pixel Dream</a> & <a href="https://cafewarabimochi.doorblog.jp/">Natcham</a>
<br> • Best Viewed In <a href="https://www.google.com/chrome">Google Chrome</a>
<br><br>
<div class="page-title"> Chit-Chat</div><br>
<center>
<div id="cboxdiv">
<div style=" -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow:0 0 5px #f8f0ff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmWTFM08fFsgzz4N8f-kmHtCJZ_YbDQxpUvsL5CMUQ1b6aZZ-nWv5ABSmeVUxfbuB5yCUwmfE7EpM2mZnbHVUnw1WiyPTqHALv9QWXhnbg0WVXgK6_mkcbpZarGdHoVxBtuEtju9e7Uw/s1600/pur1.jpg) no-repeat bottom;border: 1px solid #e8c9ff; padding: 5px; width: 212px;">
<div style="width: 209px; border: solid 1px #e8c9ff; background:#fff; opacity: 0.8; border-radius:8px;">
<div><iframe frameborder="0" width="209" height="0" src="Cbox Main Code" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border-radius:8px;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="209" height="64" src="Cbox Form Code" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border-radius:8px;" id="cboxform"></iframe></div>
</div></div></div></center>
</div></div>
<!-------------------PAGE2----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="me" id="me">
<a class="meclose" id="meclose"></a>
<div id="content" class="content">
<div class="page-title"> Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div></div>
<!-------------------PAGE3----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="links" id="links">
<a class="linksclose" id="linksclose"></a>
<div id="content" class="content">
<div class="page-title"> Blogger Buddy</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
</div></div>
<!-------------------PAGE4----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="stuff" id="stuff">
<a class="stuffclose" id="stuffclose"></a>
<div id="content" class="content">
<div class="page-title"> Stuff </div>
<br><b> Tutorial ; </b><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br>
<b> Material ;</b><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div></div>
<!-------------------------- END ----------->
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>Purple Café</title>
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(https://i.imgur.com/wTxBtlk.jpg) no-repeat bottom right;
background-size:950px;
cursor:url(https://media.tumblr.com/tumblr_lpyq1ipTIe1qcn2vb.gif);
progress !important;
font-family:Gudea;
font-size:13px;
color:#d9a7fc;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #d9a7fc;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #d9a7fc;}
::-webkit-scrollbar { width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff; }
::-webkit-scrollbar-thumb{border:1px solid #e8c9ff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
text-decoration:none;
padding:2px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:60% 70%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u {
text-decoration:underline;
border-bottom:1px solid #e8c9ff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
border-bottom:4px double #fff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
.post-title{text-align:left; border-bottom:1px solid #f4e8ff;}
.page-title{
font-family: 'Julius Sans One';
font-size:22px;
border-bottom:1px solid #f4e8ff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-data {
width:500px;
margin: 1em .3em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #e8c9ff;}
.comment-body p{
width:500px;
text-align:left;
margin:-1px 5px 2px -2.65em;
padding:4px;
border:1px solid #e8c9ff;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
padding:5px;
border-radius:0 20px 20px 0px ;
border:1px solid #e8c9ff;
box-shadow:inset 2px 0 2px #f8f2ff;
-webkit-transition: all 0.6s;}
blockquote:hover{
box-shadow:inset 800px 0 10px #f8f2ff;
-webkit-transition: all 0.6s;}
a.li {
border:1px solid #e8c9ff;
padding: 3px;
display:inline-block;
width:100px;
margin:2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #e8c9ff;
background: url(https://media.tumblr.com/tumblr_m8lz69z8XK1qb1380.gif) no-repeat bottom right;}
/* NAVIGATION
----------------------------------------------- */
#nav{position:fixed;width:64px;}
.bar{
font-family:Over The Rainbow;
font-size:28px;
margin-top:-60px;
margin-left:0px;
opacity:0;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav:hover .bar{
margin-left:70px;
opacity:1;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav2{position:fixed;width:64px;}
.bar2{
font-family:Over The Rainbow;
font-size:28px;
margin-top:-60px;
margin-left:0px;
opacity:0;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
#nav2:hover .bar2{
margin-left:-75px;
opacity:1;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;}
a.navii1 , a.navii2 , a.navii3 , a.navii4 , a.navii5 , a.navii6 , a.navii7{
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cut_zps6190a9ec.jpg);
background-position:50% 20%;}
/* Pages
----------------------------------------------- */
.back {
background:#f7ebff;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
opacity:0.5;}
.other, .me, .links, .stuff , .post {
position:fixed;
top:160px;
left:25%;
right:25%;
width:600px;
background:#fff;
padding:10px;
border:4px double #e4bdff;
-moz-border-radius: 20px;
-moz-box-shadow: 0 1px 8px #efd6ff;
-webkit-box-shadow: 0 1px 8px #efd6ff;
z-index:101;
display:none;}
a.otherclose, a.meclose, a.linksclose, a.stuffclose , a.postclose {
float:right;
width:13px;
height:13px;
background:transparent url("https://i1245.photobucket.com/albums/gg581/elaine960211/close-p_zps38c4a64e.png") repeat top left;
margin-top:-5px;
margin-right:-5px;
border:none !important;}
.content {
width:580px;
height:350px;
overflow:auto;
padding:10px;}
/* ImgHover
----------------------------------------------- */
.imgh-full {
width: 250px;
height: 250px;
border-radius:50%;
border: 1px solid #cb9cf7;
box-shadow: inset 0 0 0 0 #f8f2ff ,inset 0 0 0 4px #fff;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;}
.imgh-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh95fFoL2YMOosJ-5hjHAIChOZGhTHtQNJU-R549Lq0yBDG4EOqpJEUHLSbFriG6HvohkJ4zVTBVU2wNArk8wI67DO9KasYRJ9TjzSaJBl2jwWVXKDnv_X8RcnyIIheOkBbhwuS35xR7VF/s1600/cafe-p.jpg);
background-size:250px;}
.imgh-info {
background:rgba(255,255,255,0.7);
font-size:13px;
position: fixed;
width: 250px;
height: 250px;
opacity: 0;
border-radius:50%;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);}
.imgh-full:hover {
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.7), inset 0 0 0 4px #f8f2ff;}
.imgh-full:hover .imgh-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<!-------------------POP----------------------->
<script type="text/javascript" src="https://yoursweetestlullaby.webs.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navii1').click(function(){
$('#back').fadeIn('fast',function(){
$('#post').fadeIn(750);
});
});
$('#postclose').click(function(){
$('#post').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii2').click(function(){
$('#back').fadeIn('fast',function(){
$('#me').fadeIn(750);
});
});
$('#meclose').click(function(){
$('#me').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii3').click(function(){
$('#back').fadeIn('fast',function(){
$('#links').fadeIn(750);
});
});
$('#linksclose').click(function(){
$('#links').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii4').click(function(){
$('#back').fadeIn('fast',function(){
$('#stuff').fadeIn(750);
});
});
$('#stuffclose').click(function(){
$('#stuff').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript">
$(function() {
$('#navii5').click(function(){
$('#back').fadeIn('fast',function(){
$('#other').fadeIn(750);
});
});
$('#otherclose').click(function(){
$('#other').fadeOut(750,function(){
$('#back').fadeOut('fast');
});
});
});
</script>
<!-------------------Navi----------------------->
<div id="nav" style="top:170px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWpYJSeuejYDDtJwXHvGd4u_36vQ27Pj-CBa_SUogs27rNhKIBgnylLX4YWQwkAEg_Tw-2OjrA3tCNU85t-uD-RLfoRF0xQir7PFU_KCVvB3x8vHpMt5w2BiatUia3q28wX-sT_8Sx1O9B/s1600/ad-canape_64.png"width="64" height="64"/>
<div class="bar"><a class="navii1" id="navii1">Post</a></div>
</div>
<div id="nav2" style="top:220px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFcxDWfqNs45uP3wV-X99Ab9cIT1iXOtaToTt35iHZUCAS1s-pLKWlbaQHYV8XZtXwYpC0xb-es7-BiHQ_YMU1YUGUGMY-w58Jij8jdUWOyfHqvzlj7PfiyPJM57KoIXN90GKwT5i3K7-/s1600/ad-coffee_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii2" id="navii2">Owner</a></div>
</div>
<div id="nav" style="top:270px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefcCYZhJISTYNWQtEp7a7ZMjTKI58ir4e3xMZhhNXJgbrsFonAey6s65lADpGD_up9QEQD7yTXvp32gFTHWsDezWoPpr9DIibhVQtvbHuzoCYdN8vZjpryzz3987arnsDRyBuUcAgP4U_/s1600/ad-donut_64.png"width="64" height="64"/>
<div class="bar"><a class="navii3" id="navii3">Links</a></div>
</div>
<div id="nav2" style="top:320px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAnRDzs9-HN8f4qujYH0mVTNrln3tuCNoIsZDsvqiEK7dGQFE-TWrcinO0ZY8KuyYCd3uPuNE7gmYMNQFDJ-yUh3B0wHBfrxn1dcq8jZ0cYwC_rg8GwurOXkorjWsAs9wPQcjYp7hsF69/s1600/ad-tea_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii4" id="navii4">Stuff</a></div>
</div>
<div id="nav" style="top:370px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PaVzt3bgCtUiriaTxoSLdrSbbmadGpv9a-fWrSaH-uGqUj0gjmv7n1r18kfWV1Olq_h5EjF50QhS6ttI1-bDKAlhogQruxoIpCHaxmRkmDS-ZWNLhgFqvyuIsxiNRXke6REKG-j-JBzN/s1600/ad-pudding_64.png"width="64" height="64"/>
<div class="bar"><a class="navii5" id="navii5">Other</a></div>
</div>
<div id="nav2" style="top:420px;left:190px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkT0R4MJcAPs5DOz8gtW47C_zjQQhLYLg8N-C0LfzZVsXuwQooYCTf4Bp7zhpbbVljTjfdy7sK5kxC8dDEyTZHrnL-Z8a5jg6-qmwqPbHjLJ2er_a7ZRlJ1pQwUF0K8N-yZPTpYB6qwpk/s1600/ad-matcharoll_64.png"width="64" height="64"/>
<div class="bar2"><a class="navii6" href="https://www.blogger.com/follow-blog.g?blogID=Yr Blog ID">Follow</a></div>
</div>
<div id="nav" style="top:470px;left:60px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhtaRrwLhqsxFeMtpsM-Mm76OyiZ1AhnFKmA4o9buM4r7fKrw-d3q8xkjom-O6TCgUuZB6yt0ASkLPNNi4SNSP11WzVw9YxJpsYHZL5VOK9lWz5xA1VKxX-ysn5ofl06x7b7FS6EDaSW2y/s1600/ad-waffle_64.png"width="64" height="64"/>
<div class="bar"><a class="navii7" href="https://www.blogger.com/">Home</a></div>
</div>
<!-------------------IMG----------------------->
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/menu_zps5d72ca20.png" style="position:fixed;top:30px; left:40px;">
<div style="position:fixed; top:50px;left:390px; background:#fff; padding:2px; border-radius:50%; border:1px solid #cb9cf7;">
<div class="imgh-full imgh-img-1"><div class="imgh-info">
<center>
<br><br><br>
Your Text Here
<br><br> MISIC PLAYER</center>
</div></div></div>
<!-------------------Post----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="post" id="post">
<a class="postclose" id="postclose"></a>
<div id="content" class="content">
<blogger>
<div class="post-title"> ▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
Date : <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> # <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Coffee(s)</a></BlogItemCommentsEnabled>
<div class="post-body"><p><$BlogItemBody$></p></div>
<ItemPage>
<div style='background:#fff; border:3px ridge #eddbff; padding:3px;'>
<div style='background:#fff;border:1px dashed #eddbff;padding:6px;'>
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$></dd>
</BlogItemComments><br/>
<$CommentPager$></dl>
<p class="comment-timestamp"><$BlogItemCreate$></p>
</div></div>
</ItemPage>
</Blogger>
<center><br>
<NewerPosts><a href=<$NewerPosts$>> ← Newer Post</a></NewerPosts> • <OlderPosts><a href=<$OlderPosts$>> Older Post → </a></OlderPosts></center>
</Blogger>
</div></div></div>
<!-------------------PAGE1----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="other" id="other">
<a class="otherclose" id="otherclose"></a>
<div id="content" class="content">
<div class="page-title"> Credit</div>
<br> • Template Design by : <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="YOUR LINK">Yr Name</a>
<br> • Tutorials For : <a href="https://angelbii.blogspot.com/">Bii Babey</a> & <a href="https://yoursweetestlullaby.blogspot.com//">Lullaby</a>
<br> • Materials For : <a href="https://pixel-dreams.tumblr.com/">Pixel Dream</a> & <a href="https://cafewarabimochi.doorblog.jp/">Natcham</a>
<br> • Best Viewed In <a href="https://www.google.com/chrome">Google Chrome</a>
<br><br>
<div class="page-title"> Chit-Chat</div><br>
<center>
<div id="cboxdiv">
<div style=" -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow:0 0 5px #f8f0ff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmWTFM08fFsgzz4N8f-kmHtCJZ_YbDQxpUvsL5CMUQ1b6aZZ-nWv5ABSmeVUxfbuB5yCUwmfE7EpM2mZnbHVUnw1WiyPTqHALv9QWXhnbg0WVXgK6_mkcbpZarGdHoVxBtuEtju9e7Uw/s1600/pur1.jpg) no-repeat bottom;border: 1px solid #e8c9ff; padding: 5px; width: 212px;">
<div style="width: 209px; border: solid 1px #e8c9ff; background:#fff; opacity: 0.8; border-radius:8px;">
<div><iframe frameborder="0" width="209" height="0" src="Cbox Main Code" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border-radius:8px;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="209" height="64" src="Cbox Form Code" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border-radius:8px;" id="cboxform"></iframe></div>
</div></div></div></center>
</div></div>
<!-------------------PAGE2----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="me" id="me">
<a class="meclose" id="meclose"></a>
<div id="content" class="content">
<div class="page-title"> Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div></div>
<!-------------------PAGE3----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="links" id="links">
<a class="linksclose" id="linksclose"></a>
<div id="content" class="content">
<div class="page-title"> Blogger Buddy</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
</div></div>
<!-------------------PAGE4----------------------->
<div class="back" id="back" style="display:none;"></div>
<div class="stuff" id="stuff">
<a class="stuffclose" id="stuffclose"></a>
<div id="content" class="content">
<div class="page-title"> Stuff </div>
<br><b> Tutorial ; </b><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br>
<b> Material ;</b><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div></div>
<!-------------------------- END ----------->