/* BM - Brooks 3D Models + BMCart */
/* must use 'proper' comment marks, // doesn't work here !!! */
html,body,input,button {
    background-color: #E6D2AE;
    font: 400 85%/1.3 system-ui;   /* mobile settings */
    margin: 2px;    /* default was 8 ! */
    padding: 0px;
}
input#CartToggle{   /* background image for the Cart Toggle button */
    background-image: url('img/CartM.png');	/* CartM */
    background-repeat: no-repeat;
    background-position: 5px;
    padding-left: 30px;		/* 30px; */
    /*height: 36px;*/
}

body {      /* Safari has messed up windows scroll... so force it on ? */
  overflow-y: scroll;
}

html {
  scrollbar-gutter: stable;
}

input[type=text], textarea, select {
  border: 2px solid #96630A;
  border-radius: 4px;
  background-color: white;
}

.MatchToggle {      /* match the other button */
    height: 28px;		/* 28px; */
    /*padding: 5px 5px;*/
}

.FontHalf {         /* relative to parentfor use withing h1 */
    font-size: 50%;
}

.Font75pc {
    font-size: 75%;
}

.Font100pc {
    font-size: 100%;
}

.FontLarge {         /* relative to parent - on mobile */
    font-size: 125%;
}

.TitleShadow {	/* for main title only - this is overridden for non-mobile... */
    /*border: 1px solid red;*/
    color: #F9D79B; /*#dd6346;*/ /*#F9D79B;*/ /*#F9D79B;*/     /* #96630A */
    text-shadow: 2px 2px black, -2px -2px black, 2px -2px black, -2px 2px black;
    padding: 1.5em 0.5em;   	/* top left */
    /*background-color: rgba(0,0,0,0.25);*/
    /*background: none;*/
}

.OnlyWide {
    display: none;      /* hide by default  (mobile)*/
}

@media screen and (min-width: 50em){   /* screen and wide tablet etc - also lower down.. overrides for above classes ...*/
    html,body,input,button {
        font-size: 100%;   /* desktop settings */
    }
    input#CartToggle{   /* background image for the Cart Toggle button */
        background-image: url('img/Cart.png');
/*        background-repeat: no-repeat;
        background-position: 5px;*/
        padding-left: 40px;
        /*height: 36px;*/
    }

    .MatchToggle {      /* match the other button */
        height: 36px;
    }

    .FontLarge {         /* relative to parentfor use within h1 */
        font-size: 150%;
    }

    /* Dropdown button on hover & focus - only make sense on desktop,
    and Android/Chrome screws them up on mobile anyway !*/
    /*input.cart:hover, input.cart:focus {*/
    .cart:active {
      background: black;    /*#E89480;*/
    }

    .cart:hover {
      background: #A9391F;    /*#E89480;*/
    }

    .Complement:hover {
      background: #1F7385;    /*#E89480;*/
    }

    .cart:focus {
      border-color: black;    /* light orange */
    }
	.TitleShadow {	/* for main title only !*/
	    padding: 0em 0.5em;   	/* top left */
	}
	.OnlyWide {
    	display: inline;      /* show for 2 columns - works for <hr> */
	}
}

.LightColour {
    color: #F9D79B;     /* #96630A */
}

h1   {
    background-color: #F9D79B;
    color: #96630A;     /* #96630A */
    /*border: 3px solid #96630A;*/
    font-size: 2em;
    padding: 0em 0.5em;   	/* top left */
    margin: 0px 0px;
    /*border: 5px solid #96630A;*
    /*width: 100%;*/
    /*min-width: 30%;*/
    /*max-width: 100%*/
}

h2   {
    /*background-color: #F9D79B;*/
    /*color: #96630A;*/     /* #96630A */
    /*border: 3px solid #96630A;*/
    font-size: 1.5em;
    padding: 0px 0px;
    margin: 0px 0px;
    /*border: 1px solid #96630A;*/
    /*min-width: 30%;*/
    /*max-width: 100%*/
}

