body {
	margin:0 0.625em;  /*10px margin outside container*/
	padding:0;
	color:#000;
	font-size: 1.000em;  /*-- base font 16px --*/
	font-family: Arial, Helvetica, sans-serif;
	background-color: #003300;  } /*beige*/ 

H1, H2, H3, H4, H5 {	background: transparent;
	font-weight:bold;  }
	
H1 { color: #000;
	font-style: italic; 
	font-size:1.500em; /*24px*/
	text-align:center; }
		
H2 { color: #000;  
	font-size:1.125em;  /*18px*/
	text-align:left; } 

H3  { color:#000; 
	font-size:1.000em;  /*16px*/
	text-align:left; }
	
H4 {	 color:#000; 
	font-size:0.95em;  /*15px*/
	text-align:left; }
	 

#container {
	width:100%;
	position:relative;
	max-width:56.250em; /*900px*/ 
	margin: 0 auto; 
	padding:0; 
 	background: #F1EEDB;   /*beige*/   }
 	
#header {
	padding: 0; 
	width:100%;
	border-top:4px solid #000;
	border-bottom:4px solid #000; } 

#content{	
	color: #000;
	width:84%; /* 816px*/
	margin:0 auto;  }  

#leftsidebarhm {
	float: left; 
	width: 200px;
	padding: 10px 20px 10px 5px;
	text-align:center;  }

#footer {
	padding:5px 10px 20px 10px;
	background: #F1EEDB; }

/*ShopSite top black bar*/
div#cl-topbar {
    padding: 4px 0px;
    margin: 0px;
    background: #000000;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
    clear: both;
}

div#cl-topbarin {
    width: 94%;
    max-width: 1400px;
    margin: 0px auto;
    padding: 0px;
    text-align: justify;
    white-space: nowrap;
    clear: both;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}


div#cl-topbarin div.inline-left, div#cl-topbarin div.inline-right {
    vertical-align: middle;
    font-size: 90%;
}

div#cl-topbar a {
    color: #FFFFFF;
    opacity: 0.8;
    filter: opacity(80);
	position: relative;
    top: 1px;
	text-decoration: none;
}

span#bb-gclink a {
    position: relative;
    top: 20px;
	text-decoration: none;
}

div#bb-miniflyout {

}
/*----------FONTS --------------*/

			/*16px base font */
.exsmallfont {font-size:0.750em;}     /*12px*/
.smallfont {font-size:0.857em;}       /*14px*/
.medfont {font-size:1.000em;}         /*16px*/
.largefont {font-size:1.125em; }      /*18px*/
.exlargefont {font-size:1.250em; }    /*20px*/
.exexlargefont {font-size:1.375em; }  /*22px*/
.ex24font {font-size:1.5em; }  /*24px*/
.ex2font {font-size:2.0em; }  /*32px*/
.ex3font {font-size:3.0em; }  /*48px*/

.heavy {font-weight:bold; }


.ariel { font-family: Arial, Helvetica, sans-serif;}
.cambria {font-family:Cambria, Georgia, serif; }
.georgia {font-family:Georgia, Cambria, 'times New Roman', Times, Serif; }


/*------------- COLORS ------------*/

