.leftList
{
    counter-reset: list-counter;
    list-style: none;
    float:left;
}

.leftList li
{
	margin: 1.5em;    
	font-size:20px;
	font-family: "comic sans MS";
}

.leftList li:hover
{
    background: yellow;
}


.circle{
    counter-reset: list-counter;
    list-style: none;
    float:left;
}
.circle li
{        
	margin: 0.5em;
}
.circle li:before{


    content: counter(list-counter);
    counter-increment: list-counter;
    width: 1em;
    height: 1em;
    padding: .25em 0.25em 0.25em 0.25em;
    margin-right: 1em;
    border-radius: 50%; 	
    border: 2px solid #ccc;
    background: #000;

    color: #fff;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    display: inline-block;

    
}

/*
.circle li:hover
{
    background: pink;
}
*/


#messageBar
{
	margin: 0;
	padding: 0;
	clear: both;
	text-align: left;
	color: yellow;
	font-family: "comic sans MS";
	font-size:20px;
	outline: 2px double gray;
	background-color: red;
	width: calc(100% - 2px);
	overflow: auto;
	margin-bottom: 2px;
	display: none;
}

#mediaMenu
{
	display:none;
	width:20%;
	float:left";
}

#statusDiv
{
	width:100%;
	float:center;
	text-align:center;
}

#statusBar
{
	margin: 0;
	padding: 0;
	clear: both;
	text-align: left;
	font-family: "comic sans MS";
	outline: 2px double gray;
	background-color: pink;
	width: calc(100% - 2px);
	overflow: auto;
	margin-bottom: 2px;
}


#left
{
	outline:  2px double gray;
	float: left;
	width: 20%;
	margin-top:0;
	padding-top:0;
	background-color: #EEEEEE;
	overflow: auto;
}


#center
{
	float: left;
	width: 80%;
	margin:0;
	padding:0;
}

#right
{
	outline: 1px double gray;
	float: left;
	width: 20%;
	height: 40em;
	overflow: auto;
	background-color: #EEEEEE;
}

#footer
{
	clear: both;
	text-align: center;
	font-family: "Comic Sans MS";
	font-size: 8pt;
}
#footer p
{
	margin: 0;
	padding: 0;
}


.arial
{
	font-family: Arial;
	font-size: 1em;
}


#overlay 
{
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
	cursor: pointer;
}

#overlayText
{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

@media only screen and (max-width: 500px) 
{
	#mediaMenu
	{
		display:inline-block;
		float:left;
		clear: none;
	}

	#statusDiv
	{
		display:inline-block;
	 	float:right;
		width: 80%;
		clear: none;
		text-align:left;
	}

	#messageBar
	{
		margin: 0;
		padding: 0;
		clear: both;
		text-align: left;
		color: yellow;
		font-family: "comic sans MS";
		font-size:20px;
		outline: 1px double gray;
		background-color: red;
		width: calc(100% - 2px);
		overflow: auto;
		margin-bottom: 2px;
		margin-left: 1px;
		display:none;
	}


	#statusBar
	{
		margin: 0;
		padding: 0;
		clear: none;		
		text-align: left;
		font-family: "comic sans MS";
		outline: 1px double gray;
		width: calc(100% - 2px);
		margin-left: 1px;
		background-color: pink;
		overflow: hidden;
	}


	#center
	{
	   /* outline: 1px double gray;*/
		float: left;
		width: 100%;
		margin:0;
		overflow: hidden;
	}


	#left
	{
		outline:  1px double gray;
		float: left;
		width: 70%;
		background-color: #EEEEEE;
		height: 50em;
		overflow: auto;
		display:none;
  		-webkit-animation-name: animateLeft;
  		-webkit-animation-duration: 0.5s;
  		animation-name: animateLeft;
  		animation-duration: 0.5s;
		z-index:1;
		position:fixed;
	}

	/* Add Animation */
	@-webkit-keyframes animateLeft 
	{
  		from {left:-300px; opacity:0} 
  		to {left:0; opacity:1}
	}

	@keyframes animateLeft 
	{
  		from {left:-300px; opacity:0}
	  	to {left:0; opacity:1}
	}

	@-webkit-keyframes animateLeftReverse 
	{

  		from {left:0; opacity:1}
  		to {left:-300px; opacity:0} 
	}

	@keyframes animateLeftReverse 
	{
	  	from {left:0; opacity:1}
  		to {left:-300px; opacity:0}
	}

}