textarea {
    resize: none;
}

.small {
    font-size: 0.5em;
    font-weight: 500;
}

.smallish {
    font-size: 0.75em;
    font-weight: 500;
}

.noback {
    line-height: 1em;
    background: none;
}

p    {
    color: black;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

embed    {
    color: red;
}

div {   /* trying for P&P... */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    overflow: hidden;   /* ensure all within the div ! */
}

div.Top {
    background: url("img/DeskBackThin50.jpg") top right repeat-x;
    /*width: 100%;*/
    background-size: auto 15em;
    height: 15em;
}

hr {
    margin-top: 0em;
    margin-bottom: 0em;
    border: none;
    height: 1px;
    width: 50%;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

hr.thick {
    margin-top: 0em;
    margin-bottom: 0em;
    border: none;
    margin: 0em 0em 0em 0em;
    height: 3px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
    width: 100%;
}

.outline {  /* for testing */
    border: 1px solid #96630A;
}

td {
    border: 1px solid #96630A;
}

.Link0 {
    background-color: #DCBF8C;  /* bit darker #DCBF8C #E1C79B*/
    padding: 1px 1px 1px 1px;
    /*white-space: nowrap;*/
}

.Link1 {     	/* not as AltBack */
    background-color: #D3AE6D;  /* bit darker still #D3AE6D */
    padding: 1px 1px 1px 1px;
    /*white-space: nowrap;*/
}

.LinkNU {     	/* not as AltBack */
    background-color: #D3AE6D;  /* bit darker still #D3AE6D */
    padding: 1px 1px 1px 1px;
    text-decoration: none;
    /*white-space: nowrap;*/
}

.AltBack {
    background-color: #E7BBAD;	/* was #DCBF8C;*/
}

.Index {
    display: grid;    /* max-content minmax(30em, 1fr)*/
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));           /* set the NNem for the longest descption was 18.5em, 1fr */
}

.IndexCell {
    display: inline-block;
    /*border: 1px solid #96630A;*/
    padding: 2px;
    vertical-align: top;
}

.red    {
    color: red;
}

.GreenHi    {
    color: white;
    background-color: green;
    padding: 3px 10px;
}

.RedHi    {
    color: black;
    border-style: solid;
    border-color: red;
    padding: 3px 10px;
}

.newhighlight		{color: white; background-color: green; white-space: nowrap;}
.nearlynewhighlight {color: white; background-color: orange; white-space: nowrap;}
.updatedhighlight	{color: white; background-color: blue; white-space: nowrap;}
.limitedhighlight	{color: white; background-color: red; white-space: nowrap;}
.white    {
    color: white;
}

.right {
  float: right;
}

.topright {
  vertical-align: top;
  float: right;
}

.left {
  float: left;
}

.inline {
    display: inline-block;
    /*border: 1px solid #96630A;*/
    vertical-align: middle;
}

.nobreak {
    white-space: nowrap;
}

.OptRight {
    align-items: right;
}

.AlTop {
    vertical-align: top;
}

.AlCenter {
    vertical-align: center;
}

.notsmall { /* just for border testing */
    /*border: 1px solid blue;*/
}

.vcentre {
    line-height: 1.5em;
    height: 1.5em;
}

.vmiddle {
    vertical-align: middle;
}

.right {
    text-align: right;
    /*border: 1px solid blue;*/
}

.MinW {
  min-width: 200px;
}

.__OptWrapper {   /* for options in the cart */
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: centre;
      /*margin: 10px auto;*/
      /*font: 500 100%/1.5 system-ui;*/
/*font: 3em;*/
}

.gridWrapper {
    display: block;
    margin: 0px 0px 0px 0px;
    align-items: centre;
    /*width: 100%;*/
    /*padding: 30px 30px 30px 30px;*/ /*10 auto;*/
    /*font: 500 100%/1.5 system-ui;*/
/*    font: 3em;*/
    /*background-color: #00bda5;*/
    /*border: 1px solid blue;*/     /* for debug */
}

