/*************************************************/
/*  CSS styles for Tessellations.org            */
/*  (c) 2003 to the present, Tessellations.org */
/*  Authors = Seth Bareiss, David Annal       */
/*********************************************/
@charset "utf-8";


/* banner and menu bar atop of every page*/
body   {
    background-color: #003333;
	background:url("graphics/bg-flower-green.png");
    margin-left: 0;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
	/* below: a quick experiment for tweaking scrollbar colors and whatnot */
	scrollbar-face-color: #ff6600;
	scrollbar-shadow-color: #000000; 
	scrollbar-highlight-color: #003300; 
	scrollbar-3d-light-color: #99ffff; 
	scrollbar-dark-shadow-color: #0066ff; 
	scrollbar-track-color: #002222 ; /* alert  under track */
	scrollbar-arrow-color: #ff4066;
	font-family:Tahoma, Geneva, sans-serif;
	color:#77DDAA;
	}

#banner {
	 width:100%;
     background-image:url("graphics/bg-1.png"); 
     position:absolute; 
     top:0px; 
     left:0px;
     
     border-style:none;
     height:130px; 
     z-index:1;
	}

#logo { background-image:url("graphics/logo-1b.png");
	width: 500px; height:60px; 
	position:absolute; top:25px; z-index:4;
	left:50%; margin-left:-250px; /* 250 px is half of the logo width, 500 */
	-moz-box-shadow:1px 1px 6px #2222222;
	-webkit-box-shadow:1px 1px 6px #222222;
	box-shadow:1px 1px 6px #222222; 
 }
	

#sprite { background-image:url("graphics/sprite-bg-brown-fox-normal.gif"); width:120px; height:85px;  /* normal */ 	
		 /* background-image:url("graphics/sprite-bg-brown-fox.gif"); width:120px; height:85px;  for Christmas 2012 */
		 /*    background-image:url("graphics/bg-hawthorne-bree-xmas-elves-2013.png"); width:50px; height:200px; /* for Christmas 2013 */
}	
	
P	{
	color:#DD5522;
	text-align:justify;
	padding-left:15px; padding-right:15px;
	
	}
	
EM 	{
	font-weight: bolder;
	}

A  {
	text-decoration: none;
	color: #BB7755;
	}
	
/* used on light background. On dark background use STYLE="color: #33CC33;" round link */
A:visited
   {
   color: #009900;
   }

/* for page menus within a topic, as in "<< < 1 2 3 4 5 > >>" */
A.numberwheel { font-size:18px; color:#442200; background-color:#AA8866;  /* background:url("graphics/menubar-bg.gif"); */ }
A.numberwheel:hover { color:#FFFFFF; }
A#youarehere { color:#DDDDDD; }

A#leftarrow img{  background-image: url("graphics/numberwheel-leftarrow-mouseover.gif"); 
				  display:inline-block; width:19px; height:15px; padding-top:3px; overflow:hidden; }
A#leftarrow:hover img{ background-position:-19px; }
A#rightarrow img{  background-image: url("graphics/numberwheel-rightarrow-mouseover.gif"); 
				  display:inline-block; width:19px; height:15px; padding-top:3px; overflow:hidden; }
A#rightarrow:hover img{ background-position:-19px; }
A#stopbox img{  background-image: url("graphics/numberwheel-stop-mouseover.gif"); 
				display:inline-block; width:19px; height:15px; padding-top:3px; overflow:hidden; }
A#stopbox:hover img{ background-position:-19px; }
A#home img{  background-image:url("graphics/numberwheel-house-mouseover.gif"); 
				display:inline-block; width:19px; height:15px; padding-top:3px; overflow:hidden; }
A#home:hover img{ background-position:-19px; }

.maintable {
	background-color: #FFE7BD;
	color: #CE6500;
	text-align:center;	
	font-family: arial, sans-serif;
	font-size: 13px;
	
	margin-left:auto; margin-right:auto; /* centers the table on the screen */
	border:30px solid transparent; 
	border-image:url("graphics/border-default.png") 30 30 round;
	-webkit-border-image:url("graphics/border-default.png") 30 30 round; /* Safari 5 and older */
	-o-border-image:url("graphics/border-default.png") 30 30 round; /* Opera */
	}
	


