/*
		Cranguyma Farms
		Design by Jeffrey Gerard

		Colors scheme:
		#aa0701 Cranberry
		#3e658c Blueberry
		#307000 Holly
		#707070 Gray
		#633f27 Brown borders

*/
/* ----------------------------------------- */
/* LAYOUT */
/* ----------------------------------------- */

body					{	background: #ccaa80 url(images/wood-background.jpg) repeat; 			}
#page-wrap				{	width: 806px; margin: 0px auto; position:relative; z-index:0;			}


/* ----------------------------------------- */
/* HEADER */
/* ----------------------------------------- */
#header					{	position: relative; padding-top: 21px;	}
#header h1#sitename		{	margin: 0; padding:0; width: 430px;		}
#header h1#sitename a	{	display:block;
							/* Image replacement */
							width: 100%;
							padding-top: 67px; height: 0; overflow: hidden;
							background: url("images/sprite-header.png") no-repeat -806px 0px;
						}

#header #tagline		{	margin: 0;
							/* Image replacement */
							width: 430px;
							padding: 23px 0 0 0; height: 0; overflow: hidden;
							background: url("images/sprite-header.png") no-repeat -806px -68px;
						}


#blog-callout-background{	position:absolute;
							top: 0px; right: 0px;
							/* bogblog-letter.png looks better but requires HUGE filesize for correct transparency */
							background: url("images/bogblog-letter.gif") no-repeat top right;
							height: 370px; width: 327px;
							z-index:-1;
						}

#blog-callout			{	position:absolute;
							top: 0px; right: 0px;
							height: 103px; width: 327px;

							padding-top:60px;
						}


#blog-callout .post-title	{ text-align:center; font-weight:bold; padding: 0 49px 0 112px;	}
#blog-callout .post-title a { color: #000; }
#blog-callout .post-preview	{ height: 56px; overflow: hidden; font-style: italic; }
#blog-callout .post-byline	{ text-align:right; padding: 0 39px 0 86px; }
#blog-callout ul.archives	{ height: 70px; overflow: hidden;
							  margin-top: 0; margin-left: 10px; padding:0 40px 0 108px; }


/* ----------------------------------------- */
/* FRONTPAGE SLIDING NAVIGATION */
/* ----------------------------------------- */
ul#slidingnav {
	list-style: none;
	position: absolute;
	top: 20px; right: 2px;
	margin: 0; padding:0;
	width: 330px;
	height: 510px;
	border-top: 2px solid #633f27;
	border-right: 2px solid #633f27;
}

body.home #under-slider {
	float:right;
	width:295px;
	height: 358px;
}


ul#slidingnav  li {
	height: 100px;
	border-bottom: 2px solid #fff; 
	background-color: #000;
}

ul#slidingnav  li a {
	display:block; overflow:hidden;
	height: 100%; width: 100%;
	text-align:center; padding-top: 50px;
	cursor:pointer;
}

ul#slidingnav li.pglist-farm 		{	text-indent: -1100px;
										background: url("images/sprite-slidingnav.jpg") no-repeat 0px bottom;
									}
ul#slidingnav li.pglist-cranberries	{	text-indent: -1100px;
										background: url("images/sprite-slidingnav.jpg") no-repeat -330px bottom;
									}
ul#slidingnav li.pglist-blueberries	{	text-indent: -1100px;
										background: url("images/sprite-slidingnav.jpg") no-repeat -660px bottom;
									}
ul#slidingnav li.pglist-holly		{	text-indent: -1100px;
										background: url("images/sprite-slidingnav.jpg") no-repeat -990px bottom;
									}
ul#slidingnav li.pglist-blog 		{	text-indent: -1100px;
										background: url("images/sprite-slidingnav.jpg") no-repeat -1320px bottom;
									}


/* ----------------------------------------- */
/* TOP NAVIGATIONAL TABS */
/* ----------------------------------------- */
ul#topnav				{ 	background: url(images/sprite-horizontal.png) no-repeat -807px bottom;
							height: 30px; margin: 52px 0 0 0; padding: 0;
						}

ul#topnav>li			{	list-style-type: none;
							float:left; /* could use display:inline-block but that interprets space chars in HTML as horizontal spacing. */
							height: 30px; width: 136px; margin: 0;
							background: url(images/sprite-topnav.png) no-repeat -997px 0px;	
						}

