/*
Theme Name: Clay Ant Creative Blog
Description: Custom Theme
Version: 1.0
Author: Clay Ant Creative
Author URI: http://www.clayant.co.za.com/
*/

/* global reset */
* {
	margin: 0;
	padding: 0;
}

/* typography */
body {
	background: #000;
	color: #fff;
	font: normal 14px Arial, Verdana, sans-serif;
	text-align: center;
}

a img {
	border: none;
}

a {
	color: #1899c3;
	text-decoration: underline;
}

a:hover {
	color: #1899c3;
	text-decoration: none;
}

h2, h3, h4, h5, h6 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: bold;
	padding: 10px 0;
}
h1 a{
	background: url(images/logo.jpg);
	display: block;
	height: 145px;
	width: 125px;
	text-indent: -9999px;
}
h2 {
	color: #333;
	font-size: 42px;
	font-weight: normal;
}

h3 {
	color: #333;
	font-size: 28px;
	font-weight: normal;
}

h4 {
	color: #333;
	font-size: 24px;
}

h5 {
	color: #333;
	font-size: 20px;
}

h6 {
	color: #333;
	font-size: 18px;
}

p {
	padding: 5px 0;
	line-height: 20px;
}

em {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
}

strong {
	font-weight: bold;
}

/* classes */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0px;
	visibility: hidden;
}

* html .clearfix {
	height: 1%;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 5px;
	margin: 0 0 10px 10px;
	display: inline;
}

img.alignleft {
	padding: 5px;
	margin: 0 10px 10px 0;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

.post {
	border-bottom: 1px solid #ccc;
	margin: 30px 0 0 0;
	padding: 0 0 20px 0;
	position: relative;
	width: 570px;
}

.post .date {
	background: #fff url('images/calendar.jpg') no-repeat 0% 0%;
	color: #666;
	display: block;
	font-family: 'Georgia, Times New Roman', Times, serif;
	font-weight: bold;
	height: 31px; /* 61-30 */
	left: -70px;
	padding: 15px 10px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 0px;
	width: 30px; /* 50-20 */
}

.post .date span {
	font-size: 24px;
}

.post .tags, .post .author {
	color: #999;
	font-size: 12px;
	line-height: 18px;
}

.post .tags a {
	color: #999;
	text-decoration: underline;
}

.post .tags a:hover {
	color: #999;
	text-decoration: none;
}

.post h2 {
	padding: 5px 0;
}

.post h2 a {
	color: #333;
	text-decoration: none;
}

.post h2 a:hover {
	color: #333;
	text-decoration: underline;
}

.post .entry {
	padding: 5px 0;
}

.post .readmore {
	float: left;
	width: 45%;
}

.post .comments {
	float: right;
	text-align: right;
	width: 45%;
}

/* wrapper */
#wrapper {
	background: #fff;
	border-bottom: 1px solid #666;
	color: #666;
	text-align: center;
	width: 100%;
}

/* inner */
#inner {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 960px;
}

/* header */
#header {
	border-bottom: 1px solid #ccc;
	height: 145px;
	position: relative;
	width: 960px;
}

/* header - logo */
#header #logo {
	display: block;
	height: 145px;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 125px;
}

/* header - menu */
#header #menu {
	bottom: 25px;
	color: #1899c3;
	height: 30px;
	line-height: 30px;
	position: absolute;
	right: 0px;
	width: 260px;
}

#header #menu li {
	float: left;
	list-style-type: none;
	margin: 0 10px 0 0;
	white-space: nowrap;
}

#header #menu li a {
	color: #1899c3;
	display: block;
	font: bold 16px/30px Arial, Verdana, sans-serif;
	padding: 0 0 0 10px;
	text-decoration: none;
}

#header #menu li a span {
	display: block;
	line-height: 30px;
	padding: 0 10px 0 0;
}

#header #menu a:hover, #header #menu .selected, 
#header #menu a:hover span, #header #menu .selected span {
	background: url('images/menu-left.jpg') no-repeat scroll 0% 0%;
	color: #fff;
	text-decoration: none;
}

