@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Englebert&family=Salsa&family=Truculenta:opsz,wght@12..72,500&family=Uncial+Antiqua&display=swap');

/*
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Englebert', sans-serif;
font-family: 'Salsa', cursive;
font-family: 'Truculenta', sans-serif;
font-family: 'Uncial Antiqua', cursive;
*/




body {
font-family: 'Archivo Narrow', sans-serif;
background-color: #001A3F;
color: #E6B13F;
}
/********** for all flex boxes*********/

* {
  box-sizing: border-box;
}
/********** mobile menu**************/

/*Blue = #001A3F*Gold = #E6B13F*Grey = #ebebeb dark grey #3D4849*/
.menu-board {
  display: grid;
  grid-template-columns: auto auto auto;
  
  padding: 5px;
}
.mbox {
  
  border: 1px dotted rgba(0, 0, 0, 0.8);
  padding: 10px;
  
  text-align: center;
}



/* If the screen size is 600px wide or more, hide the element */
@media only screen and (min-width: 600px) {
  div.menu-board {
    display: none;
  }
}



/************** banner positioning**************/


.flex-banner {
  display: flex;
  flex-wrap: wrap;
  color: #E6B13F;
  text-align: center;
  
}

.flex-ban-left {
 /*background-color: #bbb;*/
  flex: 33%;
  
}

.flex-ban-centre {
 /*background-color: #ccc;*/
  flex: 33%;
}

.flex-ban-right {
 /*background-color: #ddd;*/
  flex: 33%;
  
}

/* Responsive layout - makes a one column-layout instead of a three-column layout */

@media (max-width: 800px) {
  .flex-ban-right, .flex-ban-centre, .flex-ban-left {
    flex: 100%;
  }
}

/************** form and map positioning**************/

.flex-map {
  display: flex;
  flex-wrap: wrap;
 
  text-align: center;
}

.flex-map-left {
  /*background-color: red;*/
  padding: 10px;
  flex: 50%;
}

.flex-map-right {
  /*background-color: yellow;*/
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-map-right, .flex-map-left {
    flex: 100%;
  }
}

/**********************below is main layout ****************************/

/*Blue = #001A3F*Gold = #E6B13F*Grey = #ebebeb dark grey #3D4849*/


/* Style the header */
.header {
  grid-area: header;
  padding: 5px;
  text-align: center;
  font-size: 1.25em;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'footer footer footer footer footer footer';
   grid-column-gap: 10px; - if you want gap between the columns
} 

.left,
.middle,
.right {
  padding: 10px;
  /*height: 300px; /* Should be removed. Only for demonstration */
}

/* Style the left column */
.left {
  grid-area: left;
  /*background-color: #aaa;*/
}

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.left {
    display: none;
  }
}

/* Style the middle column */
.middle {
  grid-area: middle;
  /*background-color: pink;*/
}

/* Style the right column */
.right {
  grid-area: right; 
  color: #E6B13F;
  /*background-color: red;*/
}
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.right{
    display: none;
  }
}

/* Style the footer */
.footer {
  grid-area: footer;
  /*background-color: yellow;*/
  color: #E6B13F;
  padding: 10px;
  text-align: center;
  border: solid 2px #3D4849;
}

/* footer links */

/* If the screen size is 600px wide or more, hide the element */
@media only screen and (min-width: 600px) {
  div.footerlinks{
    display: none;
  }
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'footer footer footer footer footer footer';
  }
}

/******************************Main Layout ends**************************/

/* on page links */


a.onpage:link{ color:#000; } 
a.onpage:visited{ color:#000; } 
a.onpage:hover{ color:#E6B13F; } 
a.onpage:active{ color:#000}    


/*Blue = #001A3F*Gold = #E6B13F*Grey = #ebebeb dark grey #3D4849*/

/*************search form*******************/

/*Blue = #001A3F*Gold = #E6B13F*Grey = #ebebeb dark grey #3D4849*/

  label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  color: #E6B13F;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type="submit"] {
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right; 
  margin-top: 15px;
  margin-left: 10px;
  background-color: #E6B13F;
}
  
input[type="reset"] {
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right; 
  margin-top: 15px;
  margin-left: 10px;
  background-color: #E6B13F;
}



.button-box {
  margin-left: auto;
  margin-right: auto;
  /*margin-top: 5px;*/
  float: right;
 
}



.form-container {
  border-radius: 8px;
  color: #E6B13F;
  border: 1px solid #495C7D;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  width: 90%;
}

.fcol-10 {
  float: left;
  width: 15%;
  margin-top: 4px;
  padding: 2px;
}

.fcol-90 {
  float: left;
  width: 85%;
  margin-top: 4px;
  padding: 2px;

}
.andor {
  padding-left: 5px;
  text-align: left;
 
}
/* Clear floats after the columns */
.frow:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .fcol-10,
  .fcol-90,
  input[type="submit"] {
    width: 100%;
    margin-top: 5px;
  }
  input[type="reset"] {
    width: 100%;
    margin-top: 0;
  }
div.midtext{
    display: none;
  }


 }
}
/**************end form**************/

/************* pagination style ************/

.pagination {

  color: #E6B13F;
  background-color: #000;

}

/******* content box style *****************/


.contents {
  
  border-radius: 15px;
  padding: 10px 10px 20px 10px;
  background-color:#ebebeb;
  border: #C0C0C0;
  margin-bottom: 10px;
  color: #001A3F;
  
  
}

/****** numbered list *****/

.numbered-list {

	margin-left: 15px;
}


/* category link on book card*/


#click-select a:link{ color:#E6B13F; } 
#click-select a:visited{ color:#e6b13f; } 
#click-select a:hover{ color:#828282; } 
#click-select a:active{ color:#000}

/*pagination layout*/

#pagination {
  display: block;
  margin: auto;
  width: 90%;
  background-color:#000;
  border: 0px solid #C0C0C0;
  text-align: right;
  padding-right: 1em;
 
}