ul#topnav>li>a			{	display:block; margin-top: 8px; margin-left:7px; padding: 0 3px 0 10px;
							height: 15px; line-height: 16px; /* given font-size:12px, to vertically align with icon. */
							color: #333; text-decoration:none;
						}


/* Overrides for ACTIVE TAB */
ul#topnav>li.current_page_item,
ul#topnav>li.current_page_parent,
ul#topnav>li.current_page_ancestor
						{	background-position: -997px -30px; color: #000;	}
ul#topnav>li.current_page_item>a,
ul#topnav>li.current_page_parent>a,
ul#topnav>li.current_page_ancestor>a
						{	color: #000;	}


/* Overrides for HOVERED TAB */
ul#topnav>li:hover		{	background-position: -136px 0px;	}
ul#topnav>li:hover>a	{	color: #000;						}


/* First <li> should be Home icon, not a tab. */
ul#topnav>li.pglist-frontpage {
							background: url(images/sprite-topnav.png) no-repeat -997px bottom;
							width: 90px; padding-left: 0px; margin-left: 10px;
						}
ul#topnav>li.pglist-frontpage>a {
							padding-left: 45px;
							text-shadow: -1px 1px 2px #fff;
						}


/* Put icon on the top-level tabs */
ul#topnav>li.pglist-farm		> a { padding-left: 23px; background: url(images/sprite-topnav.png) no-repeat -1133px -15px; }
ul#topnav>li.pglist-cranberries > a { padding-left: 23px; background: url(images/sprite-topnav.png) no-repeat -1133px -45px; }
ul#topnav>li.pglist-blueberries	> a { padding-left: 23px; background: url(images/sprite-topnav.png) no-repeat -1133px -75px; }
ul#topnav>li.pglist-holly		> a { padding-left: 23px; background: url(images/sprite-topnav.png) no-repeat -1133px -105px; }

ul#topnav>li.pglist-farm		> a:hover,
ul#topnav>li.pglist-farm.current_page_item a,
ul#topnav>li.pglist-farm.current_page_parent a,
ul#topnav>li.pglist-farm.current_page_ancestor a		{ background-position: -1133px 0px; }

ul#topnav>li.pglist-cranberries		> a:hover,
ul#topnav>li.pglist-cranberries.current_page_item a,
ul#topnav>li.pglist-cranberries.current_page_parent a,
ul#topnav>li.pglist-cranberries.current_page_ancestor a	{ background-position: -1133px -30px; }

ul#topnav>li.pglist-blueberries		> a:hover,
ul#topnav>li.pglist-blueberries.current_page_item a,
ul#topnav>li.pglist-blueberries.current_page_parent a,
ul#topnav>li.pglist-blueberries.current_page_ancestor a	{ background-position: -1133px -60px; }

ul#topnav>li.pglist-holly		> a:hover,
ul#topnav>li.pglist-holly.current_page_item a,
ul#topnav>li.pglist-holly.current_page_parent a,
ul#topnav>li.pglist-holly.current_page_ancestor a		{ background-position: -1133px -90px; }



/* ----------------------------------------- */
/* DROP-DOWN MENU from TOPNAV, w/ SUCKERFISH */
/* ----------------------------------------- */

ul#topnav>li			{ 	position: relative; }
ul#topnav>li div.dropnav{ 	display: none; /* Hide sub-navigation til :hover */
							position: absolute;
							top: 30px; left: -4px;
						}

ul#topnav>li:hover div.dropnav	{ display: block;	}

.dropnav				{	background: url(images/sprite-horizontal.png) no-repeat -1613px bottom;
							width: 215px; padding: 0 0 6px 0;
						}

.dropnav>ul				{	background: url(images/sprite-topnav.png) repeat-y 0px 0px;
							color: #000;
							list-style-type: none;
							margin: 0;	padding: 10px 16px;
						}


ul#topnav>li.pglist-farm:hover			{ background-position: -861px 0px; }
ul#topnav>li.pglist-cranberries:hover	{ background-position: -861px -30px; }
ul#topnav>li.pglist-blueberries:hover	{ background-position: -861px -60px; }
ul#topnav>li.pglist-holly:hover			{ background-position: -861px -90px; }
.pglist-farm 		ul	{ 	background-position: 0px 0px; }
.pglist-cranberries ul 	{ 	background-position: -215px 0px; }
.pglist-blueberries ul 	{ 	background-position: -430px 0px; }
.pglist-holly 		ul	{ 	background-position: -645px 0px; }


.dropnav>ul li		{	display:block; line-height: 1;
						margin-bottom: 0.5em;
					}
