turn-out-mag
<!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>Turn Out Mag - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 12px Arial;
color: #808080;
background: #FFFFFF url(turn-out-mag-images/background.gif) repeat-x 0 0;
}
a {
text-decoration: none;
color: #688F96;
}
a:hover {
text-decoration: underline;
color: #ff0000;
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 975px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 160px;
}
#header ul {
list-style-type: none;
float: left;
}
#header ul li {
float: left;
font-weight: bold;
font-family: Verdana;
font-size: 0.9em;
}
#header ul li a {
color: #FFFFFF;
display: block;
text-transform: uppercase;
padding: 8px 15px 9px;
}
#header ul li a:hover, #header ul li.here a {
background: url(turn-out-mag-images/active.gif) no-repeat bottom center;
text-decoration: none;
}
#header .rss {
float: right;
background: url(turn-out-mag-images/rss.gif) no-repeat 0 7px;
padding: 9px 10px 9px 20px;
font-size: 0.8em;
font-family: Verdana;
color: #FFFFFF;
}
#header .rss a {
color: #FFFFFF;
margin: 0 7px;
}
#header h1 {
clear: both;
float: left;
padding: 43px 0 0 12px;
}
#header h1 a {
display: block;
text-indent: -9999px;
outline: none;
width: 352px;
height: 44px;
background: url(turn-out-mag-images/logo.gif) no-repeat 0 0;
}
#header .ad {
float: right;
padding: 35px 6px 0 0;
}
/** END header **/
/** BEGIN content **/
#content {
float: left;
width: 655px;
overflow: hidden;
padding-bottom: 11px;
}
#content .post {
float: left;
width: 315px;
padding: 11px 10px 0 0;
}
#content .post .details1 {
background-color: #ECEBEB;
color: #808080;
font-size: 0.8em;
font-family: Verdana;
font-weight: bold;
padding: 8px 7px;
text-transform: uppercase;
margin-bottom: 5px;
}
#content .post .details1 a{
color: #456069;
text-decoration: none;
}
#content .post .buffer {
padding: 4px;
background-color: #ECEBEB;
margin: 0;
}
#content .post .content{
border: 1px solid #CBCBCB;
padding: 10px;
background-color: #ffffff;
height: 160px;
}
#content .post .content img {
border: 3px solid #ECEBEB;
margin: 4px 8px 5px 0;
float: left;
width: 80px;
}
#content .post .content h2 {
margin-bottom: 5px;
font-size: 1.5em;
line-height: 1.3em;
}
#content .post .content h2 a {
text-decoration: none;
color: #456069;
font-size: 0.8em;
}
#content .post .content p {
line-height: 1.5em;
}
#content .post .details2 {
background-color: #ECEBEB;
padding: 8px 7px;
border-width: 0 1px 1px;
border-style: solid;
border-color: #CBCBCB;
}
#content .post .details2 a {
color: #456069;
font-size: 0.8em;
font-family: Verdana;
font-weight: bold;
text-transform: uppercase;
}
#content .post .details2 a:hover {
text-decoration: none;
}
#content .postnav {
padding: 20px 5px;
font-size: 0.9em;
font-weight: bold;
clear: both;
}
#content .postnav a {
color: #456069;
}
#content .title {
font-size: 0.9em;
text-transform: uppercase;
padding: 15px 5px 10px;
letter-spacing: 1px;
}
#content .single {
padding: 15px 15px 10px 0;
}
#content .single h2 {
font-size: 1.4em;
margin-bottom: 15px;
}
#content .single p {
line-height: 1.4em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.4em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 0;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
margin-bottom: 10px;
}
#content .single h3, h4, h5, h6 {
font-size: 1.4em;
margin-bottom: 5px;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
width: 320px;
float: right;
padding: 11px 0 20px;
}
#sidebar .l {
float: left;
width: 155px;
}
#sidebar .r {
float: right;
width: 155px;
}
#sidebar .box {
background-color: #ECEBEB;
padding: 4px;
margin-bottom: 10px;
}
#sidebar .box h2 {
background-color: #ffffff;
font-size: 0.9em;
font-family: Verdana;
color: #456069;
padding: 8px;
border: 1px solid #CBCBCB;
}
#sidebar .box ul {
background-color: #ffffff;
list-style-type: none;
padding: 4px 8px 8px;
border-width: 0 1px 1px;
border-style: solid;
border-color: #cbcbcb;
}
#sidebar .box li {
font-size: 0.9em;
font-family: Verdana;
line-height: 1.4em;
padding: 3px 0 3px 14px;
border-bottom: 1px dotted #dddddd;
background: url(turn-out-mag-images/bullet.gif) no-repeat 0 8px;
}
#sidebar .box li a {
color: #688F96;
}
#sidebar .box p, #sidebar .box div {
background-color: #ffffff;
padding: 8px;
border-width: 0 1px 1px;
border-style: solid;
border-color: #cbcbcb;
}
#sidebar .box .flickr {
text-align: center;
}
#sidebar .box .flickr img {
margin: 4px 8px;
}
#sidebar .box .video {
padding: 9px;
}
#sidebar form {
width: 310px; height: 33px;
background: #ECEBEB url(turn-out-mag-images/search.gif) no-repeat center;
padding: 4px;
margin-bottom: 10px;
}
#sidebar form input {
float: left;
border: 0;
width: 218px;
font-size: 1.2em;
font-family: Verdana;
margin: 8px;
}
#sidebar form button {
float: right;
width: 75px; height: 33px;
font-size: 0.9em;
font-family: Verdana;
font-weight: bold;
color: #ffffff;
border: 0;
background-color: transparent;
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #456069;
color: #FFFFFF;
font-family: Verdana;
font-size: 0.9em;
}
#footer a {
color: #ffffff;
}
#footer p {
padding: 15px 0;
text-align: left;
width: 975px;
margin: auto auto;
}
/** END footer **/
/** BEGIN miscellaneous **/
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.3em;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
padding: 0 10px;
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 260px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
/** BEGIN wordpress 2.7 comments **/
#comments ol {
list-style-type: none;
clear: both;
margin: 0;
}
#comments .buffer {
padding: 20px 15px 0 0;
}
#comments h2 {
padding-left: 0 !important;
padding-bottom: 20px !important;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 10px 20px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
/** END wordpress 2.7 comments **/
</style>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>
<body>
<!-- BEGIN wrapper -->
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="page.html">Demo Page</a></li>
<li><a href="contact.html">Contact Page</a></li>
</ul>
<p class="rss"> <a href="http://www.free-css.com/">Posts</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Email</a> </p>
<h1><a href="http://www.free-css.com/">Turn Out Mag</a></h1>
<div class="ad"><a href="http://www.free-css.com/"><img src="turn-out-mag-images/ad468x60.gif" alt="" /></a></div>
</div>
<!-- END header -->
<!-- BEGIN content -->
<div id="content">
<div class="single">
<h2>About Us</h2>
<div class="content">
<p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
</div>
</div>
</div>
<!-- END content -->
<!-- BEGIN sidebar -->
<div id="sidebar">
<!-- begin search -->
<form action="http://www.free-css.com/">
<input type="text" name="s" id="s" value="" />
<button type="submit">Search</button>
</form>
<!-- end search -->
<!-- begin popular articles -->
<div class="box">
<h2>Popular Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Site Amet Veritas Vos</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Site Amet Veritas Vos</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Site Amet Veritas Vos</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Site Amet Veritas Vos</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Site Amet Veritas Vos</a></li>
</ul>
</div>
<!-- end popular articles -->
<!-- begin flickr rss -->
<div class="box">
<h2>Flickr RSS</h2>
<p class="flickr"> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb02.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb03.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb04.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb05.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb06.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="turn-out-mag-images/thumb07.jpg" alt="" /></a> </p>
</div>
<!-- end flickr rss -->
<!-- begin featured video -->
<div class="box">
<h2>Featured Video</h2>
<div class="video"><img src="turn-out-mag-images/video.jpg" alt="" /></div>
</div>
<!-- end featured video -->
<!-- BEGIN left -->
<div class="l">
<!-- begin categories -->
<div class="box">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Advertising</a></li>
<li><a href="http://www.free-css.com/">Entertainment</a></li>
<li><a href="http://www.free-css.com/">Fashion</a></li>
</ul>
</div>
<!-- end categories-->
</div>
<!-- END left -->
<!-- BEGIN right -->
<div class="r">
<!-- begin archives -->
<div class="box">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">March 2009</a></li>
<li><a href="http://www.free-css.com/">February 2009</a></li>
<li><a href="http://www.free-css.com/">January 2009</a></li>
<li><a href="http://www.free-css.com/">December 2008</a></li>
</ul>
</div>
<!-- end archives -->
</div>
<!-- END right -->
</div>
<!-- END sidebar -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
<p>Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved | Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a> </p>
</div>
<!-- END footer -->
</body>
</html>
Related examples in the same category