JoshuaKimsey/sidebar.html

## sidebar.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Sidebar Skin</title>
    <style>
    * {
		font-family:"Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
text-align: center;
		}

		.negate-box-margin *
		{
		background:transparent;
		border:0;
		margin:0;
		padding:0;
		}
		.gr-box
		{
		background:#ffffff;
		border:1px solid #000000;
		}
		.text a
		{
		text-decoration:none;
		color:#cc0000;
		transition:all ease-in-out .70s;
		}
		.text a:hover
		{
		color:#5a5a5a;
		text-decoration:underline;
		}
		.list, .gr-top h2 img, .bottom .hsep, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
		{
		display:none;
		}
		.gr-top *
		{
		padding:0 !important;
		}
		.gr-top
		{
		position:absolute;
		top:70px;
		right:20px;
		left:20px;
		text-align:center;
		}
		.gr-top h2
		{
		font-size:30px;
		color:#cc0000;
		}
		.gr-top h2 a
		{
		color:#cc0000;
		text-decoration:none;
		transition:all ease-in-out .5s;
		}
		.gr-top h2 a:hover {
		color:#5a5a5a;
		text-decoration:underline;
		}
		.sidebar
		{
		display:inline;
		position: absolute;
		top:0px;
		left:0px;
		z-index:100;
		width:180px;
		margin-left:-181px;
		background: rgba(90, 90, 90, .5);
		cursor:pointer;
		transition:all ease-in-out .70s;
		}
		.sidebar:hover
		{
		margin:0px;
		box-shadow: 0 0 4px #200;
		}
		.sidebar::after
		{
		content:"Menu >";
		display:inline;
		position: absolute;
		top:10px;
		left:180px;
		z-index:200;
		background:#5a5a5a;
		padding:5px 5px 8px 7px;
		font-size:14px;
		border-top:1px solid #000000;
		border-right:1px solid #000000;
		border-bottom:1px solid #000000;
		font-size:14px;
		letter-spacing:1px;
		color:#eeeeee;
		transition:all ease-in-out .70s;
		}
		.sidebar:hover::after{
		background:#000000;
		content:'Menu <'
		}
		.sidebar ul
		{
		list-style-type:none;
		padding-left:0 !important;
		}
		.sidebar ul a
		{
		display:block;
		color:#eeeeee;
		text-align:center;
		background:#5a5a5a;
		text-decoration:none;
		width:150px;
		height:33px;
		padding-top:7px;
		margin:0px 15px 7px 15px;
		border:2px solid #000000;
		font-size:14px;
		transition: all ease-in-out .70s;
		}
		.sidebar ul a:hover
		{
		color:#eeeeee;
		text-align:center;
		background:#000000;
		}
		.text
		{
		margin:130px 20px 20px 20px;
		font-size:13px;
		color:#5a5a5a;
		}
		.text h1 {
		padding-left:10px;
		font-size:30px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text h2 {
		padding-left:10px;
		font-size:25px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text h3
		{
		padding-left:10px;
		font-size:20px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text h4 {
		padding-left:10px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text h5 {
		padding-left:10px;
		font-size:14px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text h6 {
		padding-left:10px;
		font-size:11px;
		font-weight:normal;
		color:#cc0000;
		border-left:3px solid #cc0000;
		}
		.text ul
		{
		padding-left:40px;
		}
		.text li
		{
		margin-bottom:-5px;
		padding-top:4px;
		}
		a.thumb img
		{
		border:2px solid #ffffff;
		padding:5px;
		background: #eeeeee;
		transition:all ease-in-out .70s;
		}
		a.thumb img:hover
		{
		background:#5a5a5a;
		border: 2px solid #000000
		}
		a.commentslink
		{
		color:#cc0000;
		text-decoration:none;
		transition:all ease-in-out .70s;
		}
		a.commentslink:hover
		{
		color:#5a5a5a;
		text-decoration:underline;
		}
		a.external:after {
		content: "";
		}
		.text blockquote {
		width:60%;
		text-align:justify;
		font-size:13px;
		background:#eeeeee;
		padding:10px 30px;
		position:relative;
		}
		.text blockquote:before {
		font-size: 35px;
		color: #cc0000;
		content: open-quote;
		}
		.text blockquote:after {
		font-size: 35px;
		color: #cc0000;
		content:close-quote;
		}
		.code {
		background: #5a5a5a;
		width: 60%;
		font-family: "Courier";
		padding:10px 30px;
		color: #eeeeee;
		position:relative;
		}
    </style>
</head>
<body>
    <div class="sidebar">
<ul>
<a href="http://hsoj95.deviantart.com/"><li>Home</li></a>
<a href="http://hsoj95.deviantart.com/gallery/49614551/4K-Images-and-Art"><li>4K Artwork</li></a>
<a href="http://hsoj95.deviantart.com/gallery/"><li>Gallery</li></a>
<a href="http://hsoj95.deviantart.com/journal/"><li>Journals</li></a>
<a href="http://hsoj95.deviantart.com/favourites/"><li>Favorites</li></a>
<a href="http://my.deviantart.com/deviants/add/hsoj95"><li>Watch Me!</li></a>
<a href="http://canines-unite.deviantart.com"><li>Canines-Unite</li></a>
</ul>
</div>
</body>
</html>