/*
Theme Name: The Telio Blog
Theme URI: http://www.telio.be/blog
Description: Custom Wordpress theme specially made for The Telio Blog
Version: 1.0 (WP 2.8)
Author: Ricardo Salazar
Author URI: http://www.caneidia.com
Tags: custom, fixed width, 2 columns, clean 
*/

/* Initial reset
---------------------------------------------------------- */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, dt, dd, p, blockquote, form, fieldset, legend {
		margin: 0;
		padding: 0;
		font: 100%/120% "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
ul {
		list-style: none;
}
fieldset, img {
		border:0;
}
input, select, textarea {
		font-size: 100%;
}
/* General
---------------------------------------------------------- */
html {
		font-size:100.01%; 
} 
body {
		font-size:13px;
		color:#333;
		background:#fff;
}
.wrapper {
		width: 920px;
		margin: 0 auto;
}
a {
		color:#008be4;
		text-decoration:none;
}
a:hover {
		text-decoration:underline;
}
/* Wordpress
---------------------------------------------------------- */
/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { 
		display:block; 
		margin:0 auto;
}
.alignleft { 
		float:left;
}
.alignright { 
		float:right;
}
.wp-caption { 
		border:1px solid #666; 
		text-align:center; 
		background:#ccc; 
		padding:10px; 
		margin:10px 
}
/* Header
---------------------------------------------------------- */
#header {		
}
#submenu {
		font-size:12px;
		text-align:right;
		padding-top:10px;
}
#submenu img {
		vertical-align:text-bottom;
}
h1 {	
		background:url(images/telio-blog-logo.gif) no-repeat;
		margin-top:2px;
}
h1 a { 
		text-indent:-9000px; 
		display:block; 
		width:441px; 
		height:42px; 
		margin-bottom:30px;
}
/* Navigation
---------------------------------------------------------- */
#bar {
		overflow:hidden;
		height:100%;
		background:#154b7e;
}
#navigation {
		float:left;
		width:620px;
}
#navigation ul {
		float:left;
}
#navigation ul li {
		float: left;	
		padding:9px 14px;
		margin-right:12px;
}
#navigation ul li.current{
		background:#306ea7;	
}
#navigation ul li.current a:hover{
		text-decoration:none;
}
#navigation ul li a {
		font-size:14px;
		color:#fff;
		text-transform:uppercase;
		display:block;		
}
#navigation-out {
		float:right;
		background:url(images/navigation-out-separate.gif) no-repeat 0 4px;
		margin-top:5px;
}
#navigation-out a {
		float:left;
		font-size:14px;
		line-height:14px;
		color:#fff;				
		background:url(images/button-out-right.gif) no-repeat top right;	
		padding-right:12px;
		height:24px;
		margin-left:12px;
}
#navigation-out a span {
		background:url(images/button-out-left.gif) no-repeat top left;	
		display:block;	
		padding:5px 0 5px 12px;
}
#navigation-out a:hover {
		background:url(images/button-out-right.gif) no-repeat bottom right;	
		text-decoration:none;
		color:#f0ff82;
}
#navigation-out a:hover span {
		background:url(images/button-out-left.gif) no-repeat bottom left;	
} 
#search {
		float:right;
		position:relative;
}
#search form {
		margin-top:6px !important;
		margin-top:5px;
}
#search input.search-input {
		font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
		color:#666;
		width:156px;
		border:none;
		background:url(images/search-bg.gif) no-repeat;
		height:16px;
		padding:3px 12px;
}
#search .search-button {
		position:absolute;
		right:6px;
		top:12px;		
}
/* Contents
---------------------------------------------------------- */
#contents {
		overflow:hidden;
		height:100%;
		padding:30px 0 50px 0;
}
p {
		line-height:150%;
}
/* Main-content
---------------------------------------------------------- */
#main-content {
		float:left;
		width:620px;
}
#main-content p {
		margin-bottom:12px;
}
#main-content ul {
		margin:12px 0 12px 24px;
}
#main-content ul li {	
		margin-top:12px;
		background: url(images/list-bullet.gif) no-repeat 0px 5px;
		padding-left:12px;
}
#main-content ol {
		margin:12px 0 12px 44px;		
}
#main-content ol li {
		margin-top:12px;
		line-height:150%;
}
#main-content blockquote {
		margin:24px;
		padding-left:16px;
		border-left:3px solid #dadada;
		width:550px;
}
#main-content blockquote p {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:14px;
		font-style:italic;
		color:#555;
}
h3 {
		font-size:20px;
		font-weight:bold;
		margin:24px 0 8px 0;
}
h3 a {
		color:#154b7e;
}
h3 a:hover {
		color:#008be4;
		text-decoration:none;
}
h4 {
		font-size:16px;
		font-weight:bold;
		margin:24px 0 8px 0;
}
/* Post
---------------------------------------------------------- */
.post {
		overflow:hidden;
		height:100%;
		margin-bottom:40px;
		clear:left;
}
h2 {
		font-size:24px;
		font-weight:bold;
}
h2 a {
		color:#154b7e;
}
h2 a:hover {
		color:#008be4;
		text-decoration:none;
}
.post-info {
		overflow:hidden;
		height:100%;
		margin:6px 0 12px 0;
		padding-bottom:12px;
		border-bottom:1px dotted #8eadb9;
}
.posted {	
		float:left;
		color:#666;
}
.comments-count {
		float:right;
		background: url(images/icon-comments.gif) no-repeat right 3px;
		padding:0 18px 0 12px;		
}
.post img.alignleft { 
		margin:6px 20px 12px 0;
}
.post img.alignright { 
		margin:6px 0 12px 20px;
}
.post span.read-more a {
		font-weight:bold;
		margin-top:-16px;
}
.post .more-link {
		font-weight:bold;
		padding-right:10px;
		background:url(images/icon-read-more.gif) no-repeat 100% 5px;
}
/* Sticky
---------------------------------------------------------- */
.sticky {
		background:url(images/sticky-bottom.gif) no-repeat bottom left;
		padding-bottom:8px; /* it is 20px, but we can discount the margin-bottom of p and img (12px) */
}
.inner-sticky {
		background:url(images/sticky-top.gif) no-repeat top left;
		padding:60px 20px 2px 20px;
}
/* Page
---------------------------------------------------------- */
h2.page {
		margin-bottom:12px;
		padding-bottom:8px;
		border-bottom:1px dotted #8eadb9;
}
h3.page {
		margin:0;
}
/* Pagination
---------------------------------------------------------- */
.pagination {
		overflow:hidden;
		height:100%;
		margin-top:10px;
}
.pagination div {
		float:left;
		margin-right:6px;	
		font-size:12px;
}
.pagination div a {
		float:left;
		display:block;
		border:1px solid #e6e6e6;
		background:#f3f5f4;
		padding:5px 8px 3px 8px;	
}
.pagination div a:hover {
		background:#e5ebe8;
		border:1px solid #d6d6d6;	
		text-decoration:none;
}
.pagination div.dots{
		padding:4px;	
}
.pagination div.active{
		border:none;
		background:none;
		padding:5px 8px 3px 8px;
		margin-right:6px;
		display:block;
}
/* Comments
---------------------------------------------------------- */
#main-content .comments {
		margin-bottom:40px;
		margin-left:0;
}
#main-content .comments li {
		padding:14px;
		border:1px solid #cfe9f5;
		background:#f9f9f9;
		margin-bottom:20px;
}
.comments .heading cite {
		font-style:normal;
		font-weight:bold;
}
.comments .heading span {
		font-style:italic;
}
.comments .heading p.date a {
		font-size:12px;
		color:#666;
}
h3 span {
		font-size:14px;
		font-weight:normal;
}
h3 span a {
		color:#008be4;		
}
h3 span a:hover {
		text-decoration:underline;
}
.comments-form label {
		display:block;
		margin-bottom:2px;		
}
.comments-form input.text {
		border:1px solid #7f9db9;
		padding:3px 2px 1px 2px;
		width:280px;
		height:18px;
		margin-bottom:12px;
}
.comments-form textarea {
		border:1px solid #7f9db9;
		padding:2px;
		width:480px;
		height:130px;
		margin-bottom:12px;
		overflow:auto;
}
.comments-form input.send {
		display:block;
}
/* Sidebar
---------------------------------------------------------- */
#sidebar {
		float:right;	
		width:260px;
		margin-left:40px;
}
.box {
		background:url(images/box-bottom.gif) no-repeat bottom left;
		padding-bottom:16px;
		margin-bottom:30px;
}
.inner-box {
		background:url(images/box-top.gif) no-repeat top left;
		padding:16px 16px 0 16px;
}
#sidebar h2 {
		font-size:22px;
		color:#94a611;
		margin-bottom:6px;
}
#sidebar ul li a {
		border-bottom:1px dotted #8eadb9;
		padding:6px 0 5px 0;
		color:#154b7e;	
		display:block;
		height:100%; /* to avoid bug in explorer */
}
#sidebar ul li a:hover {
		color:#008be4;
		background:#e5f0f8;	
		text-decoration:none;
}
#sidebar ul li:last-child a { 
		border-bottom:none;
}
#sidebar .banner {
		margin-bottom:30px;
}
/* Footer
---------------------------------------------------------- */
#footer {
		border-top:1px solid #d4d4d4;
		background:#f4f4f4;
		padding:20px 20px 40px 20px;		
}
#footer .wrapper {
		position:relative;
}
#footer p {
		font-size:12px;
}
#footer #telio {
		position:absolute;
		top:0;
		right:0;
}