Codes Pastel Lo








<html>
<head>
<base target='_blank'/>
<link href='http://media.tumblr.com/ac421473033060c5012c5b1fab64611e/tumblr_inline_mueomcVciW1qdlkyg.gif' rel='icon' type='image/x-icon'/>
<title>Pastel Lo</title>
<style>
@font-face {
    font-family: "derp";
    src: url('http://static.tumblr.com/bepad33/6M6m295eu/delius-regular.ttf');
}

#navbar-iframe {
    display: none;
}

body {
    font-family: derp;
    font-size: 12px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwxBo8S2NscHHsbz3-PN-scvR6UU3BxBm5nQmqKWJaKjV9zqdWZopEluoyFpHUmOjDnxM1lIoi_cGVTxWD6FhkVl-TJyVmaDy_kWx3fLc4bPLYeWji964lOj-M6WOown9C23dPmht9XtI/s1600/backpink.png') repeat fixed;
}

img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease-in-out;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/338/338116.png);
}

.blogger-labels {
    color: transparent;
    font-family: everday;
    text-shadow: 0px 0px 1px transparent;
    font-size: 1px!important;
    padding: 3px 6px;
    float: right;
    margin-right: -15px;
    margin-left: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
    display: inline-block;
}

.blogger-labels a {
    color: transparent!important;
}

#caixa {
    position: absolute;
    z-index: 1;
    top: 100px;
    left: 55px;
    letter-spacing: 0px;
    text-align: justify;
    color: #555;
    font-size: 12px;
    font-family: trebuchet ms;
    background-image: url(http://i.imgur.com/EizPJb3.png);
    line-height: 15px;
    padding: 15px;
    margin-bottom: 20px!important;
    border: 1px solid #eee;
}

#page {
    width: 610px;
    margin-top: 100px;
    margin-left: 50px;
}

#scroller-header a {
    width: 100px;
    height: 100px;
    font-family: derp;
    font-size: 12px;
    text-decoration: none;
    color: transparent;
    padding: 2px;
    background: transparent;
    float: center;
}

#scroller-header a:hover {
    text-decoration: none;
    color: #000;
}

a.selected {
    text-decoration: none!important;
    color: #F7F4AD!important;
}

#scroller-header {
    height: 15px;
    padding: 10px;
    font-weight: 700;
    margin: 1px;
    float: center;
}

#scroller-body {
    background: #fff no-repeat bottom center;
    padding-bottom: 30px;
}

#mask {
    padding: 20px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1VyZkvlc3splYhI7YHXuRI2NmbqZ7KAggfJ29NwfdyOVq_7LPFuwZn1NC8en09-_nkO0itvO8Pa2clR4nhHgSM8S48NaHQA9jvIReSHLDfedhgpOhgzbfppgip-9h0NrJuOKH-ZUmWE/s1600/red.png);
    width: 565px;
    overflow: hidden;
}

#mask img {
    border: 1px dashed #aaa;
    max-width: 500px;
}

.h11 {
    height: 10px;
    width: 520px!important;
    background: #EED188;
    margin-top: 45px;
    padding: 5px;
    font-family: everyday;
    font-size: 10px;
    text-align: left;
    color: #000;
    margin-bottom: 40px;
    margin-left: 10px;
    border-radius: 15px 15px 15px 15px;
}

.h11 a {
    color: #000!important;
}

.icon {
    float: right;
    border: 1px dashed #ccc!important;
    width: 70px!important;
    padding: 10px;
    margin-top: -50px;
    background: #FFFDBD;
    margin-right: -10px;
    border-radius: 70px;
}

.icon img {
    border-radius: 70px;
    border: none!important;
}

.icon2 {
    float: left;
    border: 1px dashed #ccc!important;
    margin-left: -20px!important;
    padding: 10px;
    margin-top: -50px;
    background: #FFFDBD;
    width: 70px!important;
    border-radius: 70px;
}

.icon2 img {
    border-radius: 70px;
    border: none!important;
}

.icon3 {
    margin-top: -30px!important;
    display: block!important;
    margin: 10px!important;
    width: 150px!important;
    height: 150px!important;
    padding: 10px!important;
    border: 1px dashed #ccc!important;
    background: #FFFDBD!important;
    border-radius: 10px!important;
}

