/*Note  - remove any 'calc' funtions and replace with px - because some browsers may not use it*/

:root { /* :root is html tag but higher - use though for variables only - accessable in whole document*/ 
    /*colours*/ 
	--col-btn-border:   	black;  /* 0px borders (not currently used)   */
  --col-menu-bHover:    	hsl(144,70%,94%); /*  (not currently used)   */

  --col-third:    hsl(185,100%,27%);
  --col-third-hover:    hsl(185,100%,21%);
  --col-second:    hsl(25,100%,50%);
  --col-second-hover:    hsl(11,100%,64%);


  --col-prices:hsl(155,100%,20%);

  --col-first:    hsl(170,100%,20%);
  --col-first-hover:    hsl(170,100%,17%);

  --col-second:    hsl(185,100%,27%);
  --col-second-hover:    hsl(185,100%,18%);
  --col-third:    hsl(25,100%,50%);
  --col-third-hover:    hsl(11,100%,64%);




  --col-second:    hsl(182,100%,20%);
  --col-third-v:    hsl(37,100%,50%);

 --col-dark-grey: hsl(0,0%,25%) ;

	--col-btn-text:      	white;  /* all button text */  /*   */


	--col-menu-back:    	white; /* sub menus  */
  --col-menu-text:        black; /* sub menus  */

	--col-faint-border: hsl(0,0%,90%) ;  /* used a lot */
	--col-background-color:hsl(0,0%,96%);
	--col-semi-transparent:hsla(0,100%,100%,.7); /* used a lot*/


	/* --transition: .05s ease-in-out ;   */



	--font-main: 'Trebuchet MS', sans-serif; 	--font-line-height: normal;
	--font-main:'OpenDyslexic'; 				--font-line-height: normal;

	--font-main:'OpenDyslexic3';				--font-line-height: 1.44em ;   /**/ 
	--font-main:'OpenDyslexic3';				--font-line-height: 1.5em ;   /**/  
	

font-family: 'Arial', sans-serif; line-height: bold; font-size:100%;
font-family: 'Calibri', sans-serif;line-height: bold; font-size:100%;
font-family: 'Trebuchet MS', sans-serif; line-height: bold; font-size:95%;

/*font-family: 'AkzidenzGroteskPro', sans-serif; line-height: bold; font-size:100%;*/

	/*dimensions*/
/*	--margin: 90%;
  --margin: 96%;*/


	--inner-margin :10px;
	--header-height: 		65px;
	--nav-height:			30px; /*30px*/

	--rad-radius: 0px;
	--rad-radius-search: 4px;

	--padding-menus: 5px;

	
}




/*AkzidenzGroteskPro-Regular*/

@font-face{
	font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.woff'), url('fonts/OpenDyslexic-Regular.ttf');
	font-weight: normal;
}	
@font-face{	
	font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Bold.woff'), url('fonts/OpenDyslexic-Bold.ttf');
	font-weight: bold;
}	
@font-face{	
	font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Italic.woff'), url('fonts/OpenDyslexic-Italic.ttf');
	font-weight: normal;
	font-style: italic;
}	
@font-face{		
	font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Bold-Italic.woff'), url('fonts/OpenDyslexic-Bold-Italic.ttf');
	font-weight: bold;
	font-style: italic;
}	
@font-face{		
	font-family: 'OpenDyslexic3'; src: url('fonts/OpenDyslexic3-Regular.woff'), url('fonts/OpenDyslexic3-Regular.ttf');
	font-weight: normal;
}	
@font-face{		
	font-family: 'OpenDyslexic3'; src: url('fonts/OpenDyslexic3-Bold.woff'), url('fonts/OpenDyslexic3-Bold.ttf');
	font-weight: bold;	
}


@font-face{		
	font-family: 'AkzidenzGroteskPro'; src: url('fonts/AkzidenzGroteskPro-Regular.woff'), url('fonts/AkzidenzGroteskPro-Regular.ttf');
	font-weight: normal;
}	
@font-face{		
	font-family: 'AkzidenzGroteskPro'; src: url('fonts/AkzidenzGroteskPro-Bold.woff'), url('fonts/AkzidenzGroteskPro-Bold.ttf');
	font-weight: bold;	
}

* { 
    padding:0px; 
    margin:0px; 
    border: 0px; 
    border-collapse: collapse;/**/
    box-sizing: border-box; 
  	
}

#background{
	/*background-image: url("crowd1 (1)b.jpg"); /*pre faded using paint package
	background-size: contain;
	background-repeat: no-repeat;	
	background-color: clear;*/
}


 html{   	
  	/*
  	border-top: 1px black solid; */	
  	letter-spacing: .0em;
    font-weight: normal;

    --margin: 96%;
}

@media screen and  (max-width: 700px){	
	html{
    --margin: 100%;
	}
 
}

body{

	background-image: url("images/crowd1 (1)b.jpg"); /*pre faded using paint package*/
	background-size: contain;
	background-repeat: nrepeat;	
	background-color: clear;
	background-color: var(--col-background-color);

}

h1, h2, h3, h4, h5 , h6{
  /*font-weight: normal;*/
  padding:.5em 0px;
  
  font-weight: normal;
/**/
}
p{
	font-size: 100%;
	font-weight: normal;
	padding:0px;


	
	color:var(--col-dark-grey);
color:black;
}



.textDecorationNone {
	text-decoration: none;
}


.darkGrey{
	color:var(--col-dark-grey);

}










/* -------------------------------------------------------------- HEADER BAR ------------ | Logo | menus | search |  ---- */
header{
	background-color: var(--col-semi-transparent);
	background-color: clear;  /*     */
	background-color: white;
	
	border:0px solid var(--col-btn-border);
	height:auto;
	width:var(--margin);
	margin:auto;
	max-width: 1000px;
}

.noPadding {
 	margin:0;
 	padding:0;
 	border:0;
 	margin:auto;
 	height:auto;
 	background-color: clear;
}
.margin {
   width:var(--margin);
   max-width: 1000px;
}