.red {color:red; }
.lgred {color:red; font-size:22px; }
.whitebg {color:#fff;}
.green {color:green; }
.whtbg {background:#fff; }
.blue {color:blue; }
.black {color:#000;}
.yellowbg {background-color:#ff0;}
.redborder {border:2px solid #f00;}  
.bgwhite {background:#fff; }


/*--------POSITIONING----------*/

.left {text-align:left;} 
.center {text-align:center;}
.right {text-align:right;}

.textbottom {vertical-align:text-bottom;}
.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;}

.clearboth {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}

.hide {overflow:hidden;}

.block {display:block;}  /*removes space under img*/



/*---------PADDING  MARGINS---------*/

.pad6 { padding:6px;}

.pad8 {padding:8px;}
.pad8l {padding-left:8px;}
.pad8r {padding-right:8px;}


.pad12 {padding:12px;}
.pad12l {padding-left:12px; }
.pad12r {padding-right:12px;}
.pad12t {padding-top:12px;} /*color codes bh compar chart*/

.pad20 {padding:20px;}

.mar8  {margin:8px; }
.mar8l {margin-left:8px; }
.mar8r {margin-right:8px; }

.mar12 {margin:12px; }
.mar12l {margin-left:12px; }
.mar12r {margin-right:12px; }
.mar12b {margin-bottom:12px; }
.mar12t {margin-top:12px; }

.mar20  {margin:20px; }
.mar20l {margin-left:20px; }
.mar20r {margin-right:20px; }


/* TEMPORARY FEATURES */

.holidaysale {
	width:270px;
	margin:0 auto;
	background:yellow;
	text-align:center;
	font-size:100%;
	color:#000;
	border:2px solid #ff0000;  }
  
.xmas-bdr {
    border: 2px solid #ff0000;
    background: yellow;
    max-width: 450px;
    color: #003300;
    margin: auto;
    padding: 18px;
}

/*-----------SPECIAL FEATURES-------*/

/* BQ has a default margin of 40px and display block  add floats in html */
blockquote {  
    font-family: Georgia, serif;
    font-size: 95%;
    font-style: italic;
    width: 18.00em; /*290px*/
    margin:0 auto;
    padding: 20px;
    line-height: 1.45;
    position: relative;
    background:#F5F5F5; /* very lt gray */ 
    color: #383838;
    border:1px solid #ccc; 
	  border-radius:15px;   }
blockquote:before { /*for extra lg quotes*/
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a; }
blockquote cite {
		display:block;
    text-align:center;  }
blockquote cite:before {
    content: "\2014 \2009";  }
blockquote a {color:#1d62e2 !important;
		font-weight:500; }
blockquote a:hover {color:#999; }  

.testimonyright {  /* CHANGE OVERTO BLOCKQUOTES */
	float: right;
	width: 200px; 
	margin:5px;
	padding:8px;
	background-color:#FF0;
	border:1px solid #999; }	

.testimonybox {
	max-width: 17.500em;  /*280px*/
	margin:10px;
	border:2px solid #ff0000; 
	background:#FFFF00;
	color:#ff0000; 
	padding:0 8px 8px 8px; }

.yellowbox { 
  background:#FFFF00;
  border:1px solid #000;
  margin:0 auto; 
  font-size:90%;
  font-weight:bold;
  text-align:center;
  padding:6px;  }
  
.whtbxroundcorners {
	border:1px solid #000; 
	border-radius:10px; 
	background:#fff;
	padding:8px;  }
	
.custrev { /*also on mount bracket pg*/
	width:400px;
	margin:0 auto;
  padding:0 8px 8px; 
  background-color:#ff0; /*yellow*/
  border:2px solid #f00;  } /*red*/
  
.google-maps {
        position: relative;
        padding-bottom: 75%;   /* This is the aspect ratio*/
        height: 0;
        overflow: hidden;    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;  }

.productbox {    /*on bh pg use boxes in html to resize*/
	background-color:#fff;
	padding:12px; }  
	
.batshelterpkg {
	width:350px; }	
	
.gallery {     /* needs no media queries */
    text-align: center; }
.galleryitem {
	margin:8px;
      display: inline-block;
      text-align: center; 
      vertical-align: top; }
    
.gallery, .caption {
	font-size:90%; } 
	
.galleryitem250 {
	width:250px;
	max-width:250px;
	margin:8px;
      display: inline-block;
      text-align: center; 
      vertical-align: top;  } 
	
.galleryitem300 {
	width:18.750em; 
	margin:8px;
    display: inline-block;
    text-align: center; 
    vertical-align: top;  }
    
.galleryitem350 {   /* bat houses on custom bh pg*/
	width:21.8750em; 
	margin:8px;
     display: inline-block;
     text-align: center; 
     vertical-align: top;  }
    
.galleryitem400 { /* product boxes on mount bracket pg w wht bg*/
 	width:25.000em;  /*400 px*/
	background:#fff;
	padding:12px;
	margin:8px;
  display: inline-block;
  text-align: center; 
  vertical-align: top; 
  border:2px solid #000;}

.socialicons {position:absolute;
	top:10px;
	left:41%;
	z-index:12; }
	
.socialicons img { 
	padding:8px; }
	
	/* Data table 2 , w table border, THEAD, centered table 
	and text, col width controlled by col - used on 1,2,3,4,5 cell bat houses */
table.data2 {
	width:18.750em;
	margin:10px auto;
	font-size:90%;
	border:2px solid #000;
	border-collapse:collapse;
	background:#fff;  }
	
table.data2 thead {
	display: table-header-group; }

table.data2 th {
	font-size:90%; 
	text-align:center;
	padding: 3px 3px;
	border:1px solid #000; }

table.data2 td {
	font-size:80%; 
	text-align:center;
	padding:2px;
	vertical-align:middle;
	border: 1px solid #000; }
	
table.data2 col:nth-child(1) {width:70%; }
table.data2 col:nth-child(2) {width:15%; }
table.data2 col:nth-child(3) {width:15%; }


	/* Data table 3 , w table border, THEAD, centered table 
	and text, col width and color controlled by col  - used on comparing bat houses pg */
table.data3 {
	width:100%;
	margin:10px auto;
	font-size:100%;
	border:2px solid #999;
	border-collapse:collapse; }
	
table.data3 thead {
	font-size:100%; /*16px*/
	font-weight:bold;
	display: table-header-group;
	border:2px solid #999; }

table.data3 th {
	font-size:112.5%; /*18px*/
	text-align:center;
	vertical-align:top;
	padding: 3px 0;
 border:1px solid #999; }

table.data3 td {
	font-size:100%; /*16px*/
	width:15%;
	text-align:center;
	padding:3px;
	vertical-align:middle;
  border: 1px solid #999;  }
 
 div.certifications {
 display: block;
 }
	

 
/* ----------STYLING --------*/

.dropshadow {  
	background:transparent;     
	box-shadow: 3px 3px 3px #a18240; }

.roundedcorners {
	border:1px solid #000; 
	border-radius:10px;  } 

		/* needs no sp between elements p,img, etc  */
.inlineblock {display:inline-block; } 

.indent { margin-left:1.5em;
   margin-right: 1.5em; }

.indentleft {margin-left:1.5em; }

UL li {list-style-type: disc; margin-bottom:3px; }
	
OL li {margin-bottom:10px; }

hr {width:75%; text-align: center; }

.hr { height:2px;
  width:75%;
  background:#ccc;
	margin: 15px auto 20px auto; }

.border {border:1px solid #999;}
.border2 {border:2px solid #000; }

 img {border:0;
	max-width:100%; 
	height:auto;} /*preserves aspect ratio*/
	
* {box-sizing:border-box;}    /*to keep border padding inside alllll boxes*/
	
.nowrap {white-space:nowrap; } /* to keep words together */


/* -------- boxes ------------ */

.box800 {width:800px; margin:0 auto; }
.box700 {width:700px; margin: 0 auto; }
.box600 {width:600px; margin: 0 auto; }
.box500 {width:500px; margin: 0 auto; }
.box450 {width:450px; margin: 0 auto; }
.box400 {width:400px; margin: 0 auto; }    
.box350 {width:350px; margin:0 auto; }    
.box350 {width:350px; margin: 0 auto; }
.box300 {width:300px; margin: 0 auto; }  
.box250 {width:250px;  margin: 0 auto; }
.box200 {width:200px; margin: 0 auto; }
    
	/* -----FLOATS --must be in pixels - imgs need width------  */
    
.floatleft {float:left; }
.floatright {float:right; }

	/*footer link*/
.floatright130 {
	float: right;
	width: 130px; 
	margin:5px; }

	/*Stat counter*/
.floatleft130 {
	float: left;
	width: 130px; 
	margin:5px; }

.floatleft200 {
	float: left;
	width: 200px; 
	margin:5px; }
	
.floatright200 {
	float: right;
	width: 200px; 
	margin:5px; }
 	
	/*mounting bracket imgs*/ 
.floatright220 {
	float: right;
	width: 220px; 
	margin:5px;
	text-align:center; }

.floatright300 {
	float: right;
	width: 300px; 
	margin:5px;
	text-align:left;}
	
	
	/* --- Reg Links ---same need to be listed in nav-- keep above other links----*/
/*  do not need :link after a . visited inherits a color etc  */

a {color: #390;  /*green*/
	text-decoration: underline;}
a:hover {color: #999;
	text-decoration: underline; }

	
		/*------ responsive menu needs Jquery.js and script.js files loaded  ---*/
	
#cssmenu {clear:both;
  font-family: Verdana, Geneva, sans-serif;
  		  /*font size only works in ul li a */
  font-weight:bold; 
  line-height: 14px;
  text-align: center; 
  padding: 0; 
  width:100%; 
  background: #F1EEDB; /*beige*/}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background:transparent; }
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */   }
#cssmenu > ul li {
  display: inline-block;   }
#cssmenu > ul li.right {
  float: right;  }
#cssmenu > ul li.has-sub {
  text-align:left;
  position: relative; 
   	z-index:10; }
#cssmenu > ul li.has-sub:hover ul {
  display: block;  }
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 275px;  /*width of drop down box*/
  position: absolute;
  margin: 0;
  font-size:13px;
  padding-left: 7px; /* indents sub menu items*/
  list-style-type: none;
  background:#f8f6ed;   /* BG under sub lt beige */
  border: 1px solid #bfb15a; /* dk beige */
  border-top:none;  } 
#cssmenu > ul li.has-sub ul li {   	/* top menu drop down links */
  text-align:left;
  display: block;  }
#cssmenu > ul li.has-sub ul li a {  /*font weight on sub menu*/
  font-weight:normal; 
  padding:5px; }  /*padding reduces double spacing*/ 
#cssmenu > ul li.has-sub > a {
  background-image: url(https://7ccdc0.claudeassets.com/20230515135350im_/https://www.batsbirdsyard.com/assets/caret2.png);
  background-repeat: no-repeat;
  background-position: 95% -40%;   } /*position of down arrow on rt n top */
#cssmenu > ul li.has-sub > a.active,   
#cssmenu > ul li.has-sub > a:hover { /*BG color of top menu has sub on hover  */
  background: #f8f6ed;  /* top menu BG lt beige on hover*/
  background:image url(https://5b1ea1.claudeassets.com/20230515135350im_/https://www.batsbirdsyard.com/assets/caret.png) no-repeat;  /*beige */
  background-position: 95% 95%; }
#cssmenu > ul li a {
  font-size: 85%; /*FONT SIZE main menu*/
  display: block;
  padding: 8px 1.000em 5px 0;  /* pad between categories 16px Rt */
  text-decoration: none;
  color:#006600;  }    /* main menu font color med green 99 or 66 */
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background:#f8f6ed;  /*main menu bg changes vlt beige on houver */
  color:  #999; }   /* font color on hover */ 


  /*----Mobile Media queries ---*/
  /* "menu"  in text and menu icon should appear below 600px */
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%; }
  #cssmenu > ul li#responsive-tab {
    display: block;  }
  #cssmenu > ul li#responsive-tab a { 
    background: url(https://7f6b1e.claudeassets.com/20230515135350im_/https://www.batsbirdsyard.com/assets/menu-green.png) no-repeat;
    background-position: 85% -25%; }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #ccc;  /* bg under Menu text and icon on mouseover. */
    background-position: 85% -25%; }
  #cssmenu > ul li {
    display: none; }
  #cssmenu > ul li.right {
    float: none; }
  #cssmenu > ul li.has-sub {
    position: relative; }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #f8f6ed;  /* bg color under mobile sub menu */
    border: none; }
  #cssmenu > ul li.has-sub ul li {
    display: block !important; }
  #cssmenu > ul li.has-sub ul li a span {  
    color: #000;  /*black*/
    display: block;
    padding-left: 14px; }   
  #cssmenu > ul li.has-sub > a {
    background-image: none; }
  #cssmenu > ul li.active {
    text-align:left; }
 					 }
