/*======================================
This is the main CSS file for http://sunpig.com/martin.
Note:  should be applied after yui/fonts and yui/reset.
======================================*/

/*#############################################################################
GLOBAL STYLES
-------------
These styles apply to pages and templates in general
#############################################################################*/


/*======================================
Global page structure: the absolute position of
header, sidebar, and content blocks
======================================*/
body {
	text-align:center;
}

/*-- #pagecontainer is a div wrapped around ALL content on ALL pages.  
It sits immediately below the body element--*/
#pagecontainer {
	margin-left:auto;
	margin-right:auto;
	position:relative;
	text-align:left;
	width:60em;
}

/*-- #banner contains the "Legends of the Sun Pig" title.  It is 
used on all pages (blog, quick reviews, and secondbest)--*/
#banner {
	height:300px;
	left:0;
	position:absolute;
	top:0;
	width:250px;
}

	/*-- Image replacement for main title --*/
	#banner  h1{
		background:url(../images/snapshot-banner.jpg) no-repeat 0 0;
		display:block;
		height:100%;
		width:100%;
	}
		#banner h1 a {
			display:block;
			height:100%;
			text-indent:-5000px;
			text-decoration:none;
			width:100%;
		}

/*-- #sidebar is present on most pages, and is filled with secondary
content and navigation options--*/
#sidebar {
	left:0px;
	position:absolute;
	top:330px;
	width:200px;
}

/*-- #contentcontainer is the div that holds the primary content 
on any given page. --*/
#contentcontainer {
	height:1%;
	padding-top:1em;
	position:relative;
	margin-left:230px;
}


/*======================================
Like, *totally* global text styling.
/*======================================*/

body {
	font-family:verdana;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}


/*======================================
Global formatting: pretty box border.
The markup to implement the border box is:
	<div class="box">
		<div class="box-header">
			<div class="inner"></div>
		</div>
		<div class="box-body">
			<div class="inner"></div>
		</div>
		<div class="box-footer">
			<div class="inner"></div>
		</div>
	</div>
This box is generally used immediately inside the 
#contentcontainer div to present the main content
in a pretty box
======================================*/
.box {
	margin:0 0 3em 0;
	padding:0;
	overflow:hidden;
	position:relative;
	top:0;
	left:0;
}

.box-header {
	background:url(../images/backblock-whole.png) no-repeat 0 0;
	height:24px;
	overflow:hidden;
	position:relative;
	width:100%;
}

.box-header .inner {
	background:url(../images/backblock-whole.png) no-repeat 100% 0;
	height:24px;
	right:0;
	position:absolute;
	width:20px;
}

.box-body {
	background:url(../images/backblock-midslice-h.png) repeat-Y 0 0;
	position:relative;
}

.box-body .inner {
	background:url(../images/backblock-midslice-h.png) repeat-Y 100% 0;
	margin:-5px 0 0 12px;
}

.box-footer {
	background:url(../images/backblock-whole.png) no-repeat 0 100%;
	bottom:0;
	height:25px;
	left:0;
	position:relative;
	width:100%;
}

.box-footer .inner {
	background:url(../images/backblock-whole.png) no-repeat 100% 100%;
	bottom:0;
	height:25px;
	right:0;
	position:absolute;
	width:20px;
}


/*======================================
Blog entry styling.  Used on the home page
and individual entry archives
/*======================================*/

/*-- div.entry is the container for a single blog entry --*/
.entry {
	background:url(../images/bluebox-b.gif) no-repeat 50% 100%;
	height:1%;
	margin:0 4em 0 1.6em;
	padding:1em 0 2em 0;
}

/*-- h3.title is the title of the entry --*/
.entry h3.title {
	color:#262;
	font-family:"Lucida Grande","Arial";
	font-size:197%;
	letter-spacing:-0.05em;
}

.entry h3.title a {
	border:none;
	color:#262;
	text-decoration:none;
}

.entry h3.title a:hover {
	color:#595;
}

/*-- h4, h5 and h6 are used for headings within an entry --*/
.entry h4 {
	clear:both;
	font-size:1.4em;
	line-height:140%;
	margin-bottom:0.3em;
	margin-top:2em;
}

