Roleplay Info Theme #1

<!DOCTYPE html>
<!--------

			ABOUT ROLEPLAY PAGE #1 - DYLANOHELPS
			#1: Don't remove the credit.
			#2: Don't redistribute and claim as your own.
			#3: Customize as you like!

			© Copyright 2013 - Dylan O. Helps | Tumblr

--------->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />

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

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


</head>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-style: none;
	background-image:url('http://24.media.tumblr.com/0942176c144e0519b0e8a8a9aac7b807/tumblr_mlvdw2ltmy1sofm3xo1_250.png');
	background-attachment: fixed;
}

a {
	text-decoration: none;
	color: black;
}

::-webkit-scrollbar-thumb:vertical {
    height:10px;
	border-radius: 2px;
    background-color: #303030; }

::-webkit-scrollbar-thumb:horizontal {
    height:20px;
    background-color: #f3f3f3; }

::-webkit-scrollbar {
    height: 10px;
    width: 5px;
    background-color: #FFFFFF; }

#heaven {
	display: block;
	position: fixed;
	width: 900px;
	height: 70px;
	background-image:url('http://24.media.tumblr.com/0942176c144e0519b0e8a8a9aac7b807/tumblr_mlvdw2ltmy1sofm3xo1_250.png');
	margin-left: 240px;
	margin-top: 0px;
	border-bottom: 3px solid #544054;
	padding-top: 80px;
}

.links {
	margin-top: 25px;
	margin-left: 10px;
	float: left;
}

.links a {
	font-family: 'Roboto Condensed';
	font-size: 10px;
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
	background-color: #505050;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.links a:hover {
	background-color: #606060;
	padding-top: 20px;
	padding-bottom: 20px;
}

.title {
	float: right;
	margin-right: 20px;
	font-family: 'old standard tt';
	font-size: 34px;
	margin-top: 10px;
	color: #707070;
}

		/* MIDDLE */

#earth img {
	display: inline-block;
	width: 850px;
	height: 420px;
	background-color: #202020;
	margin-left: 265px;
	margin-top: 170px;
}

.bordered {
	display: inline-block;
	width: 900px;
	height: 20px;
	margin-left: 240px;
	margin-top: -6px;
	border-bottom: 3px solid #544054;
}

#hell {
	width: 843px;
	height: auto;
	background-color: transparent;
	margin-left: 263px;
	margin-top: 8px;
	margin-bottom: 50px;
	padding: 5px;
}

.topic {
	width: 268px;
	height: auto;
	padding: 5px;
	text-align: center;
	font-family: 'roboto condensed';
	font-size: 10px;
	text-transform: uppercase;
	color: #CCCCCC;
	background-color: #404040;
	margin-bottom: 4px;
}

.description {
	float: left;
	width: 270px;
	height: 250px;
	overflow: auto;
	background-color: #101010;
	padding: 4px;
	font-family: Arial Unicode MS;
	font-size: 11px;
	color: #CCCCCC;
}

table {
	width: 278px;
	overflow: auto;
	background-color: #101010;
	padding: 4px;
	font-family: Arial Unicode MS;
	font-size: 11px;
	color: #CCCCCC;

}

tr {
	overflow: auto;
}

td {
	border-bottom: 1px solid #544054;
}

.info {
	display: inline-block;
}

.mostwanted img {
	float: right;
	width: 278px;
	height: 258px;
	background-color: #303030;
}

#credit a {
	width: 12px;
	height: 12px;
	padding: 5px;
	font-family: 'roboto condensed';
	font-size: 10px;
	color: #FFFFFF;
	background-color: #0195ab;
	margin-bottom: 10px;
	float: right;
	margin-right: 10px;
	opacity: 0.3;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#credit a:hover {
	opacity: 1;
}


</style>
<body>
<div id="heaven">
	<div class="links">
	<a href="#">Home</a>
	<a href="#">Message</a>
	<a href="#">Link 1</a>
	<a href="#">Link 2</a>
	<a href="#">Link 3</a>
	</div>
	<div class="title">
	About Vanity Magazine
	</div>
</div>
<div id="earth">
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/970_vanity_fair_hollywood_21.jpg" />
</div>

	<div class="bordered"></div>

<div id="hell">
	<div class="info">
	<div class="topic">Full Plot</div>
	<div class="description">
	From the highest peaks of Beverly Hills to the high class luxury homes in the Hamptons, fame and fortune has taken its toll on those who have been deemed talented and gracious. The lucky ones have been rewarded with fortune and fame, and not to mention all the screaming fans that have been looking up to them. But with news stories about their daily lives and rumors that has been dreaded to be heard since day 1, Vanity Magazine has been keeping you up to date with the latest news and gossip of the celebrities. Here at Vanity, we are comletely friendly and we also have a modeling section for those who we think are worthy to be on out monthly covers. But like all famous beings, you have to work your way up to the top in order to be on the A List. Do you think you have what it takes to be on Vanity Magazine? Find out and apply now at Vanity Magazine RPG!
	</div>
	</div>

	<div class="info">
	<div class="topic">Latest Updates</div>
	<table>
	<tbody>
		<tr>
			<td>Update 4.26.13: This box doesn't have a set height, so I suggest that you keep it under the who section height so it doesn't go over and stretch.</td>
		</tr>
		<tr>
			<td>Update 4.25.13: First event has been launched: Battle for the Western Islands!</td>
		</tr>
		<tr>
			<td>Update 4.25.13: Paras due today! Turn them in now or receive a warning notice.</td>
		</tr>
		<tr>
			<td>Update:</td>
		</tr>
	</tbody>
	</table>
	</div>

	<div class="info">
	<div class="topic">Celebrity Of The Week</div>
	<div class="mostwanted">
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Untitled-1.png" />
	</div>
	</div>
</div>

<div id="credit">
	<a href="http://dylanohelps.tumblr.com">DO</a>
</div>

</body>
</html>