/* RSC 2003: Ruychi Blog stylesheet. */
/* Id: rc-styles.css, v 0.6 2004/01/29 */
/* layout: 3 column, center liquid, sides fixed */

/* RC040129: added classes img-left, img-right
             change font size
             added  show-hide classes */

/* ===============================================
box layout
--------------------------------------------------
the methods used were based on the work of
Alex Robinson at:
[http://http://www.fu2k.org/alex/css/index.mhtml ]
Big John at:
[http://www.positioniseverything.net/ ]
-------------------------------------------------- */

/* This is the Container for Left, Center, Right, boxes */
/* margin-top negative for NN4 */
#container {
	position: relative;
	margin: 0px;
	padding: 0px;
	margin-left: 0px; /* originally=20 */
	margin-right: 0px; /* originally=20 */
	top: -30px;
}
/* Now do stuff NN4 hates */
/*/*/
#container {
	top: 0px;
/* border: solid 2px #ffcc00; to "see" the box */
}
/* NS4 hack over */
/* Be nice to Opera 5 */
body>#container {
	top: 0px;
}

/* the Left box with fixed width */
#left {
	background-color: #993300;
	position: absolute;
	float: left;
	margin: 0px;
	padding: 0px;
	left: 22px;
	top: 16px;
	width: 200px;
/* border: solid 2px #000000; to "see" the box */
}
/* Now reset cos only NS4 needs the position:absolute, left and top */
/*/*/
#left {
	position: relative;
	left: 0px;
	top: 0px
}
/* NS4 hack over */

/* the Right box with fixed width */
#right {
	background-color: #993300;
	position: absolute;
	float: right;
	margin: 0px;
	padding: 0px;
	right: 0px;
	top: 16px;
	width: 200px;
/* border: solid 2px #000000; to "see" the box */
}
/* Now reset cos only NS4 needs the position:absolute and top */
/*/*/
#right {
	position: relative;
	top: 0px;
}
/* NS4 hack over */
/* Be nice to Opera 5 */
html>body #right {
	right: -20px;
}
/* Now get gecko and opera 5+ back on the road */
html>body #right {
	\right: 0px;
}

/* the Center box with fluid width */
/* IE6 nolike the pos:absolute, nor the float:left and insists onthe margin-top being set */
#center {
	position: relative;
	margin: 0px;
	margin-left: 216px;
	margin-right: 216px;
	margin-top: 0px;
/* border: solid 2px #00CCCC; to "see" the box */
}
/* Now reset cos only NS4 needs the right-margin taken off */
/*/*/
#center {
	top: 0px;
	margin-left: 202px; /* originally=220 */
	margin-right: 202px; /* originally=220 */
}
/* NS4 hack over */
/* Be nice to Opera 5 */
html>body #center {
	margin-left: 202px; /* originally=220 */
	margin-right: 202px; /* originally=220 */
}
/* view all three inner boxes aligned on top */
#center {
	padding: 0px; /* was 16 */
}
/* The End of Container boxes */

/* the Top (for the Blog Banner) box */
#top {
	position: relative;
	margin: 0px;
	padding: 0px;
	margin-left: 0px; /* originally=20 */
	margin-right: 0px; /* originally=20 */
	margin-top: -5px; /* originally=-16 */
	margin-bottom: 0px; /* originally=16 */
/* border: solid 2px #000000; to "see" the box */
}
/* Now reset cos only NS4 needs negative margin-top */
/*/*/
#top {
	margin-top: 5px; /* originally=16 */
}
/* NS4 hack over */
/* Be nice to Opera 5 */
body>#top {
	margin-top: 5px; /* originally=16 */
}


/* basic style elements */

a {
	font-weight: normal;
	text-decoration: none;
}

a:link,a:visited {
	color: #FFCC66;
	font-style: italic;
	text-decoration: none;
}

a:visited {
	font-style: normal;
	color: #B2FF66;
}

a:hover,a:active {
	background: #FFE699;
	color: #8366FF;
}

html, body {
	font: 12px/16px Verdana, Arial, sans-serif;
	color: #CCCCCC;
	margin: 0px;
	padding: 0px;
	background-color: #390404;
}

body {
	margin-bottom: 20px;
}

blockquote {
	border:1px dotted #000;
	background:#FFE1C3;
	padding:5px;
}

h1, h2, h3 {
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}

