@import url(reset.css);
@import url(basics.css);
@import url(nav.css);

body {
	background: #CAC1B0 url("../images/bgBody.gif") top center;
	}

#bgHeader {
	background: url("../images/bgBgHeader.jpg") repeat-x top center;
	height: 265px;
	width: 100%;
	margin-bottom: -265px;
	}

#container {
/*	background-image: url("../images/bgRhythm.gif");/* rhythm guide */
	background-color: #f8f6ef;
	width: 800px;
	padding: 0;
	margin: 0em auto 0 auto;
	text-align: left;
	position: relative;
	}

	#header {
		position: relative;
		background: url("../images/bgHeader.jpg") repeat-x top center;
		width: 100%;
		height: 180px;
		}	
	
		#title a {
			background: url("../images/bgLogo.jpg") repeat-x top center;
			position: absolute;
			top: 21px;
			left: 34px;
			width: 420px;
			height: 76px;
			}

		#title a:hover {
		}

		#logo {
			position: absolute;
			top: 13px;
			left: 594px;
			}


	#content {
		padding: 1em 10px 1em 10px;
		line-height: 1.8em;
		}
	
		#content .col1{
			width: 470px;
			float: left;
			}
	
		#content .col2{
			width: 279px;
			padding-top: 3.6em;
			float: right;
			}
	
	#footer {
		background: url("../images/bgFooter.jpg") no-repeat bottom left;
		padding-bottom: 60px;
		margin-bottom: 0;
		clear: both;
		}

		#extrafooter {
			padding-bottom: 20px;
			width: 800px;
			margin: 0 auto 1em auto;
			text-align: center;
			}
	
	
			#extrafooter .text {
				padding-bottom: 1em;
				}
	

#content .pushRight {
	margin-right: -55px;
	margin-left: 14px;
	}

#col2 .pushLeft {
	margin-left: 14px;
	margin-right: -55px;
	}
	

div.splitColL  {
	width: 49%;
	float: left }

div.splitColR {
	width: 49%;
	float: right }

div.splitColThirds {
	width: 210px;
	float: left;
	margin-right: 18px;
	}

div.splitColThirdsLast {
	width: 210px;
	float: left;
	margin-right: -8px;
	}


/*-------------------- callout box */
/* bottom right corner */
div.callout {
	background-color: #d9cdbc;
	background-repeat: repeat-y;
	margin: 0 0 1.8em 0;
	}

	div.callout .head {
		background-repeat: no-repeat;
		padding: 9px 5px;
		}

	div.callout .body {
		padding: 0px 2px;
		}

	div.callout .foot {
		text-align: right;
		background-repeat: no-repeat;
		background-position: bottom left;
		padding: 9px 15px;
	}

#content .col2 .callout {
	background-image: url("../images/bgCol2.jpg");
	}
	#content .col2 .callout .head {
		background-image: url("../images/bgCol2_head.jpg");
		height: 18px;
		}
	#content .col2 .callout .foot {
		background-image: url("../images/bgCol2_foot.jpg");
		}

#content .col1 .callout {
	background-image: url("../images/bgCol1.jpg");
	}
	#content .col1 .callout .head {
		background-image: url("../images/bgCol1_head.jpg");
		height: 18px;
		}
	#content .col1 .callout .foot {
		background-image: url("../images/bgCol1_foot.jpg");
		}


/*=====  TYPOGRAPHY  =====*/

h2.imgReplace {
	height: 18px;
	width: 100%;
	background-repeat: no-repeat;
	}

#content .callout a {
	font-weight: bold;
	color: #4a1b09;
	text-decoration: none;
	}

#content .callout .body h1,
#content .callout .body h2,
#content .callout .body h3,
#content .callout .body h4,
#content .callout .body p {
	padding-left: 4px;
	padding-right: 4px;
	}

#content .callout .body ul {
	background-color: #f7ebd3;
	border: #c6baa6 1px solid;
	border-bottom: none;
	padding: 0;
	margin: 0;
	}