.entry h5,
.entry h6 {
	font-weight:bold;
	font-size:1em;
	line-height:140%;
	margin-bottom:0.3em;
	margin-top:2em;
}

.entry h6 {
	font-size:0.8em;
}


/*-- General entry text formatting --*/
.entry p,
.entry blockquote,
.entry li,
.entry dd,
.entry dt
{
	color:#114;
	font-size:85%;
	line-height:160%;
	margin-bottom:1em;
}

/*-- Error block during comment submission --*/
.entry blockquote.error {
	background-color:#faa;
	border-left:4px solid #f66;
}


/*-- Display of lists within entries --*/
.entry ul {
	list-style-type:disc;
	margin-bottom:1em;
	padding:0 1em 1.4em 4em;
}

.entry ol {
	list-style-type:decimal;
	margin-bottom:1em;
	padding:0 1em 1.4em 4em;
}

.entry li {
	margin-bottom:0.5em;
}

.entry dl {
}
.entry dt {
	font-weight:bold;
	margin-bottom:0.5em;
}
.entry dd {
	font-weight:normal;
	margin-left:1.5em;
	margin-bottom:2em;
}

/*-- For centered elements within an entry (e.g. divs with photos --*/
.entry .center {
	text-align:center;
}

/*-- Hyperlinks --*/
.entry a {
	border-bottom:1px dotted;
	color:#00c;
	text-decoration:none;
}

.entry a:visited {
	color:#909;
}

.entry a:hover {
	border-bottom:1px solid;
}

/*-- Hyperlinked images --*/
.entry a.image {
	border:none;
}

/*-- p.posted contains the line of details following the 
entry title (date posted, category, number of comments, etc.) --*/
.entry p.posted a {
	color:#333;
}

/*-- Blockquotes in entries: use background colour and margins 
to set them apart from the entry body --*/
.entry blockquote,
#entry-comments blockquote{
	background-color:#ddf;
	border-left:4px solid #99f;
	margin:0 2em 1em 4em;
	padding:1em 0 1em 0.5em;
}

/*-- Images in entries --*/
.entry img {
	background:#fff;
	border:7px solid #464;
	margin-bottom:0.3em;
	padding:4px;
	position:relative;
}

/*-- Left-floated image --*/
.entry img.left {
	float:left;
	margin-right:1em;
}

/*-- Right-floated image --*/
.entry img.right {
	float:right;
	margin-left:1em;
}

/*-- Plain image --*/
.entry img.plain {
	border:none;
	padding:0;
}


/*-- Images and ratings for quickreview entries --*/
.entry div.quickreview-image  {
	float:left;
	position:relative;
	width:10em;
}
	
.entry div.quickreview-image img.item {
	width:7em;
}

.entry div.quickreview-image img.stars {
	border:none;
	padding:0;
	margin:0;
}


/*======================================
Global sidebar styling.  Used on the home page
and individual entry archives.
/*======================================*/


/*-- Sidebar headers; these styles should be supplemented 
by image replacements in the styles for each specific page template--*/
#sidebar h2 {
	display:block;
	height:40px;
	margin-bottom:1em;
	overflow:hidden;
	padding-bottom:4px;
}

#sidebar h2 span {
		display:block;
		height:100%;
		margin-right:-8px;
		width:100%;
		text-decoration:none;
		text-indent:-4000px;
	}

#sidebar h3 {
	color:#363;
	line-height:200%;
}

/*-- Paragraphs and lists --*/
#sidebar p,
#sidebar li {
	color:#336;
	font-size:85%;
	line-height:160%;
}

#sidebar p,
#sidebar ul {
	margin-bottom:1em;
}

#sidebar p a,
#sidebar li a {
	border-bottom:1px dotted;
	text-decoration:none;
}

#sidebar p a:hover,
#sidebar li a:hover {
	border-bottom:1px solid;
}

/*-- List item styling for the sidebar on the home page --*/
#sidebar li {
	background:url(../images/internal-link-whitebg.gif) no-repeat 0 0.15em;
	padding:0 0 4px 18px;
}




/*#############################################################################
PAGE/TEMPLATE-SPECIFIC STYLES
-------------
Below this point are styles that apply to a single page (or template).
Make sure to clearly define what page/template is being targeted.
#############################################################################*/



