/* @override http://joe-r.net/read/wp-content/themes/tantan2/style.css */

/*
Theme Name: tan tan noodles
Theme URI: http://joe-r.net/read/toolkit/tantantheme/
Description: Theme for joe-r.net/read 
Version: 0.1
Author: Joe Tan 
Author URI: http://joe-r.net/read/about/
*/

body {
	margin: 0;
	padding: 0;
	text-align:left;
	background:white;
	color: #444;
}
h1,h2,h3,h4,h5 {
	margin: 0;
	padding: 0;
	text-shadow: #666 1px 1px 1px;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 190%;
	font-weight: bold;
	color: #000;
}
h1 a {
	text-decoration: none;
	color:#000;
}
h2 {
	font-size: 150%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #AD2600;
}
h3 {
	font-weight: bold;
	font-size: 100%;
}
h4 {
	color: #AD2600;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fff 1px 1px 1px;

}

strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
p {
	margin: 0 0 1em 0;
}
a {
	color: #004082;
	text-decoration: underline;
}
a:hover {
	background-color: #eee;
}
.post a img {
	border: 1px solid #004082;
}
a.more {
	color: #888;
	font-size: 90%;
}
a.feed {
	display: inline;
	min-height: 12px;
	line-height: 14px;;
	padding-left: 16px;
	background: url(images/feed/12x12.gif) no-repeat;
}
a.feed-large {
    background:url(images/feed/24x24.gif) no-repeat left;
    padding-left:28px;
    font-size:1.5em;
}
a.itunes-feed {
    background:url(images/itunes.gif) no-repeat left;
    padding-left:20px;
    line-height:24px;

}
a.feed:hover, a.feed-large:hover, a.itunes-feed:hover {
	background-color:none;
}
.error {
	color: red;
}
ul, ol {
	margin-left: 2em;
}
ul li, ol li {
	list-style: disc;
	margin-bottom: 1em;
}
ol li {
	list-style-type: decimal;
}
.clear {
	clear: both;
}
#wrap {
	position: relative;
	min-width: 930px;
	max-width: 1024px;
	text-align: left;
}
#header {
	height: 68px;
	padding-top: 75px;
	background:#eeeee5 url(images/header-mid2.gif) 0px 121px repeat-x;
}
#header h1 a {
	display: block;
	background: url(images/header-logo2_joerawr2.gif) no-repeat 50px 0;
    height:100px;
    text-indent:-1000px;
}

#header strong#tagline {
	display: block;
	position: absolute;
	top: 130px;
	right: 3em;
}
#footer {
	clear: both;
	padding:0px 0 40px 0;
	text-align: center;
	line-height: 2;
	color: #888;
}
#footer a{
	color: #888;
}
#main {
	position: relative;
	margin-right: 360px;
	padding-top: 80px;
	float: left;
	background: repeat-x 0px 23px;
}
#main .main2 {
	background:surl(images/content-topright.gif) no-repeat top right;
}
#main .main3 {
	background:surl(images/content-bottom.gif) repeat-x bottom ;
}
#main .main4 {
    padding:0 40px 50px 60px;
	background:surl(images/content-bottomright.gif) no-repeat right bottom ;
}

/*
#photos {
	position: absolute;
	width:100%;
	height: 100px;
	padding:0;
	overflow: hidden;
}
#photos .photos2 {
	position:relative;
	margin:30px 60px;
	padding: 30px 0;
	height:75px;
	width: 4024px;
	overflow: hidden;
	background: red;
}
#photos .left, #photos .right {
	display: none;
	position:absolute;
	width:100px;
	height:100px;
	top:0px;
	z-index:99;
}
#photos .left {
	left:60px;
	background:url(images/photo-leftborder.png) no-repeat;
}
#photos .right {
	right:60px;
	background:url(images/photo-rightborder.png) no-repeat;
}
#photos a {
	position: relative;
	height: 38px;
	width: 38px;
	margin: 0px 0px 0px 0px;
	z-index:98;
	text-decoration: none;
}
#photos a img {
	xfloat: right;
	xdisplay: block;
	width: 38px;
	height: 38px;
	
}
#photos a:hover img {
	width: 75px;
	height: 75px;
	margin-top: -38px;
	margin-bottom: -19;
	xmargin-left: -19px;
	xmargin-right: -19px;
}
#photos a span.img {
	float: right;
}
#photos a img {
	float: right;
	position: relative;
	width:38px;
	height:38px;
	margin: 0;
	z-index:98;
}
#photos a:hover span.img {
	xposition: absolute;
	xbottom: -20px;
	xleft: -20px;
	z-index: 100;
}
x#photos a:hover span.frame {
    position:absolute;
    width:90px;
    height:90px;
    top:-24px;
    left:-25px;
    background:url(images/joepic-frame-centered.png) no-repeat -7px -5px;
    z-index:101;
}
#photos a:hover img {
	width: 75px;
	height: 75px;
	top: -20px;
	xleft: -20px;
}
#photos a {
	opacity: 0.3;
    filter:alpha(opacity='30');
}
#photos a:hover {
	opacity: 0.99;
    filter:alpha(opacity='99');
}
*/
/* @group Nav */