.icon3 img {
    display: block!important;
    width: 150px!important;
    height: 150px!important;
    border-radius: 10px!important;
}

.com2 {
    border-radius: 15px 15px 0px 0px;
    margin-top: -42px;
    padding: 5px;
    height: 12px;
    overflow: hidden;
    font-family: everyday;
    font-size: 10px;
    color: #000;
    background: #FFCCFF;
    width: 160px!important;
    margin-left: 80px;
    margin-bottom: 10px;
    text-align: center;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

.com2 a {
    color: #fff;
}

.com2:hover {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    color: #000;
}

.com3 {
    border-radius: 15px 15px 0px 0px;
    margin-top: -30px!important;
    height: 10px;
    font-family: everyday;
    font-size: 10px;
    color: #000;
    background: #CCCCFF;
    margin-left: 260px;
    width: 160px!important;
    margin-top: -11px;
    margin-bottom: 10px;
    overflow: hidden!important;
    padding: 5px;
    text-align: center;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

.com3 a {
    color: #fff;
}

.com3:hover {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    color: #000;
}

.com4 {
    z-index: 1111;
    border: 1px Dashed #FFC48C;
    text-transform: uppercase;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 380px!important;
    height: 70px;
    font-family: everyday;
    font-size: 10px;
    color: #000;
    background: #FDF2C5;
    left: 40px;
    width: 20px!important;
    margin-top: -11px;
    margin-bottom: 10px;
    overflow: hidden!important;
    padding: 10px 10px 10px 10px;
    text-align: center;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

.com4 a {
    color: #fff;
}

.com4:hover {
    border: 1px solid #82BFA0;
    border-radius: 0px 10px 0px 10px;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    color: #000;
}

.com5 {
    z-index: 1111;
    border: 1px Dashed #FFC48C;
    text-transform: uppercase;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 380px!important;
    height: 70px;
    font-family: everyday;
    font-size: 10px;
    color: #000;
    background: #FDF2C5;
    left: 665px;
    width: 20px!important;
    margin-top: -11px;
    margin-bottom: 10px;
    overflow: hidden!important;
    padding: 10px 10px 10px 10px;
    text-align: center;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

.com5 a {
    color: #fff;
}

.com5:hover {
    border: 1px solid #82BFA0;
    border-radius: 10px 0px 10px 0px;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    color: #000;
}

a:link,a:visited {
    cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRKyLKd_oVbjfhChBl3qcts_3WZFJeVh2UKMJIbXwlGbOVMsrvKTPdEpbo_pn09j8V0ylzHp8yR5__NhKoBu2ZxV-JFYUmzHQNo6UWbHZXH3qqnfl7bkT_cP2blL6iEVDdap5U5k1yF6N/s1600/crosshair5.png'), auto;
    color: #E1AD86;
    padding-bottom: 18px;
    text-decoration: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    border-bottom: 2px solid transparent;
}

a:link:hover,a:visited:hover {
    color: #CBA3FF;
    text-decoration: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
}

::-moz-selection {
    color: #FFF;
    BACKGROUND: #88C7F1;
}

::selection {
    color: #FFF;
    BACKGROUND: #88C7F1;
}

.tr-caption {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cqdhvc2LyBKlhVVDSZhft41xVU6X6qieokZBujsqP7_EKnVaqLKY3GW8NZKrwAioJ4naQspICwdPCs0H-N-E35DG4UA87SA9aJkphz2wcykNvwPwg8GBEX00rt_KhrMAZzYleW2Vkag/s1600/pinkk.png);
    width: 250px;
    border-right: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    border-left: 1px dashed #ccc;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease-in-out;
    padding: 1px;
    font-family: tinytots;
    font-size: 8px;
    letter-spacing: 2px;
}

@font-face {
    font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}

textarea.box {
    outline: none;
    margin-top: 10px;
    margin-left: 10px;
    margin-left: 20px;
    border-radius: 5px;
    -webkit-transition: all 0.5s ease-in-out !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    height: 150px!important;
    padding: 10px;
    -moz-transition: all 0.5s ease-in-out !important;
    -o-transition: all 0.5s ease-in-out !important;
    -ms-transition: all 0.5s ease-in-out !important;
    -moz-box-shadow: 0 0 3px pink;
    -webkit-box-shadow: 0 0 3px pink;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBoIvXXxZyDKuAniCg6faMgsdM2GOP_b83z7DgdE1S3nxYXIDZptRCocuF8jzpZygFTTYBWeo-GYyBpgn4KqSMHXiY2NgDB41zGHc8jQ-Da0K-vMgKAvFGi2U080bb9PRotvHxNHhP5i8/s1600/afiqahbg.gif);
    font-family: trebuchet ms;
    font-size: 11px;
    color: #777;
    box-shadow: 0 0 3px pink;
    border: 1px solid #eee;
    ;transition: all 0.5s ease-in-out !important;
    width: 480px!important;
}

blockquote {
    background: url(http://i.imgur.com/umXmURM.gif) #fff;
    background-repeat: repeat;
    border-radius: 15px;
    -webkit-user-select: text;
    -moz-user-select: text;
    border: 3px dotted #E48181;
    padding: 25px 15px;
    border-left: 1px dashed #E48181;
    color: #9C9C9C;
    box-shadow: inset 0px 0px 0px #FEA5A5,inset 0px 0px 0px #FAC3BA;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

blockquote:hover {
    box-shadow: inset 0px 14px 0px #E6E9FB,inset 0px -14px 0px #F6E1D1;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    color: #555;
}

#top33 {
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 0px;
    background: url(http://i.imgur.com/PQXLMaI.png);
    height: 50px;
    width: 100%;
    border-bottom: 10px solid #DFB2AC;
    -webkit-transition: All 0.4s ease;
    -moz-transition: All 0.4s ease;
    -o-transition: All 0.4s ease;
    font-family: 'DGYoung';
    font-size: 25px;
    color: #EB9A96;
    padding: 10px;
    z-index: 2222;
}

#top22 {
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 70px;
    left: 0px;
    background: url(http://i.imgur.com/cRUcXWk.png);
    height: 10px;
    width: 100%;
    z-index: 3333;
}

#top11 {
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 20px;
    left: 1200px;
    background: url(http://i.imgur.com/DJnpHce.png);
    width: 100%;
    z-index: 9999;
    border-radius: 1000px;
    width: 55px;
    height: 55px;
}

@font-face {
    font-family: DGYoung; src: url('http://dl.dropbox.com/u/41229264/JNa4rang/Layout%20Projects/Fonts/DGYoung.ttf');
}

.side {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 1000px;
    float: left;
    margin-top: 5px;
    margin-left: 25px;
    margin-bottom: 15px;
    margin: 20px;
}

.side {
    position: fixed;
    left: 1px;
    top: 1px;
    width: 100px;
    height: 100px;
    z-index: 5;
    border-radius: 1000px;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    opacity: 0.6;
    filter: alpha(opacity = 60);
    box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #BACBBE;
    -webkit-box-shadow: 0 0 5px #BACBBE;
    transform: scale(0.7,0.7);
    -ms-transform: scale(0.7,0.7);
    -moz-transform: scale(0.7,0.7);
    -webkit-transform: scale(0.7,0.7);
    transition: opacity 1s,
transform 1s ease-in-out 0.3s;
    -moz-transition: opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
    -webkit-transition: opacity 1s,-webkit-transform 1s ease-in-out 0.3s;
}

.side:hover {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    opacity: 1;
    filter: alpha(opacity = 100);
    transform: scale(1,1);
    -ms-transform: scale(0.9,0.9);
    -moz-transform: scale(0.9,0.9);
    -webkit-transform: scale(0.9,0.9);
}

.side figcaption {
    background: transparent;
    position: fixed;
    left: 15px;
    top: 15%;
    width: 60px;
    height: 60px;
    float: center;
    text-align: center;
    color: transparent;
    z-index: 4;
    padding: 4px;
    border-radius: 1000px;
    font-family: everyday;
    font-size: 11px;
    text-transform: uppercase;
    webkit-transition: 1.0s;
    -moz-transition: 1.0s;
}

.side:hover figcaption {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    background-color: #f7f7f7;
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffb370 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffb370 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffb370 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffb370 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffb370 100%)color:#fff;
    left: 15px;
}

.side .circle {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    position: fixed;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.side .out1 {
    top: -8px;
    left: -8px;
    width: 100px;
    height: 100px;
    z-index: 2;
    border: 8px solid;
    border-color: #FCE6A4;
    background-color: #f7f7f7;
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffeb3b 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffeb3b 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffeb3b 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffeb3b 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ffeb3b 100%);
    flter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FF9999',GradientType=1 );
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
    -moz-transition: -moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
    -webkit-transition: -webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,border-color 1.5s;
}

.side:hover .out1 {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-color: #E89696 #B26B6B #E89696 #B26B6B;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.side .out2 {
    top: -8px;
    left: -8px;
    width: 100px;
    height: 100px;
    z-index: 2;
    border: 8px solid;
    border-color: #FFB8B8;
    background-color: #f7f7f7;
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ff3d3d 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ff3d3d 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ff3d3d 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ff3d3d 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #ff3d3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FF9999',GradientType=1 );
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
    -moz-transition: -moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
    -webkit-transition: -webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,border-color 1.5s;
}

.side:hover .out2 {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-color: #E89696 #B26B6B #E89696 #B26B6B;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.side .out3 {
    top: -8px;
    left: -8px;
    width: 100px;
    height: 100px;
    z-index: 2;
    border: 8px solid;
    border-color: #DDE5FE;
    background-color: rgba(51, 171, 55, 0);
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, rgba(51, 171, 55, 0), rgba(0, 0, 255, 0.3) 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, rgba(51, 171, 55, 0), rgba(0, 0, 255, 0.3) 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, rgba(51, 171, 55, 0), rgba(0, 0, 255, 0.3) 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, rgba(51, 171, 55, 0), rgba(0, 0, 255, 0.3) 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, rgba(51, 171, 55, 0), rgba(0, 0, 255, 0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FF9999',GradientType=1 );
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
    -moz-transition: -moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
    -webkit-transition: -webkit-transform 1.8s ease-in-out,-webkit-box-shadow 1s ease-out,border-color 1.5s;
}

.side:hover .out3 {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-color: #E89696 #B26B6B #E89696 #B26B6B;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.side .out4 {
    top: -8px;
    left: -8px;
    width: 100px;
    height: 100px;
    z-index: 2;
    border: 8px solid;
    border-color: #BAF3C3;
    background-color: #f7f7f7;
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #57ff57 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #57ff57 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #57ff57 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #57ff57 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #57ff57 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FF9999',GradientType=1 );
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
    -moz-transition: -moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
    -webkit-transition: -webkit-transform 1.8s ease-in-out,-webkit-box-shadow 1s ease-out,border-color 1.5s;
}

.side:hover .out4 {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-color: #E89696 #B26B6B #E89696 #B26B6B;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.side .out5 {
    top: -8px;
    left: -8px;
    width: 100px;
    height: 100px;
    z-index: 2;
    border: 8px solid;
    border-color: #D9B2FF;
    background-color: #f7f7f7;
    background-image: -moz-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #b870ff 100%);
    background-image: -webkit-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #b870ff 100%);
    background-image: -o-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #b870ff 100%);
    background-image: -ms-radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #b870ff 100%);
    background-image: radial-gradient(50% 53%, ellipse closest-side, #f7f7f7, #b870ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FF9999',GradientType=1 );
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: transform 1.8s ease-in-out,box-shadow 1s ease-out,border-color 1.5s;
    -moz-transition: -moz-transform 1.8s ease-in-out,-moz-box-shadow 1s ease-out,border-color 1.5s;
    -webkit-transition: -webkit-transform 1.8s ease-in-out,-webkit-box-shadow 1s ease-out,border-color 1.5s;
}

.side:hover .out5 {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-color: #E89696 #B26B6B #E89696 #B26B6B;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

#lino1 {
    border-radius: 100px;
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 765px;
    background: #FCE6A4;
    height: 102px;
    width: 10px;
}

#lino2 {
    border-radius: 100px;
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 865px;
    background: #FFB8B8;
    height: 122px;
    width: 10px;
}

#lino3 {
    border-radius: 100px;
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 965px;
    background: #DDE5FE;
    height: 102px;
    width: 10px;
}

#lino4 {
    border-radius: 100px;
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 1065px;
    background: #BAF3C3;
    height: 112px;
    width: 10px;
}

#lino5 {
    border-radius: 100px;
    OVERFLOW: HIDDEN;
    position: fixed;
    top: 0px;
    left: 1165px;
    background: #D9B2FF;
    height: 102px;
    width: 10px;
}

.tut {
    color: #F75D59;
    text-align: center;
    margin-top: 10px;
    font: normal 25px "udamojiAl";
}

@font-face {
    font-family:udamojiAl;src:url('http://static.tumblr.com/eq1rpir/jHpm54b32/udamoji_al.ttf');
}

a.link3 {
    border: 1px solid #eee;
    text-transform: uppercase;
    background: #fff;
    overflow: hidden;
    width: 100px;
    margin: 5px;
    padding: 15px;
    color: #aaa;
    text-align: center;
    font: 8px 'tinytots';
    display: inline-block;
    -webkit-transition: 0.3s;
}

a.link3:hover {
    color: #333;
    box-shadow: inset 0px 10px 0px #BAF3C3,inset 0px -14px 0px #DDE5FE;
    border: 1px solid #D9B2FF;
    border-radius: 10px 0px 10px 0px;
    ; background: #FFADAD;
}

#nave111, #nave222, #nave333, #nave444 {
    width: 520px!important;
    padding: 5px;
    padding: 10px;
    border: 1px dashed pink;
    border-bottom: 5px dashed pink;
    overflow: hidden;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    text-decoration: none;
    display: block;
    margin: 8px;
}