.logo, .searchside-menu  {
	height: var(--header-height);
 	background-color: clear; 
 	color: black;

}



header .logo {
	width:auto;
 	float:left;	
}
 


/* -------------------------------------- -search divides into two    | search | login |   ---- */
.login  {
 	width:auto;float:right;
	display:inline-block;
}
.search  {
 	width:auto;
 	overflow:hidden;    /*Note the overflow:hidden; alows the 'auto cover reing width' to work*/
}



header:after{
   content:"";
   display:table;
   clear:both;
}

/* ------------------------------------------------------ Logo --------------------*/
.logoImage{
    padding-left: 0px;
	height: 52px;
	height: 64px;
	--height: calc(  (var(--header-height ) - 4px        ) ) ;
	height: var(--height);
	margin-top: calc(  ((var(--header-height ) - var(--height) ) / 2        ) ) ;
	margin-left: var(--inner-margin);
	z-index:2;
}

.logoImage:hover{
	/*box-shadow: 0 0 2px 1px var(--col-second);*/

 /* -webkit-filter: contrast(200%);  Safari 6.0 - 9.0 */
  filter: contrast(150%);

}

.logoText2{
	display:block;
	position:relative;
	top:-58px;
	left:57px;
	position:absolute;
	top:9px;
	left:80px;
   
	z-index:3;
	background-color: clear;
	color:hsl(0,0%, 96%);
	color :white;
	font-size: 18px;
	font-weight:normal;

}

.ltRefuge{
	left:62px;
	top:30px;
	left:85px;
}















/* ------------------------------- Search section----------------------------------- */

input, textarea, select {
	font-family:inherit;
	color:black;
}

select {
	font-family:inherit;
	color:grey;
}


/*
input::placeholder, textarea::placeholder, select::placeholder {
  color:green;
  opacity: 1;  Firefox 
}*/


/*input[type=text]{*/
#searchText{	
	float:left;
	width:   calc( (100% - 80px - var(--inner-margin) *2 ) )   ;
	margin-left:var(--inner-margin);
	margin-top: calc(  ((var(--header-height ) - 36px ) / 2        ) ) ;
	margin-bottom: 10px;
	overflow:hidden;
	border:1px solid var(--col-first);
	border-radius:  var(--rad-radius-search) 0px  0px  var(--rad-radius-search)  ;/*	*/
	background-color: white;
	/* internal */
	padding:6px;
	font-size:inherit;
    font-family:inherit;/*seems we need to insist the form inputs be a font style*/
    line-height:inherit;/*seems we need to insist the form inputs be a font style*/
}
#searchText:hover{
	box-shadow: 0 0 2px 1px var(--col-first);
}



#searchButton{
	display:inline-block;
	float:left;
	width:80px;
	margin-right: 0px;
	margin-top: calc(  ((var(--header-height ) - 36px ) / 2        ) ) ;
	border:0px solid var(--col-btn-border);
	border-radius:  0px var(--rad-radius-search)  var(--rad-radius-search)  0px ;
	/*background-color: var(--col-first);*/
	color:var(--col-btn-text);
    /* internal */
	padding:7px; 
	text-align: center;
	text-decoration: none;
	font-size:inherit;
	font-family:inherit;/*seems we need to insist the form inputs be a font style*/
	line-height:inherit;/*seems we need to insist the form inputs be a font style*/	
	cursor:pointer;
}

#searchButton:hover{
	/*box-shadow: 0 0 2px 1px var(--col-first);*/
}

#searchText:hover (#searchButton){
	/*box-shadow: 0 0 2px 1px var(--col-first);*/
	/*display:none;*/
}

.loginButtons{
	display:inline-block;
	float:right;

	margin-right: var(--inner-margin);
	/*margin-left:-3px;*/
    margin-top: calc(  ((var(--header-height ) - 36px ) / 2        ) ) ;
	border:0px solid var(--col-btn-border);
	border-radius: var(--rad-radius);
	color:var(--col-btn-text);
	/* internal */
	padding:7px;
	text-align: center;
	text-decoration: none;	
	font-size:inherit;
	font-family:inherit;/*seems we need to insist the form inputs be a font style*/
	line-height:inherit;/*seems we need to insist the form inputs be a font style*/	 
	cursor:pointer;
}

.textBlack_v{
	color:black;
}


.rounded{
	border-radius: 30px;	
	/*border:2px solid var(--col-third);*/
	padding:9px;
	margin-top: calc(  ((var(--header-height ) - 48px ) / 2        ) ) ; /*44*/
}

.rounded:hover{
	/*box-shadow: 0 0 2px 1px var(--col-third);*/
}

.roundedv{
	border-radius: 0px;	
	/*border:2px solid var(--col-third);*/
	padding:9px 8px 9px 8px;
  padding:7px 6px 7px 6px;

	margin-top: calc(  ((var(--header-height ) - 25px ) / 2        ) ) ;
	
}

.roundedv:hover{
	/*box-shadow: 0 0 2px 1px var(--col-second);*/
}


#pageNumbers{
	background-color: white;
	padding-top:27px;
	padding-bottom:27px;
	padding-right: 2%;
	padding-left: 2%;
}

#pageNumbersContainer{
	display:inline;      /* please leave key 'center numbers'  -   make this block*/
	background-color: white;
	/*width:500px;*/
	margin:auto;
}
#curPage{
/*	background-color: hsl(0,0%,93%);
background-color: black;
color:white;


background-color: hsl(0,0%,93%);
border: 1px solid  grey;
border-radius:  var(--rad-radius);*/
color:black;
font-weight: bold;
}
.page{
	padding:.5em;

	margin: .0em;
	display:inline-block;
	  float:right;        /*   please leave key 'center numbers'  -   comment this out*/

	  color:var(--col-dark-grey);
	  color:grey;
	  border: 1px solid white;
	/* background-color: pink;
	border-radius: 0px  20px  20px 0px;*/
}

