/*
Theme Name: Projeto 2009
Theme URI: http://jpedroribeiro.com/
Description: Primeiro tema criado para projeto do blog Julho/2009.
Version: 1.0
Author: J. Pedro Ribeiro (joaopar at gmail dot com)
*/



/* ----------- MAIN STYLES ----------- */

body
{
	background-color: #212121;
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ebebeb;
}

h1
{
	margin: 0;
	padding: 0;
}

#wrapper
{
	margin: 0 auto;
	width: 960px;
}

.clear {clear: both; height: 0px; overflow: hidden;}

#left-container {float: left; width: 655px; margin: 45px 12px 45px 0}

#right-container {float: left; width: 281px; margin: 45px 0}

code {color: #23A68C}


/* ----------- HEADER STYLES ----------- */
#red-banner
{
	background: url(i/header-red-banner.gif) repeat-x;
	height: 9px;
	width: 100%;
}

#header-logo
{
	width: 447px;
	height: 155px;
	float: left;
}

#header-text
{
	width: 458px;
	height: 155px;
	float: left;
	padding: 19px 0 0 54px;
	font-family: "Century Gothic", "Avant Garde Gothic", "Trebuchet MS", Verdana, Geneva, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #858585;
}
#header-text strong {color: #b6b6b6}
#header-text a {color: #b6b6b6; text-decoration: none;}
#header-text a:hover {background-color: #000}
#header-text p {font-size: 18px; margin: 7px 0 0 0;}



/* ----------- PHOTO-HEADER STYLES ----------- */

#photo-highlight
{
	width: 952px;
	height: 229px;
	border: #3f3f3f 4px solid;
	/*background: url(i/photo-streets-barcelona.jpg);*/
}

#photo-highlight .stripes
{
	background: url(i/photo-stripes.png);
	width: 952px;
	height: 229px;
}



/* ----------- MENU STYLES ----------- */

#menu
{
	width: 100%;
	height: 28px;
}

#menu ul {margin: 0}
#menu li {margin: 0; list-style: none;}

#menu li#about-me a, #menu li#blog a, #menu li#portfolio a, #menu li#contact a
{
	background-image: url(i/menu-about-me.gif);
	width: 113px;
	height: 28px;
	background-position: 0 0;
	text-indent: -999px;
	float: left;
	cursor: pointer;
        overflow: hidden;
        margin: 0 10px 0 0;
}

#menu li#blog a { background-image: url(i/menu-blog.gif);}
#menu li#portfolio a { background-image: url(i/menu-portfolio.gif);}
#menu li#contact a { background-image: url(i/menu-contact.gif);}

#menu li#about-me a:hover, #menu li#blog a:hover, #menu li#portfolio a:hover, #menu li#contact a:hover { background-position: 0 -28px;}
#menu li#about-me a.current, #menu li#blog a.current, #menu li#portfolio a.current, #menu li#contact a.current { background-position: 0 -56px;}

#menu li#rss a
{
	background-image: url(i/rss.gif);
	width: 41px;
	height: 18px;
	background-position: 0 0;
	text-indent: -9999px;
	list-style: none;
	float: left;
	cursor: pointer;
	margin: 5px 0 0 375px;
        overflow: hidden;
}
#menu li#rss a:hover {background-position: 0 -18px;}




/* ----------- BLOG POST ----------- */

.blog-post
{
	width: 653px;
	margin: 0 0 55px 0;
}

.blog-post p a, .blog-post a, .blog-post ul li a {color: #d34822}
/* .blog-post p strong {background-color: #171717} 
.blog-post p strong.sub-sections {font-size: 15px; color: #7B6951;background-color: #171717;}*/
.blog-post p.sub-sections {font-size: 15px; color: #7B6951; font-weight: bold; margin: 20px 0 10px 0}
.blog-post p.sub-sections strong {background-color: #171717}

.blog-post a img:hover {color: #23A075}

h2, h2 a, h3, h4, h4 a
{
	color: #fff;
	font-family: "Century Gothic", "Avant Garde Gothic", "Trebuchet MS", Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bold;
	margin: 5px 0;
	text-decoration: none;
        background-color:inherit;
}

.blog-post h2, .blog-post h2 a {color: #fff;} /* work around for portfolio links */

h4, h4 a {
 color: #858585;
 font-size: 22px;
}

h2 a:hover, .left-extra a:hover, .right-extra a:hover, .post-end a:hover, #right-container ul a:hover, .tweet-address a:hover, .post-end a:hover, .post-end-v2 a:hover, .blog-post p a:hover, h4:hover, .blog-post ul li a:hover, .pagination a:hover {background-color: #111; text-decoration: none;}

.left-extra
{
	width: 280px;
	font-size: 14px;
	color: #858585;
	float: left;
	margin: 0 0 10px 0;
	
}
.left-extra a, .left-extra a:hover { color: #d34822; text-decoration: none; }
.left-extra .separator {color: #3e3e3e}

.right-extra
{
	width: 370px;
	font-size: 14px;
	color: #7b6951;
	float: right;
	text-align: right;
	margin: 0 0 10px 0;
}
.right-extra a {color: #7b6951; text-decoration: none}

.image-preview
{
	width: 644px;
        height: 187px;
	overflow: hidden;
	border: #41392e 5px solid;
	margin: 10px 0 10px 0;
}

.image-preview:hover, #right-container a img:hover {border: #23A075 5px solid}

.post-end
{
	width: 628px;
	height: 26px;
	overflow: hidden;
	background-image: url(i/post-end.jpg);
	text-align: right;
	padding: 7px 25px 0 0;
	margin: 12px 0;
}
.post-end a {color: #bdb3a1}

.post-end-v2
{
	width: 628px;
	height: 26px;
	overflow: hidden;
	background-image: url(i/post-end.jpg);
	padding: 7px 0 0 15px;
	margin: 12px 0;
	position: relative;
}
.post-end-v2 a {color: #7b6951; font-size: 14px}

.post-end-v2 span 
{
	color: #7b6951; 
	font-size: 14px; 
	font-weight: bold;
	margin: 0 0 0 261px;
}

.post-end-v2 div
{
	width: 100px;
	height: 19px;
	overflow: hidden;
	background-image: url(i/branco.png);
	position: absolute;
	top: 6px;
	left: 511px;
}

.post-end-v2 #digg, .post-end-v2 #stumbleupon, .post-end-v2 #delicious, .post-end-v2 #tweet
{
	width: 14px;
	height: 14px;
	margin: 2px 0 0 10px;
	overflow: hidden;
	display: block;
	float: left;
}

.post-end-v2 #digg span, .post-end-v2 #stumbleupon span, .post-end-v2 #delicious span, .post-end-v2 #tweetspan {display: none}
.post-end-v2 #digg {background: url(i/digg.png) 0 0}
.post-end-v2 #stumbleupon {background: url(i/stumbleupon.png) 0 0}
.post-end-v2 #delicious {background: url(i/delicious.png) 0 0}
.post-end-v2 #tweet {background: url(i/tweet.png) 0 0}
.post-end-v2 #digg:hover, .post-end-v2 #stumbleupon:hover, .post-end-v2 #delicious:hover, .post-end-v2 #tweet:hover {background-position: 0 -14px}

.comments-header, .comments-header a{
	margin: 10px 10px 30px 10px;
	font-size: 18px;
	font-family: "Century Gothic", "Avant Garde Gothic", "Trebuchet MS", Verdana, Geneva, sans-serif;
	color: #b6b6b6;
        text-decoration: none;
}
.comments-header strong {font-weight: bold; color: #bdb3a1}

.comment, .comment-mine
{
	width: 615px;
	margin: 0 0 0 30px;
}

.comment .left, .comment-mine .left
{
	width: 77px;
	float: left;
}

.comment .left .avatar, .comment-mine .left .avatar
{
	width: 50px;
	height: 50px;
	overflow: hidden;
	border: #413a2f 5px solid;
	margin: 3px 0 0 4px;
}
.comment-mine .left .avatar { border-color: #0b6f56 }

.comment .right, .comment-mine .right
{
	width: 538px;
	float: left;
	margin: 0 0 40px 0;
}

.comment .right span, .comment-mine .right span
{
	color: #7b6951;
	font-size: 12px;
        background-color:inherit;
}
.comment .right span cite, .comment-mine .right span cite {font-weight: bold; color: #ccc; font-style: normal;}
.comment .right span a, .comment-mine .right span a {font-weight: bold; color: #fff; background-color:inherit;}

.comment .right div p a {color: #dfdfdf}

.comment .right div, .comment-mine .right div
{
	margin: 10px 0 0 0;
	padding: 7px;
	background-color: #221f19;
}
.comment-mine .right div { background-color: #484036 }


ol.commentlist {  
    margin:0;  
    padding:0;  
}  
   
.commentlist li {  
    list-style:none;    
}  

.form-spacer {margin: 0 0 0 34px}

.pagination a
{
  color: #BDB3A1;
  font-weight: bold;
}

/* ----------- RIGHT HAND STYLES ----------- */

#right-container
{
	background-image: url(i/right-bar.jpg);
	background-repeat: no-repeat;
	min-height: 1230px;
}

#my-photo
{
	width: 247px;
	height: 194px;
	margin: -5px 0 0 15px;
}

.tweet-bar
{
	width: 231px;
	height: 58px;
	background: url(i/tweet-bar.jpg) center no-repeat;
	margin: 5px 0;
	padding: 5px 25px 0 25px;
	color: #bdb3a1;
        line-height: 14px;
}

.tweet-bar a {color: #bdb3a1; text-decoration: none}

.tweet-address, .tweet-date
{
	width: 110px;
	height: 20px;
	margin: 5px 0 5px 0;
	float: left;
	color: #bb3517;
	font-size: 12px;
}
.tweet-date {width: 158px;}
.tweet-address a { color: #7b6951; text-decoration: none; font-size: 12px; margin: 5px 0 5px 20px; }

.tweet-date { text-align: right }

h3
{
	background-image: url(i/right-bar-title.jpg);
	background-repeat: no-repeat;
	margin: 40px 0 0 7px;
	padding: 4px 0 0 18px;
	width: 246px;
	height: 27px;
	color: #bdb3a1;
	font-size: 20px;
        background-color:inherit;
}

#right-container ul 
{
	list-style: none;
	margin: 5px 0 0 -10px;
}
#right-container li { line-height: 22px }
#right-container ul a { color: #7b6951 }

.flickr-area
{
	margin: 0 0 0 22px;
}

.flickr-area img
{
	border: #41392e solid 5px;
	margin: 15px 0 0 15px;
	float: left;
        min-width: 75px;
        min-height: 75px;
}


/* ---------- PORTFOLIO STYLES --------- */
.portfolio-list
{
	list-style: none;
	margin: 5px 0 0 -10px;
}
.portfolio-list li { line-height: 22px }
.portfolio-list img, .portfolio-list img:hover {
	border: #41392e solid 5px;
	margin: 15px 0 0 15px;
	float: left;
        min-width: 100px;
        min-height: 100px;
}
.portfolio-list img:hover {border: #23A075 solid 5px}



/* ----------- FOOTER STYLES ----------- */

#footer
{
	width: 918px;
	height: 15px;
	background-color: #000;
	color: #7b6951;
	font-size: 12px;
	padding: 21px 23px;
}
#footer a {color: #ca3f19; background-color:inherit}
#footer a:hover {background-color: #fff; text-decoration:none}