Evangrace

Tutorials&Freebies(including Blogskins!)

Blogskin #5


*click on the pic for a larger view

the codes:


<style type="text/css">body {cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png), progress !important;}</style></a></div>
<html>
<head>
<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/bc7znss/MN5ma27op/373813c8qyd2txyp.gif" class="btn_close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<link href="http://static.tumblr.com/1f1tzta/Drsme9t4s/preview.css" rel="stylesheet" type="text/css" />
<!-- START NIVO SLIDER -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/y0x5xm1/WdCmcx05a/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/y0x5xm1/e1gmcx29e/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<title>ⓔⓥⓐⓝ εssεηcε</title>
<link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre|The+Girl+Next+Door|Patrick+Hand+SC|Clicker+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
#navbar-iframe{display: none;}
::-webkit-scrollbar-thumb:vertical {background-color:#fff;width:10px;}
::-webkit-scrollbar {height:0px;width:6px;background-color:#f0f0f0;}
#content {
position:relative;
margin:0 auto;
width: 580px;
height:410px;
left:0%;
top:0px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
background:transparent;
}
.tr-caption{font: 15px nara; color:#c0c0c0;padding-top: -3px;padding-bottom: 3px;}
ul
{
list-style-type:circle;
}
.title{
font-family:"dancing script";
font-size:20px;
color:#fff;
text-shadow: 0 0 0.1em #ECD872, 0 0 0.1em #ECD872;
}
@font-face { font-family: "kghand"; src: url('http://static.tumblr.com/cpgw3dl/J6Emnfw1e/kghardcandystriped.otf'); }
@font-face { font-family: "remachine"; src: url('http://static.tumblr.com/cpgw3dl/b68mnfw35/remachinescript_personal_use.ttf'); }
@font-face { font-family: "tintin"; src: url('http://static.tumblr.com/cpgw3dl/LIomnfw5d/throwmyhandsupintheair.ttf'); }
@font-face { font-family: "waking up"; src: url('http://static.tumblr.com/cpgw3dl/dU2mnfw86/wakingup.ttf'); }
@font-face { font-family: ""; src: url(''); }
.popup_block{
display: none;
background: #D3D3D3;
background-image: url(http://i.imgur.com/ScDERxb.png);
padding: 10px;
font-family: "short stack";
float: left;
color:#fff;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 20000000;
border: 4px solid #fff;
-moz-box-shadow: 9px 9px 9px #eee;
-webkit-box-shadow: 0 0 15px #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
a.thingi{
word-spacing:10px;
color: #c0c0c0;
text-decoration:none;
font-family:"short stack";
font-size:10px;
background:url(http://media.tumblr.com/tumblr_m89lql8qIE1qdlkyg.gif);
background-repeat:no-repeat;background-size:10px ;padding-left:15px !important;line-height:18px !important;}
a.thingi:hover{
color: #E8D6CC;cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
background:url(http://media.tumblr.com/tumblr_m89lqpqCgU1qdlkyg.gif) !important;
background-repeat:no-repeat !important;background-size:10px !important;padding-left:15px !important;line-height:18px !important; !important}
a.navi1:hover {
color:#000 !important;
}
.title{
font-family:"short stack";
font-size:12px;
color:#c0c0c0;
}
*html .popup_block {
position: absolute;
}
body {
font-size: 11px;
line-height: 17px;
font-spacing:2px;
text-align: justify;
font-family: Lucida Sans Unicode;
color: #999999;
background-image:url('http://static.tumblr.com/w0hwijc/dBwm88vc0/bsnmj.png');
cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png), progress !important;
}
#linkbar2 {
moz-box-shadow: 0 0 1px #E799A3;
-webkit-box-shadow: 0 0 8px #C48793;
bottom:-39px;
left:980px;
position:fixed;
border-left:6px double #fff;
border-right:6px double #fff;
border-top:5px solid #fff;
border-top-right-radius:20px;
border-top-left-radius:20px;
width:50px;
height:158px;
margin-bottom:40px;
padding-top:10px;
background-image:url(http://i.imgur.com/EV6UXzE.jpg);
background-repeat:repeat;
}
.hoverlink {
border:1px solid #C48793;
border-radius:50px;
background-color:#fff;
width:45px;
height:20px;
margin-left:2px;
text-align:center;
padding-top:8px;
font-color:#fff;
margin-bottom:10px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: .7s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: .7s;
}
.sd {width: 230px; padding: 8px; background-image:url(http://i.imgur.com/B5Y2m.png); z-index: 100; text-align: justify; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px;}

.hoverlink:hover {
border-radius:0px;
width:45px;
height:20px;
margin-left:2px;
text-align:center;
padding-top:8px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: .7s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: .7s;
moz-box-shadow: 0 0 1px #E799A3;
-webkit-box-shadow: 0 0 8px #C48793;
}
@font-face {font-family:tinytots;src: url(http://static.tumblr.com/tjzfmfv/vbEm08r8p/04b_03__.ttf); }
#cbox123 {
z-index: 9999;
position: fixed;
bottom: -180px;
left: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cbox123:hover {
bottom: 0px;
}
#cboxtitle {
text-align: center;
font-size: 20px;
font-family: nara;
letter-spacing: 2px;
color: #d6cdc1;
width: 140px;
background-color: #fff;
padding: 3px 5px 5px 5px;
border: 2px solid #C8D9DB;
border-top-right-radius: 10px;
}
@font-face{font-family:"nara";src:url("http://static.tumblr.com/rbfc1fi/GL1m6m44f/nara.ttf")}
@font-face {
font-family: "Meow";
src: url(http://static.tumblr.com/kauezwz/YlIlz8nop/theonlyexception.ttf) format("truetype");
}
@font-face{font-family:pixel;src:url(http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf)}
#pagingbar {
bottom:140px;
left:980px;
position:fixed;
border-left:6px double #D6B98F;
border-right:6px double #D6B98F;
border-bottom:5px solid #D6B98F;
border-top:5px solid #D6B98F;
width:50px;
height:15px;
margin-bottom:40px;
padding-top:10px;
background:#FFF;
background-repeat:repeat;
}
@font-face{font-family:"cookie";src:url("http://static.tumblr.com/cpgw3dl/HjTmn8o3a/lemons_can_fly.ttf")}
.h1 {padding:2px; font:12pt 'courier'; line-height:10px; color:#c0c0c0; margin-bottom:10px; }.h4{ font-family: consolas; color:#fff; font-size:12px;}
.ar {margin: 0 auto; width: 0; height: 0; margin-top:-10px;border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ECD7AA;}
.sd1 {width:190px; padding: 1px; background-image:url(http://i.imgur.com/B5Y2m.png); z-index: 100; text-align: justify; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px;}
/* The Nivo Slider styles */
.nivoSlider {
bottom:480px; left:390px;
position:fixed;
width:530px;
height:auto;
overflow: hidden;
-moz-box-shadow: 0 0 5px #4b4b4b;
-webkit-box-shadow: 0 0 5px #4b4b4b;
box-shadow: 0 0 5px #4b4b4b;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#bbdad0;
color:#3b3b3b;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
font-size:14px;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
display:block;
width:31px;
height:34px;
background:url('http://static.tumblr.com/y0x5xm1/ei3mcx19v/arrows.png') no-repeat;
text-indent:-9999px;
border:0;
}
.nivoSlider .nivo-directionNav a {
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.meyowa{
font-family: 'cookie', cursive;
text-shadow: 1px 1px 1px #808080;
color:#eee;
font-size: 25px;
}
.meyo1{
color:#fff;
font-size:14px;
}
a:link, a:active, a:visited {
color: #c0c0c0;
text-shadow: 1px 0 .5px #fff, -0px 0 .5px #fff;
cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
font-family: 'short stack', cursive;
font-size:13px;
text-decoration:none;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
a:hover {
text-decoration:none;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
color: #fff;
text-shadow: 1px 0 .5px #fff, -0px 0 .5px #fff;
cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
}
blockquote {
padding: 5px 5px 5px 5px;
border:1px solid #dedede;
background-position:bottom right;
background-repeat:no-repeat;
background-image: url(http://media.tumblr.com/tumblr_m3wh4koB3w1qdlkyg.gif);
letter-spacing: 1px;
padding: 5px 5px 5px 5px;
width:320px;
height:50px;overflow:auto;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 5px;
margin-bottom: 5px;
margin-left:5px;
}
.nomi{
font-family:"cookie";
font-size:15px;
}
.flashy {position:relative; z-index: -1!important; position:absolute; width:600px; left:-50%; margin-left:300px;}
#icy {
margin: 15px auto;
padding: 15px;
width: 500px;
background: #FFF;
border:10px solid ;
border-image: url(http://i.imgur.com/azdfn4r.jpg) 10% repeat;
}
<------circle-hover---->
.limo{
width: 90%;
margin: 0 auto;
position: relative;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-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;
}
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(http://tympanus.net/Tutorials/LoadingAnimations/images/bedge_grunge.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.ch-info h3 {
color: #fff;
position: relative;
letter-spacing: 2px;
font-size: 25px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'dawning of a new day';
text-shadow:
0 0 1px #ddd,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #c0c0c0;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: #c0c0c0;
width: 80px;
height: 60px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
font-style: normal;
font-weight: 100;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: consolas;
opacity: 0;
-webkit-transition:
-webkit-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-moz-transition:
-moz-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-o-transition:
-o-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-ms-transition:
-ms-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-webkit-transform: translateX(60px) rotate(90deg);
-moz-transform: translateX(60px) rotate(90deg);
-o-transform: translateX(60px) rotate(90deg);
-ms-transform: translateX(60px) rotate(90deg);
transform: translateX(60px) rotate(90deg);
-webkit-backface-visibility: hidden;
}
.ch-info p a:hover {
background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-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;
}
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.ch-img-1 {
background-image:url(http://i.imgur.com/qCgRn.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(http://dribbble.s3.amazonaws.com/users/4370/screenshots/750404/teamotto.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(http://dribbble.s3.amazonaws.com/users/4370/screenshots/334837/circles_dribbble.jpg);
z-index: 10;
}
<-----end--->
.blogger-labels{
margin-bottom: 0px;
}
.meyo{
font-family: 'dancing script', cursive;
color: #fff;
font-size: 20px;
text-shadow: 0 0 0.1em #ECD872, 0 0 0.1em #ECD872;
}
.h2 {
display: block;
margin-bottom: 8px;
letter-spacing: 3px;
font: 15px/2px calibri;
background: #f8eeee;
color: #adaeb8;
text-align:center;
margin-bottom:15px;
}
#bubble{
text-shadow: 5px 5px 3px #fff;
font-family: 'Averia sans libre', cursive;
font-size:30px;
color:#C9A97D;
z-index:200000;
}
#sidelinks{
position:fixed;
margin-left:-10px;
margin-top: 15px;
}
.deux {
margin: auto;
width: 530px;
}
.deux a {
padding: 5px;
color: #BFBFBF;
background: #FCFCFC;
border:5px solid ;
border-image: url(http://i.imgur.com/azdfn4r.jpg) 5% repeat;
margin-bottom:10px;
}
.deux a:hover {
color: #8C8C8C;
background: #FFFFFF;
}
::selection {color: #000; background: #f9f9f9;} ::-moz-selection{color: #000; background: #f9f9f9;}
.content { margin: 0px auto; width: 775px; }
.posts { border: 12px #f5e7c6 solid;width:auto;height:900px;overflow:auto;
margin-top: 0; margin-bottom: 0; padding: 5px;-moz-box-shadow: 0 0 3px 3px #F5F5F5;
-webkit-box-shadow: 0 0 3px 3px#F5F5F5;
box-shadow: 0 0 3px 3px #F5F5F5;border-radius:15px; }
</style>
<script type="text/javascript">
// <![CDATA[
var bgcolour="#C9A97D"; // background colour
var fgcolour="#B46769"; // foreground colour
var speed=50; // speed of bubbling, lower is faster
var shades=30; // number of shades of bubble
/****************************
* Bubbling Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bubbcol=new Array();
var bubbler, bubbtxt;
var bubbchr=new Array();
window.onload=function() { if (document.getElementById) {
for (bubbler=0; bubbler<=shades; bubbler++) {
bubbtxt="#";
for (var i=1; i<6; i+=2) {
var bg=parseInt(bgcolour.substring(i,i+2),16);
bubbtxt+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)*(bubbler/shades)));
}
bubbcol[bubbler+1]=bubbtxt;
}
bubbler=document.getElementById("bubble");
bubbtxt=bubbler.firstChild.nodeValue;
while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
for (var i=0; i<bubbtxt.length; i++) {
var bubbi=document.createElement("span");
bubbi.setAttribute("id", "bubb"+i);
bubbi.appendChild(document.createTextNode(bubbtxt.charAt(i)));
bubbler.appendChild(bubbi);
}
bubbler=setInterval ("bubbling()", speed);
}}
function dechex(dec) {
var hex=dec.toString(16);
if (dec<16) return "0"+hex;
else return hex;
}
function bubbling() {
for (var i=0; i<bubbtxt.length; i++) {
var bubbme=document.getElementById("bubb"+i);
if (bubbchr[i]) {
bubbme.style.color=bubbcol[bubbchr[i]];
bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
}
else if (Math.random()<0.75/bubbchr.length) bubbchr[i]=1;
}
}
// ]]>
</script>
<link href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>
</head>
<body>
<body oncontextmenu='return false;' onkeydown='return false;'>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=10 //Customize x offset of tooltip
var offsetypoint=-20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
<!-- start nivo -->
<div style="position:absolute; width888px; font-family:verdana; font-size:9px; text-align:justify;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">


<a href="/" target="_blank"><img src="http://i.imgur.com/dWdNcwi.gif" alt="" title=""/></a>
<img src="http://i.imgur.com/t3QMdcK.gif" alt="" title="" /></a>

<img src="http://i.imgur.com/ruaMata.gif" alt="" title="" />
<img src="http://i.imgur.com/vQu1fvo.gif" alt="" title="" />
<img src="http://i.imgur.com/q20qejR.gif" alt="" title="" />

</div>
</div>
</div>
<!-- end nivo -->
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br>

<div id="content">
<div id="icy">
<Blogger>

<div class="h2"><$BlogItemTitlegt;</div>&nbsp;
<center><div class="ar"></div></center>
<center><div class="sd1">
<div class="h4"><center><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader>&nbsp;<img src='http://i.imgur.com/iGxniJa.gif' style="opacity: .70;"></center></div>
</div></center>
<br>
<$BlogItemBodygt;
<br>
<br>
</Blogger>
</div>
</div>
<br>
<div class="deux">
<center><div style="float: left;"><a href=<$OlderPostsgt;>older</a></OlderPosts></div>
<div style="float: right;"><a href=<$NewerPostsgt;>newer</a></NewerPosts></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="http://static.tumblr.com/1f1tzta/dX9m986fz/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="http://static.tumblr.com/1f1tzta/gacm986gu/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>
<script src="http://static.tumblr.com/1f1tzta/KtCm986fe/jquery.mousewheel.min.js"></script>
<script src="http://static.tumblr.com/1f1tzta/QPIm986ex/jquery.mcustomscrollbar.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>


</body>
<div id="02" class="popup_block">
<Center><div class="title">Hello there!</div><center><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c30.30.371.371/s160x160/941627_597462113607120_227726305_n.jpg" style="width:100px; opacity:.80;border:5px solid #fff;
-moz-border-radius:0px 100px 100px 100px;
border-radius:100px 100px 100px 100px;
width:100px;
height:100px;"><br><br><div class="ar"></div>
<div class="sd">I'm an introvert, a bibliophile, an aurophile, an otaku and a template designing enthusiast. I'm 15 this year, a victim of PMR. I am sometimes nicknamed "Miss Whatever" because I'm nonchalant in reality. I dread homeworks. Slacking and procrastinating is a mundane and a monotonous thing to me.I am currently residing in Rawang, Selangor, Malaysia. Guess who I am.
I am Evangelista Grace, a.k.a The computer Geek :P
</div></center></div>
</div></div></div></div></div></div></div></div></div></div>

<div id="05" class="popup_block">
<div style="width:auto;height:150px;overflow:auto; "><Center><div class="title">Tutorials for you</div></center>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/walk-under-moonlight.html' target="_blank">Beautify your textarea</a></ul>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/during-my-childhood-days.html' target="_blank">Post title like mine</a></ul>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/happy-moments.html' target="_blank">Header like mine</a></ul>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/those-were-days.html' target="_blank">Scrollbar like mine</a></ul>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/1-krk-2011-class-picture.html' target="_blank">Pop-up box like mine</a></ul>
<ul><a class="thingi" href='http://a-pastel-story.blogspot.com/search?updated-max=2012-12-09T07:26:00-08:00&max-results=1' target="_blank">Circle hover effect</a></ul>
..AND MORE TO COME SOON! STAY TUNED!
</div>
</div></div></div></div></div></div></div></div></div></div>
<div id="04" class="popup_block">
<Center><div class="title">Freebies for you</div></center>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/taken-during-our-first-visit-to-church.html' target="_blank">Banners and icons</a></ul>
<ul><a class="thingi" href='http://evangelista-grace.blogspot.com/2011/11/picniks-best-place-to-edit-your.html' target="_blank">Photoshop: Vintage effect</a></ul>
<ul><a class="thingi" href=' http://evans-smilies.blogspot.com/' target="_blank">Smilies!</a></ul>
<ul><a class="thingi" href=' http://evangelista-grace.blogspot.com/2012/12/dress-up-pusheen.html' target="_blank">Pusheen dress up game!</a></ul>
</div>
</div></div></div></div></div></div></div></div></div></div>
</html>
<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 50px; background-image:url('http://static.tumblr.com/w0hwijc/0gIm88vnq/colourlovers.com-tecnology.png'); border-bottom: 5px solid #eee;"><br><center><div class="meyo">Order my steps in Thy Word, O Lord... </div></center></div>
<div id="pagingbar"><center><font color="#c0c0c0"><div class="nomi">Navis</div></font></center></div>
<div id="linkbar2">
<div class="hoverlink"><a href="#?w=300" rel="02" class="poplight">About</a></div>
<div class="hoverlink"><a href="#?w=300" rel="05" class="poplight">Tutos</a></div>
<div class="hoverlink"><a href="#?w=300" rel="04" class="poplight">Freebs</a></div>
<div class="hoverlink"><a href="http://evangelista-grace.blogspot.com/2012/03/err.html">Bskins</a></div>
</div></div>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('a:link');</script>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('.nomi');</script>
<div id="cbox123">
<div id="cboxtitle">CHATBOX</div>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="150" height="105" src="http://www5.cbox.ws/box/?boxid=712646&amp;boxtag=zg4n92&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-712646" style="border: 0px solid;border-top:0px" id="cboxmain5-712646"></iframe></div>
</div>
<div><iframe frameborder="0" width="150" height="75" src="http://www5.cbox.ws/box/?boxid=712646&amp;boxtag=zg4n92&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-712646" style="border: 0px solid;border-top:0px" id="cboxform5-712646"></iframe></div>
</div>
<!-- END CBOX --></div>
</div>
<div style="display:scroll; position:fixed; top:5px; right:90px;z-index:200000;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=3707472290340783163" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><div class="meyo1">Follow</div></a> <div style="display:scroll; position:fixed; top:5px; right:10px;z-index:200000;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><div class="meyo1">D'board</div></a></div></div>