#nave111:hover, #nave222:hover, #nave333:hover, #nave444:hover {
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    border-bottom: 1px dashed pink;
    border-top: 5px dashed pink;
}

#nave111 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7R64__lMrj4G1w4Dfg713hYppXDc54vvuP1TwpXgrfgWhFtOsol-3qN4Lp6QhLQ-FnbzPs0kjgH0wV05OaW8RIdruPMrqETv90ujuo90BPJ7oeWNgQ8YCbNpVFISvShn1YcVoisYKHk/s1600/tinypolkapink.png
);
}

#nave222 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9VCskq_pTUYSMJTRON7AnxlRp6KpTdUdtEn-UWFLneco4V-5-erHrE0NTIojlBGunVzm-vqOkfpe5fzNxXJxieE0QwoK2-2MzCGL3rYkmWPgl_4zSmLQjGTK8CcIa1YLGlslJdanv0o/s1600/tinypolkagrey.png
);
}

#nave333 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAKb8Gny6mpggk0PrP7AyxQ6kgmuijeaJ0DjhnrVCL56839t2gs-0FlyLCLFD8VCMGQVNOtwrvZ3nFPYVQqf6JOOnilZXWpQgAMsD_reyqeJYDfOsYXxH5s7SOIUzw7rvaGuM7HCRU5Q/s1600/tinypolkablue.png
);
}