.gridLR {   /* Left or Right
    margin: 5px 5px 5px 5px; /*10 auto;*/
    /*background-color: #80bda5;*/
    /*border: 1px solid red;*/      /* for debug */
}

@media screen and (min-width: 50em){   /* was 80em 50em screen and wide tablet etc */
    .gridWrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /*align-items: centre;*/
      /*margin: 10px auto;*/
      /*font: 500 100%/1.5 system-ui;*/
      /*padding: 30px;*/
      /*grid-template-columns: 550px 2fr;*/
      /*max-width: 800px;*/
      /*max-width: 100%;*/
    }
    .zoomable {
      cursor: zoom-in;
    }
}

.FloatRight {  /* was FloatRight - used for CART */
    position:fixed !important;
    position: absolute; /*ie6 */
    top: 2px;
    right: 2px;
    /*left: 2px;*/
    max-height: 100vh;  /* limit to screen height */
    overflow: auto;     /* then put in scroll bar - for long order on mobile ! */
}

.FloatTop {     /* not used */
    position:fixed !important;
    position: absolute; /*ie6 */
    top: 2px;
}

.FullImage {            /* full windows preview image */
    display: none;      /* hide by default */
    max-width: 100%;
    height: auto;
    position:fixed !important;
    position: absolute; /*ie6 */
    top: 0;
    left: 0;
    border: 5px solid #31394d;     /* dark grey */
    cursor: zoom-out;
}

.img0 {     /* the large image */
  /*margin: 20px -20px 20px -20px;*/
  max-width: 100%;
  width: auto;
  height: auto;
	  border: 2px solid #dd6346;      /* orange */     /* lighter grey ...dark grey #31394d*/
  /*padding: 1px;*/
  /*margin-left: auto;
  margin-right: auto;*/
}

.zoomable {
  /*cursor: zoom-in;*/  /* no zoom unless ... */
}

.img1 {     /* one of the thumbnails */
  margin: 4px 4px 4px 4px;
  max-width: 100%;
  width: auto;
  border: 2px solid #31394d;     /* dark grey */
  /*padding: 1px;*/
  /*margin-left: auto;
  margin-right: auto;*/
  cursor: pointer;
}

.img1s {     /* selected thumbnail */
  margin: 2px 2px 2px 2px;
  max-width: 100%;
  width: auto;
  border: 4px solid #dd6346;      /* orange */
  /*padding: 1px;*/
  /*margin-left: auto;
  margin-right: auto;*/
  cursor: pointer;
}

.w50 {  /* for FAQ/Info button */
  width: 4em;
  vertical-align: top;
  font-size: 75%;
}

.cart{      /* input.cart, button */
  margin: 3px 2px 3px 2px;
  padding: 3px 3px;
  /*border: none;*/
  border-width: 1px;
  border-radius: 5px;
  border-color: white; /*#EEB0A2;*/    /* light orange */
  background: #dd6346;      /* orange */
  color: white;
  /*font-weight: 2000;*/
  cursor: pointer;
  min-width: 3ex;     /* for + - buttons */
  white-space: normal;
}

.Complement {	/* https://www.canva.com/colors/color-wheel/ */
  background: #46c0dd;	/* cyan */
}

.OptSmall {     /* mobile, add padding to allow buttons overflow */
    padding: 2px 2px;
}

.Bold {
      	font-weight: bold;
}

@media screen and (min-width: 80em){   /* screen and wide tablet etc */
    .cartsm{      /* +/- buttons - only on desktop - needs to be AFTER .cart ! ? */
      margin: 1px 1px 2px 2px;
      padding: 0px 0px 0px 0px;
      border-radius: 3px;
      /*font-size: 3em;*/
      font-weight: 800;
      /*font: 500 100%/1.5 system-ui;*/

      /*font: 400 75%/1 system-ui;*/
    }

    .OptSmall {     /* slightly lighter weight for readability */
        font: 400 85%/1 system-ui;
        padding: 0px 0px;
        /*font: 0.5em;*/
        /*border: 1px solid blue;*/
    }
}

