/* Copyright Ramanan Sivaranjan, 2005.
 *
 * I don't mind if you use bits and peices from this file, but please
 * do not copy this layout verbatim.  Email me if you have any questions.
 *
 * Default layout file for funkaoshi.com
 *
 * The layout is an white box on an orange background.  There is a thumbnail
 * in the top left corner of the box, and navigation links next to the thumbnail,
 * in the top right corner of the box, aligned to the bottom of the thumbnail.
 * Underneath these two elements is the content of the page.  The layout is
 * essentially a sinlge column of text.  The layout is intended to be simple
 * with minimal use of images.
 */

/* We center a box in the middle of the screen.	 This is done by using
 * the body element, and the #main container division
 */


#announcement,
.email-result {
	margin:10px 20px 20px 20px; padding:10px;
	border:1px solid grey;
	background: #FFCC60;
}

body {
	margin:0px; padding:0px;
	background: #FFCC60;
	font: 11px/13px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
	text-align:center;	/* trick ie5 into centering the div. I know, IE5. What? */
}

#main {
	width: 527px;
	border:1px solid black;
	padding:50px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 425px;
}
html>body #main {
	width: 425px;
}
#main {
	background:#FFF;
	margin:50px auto;
	text-align:left;
}

/* The wrap division contains the heading, thumbnail and links
 * They are positioned absolutely within the wrap.
 */

#wrap {
   position:relative;
   margin:0;padding:0;
   height: 160px;
}

#thumbnail {
	position:absolute; top:0px; left:0px;
	width: 164px; height: 160px;
	line-height: 0; /* get rid of space when images wrap */
}
.flickr_badge_image {
	display:inline;
}
#thumbnail a img {
	border: 1px solid black;
	margin: 0px 5px 5px 0;
	padding: 0;
}

#links {
	position:absolute; bottom:0px; left:169px;
	padding:0; margin:0;
	width: 253px;
	font: 9px/11px	Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}

#heading {
	position:absolute; top:0px; left:167px;
	width: 240px;
	font: 9px/11px	Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}


/* The content should contain post divisions, and is placed on the
 * page underneath the wrap element.
 */

#content {
	text-align: left;
	padding-top:15px;
}

/* The footer for a page contains links to the next and previous page
 * if there is a need for such links.  I may add other links here.
 */

#bottom {
	position:relative;
	font: 9px/14px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
	text-align:center;
	margin-top:10px;
	padding-top : 10px;
	border-top: 1px dotted gray;
}
#bottom p.bottom-nav {
   margin:0;padding:0;
}
.link_to_prev,
.link_to_next {
	font: 14px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}


/* A post element blocks of each post.	There is a border between each post
 * at the top of the element, and there is space at the bottom.
 */

.post {
	clear:both;
	padding-top : 16px;
	border-top: 1px dotted gray;
	margin-bottom: 16px;
}

.lyric {
	text-align:left;
	color:gray;
	padding-top : 0px;
}

.post p,
.post blockquote,
.post li,
.post dd {
	font: 11px/18px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}
.post blockquote p:first-child {
   margin-top:0;
}

dl {
	margin:5px 0px 5px 0px;
	padding:0px;
}

dl dt {
	background-color:#FFF5BD;
	border:1px solid black;
	padding:5px;
	margin-top:10px;
}

dl dt:first-child {
	margin-top:0;
}

dl dd {
	margin:0px;
	padding:5px;
	border: 1px solid black;
	border-top: 0;
}

div.post ul {
	list-style:circle;
	margin:5px;
}

.post img {
	border:1px solid black;
}

.post img.center-no-border {
	display:block;
	margin-right:auto; margin-left:auto;
	border:0;
}

.post h2 {
	display:inline;
}

.post sup {
    line-height: 0;
}

.amazon-link {
	float:left;
	padding-top:4px;
	padding-right:8px;
}


/* CSS for styling code examples */

ol.code {
	border: 1px solid #eee;
	color: #333;
   font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
   font-size:10px;
	margin: 0;
	overflow: auto;
	padding: 5px 5px 5px 45px;
}

ol.code li {
	background-color: #f4f8fb;
	margin: 0;
	padding: 0 5px;
}

ol.code li.source {
	background-color: #fff;
	list-style-type: none;
	padding: 5px;
	text-align: center;
}

