#tail_unit
/*	Encloses the entire tab feature	*/
{
	bottom: 0;
	display: none;
	position: absolute;
	width: 100%;
	z-index: 200;
}

/**********************************
***        MEDIA < 760		***
**********************************/

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

	#tail_unit
	{
		display: block;
	}
	
	body #tail_unit
	{
		position: fixed;
	}

	label#tail_button
	/*	Permanently displayed at the foot of the display	*/
	{
		background: #eee;
		background: linear-gradient(#ccc, #fff);
		border-top: 1px solid #aaa;
		border-left: 1px solid #999;
		border-right: 1px solid #888;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		box-shadow: 3px 0 6px rgba(0,0,0,0.4);
		cursor: pointer;
		display: block;
		height: 40px;
		margin: 0 auto;
		width: 80px;
	}

	label#tail_button:before
	/*	The little up arrow on the button	*/
	{
		border: 4px solid #fff; /* thickness of arrow */
		border-color: transparent #00ACC7 #00ACC7 transparent;
		content: "";
		float: right;
		height: 8px; /* size of arrow */
		position: relative;
		right: 32px;
		top: 16px;
		width: 8px; /* size of arrow */
		z-index: 210;
 
		transition: 1s;
		-webkit-transition: 1s;

		transform: rotate(225deg); 
		-webkit-transform: rotate(225deg); 
		-ms-transform: rotate(225deg);
	}

	#tail_checkbox
	/*	The checkbox control that is not shown	*/
	{
		left: -9999px;
		display: none;
		position: absolute;
	}

	#tail_checkbox:checked ~ label:before
	/*	When ticked turn the arrow upside down */
	{
		top: 9px;

		transform: rotate(45deg); 
		-webkit-transform: rotate(45deg); 
		-ms-transform: rotate(45deg);
	}

	#tail_checkbox:checked ~ div
	/*	When ticked reveal the tail section	*/
	{
		max-height: 400px;
	}

	#tail_section
	/*	The phone and email buttons	*/
	{
		background: #ddd;
		border-top: 1px solid #ddd;
		height: 80px;
		max-height: 0;

		transition: all 1s ease-in-out;
		-webkit-transition: all 1s ease-in-out;
	}

	#tail_section p
	{
		background: linear-gradient(#fff, #ccc);
		height: 100%;
	}

	#tail_section a
	{
		background: url(../files/1/tailtab_phone.png) no-repeat center center;
		border-left: 2px solid #ccc;
		box-sizing: border-box;
		display: block;
		float: left;
		height: 100%;
		width: 50%;
	}

	#tail_section a ~ a
	{
		background-image: url(../files/1/tailtab_email.png);
		border-right: 2px solid #ccc;
	}

}