#nave444 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDMyx1bh83i9f-us-sXTlYqkqZkagpslt6eKIsKoCxOZDRYR5ym83rXnYqDOJN5TBtadb1-EWk0hSZn1iQQ2PXkZWvTBncP7BxUsk-zhaD8VSJ-FhKsx1nS_X8dg_aXDQvMPqq-xvHBg/s1600/tinypolkapurple.png
);
}

.tuto {
    position: fixed;
    top: 470px;
    left: 770px;
    margin: 20px;
    background-image: url(http://i.imgur.com/EizPJb3.png);
    border-radius: none!important;
    padding: 15px;
    WIDTH: 300PX!important;
    border: 1px dashed #bbb;
    height: 160px;
}

.h4 {
    WIDTH: 285PX!important;
    width: 90%;
    text-align: center;
    margin-bottom: 1px;
    color: #95CCC7;
    font: 30px 'legit';
    line-height: 30%;
    background: #F8DDAE;
    text-transform: downpercaseletter-spacing: 0px;
}

@font-face {
    font-family: "legit"; src: url('http://static.tumblr.com/u37ad6e/bR1mb6f8o/kgalwaysagoodtime.ttf');
}

.h44 {
    WIDTH: 285PX!important;
    width: 90%;
    text-align: center;
    margin-bottom: 1px;
    color: #95CCC7;
    font: 30px 'legit';
    line-height: 30%;
    background: #F8DDAE;
    text-transform: downpercase;
    letter-spacing: 0px;
}

@font-face {
    font-family:bubblegum;src:url('http://static.tumblr.com/eq1rpir/2zvm54aji/bubblegum.ttf');
}

@font-face {
    font-family:pacifico;src:url('http://static.tumblr.com/eq1rpir/jtom54asr/pacifico.ttf');
}

@font-face {
    font-family:everyday;src:url('http://static.tumblr.com/eq1rpir/nBVm54bb6/everyday.ttf');
}

@font-face {
    font-family:tinytots; src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}

.link {
    border-radius: 100px;
    text-transform: uppercase;
    font: 8px tinytots;
    display: inline-block;
    padding-top: 40px;
    width: 80px!important;
    height: 40px;
    color: #999;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-lJt8Y5QTxpkKawKEpZCIoqrXT_9VF53mH5onlsJCfpXGcVPT3qT5o6_lUfwv3-JFPMv7411k78zcB4-oXUJWllobg-OSwuz8mlXq_tos8lswpKi7lYAx7PviOkgCkELpoS6uQuAGPI/s1600/pink.png);
    text-align: center;
    margin-bottom: 10px;
}

#back {
    width: 500px!important;
}

