body { font: 0.9em Verdana, Arial, sans-serif; }
header, nav { 
  border:1px solid gray; 
  -webkit-border-radius:5px; 
  -moz-border-radius:5px; 
  border-radius:5px; 
  margin:5px; 
  padding:8px;
}
header { background:#f6f6f6; width:98%;height:92px;}

#logo { float:left; max-width:330px;display:block;}
#logo img { margin-left: 12px; max-width: 100%; border: 0;}
#logo span { margin-left: 16px; font-weight:bold; }

.bannertop { width: 320px; height: 50px;}
 @media(min-width: 700px) { .bannertop { width: 320px; height: 50px;float:none; margin:15px 0 0 0; } }
 @media(min-width: 810px) { .bannertop { width: 468px; height: 60px; margin:12px 0 0 0; padding:0; } }
 @media(min-width: 1070px) { .bannertop { width: 728px; height: 90px; margin:0; padding:0; } }
.bannerbottom { width: 320px; height: 100px; }
 @media(min-width: 360px) { .bannerbottom { width: 336px; height: 280px; margin:auto;} }
 @media(min-width: 500px) { .bannerbottom { width: 468px; height: 60px; margin:auto;} }
 @media(min-width: 800px) { .bannerbottom { width: 728px; height: 90px; margin:auto; } }

section { border:0px solid gray; margin:3px 4px 4px 12px; padding:5px; width:98%;}
article {  border:0px solid gray; margin:3px; padding:0px;}
article a {text-decoration:none; color:#1E90FF;}
article a:hover {text-decoration:none;color:black; }
article article { border:1px solid #bababa; background:#f6f6f6; margin:2px; padding:3px;  width:48%; float:left;}
article article img { border:1px solid #bababa; }
.clear {clear:both;}
.textwrapleft { clear:left; float:left; margin:6px 10px 8px 6px; padding:0;}

#topad {float:right; display:block;margin:2px 2px 1px 1px;padding:0px;}
#bottomad { width:98%; margin: auto; border:0px solid gray;}

h3 {margin:4px 2px;padding:0px;}

img { 
    border: 0; 
}

nav {
  background-color: #fff;
  color: #888;
  display: block;
  margin: 3px 5px 3px 5px;
  padding:0;
  overflow: hidden;
 width:99%;
  clear:both;
}

nav ul {
  margin: 0;
  padding: 0;
  text-align:center;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
}
      
nav > ul > li > a > .caret {
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear; 
}

nav > ul > li > a {
  color: #1E90FF;
  display: block;
  line-height: 40px;
  padding: 0 24px;
  text-decoration: none;
}

nav > ul > li:hover {
  background-color: #fff;
}

nav > ul > li:hover > a {
  color: #ff9900;
}

nav > ul > li:hover > a > .caret {
  border-top-color: rgb( 0, 0, 0 );
}
      
nav > ul > li > div {
  background-color: #fff;
  border:1px solid gray;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: none;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 175px;
  visibility: hidden;
  z-index: 100;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

nav > ul > li:hover > div {
  display: block;
  opacity: 1;
  visibility: visible;
}

nav > ul > li > div ul > li {
  display: block;
  text-align:left;
}

nav > ul > li > div ul > li > a {
  color: #1E90FF;
  border-top:1px solid #f5f5f5;
  display: block;
  padding: 12px 24px;
  text-decoration: none;
}

nav > ul > li > div ul > li:hover > a {
  color: #ff9900;
 /* background-color: #666; */
}
a.urhere:link { color:#ff9900;  }
a.urhere:visited { color:#ff9900; }
a.urhere:hover { color:#1E90FF; }

.hoverbox { list-style:none;margin:5px 12px 5px 5px;padding-left:25px;padding-right:35px;}
.hoverbox a { cursor:default;}
.hoverbox a .preview { display:none;}
.hoverbox a:hover .preview { display:block; position:absolute; top: -33px; left: -55px; z-index: 11;}
.hoverbox img { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px; vertical-align:top; width:100px; height:75px;}
.hoverbox li { background:#eee; border-color: #ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline; float:left; margin:3px; padding:4px; position:relative;}
.hoverbox .preview { border-color:#000; width:250px; height:150px;}

#modelbox { float:right;width:300px;margin-bottom:8px;padding-right:1%;padding-left:1%;text-align:center; }
#mainpics { text-align:center;width:auto;margin-left:auto;margin-right:auto;padding:0;}
img.floated{ padding:5px;  border:2px solid #808080; }

.gallerycontainer{
position: relative;
float:left;
width:420px;
height:106px;
border:1px solid gray;
margin:5px;
background:#eee;
color: black;
}

.thumbnail img{
border: 0px solid gray;
margin: 5px;
padding:5px;
}

a.thumbnail  {
color: black;
text-decoration:none;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
 border: 1px solid #6d6d6d; 
 padding:0;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #eee;
padding: 5px;
left: -2000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
	display: block;
	position: absolute;
	top: -35px;
	left: 2px;
	z-index: 1; 
}

.thumbnail:hover span b{ /*CSS for enlarged image*/
color:#242424;
}
	
footer { border:1px solid gray; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  margin:3px; padding:1px; text-align:center; background:#fff;}
footer a { text-decoration:none; color:#1E90FF;}  
footer a:hover { color:#ff9900;}  
footer #footvan{ text-decoration:none; color:black;} 
footer #footmunch { text-decoration:none; color:black;}
  
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000;
	background: #eee;
	text-align: center;
	padding: 10px 0;
	display: none;
}
  
/*Hide checkbox*/
nav input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
    display: block;
}

.model-top {
    text-align: right;
    margin: -8px 3% -3px 0;
}

.kitset-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 15px 0;
}

.kitset-item {
    box-sizing: border-box;
    min-height: 106px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
}

.kitset-item img {
    float: left;
    width: 280px;
    height: auto;
    margin: 0 10px 5px 0;
}

.kitset-item h3 {
    margin: 0;
    padding: 0;
}

.kitset-item::after {
    content: "";
    display: block;
    clear: both;
}

/* =========================================
   Van box art gallery
   ========================================= */

.boxart-grid {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 10px;
    width: 100%;
    margin: 15px 0;
    padding: 0;
    box-sizing: border-box;
}

.boxart-item {
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
}

.boxart-item img {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer;
}



/* =========================================
   Van catalogue
   ========================================= */

.van-controls {
    margin: 15px 0;
}

.van-controls button {
    padding: 6px 10px;
    margin: 0 5px 5px 0;
    font-size: 13px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 3px;
    cursor: pointer;
}


/* =========================================
   Van grid
   ========================================= */

.van-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 15px 0;
}


/* =========================================
   Van card
   ========================================= */

.van-card {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 8px 8px 0;
    box-sizing: border-box;
}


/* =========================================
   Van image
   ========================================= */

.van-photo {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 600 / 340;
    margin: 0 0 0 10px;
}

.van-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}


/* Extra photo thumbnail */

.van-extra-thumb {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 58px;
    height: 40px;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    cursor: pointer;
}


/* =========================================
   Van buttons
   ========================================= */

.van-buttons {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    margin-left: 9px;
    flex-wrap: wrap;
}

.van-buttons button {
    padding: 5px 9px;
    font-size: 12px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 3px;
    cursor: pointer;
}


/* =========================================
   Van details
   ========================================= */

.van-details {
    display: none;
    font-size: 13px;
    line-height: 1.45;
}

.van-card.details-open .van-details {
    display: block;
}
/* =========================================
   1/24 & 1/25 Model Vans - individual pages
   ========================================= */

.model-layout {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 20px;
    margin: 15px 0 25px;
    align-items: start;
}

.model-layout.no-box {
    display: block;
}

.model-box {
    border: 1px solid #ccc;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
}

.model-box img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: default;
}

.model-box p {
    margin: 0;
    padding: 8px;
    font-size: 13px;
}

.model-info {
    font-size: 14px;
    line-height: 1.5;
}

.model-info p {
    margin: 0 0 12px;
}

.model-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 10px 0 20px;
    align-items: start;
}

.model-gallery img {
    display: block;
    height: 185px;
    width: auto;
    padding:5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: #fff;
}

.model-gallery img.wide-photo {
    grid-column: span 2;
}

.model-navigation {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 20px 0 5px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

.model-navigation .nav-spacer {
    flex: 1;
}


/* =========================================
   Details open - desktop/tablet
   ========================================= */

@media (min-width: 601px) {

    .van-card.details-open {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr);
        column-gap: 20px;
        align-items: start;
    }

    .van-card.details-open .van-photo {
        grid-column: 1;
        grid-row: 1;
    }

    .van-card.details-open .van-buttons {
        grid-column: 1;
        grid-row: 2;
    }

    .van-card.details-open .van-details {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        margin: 0;
        padding: 0;
        border: 0;
        position: relative;
        top: 0;
    }

    .boxart-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
}


/* =========================================
   Tablet - 2 columns
   ========================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .van-grid {
        grid-template-columns: repeat(2, 1fr);
    }
     .boxart-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
        .model-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .model-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================
   Mobile - 1 column
   ========================================= */

@media (max-width: 600px) {

    .van-grid {
        grid-template-columns: 1fr;
    }

    .van-card {
        max-width: 420px;
        margin: 0 auto;
    }

    .van-photo {
        max-width: 280px;
        margin: 0 auto;
    }

    .van-card.details-open .van-details {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #ddd;
    }
    
    .kitset-list {
        grid-template-columns: 1fr;
    }
    
    .boxart-grid {
        grid-template-columns: 1fr !important;
    }
        .model-layout {
        grid-template-columns: 1fr;
    }

    .model-box {
        max-width: 280px;
    }

    .model-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .model-navigation {
        flex-direction: column;
        gap: 8px;
    }
}


/* =========================================
   Full-screen image viewer
   ========================================= */

.image-viewer {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.image-viewer img {
    display: block;
    max-width: 95%;
    max-height: 95%;
    width: auto;
    height: auto;
}

.image-viewer-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}


@media screen and (max-width: 768px) {
	/*Make dropdown links appear inline*/
	nav #menu {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	nav li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	nav #menu li{ 
		width: 100%; text-align: center;position: relative;
	}
	nav > ul > li > div {
		width: 100%; text-align: center;position: relative;
	}
	nav > ul > li > div ul > li:hover > a {
  		color: #ff9900 ;
		}
	nav li:hover #menu a{
	
		text-align: center;
		height: 35px;
		line-height: 35px;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		text-align: center;
	}
}  
@media screen and (max-width: 650px) {

article article { width:98%; }

}