Cordelia: Coding

<style type="text/css">
	 .pfor {display: none; visibility: hidden;}
	#profile {background-color:;}
	#profile {border:;}
	body
	{overflow-x:hidden;
	background-image:
	url('');
	background-repeat:repeat;
	background-position:;
	background-attachment: fixed;
	background-color:#FFFAF0;
	font: 0px arial;
	color: black;}
	#profile {background-color: transparent;
	border:0px;
	}

	::-webkit-scrollbar {
	width: 5px;
	height: 0px;
	background:;
	}

	::-webkit-scrollbar-thumb {
	background-color:black;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}

	a {color:;
	text-decoration: none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}

	a:hover {color: black;
	text-decoration: none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}

	::selection {
	color: #29272A;
	background: #eee;
	}

	*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;
	}

@font-face {font-family: "tinytots";src: url('https://dl.dropboxusercontent.com/s/y0pfz7ndq83n7j7/04B_03_.TTF?dl=1'); format("truetype");}


#whole{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

	#box {background-color:#666;
	vertical-align: center;
	position: absolute;
	width:200;
	height:350;
	left: 800px;
	top: 199px;
	margin: 1px;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	border:15px solid #666;
	}

	#box:hover {background-color:#666;
	vertical-align: center;
	position: absolute;
	width:400;
	height:350;
	left: 360px;
	top: 199px;
	margin: 1px;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	border:15px solid #666;
	}

	#background {
	position:fixed;
	background-color:FFFAF0;
	width:500;
	height:400;
	left: 800px;
	top: 199px;
	}

	#image {position:absolute;
	left:800;
	top:200;
 -webkit-filter: grayscale(100%);
	border:15px solid #666;
	}

	#title {
	position:absolute;
	background-color:#666;
	font-size:30px;
	font-family:times;
	text-align:center;
	text-transform:lowercase;
	color:#F5F5F5;
	width:250;
	height:25;
	line-height:23px;
	top:170;
	left:0;
	}

	#image2 {
	position:absolute;
	background-image:
	url('http://img05.deviantart.net/e83a/i/2015/231/f/a/my_artwork__fanart_katarina__league_of_legends_by_phuthieu1989-d96bzra.jpg');
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment: absolute;
	background-size:100px;
	border-radius:100px;
	border:5px solid #DC143C;
	width:100;
	height:100;
	left:-5;
	top:5;
 -webkit-filter: grayscale(100%);
	}

	#quote {background-color:;
	vertical-align: center;
	text-transform: none;
	color:	#DC143C;
	font: normal normal normal 20px
	‘times’;
	text-align: justify;
	position: absolute;
	width:290;
	left: 100px;
	top: 0px;
	letter-spacing:0px;
	line-height: 15px;
	padding: 10px;
	margin: 1px;
	border-top:1px dotted #111;
	border-bottom:1px dotted #111;
	}

	#meow {
	position:absolute;
	left: -220px;
	top: 60px;
	}

	#navi {
	vertical-align: center;
	text-align: center;
	position: absolute;
	left:0;
	top:125;
	letter-spacing:0px;
	line-height: 10px;
	padding: 5px;
	margin: 1px;
	}

	#navi a {
	padding: 7px;
	width: 100px;
	font-family: tinytots;
	font-size: 8px;
	text-transform:uppercase;
	letter-spacing: 1px;
	display: inline-block;
	text-align: center;
	color:#666;
	background-color: 	#DC143C;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	border: 1px solid #666;
	}

	#navi a:hover {background-color:#666;
	color:	#DC143C;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	border: 1px solid 	#DC143C;
	}

	#gif {
	position:absolute;
	left:130;
	top:131;
 -webkit-filter: grayscale(100%);
	}

	.info {
	position: absolute;
	color:#666;
	font-size:8px;
	font-family:tinytots;
	text-transform:uppercase;
	text-align: justify;
	overflow: auto;
	width:261;
	height:186;
	left:-300;
	top:130;
	background-color: 	#DC143C;
	opacity: 0;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	z-index: 1;
	padding: 10px;
	margin: 1px;

	}

	.info:target {
	position: absolute;
	left:129;
	opacity: 1;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	}

	h1{
	border-bottom:1px solid #666;
	color:#666;
	font-size:17px;
	line-height: 17px;
	font-family:times;
	text-align: right;
	text-transform:lowercase;
	letter-spacing:5px;
	margin: 0px 5px 5px;
	text-shadow: 1px 0px 0px #000,
	0px 1px 0px #000,
	-1px 0px 0px #000,
	0px -1px 0px #000,
	0px 0px 20px #000;
	}

	h2{
	border-bottom:1px dotted #666;
	color:#666;
	width:150;
	font-size:8px;
	line-height: 8px;
	font-family:Silkscreen;
	text-align: left;
	text-transform:uppercase;
	margin: 5px 5px 5px;
	text-shadow: 1px 0px 0px #000,
	0px 1px 0px #000,
	-1px 0px 0px #000,
	0px -1px 0px #000,
	0px 0px 20px #000;
	}

	#credit {position:fixed;
	right:0;
	bottom:0;
	}

@font-face {font-family:Silkscreen; src: url(http://static.tumblr.com/qbwrk8v/zmWlpdkl0/slkscr.ttf);}

</style>
<div id="whole" oncontextmenu="return false;">

<div id="credit">
<img src="http://i.imgur.com/W7shDgb.png" width="100">
</div>

<div id="content">

<div id="box">

<div id="meow">
<img src="http://www.clippix.com/images/pastelgoth/pentagram%20-%20brambles.png">
</div>

<div id="gif">
<img src="http://i.imgur.com/AsdoBlx.jpg?1">
</div>

<div id="image2">
</div>

<div id="quote">
<i>

“quote here”

</i>
</div>

<div id="navi">

<a href="#">reset</a>
<br><br>
<a href="#one">The Legend</a>
<br><br>

<a href="#two">Personal Stats</a>
<br><br>

<a href="#three">History</a>
<br><br>

<a href="#four">Abilities</a>

<br><br>
<a href="#five">Extra!!</a>
</div>

<div id="one" class="info">

<h1>Hansel and Gretel</h1>

<h2>Witch-Hunters</h2>

<li>i use this for ooc. you should too.</li>
<br>

this comes in handy for stats
<br>


</div>

<div id="two" class="info">
<h1>Cordelia C. Clemens</h1><br<<br>
<I>Given Name:</I><font style=float:right>Cordelia Constance Clemens</font><br>
<I>Nickname(s):</I><font style=float:right>Cordie; Triple C</font><br>
<I>Alias(es):</I><font style=float:right>Triple C; Witchy Woman</font><br>
<I>Age:</I><font style=float:right>20-Something</font><br>
<I>D.o.B.:</I><font style=float:right>August 16th</font><br>
<I>P.o.B.:</I><font style=float:right>Grimmwell</font><br>
</div>

<div id="three" class="info">
<h1>The Story?</h1>

</div>

<div id="four" class="info">
<h1>Abilities</h1>

</div>

<div id="five" class="info">
<h1>OOC</h1>

</div>
</div>

<div id="background">
</div>

<div id="image">
<img src="http://thumb.connect360.vn/unsafe/0x0/img.gosutv.vn/pictures/2014/11/28/1417171133_kF6dHstx.jpg">
<div id="title">
<i>"salem, 1692"</i>
</div>
</div>