/*======================================
Legends:index.html
======================================*/

/*-- Photos block for the home page --*/
body#index #photos {
	height:1%;
	margin-left:230px;
	padding-top:2em;
	position:relative;
}

body#index #photos ul {
	text-align:center;
}

body#index #photos li {
	display:inline;
	padding:1em;
}
body#index #photos li img {
	background:#fff;
	border:7px solid #464;
	padding:4px;
}

/*-- Page footer block for the home page --*/
#pagefooter {
	border-top:1px solid #999;
	display:none;
	color:#333;
	background-color:#ddd;
	font-size:77%;
}

/*-- Skiplinks block for the home page --*/
body#index #skiplinks {
	height:1%;
	margin:0 15px 0 240px;
	padding-bottom:0.3em;
	padding-top:0.3em;
	position:relative;
	text-align:center;
}

body#index #skiplinks p {
	color:#336;
	display:inline;
	font-size:85%;
	margin-right:0.5em;
}

body#index #skiplinks ul {
	display:inline;
}

body#index #skiplinks li {
	display:inline;
	font-size:85%;
	margin:0 0.7em 0 0.3em;
}

body#index #skiplinks li a {
	color:#336;
	text-decoration:none;
	padding-bottom:0.1em;
}

body#index #skiplinks li.blog a {border-bottom:2px solid #f99}
body#index #skiplinks li.reviews a {border-bottom:2px solid #99f}
body#index #skiplinks li.comments a {border-bottom:2px solid #9f9}
body#index #skiplinks li.archives a {border-bottom:2px solid #f9f}
body#index #skiplinks li.links a {border-bottom:2px solid #9ff}
body#index #skiplinks li.about a {border-bottom:2px solid #cc0}

body#index #skiplinks li a:hover {border-bottom-width:4px}


/*-- Sidebar image replacements for home page --*/
body#index #sidebar #about  h2 span{background:url(../images/h2-images-white.png) no-repeat -5px -447px;border-bottom:3px solid #cc0;}
body#index #sidebar #archives  h2 span{background:url(../images/h2-images-white.png) no-repeat -5px -385px;border-bottom:3px solid #f9f;}
body#index #sidebar #comments h2 span{background:url(../images/h2-images-white.png) no-repeat -5px -562px;border-bottom:3px solid #9f9;}
body#index #sidebar #links h2 span{background:url(../images/h2-images-white.png) no-repeat -5px -613px;border-bottom:3px solid #9ff;}
body#index #sidebar #quickreviews h2 span{background:url(../images/h2-images-white.png) no-repeat -5px -510px;border-bottom:3px solid #99f;}

body#index #sidebar #about,
body#index #sidebar #archives,
body#index #sidebar #comments,
body#index #sidebar #links {
	margin-top:2em;
}


/*-- Comment styling for the sidebar on the home page --*/
body#index #sidebar #comments div.comment {
	height:1%;
	padding:0 0 1em 0;
	margin:0 0 1em 0;
}
body#index #sidebar #comments div.comment h3{
	color:#000;
	font-size:85%;
	font-weight:normal;
	line-height:140%;
	margin:0 0 0.5em 0;
}
body#index #sidebar #comments div.comment h3 span.author{
	font-weight:bold;
}
body#index #sidebar #comments div.comment h3 a {
	border-bottom:1px dotted;
	font-weight:bold;
	text-decoration:none;
}
body#index #sidebar #comments div.comment h3 a:hover {
	border-bottom:1px solid;
}
body#index #sidebar #comments div.comment p {
	line-height:140%;
	margin:0;
}
body#index #sidebar #comments div.comment p span.date{
	background:url(../images/comment.png) no-repeat 0 0;
	font-style:italic;
	color:#669;
	padding-left:16px;
}

body#index #sidebar #archives h3 {
	color:#363;
	line-height:200%;
}



/*-- Quick review styling for the home page --*/

body#index #sidebar #quickreviews h2 {
	margin-bottom:2em;
}

body#index #sidebar .quickreview {
	margin-bottom:1em;
	overflow:hidden;
	position:relative;
	text-align:left;
}

body#index #sidebar .quickreview p{
	text-align:left;
}