#pages{
	padding:.5em;

	margin: .0em;
	display:inline-block;
	  float:right;        /*   please leave key 'center numbers'  -   comment this out*/

	  color:var(--col-dark-grey);
	  color:grey;
	  border: 1px solid white;
	/* background-color: pink;
	border-radius: 0px  20px  20px 0px;*/
}

.page:hover{
   color: var(--col-third);
	 /*background-color:  hsl(0,0%,90%);
	border: 1px solid hsl(0,0%,93%);*/
}

















/*---------------------------------------- Laptop navbar ---------------------------------------*/
.nav{
	height: var(--nav-height);
	background-color: var(--col-second);
   background-color: var(--col-semi-transparent);


   font-size:15px;
}

/*All list items (top and sub included) */
.nav ul li{
	list-style: none;/**/
    position: relative;
    float: left;
    width:100%;
   color:var(--col-dark-grey); /**/
}

/*All list item a's (top and sub included) */
.nav ul li a{


	width: 100%;
	white-space: nowrap;
	/*height: 50%;*/
	display: inline-block;
	/**/text-decoration: none;

	font-size:inherit;
	letter-spacing: 1px;
	background-color: clear;
}
/* top buttons */
.nav>ul>li {
    top: 0px;
    
	width:auto;
	height: var(--nav-height)   ;
  
/*	line-height: inherit;	
	line-height: 20px;*/

	
	border:0px solid  black;

	

	
	margin-left:0px;
	margin-right: calc(20% - 45px);/**/

	margin-left:10px;
	margin-right: calc(20% - 100px);/**/

	margin-left:10px;
	margin-right: 20px;/**/	

	
	background-color: var(--col-semi-transparent);
	/*background-color: rgb(250,100,100);*/

	font-weight:normal;
	text-align: left;

	float:right;
 /* color:grey; */


}



/* top button a's */
.nav>ul>li>a{
    width:auto;
    top: 12px;
  /*  display:block;*/
  
    line-height: var(--nav-height); 
    height:var(--nav-height) ;
   /* line-height: inherit;*/
	padding: 0em;
   /* border-radius: var(--rad-radius);*/
   
}
.nav>ul>li>a:not(.sellerSeller2){
	color:inherit;
}





.nav>ul>li>a:hover:not(.sellerSeller2) {

	color:var(--col-third);
}
.nav ul li:hover ul{
	display: block;
}



.nav>ul>.left{
	float:left;
}
.grey{
	color:grey;
}

.bold{
	font-weight: bold;
}
.nav>ul>li>.sellerSeller2{
letter-spacing: 0px;
/* NOTE : to float left - write 'left' in it's html class line  */

}






/*---------- sub menu lists -----------------------------------*/
.nav>ul>li>ul{
	z-index:3;
	width:auto;
	display: none;
	position: absolute;
    border: 1px solid var(--col-faint-border );
   /* border-radius: var(--rad-radius);*/
    background-color: pink;
    background-color: white;
}


/* Sub menu list items*/
.subMenuItem{
	background-color: var(--col-menu-back);
	/*border-radius: var(--rad-radius);*/
	line-height: inherit;
}

.subMenuItem>a:hover{
	/*background-color: var(--col-menu-bHover);*/
	color:var(--col-third );
}

/* Sub menu list items a's */
.subMenuItem a{
	background-color: clear;
	color: var(--col-menu-text);
	font-size:inherit;
	padding: var(--padding-menus);
	line-height: inherit;
    font-weight: normal;
    text-align: left;
    color:var(--col-dark-grey); /**/
}


nav:after{
   content:"";
   display:table;
   clear:both;
}
/*------------------------------------------------------------------------------------------------*/

/*.menuBuying>li>a{
	text-align: center;

}

.nav ul li ul li a{
	text-align: right;
}*/



 #menuBuying{
	right:-97px;
}

 #menuBuying>li>a{
	/*text-align: left;*/
}
 #menuFont{
	right:-34px;
}

 #menuFont>li>a{
	text-align: center;
}
















/*----------------------------------------Mobile Tablet Menu Button and side menu containers -------------------------------------------------*/

#btn-container{
	display:none;
    padding-left: 0px;
	height: 30px;
	margin-top: calc(  ((var(--header-height ) - 30px ) / 2        ) ) ;
	float:right;
	margin-right: var(--inner-margin);
	z-index:2;
	background-color: white;
}

#btn-container2{
	display:none;
    padding-left: 0px;
	height: 30px;
	margin-top: calc(  ((var(--header-height ) - 30px ) / 2        ) ) ;
	float:right;
	margin-right: var(--inner-margin);
	z-index:2;
	background-color: white;
}



#menu-container{
	width:auto;
	z-index:20;
	top:119px;
	right: 36px;
	right:5%;
	position:absolute;
	/*font-size:inherit;*/
	background-color: white;
	display:none;
	z-index: 10;
	font-size:13px; 


}
#menu-container h3{
   padding:  var(--padding-menus);
   padding:  3px;
   /*overflow: hidden;*/
}
.lineBreak , .lineBreak2 {
	height:1px;
	background-color: var(--col-faint-border);
	background-color:white;
	width: calc(100% - 0px);
	margin:0px;
	margin-top:4px;
	margin-bottom: 6px;
	overflow:hidden;
	float:left; /*needed as top margin and top boarder will not work - strange but true here*/
}

.lineBreak3{
	display: block;
	height:1px;
	background-color: red;
	background-color: var(--col-faint-border);
	
	width:  150px;
	width:  100% ;
	
	/*margin:5px;
	margin-top:10px;
	margin-left: 30px;*/
	overflow:hidden;
	/*float:left; needed as top margin and top boarder will not work - strange but true here*/	
}


#menu-btn{
    padding-left: 0px;
	height: 100%;
	z-index:2;
}
#close-btn{
	display:none;
    padding-left: 0px;
	height: 100%;
	z-index:2;
}

#menu-btn2{
    padding-left: 0px;
	height: 100%;
	z-index:2;
}
#close-btn2{
	display:none;
    padding-left: 0px;
	height: 100%;
	z-index:2;
}


