cotton candy

FRIENDS_WEBSITE<=
<div id="sidebar">
<form><input type="checkbox" id="dropdown"><label for="dropdown"><font style="font-size:10px;"><i class="fa fa-cloud"></i></font></label><span class="drop">
<a href="">customs</a>
<a href="/">entries</a>
<a href="">scenes</a>
<a href="">ooc</a>
</span></form></div>

<div id="icon">
<a href="/profile"><img src="https://78.media.tumblr.com/cc0ec32621c043ca103947b1b61d0181/tumblr_mt9nanMTzS1s7v9qwo8_250.gif" style="display: block; visibility: visible; width:60px; height: 60px; border-radius: 100px; box-shadow: 1px 1px 3px #1d1d1d;"></a>
</div>

<div id="top"><font class="name">namefield</font></div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" class="comments">%%readlink%% <a href="%%urlpost%%">▲</a></td></tr>

LASTN_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" class="comments">%%readlink%% <a href="%%urlpost%%">▲</a></td></tr>

GLOBAL_HEAD<=
<title></title>
<link rel="shortcut icon" href="">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fontcity.neocities.org/mellonydry.css?family=mellony+dry">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<style>

/* layout by tentacool with sidebar coding by tessisamess/from lupe - feel free to reach out for assistance
   you do not need to rehost any of my fonts unless you choose to */

