<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Curve CSS3 Test</title>
<style type="text/css">
* {
border: 0 none;
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #346;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
html {
background-color: #e9eef2;
background-image: -moz-linear-gradient(top, #375a77, #e9eef2 477px, #e9eef2);
background-image: -webkit-gradient(linear, left top, left bottom, from(#375a77), color-stop(80%, #e9eef2), to(#e9eef2));
background-attachment: fixed;
height: 100%;
}
body {
padding: 15px 5% 10px;
font: 78%/130% "Verdana","Arial","Helvetica",sans-serif;
color: #444444;
}
#outer_edge {
border: 3px solid white;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: -moz-linear-gradient(top, #c9d7e8, white 145px, white 92%, #e1e9f3);
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9d7e8), color-stop(30%, #ffffff), color-stop(92%, #ffffff), to(#e1e9f3));
/* simulate a second border */
-moz-box-shadow: 0 0 1px #6a6a6a;
-webkit-box-shadow: 0 0 1px #6a6a6a;
box-shadow: 0 0 1px #6a6a6a;
padding: 5px;
}
.forum_title {
font-family: Geneva,verdana,sans-serif;
font-size: 1.8em;
line-height: 42px;
padding: 0 0 0 10px;
margin: 0;
}
#outer_container {
margin: 10px 0 10px;
}
#upper_section {
padding: 20px;
margin-bottom: 1.5em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: -moz-linear-gradient(top, #c3cfde, white);
background-image: -webkit-gradient(linear, left top, left bottom, from(#c3cfde), to(#ffffff));
min-height: 90px;
font-size: 0.9em;
line-height: 1.2em;
}
.greeting {
font-size: 1.2em;
line-height: 1.7em;
font-weight: bold;
}
#menu {
font-size: 90%;
padding: 5px 15px;
}
#menu a {
background-color: white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 2px 5px;
}
#menu a.active {
background-color: #fd9604;
color: white;
font-weight: bold;
}
#menu a:hover {
background-color: #375a77;
color: white;
text-decoration: none;
}
#navigation {
border-top: 1px solid #cccccc;
font-size: 90%;
margin: 5px 15px;
padding: 5px;
}
#content {
font-size: 90%;
padding: 5px 15px;
background-color: white;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
height: 300px; /* FAKE IT */
}
.catbg {
padding: 7px 10px;
font-size: 1.2em;
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, #6a7f97, #a6b8cb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a7f97), to(#a6b8cb));
color: white;
}
#copyright {
font-size: 80%;
text-align: center;
padding: 5px;
}
#copyright span {
word-spacing: 8px;
}
</style>
</head>
<body>
<div id="outer_edge">
<h1 class="forum_title"><a href="#">My Forum Name</a></h1>
<div id="outer_container">
<p id="upper_section">
<span class="greeting">Hello, Fustrate</span>
<a href="#">Show unread posts since last visit.</a>
<a href="#">Show new replies to your posts.</a>
<time>August 04, 2010, 09:02:58 AM</time>
</p>
<!-- Menu -->
<nav id="menu">
<ul>
<li class="active" href="#">Home</a>
<li href="#">Help</a>
<li href="#">Search</a>
<li href="#">Admin</a>
<li href="#">Moderate</a>
<li href="#">Profile</a>
<li href="#">My Messages</a>
<li href="#">Members</a>
<li href="#">Logout</a>
</ul>
</nav>
<!-- Breadcrumbs -->
<div id="navigation">
My Forum Name
</div>
<header>
<span>Author</span>
<span>Topic: </span>
<h2 class="catbg">CSS3 Curve-like Demo</h2>
<p>Read 1460 times</p>
</header>
<article id="content">
<article id="msg2748933">
<header>
<h3>CSS3 Curve-like Demo</h3>
<p>on: <time pubdate>August 16, 2010, 11:31:09 PM</time></p>
</header>
<div class="author">
<h3><a rel="author" href="#">groundup</a></h3>
<a rel="author" href="#"><img src="#"></a>
</div>
<footer>
<span class="bbc_bold">How have you bettered the world today?</span>
Information is power. Empower the people.
</footer>
</article>
<article id="msg2748939">
<header>
<h3>Re: CSS3 Curve-like Demo</h3>
<p>Reply #1 on: <time pubdate>August 16, 2010, 11:38:39 PM</time></p>
</header>
<div class="author">
<h3><a rel="author" href="#">groundup2</a></h3>
<a rel="author" href="#"><img src="#"></a>
</div>
<footer>
<span class="bbc_bold">How have you bettered the world today?</span>
Information is power. Empower the people.
</footer>
</article>
</article>
</div>
</div>
<!-- Copyright, etc. -->
<footer id="copyright">
Powered by SMF 2.0 RC4... Not Really | The Copyright Goes Here
<span>XHTML RSS WAP2</span>
</footer>
</body>
</html>