/*----------Menu for desktop  ---------*/
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;  }
  #cssmenu > ul ul li.collapsed {
    display: block !important; }
  }

/*--------PAMS --------*/
img.aspectRatio {
    width: 100%;
    height: auto;
}
iframe.aspectRatio {
    width: 60%;
    height: auto;
}
div#footer-img-container {
      max-width:100%
}

div.footer-imgs{
	display: inline-block;
	margin-left:2px;
	margin-right:2px;
    max-width:16%;
}
/*----------------------------------------MEDIA  ---------------------------------------*/

@media only screen and (max-width:320px) {
body {font-size:98%; }
#container {width:100%; padding:0; }
#header { width:100%; margin:10px auto; }
#contenthm { width:100%;  }
#leftsidebarhm {float:none; width:100%; }
h1 {margin:0 auto; padding:10px 10px; display:block; word-wrap:break-word; } 
h2 {text-align:center; clear:both; word-wrap:break-word;} 
.box800,.box700,.box600,.box500,.box450,.box400,.box350,.box300, .galleryitem400  {width:95%;}
.floatright, .floatleft {float:none; text-align:center; width:100%;}
.socialicons {top:5px; left:22%; }
.socialicons img { height:60%; width:auto;  padding:3px; }
.sociallikes {width:280px; }
.custrev {width:270px; }
.holidaysale {	width:98%;}
.batshelterpkg {width:100%; margin:10px 0 auto; }
.batshelterimg {width:100%; text-align:center; margin:10px 0 auto; }
.holly2 {display:none;}
div.certifications {display: none;}
iframe.aspectRatio {width: 100%;height: auto; }
}


