Character Masterlist #7

<!DOCTYPE html>

<!----------------------

	CHARACTER MASTERLIST #7 by JAKEHELPS
		#1: Do not redistribute & claim as your own.
		#2: Do not remove the credit.

		---------------------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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=Fjalla+One' rel='stylesheet' type='text/css'>

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

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

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

</head>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #FEFEFE;
	background-attachment: fixed;
	background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_250.jpg');
	margin-bottom: 60px;

}

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

b {
	color: #299999;
}

::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: #299999; }

::-webkit-scrollbar-thumb:horizontal {
    height:30px;
    background-color: #299999; }

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

#olympus {
	margin: auto;
	width: 900px;
	padding: 30px;
	height: 50px;
	background-color: #202020;
}

#content {
	margin: auto;
	width: 930px;
	padding: 0px;
	margin-top: 30px;
	background-color: #606060;
	height: auto;
	margin-bottom: 80px;
}

.crown {
	font-family: quicksand;
	font-size: 22px;
	color: #FFFFFF;
	text-align: center;
	display: block;
	text-transform: uppercase;
	letter-spacing: 4px;
}

#box {
	width: 300px;
	height: 200px;
	background-color: #202020;
	float: left;
	margin: 5px;
}

#box img {
	width: 150px;
	height: 200px;
	background-color: #299999;
}

.info {
	float: right;
	width: 125px;
	height: 180px;
	padding: 10px;
}

.name {
	font-family: fjalla one;
	font-size: 12px;
	color: #FFFFFF;
	display: block;
	letter-spacing: 1px;
	background-color: #299999;
	padding: 2px;
	border-radius: 2px;
	text-transform: uppercase;
	text-align: center;
}

.specs {
	text-align: left;
	font-family: cambria;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 100%;
	margin-top: 10px;
	height: 130px;
	overflow: auto;
}

.links {
	display: block;
	margin-top: 5px;
	text-align: center;
}

.links a {
	padding: 2px 10px 2px 12px;
	background-color: #299999;
	color: #FFFFFF;
	font-family: fjalla one;
	font-size: 10px;
	margin: 5px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-radius: 2px;
	-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 {
	color: #299999;
	background-color: #FFFFFF;
}

</style>
<body>
<div id="olympus">
	<div class="crown">The Characters</div>
	<div class="links">
		<a href="#">Home</a>
		<a href="#">Message</a>
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="http://jakehelps.tumblr.com">&copy;</a>

	</div>
</div>

<div id="content">
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Jonathan Riley</div>
			<div class="specs">
				<b>Age</b>: 19<br />
				<b>Grade</b>: Senior<br />
				<b>Homeroom</b>: Physics Honors, A-304<br />
				<b>Occupation</b>: Senior Class President<br />
				<b>Known for</b>: Confidence, witts, prowess in improvisions, being a leader<br />
				<b>Friends</b>: Crystal Bonsworth, Trenton Vanderguilt, Jackson Udontise, Kory Montevisto, and Priscilla Han<br />
				<b>Status</b>: Active<br />
			</div>
		</div>
	</div>
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Kennedy Whiteley</div>
			<div class="specs">
				INSERT LONG ASS DESCRIPTION
			</div>
		</div>
	</div>
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Meredith Acosta</div>
			<div class="specs">
				INSERT LONG ASS DESCRIPTION
			</div>
		</div>
	</div>
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Ducati Uchimatsu</div>
			<div class="specs">
				INSERT LONG ASS DESCRIPTION
			</div>
		</div>
	</div>
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Annabella Grove</div>
			<div class="specs">
				INSERT LONG ASS DESCRIPTION
			</div>
		</div>
	</div>
<!-BOX->
	<div id="box">
		<a href="#"><img src="http://static.tumblr.com/kamm2qy/Ka7mou170/sawd.png" /></a>
		<div class="info">
			<div class="name">Sheen Warrington</div>
			<div class="specs">
				INSERT LONG ASS DESCRIPTION
			</div>
		</div>
	</div>

<!- INSERT BOXES HERE ->


</div>


</body>
</html>