HTML { height: 100%; }
BODY { margin: 0px; background-color: #000; height: 100%; min-height: 100%; }
	  
#logo { 

	width: 280px; 
	height: 70px; 
	position: absolute; 
	left: 5px; 
	top: 10px; 
	background: url(images_cache/bo_logo.gif) no-repeat; 
	z-index: 1000; 
	
}

.toys #logo { background: url(images_cache/bo_logo_wht.gif) no-repeat; }

#logo A { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; }


#header {
	
	height: 50px;
	padding-top: 0px;
 	background-color: #000;  
	font-family: "news-gothic-std";
	font-weight: bold;
	font-size: 14px;
	line-height: 22px;
	padding-top: 35px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	width: 100%;
	min-width: 860px;

     position: fixed;
     z-index: 999;
	
}

.iphone #header { position: absolute; }

.photoBox {
	
	display: block; 
	background-color: #FFF; 
	margin: 20px auto; 
	padding: 10px;
	overflow: hidden; 
	position: relative;
	
}

#footer {
	
	height: 50px;
	padding-top: 0px;
 	background-color: #000;  
	font-family: "news-gothic-std";
	font-weight: bold;
	font-size: 22px;
	line-height: 22px;

	width: 100%;
	min-width: 860px;

     position: fixed;
     bottom: 0px;
     z-index: 999;
	
}

.ipad #footer, .iphone #footer { position: relative; }

.toys #header, .toys #footer { background-color: #FFF; }

.teeth.down {
	
	height: 11px;
	background: url(images_cache/teeth_down.png) repeat-x;
	width: 100%;
	position: absolute;
	top: 95px;
	z-index: 998;
}

.toys .teeth.down { background: url(images_cache/teeth_down_wht.png) repeat-x; } 

.teeth.up {
	
	height: 11px;
	background: url(images_cache/teeth_up.png) repeat-x;
	width: 100%;
	position: fixed;
	bottom: 50px;
	z-index: 998;
}

.toys .teeth.up { background: url(images_cache/teeth_up_wht.png) repeat-x; } 

#header UL { margin-top: 0px; }
#header UL LI { 
	display: inline-block; 
	position: relative; 
/* 	border: 1px solid black; */
	padding: 0px 15px 30px 15px;
	-webkit-transition: 0.8s all;
    -moz-transition: 0.8s all; 
/*      border: 1px solid red;  */
	
}

#header UL LI:hover A, #header UL LI A:hover, #header UL LI.active A.active { text-decoration: none; color: orange; } 

.toys #header UL LI:hover A, .toys #header UL LI A:hover, .toys #header UL LI.active A.active { text-decoration: none; color: #477cb2; } 


#header UL LI A { text-decoration: none; color: #FFF;
	-webkit-transition: 0.3s all;
    -moz-transition: 0.3s all; } 

#header UL LI A.social:hover { text-decoration: none; color: orange;  } 
#header UL LI A.social { text-decoration: none; color: #666;  } 
    
.toys #header UL LI A, .toys #header ul li.active ul li a.active { color: #000; }

.toys #header UL LI A.social:hover { text-decoration: none; color: #477cb2;  } 
.toys #header UL LI A.social { text-decoration: none; color: #999;  } 

/* #header UL LI:hover { padding-bottom: 60px; }  */

#header UL LI UL { 
 display: block;
 position: absolute;
/* 	opacity: 0; */
	width: 150px;
	height: 0px;
	overflow: hidden; 
	top: 52px;
/* 	display: none; */
	-webkit-transition: 0.4s all;
    -moz-transition: 0.4s all; 
    -webkit-transition-delay: 0.1s;
    font-size: 14px;
	font-weight: normal;
     padding: 0px; margin: 0px;
     margin-left: -15px;
     background-color: #000;
     z-index: 9999;
     box-shadow: 0px 3px 6px #000;
}

.toys #header UL LI UL { background-color: #FFF; box-shadow: 0px 0px 0px #FFF; }

#header UL LI UL LI A:hover { color: #FFF !important; }
.toys #header UL LI UL LI A:hover { color: #000 !important; }
#header UL LI UL LI  { padding: 0px; padding-bottom: 3px; display: block; }

#header UL LI UL LI A, #header UL LI:hover UL LI A { display: block; padding: 0px 15px; margin: 0px; border: 0px solid red; color: #999; text-transform: uppercase; text-decoration: none;  } 

#header UL LI:hover UL { height: 75px; /* opacity: 1; */  /* border: 1px solid blue; */ padding: 0px; margin: 0px; margin-left: -15px; }


.tile {
	
	width: 240px; 
/*  	height: 310px;  */
/* 	float: left;  */
/* 	margin: 10px;  */
	background-color: #FEFEFE;
	margin-bottom: 50px;
	border: 0px solid #CCC;
	box-shadow: 1px 1px 10px rgba(0,0,0, .3);
	display: none;
	overflow: hidden;
	
	
}

.tile.home { height: 340px; width: 250px; }

.category .tile { width: 200px; display: inline-block; height: auto; margin-bottom: 20px; background: transparent; overflow: hidden; }

.tile IMG { width: 100%; display: inline-block; margin-bottom: -4px; }

.category .tile A { 

	position: relative; 
	display: block;
	height: 100%;
	color: #FFF;
	text-decoration: none;
	font-family: "news-gothic-std";
	font-weight: bold;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	
}