.dropnav>ul li a 	{	display:block; padding: 0.5em 0;
						color: #fff; font-weight: bold; text-decoration: none;
					}
.dropnav>ul li a:hover 	{	text-decoration: underline;		}

.dropnav>ul li ul	{	padding-left:18px; margin-left:0;}
.dropnav>ul li ul li{	padding-left: 12px; background: url(images/sprite-header.png) no-repeat -810px -108px; }



/* ----------------------------------------- */
/* MAIN AREA */
/* ----------------------------------------- */

#main-outer				{	background: url(images/content.png) repeat-y; clear:left; /* because #topnav tabs are floated. */	}
#main					{	background: url(images/sprite-header.png) no-repeat left top;
							padding: 1px 60px 40px; /* 1px padding-top assumes first bit of content is <h2> w/ big margins */
						}


/* ----------------------------------------- */
/* BOTTOM NAVIGATION */
/* ----------------------------------------- */

ul#bottomnav		{	background: url(images/sprite-horizontal.png) no-repeat 0px bottom; 
						padding: 1px 75px 15px 75px; list-style-type: none;
						clear: both;
					}

ul#bottomnav>li		{	margin: 13px auto; width: 610px;
						background-color:#3e658c;
						height: 52px; font-size: 13px;
					}
ul#bottomnav>li.odd {	margin-left: 50px;
						-webkit-border-top-right-radius: 12px; -webkit-border-bottom-right-radius: 12px;
						-khtml-border-radius-topright: 12px; -khtml-border-radius-bottomright: 12px;	
						-moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px;
						border-top-right-radius: 12px; border-bottom-right-radius: 12px;
					}
ul#bottomnav>li.even{	margin-right: 50px;
						-webkit-border-top-left-radius: 12px; -webkit-border-bottom-left-radius: 12px;
						-khtml-border-radius-topleft: 12px; -khtml-border-radius-bottomleft: 12px;	
						-moz-border-radius-topleft: 12px; -moz-border-radius-bottomleft: 12px;
						border-top-left-radius: 12px; border-bottom-left-radius: 12px;
					}

ul#bottomnav>li>a		{ width:0;
						  visibility:hidden; display:block; /* can't use display:none, because it would hide image-placeholder */
						  position: relative; /* to absolutely position .image-placeholder */
						}
ul#bottomnav>li.odd>a	{ float:left; }
ul#bottomnav>li.even>a	{ float:right;}

ul#bottomnav>li ul		{ padding-top: 6px;		}
ul#bottomnav>li.odd ul	{ padding-left: 50px;	}
ul#bottomnav>li.even ul	{ padding-right: 50px;	}
ul#bottomnav>li ul li	{ display:inline-block;
						  padding: 0 15px 0 8px; background: url(images/sprite-header.png) no-repeat right -108px;
						}
ul#bottomnav>li ul li:last-child {	background: none;	}


ul#bottomnav>li .image-placeholder	{	display:block; position:absolute; top: -28px;
										visibility:visible;
										height: 100px; width: 120px;
									}
li.odd	.image-placeholder	{	left: -80px;	}
li.even	.image-placeholder	{	right: -80px;	}


ul#bottomnav>li.pglist-farm { background-color: #707070; }
li.pglist-farm .image-placeholder { background: url(images/sprite-bottomnav.png) no-repeat 0px 0px; }
ul#bottomnav>li.pglist-cranberries { background-color: #aa0701; }
li.pglist-cranberries .image-placeholder { background: url(images/sprite-bottomnav.png) no-repeat 0px -100px; }
ul#bottomnav>li.pglist-blueberries { background-color: #3e658c; }
li.pglist-blueberries .image-placeholder { background: url(images/sprite-bottomnav.png) no-repeat 0px -200px; }
ul#bottomnav>li.pglist-holly { background-color: #307000; }
li.pglist-holly .image-placeholder { background: url(images/sprite-bottomnav.png) no-repeat 0px -300px; }
ul#bottomnav>li.pglist-blog { background-color: #633f27; }
li.pglist-blog .image-placeholder { background: url(images/sprite-bottomnav.png) no-repeat 0px -400px; }


/* ----------------------------------------- */
/* FOOTER */
/* ----------------------------------------- */
#footer		{	padding: 4px; margin:15px 3px;
				text-align:center;
				background-color: #633f27;
				color: #ccc;
				font-size: 12px;
			}
#footer a	{	color:#ccc;	}