/*-------------------Mobile/Tablet Side menu -----------------------------*/

.side-menu{
	display:none;
	height: 100%;
	width: calc(100% + (var(--padding-menus) * 1));
	font-size: inherit;
	float: right;
	z-index: 2;
	background-color: white;
	border:1px var(--col-faint-border) solid;
	/*border-right :1px hsl(0,0%,90%) solid;
	border-bottom :1px hsl(0,0%,90%) solid;*/
padding-top: 12px;
padding-bottom:  12px;
padding-left:  7px;
padding-right:  7px;
}

.side-menu ul{
  margin-left: 0px;
  right:200px;
  width:auto;
  padding:0px;
}



.sideItem{
	margin-left: 3px;
	/*color:var(--col-dark-grey);*/
	
}

/*.side-menu ul li{ */
.sideUlList{	/**/
 list-style-type: none; /**/
 /*font-weight: bold;*/
  margin-top: 0px;
  cursor:pointer;
  font-size:inherit;
  font-weight: normal;
  color:black;
  color:var(--col-dark-grey);
  /*color:grey;*/
}

.sideHeaading{
		font-weight: bold;
font-weight: normal;

	
	color:inherit;
/*	 color:hsl(0,0%, 70%);
	color:var(--col-dark-grey);*/
 
color:black;/**/
/*color:var(--col-dark-grey);*/
}

/*.side-menu ul li:hover {*/
.sideUlList:hover{
	 color:var(--col-third);   
	
}



























/*------------------------------------------------Media veriation for HEADER and NAV cluster ------------------------------------------*/

 @media screen and  (max-width: 700px) and (min-width: 451px){/*---  display option 1 ---*/
	#btn-container, .nav, .navButton, .login{
		display:none;
	}
	#btn-container2, #menu-container{
	  	display:block;
	}

	#menu-container{
		top:65px;
		top:75px;
		right: 5%;
	}	

	header{
	/**/	height: calc( var(--header-height )    ) ;
	}
	header .logo  {
	/*	width:100%;*/
	}

	header  .searchMenu  {
	 	/*float:left;
	 	overflow:visible;
	 	display:block;
		width:auto;*/
		display:block;
		text-overflow: hidden;
		width:calc(100% - 193px);
		width:calc(100% - 166px);
		float:right;
	}	
	.search{
		float:right;
		width: calc(100% - 46px);
		overflow:hidden;
	}
}






 @media screen and  (max-width: 450px){  /*---  display option 2 ---*/
	.nav, .navButton, .login{
		display:none;
	}
	#btn-container, #menu-container{
	  display:block;
	}

	header{
		height: calc( var(--header-height ) * 2 - 15px        ) ;
	}
	header .logo  {
		width:100%;/**/
	}

	header  .searchMenu  {
	 	/*float:left;
	 	overflow:visible;
	 	display:block;*/
		width:100%;
	}	
	.search{
		float:left;
		width:100%;
	}
}




/*
#bc2{
	border: 1px solid red;
}
*/
/*--------------------------------------------------------------------------------------------END OF HEADER AND NAV BAR CLUSTER---------------*/























/*--------------------------------------------------------------BODY---------------------------------------------------------------------------------*/


/*.advertTop{
	display:block;
	height: 100px;
}*/

#advertScoot2{
  background-color: clear;
  padding-top:15px;
  padding-bottom:15px;
  max-width: 700px;
  margin:auto;
}

#tomAd{
  width:100%;
}



#main{
	margin:auto;
	width: var(--margin);
  max-width: 1000px;
	font-size:inherit;
}


.container{
	/*display: flex;
	flex-wrap: wrap;
	justify-content: center;*/

	/*		margin:auto;
width: var(--margin);*/

}



#intro{
	background-color: rgba(255,100,150,.5);
	background-color: DeepPink;	
	background-color: ForestGreen;
	background-color: Gold;
    background-color: rgba(255,215,0,.5);  /* hotPink + transparency*/
	/*background-color: hsl(120,20%,30%);*/
	color:black;
	word-wrap:break-word;
	padding: 15px 15px;
}



.whiteSpace2{
	display:block;
	height: 40px;
	height: 40px;
	/*height:0.5vw;*/
	background-color: clear
}


.whiteSpace1{
	display:block;
	height: 40px;
	height: 20px;
	/*height:0.5vw;*/
	background-color: clear
}











/*
------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------ITEM SECTION------------------------------------------------------------------------------------------------
*/
   

#ItemSection{
	display:grid;
	grid-gap:0px;
	padding:0;
	grid-template-columns: auto 400px  ;
	grid-template-columns: auto 600px  ;
	grid-template-columns: auto auto  ;
	/*grid-template-columns: 40% 60%  ;*/
	grid-template-columns: 462px auto  ;
	grid-template-columns: auto auto  ;
	grid-template-rows:  auto auto auto auto auto auto auto;
	
	/*position: relative;*/
	background-color: clear;
	width:100%;
	position:relative;
}
#ItemSection h3{
	padding: 1em 0em 0em 0em; 
}
#ItemSection h1{
	color:green;


	color:var(--col-prices);

	/*color:var(--col-first);	*/
}
#itemSeller{
  padding-top:0em;


}

	#itemTitle{
		grid-column: 1 /  span 2;
		grid-row: 1 / span 1 ;			
	}

	#itemSeller{
		grid-column: 2 / span 1 ;
		grid-row: 2 / span 1 ;
	}		

	#slideViewer{
/*		grid-column: 1 /  span 1;
		grid-row: 2 / span 5 ;*/
	}