#header #menu a:hover span, #header #menu .selected span {
	background: url('images/menu-right.jpg') no-repeat 100% 0%;
}

/* content */
#content {
	float: left;
	padding: 0 0 30px 70px;
	width: 570px; /* 640-70 */
}

#content ul {
	list-style-type: none;
	margin: 5px 10px;
}

#content ul li {
	background: url('images/bullet.jpg') no-repeat 0px 9px;
	padding: 4px 0 4px 10px;
}


#content ol {
	margin: 5px 30px;
}

#content ol li {
	padding: 4px 0;
}

#content h5.sub-title {
	padding: 20px 0 10px 0;
}

/* comment form */
#commentform {
	background: #efefef url('images/form/top.jpg') no-repeat 0% 0%;
	margin: 20px 0;
	width: 570px;
}

#commentform h5 {
	padding: 20px 20px 10px 20px;
}

#commentform table {
	border-collapse: collapse;
	margin: 0 20px;
	width: 530px;
}

#commentform td {
	padding: 10px 0;
	vertical-align: top;
}

#commentform label {
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

#commentform input.field, #commentform textarea {
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	font: normal 14px Arial, Verdana, sans-serif;
	padding: 8px 5px;
	width: 350px;
}

#commentform textarea {
	height: 100px;
}

#commentform input.button {
	background: #666 url('images/form/button.jpg') no-repeat 0% 0%;
	border: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	text-align: center;
	width: 133px;
}

#commentform .bottom {
	background: #efefef url('images/form/bottom.jpg') no-repeat 0% 100%;
	border-top: 10px solid #efefef;
	clear: both;
	display: block;
	height: 5px;
	width: 570px;
}

/* comment list */
#commentlist {
	list-style-type: none;
}

#commentlist li {
	background: #fff url('images/quotes.jpg') no-repeat 0px 10px;
	border-bottom: 1px dotted #ccc;
	padding: 10px 0 10px 30px;
}

#commentlist p {
	padding: 5px 0;
	font-size: 12px;
	line-height: 18px;
}

#commentlist h6 {
	color: #666;
	font: normal 14px Arial, Verdana, sans-serif;
	padding: 0 0 5px 0;
}

#commentlist strong {
	font-weight: bold;
}

#commentlist h6 a {
	color: #666;
	text-decoration: underline;
}

#commentlist h6 a:hover {
	color: #666;
	text-decoration: none;
}

/* sidebar */
#sidebar {
	float: right;
	padding: 20px 0;
	width: 270px;
}

#sidebar h3 {
	border-bottom: 1px solid #ccc;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
	margin: 5px 0;
}

#sidebar h3.rss-feed, #sidebar h3.twitter-feed, #sidebar h3.tag-cloud {
	background-position: 0% 0%;
	background-repeat: no-repeat;
	border-bottom: none;
	color: #fff;
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 35px;
}

/* tag cloud */
#sidebar h3.tag-cloud {
	background-color: #fff;
	background-image: url('images/tag-cloud.jpg');
	color: #333;
	height: 60px;
	line-height: 50px; /*60px*/
	padding: 10px 0 0 0;
	margin: 10px 0 0 0;
	text-align: center;
}

#sidebar #cloud {
	text-align: center;
	padding: 0 0 10px 0;
}

/* twitter & rss */
#sidebar .twitter p {
	border-bottom: 1px dotted #ccc;
	font-size: 12px;
	line-height: 18px;
	padding: 10px 0;
}

#sidebar .twitter small {
	color: #333;
	font-size: 11px;
}

#sidebar h3.rss-feed {
	background-color: #f48125;
	background-image: url('images/rss-feed.jpg');
}

#sidebar h3.twitter-feed {
	background-color: #1899c3;
	background-image: url('images/twitter-feed.jpg');
}

#sidebar .post-feed, #sidebar .comment-feed {
	background-color: #fff;
	background-position: 0px 6px;
	background-repeat: no-repeat;
	padding: 5px 0 5px 20px;
}

#sidebar .post-feed {
	background-image: url('images/post.jpg');
	float: left;
	width: 100px;
}