#back2 {
    padding: 5px;
    border-radius: 100px;
    margin: 5px;
    background: url(http://i.imgur.com/QYjcBHI.png);
    width: 90px!important;
    display: inline-block;
}

.lol img {
    display: iniline!important;
    border-radius: 1000px;
    width: 95px!important;
    height: 95px!important;
}

.lol2 img {
    display: iniline!important;
    width: 100px!important;
    height: 100px!important;
    margin: -20px!important;
}

@-webkit-keyframes shakee {
    0% {
        -webkit-transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.3) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.3) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
    };
}

@-moz-keyframes shakee {
    0% {
        -moz-transform: scale(1);
    }

    10%, 20% {
        -moz-transform: scale(0.9) rotate(-5deg);
    }

    30%, 50%, 70%, 90% {
        -moz-transform: scale(1.3) rotate(5deg);
    }

    40%, 60%, 80% {
        -moz-transform: scale(1.3) rotate(-5deg);
    }

    100% {
        -moz-transform: scale(1) rotate(0);
    };
}

@-o-keyframes shakee {
    0% {
        -o-transform: scale(1);
    }

    10%, 20% {
        -o-transform: scale(0.9) rotate(-5deg);
    }

    30%, 50%, 70%, 90% {
        -o-transform: scale(1.3) rotate(5deg);
    }

    40%, 60%, 80% {
        -o-transform: scale(1.3) rotate(-5deg);
    }

    100% {
        -o-transform: scale(1) rotate(0);
    };
}