@media only screen and (min-width:320px) and (max-width:480px) {
body {font-size:98%; }
#container {width:100%; padding:0; }
#header { width:100%; margin:10px auto; }
#leftsidebarhm {float:none; width:100%; }
h1 {margin:0 auto;padding:10px 10px; display:block; word-wrap:break-word; } 
h2 {text-align:center;clear:both; word-wrap:break-word; }
.box800, .box700,.box600,.box500,.box450,.box400,.box350,.box300, .galleryitem400 {width:95%;}
.floatright, .floatleft {float:none; text-align:center; width:100%; }
.socialicons {top:5px; left:22%; }
.socialicons img { height:60%; width:auto;  padding:3px; }
.sociallikes {width:280px; }
.custrev {width:270px; }
.holidaysale {	width:98%;}
.batshelterpkg {width:100%; margin:10px 0 auto; }
.batshelterimg {width:100%; text-align:center; margin:10px 0 auto; }
.holly2 {display:none;}
div.certifications {display: none;}
iframe.aspectRatio {width: 100%;height: auto; }
    }

@media only screen and (min-width:481px) and (max-width: 600px){
.holly1 { float:none; margin:0 auto;}
.holly2 {display:none;}
div.certifications {display: inline-block;}
iframe.aspectRatio {width: 100%;height: auto; }
}
	
