wow that was a lot harder than I thought it would be LOL
live view:
http://testing1357.herobo.com/
Code:
<!DOCTYPE html>
<html>
<head>
<title>League Town</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<style type="text/css">
* { margin: 0; padding: 0; }
body, html {
background-color: #333;
height: 100%;
}
body {
font: 13px/1.5 Arial, Helvetica, sans-serif;
}
a { }
a:hover { text-decoration: underline; }
fieldset {
border: 1px solid;
}
.boxes {}
.boxes fieldset {
border: none !important;
border-top: #000 3px solid !important;
min-height: 40px
}
.boxes fieldset legend {
border: #000 3px solid;
padding: 5px 10px;
background-color: #DDD;
margin-left: 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
font-weight: bold;
}
.boxes .box {
border: #000 3px solid;
overflow: hidden;
width: 100%;
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 8px;
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
}
.boxes .small-box {
position: relative;
}
.boxes .joined {}
.boxes .joined .small-box {
}
.boxes .joined .divider {
height: 100%;
background-color: #000;
width: 3px;
position: absolute;
left: -3px;
margin-top: 16px;
}
.boxes .location {
margin-bottom: 10px;
}
.boxes .location .loc {
width: 521px;
float: left;
}
.boxes .location .nav {
width: 370px;
float: right;
}
.filler {
min-height: 200px;
}
/* -----[header]----- */
#header { height: 40px; }
/* -----[content]----- */
#content {
width: 900px;
margin: 0 auto;
border: #000 1px solid;
padding: 20px;
background-color: #666;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="content">
<div id="town-name" class="boxes">
<div class="location joined box">
<div class="loc small-box">
<fieldset>
<legend>Location</legend>
<div class="filler"></div>
</fieldset>
</div>
<div class="nav small-box">
<div class="divider"></div>
<fieldset>
<legend>Navigation</legend>
<div class="filler"></div>
</fieldset>
</div>
</div>
<div class="monsters box">
<div class="small-box">
<fieldset>
<legend>Monsters</legend>
<div class="filler"></div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