#nav {
	position: absolute;
	top: 143px;
	clear: both;
	left: 60px;;
}
#nav ul {
	margin: 0 0 0 -8px;
}
#nav ul li {
	display: block;
	float:left;
	margin: 4px 10px 4px 4px;
	list-style: none;
}

#nav ul li a {
	padding: 4px;
	line-height: 20px;
	color: #000;
	background: white;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0.7;
}
#nav ul li a:hover {
	background: #eee;
	opacity: 0.99;
	color: #555;
}

/* @end */

/* @group Sidebar */

small.desc {
	color: #888;
}

#sidebar {
	float: right;
	width: 350px;
	margin-left: -360px;
	margin-top: -143px;
	padding-top: 143px;
	padding-right: 10px;
	background: #e6dcc3 url(images/tantan-sidebar-bg2.gif) repeat-y left;
	font-size: 90%;
}

#widgetspace {
background: #e6dcc3;
line-height: 1em;
}

#sidebar a {
	color: #555;
}
#sidebar a:hover {
	xbackground: #d6ceb8;
}

#sidebar .block {
	line-height: 1.4;
}

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

#sidebar2 {
}

#sidebar3 {
	padding: 50px 20px 90px 20px;
	margin-right: -10px;
	background: url(images/tantan-sidebar-bg-bottom2.jpg) no-repeat left bottom;
}
#sidebar small.desc {
	display: block;
	text-align: right;
}
#sidebar .block {
	clear: left;
	margin: 0 0 1em 0;
}
#sidebar .framed {
    position:relative;
	float: right;
	clear: right;
	margin: -5px -60px 0 1em;
    width:100px;
    height:100px;
}

#sidebar .framed-1 {
	margin-top: -45px;
	margin-right: -80px;
}
#sidebar .framed img {
    position:relative;
    margin:10px;
}
#sidebar .framed .frame {
	display: block;
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    background:url(images/joepic-frame2.png) no-repeat;
    text-indent: -10000px;
}

#sidebar .framed .frame-1 {
    background-image:url(images/joepic-frame3.png);
}

#sidebar #site-search input.query {
	width: 50%;
}
#sidebar #sidebar-adsense div.code {
	margin: 10px 25px 0 25px;
}
#sidebar-archives ul {
	margin-top: -1em;
}
#sidebar-archives ul li {
	float: left;
	margin:0px 5px 0 0;
}
#sidebar-archives ul li.year {
	clear: left;
	display: block;
	width: 100%;
	margin-top: 1em;
	color: #000;
}
#recent-sites {
	position: relative;
}
#recent-sites a img {
	position: absolute;
	display: none;
	z-index: 100;
	border: 1px solid #4e4b43;
}
#recent-sites a:hover img {
	display: block;
	left: -110px;
}
#sidebar ul.feeds li {
	margin: 0 0 0.5em 0;
}
#sidebar ul.feeds li span.feed {
	font-size: 90%;
}
#sidebar ul.feeds li .feed {
	padding-left: 20px;
}
#sidebar ul.feeds li a.feed {
	font-weight: bold;
	color: #e67c35;
	text-shadow: #fff 1px 1px 1px;
}
#sidebar ul.feeds li.main {
	margin: 0 0 1em 0;
}
#sidebar ul.feeds li.main a.feed {
	font-size: 150%;
	line-height: 20px;
	padding-left: 20px;
	background: url(images/feed/16x16.gif) no-repeat center left;
}
/* @end */