#content .callout .body ul li {
	border-bottom: #c6baa6 1px solid;
	line-height: 0px;
	padding: 0;
	margin: 0;
	}



/*----latest comics */

#latestComics .body p {
	padding-bottom: 0;
}

#latestComics li {
	margin: 0;
	padding: 0;
}

#latestComics img.last {
	margin-left: 10px;
	}


/*----latest wallpapers */

#latestWallpapers li {
	margin: 0;
	padding: 0;
	}

#latestWallpapers img {
	margin-left: 3px;
	margin-right: 6px;
	}

#latestWallpapers img.last {
	margin-right: 0px;
	}

/*----latest columns */

#latestColumns li {
	margin: 0;
	padding: .9em 4px !important;
	}

#latestColumns img.last {
	margin-left: 11px;
	}



#footer p {
	color: #C49586;
	font-size: 1.2em;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	line-height: 1.58333333em;
	margin: 0;
	padding: 0;
	text-indent: 0;
	}

#footer a, #footer a:hover, #footer a:active, #footer a:visited { color: #C49586 }

p.note {
	text-indent: 0;
	font-size: 1.1em;
	line-height: 1.636em;
	color: #4C3851;
	}

p.noIndent {
	text-indent: 0;
	}


/*=====  Newsposts  =====*/


div.newspost {
	margin-bottom: 1.8em;
	}


div.newspost .avatar {
	float: left;
	border: #E4D8CA 2px solid;
	margin-right: 1em;
	}




/*=====  FORMS  =====*/

form  {
	}

fieldset {
	}

label   {
	}

form input, form select, form textarea  {
	}

input#city {
	width: 10em;
	float: left }

select#state {
	width: 10em;
	margin-right: 1em;
	float: left }

input#zip {
	width: 30em;
	float: left }

form input.error   {
	}



form label.error   {
	color: red;
	background-color: #fff4f4;
	text-align: center;
	display: block;
	margin-top: 0;
	margin-right: 8px;
	margin-left: 110px;
	width: auto;
	float: none;
	clear: left }


/*=====  ADVERTISING  =====*/

#adFooter {
	width: 728px;
	height: 90px;
	margin: 0 auto;
	}


/*=====  OVERRIDES  =====*/

.dropCap {
	}

img.floatRight {
	margin-left: 20px;
	}

img.floatLeft {
	margin-right: 20px;
	}

ol.upperRoman {
	list-style-type: upper-roman }

ol.lowerRoman  {
	list-style-type: lower-roman;
	padding-left: 2em }

ol.decimal   {
	list-style-type: decimal;
	padding-left: 1.5em }

ul.indent  {
	margin-left: 2em !important }

ul.bullets, dl.bullets dt   {
	list-style: disc }


ul.checks li, ul.bust li, ul.bustEm li, ul.subtle li   {
	background-repeat: no-repeat;
	list-style-type: none;
	margin-left: -20px;
	padding-left: 20px }

ul.subtle li   {
/*	background-image: url("../images/iconSubtleBullet.gif");
	background-position: 0 6px;
	margin-left: -14px;
	padding-left: 14px; */
	}

.expandomatic {
	cursor: pointer;
	}
	
div.hr {
	width: 100%;
	height:18px;
	background: url("../images/bgHr.gif") no-repeat 50% 50%;
	}
	div.hr hr { display: none; }

/*=====  Comic pages  =====*/

#navButtons {
	font-size: 1.5em;
	color: #9C9080;
	text-align: center;
	margin-bottom: 1.8em;
	display: inline;
}

#navButtons li {
	display: inline;
	margin: 0 .5em;
	}


#navButtons a {
	color: #612106;
	text-decoration: none;
	}


#comicImage {
	text-align:center;
	}
	

.comicDescription {
	background: url("../images/bgHr.gif") no-repeat top center;
	padding-top: 18px;
	clear: both;
	}

	.comicDescription h2 {
		float: left;
		padding-top: 0;
		}
	.comicDescription .latest {
		float: right;
		width: 225px;
		margin-left: 3em;
		padding-top: 0;
		
		}