.Z10 {
  z-index: 10;
}

/*#cart-items {*/
.CartBackground {
  background: #31394d;
  color: white;
  border-radius: 5px;
}

.PayBackOK{
  background: #6CE074;  /*#51A557;*/  /*#ADE7B2;*/
}

.disabled {
  /*background: url("img/Disabled.png") center center no-repeat;*/
  /*background-size:     cover;*/
  background: #808080;
}

.SeeThru {
    opacity: 0.9;
}

.hidden {      /* hide by default */
	display: none;
}

.nobr {
    white-space: nowrap;
}

.rTable {
    display: none;      /* hide by default */
  	//display: table;
    //display: block;
  	width: 100%;
}
.rTableRow {
  	display: table-row;
}
.rTableHRow {
  	display: table-header-group;
  	background-color: #dddddd;
  	/*font-weight: bold;*/
    background: #31394d;     /* dark grey */
}
.rTableCell, .rTableHCell {
  	display: table-cell;
  	padding: 3px 3px;
  	border: 1px solid #999999;
}
.rTableCellr {
  	display: table-cell;
  	padding: 3px 3px;
  	border: 1px solid #999999;
    text-align: right;
}
.rTableFoot {
  	display: table-footer-group;
  	/*font-weight: bold;*/
  	background-color: #ddd;
}
.rTableBody {
  	display: table-row-group;
}

 /* Dropdown Button */

/* The container <div> - needed to position the dropdown content */
.dropdown {
  //position: relative;
  display: inline-block;
  margin-top: 0;     /* shift upwards to try and centre */
  z-index: 1000;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute; /*top: 5; left: 10;*/
  /*float:right;*/
  /*margin-left: -3em;*/  /* this offsets the menu to the left ! */ /* have now made all these buttons the fixed format, due to multiple issues :( */
  margin-left: 0em;
  margin-top: -4.25em;     /* -ve = shift upwards, hardcoded for 4 items :( */
  background-color: #E6D2AE;    /* same as main page */
  /*background: #dd6346;*/
  box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.2);  /* xoff yoff xdiffusion ydiffusion colour */
  z-index: 1000;
}

.drop-left {
  margin-left: -13em;
}

/* Links inside the dropdown */
.dropdown-content a, .dropdown-content input {
  //color: red;
  padding: 0.25em 0.25em;     /* make font relative for margin offset above to work */
  text-decoration: none;
  min-width: 11em;
  display: block;
  z-index: 1000;
}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {*/
  /*background: #A9391F;*/    /*#E89480;*/
/*}*/

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.showclass {display:inline;} /* position of this in the css is SO FUCKING STUPIDLY IMPORTANT !!! WHY */
/* if wrong place, will screw the postage dropdowns and/or the zoom FullImage WTF !!! */

/* custom dialog confirm etc from https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial */
#dialogoverlay{ /* just the white translucent blocker */
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;   /* rest of 'page' greyed out*/
	width: 100%;
	z-index: 10;
}
#dialogbox{
	display: none;
	position: fixed;
/*	background: #000;*/
/*	border-radius:7px;*/
	width:400px; /* was 350 */
	z-index: 10;
}
#dialogbox > div{ /*background:#FFF; margin:8px;*/ }
#dialogbox > div > #dialogboxhead{ color: #E6D2AE; opacity: .75; /*background: #888;*/ /*font-size:19px; color:#CCC; */ padding:10px; text-align:center;}
#dialogbox > div > #dialogboxbody{ /*background:#333; padding:20px; color:#FFF; */ padding:10px; text-align:center;}
#dialogbox > div > #dialogboxfoot{ /*background: #666; padding:10px;*/ padding:10px; text-align:center;}