/* makes those neat chiseled corners in text tables with brown borders and tan backgrounds */
td#tablebody { background-color:#ffe4ba; padding:10; }
td.right  {  width:7; background:url("graphics/box-rightside.gif");  background-repeat:repeat-y; background-color:#003333; }
td.left   {  width:7; background:url("graphics/box-leftside.gif");   background-repeat:repeat-y; background-color:#ffe4ba; }
td.top    { height:7; background: url("graphics/box-topbar.gif");    background-repeat:repeat-x; background-color:#003333; vertical-align:bottom; }
td.bottom { height:7; background:url("graphics/box-bottombar.gif"); background-repeat:repeat-x; background-color:#003333; vertical-align:top; }
td.topright    {  height:7; width:7; background:url("graphics/box-tr.gif");    background-repeat:no-repeat;  background-color:#003333; }
td.topleft     {  height:7; width:7; background:url("graphics/box-tl-bg.gif"); background-repeat:no-repeat;  background-color:#003333; }
td.bottomright { height:7;  width:7; background:url("graphics/box-br.gif");    background-repeat: no-repeat; background-color:#003333; vertical-align:bottom; }
td.bottomleft  { height:7;  width:7; background:url("graphics/box-bl-bg.gif"); background-repeat: no-repeat; background-color:#003333; vertical-align:top; }

/* below is used for borderless text in a clear table on our site's typical dark green background */
.overgreen { color:#FF9955; size:10px; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }


/* horizontal menu bar */


.clearFloat {
	clear:both;	
	margin:0;
	padding:0;
	
	}


/* Prior Page / Next Page Navigation Buttons */
a#navi /*:link, a#visited*/ { 
	background-image:url("graphics/prev-next-bgx2.gif");
	color:#FFCC66; 
	text-align:center; 
	background-repeat:no-repeat; 
	width: 130px;
	height: 22px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size:16px; 
	font-weight:bold;
} a#navi:hover {
	background-image:url("graphics/prev-next-bgx2.gif"); 
	background-position: -135px; 	
	color:#FFEE88;  
	}

a#previous:link, a#previous:visited, a#previous:active {
		display: inline-block;
		width: 150px;
		height: 70px; 
				
		background-image:  url("graphics/navigation-button-previous.gif");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#previous:hover { background-position: -150px; }  
a#next:link, a#next:visited, a#next:active {
		display: inline-block;
		width: 150px;
		height: 70px; 
				
		background-image:  url("graphics/navigation-button-next.gif");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#next:hover { background-position: -150px; }  
a#gallery:link, a#gallery:visited, a#gallery:active {
		display: inline-block;
		width: 180px;
		height: 70px; 
				
		background-image:  url("graphics/navigation-button-gallery.gif");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#gallery:hover { background-position: -180px; }  
/* End of Navigation Buttons */

/* Miniature Navigation Buttons */
a#mini-prev:link, a#mini-prev:visited, a#mini-prev:active {
		display: inline-block;
		width: 55px;
		height: 40px; 
				
		background-image: url("graphics/mini-prev.png");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#mini-prev:hover { background-position: -55px; }  
a#mini-next:link, a#mini-next:visited, a#mini-next:active {
		display: inline-block;
		width: 55px;
		height: 40px; 
				
		background-image:  url("graphics/mini-next.png");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#mini-next:hover { background-position: -55px; }  
a#mini-gallery:link, a#mini-gallery:visited, a#mini-gallery:active {
		display: inline-block;
		width: 55px;
		height: 40px; 
				
		background-image:  url("graphics/mini-gallery.png");
		background-repeat: no-repeat; 
		text-indent: -9999px;
} a#mini-gallery:hover { background-position: -55px; }
/* End of Miniature Navigation Buttons */


a#foxy:link, a#foxy:visited, a#foxy:active {
		display: inline-block; 
		width: 277px; 
		height: 208px;
				
		background-image:  url("diypics/fox-4diy-COPYRIGHTED-IMAGE.jpg");
		background-repeat: no-repeat; 
		/*text-indent: -9999px;*/
} a#foxy:hover { background-image:  url('diypics/fox-4diy2-COPYRIGHTED-IMAGE.jpg'); width:277px; height:208px; }  


.copyright {
	
	font: 10px arial, helvetica, sans-serif;;
	color: #00BFF3;
	text-align: center;
	
	}
.txt { color:#CC3300; }
	
.pictxt {
	background: #003333;
	font-family: arial, sans-serif;
	color: #FFCC66;
	font-size: 12px;
	font-weight: bold;
	background-color: #003333;
	text-indent: 10px;
	margin-left: 14px;
	margin-right: 14px;
	text-align: center;
	
	}
	
img#thumbnail  { /* width:130px; height:100px; */ border-style:solid; border-width:2px; color:#CC6600; margin:5px; }
	
img#borderlessthumbnail { /* width:130px; height:100px; */ border-style:none; } /* for thumbnail galleries that have tile thumbnails with clear backgrounds */

H1 {
	font-family: arial, sans-serif;
	color: #FFCC66;
	font-size: 20px;
	background-color: #333300;
	text-align: center;
	}
H3 {
	font-family: verdana, arial, helvitica, sans-serif;
	font-size: 14px;
	color: #CC6600;;
	text-align: center;
	}

H4 {
	font-family: verdana, arial, helvitica, sans-serif;
	font-size: 14px;
	color: #FFCC66;
	text-align: center;
	}

H5 {
	font-family: verdana, arial, helvitica, sans-serif;
	font-size: 14px;
	color: #FF0000;
	text-align: left;
	}
	
.normal	{ /* for lists to restore normal vertical lineups */
	position: inherit; left:10px; padding-right:50px;  text-align:justify;
			}

.gallery { width:138px; text-align:center; azimuth:center; vertical-align:top; color:#FF8844; font-family:Tahoma, Geneva, sans-serif; font-size:14px; }

/* for email obfuscation */
.reverse { unicode-bidi:bidi-override; direction:rtl; }

/* for links, to make them look underlined and extra bold */
a.linkwell { text-decoration:underline; font-weight:bolder; text-shadow:1px; }

/* new edits to change the browser margins and scrollbars. -Seth, 12-14-2007 
.scrollbarfun	{	
	scrollbar-face-color: #ff6600;
	scrollbar-shadow-color: #000000; 
	scrollbar-highlight-color: #003300; 
	scrollbar-3d-light-color: #99ffff; 
	scrollbar-dark-shadow-color: #0066ff; 
	scrollbar-track-color: #002222 ;//alert  under track
	scrollbar-arrow-color: #ff4066;
    }*/

p.row { padding:10px 30px; text-align:left; }
img.row {padding:10px; 5px; float:left; }
/* Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.

When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage.  */

/* Thumbnail gallery, using CSS instead of <table>, and with the number of columns automagically adjusting depending on the visitor's screen width */
div.csstablerow { 
		/* individual rows within the table-- actually, 
		not "rows"  but rather "sections" that may resize into several rows as needed. */
		padding-left:20px; padding-right:20px; padding-top: 0px; 
		text-align:center;
	}

div.csstablecell { 
		/* individual cells within the table */
		display:inline-table; padding: 5px; 
        width:140px; height:145px; 
        max-width:140px; max-height:145px; 
        min-width:140px; min-height:145px;
		/* background-color:#009933; */
	}
a.csstablelink:link, a.csstablelink:active {
		font-weight:bold;
		color:#DDAA00;
	}
a.csstablelink:visited {
		font-weight:bold;
		color:#997700;
	}
a.csstablelink:hover {
		font-weight:bolder;
		color:#FFDD33;
		}
/* next section creates and positions the horizontal menu bar under the banner. */
#navMenu {
	position:absolute; top:112px; 
	left:0px; margin-top:0px;  
	z-index:3; /* z-index sets which layer it's on, so other stuff will appear in front of / behind it */
	border-style:none; 
	background-image:url("graphics/menubar-bg.gif"); 
	/* background-repeat:repeat-x; */ 
	height:23px; 
	width:100%; 
	text-align:center;
	margin:0px;
	padding:0px;
	}
	
		
/* ------------------------------------------- */
/* CSS for CSS3menu drop-down menu with submenu capability. Added by Seth May 1 2012 */

ul#css3menu1,ul#css3menu1 ul{
	/* background-image:url("graphics/menubar-bg.gif"); */
	/* background-color:#dedede; = color of background in navigation bar, if background graphic is missing */
	margin:0;
	list-style:none;
	padding:0;
	border-width:1px;
	border-style:solid;
	border-color:#5f5f5f;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}
	
ul#css3menu1 ul{
	background-color:#CC6600;; /* =background of first level of dropdown submenu */
		/* #ffaa00;  = original background color. */
	border-color:#d4d4d4;
	display:none;
	position:absolute;
	left:0;
	top:100%;
	-moz-box-shadow:3.5px 3.5px 5px #000000;
	-webkit-box-shadow:3.5px 3.5px 5px #000000;
	box-shadow:3.5px 3.5px 5px #000000;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	padding:0 5px 5px;   /* <--- padding in which part? Reduce it to make menus fit on netbook? */
	}
	
ul#css3menu1 li:hover>*{
	display:block;
	}
	
ul#css3menu1 li{
	position:relative;
	display:block;
	white-space:nowrap;
	font-size:0;
	float:left;
	}
	
ul#css3menu1 li:hover{
	z-index:1;
	}
	
ul#css3menu1 ul ul{
	position:absolute;
	left:100%;
	top:0;
	}
	
ul#css3menu1{
	font-size:0;
	z-index:999;
	position:relative;
	display:inline-block;
	zoom:1;
	*display:inline;  /* 	originally had an * before the d in display. Typo?  
							With the *, the main menu is centered. Without it, flush left.*/
	}
	