@keyframes shakee {
    0% {
        transform: scale(1);
    }

    10%, 20% {
        transform: scale(0.9) rotate(-5deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale(1.3) rotate(5deg);
    }

    40%, 60%, 80% {
        transform: scale(1.3) rotate(-5deg);
    }

    100% {
        transform: scale(1) rotate(0);
    };
}

#s-m-t-tooltip {
    background: pink;
    font-size: 9px;
    line-height: 11px;
    font-family: cambria;
    letter-spacing: 1px;
    text-transform: uppercase!important;
    color: #fff;
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    text-transform: lowercase;
}

.word2 {
    width: 50px;
    font-size: 14px;
    font-family: consolas;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000!important;
    margin-top: 5px;
    text-align: center;
    -webkit-transition: 0.8s;
}

.word2:hover {
    background: pink;
    color: #fff!important;
    webkit-transition: 0.8s;
}

img:hover {
    -webkit-animation-name: shakee;
    -moz-animation-name: shakee;
    -o-animation-name: shakee;
    animation-name: shakee;
    -webkit-animation-duration: 1s;
    border-radius: 50px;
}

.list {
    width: 405px!important;
    position: fixed;
    height: 300px;
    left: 730px;
    top: 300px;
    display: iniline-block;
}

.list li {
    float-left;font-family: everyday;
    font-size: 10px;
    display: block;
}