#slideViewerContainer{
			grid-column: 1 /  span 1;
		grid-row: 2 / span 5 ;
		background-color: white;
}


	#itemLocation{
		grid-column: 2 /  span 1;
		grid-row: 3 / span 1 ;				
	}			
	#itemContact{
		grid-column: 2 / span 1 ;
		grid-row: 4 / span 1 ;
	}					
	#itemDescription{
		grid-column: 2 / span 1 ;
		grid-row: 5 / span 1 ;			

	}			

	#itemPrice{
		grid-column: 2 / span 1 ;
		grid-row: 6 / span 1 ;
	}			

	#itemEdit2{
		grid-column: 1 / span 2 ;
		grid-row: 7 / span 1 ;				
	}

	#itemAdditional{
		grid-column: 1 / span 2 ;
		grid-row: 8 / span 1 ;				
	}


	#itemTitle, #itemLocation, #itemSeller, #itemContact, #itemDescription, #itemPrice , #itemAdditional{
	  background-color: white;
	  background-color: var(--col-semi-transparent);
	  padding-left:15px;
	}
	#itemTitle{
	 /*background-color: white;*/
	  font-weight: bold;
	}	

/* LEAVE -- choice of edit button positions */
	#itemEdit{
		display:none;
		position:absolute;
		bottom:8px;
		right:8px;
	}
/* LEAVE -- choice of edit button positions */	
	#itemEdit2{
		display:block;
		background-color: var(--col-semi-transparent);
		bottom:8px;
		right:8px;
		overflow:hidden;
		/*height: 52px;*/
	}


	#starContainer{
		font-size: 0px; /* needed to remove the strange spaces between the child images */
	}
	.star{
	  margin:0px;
	  padding:0px;
	  overflow: hidden;
	  height:17px;
	}
	.starInactive{
		display:none;
	}



	@media screen and  (max-width: 900px){	
			#ItemSection{
				display:block;
			}	

			#itemSeller{
  padding-top:1em;


}
	}

	#slideViewer{
	   	position:relative;/**/
	   	background-color: hsl(0,0%,0%);
	 	height:462px;

		/*max-width: 700px;*/

	   	display:flex;
	   	justify-content:  center;
	   	align-items: center;
		z-index: 2;/**/
	}
/*
		#slideViewer{
	   	position:absolute;
	   	background-color: hsl(0,0%,0%);
	 	height:700px;
	 	width:1000px;
	

	   	display:flex;
	   	justify-content:  center;
	   	align-items: center;
	   	

	}
*/


		.mySlides {
			position:relative;
			display:none;
			/*height: auto;*/
			max-width:100%;
			max-height:462px;
			margin-left:auto;
			margin-right:auto;
			left:0px;
			/*clip-path: inset(0px 0px 0px 0%);
			transition: all 3s; */
			overflow:hidden;
			/*cursor:zoom-in;*/
		}


		.slideButton{
			position: absolute; 
			font-size: 24px;
			padding:.5em;
			background-color: hsla(0,0%,50%,.1);
			color:white;
			/*z-index:30;*/
		}
		.slideButton:hover{
		  	background-color: hsla(0,0%,50%,.2);
		  	color:black;
		}
		.slidePrevious{
			left:0px;
			
		}
		.slideNext{
			right:0px;
			background-color: clear;
		}
		.slideFull{
			position:absolute;
           bottom:0px;
           right:0px;
           z-index:1;
         /*   letter-spacing: -4px;
           transform: scale(1.5,1);
          padding:.25em;*/

		}
		.slideClose{
			display :none;
			/**/position:absolute;
           top:0px;
           right:0px;
           z-index:1;

		}


	#itemDetail{
	   	position:relative;/**/
	   	background-color: white;
	 	height:auto;
	 	/*font-size: inherit;*/
	 	padding:1em;
	}



/*
---------------------------------------------------------------------------------------------------------------------------
--------------------------------------------SEARCH SECTION---------------------------------------------------------------------------
*/








#searchSection { 
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));*/
  grid-template-columns:  1fr;
  grid-gap: 0px;
  align-items: stretch;
 /* width:var(--margin);*/

  background-color: clear;
 }

#found{
  background-color: var(--col-semi-transparent);	
  background-color: white;
  color:grey;

  padding:.5em;
}  

#searchSection > article {
  border: 1px solid var(--col-faint-border);
  border: 0px solid var(--col-faint-border);
  border-top: 15px solid white;
 /* box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);*/
  position:relative;
  background-color: var(--col-semi-transparent);
  height:auto;

  overflow: hidden;
}


.flexCenterContainer{
	height:100%;
  	display:flex;
	justify-content:  center; /*horizontal*/
	/*align-items: center;  /*vertical*/
	align-items: flex-start;/*center*/
/*align-items: center;center*/
	float:left;
	/*removable options*/
	/*border: 1px solid var( --col-faint-border );
	background-color: var( --col-faint-border );
	width:200px;*/
	/*background-color:cyan;*/
}

.flexCenter{
	height:100%;
  	display:flex;
	justify-content:  top; /*horizontal*/
	align-items: flex-start;  /*vertical*/
	float:left;
	/*removable options*/
	/*border: 1px solid var( --col-faint-border );
	background-color: var( --col-faint-border );
	width:200px;*/
	/*background-color:var(--col-faint-border);*/
}

#searchSection > article img {
 /* max-width: 100%;
 position:relative;
 overflow:hidden;*/
  /*width:auto;
width: 200px;*/
 float:left;
 max-height:210px;
 max-width:200px;/**/
}



#searchSection > article .text {
  position:relative;
  padding: 0px;
  left:10px;

  padding-left: 10px;
  /*padding-right: 10px;*/
  left:0px;

  /*width: calc(100% - 10px);*/
/*  width:500px;
  left:210px;*/

}

.searchTitle{
	



color:var(--col-dark-grey);
color: black;
/**/
color:var(--col-second);
	color: var(--col-third);



font-weight: normal;
font-weight: bold;


}



.searchLocation{
	font-weight: normal;
	color:grey;
}

/*.searchPrice{
	font-weight: bold;
}
.searchPrice{
	display:inline-block;
	color:var(--col-first);
	font-size:1.5em;
	margin-top:.5em;
}*/


