p, h1, h2, h3, h4, ul, li, body { margin: 0; padding: 0; } 

html { overflow: -moz-scrollbars-vertical !important; }	/*  this prevents (some) pages shifting to the left onload in safari and firefox  	html { min-height: 100%; margin-bottom: 1px; } 	 */
html { overflow-y: scroll;}								/* fix for opera and chrome  */ 

body	{
	font-size: 62.5% ;
 	background-color: #DBD9D9;    	/* original grey 989797  CFCCCC*/
}

a  img	{ border: none ; }								/*  this stops IE7 putting a blue link border around images  */
a		{ text-decoration:none ;}	


/*	----------------  home page     -----------------------------------------------------------  */

.wrapper	{
	margin: auto ;
	width: 950px ;
	padding-top: 3em; 
}

#intro_wrapper	{
	background-color: #D4D2D2 ;
	border: 1px  solid #C2C0C0 ;
	margin: 50px auto 0 auto ;
	width: 750px ;
	height: 260px ;
	overflow: auto ;
	
	border-radius: 15px;
	padding: 70px ;
	
	overflow: hidden ;				/* Hide scrollbars */
}


.index_description 	{
		text-align: center ;
		margin-top: 4em ;
}

.index_description_onhover	{
	display: none ;
	text-align: center ;
	margin-top: 4em ;
}	

.index_description_onhover p	{
	text-align: center ;
	font-family: 'Forum', cursive;
	font-size: 2.5em ;
	font-style: italic ;
	color: #3B3A3A ;
}


	
#intro_wrapper:hover	{						/* 	 index page  	colour change on hover */
	background-color: #E0DEDE  ;
	border: 1px solid #FFFCFC ;
}

#intro_wrapper .index_description_onhover {		 /* ref:  https://stackoverflow.com/questions/28510447/how-can-i-change-text-content-inside-div-when-hovered-over */
		display: none ; 
}
	
#intro_wrapper:hover   .index_description_onhover	{
	display: block ;	
}

#intro_wrapper:hover .index_description {
	display: none ;
	outline : 1px  solid #EBE8E8 ;			/*   outline prevents a shift of text on hover */
}



.center	{
	text-align: center ;
	margin: 0 auto ;
}



/*	----------------  collections page     -----------------------------------------------------------  */

/*	----------------  menu   ------- */
													
.title_bar	{						/*   encloses .name_float_right  OR  .menubar collections  */
	position: relative ;
	height: 90px ;

	border-top-right-radius:40px ; 
}


.name_float_right	{
	float: right ;
	padding-top: 2.2em ;
	padding-right: 7em ;
} 


.menubar_collections	{ 
	float: right ;
	padding: 1em  0  3.5em  2em ;
	margin: 0.5em  3em  0  0  ;
	
	border: 1px  solid  #C2C0C0 ;

	background-color: #D4D2D2 ;

	width: 430px ;
	height: 70px ;

	border-radius: 10px;
	
	font-family: 'Forum', cursive;
	font-size: 1.8em ;
	color: #3B3A3A  ;
	letter-spacing: .1em ;
}


.menubar_collections  ul	{
	display:inline-block; 
	list-style:none;
}
	
.menubar_collections  ul  li	{
	display: inline;
	height: 28px; 
	width: 120px ;
	float: left; 
	list-style: none;
	margin-left: 0px ;       		/* margin-left: 50px ; unbunches items */
	padding-left:1em ; 

	text-decoration: none;
}

.menubar_collections li a	{
	color:  #272727   ; 			/*  a dark grey */
	text-decoration: none ;
}

.menubar_collections li a:hover	{
	text-decoration: none;
	color:   #FFFCFC   ;			/*  white */
}

.menubar_collections a	{
	display: block; 				/*  width: 8em;  may or may not require this  */
	border-bottom: none;
/* 	padding: 5px;  */
	text-decoration: none;
	text-align: left;
 }


/*   --  all pages ----------------    */

h1	{
	font-family: 'Forum', cursive;
	font-size: 4em ;
		
	color: #615F5F ;
	letter-spacing: .15em ;
}
	

h3	{									/* h3 is index page */
	font-family: 'Forum', cursive;

	font-size: 2em ;
	color: #3B3A3A  ;
	letter-spacing: .1em ;
}

/*    -------   heading  for all image collections pages   -------------  */	

	
h5	{
	float: left ;
	padding-top: 3em ;
	padding-left: 6em ;
	font-family: 'Forum', cursive;
}
	
	
h5 a	{
	font-family: 'Forum', cursive;
	font-size: 2em ;
		color: #3B3A3A ;
	letter-spacing: .1em ;
	text-decoration: none;
}
h5 a:hover	{
	text-decoration: none;
	color: #FFFCFC ;
}


/*  hr  reference  Gradient color1 - color2 - color1    http://css-tricks.com/examples/hrs/     */ 
hr	{ 
	clear: both ;
	border: 0;  
	height: 1px; 
	background: #333;
	background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
	background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); 
	background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); 
	background-image: -o-linear-gradient(left, #ccc, #333, #ccc); 
}	
	
a	h1:hover	{
	text-decoration: none;
	color: #FFFCFC ;			/* white */
}
	


/*    ---------------   collections page      	overflow: auto ;    padding:  0em 2.2em 2em 2.2em ;	   -----------------------------------------------------------  */	


.collections_wrapper	{
	background-color:  #D4D2D2 ;
	margin: 30px auto 0px auto ;
	
	width: 850px ;
	height: 700px ;
	
	border-radius: 15px;
}

.connect	{
		border: 1px solid #FFFCFC ;
}


figure	{
	float: left ;
	padding: 0px ;
}

figcaption {
	display: block ;
	
	font-family: 'Forum', cursive;font-style: italic;
	
	text-align: center;
	font-size: 1.6em ;
	letter-spacing: .1em ;
	
	color: #262525;
	
	line-height: 120% ;
		
	padding-top: 4px;
}


.inrows	{							/*  keeps elements in a row  */
	display: flex;
	justify-content: space-evenly;
}


.display_box	{
	margin: 30px auto 50px auto ;
	width: 830px ;
	height: 100% ;

	border: 1px solid grey ;
	 
	border-radius: 10px;
}


.first-word	 p {
	font-family: 'Forum', cursive;
	font-size: 2.5em ;
	color: #3d3d3d ;
	text-align: center ;
	
	padding-top: 15px ;
}


.second-word	{
	font-family: 'Forum', cursive;
	font-size: 1.8em ;
	color: #3d3d3d ;
	
	margin: 20px 0px 30px 40px ; 
}


.spacer	{
	margin-top: 12px ;
	clear: both ;
}


/*	----------------  contact   --------------------------------------------------------  
#your_name, #your_email, #your_message	{
	float:right ;
	margin-right: 8em ;
	background-color:  #d9d9d9 ;
	display: block ;
	}
#send_button	{
	position: relative ; 
	margin: 12em 0em 0 0em ;
	display: block ;
	}

*/	



* {
  box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}



/* Style the container/contact section */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row: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) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}






/*	----------------   Biog  -----------------------------------------------------------  */	
.biog_text	{
	position: relative ;
	clear: both ;
	
	font-family: 'Forum', cursive;
	font-size: 1.8em ;
	line-height: 115% ;
	color: #212020  ;
}
	
.biog_text p	{
		padding: 1em  1.5em  0  1.5em ;
		text-align: justify ;
}
	
.biog_text	img	{
	float: right ;
	padding: 1em  1em 1em 2em ;
}