ul#css3menu1>li{
	margin:0;
	}
	
* html ul#css3menu1 li a{
	display:inline-block;
	}
	
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;
	}
	
ul#css3menu1 a{
	text-shadow:#442020 0 0 1px; /* original shadow color = white FFF */
	color:#fff3ef;/* original #fff3ef; */
	 /* background-color:#ffaa00; 
	    background-image:url("graphics/menubar-bg.gif"); = unneeded?  */
	/*  background-image:url("graphics/mainbk.png");  = original */
	border-color:#C0C0C0;
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	font:bold 14px Trebuchet MS; /* <--- font-size in which part? Reduce it to make menus fit on netbook? */
	cursor:pointer;
	padding:5px; /*  = test
	padding:10px; = original */  /* <--- padding in which part? Reduce it to make menus fit on netbook? */
	background-repeat:repeat;
	background-position:0 0;
	border-width:0 0 0 1px;
	border-style:solid;
	}
	
ul#css3menu1 ul li{
	float:none;
	margin:4px 0 0;       /* 	<--- Original = 10px. Sets space between all menu items. 
								Reduce it to make menus fit on netbook? */
	}
	
ul#css3menu1 ul a{
	background-color:#CC6600;;
	color:#fff0f0;
	text-align:left;
	padding:4px;       /* <--- padding in which part? Reduce it to make menus fit on netbook? */
	background-image:none;
	border-width:0;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font:bold 14px Tahoma;
	text-decoration:none;
	}
	
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
	background-color:f8ac00; 
	border-color:#C0C0C0;
	border-style:solid;color:#000000;
	text-decoration:none;
	text-shadow:#FFFFFF 0 0 1px;
	background-image:url("graphics/mainbk.png");
	background-position:0 100px;
	}
	