body#index #sidebar .quickreview .meta {
	float:left;
	margin:0.2em 0.7em 0 0;
	text-align:center;
	width:80px;
}

body#index #sidebar .quickreview .meta a.quickreviewimage img{
	background-color:#fff;
	border:4px solid #585;
	width:67px;
	padding:2px;
}

body#index #sidebar .quickreview h3{
	font-family:"Lucida Grande","Arial";
	font-size:114%;
	font-weight:bold;
	letter-spacing:-0.05em;
	line-height:140%;
}

body#index #sidebar .quickreview h3 a{
	color:#262;
	text-decoration:none;
}

body#index #sidebar .quickreview h3 a:hover{
	color:#595;
}

body#index #sidebar .quickreview p.posted,
body#index #sidebar .quickreview p.posted a{
	color:#666;
}

body#index #sidebar .quickreview p.posted a{
	font-size:78%;
}



/*======================================
Legends and quick reviews: archive indexes
(this also includes tag search results pages,
as these effectively function as archive pages)
======================================*/
body.archiveindex #contentcontainer h2 {
	color:#262;
	font-family:"Lucida Grande","Arial";
	font-size:197%;
	height:1%;
	letter-spacing:-0.05em;
	line-height:160%;
	margin-left:20px;
	margin-right:45px;
}

body.archiveindex #contentcontainer h3 {
	color:#363;
	font-family:"Lucida Grande", Arial;
	font-size:122%;
	letter-spacing:-0.05em;
	line-height:140%;
	margin:1em 45px 0.2em 20px;
}

body.archiveindex #contentcontainer ul {
	margin-left:20px;
	margin-right:45px;
}

body.archiveindex #contentcontainer li{
	background:url(../images/internal-link-lightbg.gif) no-repeat 0 0.2em;
	font-size:92%;
	line-height:160%;
	padding:0 0 4px 18px;
}

	body.archiveindex #contentcontainer li ul.tags {
		margin:0 0 0.4em 0;
	}

		body.archiveindex #contentcontainer li ul.tags li {
			background-image:none;
			display:inline;
			line-height:120%;
			font-size:85%;
			margin-right:0.5em;
			padding:0;
		}

			body.archiveindex #contentcontainer li ul.tags li a {
				color:#336;
			}

			body.archiveindex #contentcontainer li ul.tags li a:hover {
				background-color:#ffc;
			}

body.archiveindex #contentcontainer li span.rating {
	display:block;
	margin-top:0.3em;
}

body.archiveindex #contentcontainer li span.posted {
	color:#669;
	display:block;
	margin-bottom:0.7em;
}

/*-- quicklinks section at the top of the page: provide 
quick lookup on the rest of the archive page --*/
body.archiveindex #contentcontainer #quicklinks {
	background-color:#eee;
	border:1px solid #669;
	padding:1em;
}

body.archiveindex #contentcontainer #quicklinks li {
	background-image:none;
	display:inline;
	font-size:77%;
	line-height:200%;
	padding:0;
	margin:0 1em 0 0;
}

body.archiveindex #contentcontainer #quicklinks li a {
	white-space:nowrap;
}

body.archiveindex #sidebar h2 {
	background:url(../images/h2-images-white.png) no-repeat -5px -385px;
	border-bottom:3px solid #f9f;
}

body.archiveindex #sidebar li.currentarchive {
	background-color:#eee;
	background-image:url(../images/internal-link-lightbg.gif);
	border:1px solid #aaa;
	color:#300;
	font-weight:bold;
}

body#search-by-tags #sidebar h2 {
	background:url(../images/h2-images-white.png) no-repeat -8px -667px;
	border-bottom:3px solid #f9f;
}





/*======================================
/* Legends & Quick Reviews : 
Individual entry archive page template styles
/*======================================*/

/* Image replacements for navigation options on archive pages*/
body#entry #sidebar h2#blog {
	background:url(../images/h2-images-white.png) no-repeat -5px -14px;
	border-bottom:3px solid #f99;
}

body#quickreview #sidebar h2#quickreviews {
	background:url(../images/h2-images-white.png) no-repeat -5px -510px;
	border-bottom:3px solid #99f;
}