.category .tile A:hover SPAN { bottom: 0px; }

.category .tile A span {
	
	display: block;
	padding: 5px;
	background: rgba(0,0,0, .7);
	position: absolute;
	bottom: -100px;
	width: 100%;
	-webkit-transition: 0.4s all;
    -moz-transition: 0.4s all; 
    text-align: left;
    font: normal 11px "Helvetica";
    text-transform: none;
	
}

.tile .text {
	
	padding: 5px 10px;
	text-align: left;
	font: normal 12px "Helvetica", "Arial";
	
}

.tile.home .text B, a.cta { font-size: 12px; white-space: nowrap; text-overflow: ellipsis; width: 99%; display: block; overflow: hidden; }

.tile .text A.cta { 
	
	text-decoration: none; 
	color: orange; 
	position: absolute;
	bottom: 10px;
	
}

.tile .text A {
	
	text-decoration: none; 
	color: orange; 
}

/*
.tall { height: 380px; }
.taller { height: 420px; }
.tallest { height: 500px; }
*/

#content { width: 100%; min-width: 860px; text-align: center; padding-top: 130px; min-height: 100%; padding-bottom: 120px; position: relative; }

#mosaic { margin: 0px auto; padding: 25px; }

#mosaic.category { margin: 0px auto; padding-top: 35px; }

/**** Transitions ****/

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


.main {

	opacity: 1; 
	position: relative; 

}

.main.portrait {

	/* height: 100%; */ 
/* 	padding-top: 75px;  */

}

.main.landscape {

	/* width: 100%;  */


}

.orient {
	
	position: relative;
/* 	height: 1px; */
/*  	border: 1px solid red;  */
	margin-top: 160px;
	height: 100%;
margin-left: auto;
margin-right: auto;
	
}

/* .orient IMG { margin: 20px; } */

.ipad .main.landscape, .ipad .main.portrait { /* width: 100%; */ width: auto; }

@media only screen and (min-width:1441px) { 

	
	
}

@media only screen and (max-height:1024px) and (orientation: landscape) {


/* .orient IMG { margin-top: 0; } */

}

.infoPanel {
	 
	font-family: "news-gothic-std";
	text-align: left;
	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	position: absolute; 
	width: 40px; 
	height: 10px; 
	bottom: 10px; 
	left: 10px;
	background-color: rgba(0,0,0, .4); 
	color: #FFF;
	-webkit-transition: 0.4s all;
    -moz-transition: 0.4s all; 
    overflow: hidden;
	
}

.view.infoPanel { bottom: 0px; left: 0px; width: 30px; }

.infoPanel:hover {

	height: 130px;
	width: 333px;
/*      box-shadow: 0px 3px 6px #000; */

}

.toys .infoPanel:hover { height: 100px; }

.infoPanel SPAN { 
	opacity: 0;
    -webkit-transition-delay: 1s;
	-webkit-transition: .4s all;
    -moz-transition: .4s all;  
    width: 333px;
    display: block;
    
}

.infoPanel:hover SPAN { opacity: 1; }

.iphone .infoPanel { display: none; }

.pane {
	
	width: 550px; 
	margin: 0px auto; 
	padding: 20px; 
	background-color: rgba(0,0,0, .4); 
	color: #FFF; 
	text-align: left; 
	font: normal 12px "Helvetica", "Arial";
	
}

.pane H1 {
	
	font-family: "news-gothic-std";
	text-transform: uppercase;
	
}

.crumb {
	
	position: absolute; 
	left: 35px; 
	top: 110px;	
	font-family: "news-gothic-std";
	text-transform: uppercase;
	font-size: 14px;
	color: orange;
	text-shadow: 1px 1px 1px #000;
	
	
}

.crumb A { text-decoration: none; color: orange; }

.toys .crumb, .toys .crumb A { text-decoration: none; color: #477CB2; }

#footer DIV {
	
	position: absolute; 
	font-size: 9px; 
	font-weight: normal;
	text-transform: uppercase; 
	margin-top: 13px;
	color: #FFF;
	
}

.toys #footer DIV { color: #000; }

#footer .left { left: 25px; }
#footer .right, .toys #footer .right { right: 25px; color: #999; }

#footer .right A { text-decoration: none; color: #CCC; }


#previous {

	left: 0px;
/* 	top: 160px; */
top: 45%;
	background-position: 10px center;

}

#previous:hover { background-position: 20px center; }

#next {

	right: 0px;
/* 	top: 160px; */
top: 45%;
	background-position: -40px center;

}

.linear {

	display: block;
	width: 40px;
	height: 80px;
	position: fixed;
	z-index: 9999999999;
	overflow: hidden;
	text-indent: -9999px;
	-webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    background: url(images_cache/arrows.png) no-repeat;
	background-color: #333;
	opacity: .7;


}

.toys .linear:hover { background-color: #EEE; }
.toys .linear { background-color: #999; }

.linear:hover { width: 50px; opacity: .9; background-color: #222; }

/* .photoBox, #carousel { display: none; } */

.pane INPUT[type=text] {
	
	width: 95%;
	padding: 10px;
	font-size: 20px;
	margin-bottom: 15px;
}

.pane .submit {
	

	padding: 10px 10px;
	padding-top: 10px;
	height: 100px;
	font-size: 30px;
	margin-bottom: 15px;
}