@media only screen and (min-width:481px) and (max-width: 767px) {
body {font-size:95%; }
#header { width:100%; margin:10px auto; }
h1 {clear:both; text-align:center; padding:10px 0;display:block; word-wrap:break-word; } /*24px*/
h2 {text-align:center; word-wrap:break-word; margin-top:10px;} 
.box800, .box700,.box600,.box500 {width:95%;}
.socialicons {top:8px; left:30%; }
.socialicons img {height:80%; width:auto; padding:5px; }
.holidaysale {	width:75%;}
.batshelterpkg {width:100%; margin:10px 0 auto; }
.batshelterimg {width:100%; text-align:center; margin:10px 0 auto; }
div.certifications {display: inline-block;}
iframe.aspectRatio {width: 100%;height: auto; }
   }

	/* min 768 to max 900 iPads (portrait) Tablets */
  @media only screen and (min-width : 768px) and (max-width : 900px)  {   
h1 {margin:0;  text-align:center; word-wrap:break-word;} 
.batshelterpkg {float:none; width:100%; margin:10px 0 auto; }
.batshelterimg {float:none;  width:50%; display:block; margin:0 auto;  }
div.certifications {display: block;}
	 }
	 

/*
     FILE ARCHIVED ON 16:53:17 May 15, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:56:15 Jul 05, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 1.45
  exclusion.robots: 0.135
  exclusion.robots.policy: 0.105
  esindex: 0.025
  cdx.remote: 30.731
  LoadShardBlock: 334.05 (3)
  PetaboxLoader3.datanode: 291.83 (5)
  PetaboxLoader3.resolve: 808.174 (2)
  load_resource: 1092.194
  loaddict: 306.228
*/