/* a carousell for the image gallery example 
*/
 #imageGalleryExample
{
height:40%;
width:60%; 


	 margin-left: auto;
    margin-right: auto;
    
  /*   border: 1px;
 border-style:solid;
 border-color:#66666; */
 
 

	
}

 #imageGalleryExample .carousel-inner
{
	text-align: center;
	height:100%;
	 border:3px solid black;
}

 #imageGalleryExample .item
{
	text-align: center;
	height:100%;
}
	
 #imageGalleryExample img
{
	
	height:100%;
	 margin-left: auto;
    margin-right: auto;
	
	}

/* putting content inside arrows*/
 #imageGalleryExample .carousel-inner
{
	width:85%; 
	 margin-left: auto;
    margin-right: auto;
	}
	
/* removing color gradient from arrows*/
 #imageGalleryExample  .carousel-control
{
	background-image:none;
	width:5%;
	filter:none;
	


	
 }

  #imageGalleryExample .glyphicon
  {
  	color:black;
  }
 #imageGalleryExample .col-md-4
 {
 	
 	padding:0px;
 }
 
 
.ImageTableImage
 {
 /*	height:150px;  */
 
 }
 
 .ImageFormImage
 {
 	height:250px;
 
 }

 #imageGalleryExample .imageGalleryChildContainerDiv
{
	width:100%;
	height:100%;
	background-color:orange;
	}
	
 #imageGalleryExample .imageGalleryParentContainerDiv
{
	width:100%;
	height:100%;
	
	}
	
#imageGalleryExample .imageGalleryChildContainerLink
{

	background-color:white;
	  opacity: 0.8;
	padding:5px;
	
	position:relative;
	top:-150px;
	top:-30px;
	}
	
/* in this case there is no image so we use a generic arrow and have no background colour */
#imageGalleryExample .imageGalleryChildContainerLink2
{

	color:white;
	padding:5px;
	
	position:relative;
	top:-150px;
	top:-30px;
	}
	
 #imageGalleryExample .imageGalleryParentContainerLink
{
	background-color:white;
	   opacity: 0.8;
	padding:5px;
	
	position:relative;
	top:-150px;
	top:-30px;
	}

/* in this case there is no image so we use a generic arrow and have no background colour */
 #imageGalleryExample .imageGalleryParentContainerLink2
{
	color:white;
	padding:5px;
	
	position:relative;
	top:-150px;
	top:-30px;
	}
	
	
/*****************************************************************
*************************************************
    a non carousel image gallery
 ***************************************/	
#myExampleNonCaruselImageGallery .imageGalleryImageDiv
{
	/*height:200px;
	width:250px; 
	border: solid black 3px; */
	float:left;
	}	
	
	
#myExampleNonCaruselImageGallery .imageGalleryImageDiv img
{
	
	width:200px;
	}
	
#myExampleNonCaruselImageGallery .panel
{
	padding:10px;
}	


.imageGalleryImage
{
	width:75px;
	height:75px;

}

.imageGalleryImage2
{
	
	/*width:100%;
	height:100%;  */

}

.imageGalleryCell
{

	text-align: center;
	/*background-color:#EFECEA; */
	
	width:10%; /* remember to maintain the height /width ratio of the images*/
	height:15%;
}

/* image in a table cell should fill the cell.
This seems to work nicely with scaling/resizing*/
/*td img */
#imageGalleryImagesTable  td img
{
	width:100%;
	
}

#ImageGalleryAdminPageMainDiv  td img
{
	width:100%;
	
}

.carousel-inner
{
	width:40%;
	height:60%;

}