.list li a {
    background: #ADD1DF;
    border-radius: 100px;
    font: 10px everyday;
    text-decoration: none;
    text-align: center;
    height: 40px;
    color: transparent;
    border: 4px solid #A1A1BE;
    width: 45px!important;
    height: 27px!important;
    display: block;
    color: transparent;
    margin: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.list:hover li a {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    background: #FFDEB0;
    border: 4px solid #9E9674;
    margin: 5px;
    color: transparent;
}

.list li a:hover {
    background: #C6E2A2;
    color: #fff;
    border: 4px solid #66A590;
    text-shadow: 0px 0px 1px #fff;
}

#description {
    position: absolute;
    float: left;
    top: 286px;
    width: 800px !important;
    left: 302px;
    text-align: center;
    height: 108px;
}

.damn {
    width: 234px;
    height: 334px;
    overflow: hidden;
    background: #E77471 url('http://25.media.tumblr.com/33f6b1b7938702ee65e2987e17946137/tumblr_mjatscqyfw1qzzm7bo6_r1_250.gif') repeat left center;
    box-shadow: inset 0 0 1px 160px rgba(0,0,0,0.4),inset 0 0 0 7px #F6DD8B;
    transition: box-shadow 400ms ease-in-out;
    margin-bottom: 5px;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    display: block;
}

.damn:hover {
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6),inset 0 0 0 13px #FFA78E,0 0 10px rgba(0,0,0,0.3);
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

<div style="position: fixed; bottom: 5px; right: 5px">
<a class="word2" style="color:#000;" href="http://chocollyheart.blogspot.com/" title="afiqahjunizan">THEME</a> </Div>



<div class="list"><ul>
<li><a href="https://www.facebook.com/ieqa.munchie"><br/>Face<br/>book</a></li>
<li><a href="http://afiqah-lola.blogspot.com/"><br/>Status Blog</a></li>
<li><a href="http://ask.fm/AfiqahJunizan"><br/>Ask.<br/>fm</a></li></ul>
<div style="float:right;margin-top:-190px;">
<li><a href="http://www.blogskins.com/me/tralala-afiqah"><br/>Blog<br/>skins</a></li>
<li><a href="http://www.blogger.com/profile/11539663776071135318"><br/>About<br/>Me</a></li>
<li><a href="http://www.blogger.com/follow-blog.g?blogID=7871771811045931378"><br/>Follow<br/>Me</a></li></ul></div>

</div>
<div id="top22">.</div>

<a href=<$OlderPosts$>><div class="com4">O<br>l<br>d<br>e<br>r</div></a>
<a href=<$NewerPosts$>><div class="com5">N<br>e<br>w<br>e<br>r</div></a>