#sidebar .comment-feed {
	background-image: url('images/comment.jpg');
	float: right;
	width: 120px;
}

#sidebar ul {
	list-style-type: none;
	padding: 5px 0;
}

#sidebar li {
	background: #fff url('images/arrow.jpg') no-repeat 5px 9px;
	color: #999;
	padding: 4px 0 4px 15px;
}

/* about us */
#about-us {
	background: #333333 url('images/about-us-top.jpg') no-repeat 0% 0%;
	color: #ccc;
	font-family: Arial, Verdana, sans-serif;
	padding: 5px 0 0 0;
	margin: 10px 0 0 0;
	width: 270px;
}

#about-us strong {
	color: #fff;
	font-weight: bold;
}

#about-us em {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
}

#about-us h3 {
	border-bottom: 1px solid #666;
	color: #fff;
	margin: 0 10px;
}

#about-us p {
	padding: 5px 10px;
}

#about-us .bottom {
	background: #333 url('images/about-us-bottom.jpg') no-repeat 0% 0%;
	display: block;
	height: 30px;
	width: 270px;
}

/* categories & archives */
#categories, #archives {
	background-repeat: no-repeat;
	background-position: 0% 0%;
	padding: 5px 0 0 0;
	margin: 10px 0 0 0;
	width: 270px;
}

#categories {
	background-color: #13a3c5;
	background-image: url('images/categories-top.jpg');
}

#archives {
	background-color: #ececec;
	background-image: url('images/archives-top.jpg');
}

#categories h3 {
	border-bottom: 1px solid #2c91a8;
	color: #fff;
	margin: 0 10px;
}

#archives h3 {
	border-bottom: 1px solid #d9d9d9;
	color: #333;
	margin: 0 10px;
}

#categories ul, #archives ul  {
	list-style-type: none;
	padding: 5px 0;
	margin: 0 10px;
}

#categories li {
	background: #13a3c5 url('images/arrow2.jpg') no-repeat 5px 9px;
	color: #ececec;
	padding: 4px 0 4px 15px;
}

#archives li {
	background: #ececec url('images/arrow3.jpg') no-repeat 5px 9px;
	color: #999;
	padding: 4px 0 4px 15px;
}

#categories .bottom, #archives .bottom {
	background-position: 0% 0%;
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	width: 270px;
}

#categories .bottom {
	background-color: #13a3c5;
	background-image: url('images/categories-bottom.jpg');
}

#archives .bottom {
	background-color: #ececec;
	background-image: url('images/archives-bottom.jpg');
}

#categories a {
	color: #ececec;
}

#categories a:hover {
	color: #ececec;
}

#archives a {
	color: #36b2d6;
}

#archives a:hover {
	color: #36b2d6;
}

 /* footer */
#footer {
	background: #000;
	color: #999;
	margin: 0 auto;
	padding: 10px 0;
	position: relative;
	text-align: left;
	width: 960px;
}

#footer h4 {
	border-bottom: 1px solid #292929;
	color: #fff;
	font-size: 18px;
	margin: 5px 0;
	padding: 10px 0;
}

#footer .about {
	float: left;
	padding: 0 0 0 70px;
	width: 570px; /* 640-70 */
}

#footer .services {
	float: right;
	width: 270px;
}

#footer .services ul {
	list-style-type: none;
	padding: 5px 0;
}

#footer .services li {
	background-color: #000;
	background-position: 0px 4px;
	background-repeat: no-repeat;
	color: #999;
	font-size: 12px;
	padding: 8px 0 8px 30px;
}

#footer .services li.hand {
	background-image: url('images/services/hand.jpg');
}
    
#footer .services li.mag {
	background-image: url('images/services/mag.jpg');
}

#footer .services li.mail {
	background-image: url('images/services/mail.jpg');
}

#footer .services li.pen {
	background-image: url('images/services/pen.jpg');
}

#footer .bottom {
	border-top: 1px solid #292929;
	margin: 10px 0; 
	padding: 10px 0;
}

#footer .bottom p {
	font-size: 12px;
	line-height: 18px;
}