/* @group Post */
ul.posts {
	margin: 0;
}
ul.posts li {
	list-style: none;
}
ul.posts li a.title {
	margin-right: 0.5em;
	font-size: 130%;
}
ul.other-posts {
	margin:0;
}
ul.other-posts li {
	list-style: none;
}
ul.other-posts li a.title {
	margin-right: 0.5em;
}
a.comments {
	color: #444;
	text-decoration: none;
}
.post {
	position: relative;
	padding: 0 0 1em 0;
	margin: 0 0 2em 0;
}
.post h1 {
	display: inline;
	margin-right: 1em;
}
.post h2 {
	margin-left: -50px;
}
.post .date .day, .post .date .mon {
	display: block;	
}
.post .date {
	position: absolute;
	top: 0px;
	left: -55px;
	width: 50px;
	text-align: center;
	color: #000;
}
.post .date .day {
	font-size: 200%;
}

.post a.num-comments {
	color: #bbb;
	font-size: 145%;
	text-decoration: none;
}

.post a.num-comments:hover {
	background: #eee;
}
.post img.alignright,
.post img[align=right] {
	float: right;
	margin: 0 0 10px 10px;
}
.post img.alignleft,
.post img[align=left] {
	float: left;
	margin: 0 10px 10px 0;
}
.post .meta {
	clear: both;
	color: #888;
	padding: 0.5em;
	background: #eee;
	font-size: 85%;
}
.post .meta a {
	color: #888;
	margin-right: 5px;
}
/* @end */

/* @group Podcast */
ul.links {
	margin: 0;
}
ul.links li {
	list-style: none;
	margin: 0;
}
.podcast h1 {
	clear: left;
	display: block;
}
.podcast .num-comments {
	display: block;
	float: right;
}
.podcast .contents {
	position: relative;
	clear: left;
	float: left;
	margin-right: 215px;
}
.podcast .podcast-pane {
	clear: right;
	float: right;
	margin-left: -210px;
	width: 200px;
	padding: 5px;
	background: #eee;;
}
.podcast .podcast-pane h3 {
	margin-top: 0.5em;
}
#podcast-subscribe p.disclaimer {
	font-size: 80%;
	color: #aaa;
	text-align: center;
}
#more-music {
	margin: 2em 0 0 0;
}
#more-music ul {
	font-size: 90%;
}
#more-music ul li {
	width: 30%;
	height: 75px;
	margin: 0 3% 1% 0;
	float: left;
}
#more-music ul li img {
	float: left;
	margin: 0 5px 5px 0;
}
#more-music ul li small {
	display: block;
	clear: left;
}
#podcast-subscribe p.disclaimer {
	width: 60%;
	margin: 0 auto;
}
/* @end */
/* @group Toolkit */
#recent-updates {
	float: right;
	width: 175px;
	padding: 10px;
	margin: 0 0 20px 20px;
	background: #ddd;
}
#recent-updates ul {
	margin: 0;
}
#recent-updates ul li {
	list-style: none;
	margin: 0 0 1em 0;
}
#recent-updates p.feed-update {
	padding: 0.5em;
	border:2px solid #e67c35;
	background: #e1cec1;
	font-size: 87%;
}
/* @end */
/* @group Sizes */
.medium #main {
	margin-right: 360px;
}

.medium #sidebar {
	padding-right: 0;
	margin-left: -350px;	
}
.medium #sidebar3 {
	margin-right: 0;
}

.medium #sidebar .framed {
	margin-right: -10px;
}
.medium #sidebar .framed-1 {
	display: none;
}

#wrap.narrow {
	min-width: 600px;
}
.narrow #main {
	float: none;
	clear: both;
	margin: 0;
	max-width: 650px;
}
.narrow #header {
	margin-right: 0;
}
.narrow #sidebar {
	float: none;
	clear: left;
	margin: 0 140px 0 60px;
	width: auto;
	max-width: 650px;
	padding-top: 0;
	background: #e6dcc3;
	border: 1px solid #636055;
}
.narrow #sidebar3 {
	padding: 20px;
	background: none;
}
/* @end */