.searchDescription{
	display:block;
	/*display:none;*/
}
.searchDescriptionMedium{
	display:none;
}
.searchDescriptionShort{
	display:none;
	/*display:block;*/
}
 @media screen and  (max-width: 1000px) and (min-width: 750px){

	.searchDescription{
	  /*display:block;*/
	  display:none;
  }
	.searchDescriptionMedium{
		/*display:none;*/
		display:block;
	}
	.searchDescriptionShort{
		display:none;
		/*display:block;*/
	}
}
@media screen and  (max-width: 750px) and (min-width: 500px){

	.searchDescription{
	  /*display:block;*/
	  display:none;
  }
	.searchDescriptionMedium{
		display:none;
		/*display:block;*/
	}
	.searchDescriptionShort{
		/*display:none;*/
		display:block;
	}
}



.searchPrice{
	font-weight: bold;
}
.searchPrice{
	color:var(--col-first);
	color:var(--col-prices);
}

a {
	text-decoration: none;
}


.editButtons{
	display:none;
}




	@media screen and  (max-width: 500px){	

		#searchSection > article {
		/*  border: 1px solid var(--col-faint-border);
		  border: 0px solid var(--col-faint-border);
	
		  position:relative;
		  background-color: var(--col-semi-transparent);
		  height:100%;*/

		}		

		.flexCenter , .flexCenterContainer{
			display:block;
		  height:auto;
		  float:none;
		}

		#searchSection > article img {
		  float:none;
		  max-height:500px;
		  max-width:100%;
		}

		.searchDescription{
		  /*display:block;*/
		  display:none;
	  }
		.searchDescriptionMedium{
			/*display:none;*/
			display:block;
		}
		.searchDescriptionShort{
			display:none;
			/*display:block;*/
		}		
	}









/*--------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------SELLER SECTION-------------------------------------------------------------------*/





/*	#seller{
		background-color: white;
		padding:1em;	
		
	}
	#sellerPic{
		max-height: 200px;
		max-width:200px;
	}

	#sellerDescription{
		float:right;
	}
*/

#sellerSection{
	display:grid;
	grid-gap:0px;
	padding:0;
	grid-template-columns: 1fr auto   ;
	grid-template-rows:  auto auto auto auto auto auto auto;
	
	/*position: relative;*/
	background-color: clear;
	width:100%;
	color:grey;
	color:var(--col-dark-grey);
	color:black;
}
#sellerSection p{
	color:grey;
	color:var(--col-dark-grey);
	color:black;
}


#sellerSeller{
  padding-top:1em;
}


	#sellerViewer{
		grid-column: 2 /  span 1;
		grid-row: 1 / span 4 ;
	}
	#sellerSeller{
		grid-column: 1 / span 1 ;
		grid-row: 1 / span 1 ;
	}		
	#sellerLocation{
		grid-column: 1 /  span 1;
		grid-row: 2 / span 1 ;				
	}			
	#sellerContact{
		grid-column: 1 / span 1 ;
		grid-row: 3 / span 1 ;
	}					
	#sellerDescription{
		grid-column: 1 / span 1 ;
		grid-row: 4 / span 1 ;			
	}			


	#sellerLocation, #sellerSeller, #sellerContact, #sellerDescription{
	  background-color: red;
	  background-color: var(--col-semi-transparent);/**/

	  padding-left:.5em;
	  padding-right:.5em;
	}

 #sellerViewer{
 	background-color: var(--col-semi-transparent);
 		   	display:flex;
	  	  	justify-content:  center;
	  align-items: center;
		z-index: 2;/**/	
 }


	#sellerPic{
			position:relative;
			/*display:none;
			height: auto;*/
		/*	max-width:500px;
			max-height:500px;
			margin-left:auto;
			margin-right:auto;*/

			width:240px; /*note needed as a failsafe - // must match in js 'initialize sellerPic' also*/
			height:240px;/*note needed as a failsafe  // must match in js 'initialize sellerPic' also */

			left:0px;
			/*clip-path: inset(0px 0px 0px 0%);
			transition: all 3s; */
			overflow:hidden;
			/*float:right;
			cursor:zoom-in;*/	
	}


 #sellerDescription{
 	padding: 0px .5em .5em .5em;
 }




	@media screen and  (max-width: 600px){	
			#sellerSection{
				display:block;
			}	
	}


.whiteSpace3{
	display:block;
	height: 15px;
	background-color: clear
}


/*
#sellerItems{
  background-color: var(--col-semi-transparent); 
  background-color: white;
  padding-left:.5em;
  padding-right:.5em;
  color:var(--col-first);
  color:grey;
  display:block;
  position:relative;
  overflow:hidden;
} 
*/

/*--------------------------------------------------------Seller Items header-----------------------------------------------------------------------*/
#sellerItems{

	display:grid;
	grid-gap:0px;
	padding:0;
	grid-template-columns: 200px 1fr auto auto  ;
	grid-template-rows:  1fr ;
	
	/*position: relative;*/
	background-color: var(--col-semi-transparent);
	background-color: white;
	width:100%;

  height:44px;
}

	#itemsFound{
		padding-top:.8em;
		padding-left:.5em;
		color:grey;
	}

	#itemsForSale{
		padding-top:.8em;
		padding-left:.5em;
		color:grey;
	}	

	#itemsForSale{
		grid-column: 1 /  span 1;
		grid-row: 1 / span 1 ;
		/*white-space: nowrap;*/
	}
	#sellerOrderBy{
		grid-column: 2 / span 1 ;
		grid-row: 1 / span 1 ;
	}		
	#addNewItem{
		grid-column: 3 / span 1 ;
		grid-row: 1 / span 1 ;
	}	
	#editProfile{
		grid-column: 4 / span 1 ;
		grid-row: 1 / span 1 ;
	}		






select{
	font:inherit;
	margin-top:1.15em;
	/*background-color: var(--col-third);
	color:white;*/
}	
		