<div id="top33">
“Maybe it's just hiding somewhere. Or gone on a trip to come home. But falling in love is always a pretty crazy thing. It might appear out of the blue and just grab you. Who knows — maybe even tomorrow.”
{<script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=YOURID"></script> online visitors}
</div>

<div id="lino1"></div>
<div id="lino2"></div>
<div id="lino3"></div>
<div id="lino4"></div>
<div id="lino5"></div>


<div style="text-align:center;position:fixed; top:50px; left:1200px; background:url(http://i.imgur.com/PQXLMaI.png);height:35px;width:35px;border:8px solid #DFB2AC;z-index:7777;border-radius:333px;">
<br/><center>
<embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://k004.kiwi6.com/hotlink/r7y333xl19/Richard_Marx_I39ll_Be_Right_Here_Waiting_For_You.mp3&auto=yes&sendstop=no&repeat=87&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="55" height="30" style="margin-bottom:-9px;margin-left:10px;margin-top:-5px;" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></center>
</div>

<div id="page">
<centeR>
<div id="scroller-header" style="margin-top:50px!important;margin-bottom:-80px;">
<div class="side" style="top:70px; left:700px;">
<div class="out1 circle"></div>
<figure><figcaption class="caption"><br><a onClick="document.getElementById('main').innerHTML=document.getElementById('one1').innerHTML">Post</a>
</figcaption></figure></div>

<div class="side" style="top:90px;left:800px;">
<div class="out2 circle"></div>
<figure><figcaption class="caption"><br><a href="http://listoftutorialsfromafiqah.blogspot.com/" rel="panel">Tuto</a>
</figcaption></figure></div>

<div class="side" style="top:70px;left:900px;">
<div class="out3 circle"></div>
<figure><figcaption class="caption"><br><a href="http://listoffreebiesfromafiqah.blogspot.com/" rel="panel">Free</a>
</figcaption></figure></div>

<div class="side" style="top:80px;left:1000px;">
<div class="out4 circle"></div>
<figure><figcaption class="caption"><br><a onClick="document.getElementById('main').innerHTML=document.getElementById('two2').innerHTML">Affies</a>
</figcaption></figure></div>

<div class="side" style="top:70px;left:1100px;">
<div class="out5 circle"></div>
<figure><figcaption class="caption"><br><a onClick="document.getElementById('main').innerHTML=document.getElementById('three3').innerHTML">Besties</a>
</figcaption></figure></div></div>

<div id="caixa"><div id="mask"><div id="main">
<br><blogger>
<center><div class="h11"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></span></BlogItemTitle>
<div class="icon">
<img src="http://i.imgur.com/F8kzi.jpg" width="70" style="border-radius:70px!important;"></div>
<div class="icon2">
<img src="http://i.imgur.com/lsoTI.png" width="70" style="border-radius:70px!important;"></div>
<div class="com2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="com3"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>comment </a>(<$BlogItemCommentCount$>)</BlogItemCommentsEnabled></div>
</div></center>
<$BlogItemBody$></blogger></div>




<div id="one1" style="display: none;">
<br><blogger>
<center><div class="h11"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></span></BlogItemTitle>
<div class="icon">
<img src="http://i.imgur.com/AgXhAWfs.jpg" width="70" style="border-radius:70px!important;"></div>
<div class="icon2">
<img src="http://i.imgur.com/7G0tiHds.jpg" width="70" style="border-radius:70px!important;"></div>
<div class="com2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="com3"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>comment </a>(<$BlogItemCommentCount$>)</BlogItemCommentsEnabled></div>
</div></center>
<$BlogItemBody$></blogger></div>



<div id="two2" style="display: none;">
<center>
<div id="nave333" style="text-align: left;">
<span style="color:red">Guys, read this note</span>: Exchange link closed . Sorry guys. Mybe someday i will re-open back.
</div></center>
<center>
<a class="link3" onclick="window.open('http://chocollyheart.blogspot.com/'); return false;">Afiqah</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<a class="link3" onclick="window.open('LINK'); return false;">OPEN</a>
<br/><br/>
</div>

<div id="three3" style="display: none;">
<center><div class="tut"><font color=#ff0000>F</font><font color=#f02c0f>r</font><font color=#e1581e>e</font><font color=#d2802d>e</font> <font color=#b4c44b>p</font><font color=#a5de5a>a</font><font color=#96f069>g</font><font color=#87fb78>e</font> <font color=#69fa96>f</font><font color=#5aeda5>o</font><font color=#4bd9b4>r</font> <font color=#2d9ed2>y</font><font color=#1e79e1>o</font><font color=#0f4ff0>u</font><font color=#083bf6>.</font></div></center>
<br/>
<blockquote class="tr_bq" style="text-align: center;">You may put anything at here</blockquote>
<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<br/>
</div>


<div id="description" style="position:fixed; top:230px!important; left:835px!important;">
<div id="circle" class="damn"></div>
</div></div>
     
</body></html>