<!doctype html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { font: 15px/2 Georgia, serif; background: #999; }
h1, h2, h3 {margin:0px;padding:0px;font-family:Georgia; text-transform:uppercase;color:#A04B51;}
h1 {font-size:1.125em;}
h2 {font-size:1em;font-family:Arial;color:#515151;}
p {font-family:Arial;font-size:0.750em;}
ul {list-style-type:none;}
li {line-height:1em;}
.clearfix {zoom: 1 /*ie6/7*/}
.clearfix:after { /*rest*/
height: 0px !important;
clear: both;
display: block;
position: relative;
}
.clearfix { display: inline-block; }
.clear {clear:both;}
#page-wrap { max-width: 960px; min-width: 560px; margin: 0 auto; position: relative; zoom: 1; }
#header { max-width: 960px; min-width: 560px; background: #222; color: #fff;
margin: 15px auto 0; }
#main-content { padding: 0 190px; background: white; }
#main-sidebar { position: absolute; left: 0; top: 0; width: 160px; bottom: 0;
background: #eee; padding: 0 10px; }
#secondary-sidebar { position: absolute; right: 0; top: 0; width: 160px; bottom: 0;
background: #eee; padding: 0 10px }
#footer { max-width: 960px; min-width: 560px; background: #222;margin: 0 auto 15px; }
#footer p { padding: 10px; color: white; }
#footer a { color: white; border-bottom: 1px dotted white; text-decoration: none; }
#footer a:hover { border-bottom-style: solid; }
.article {padding:1em 2em 2em 2em;}
#secondary-sidebar .article {padding:0.5em 0em;}
#secondary-sidebar .article p {line-height:1em;padding:0.5em 0;}
#main-sidebar .nav li {border-bottom:1px solid #515151;padding:0.5em 0;}
#main-sidebar .nav ul {margin:1em 0;font-size:0.8em;}
.article-block {padding:0 0 2em 0;}
.article-block .left {width:40%;float:left;margin: 0 5%;}
.article-block .right {width:40%;float:left;margin:0%;}
.article-block h3 {line-height:1.5em;font-size:1.1em;}
#main-content ul {padding: 20px;}
#main-content li {padding: 10px 0px;}
</style>
</head>
<body>
<?php
include_once 'element.php';
include_once 'lorem.php';
echo lorem::layout('
<div id="header">{Lorem.image, 100, 95}</div>
<div id="page-wrap">
<div id="main-sidebar">
<div class="nav">
{Lorem.navigation, 0, 2, 5}
</div>
{Lorem.teaser}
{Lorem.separator}
{Lorem.teaser}
{Lorem.separator}
{Lorem.image, 100, 400}
{Lorem.separator}
{Lorem.teaser}
</div>
<div id="main-content">
{Lorem.article, 1}
{Lorem.article, 3, 3}
{Lorem.separator}
{Lorem.navigation, 1, 20}
</div>
<div id="secondary-sidebar">
{Lorem.teaser, 1}
{Lorem.separator}
{Lorem.teaser, 1}
{Lorem.separator}
{Lorem.teaser, 1}
{Lorem.separator}
{Lorem.image, 100, 200}
</div>
</div>
<div id="footer">Footer</div>
');
?>
</body>
</html>
|