div {
	margin: 0px;
	padding: 0px;
/* border: thin dashed; for visual aid */
}

/* Classes used in elements*/
.blog {
	background: #FFFFFF;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
}

.comments-body {
	background: #FFFFFF;
	color: #666666;
	font-size: small;
	font-weight: normal;
	line-height: 140%;
	padding: 10px;
}

.comments-head	{
	border: 1px solid #999999;
	color: #07398D;
	font-size: small;
	font-weight: normal;
	margin-top: 10px;
	padding: 5px;
}

.comments-post {
	background: #FFFFFF;
	color: #666666;
	font-size: x-small;
	font-weight: normal;
}

.content {
	background-color: #FFFFCC;
	border-bottom: 1px dotted #003366;
	color: #663300;
	font-size: small;
	padding: 15px 15px 5px 15px;
}

.content blockquote {
	line-height: 100%;
}

.content h1 {
	color: #666600;
	font-size: medium;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 3px;
	text-align: left;
}

.content h2 {
	border-bottom: 1px solid #663300;
	color: #3A1F04;
	font-size: small;
	margin-bottom: 10px;
	padding: 3px;
	text-align: left;
}

.content h3 {
	border-bottom: 1px solid #660099;
	color: #3A1F04;
	font-size: small;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 3px;
	text-align: left;
}

.content img {
	vertical-align:text-top;
	float: left;
	margin: 4px 4px 6px 0px;
}

.content li {
	line-height: 100%;
}

.content p {
	color: #3A1F04;
	font-size: 11px;
	font-weight: normal;
	line-height: 140%;
	margin-bottom: 10px;
	text-align: justify;
}

.content p.posted {
	color: #669933;
	font-size: x-small;
	font-style: italic;
	line-height: normal;
	margin-bottom: 25px;
	padding: 3px;
	text-align: left;
}
.content p.posted a:link,
.content p.posted a:visited {
	color: #333399;
	font-style: italic;
	text-decoration: none;
}
	
.linkleft, .linkright {
	font-size: x-small;
	line-height: 100%;
	margin-bottom: 15px;
	padding: 2px;
}

.linkright {
	text-align: right;
}

.linkleft {
	text-align: left;
}
.picture {
	margin-bottom: 20px;
	text-align: right;
	float: left;
}

.sidebarleft, .sidebarright {
	padding: 15px;
}

.sidebarleft h2, .sidebarright h2 {
	border-bottom: 1px solid #FFFFCC;
	color: #FFFFCC;
	font-size: small;
	font-weight: bold;
	letter-spacing: .2em;
	padding: 3px;
}

.sidebarright h2 {
	text-align: right;
}

.sidebarleft h2 {
	text-align: left;
}

.sidebarleft h3 {
	text-align: left;
	color: #FFFFCC;
	font-size: x-small;
	font-weight: bold;
	padding: 3px 3px 5px 0px;
}
	
.sidebarright img {
	border: ridge;
	border-color: #800000;
	border-width: medium;
	vertical-align: text-top;
	float: right;
	margin: 4px 4px 6px 6px;
}

.trackback-body {
	background: #FFFFFF;
	color: #666666;
	font-size: small;
	font-weight: normal;
	line-height: 140%;
	padding: 10px;
}

.trackback-post {
	background: #FFFFFF;
	color: #666666;
	font-size: x-small;
	font-weight: normal;
}

.trackback-url {
	background: #FFFFFF;
	border: 1px dashed #CCCCCC;
	color: #666666;
	font-size: small;
	font-weight: normal;
	line-height: 140%;
	padding: 10px;
}

/* Other ID's used in the Blog */
#banner {
	background: #390404;
	color: #FFFFCC;
	padding: 15px;
	text-align: left;
}

#banner a {
	color: #99CC33;
	text-decoration: none;
}

#banner h1 {
	font-size: x-large;
	font-weight: bold;
}

#banner h2 {
	font-size: 10px;
	color: #FFAE00;
}

#comment-data {
	border-right: 1px dotted #BBBBBB;
	float: left;
	margin-right: 15px;
	padding-right: 15px;
	text-align: left;
	width: 180px;
}

/* for hide, show DOM scripting */
#books,.books, #magazines, .magazines, #movies, .movies, #music, .music, #argonauta, .argonauta {
	display:none;
	margin-left:0;
	padding-left:0;
}