.sellerButtons{
	display:none;
	display:inline-block;
	
	float:left;
	margin: var(--inner-margin); 
	margin-right:0em; 


	float:right;
	margin: var(--inner-margin); 
	margin-left:0em; 

     /*  margin-top: calc(  ((var(--header-height ) - 38px ) / 2        ) ) ;*/
	border:0px solid var(--col-btn-border);
	border-radius: var(--rad-radius);
	color:var(--col-btn-text);
	/* internal */
	padding:.5em;
	text-align: center;
	text-decoration: none;	
	font-size:100%;
	font-family:inherit;/*seems we need to insist the form inputs be a font style*/
	line-height:inherit;/*seems we need to insist the form inputs be a font style*/	 
	cursor:pointer;
}

.right{
	float:right;
}
.left{
	float:left;
}
.none{
	float:none;
}
.inline{
	display:inline;
}



		#addNewItem2{
			display:none;
		}	
		#editProfile2{
			display:none;
		}		
		.white{
			position: relative;
			overflow:hidden;
			
			
background-color:grey;
			
			background-color: white;
background-color: var(--col-semi-transparent );
background-color: rgb(218,218,218);
background-color: hsl(0,0%,99%);


}


#moreControls{
	display:inline-block;
	font-size: inherit; 
	/*border: 0px solid grey;*/
	padding:3px;
	position:relative;
	padding-top:0px;
	bottom:1px;
}


	@media screen and  (max-width: 700px){	

		#addNewItem{
			display:none;
		}	
		#editProfile{
			display:none;
		}			
		#addNewItem2{
			display:block;
		}	
		#editProfile2{
			display:block;
			/*float:right;*/
		}				

				

	}
	@media screen and  (max-width: 500px){	
		#sellerItems{
			grid-template-columns: auto 1fr auto auto  ;
		}			

		#sellerOrderBy{
			grid-column: 4 / span 1 ;
			grid-row: 1 / span 1 ;
			float:right;
			margin-right: var(--inner-margin); /* */
		}		
				

	}



/*     LEAVE FOR SEARCH PAGE TESTING

		#addNewItem{
			display:none;
		}	
		#editProfile{
			display:none;
		}			
		#addNewItem2{
			display:none;
		}	
		#editProfile2{
			display:none;
			
		}				
*/











/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------Random Cards SECTION-----------------------------------------------------------------------*/

.tint{
	position:absolute;
	width:100%;
	height:100%;
	z-index: 4;
}
.tintRed{
	background-color: hsla(340,100%,50%,.1);
}
.tintBlue{
	background-color: hsla(200,100%,50%,.1);
}
.tintGreen{
	background-color: hsla(130,100%,50%,.2);
}
.tintGrey{
	background-color: hsla(130,0%,0%,0.05);
}

.cardSearchesGrid { 
  display: grid;
  grid-template-columns:  1fr 1fr  1fr;
  grid-gap: 0px;
  /*align-items: stretch;*/
  width:var(--margin);
  margin:auto;
  background-color: clear;
  width: 90%;
  width:var(--margin);
  max-width: 1000px;
  }

 @media screen and  (max-width: 600px){	
/*
.cardSearchesGrid { 
  grid-template-columns:   1fr;

  }
*/
 }


.cardGrid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  grid-gap: 1vw;
  /*grid-column-gap: 1vw;*/
  align-items: stretch;
  width:var(--margin);
  margin:auto;
  background-color: clear;
  max-width: 1000px;
  }


.cardGrid > article , .cardSearchesGrid > article {
  border: 1px solid var(--col-faint-border);
  border: 0px solid var(--col-faint-border);
  /*box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);*/
  position:relative;
  background-color: var(--col-semi-transparent);


}

 @media screen and  (max-width: 600px){
 	/*
   .cardSearchesGrid > article{
     margin-bottom: 50px;
   }
*/
 }
/*.cardGrid > article img {
  max-width: 100%;
  position:relative;
  width: auto;
  height: 170px;
  left:20px;
  z-index: 1;
  overflow: hidden
}*/

 .cardViewer{
 	background-color: var(--col-semi-transparent);
 		   	display:flex;
	  	  	justify-content:  center;
	  align-items: center;
		z-index: 2;/**/	
 }

  .cardSearchesViewer{
 	background-color: var(--col-semi-transparent);
 		background-color: clear;
 		   	display:flex;
	  	  	justify-content:  center;
	  align-items: center;
		z-index: 2;/**/	
		height:100%;
	  position: relative;
 }



	.cardPic{
			position:relative;
			/*display:none;
			height: auto;*/
		/*	max-width:500px;
			max-height:500px;
			margin-left:auto;
			margin-right:auto;*/

			/*width:auto; note needed as a failsafe - // must match in js 'initialize sellerPic' also*/
			height:200px;/*note needed as a failsafe  // must match in js 'initialize sellerPic' also */

			/*left:0px;
			clip-path: inset(0px 0px 0px 0%);
			transition: all 3s; */
			overflow:hidden;
			/*float:right;
			cursor:zoom-in;	
			z-index: 0;*/
	}

.cardSearchesPic{
	height:auto;/*note needed as a failsafe  // must match in js 'initialize sellerPic' also */
	overflow:hidden;
	max-width: 100%;
}	

.cardGrid > article a , .cardSearchesGrid > article a {
  color: inherit;
}
.cardGrid > article .text, .cardSearchesGrid > article .text {
  padding: 0 20px 20px;
}
.cardSearchesGridText {
 text-align: center; 
 background-color: hsla(0,0%,95%,1);
 background-color: var(--col-semi-transparent);
 color: hsla(0,0%,80%,1);
  color:black;
 font-weight: normal;
padding:.3em;
 /*letter-spacing: .5px;
 border-right: 1px hsla(0,0%,90%,1) solid;
border-left: 1px hsla(0,0%,90%,1) solid;*/
margin-left:  7px;
margin-right:  8px;
/*border-radius: 0px 0px 50px 50px;*/
   
}

.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  margin-top:20px;
  }












































.row:after{
   content:"";
   display:table;
   clear:both;
}