body#entry #sidebar h2#archives,
body#quickreview #sidebar h2#archives {
	background:url(../images/h2-images-white.png) no-repeat -5px -385px;
	border-bottom:3px solid #f9f;
	margin-top:3em;
}

body#quickreview #sidebar ul.prevnext li {
	background-image:none;
	height:1%;
	margin:0;
	padding:0;
	position:relative;
}

body#quickreview #sidebar ul.prevnext li span.reviewdetails {
	display:block;
	line-height:160%;
	margin-left:4.5em;
}

body#quickreview #sidebar ul.prevnext img.reviewimage {
	background-color:#fff;
	border:3px solid #363;
	float:left;
	margin-top:0.2em;
	padding:2px;
	width:3.2em;
}

body#quickreview #sidebar ul span.rating {
	display:block;
}

body#entry #sidebar span.posted,
body#quickreview #sidebar span.posted {
	color:#666;
	display:block;
	margin-top:0.2em;
}



#entry-comments {
	margin:0 37px 0 16px;
}

	#entry-comments h3,
	#entry-comments h2{
		color:#669;
		font-family:"Lucida Grande","Arial";
		font-size:129%;
		text-indent:-5000px;
		height:30px;
	}

	#entry-comments h3.comments-header {background:url(../images/h3-images.png) no-repeat -5px -192px;margin-bottom:-0.5em;}
	#entry-comments h2.comments-open-header {background:url(../images/h3-images.png) no-repeat -5px -232px;margin-bottom:0.5em;}

	
.comments p {
	font-size:85%;
	line-height:160%;
	margin-bottom:1em;
}
/*-- Comment body --*/
.comment {
	margin-top:2em;
}

.comment-details {
	border:1px solid #abc2e1;
	border-bottom:none;
	background:url(../images/bluebox-grad.gif) repeat-X 0 -80px;
	display:block;
	margin:0;
	overflow:auto;
	position:relative;
}

	.comment-details h4 {
		font-family:"Lucida Grande","Arial";
		font-size:129%;
		font-weight:bold;
		letter-spacing:-0.05em;
		text-decoration:none;
	}

		.comment-details h4 a {
			background:url(../images/bullet_go.png) no-repeat 100% 50%;
			color:#262;
			padding-right:20px;
		}

		.comment-details span.date a {
			color:#333;
			display:block;
			font-size:85%;
			line-height:200%;
			text-decoration:none;
		}

.gravatar {
	float:left;
	height:40px;
	margin:0 8px 6px 0;
	position:relative;
	width:40px;
}

	.gravatar img{
		height:40px;
		margin:0;
		padding:1px;
		width:40px;
	}


.comment-content {
	background-color:#fff;
	border:1px solid #abc2e1;
	padding:0.4em;
}

	.comment-content p {
		margin:0 0 0.8em 0;
	}

	
/*--Comment entry form--*/

#comments-open {
	background:url(../images/bluebox-b.gif) no-repeat 50% 0;
	margin-top:4em;
	padding-top:2em;
}

.comments p.typekeylogin {
	border:1px solid #339;
	color:#009;
	padding:0.4em;
}

.comments p.comments-open-moderated {
	background-color:#fee;
	border:1px solid #933;
	color:#900;
	font-weight:bold;
	margin-bottom:1em;
	margin-top:1em;
	padding:0.4em;
}

.comments p.getagravatar {
	background-color:#eef;
	border:1px solid #339;
	padding:0.4em;
}

	.comments p.getagravatar a {
		font-weight:bold;
	}

#comments-open-data {
	padding:0.4em;
}

#comments-open-data p {
	height:1%;
	overflow:auto;
	position:relative;
	padding-bottom:1em;
}

#comments-open-data p input {
	display:block;
	font-family:verdana;
	font-size:100%;
	left:15em;
	padding:0.2em;
	position:absolute;
	top:0;
	width:20em;
}
#comments-open-data p label input { /* errant checkbox */
	width:2em;
}
#comments-open-text {
	padding:0.4em;
}

#comments-open-text label{
	display:block;
	margin-bottom:0.5em;
}
#comments-open-text textarea {
	font-family:verdana;
	width:100%;
}

#comments-open-footer {
	padding:0.4em;
	text-align:right;
}