ol.code li+li {
	margin-top: 2px;
}

ol.code li.tab1 {padding-left: 15px;}
ol.code li.tab2 {padding-left: 30px;}
ol.code li.tab3 {padding-left: 45px;}
ol.code li.tab4 {padding-left: 60px;}
ol.code li.tab5 {padding-left: 75px;}
ol.code li.tab6 {padding-left: 90px;}

ol.code li code {
	color: #333;
}

ol.code li.cmnt  code {
	color: #824c88;
}

/* link log styles */

.link-post  ul.interesting-link {
	list-style:none;
	margin:0px;
	padding:0px;
}

.link-post ul.interesting-link li {
	margin-top:20px;
	color: gray; /* #555*/
}

.link-post ul.interesting-link li.first-child {
	margin-top:0px;
}

/* we want paragraphs in link posts to display inline,
 * but not in blockquotes. */
.link-post li p {
	display: inline;
}
.link-post li blockquote p {
    display: block;
    margin-bottom: 0px;
}


/* comments on posts */

#comment h3 {
	background:#FFF5BD;
	padding:5px;
	border: 1px solid black;
	margin-bottom:10px;
}
#recent-comments ul,
#comment ol {
	padding:0; margin:0;
	list-style:none
}
#recent-comments li,
#comment li {
	font: 11px/15px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
	margin-bottom:10px;
	padding:10px;
	background: #FFFCEC;
	border: 1px solid #FFE9C9;
}
#recent-comments li li,
#comment li li {
	background: #FFFCEC;
	border:0;
	margin:0;
	padding:5px;
}
#recent-comments p,
#comment p {
	font: 11px/18px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}
#recent-comments p:first-child,
#comment p:first-child {
	margin-top:0; padding-top:0;
}
.by-line {
	text-align:right;
	color:#333;
	margin-bottom:0; padding-bottom:0;
}
.comment-instructions {
   padding: 5px 20px 5px 20px;
	font: 11px/18px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
	color:gray;
}


/* Navigation List displays the list of links at the top of each page.	The links
 * each appear on a seperate line, and nested lists appear on the same line.
 */

.skiplink {display:none;}

ul.nav {
	list-style:none;
	margin:0px;
	padding:0px;
}

ul.nav ul {
	display:inline;
	list-style:none;
	margin:0px;
	padding:0px;
}

ul.nav ul li {
	display: inline;
}

#links form {
	margin: 1px 0px 0px 0px; padding:0px;
}

/* archive page */

#date-archive ul {
	list-style: none;
	margin-left:0;padding-left:0;
}


/* General Formatting Rules */

/* Headings */

h1 {
	font : 18px/22px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
	margin:0px; padding:0px;
}
h2 {
	font : 15px/17px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}
h3 {
	font : 12px/13px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, Helvetica;
}

/* Tables */

table {
	border-spacing:0;
	padding:0px;
	border: 1px solid black;
	text-align:left;
}
table th {
	font-weight:bold;
	text-align:left;
	padding: 4px 7px;
}

table tr td {
	padding: 4px 7px;
}
table tr.even {
	background-color: #FFEDAA;
}

.date-archive {
	width:100%;
}

#txpCommentInputForm table {
	border:0;
}

/* Links and Link like Text */

a {
	color: #be6323;
	text-decoration: none;
}

.lyric a,
.interesting-link a
.by-line a {
	color: #AA7D39;
}

a:hover {
	color:#000;
	background-color: #e0a234;
}

#thumbnail a:hover,
#bottom a:hover,
.link_thumbnail a:hover {
	background-color:#FFF;
}

acronym,
abbr {
	border-bottom: 1px dotted gray;
	font-style: normal;
	cursor: help;
}

/* Images */

img {
	border : 0px;
}

/* Preformatted Text, Blockquotes and Code */

blockquote {
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 20px;
	border-left: 1px solid #999;
}

pre {
	background: #FFE680;
	padding: 5px;
	border: 1px dotted #999;
	overflow:auto;
}

code {
   font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
   font-size: 85%;

}


/* Useful classes */
.spoiler { color:#000; background-color:#000; }
.clear { clear : both; }
.float_right { float:right; }
.float_left { float:left; }
.inline { display:inline; }