#footerStart{
	display: block;
	/*height:30px;*/
	background-color: var(--col-first);

	  width:var(--margin);
  margin:auto;
  max-width: 1000px;


    background-color: clear;
    padding:20px;
   background-color: var(--col-second);

   color:white;

}


footer{
  width:var(--margin);
  margin:auto;
  max-width: 1000px;
      background-color: var(--col-second);
background-color: black; 
  background-color: var(--col-first);
   /*background-color:red;*/
  color:white; 
  font-weight: normal;
}


.footerGrid{
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
  align-items: stretch;

}

.footerGrid a {
  color:white;

}

.footerGrid > article {

  position:relative;
  background-color: clear;
  /*text-align: center;*/
  padding:20px;
  padding-right:0px;

}

.footerGrid > article > ul {
  list-style-type: none;
  line-height: 2em;
}

#copyright{
    background-color: clear;
    padding:20px;
   background-color: var(--col-second);

}

@media screen and  (max-width: 830px) and (min-width: 540px){	
	#emailAddressFooter{
		word-wrap:break-word;
	}
 
}



























.colFirst{
	background-color: var(--col-first);
}
.colSecond{
	background-color: var(--col-second);
}
.colThird{
	background-color: var(--col-third);
}

.colFirstText{
	color: var(--col-first);
}
.colSecondText{
	color: var(--col-second);
}
.colThirdText{
	color: var(--col-third);
}


.colFirst:hover{
	background-color: var(--col-first-hover);
}
.colSecond:hover{
	background-color: var(--col-second-hover);
}
.colThird:hover{
	background-color: var(--col-third-hover);
}


#searchButton:hover{
	background-color: var(--col-first-hover);
}


#searchButton:hover #searchText {
	border-color: var(--col-first-hover );
}


button:hover{
	background-color: var(--col-third-hover);
}





.typeOfScooter{
  width:100%;
	max-width: 300px;
}



#mainBuying{
	margin:auto;
	width: var(--margin);
	max-width: 1000px;
	font-size:inherit;
}


.sellingInfo, .buyingInfo{
	background-color: var(--col-semi-transparent);

	/*padding:1em;*/
	padding-left: 1em;
	padding-right: 0em;
	padding-top: : 1em;
	padding-bottom: : 1em;
	/*color:grey;*/
	width:100%;
}

.helpTitles{
	background-color: var(--col-second);
	padding-left:1em;
	color: white;
}

.fakeButtons{
	display:inline;
	float:none;
	margin:0px;
}

.helpSelling {
	
  -ms-transform: skewX( 7deg  ); /* IE 9 */
  -webkit-transform: skewX(7deg); /* Safari prior 9.0 */
  transform: skewX(7deg); /* Standard syntax */
  transform: skewY(-7deg);

  width:100%;
}



.buying li{
	margin:.5em;
	margin-right: 0em;
  margin-left: 17px;

  
}
/**/
.buyingList h4{
	margin-left:1em;
	margin-right:1em;
	margin-top:.7em;
	line-height: 1.5em;
	 
}

.buyingInfo h3{
	line-height: 1.5em;
}



.repairing li{
	margin:.5em;
  margin-left: 30px;
	margin-top:1.5em;
	line-height: 1.5em;
  
}



#contributionForm{
	margin-top:2em;
	margin-left:1em;
}


.contactTable{
	margin:15px;
	line-height: 2em;
}




#thing{
	position:relative;
	top:3px;
}












#colourPicker{
	position: fixed;
    display: none;
	left: 0;
	top: 200px;
	height:200px;
	width:700px;
	background-color: clear;
	z-index: 30;
}
.slider{
	width: 100%;
}
.setButton{
  background-color: var(--col-first);
  color:var(--col-btn-text );
 /* width:120px;*/

}









.formContainer{
	padding-top:1em;
  width:var(--margin);
  max-width: 500px;
  width:90%;
  margin:auto;

}


.formText{	
	/*float:left;*/
	width:  100%    ;
	max-width: 300px;
	margin-bottom: 1em;
	
	overflow:hidden;
	border:1px solid grey;
	border:1px solid var(--col-first);

	border-radius:  var(--rad-radius)  ;	
	background-color: white;
	
	/* internal */
	padding:6px;
	font-size:inherit;
    font-family:inherit;/*seems we need to insist the form inputs be a font style*/
    line-height:inherit;/*seems we need to insist the form inputs be a font style*/

}

.formTextLong{
	width:   100%    ;
	max-width: 500px;
	/*height:70px;*/
}

.formTextMedium{
	width:   100%    ;
	max-width: 500px;
	height:70px;
}

.formTextLarge{
	width:   100%    ;
	max-width: 500px;
	height:140px;
	height:170px;
	height:190px;
}
	



.latlon{
	display:inline-block;
	/*background-color: yellow;*/
	width:   100%    ;
	max-width: 110px;


}


.formTextSmall{
	width:   90%    ;
	max-width: 140px;
	
}


.latlonButton{
	position:relative;
	display:block;
	
	

}/**/


.grey{
	color: grey ;
}














.visitorLatLon{


	/*background-color: white;*/

 
  padding-left:var(--inner-margin);
   padding-top:var(--inner-margin);
   padding-bottom: var(--inner-margin);
   min-width: 280px;
   margin-bottom: 15px;

}

#visitorLat , #visitorLon {
	display:inline-block;

	width:   100%    ;
	max-width: 91px;
	
	margin-right:5px;

/*margin-bottom:30px;
  background-color: yellow;*/
}

	#visitorLat{
		/*margin-left:var(--inner-margin);*/
	}

	#visitorLon{

	}

	.visitorText{
	/*float:left;*/

	margin-bottom: 0em;
	
	border:1px solid var(--col-first);/**/
	border:1px solid hsl(0,0%,70%);/**/
	
	background-color: white;
	


	}

		#visitorLatlonButton{
		float: none;
		margin-left: 0px;
	}

	.checkbox{
		font-size: inherit;

	}