/*///////// UNIVERSAL /////////*/

body {
  font-size: 20px;
}

/*///////// FONTS /////////*/

.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}

/*///////// NAVBAR /////////*/

.navbar {
  padding: 0;
  margin-bottom:2rem;
}

.navbar-nav {
  width: 100%;
  text-align: right;
}
 
a:link {color:#663366; font-weight:600;}
a:visited {color:#ed1c24;}
a:hover {color:#066323;}



.navbar-light {
background-color:#fff!important;
background-image:url(/images/background.jpg);
background-repeat: repeat;
border-top: 10px solid #99cc33;
padding-top:1rem;
border-bottom: 10px solid #99cc33;
padding-bottom:1rem;
-webkit-box-shadow: 0px 5px 32px -12px rgba(0,0,0,0.42);
-moz-box-shadow: 0px 5px 32px -12px rgba(0,0,0,0.42);
box-shadow: 0px 5px 32px -12px rgba(0,0,0,0.42);

}

.nav-item {width:25%; padding:1rem 2rem 1rem 1rem;}

.nav-link {display: unset; font-size:28pt; color:#663366 !important; text-decoration:underline; font-weight:600; line-height:80%;
text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
     1px  0   0 #fff,
     1px  1px 0 #fff,
     0    1px 0 #fff,
    -1px  1px 0 #fff,
    -1px  0   0 #fff;}

.nav-link:hover {color: #0099ff !important;}

.nav-link:visited {color:#663366 !important;}

.nav-linksmaller {font-size:18pt; line-height:100%; color:#663366 !important; text-decoration:underline; font-weight:600;
text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
     1px  0   0 #fff,
     1px  1px 0 #fff,
     0    1px 0 #fff,
    -1px  1px 0 #fff,
    -1px  0   0 #fff;}


.navbuttons {max-width: 100%; max-height: 100%; height: inherit !important;}

/*///////// HEADINGS /////////*/

/*increase the margin under headings, especially h1 page titles*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1.5rem;
}

.smallerh1  {
  font-size:18pt;
  margin-top:1rem;
  margin-bottom:.5rem;
}

/*turn the standard hr into dots in some places*/
hr.dotted {
   margin: 12px 0;
   border-top: 10px dotted #ccc;
   margin-left:auto;
   margin-right:auto;
   max-width:15%;
}


/*///////// ECOMMERCE CAROUSELS /////////*/


 /* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
  max-width:100px;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
 /*  display: none;*/
}

/* Expanding image text 
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}*/

/* Closable button inside the image 
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
} */


.greyborder {border-top: 3px solid #efefef; padding-top:1.5rem;}

/*///////// FUN PAGE LAYOUT /////////*/

.funpage {
  margin-top: -2rem;
  padding-top:2rem;
  background-image:url(../images/funbackground.jpg);
  background-repeat: repeat-x;
  background-color:#9acd34!important;
}

.funpage img {  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);}

/*FUN STUFF colouring page thumbnails need a buffer*/
.colouringthumb {
  margin-bottom: 1rem;
  max-width: 100%;
  height: auto;
}

/*Used in all the Matching games like Coffee Break etc*/ 
td.game {padding:0;}
.gamebackground {width:100%; max-width:690px; text-align:center;}
.centergame {width:80%; text-align:center; margin-left:auto; margin-right:auto;}

/*John's Coffee Break - these items change colour based on the game*/ 
.gamebackground.coffeebreak {background-color:#993366; border:1px solid #000;}
table.game.coffeebreak {border-collapse:collapse; border-color:#0066cc; width:100%; max-width:690px;   margin-right: auto;
 margin-left: auto;
}

/*///////// SHOP AND BOOKS PAGES LAYOUTS /////////*/


/*///////// COLOPHON AND FOOTER /////////*/

/*make page footer colour match menu at top*/
.colophon {
	border-top:6px dotted whitesmoke;
	background:#fff;
	margin-top: 1rem;
	padding: 1rem 0rem;
}

.colophon .row {margin-left: 0; margin-right:0;}

/*take margin off final paragraph so footer abuts the bottom of the page*/
.footertext {
	margin-bottom: 0;
	font-size:1rem;
  margin-top:.5rem;
}

/*///////// TABS CARDS AND ACCORDIONS /////////*/


/*on pages with tabs, space the tabs apart*/
.tabspacing {margin: .5rem .5rem 0rem .5rem;}

/*on pages with tabs, adjust the margins of the tab group*/
#myTab {margin: -1rem 0rem 3rem 0rem;}

/*on pages with tabs, apply a border to all the tabs, not just the first*/
.nav-tabs .nav-link {
  border: 1px solid #dee2e6;
}
/*on pages with tabs, bold the active tab*/
 .nav-tabs .nav-link.active {font-weight: 600;}

/*on pages with accordions align the text left*/
 .btn-link {text-align: left;}

/*on pages with card decks, hide the border on empty spacer ones*/
.cardblank {border: none; visibility: hidden;}

/*on pages with card decks, make the titles bold*/
.card-title {font-weight: 600;}

/*///////// IMAGE CONTROLS /////////*/

/*force images to scale and keep shape*/
.image100 { 
max-width: 100%;
max-height: 100%;
height: inherit !important;
} 

/*force images to be a consistent size on some pages*/
.max320 { 
max-width: 320px;
max-height: 100%;
height: inherit !important;
} 

.logo {max-width: 100%; max-height: 100%; height: inherit !important;}


/*///////// HOMEPAGE BACKGROUND IMAGE WITH UFO FLOAT /////////*/


#homemenu {
margin-top:-2rem;
border:0px solid #000;
background-image:url(../images/homepage/homebackground.png);
background-size: contain;
position:relative;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 39%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
margin-bottom: 50px;
border-bottom: 10px solid #99cc33;
}

.nomargin {
padding-left:0!important;
padding-right:0!important;
}

.nogutter {--bs-gutter-x: 0rem !important;}

.homebutton {width:352px;}

.homebutton img {
 /* object-fit: contain;
 or*/
  object-fit: cover; 
} 

.homebuttonmargin {margin-bottom:1rem;}

.ufofloat {
	border:0px solid #fff; 
	width:100%; 
	position: absolute; 
	top: 0; 
	left: 0;
}

.movingufo {max-width:1230px;}

#smallufo {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

.bookcover {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

.miscimage {
  max-width: 100%;
  height: auto;
}

.bookpage {
  width: 100%; /* or max-width: 100%; */
    max-width:600px;
  height: auto;
}

/*///////// GRANDBOTS OIL DROP STYLING /////////*/
.iframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}


.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*///////// ROBOT TEXT BOX ON HOMEPAGE /////////*/

/*#hometextbox {
  transform: translate(0, -50%);
  position: absolute; top: 55%; left: 10px; 
  background-image:url(/images/BotBox.png);
  width:750px;
  height:752px;
  display: block;
}*/

/* Closable button inside the image 
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
  font-weight:800;
} 
.closebtn {

#hometext {
  transform: translate(0, -50%);
  position: absolute; top: 45%; left: 18%; 
  border:0px solid red;
  width:465px;
  height:330px;
  font-size:17pt;
  line-height:110%;
}

#hometextboxmobile {
  border:0px solid red;
  width:100%;
  line-height:110%;
  padding:.5rem;
}*/




/*///////// BIGGER THAN PHONES SMALLER THAN DESKTOP SHIM /////////*/

@media (min-width: 576px) {
  /* Shim for the placement of the dropdown menu */
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
    left: 30%;
    top: 5rem;
  }
  .card-group > .card + .card {
    margin-left: 1rem;
    border-left: 1px solid #efefef;
    margin-right: 1rem;
  }

}


/*///////// SMALLER THAN DESKTOP /////////*/
@media (max-width: 1024px) {

.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.55);
  background: #fff;
  border: 2px solid #000;
}

.navbar-nav {
  width: 100%;
  text-align: left;
}

.navbar-brand {
  margin-left: auto;
  margin-right: auto;
}

.nav-item {width:100%; padding:.5rem; text-align:center;}
.nav-link {font-size:100%; color:#663366 !important;}
.nav-linksmaller {font-size:100%; color:#663366 !important; text-align:center;}

.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.55);
  border-color: rgba(0,0,0,.1);
  margin-left: auto;
  margin-right: auto;
}

#homemenu {margin-bottom:0px;}

/*hide any element with this label */
.hideonmobile {display:none;}




.smallufofloat {
	width:150px; 
	max-width:150px;  
	border:0px solid red; 
	position: absolute; 
	top: 5px; 
	left: 5px;}
}

.smallufofloat img {
	width:100px; 
	max-width:100px;  
	}


/*///////// LARGER THAN DESKTOP /////////*/
@media (min-width: 1025px) {
#contentnotice {display:none;
}
.hideonlarge {display:none;}
}

#contentnotice {border:2px dashed #ededed; margin-bottom:1rem; padding:1rem;}