/* START font styling  */
body 
	{
	 	font-family: Arial, Helvetica, sans-serif;
	}

.boldtext
	{
		font-weight: bold;
	}	

.texttab /*  create a spacing tab to use in lists */
	{ 
       display:inline-block; 
       margin-left: 40px; 
	}
/* END font styling */


/*  full screen styling --- greater than 600px */
.column1 
	{
		float: left;
		background-color: black;
		width:30%;	height:100%;	
		color:white;
		background-image: url("../CVimg/me.gif"); /*original image from https://media.giphy.com/media/pUuGBba2BUiL6/giphy.gif, resized at http://resizeimage.net/ to new aspect ratio (halved width and file size) */
		background-size: cover;
	}
.column2 
	{
		float: left;
		background-color: white;
		width:70%;	height:110vh;
		color:grey;	
	}



/* START left Column styling      content =  Name, Profile image, Contact details */
#photoID
	{
		border-radius: 100%;
		height:auto; 
		width:100%;
		box-shadow: 1px 1px 2px lightblue, 0 0 25px lightblue, 0 0 5px darkblue;
	}
#photoIDcontainer
	{
		padding:20% 20% 10% 20%;
	}	
#myname 
	{
		font-size: 37px;
		text-align: center;
		text-shadow: 5px 5px 10px #2eb9ce;
	}

.jobtitle
	{
		font-size: 18px;
		text-align: center;
		text-shadow: 0px 0px 5px #2eb9ce;
		color:white;
	}	
#mycontactdetails 
	{
		padding: 0% 10% 5% 10%;
		font-size: 16px;
	}
/* END left Column styling       */





/* START right Column styling     content = Short description, Education, Exhibitions etc */

.rightcolumnheading
	{
		color:#2eb9ce;
		background-color: white;
		padding: 5% 5% 0% 5%;
		border-bottom:3px solid #2eb9ce;
	}
.rightcolumntext
	{
		padding: 0% 5% 0% 5%;
	}


/* -------------------------------------------------------------------------------------------------------------------------
START collapsable content on checked input and on hover 
	text content in the right hand column is hidden on page load.
	on mouse hover OR clicking the heading text, content becomes visible.
---------------------------------------------------------------------------------------------------------------------------*/


input 
	{
  		position: absolute;
  		opacity: 0;
  		z-index: -1;
	}

label 
	{
  		position: relative;
  		display: block;
  		background: white;
		color:#2eb9ce;
		background-color: white;
		padding: 5% 5% 0% 5%;
		border-bottom:3px solid #2eb9ce;
  		cursor: pointer;  /* cursor pointer changed to notify user of clickable object */
	}

/* accordian content triggered on hover of text/input and tabs content  */ 
input:checked ~ .tab-content, input:hover  ~ .tab-content , .tab-content:hover
	{
  		max-height: 100em;
	}

.tab 
	{
  		position: relative;
  		margin-bottom: 1px;
  		width: 100%;
  		color: grey;
  		overflow: hidden;
	}

.tab-content 
	{
  		max-height: 0;
  		overflow: hidden;
  		background: white;
  		padding: 0% 5% 0% 5%;
  		/* the transition speed is intentionally delayed to .7s, 
  		the delayed speed is chosen in relation to the conceptual exploration within my artistic practice 
  		evoking a response from a feature which is often overlooked  */
  		-webkit-transition: max-height .7s;
  		-o-transition: max-height .7s;
  		transition: max-height .7s;
	}






	/* on hoving an item in the links, an image is shown   */
	#facebooklinkimg
		{
			height:0px;
			overflow:hidden;	
		}
	#facebooklink:hover ~  #facebooklinkimg , #facebooklink:hover , #facebooklinkimg:hover
		{
			color:blue;
			height:auto;
			width:100%;
		}

	#instagramlinkimg
		{
			height:0px;
			overflow:hidden;			
		}

	#instagramlink:hover ~ #instagramlinkimg , #instagramlink:hover , #instagramlinkimg:hover
		{
			color:blue;
			height:auto;
			width:100%;
		}	

	#parklinkimg
		{
			height:0px;
			overflow:hidden;
		}
/*  the links images are hidden by default, on hover they are set to full size. The as long as the 
text or image are hovered they remain visible */
	#parklink:hover ~ #parklinkimg , #parklink:hover , #parklinkimg:hover
		{ 
			color:blue;
			height:auto;
			width:100%;
		}		

	.favlinks
		{
			color:#2eb9ce;
			background-color: white;
			text-decoration: none;
			border-bottom:3px solid #2eb9ce;
		}
	.favlinks:hover
		{
			color:grey;
		}

	.linkphoto
		{
			height:auto;
			width:50%;
		}		
/* END collapsable content on checked input and on hover ----------------------------------------------------------------*/
/* END right Column styling        */





/* START styling for mobile OR less than 600px */
@media screen and (max-width: 600px) {
.column1 
	{
		float: none;
		border: 1px solid black;
		background-color: black;
		width:100%;	height:auto;
	}
.column2 
	{
		float: none;
		border: 1px solid black;
		background-color: white;
		width:100%;	height:100vh;
	}
/* set accordian collapsable text to visible by default */

input ~ .tab-content 
	{
  		max-height: 100em;
	}	

.linkphoto
	{
		height:auto;
		width:100%;
	}			
}
/* END styling for mobile OR less than 600px */