/* @group Comments */
#comments {
	margin: 2em 0 0 0 ;
	padding: 2em 0 0 0;
	border-top: 1px solid #ddd;
}
#comments ol {
	margin-bottom: 2em;
}
#comments ol li {
	position: relative;
	padding: 1em;
	list-style: none;
}
#comments ol li.even {
	background: #f1ecde;
}
#comments ol li.joe {
	border: 5px solid #d4d0c5;
}
#comments ol li .comment-link {
	position: absolute;
	left: -20px;
	font-size: 120%;
	color: #aaa;
	text-decoration: none;
}
#comments ol li span.date {
	position: absolute;
	right: 1em;
	top: 1em;
	color: #888;
}
#comments ol li cite {
	font-size: 130%;
	font-weight: bold;
	
}
#comments ol li cite a {
	color: #000;
	text-decoration: none;
	
}
#commentform textarea {
	width: 100%;
}
#view-all-comments {
	margin: 2em 0;
	background: #e6dcc3;
}
#view-all-comments a {
	display: block;
	padding: 1em;
	text-align: right;
}
/* @end */
/* @group Toolkit Info Page */
#info-box {
	float: right;
	width: 200px;
	padding: 10px;
	margin: 0 0 20px 20px;
	background: #ddd;
}
#info-box .download {
	display: block;
	padding: 4px;
	margin:0 0 1em 0;
	font-size: 150%;
	text-align: center;
	text-decoration: none;
	background: #008500;
	color: white;
}
#info-box p {
	font-size: 90%;;
}
#info-box p strong {
	color: #000;
}
#info-box .feed-updates {
	padding: 0.5em;
	border:2px solid #e67c35;
	background: #e1cec1;
	font-size: 87%;
}
.box-important {
	border: 1px solid red;
	padding: 1em;
	margin: 1em 0;
}
#more-toolkit {
	position: absolute;
	width: 50%;
	right: -55%;
	margin: 1em 0 ;
	background: #f1ecde;
}
/* @end */

/* @group Recent Sites */


ul#sites {
	margin: 0;
	padding: 0;
}
ul#sites li {
	position:relative;
	width: 150px;
	height:120px;
	float: left;
	margin: 0 15px 20px 0;
	list-style: none;
	font-size: 85%;
	text-align: center;
}
ul#sites li div.thumbnail {
/*
	position:absolute;
	display:block;
	width:101px;
	height:76px;
	overflow:hidden;
*/
}
ul#sites li div.thumbnail a {
	color: #4e4b43;
}
ul#sites li div.thumbnail img {
	width: 202px;
	height: 152px;
	width:101px;
	height:76px;
	border: 10px solid #4e4b43;
}


/* @end */

/* @group Homepage */
.section {
	clear: both;;
	position: relative;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #ddd;
}
.section h2 {
	float: left;
	margin-bottom: 1em;
	margin-right: 2em;
}
.section .more {
}
.section ul {
	margin: 0;
}
.section ul li {
	list-style: none;
}
#twitter {
	display: none;
	position: relative;
	margin: 3em 0 3em -40px;
	padding: 0.5em 0.5em 0.5em 40px;
	font-size: 90%;
	background: #eee;
	min-height: 20px;
	line-height: 20px;
	border: 0;;
}
#twitter.enabled {
	display: block;
}
#twitter h2 {
	position: absolute;
	top: -22px;
	left: auto;
	right: 0px;
	height: 22px;
	margin: 0;;
	overflow: hidden;
	color: #eee;
	text-shadow: none;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	font-size: 50px;
	text-transform: lowercase;
	letter-spacing: 5px;
}
#twitter #twitter-arrow {
	position: absolute;
	top: 0px;
	left: -30px;
	width: 0px;
	overflow: hidden;
	border: 15px solid #eee;
	border-top: 15px solid white;
	border-bottom: 15px solid white;
	border-left: 15px solid white;;
}
#twitter #twitter-date {
	position: relative;
	float: right;
	top: 0.5em;
	right: 0.5em;
	font-size: 90%;
	color: #aaa;
}
#distractions ul li strong {
	font-weight: bold;
	color: #000;
}
#distractions ul li p {
	display: inline;
}
#distractions ul li a.comments {
	margin-left: 0.5em;
	color: #888;
}
#distractions ul li.more {
	text-align: right;
	padding-right: 1em;
}
#featured-music .show {
	font-size: 90%;
}
#featured-music .show img {
	float: left;
	margin: 0 5px;
}
#home-adsense div.code {
	width: 468px;
	margin: 0 auto;
}
/* @end */

/* @group Secondary */
#secondary-adsense {
	margin: -3em 0 2em 0;
	padding: 10px;
	text-align: center;
	border: 1px solid #eee;
	
}


/* @end */