ul#css3menu1 img{
	border-style:none;
	vertical-align:middle;
	margin-right:10px;
	}
	
ul#css3menu1 img.over{
	display:none;
	}
	
ul#css3menu1 li:hover > a img.def{
	display:none;
	}
	
ul#css3menu1 li:hover > a img.over{
	display:inline;
	}
	
ul#css3menu1 li a.pressed img.over{
	display:inline;
	}
	
ul#css3menu1 li a.pressed img.def{
	display:none;
	}
	
ul#css3menu1 span{
	display:block;
	overflow:visible;
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:0px;
	}
	
ul#css3menu1 ul span{
	background-image:url("graphics/arrowsub.png");
	padding-right:28px;
	}
	
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed {
	background-color:original = #f8ac00; /* main menu bar mouseover background color */
	background-image:url("graphics/mainbk.png");
	background-position:0 100px;
	border-style:solid;
	border-color:#C0C0C0;
	color:#000000;
	text-decoration:none;
	text-shadow:#FFFFFF 0 0 1px;
	}
	
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed {
	background-color:#dd9060; /* all submenus' mouseover color. Original color = #ffc8a0;  */
	background-image:none;
	color:#000000;
	text-decoration:none;
	}
ul#css3menu1 li.topfirst>a {
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;}
	
ul#css3menu1 li.toplast>a{
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;}
	

	
span.peekaboo       { /* display:none; not used. */ color:#000000; background-color:#000000; /* black on black = invisible. */}
span.peekaboo:hover { /* display:none; not used. */ color:#000000; background-color:#FFFFFF; /* black on white = visible. */}

.stronger {color:#FF9900; font-weight:bolder;} 
/* To give the <strong> and <em> tags, etc., a little extra kick. "Bolder" still won't work in MSIE as of 2013. */


/* beginning of peekaboo accordion section */
#mexican{
			/* width: 700px; */
			margin-left: auto; margin-right:auto; /* this line auto-centers the DIV on the page 
													(but doesn't center the contents within the DIV. */
		}

#burrito{
			/* width: 700px; */
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

#burrito h3{
			font-size: 14pt;
			margin: 0px;
			padding: 10px;
			background: #333333;
			border-bottom: 1px solid #ffffff;
		}
#burrito li div.beanfilling{
			display: none;
			padding: 14px;
			background: #2222222;
			border: 1px solid #dddddd;
		}

#burrito li:hover div.beanfilling{
			display: inherit;
		}
/* ending of peekaboo accordion section */