/* CHANGES BEHAVIOR AT TOP OF "AREA PAGES" (i.e., CATEGORY ARCHIVE PAGES) */
.custom #archive_info p { color: #ffffff; }  /* whites out "From The Category Archives" intro text */
.custom #archive_info h1 { text-align:center ;font-weight: bold;  color: #000000; }  /* f?? */

/* CHANGE LINK COLOR TO MATCH WHAT IS IN ADSENSE */
a:link , a:visited{
	color: #398DC7 ;
	text-decoration: none;
	font-weight: bold;
        }

/* 
LEFT AND RIGHT FLOATING DIV'S.  The following creates DIVs for floating in-column (e.g., for ads or YouTube embeds).  For a div with class="lefty" to hold any HTML code or element in "float left" mode and "righty" for float:right 
*/

div.lefty
{
  margin-top:2px;
  margin-bottom:4px;
  margin-right:10px;
  margin-left:2px;
  border: 0px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
}
div.righty
{
  margin-top:2px;
  margin-bottom:4px;
  margin-right:0px;
  margin-left:10px;
  border: 1px dotted #0000ff;
  height: auto;
  width: auto;
  float: right;
}
div.centery
{
  margin-top:2px;
  margin-bottom:4px;
  margin-right:0px;
  margin-left:0px;
  text-align:center;
  height: auto;
  width: auto;
}

/* 
CLICKABLE MASTHEAD IMAGE.  The following sets up a clickable background image in the masthead based on the site title's link.  Adjust the height & width attributes to reflect the actual size of your image.  Change the filename of your image to reflect the actual header's file name 
*/
    .custom #header #logo a { display: block; height: 110px; width: 800px; margin: 6px; margin-top: -20px; background: url('/header.jpg') no-repeat; outline: none; }

/* This line gets rid of the site title & tagline by casting them out to far left field */
    .custom #header #logo, .custom #header #tagline { text-indent: -9999px; }  
/* 
This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image This is a bit of a kludge, but it seems to work. 
*/
    .custom #header #tagline { height: 0; }
/* 
This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content 
*/
    .custom #header { padding: 0; }


/* CONTROL OF BACKGROUND, CONTAINER COLOR AND STYLES */
     body.custom { background: url('/area_pix/ctg-background.png') ; }
     .custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em; background: #D89215; border: 0.4em solid #3e3e3a; }
    .custom #page { background: #fff; }

	
/* 
CONTROL OF UNCLASSIFIED PHOTOS - Adds default right-margin to all images, incl. Debi's standard floating ones, but exempts those with img id="button"
*/
.custom img {
        margin-right: 6px
}
.custom img#button {
        margin-right: 0px
}


/* CONTROL OF IN-LINE PHOTOS - I'm not sure what this is or does. part of insert-image/flickr */
.custom .photo_left, .custom .photo_right {
	background: #eee;
	border: 0.071em solid #ccc;
	color: #888;
	margin-bottom: 1.571em;
	padding: 0.714em;
}
.custom .photo_center {
	clear: both;
	color: #888;
	float: none;
	margin-bottom: 1.571em;
	text-align: center;
}
.custom .photo_left {
	clear: left;
	float: left;
	margin-right: 1.571em;
	text-align: left;
}
.custom .photo_right {
	clear: right;
	float: right;
	margin-left: 1.571em;
	text-align: right;
}
.custom .photo_center img {
	background: #eee;
	border: 0.071em solid #ccc;
	margin-bottom: -2.714em;
	padding: 0.714em 0.714em 2.714em 0.714em;
}
.custom .photo_center small a img {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
}
.custom .photo_center small a, .custom .photo_left small a, .custom .photo_right small a {
	color: inherit;
	text-decoration: none;
}


/*- HIDE CLOSED COMMENTS notice on single post pages or excerpts   */
     .comments_closed p  { display: none; }
     .format_text .to_comments  {display: none; }  

/* wp pagenavi */
	.custom .wp-pagenavi { clear: both; padding: 2.2em; text-align: center; }
	.custom .wp-pagenavi .first, .custom .wp-pagenavi .last, .custom .wp-pagenavi .current { display: none; }
	.custom #content .wp-pagenavi .page { margin: 0; width: auto; }