\

dabblet.css

  ul {position: relative;  width: 300px; height: 140px; margin: 0 auto; }
  ul:hover {position: relative;  width: 340px; height: 140px; margin: 0 auto; }


ul li {
width: 7px;
height: 75px;
background: black;
margin: 0;
display: inline-block;
border-radius:50px; 
transition: all 0.5s ease-in-out;
border: 4px solid white;
 
transition: all 0.2s ease-in-out;

}

ul:hover li {
transition: all 0.2s ease-in-out;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4);
 box-shadow: none !important; 
width: 75px;
height: 75px;
background: black !important;
}



li:nth-child(11n+1) {


position: absolute; top: 40px; left:100px;}


li:nth-child(11n+2) {


position: absolute; left: 150px; top: 50px;  }

li:nth-child(11n+3) {

 
position: absolute; top: 40px; left: 200px;  }

li:nth-child(11n+4) {
position: absolute;}

 li:nth-child(11n+5) {

 
position: absolute; z-index: -1; top: -20px; left: 80px; z-index: 5;}

li:nth-child(11n+6) {

 position: absolute; left: 130px;}

 li:nth-child(11n+7) {


position: absolute; top: -30px; left: 175px;}

 li:nth-child(11n+8) {

position: absolute; left: 235px;}

 li:nth-child(11n+9) {


position: absolute;
top: -50px; left: 250px;}

 li:nth-child(11n+10) {

position: absolute; top: 40px; left: 270px;}

 li:nth-child(11n+11) {
  position: absolute; left: 300px;
 }
 
 
 ul:hover li:nth-child(11n+1) {


position: absolute; top: 40px; left:80px; border: 4px solid white;}


ul:hover li:nth-child(11n+2) {


position: absolute; left: 140px; top: 50px; }

ul:hover li:nth-child(11n+3) {

 
position: absolute; top: 40px; left: 200px;}

ul:hover li:nth-child(11n+4) {
position: absolute;}

ul:hover li:nth-child(11n+5) {

 
position: absolute; z-index: -1; top: -20px; left: 80px; z-index: 5;}

ul:hover li:nth-child(11n+6) {

 position: absolute; left: 130px;}

ul:hover li:nth-child(11n+7) {


position: absolute; top: -30px; left: 170px;}

ul:hover li:nth-child(11n+8) {

position: absolute; left: 230px;}

ul:hover li:nth-child(11n+9) {


position: absolute;
top: -50px; left: 250px;}

ul:hover li:nth-child(11n+10) {

position: absolute; top: 40px; left: 270px;}

ul:hover li:nth-child(11n+11) {
  position: absolute; left: 300px;
 } 

/************************************\

\*************************************/

