Hi,
I created a quick template with Artisteer and have modified the CSS a little to suit my needs.
The problem is Artisteer generates weird code and I can’t get a div to be centered (the container where main content will go) The Div class is “art-post” I have tried to center it with text-align or even align=center in html but it must inherit its position from somewhere else. Basically I want the art-post div to be centered.
HTML:
<!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" dir="ltr" lang="en-US" xml:lang="en">
<head>
<!--
Created by Artisteer v3.0.0.33215
Base template (without user's data) checked by <a href="http://validator.w3.org" rel="nofollow">http://validator.w3.org</a> : "This page is valid XHTML 1.0 Transitional"
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Artisteer </title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="art-main">
<div class="art-sheet">
<div class="art-sheet-body">
<div class="art-header">
<div class="art-header-center">
<div class="art-header-jpeg"></div>
</div>
<div class="art-header-fluid-object"></div>
</div>
<div class="art-nav">
<div class="l"></div>
<div class="r"></div>
<div class="art-nav-center">
<ul class="art-menu">
<li>
<a href="#" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
</li>
<li>
<a href="#"><span class="l"></span><span class="r"></span><span class="t">Menu Item</span></a>
<ul>
<li><a href="#">Menu Subitem 1</a>
<ul>
<li><a href="#">Menu Subitem 1.1</a></li>
<li><a href="#">Menu Subitem 1.2</a></li>
<li><a href="#">Menu Subitem 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu Subitem 2</a></li>
<li><a href="#">Menu Subitem 3</a></li>
</ul>
</li>
<li>
<a href="#"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
</li>
</ul>
</div>
</div>
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content">
<div class="art-post">
<div class="art-post-tl"></div>
<div class="art-post-tr"></div>
<div class="art-post-bl"></div>
<div class="art-post-br"></div>
<div class="art-post-tc"></div>
<div class="art-post-bc"></div>
<div class="art-post-cl"></div>
<div class="art-post-cr"></div>
<div class="art-post-cc"></div>
<div class="art-post-body">
<div class="art-post-inner art-article">
<h2 class="art-postheader">Welcome</h2>
<div class="art-postcontent">
<img src="images\\preview.jpg" alt="an image" style="float:left;" />
<p>Lorem ipsum dolor sit amet,
<a href="#" title="link">link</a>, <a class="visited" href="#" title="visited link">visited link</a>,
<a class="hover" href="#" title="hovered link">hovered link</a> consectetuer
adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl
in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
<p>
<span class="art-button-wrapper">
<span class="art-button-l"> </span>
<span class="art-button-r"> </span>
<a class="art-button" href="javascript:void(0)">Read more...</a>
</span>
</p>
<div class="cleared"></div>
<div class="art-content-layout overview-table">
<div class="art-content-layout-row">
<div class="art-layout-cell">
<div class="overview-table-inner">
<h4>Support</h4>
<img src="images/01.png" width="55" height="55" alt="an image" class="image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div><!-- end cell -->
<div class="art-layout-cell">
<div class="overview-table-inner">
<h4>Development</h4>
<img src="images/02.png" width="55" height="55" alt="an image" class="image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div><!-- end cell -->
<div class="art-layout-cell">
<div class="overview-table-inner">
<h4>Strategy</h4>
<img src="images/03.png" width="55" height="55" alt="an image" class="image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div><!-- end cell -->
</div><!-- end row -->
</div><!-- end table -->
</div>
<div class="cleared"></div>
</div>
<div class="cleared"></div>
</div>
</div>
<div class="art-post">
<div class="art-post-tl"></div>
<div class="art-post-tr"></div>
<div class="art-post-bl"></div>
<div class="art-post-br"></div>
<div class="art-post-tc"></div>
<div class="art-post-bc"></div>
<div class="art-post-cl"></div>
<div class="art-post-cr"></div>
<div class="art-post-cc"></div>
<div class="art-post-body">
<div class="art-post-inner art-article">
<h2 class="art-postheader">Text, <a href="#" rel="bookmark" title="Permanent Link to this Post">Link</a>, <a class="visited" href="#" rel="bookmark" title="Visited Hyperlink">Visited</a>, <a class="hovered" href="#" rel="bookmark" title="Hovered Hyperlink">Hovered</a></h2>
<div class="art-postcontent">
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<blockquote>
<p>
“This stylesheet is going to help so freaking much.”
<br />
-Blockquote
</p>
</blockquote>
<br />
<table class="art-article" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="even">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody></table>
<p>
<span class="art-button-wrapper">
<span class="art-button-l"> </span>
<span class="art-button-r"> </span>
<a class="art-button" href="javascript:void(0)">Join Now!</a>
</span>
</p>
</div>
<div class="cleared"></div>
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
</div>
</div>
</div>
<div class="cleared"></div>
<div class="art-footer">
<div class="art-footer-t"></div>
<div class="art-footer-b"></div>
<div class="art-footer-body">
<div class="art-footer-text">
<p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p><p>Copyright © 2011. All Rights Reserved.</p>
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
<p class="art-page-footer"><a href="http://www.artisteer.com/">Web Template</a> created with Artisteer.</p>
</div>
</body>
</html>
CSS:
* begin Page */
/* Created by Artisteer v3.0.0.33215 */
#art-main, table
{
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
body
{
margin: 0 auto;
padding: 0;
color: #242424;
background-color: #FFFFFF;
background-image: url('images/Bottom_texture.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: bottom left;
}
.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
text-align: left;
}
.art-postcontent p
{
margin: 12px 0 12px 15px;
}
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
text-align: left;
}
.art-postcontent a
{
text-decoration: none;
color: #930B29;
}
.art-postcontent a:link
{
text-decoration: none;
color: #930B29;
}
.art-postcontent a:visited, .art-postcontent a.visited
{
color: #930B29;
}
.art-postcontent a:hover, .art-postcontent a.hover
{
color: #C20F36;
}
.art-postcontent h1
{
margin: 12px 0 12px 0;
color: #4F4F4F;
font-size: 24px;
}
.art-postcontent h2
{
color: #4F4F4F;
margin: 13px 0 13px 0;
font-size: 18px;
}
.art-postcontent h3
{
margin: 16px 0 16px 0;
color: #C20F36;
font-size: 18px;
}
.art-postcontent h4
{
margin: 18px 0 18px 0;
color: #242424;
font-size: 15px;
}
.art-postcontent h5
{
margin: 20px 0 20px 0;
color: #242424;
font-size: 13px;
}
.art-postcontent h6
{
margin: 25px 0 25px 0;
color: #242424;
font-size: 12px;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
cursor:default;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size: 1px;
}
form
{
padding: 0 !important;
margin: 0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-sheet
{
position: relative;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-sheet-body
{
position: relative;
padding: 0;
}
.art-sheet
{
top: 0 !important;
margin-bottom: 0 !important;
cursor:auto;
width: 100%;
}
/* end Box, Sheet */
/* begin Header */
div.art-header
{
margin: 0 auto;
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
div.art-header-center
{
position: relative;
width: 1920px;
left:50%;
}
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 1920px;
height: 200px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
div.art-header-fluid-object
{
display: block;
margin: 0 auto;
position: relative;
top: 9px;
width: 593px;
background-image: url('images/fluid_object.png');
background-repeat: no-repeat;
background-position: center center;
height: 190px;
}
/* end Header */
/* begin Logo */
div.art-logo
{
display: block;
position: absolute;
left: 10px;
top: 20px;
width: 500px;
}
h1.art-logo-name
{
display: block;
text-align: {HorizontalAlign};
}
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
{
font-size: 24px;
text-decoration: none;
padding: 0;
margin: 0;
color: {NameFontColor} !important;
}
h2.art-logo-text,
h2.art-logo-text a,
h2.art-logo-text a:link,
h2.art-logo-text a:visited,
h2.art-logo-text a:hover
{
font-size: 14px;
padding: 0;
margin: 0;
color: {TextFontColor} !important;
}
h2.art-logo-text
{
display: block;
text-align: {HorizontalAlign};
}
/* end Logo */
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
outline: none;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url('images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
div.art-nav-center
{
position: relative;
float: right;
right: 50%;
}
ul.art-menu
{
position: relative;
float: left;
left: 50%;
}
.firefox2 ul.art-menu
{
float: none;
}
/* menu structure */
.art-menu
{
padding: 0 0 0 0;
}
.art-nav
{
position: relative;
min-height: 39px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 100%;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right: 0;
}
.art-nav .r
{
right: 0;
width: 1920px;
clip: rect(auto, auto, auto, 1920px);
}
/* end Menu */
/* begin MenuItem */
.art-menu a
{
position: relative;
display: block;
overflow: hidden;
height: 39px;
cursor: pointer;
text-decoration: none;
}
.art-menu ul li
{
margin:0;
clear: both;
}
.art-menu a .r, .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 127px;
background-image: url('images/menuitem.png');
}
.art-menu a .l
{
left: 0;
right: 0;
}
.art-menu a .r
{
width: 400px;
right: 0;
clip: rect(auto, auto, auto, 400px);
}
.art-menu a .t, .art-menu ul a, .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
font-size: 22px;
text-align: left;
text-decoration: none;
}
.art-menu a .t
{
color: #080808;
padding: 0 22px;
margin: 0 0;
line-height: 39px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top: -44px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top: -44px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top: -44px;
}
.art-menu a:hover .t
{
color: #000000;
}
.art-menu li:hover a .t
{
color: #000000;
}
.art-menu li:hover>a .t
{
color: #000000;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -88px;
}
.art-menu a.active .t
{
color: #D9D9D9;
}
/* end MenuItem */
/* begin MenuSeparator */
.art-menu .art-menu-li-separator
{
display: block;
width: 1px;
height:39px;
}
.art-nav .art-menu-separator
{
display: block;
margin:0 auto;
width: 1px;
height: 39px;
background-image: url('images/menuseparator.png');
}
/* end MenuSeparator */
/* begin MenuSubItem */
.art-menu ul a
{
display: block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow: hidden;
line-height: 20px;
background-image: url('images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #F0335C;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #000000;
font-size: 12px;
margin:0;
padding:0;
}
.art-menu ul li a:hover
{
color: #000000;
border-color: #F46C89;
background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
color: #000000;
border-color: #F46C89;
background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #000000;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #000000;
}
/* end MenuSubItem */
/* begin Layout */
.art-content-layout
{
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: Transparent;
border: none !important;
padding:0 !important;
}
.art-layout-cell, .art-content-layout-row
{
background-color: Transparent;
vertical-align: top;
text-align: center;
border: none !important;
margin:0 !important;
padding:0 !important;
}
.art-content-layout .art-content-layout{width: auto;margin:0;}
.art-content-layout .art-layout-cell, .art-content-layout .art-layout-cell .art-content-layout .art-layout-cell{display: table-cell;}
.art-layout-cell .art-layout-cell{display: block;}
.art-content-layout-row {display: table-row;}
.art-layout-glare{position:relative;}/* end Layout */
/* begin Box, Block */
.art-block
{
position: relative;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-block-body
{
position: relative;
padding: 5px;
}
.art-block
{
margin: 5px;
}
/* end Box, Block */
/* begin Box, BlockContent */
.art-blockcontent
{
position: relative;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-blockcontent-body
{
position: relative;
padding: 0;
}
.art-blockcontent-body,
.art-blockcontent-body li,
.art-blockcontent-body a,
.art-blockcontent-body a:link,
.art-blockcontent-body a:visited,
.art-blockcontent-body a:hover
{
color: #292929;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
.art-blockcontent-body p
{
margin: 6px 0 6px 0;
}
.art-blockcontent-body a
{
color: #A60C2E;
text-decoration: underline;
}
.art-blockcontent-body a:link
{
color: #A60C2E;
text-decoration: underline;
}
.art-blockcontent-body a:visited, .art-blockcontent-body a.visited
{
color: #F03860;
}
.art-blockcontent-body a:hover, .art-blockcontent-body a.hover
{
color: #DA103C;
text-decoration: none;
}
.art-blockcontent-body ul li
{
line-height: 125%;
color: #545454;
padding: 0 0 0 12px;
background-image: url('images/blockcontentbullets.png');
background-repeat: no-repeat;
}/* end Box, BlockContent */
/* begin Button */
.art-button-wrapper a.art-button,
.art-button-wrapper a.art-button:link,
.art-button-wrapper input.art-button,
.art-button-wrapper button.art-button
{
text-decoration: none;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
position:relative;
top:0;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #1A1A1A !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 30px;
height: 30px;
margin: 0 !important;
padding: 0 20px !important;
overflow: visible;
cursor: pointer;
}
.art-button img, .art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 30px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2 .art-button-wrapper
{
display: block;
float: left;
}
input, select, textarea
{
vertical-align: middle;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
.art-block select
{
width:96%;
}
.art-button-wrapper.hover .art-button, .art-button-wrapper.hover a.art-button:link, .art-button:hover
{
color: #F792A8 !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button, .art-button-wrapper.active a.art-button:link
{
color: #F797AC !important;
}
.art-button-wrapper .art-button-l, .art-button-wrapper .art-button-r
{
display: block;
position: absolute;
height: 100px;
margin: 0;
padding: 0;
background-image: url('images/button.png');
}
.art-button-wrapper .art-button-l
{
left: 0;
right: 12px;
}
.art-button-wrapper .art-button-r
{
width: 425px;
right: 0;
clip: rect(auto, auto, auto, 413px);
}
.art-button-wrapper.hover .art-button-l, .art-button-wrapper.hover .art-button-r
{
top: -35px;
}
.art-button-wrapper.active .art-button-l, .art-button-wrapper.active .art-button-r
{
top: -70px;
}
.art-button-wrapper input
{
float: none !important;
}
/* end Button */
/* begin Box, Post */
.art-post
{
position: relative;
margin: 0 auto;
min-width: 35px;
min-height: 35px;
max-width: 800px;
}
.art-post-body
{
position: relative;
padding: 19px;
}
.art-post-tr, .art-post-tl, .art-post-br, .art-post-bl, .art-post-tc, .art-post-bc,.art-post-cr, .art-post-cl
{
position: absolute;
}
.art-post-tr, .art-post-tl, .art-post-br, .art-post-bl
{
width: 46px;
height: 46px;
background-image: url('images/post_s.png');
}
.art-post-tl
{
top: 0;
left: 0;
clip: rect(auto, 23px, 23px, auto);
}
.art-post-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 23px, 23px);
}
.art-post-bl
{
bottom: 0;
left: 0;
clip: rect(23px, 23px, auto, auto);
}
.art-post-br
{
bottom: 0;
right: 0;
clip: rect(23px, auto, auto, 23px);
}
.art-post-tc, .art-post-bc
{
left: 23px;
right: 23px;
height: 46px;
background-image: url('images/post_h.png');
}
.art-post-tc
{
top: 0;
clip: rect(auto, auto, 23px, auto);
}
.art-post-bc
{
bottom: 0;
clip: rect(23px, auto, auto, auto);
}
.art-post-cr, .art-post-cl
{
top: 23px;
bottom: 23px;
width: 46px;
background-image: url('images/post_v.png');
}
.art-post-cr
{
right: 0;
clip: rect(auto, auto, auto, 23px);
}
.art-post-cl
{
left: 0;
clip: rect(auto, 23px, auto, auto);
}
.art-post-cc
{
position: absolute;
top: 23px;
left: 23px;
right: 23px;
bottom: 23px;
background-color: #F0F0E0;
}
.art-post
{
margin: 15px;
}
a img
{
border: 0;
}
.art-article img, img.art-article
{
border: solid 0 #696969;
margin: 5px;
}
.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
}
.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #9D0C2B;
vertical-align: top;
text-align: left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}
pre
{
overflow: auto;
padding: 0.1em;
}
/* end Box, Post */
/* begin PostHeaderIcon */
h2.art-postheader
{
color: #363636;
margin: 3px 0 3px 0;
}
h2.art-postheader,
h2.art-postheader a,
h2.art-postheader a:link,
h2.art-postheader a:visited,
h2.art-postheader a.visited,
h2.art-postheader a:hover,
h2.art-postheader a.hovered
{
font-size: 18px;
}
h2.art-postheader a, h2.art-postheader a:link
{
text-align: left;
text-decoration: none;
color: #424242;
}
h2.art-postheader a:visited, h2.art-postheader a.visited
{
color: #7B0922;
}
h2.art-postheader a:hover, h2.art-postheader a.hovered
{
text-decoration: underline;
color: #C20F36;
}
/* end PostHeaderIcon */
/* begin PostBullets */
.art-post ol, .art-post ul
{
margin: 1em 0 1em 2em;
padding: 0;
}
.art-post li
{
font-size: 12px;
}
.art-post li ol, .art-post li ul
{
margin: 0.5em 0 0.5em 2em;
padding: 0;
}
.art-post li
{
color: #121212;
padding: 0;
}
.art-post li
{
padding: 0 0 0 13px;
}
.art-post ol>li
{
background: none;
padding-left: 0;/* overrides overflow for "ul li" and sets the default value */
overflow: visible;
}
.art-post ul>li
{
background-image: url('images/postbullets.png');
background-repeat: no-repeat;
padding-left: 13px;/* makes "ul li" not to align behind the image if they are in the same line */
overflow-x: visible;
overflow-y: hidden;
}
/* end PostBullets */
/* begin PostQuote */
.art-postcontent blockquote,
.art-postcontent blockquote a,
.art-postcontent blockquote a:link,
.art-postcontent blockquote a:visited,
.art-postcontent blockquote a:hover
{
color: #1C0208;
}
.art-postcontent blockquote p
{
margin: 5px 10px 10px 10px;
}
.art-postcontent blockquote
{
border: solid 0 #F46C89;
margin: 10px 10px 10px 50px;
padding: 15px 15px 15px 38px;
background-color: #FAC1CE;
background-image: url('images/postquote.png');
background-position: left top;
background-repeat: no-repeat;/* makes blockquote not to align behind the image if they are in the same line */
overflow: auto;
}
/* end PostQuote */
/* begin Footer */
.art-footer
{
position: relative;
overflow: hidden;
width: 100%;
}
.art-footer-b
{
position: absolute;
left:0;
right:0;
bottom:0;
height:50px;
background-image: url('images/footer_b.png');
}
.art-footer-t
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
background-color: #121212;
}
.art-footer-body
{
position:relative;
padding: 15px;
}
.art-footer-text p
{
padding:0;
margin:0;
}
.art-footer,
.art-footer a,
.art-footer a:link,
.art-footer a:visited,
.art-footer a:hover
{
color: #BDBDBD;
letter-spacing: 1px;
}
.art-footer-text
{
padding: 0 10px 0 10px;
}
.art-footer,
.art-footer-text,
.art-footer p
{
text-align: center;
}
.art-footer a,
.art-footer a:link
{
color: #F57A95;
text-decoration: underline;
}
.art-footer a:visited
{
color: #C70F37;
}
.art-footer a:hover
{
color: #858585;
text-decoration: none;
}
/* end Footer */
/* begin PageFooter */
.art-page-footer,
.art-page-footer a,
.art-page-footer a:link,
.art-page-footer a:visited,
.art-page-footer a:hover
{
font-family: Arial;
font-size: 10px;
letter-spacing: normal;
word-spacing: normal;
font-style: normal;
font-weight: normal;
text-decoration: underline;
color: #666666;
}
.art-page-footer
{
margin: 1em;
text-align: center;
text-decoration: none;
color: #595959;
}
/* end PageFooter */
/* begin LayoutCell, content */
.art-content-layout .art-content .art-block
{
background-color: #FFFFFF;
}
/* end LayoutCell, content */
.overview-table .art-layout-cell
{
width:33%;
}
.overview-table-inner
{
margin:10px;
}
table.table
{
width:100%;
border-collapse:collapse;
table-layout:fixed;
text-align:left;
vertical-align:top;
}
table.table, table.table tr, table.table td
{
border:none;
margin:0;
padding:0;
background-color:Transparent;
}
img.image
{
margin:0;
padding:0;
border:none;
}
Cheers