/* background */
body {
background: url(https://i.imgur.com/fnRC48c.png), url(https://i.imgur.com/J1whj3n.jpg);
background-attachment: fixed;
height: 100%;
margin-top: 2px;
}

/* entrybox */
.entrybox, .shadowed { background-color: rgba(255,255,255,.7);}

/* mood & music - to hide change display:visible to display:none */
.entrybox td.meta {display: visible; font-family: roboto; font-size:7px; line-height:9px; text-transform: uppercase; color:#777}

/* time & date - to hide change display:visible to display:none */
.entrybox td.index {display:visible; font-family: roboto; font-size:7px; line-height:9px; text-transform: uppercase; color:#777}

/* removes namefield and header */
.shadowed td div {visibility:hidden; position:absolute; top:0px; margin-top: 20px;}
.shadowed {padding: 22px;}

/* hides top left name */
td.caption {font-size:0px; line-height:0px;}

/* upper right links  */
.date, a.index {display:visible !important;} table table tr.caption td.index{visibility: hidden;}

/* cursor */
body, a {cursor:url(https://i.imgur.com/h2zNor5.png), default;}
a:hover {cursor:url(https://i.imgur.com/6GAtOYA.png), default;}

/* default font */
td{font-family:; line-height:11px; letter-spacing:0px; font-size: 10px;}
tr{text-align:justify;}

/*friends page icons*/
.index img {border-radius:50px; height:50px; width:50px; padding: 4; margin-bottom:5px; background-color: #A0DAFA;}
.index {text-transform:uppercase;font-family: roboto; font-size:5pt; text-transformation: uppercase; text-shadow:none; letter-spacing: 1px; line-height:5px;}
.entrybox a.index font {color: #777;}
td{background-color:transparent;}

/*hides userpic info brackets */
.entrybox table table table td[align=center]{color:transparent;text-align:center;font-size:0;}
table table table table .meta {line-height: 5px; visibility: hidden;}

/* earlier/later */
.meta {font-family: roboto; font-size: 7px; text-transform: uppercase; line-height: 0px; padding: 0px; letter-spacing: 1px;}

/* hides viewing & navigation */
.meta {color: transparent}
.index {color: transparent}

/* subject */
p table table td.caption{letter-spacing: 1; color:#777; font-size: 8px; font-family: roboto; text-transform: uppercase; font-weight: 500; line-height: 8px;}

/* comments */
.comments {color:#777; letter-spacing: 1; text-transform: uppercase; font-size: 8px; font-family: roboto;}

 /* locks */
.caption img{width: 7px;height: 7px; opacity:0.8;}
.ljuser img {display: none;}
.ljuser:before {content: "★";}

/* hides icon in layout - needed for gif to replace */
.shadowed img {display: none;}

/* link effects. */
a {color: #81cff9; text-decoration: none; transition: all 0.6s ease-in-out; -o-transition-transition:  all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;}
a:hover {text-decoration: none; color: transparent; transition: all 0.6s ease-in-out; -o-transition-transition:  all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;}

/* highlighted text */
::selection {background-color: #A0DAFA; color: #fff;}
::-moz-selection {background-color: #A0DAFA; color: #fff;}
::-webkit-selection {background-color: #A0DAFA; color: #fff;}


/* ~ tessisamess sidebar codes taken from lupe */
#sidebar{visibility:visible; position: absolute; width:120px; top:-2px; left:50%; margin-left: 270px; text-align:center; z-index:99999;}
#sidebar img{display:inline; max-width:100%;}
#sidebar-inner{display:block; margin:10px 30px;}
input[type=checkbox]{display:none;}

label{display:block; margin:0 30px; cursor:pointer; background: ; border:none; border-bottom:none!important; padding:2px 4px; text-align:left; -webkit-border-radius:4px; border-radius:5px;}
label i{ font-style:normal; display:block;}

/* drop menu text */
.drop{display:block; margin: 4px 30px; background: url(https://i.imgur.com/wX5DwNI.png); max-height:0; overflow:hidden; text-align:left; color:#aaaaaa;  font-family: roboto; font-size: 6px; line-height: 7px; letter-spacing:1px; text-transform:uppercase; letter-spacing:1px; box-shadow:0 0 1px #dddddd;
-webkit-border-radius: 5px 5px 5px 5px; border-radius:0px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;}

input[type=checkbox]:checked ~ label{-webkit-border-radius:5px 5px 5px 5px;; border-radius:5px 5px 5px 5px;}
input[type=checkbox]:checked ~ .drop{ max-height:400px;}

/* drop menu text color and background color */
.drop a{display:block; color: #aaaaaa; padding:3px 4px;}
.drop a:hover{ background:#A0DAFA; color:#fff;}

/* namefield replacement font and icon placement - you may have to adjust the margin-left for the icon if your namefield is long */
#top {position: absolute; visibility: visible; top:15px; margin-left: -180px; z-index:1; text-align:justify; width:600px;}
.name {font-family: mellony dry; display: block; color: #A0DAFA; font-size: 32px; letter-spacing: 0px; line-height: 30px; text-align: center; text-shadow: 2px 1px 0px #ffffff, 3px 2px 2px #aaaaaa; text-transform: lowercase;}
#icon {position: absolute; margin-left: -25px; top: 1px; visibility: visible; z-index: 2;}

</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" class="comments">%%readlink%% <a href="%%urlpost%%">▲</a></td></tr>

LASTN_OPT_ITEMS=>3

LASTN_TALK_READLINK=><a href="%%urlread%%">%%messagecount%%</a>

FRIENDS_TALK_READLINK=><a href="%%urlread%%">%%messagecount%%</a>

LASTN_WEBSITE<=
<div id="sidebar">
<form><input type="checkbox" id="dropdown"><label for="dropdown"><font style="font-size:10px;"><i class="fa fa-cloud"></i></font></label><span class="drop">
<a href="">customs</a>
<a href="/friends">friends</a>
<a href="">scenes</a>
<a href="">ooc</a>
</span></form></div>

<div id="icon">
<a href="/profile"><img src="https://78.media.tumblr.com/cc0ec32621c043ca103947b1b61d0181/tumblr_mt9nanMTzS1s7v9qwo8_250.gif" style="display: block; visibility: visible; width:60px; height: 60px; border-radius: 100px; box-shadow: 1px 1px 3px #1d1d1d;"></a>
</div>

<div id="top"><font class="name">namefield</font></div>
<=LASTN_WEBSITE

DAY_TALK_READLINK=><a href="%%urlread%%">%%messagecount%%</a>