#pagination a:link{ color:#E6B13F; } 
#pagination a:visited{ color:#fff; } 
#pagination a:hover{ color:#828282; } 
#pagination a:active{ color:#495C7D}


/*category pagination layout*/

#c-pagination {
  display: block;
  margin: auto;
  width: 90%;
  background-color:#000;
  border: 0px solid #C0C0C0;
 /* text-align: right;*/
  padding-left: 1em;
}

/****style the pagination links *****/

#c-pagination a:link{ color:#E6B13F; } 
#c-pagination a:visited{ color:#fff; } 
#c-pagination a:hover{ color:#828282; } 
#c-pagination a:active{ color:#fff}

.textwrap { float:right;
margin: 10px;
}
.textwrapleft { float:left;
margin: 10px;
}



/*************results section*****************/







/* results image positioninig*/

img.results {
    display: block;
    margin: auto;
    object-fit: scale-down;
    }



/* *links*/


/*Blue = #001A3F*Gold = #E6B13F*Grey = #ebebeb*/
a {
	color: #E6B13F;
	font-size:1em;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight:100;
	
	}

a:link {color:#E6B13F;}
a:visited {color:#ebebeb;}
a:hover {color:#828282; text-decoration:underline;}



/*H tag styles*/

h1 { 
    display: block;
    font-size: 1.8em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    /*font-weight: bold;*/
    color:#fff;
}
h2 {
    display: block;
    font-size: 1.4em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
   /* font-weight: bold;*/
    color:#3D4849;
}
h3 { 
    display: block;
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    /*font-weight: bold;*/
    color:#3D4849;
}



h1.internal-head {

display: block;
    font-size: 1.8em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    /*font-weight: bold;*/
    color:#3D4849;
}
span.books {

display: block;
    font-size: 1.2em;
    color:#001A3F; 
}




/* main logo positioninig*/

img.mainlogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: scale-down;
    }

/*visitor flags image positioning*/
img.flagmap {
object-fit: scale-down;
         }

/*left sidebar images*/

img.leftbar {
    object-fit: scale-down;
         }


/****** left sidebar divs ******/

.leftbox1
{
  margin-left: 15px;
  margin-top: 20px;
  max-width: 200px;
 /* border: 1px dotted red;*/
}


/*responsive image class*/

.responsivepic {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/******* search results layout flex box *******/

.dflex-container {
  display: flex;
  flex-wrap: wrap;
  color: #3D4849;
  border-top: solid 2px #ebebeb;
 }

.dflex-item-left {
  background-color: #fff;
  padding: 10px;
  flex: 20%;
  
}
.dflex-item-centre {
  background-color: #fff;
  padding: 10px;
  flex: 65%;
  
}

.dflex-item-right {
  background-color: #fff;
  padding: 10px;
  flex: 15%;
  
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 600px) {
  .dflex-item-right, .dflex-item-left, .dflex-item-centre {
    flex: 100%;
  }
}

/*** make the book title slightly larger *****/
.btitle {
  font-size: 1.1em;
}



/****** price convert and add to basket styling ******/

.buybox {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.price {
  width: 100%;
  text-align: right;
  font-size: 1em;
  font-weight: bold;
  font-family: 'arial', sans serif;
}

.xchange {
  width: 100%;
  text-align: right;
  font-size: 0.8em;
}


.buybutton {
  
  width: 100%;
  
}




/* align text left */

.lefttext {
text-align: left;
}



/* make images responsive */
.responsivepic {
  width: 100%;
  height: auto;
}