ul:hover li:nth-child(11n+1) { background: #cedce7; /* Old browsers */background: -moz-linear-gradient(top,  #cedce7 0%, #596a72 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* IE10+ */background: linear-gradient(top,  #cedce7 0%,#596a72 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */}
ul:hover li:nth-child(11n+2) { background: background: #fbff0b; /* Old browsers */
background: -moz-linear-gradient(top,  #fbff0b 0%, #d2d814 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbff0b), color-stop(100%,#d2d814)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* IE10+ */
background: linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff0b', endColorstr='#d2d814',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px yellow;}
ul:hover li:nth-child(11n+3) { background: background: #ed9eb8; /* Old browsers */
background: -moz-linear-gradient(top,  #ed9eb8 0%, #bc0d1e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed9eb8), color-stop(100%,#bc0d1e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ed9eb8 0%,#bc0d1e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ed9eb8 0%,#bc0d1e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ed9eb8 0%,#bc0d1e 100%); /* IE10+ */
background: linear-gradient(top,  #ed9eb8 0%,#bc0d1e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9eb8', endColorstr='#bc0d1e',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px #DB0F1C;}
ul:hover li:nth-child(11n+4) { background: background: #f21010; /* Old browsers */background: -moz-linear-gradient(top,  #f21010 0%, #960a0a 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f21010), color-stop(100%,#960a0a)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #f21010 0%,#960a0a 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #f21010 0%,#960a0a 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #f21010 0%,#960a0a 100%); /* IE10+ */background: linear-gradient(top,  #f21010 0%,#960a0a 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f21010', endColorstr='#960a0a',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px red;}
ul:hover li:nth-child(11n+5) {background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
 }
ul:hover li:nth-child(11n+6) { background: #cb60b3; /* Old browsers */background: -moz-linear-gradient(top,  #cb60b3 0%, #db36a4 29%, #c146a1 50%, #a80077 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(29%,#db36a4), color-stop(50%,#c146a1), color-stop(100%,#a80077)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* IE10+ */background: linear-gradient(top,  #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#a80077',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px purple;}
ul:hover li:nth-child(11n+7) { background: #17f20c; /* Old browsers */
background: -moz-linear-gradient(top,  #17f20c 0%, #49aa11 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17f20c), color-stop(100%,#49aa11)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #17f20c 0%,#49aa11 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #17f20c 0%,#49aa11 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #17f20c 0%,#49aa11 100%); /* IE10+ */
background: linear-gradient(top,  #17f20c 0%,#49aa11 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17f20c', endColorstr='#49aa11',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px green;}
ul:hover li:nth-child(11n+8) { background: #c98028; /* Old browsers */background: -moz-linear-gradient(top,  #c98028 0%, #664d09 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c98028), color-stop(100%,#664d09)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #c98028 0%,#664d09 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #c98028 0%,#664d09 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #c98028 0%,#664d09 100%); /* IE10+ */background: linear-gradient(top,  #c98028 0%,#664d09 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c98028', endColorstr='#664d09',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px brown;}
ul:hover li:nth-child(11n+9) { background: #fbff0b; /* Old browsers */
background: -moz-linear-gradient(top,  #fbff0b 0%, #d2d814 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbff0b), color-stop(100%,#d2d814)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* IE10+ */
background: linear-gradient(top,  #fbff0b 0%,#d2d814 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff0b', endColorstr='#d2d814',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px yellow;}
ul:hover li:nth-child(11n+10) {background: #ffb76b; /* Old browsers */background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 49%, #ff7f04 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(49%,#ffa73d), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* IE10+ */background: linear-gradient(top,  #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 10px orange;
}
ul:hover li:nth-child(11n+11) { background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 31%, #2ab0ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(31%,#bfe8f9), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* IE10+ */
background: linear-gradient(top,  #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */

box-shadow: inset 0px 0px 10px skyblue;}




body #blog {


	width: 450px;
	float: right;


	

}


body > #blog {





	



;
	
}

h1, h2, h3 {
	
font-family: 'Mate SC', serif;
font-size: 2em;
text-align: center;

}

h1 + p {
text-align: center;
font-family: 'Mate Sc', serif;
font-size: 14px;
}

h1 {
text-shadow: 
white 0 1px, 
rgba(23, 234, 242, 1)
 0 0 0.2em;
}

h2 {

font-size: 1.5em;
text-shadow: 
white 0 1px, 
rgba(238, 242, 24, 1)
 0 0 0.2em;

}

h3 {
font-size: 1.2em;
text-shadow: 
white 0 1px, 
rgba(24, 247, 50, 1)
 0 0 0.2em;
}

p {

font-family: 
'Josefin slab'
, serif;
line-height: 1.5;
font-size: 1em;
text-align: justify;

color: black; 

text-shadow: 
0px 2px rgba(220,220,220,0.75)
}

img {

border-radius: 5px;
width: 100%;

box-shadow: 
 
rgba(39, 197, 236, 0.5) 
 0 0 0.2em;

}

#logo p {
line-height: 1.2;
text-align: center;
	margin: 0 auto;
	text-align: center;
	
	
font-family: 'Mate Sc'; 
	font-size: 40px;
	color: black;
	
transition: all 0.2s ease-in-out;


text-shadow:   1px 0px #eee, 0px 1px #ccc,
               2px 1px #eee, 1px 2px #ccc,
               3px 2px #eee, 2px 3px #ccc;
	
}

div#logo {
width: 150px;
height: 106px;
padding: 22px 0px;
margin: 0 auto;
margin-top: 25px;
background: rgba(0,0,0,0.03);
border-radius: 160px;

transition: all 0.2s ease-in-out;

box-shadow: 0px 0px 0px rgba(220,220,220,1), 
inset 0px 0px 50px rgba(220,220,220,0.5)
;
}
div#logo:hover {

box-shadow: 0px 0px 10px rgba(220,220,220,1), 
inset 0px 0px 0px rgba(220,220,220,0.5)
;
transition: all 0.2s ease-in-out;


}
div#logo:hover p {

text-shadow:   1px 0px #eee, 0px 1px #ccc,
               2px 1px #eee, 1px 2px #ccc,
               3px 2px #eee, 2px 3px #ccc,
               4px 3px #eee, 3px 4px #ccc,
               5px 4px #eee

,4px 5px #ccc,
               6px 5px #eee, 5px 6px #ccc,
               7px 6px #eee, 6px 7px #ccc,
               8px 7px #eee
,7px 8px #ccc,
               8px 8px #eee
;  }

#logo p + p {font-family: 'Josefin Slab';}

#logo {float: left;}

body {width: 650px; margin: 0 auto; margin-top: 50px;}

dabblet.html

<head> 


<link href='http://fonts.googleapis.com/css?family=Trykker' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Mate+SC' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Buenard' rel='stylesheet' type='text/css'>


<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Stoke' rel='stylesheet' type='text/css'>



</head>

<!-- content to be placed inside <body>…</body> -->
<!-- <ul> 
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	
</ul> -->

<body>

<div id="logo"> <p> Life </p> <p> Psyche </p> </div> 


	<div id="blog">
	<h1> Why I Believe That We Are The Future </h1>
	
	<p> By <a href="/">Vinay Bhat</a> on <a href="/">21 Dec 2011</a> in <a href="/">School Life </a> </p>
	
	<img src="http://lorempixel.com/g/450/200" alt="Nothing" />
	
	<p> 
Today was an exception day. I loved it. The prospect of loving someone should come from within. There is no pain you are receding, a distant ship smoke on the horizon. Oh I've got that all in my head. Baby I love you, I really do. 
	</p>
	
	<h2> The Damning Effect of Life </h2>
	
	<h3> "Baby, I think we are dead." </h3>
	
	<p> 
I love powder applicake I love. Sweet roll tootsie roll I love macaroon pastry chocolate I love chupa chups caramels. Jelly fruitcake liquorice gummies I love chocolate sweet. Dessert liquorice carrot cake macaroon I love caramels gingerbread I love sesame snaps. Sweet sweet I love I love biscuit gummi bears. Jelly gingerbread carrot cake cupcake jujubes candy brownie dragée. I love jelly-o jelly faworki chocolate cake soufflé jelly caramels. Jujubes pie apple pie caramels I love. I love croissant sesame snaps chocolate powder marshmallow sweet roll. Bonbon I love biscuit. Lemon drops lemon drops apple pie apple pie marzipan sugar plum cheesecake faworki gingerbread. Candy biscuit chocolate cake.
	</p>
	
	<h3> "I guess, you were right, after all." </h3>
	
	<p> 
Sesame snaps tootsie roll donut danish cupcake dessert applicake. Candy applicake sweet toffee lemon drops. Sweet roll soufflé sesame snaps I love dessert cake tart. Sweet muffin croissant I love gummies marshmallow. Sugar plum tootsie roll carrot cake muffin cupcake cotton candy dessert dragée gummies. I love gummi bears dessert chocolate muffin dessert. Apple pie toffee jujubes lollipop. Gingerbread jujubes wafer I love ice cream cookie. Apple pie sesame snaps muffin donut chupa chups I love gingerbread cotton candy. Applicake liquorice jelly. Candy cookie gingerbread icing cookie. Wafer powder tiramisu ice cream pudding marshmallow sweet roll.
	</p>
	
	

	
	<h2> How To Live With It </h2>
	
	
<p> 
Sesame snaps tootsie roll donut danish cupcake dessert applicake. Candy applicake sweet toffee lemon drops. Sweet roll soufflé sesame snaps I love dessert cake tart. Sweet muffin croissant I love gummies marshmallow. Sugar plum tootsie roll carrot cake muffin cupcake cotton candy dessert dragée gummies. I love gummi bears dessert chocolate muffin dessert. Apple pie toffee jujubes lollipop. Gingerbread jujubes wafer I love ice cream cookie. Apple pie sesame snaps muffin donut chupa chups I love gingerbread cotton candy. Applicake liquorice jelly. Candy cookie gingerbread icing cookie. Wafer powder tiramisu ice cream pudding marshmallow sweet roll.
	</p>
	</div>
</body>

settings.json

{"view":"split","prefixfree":"1","page":"result"}