/*
==================
loader 
==================
*/

#loader 
	{
	position: absolute;

	left: 50%;
	top: 50%;

	width: 120px;
	height: 120px;

	margin-top:-80px;
	margin-left:-60px;

	border: 16px solid #ffffff;
	border-radius: 50%;

	/* this is what spins */
	border-top: 16px solid #000000;


	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	z-index: 1;

	/* animate */
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	}

/*
==================
loader animation frames 
==================
*/

@-webkit-keyframes spin 
	{
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
	}

@keyframes spin 
	{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

/* Add animation to "page content" */
.animate-bottom 
	{
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 1s;
	animation-name: animatebottom;
	animation-duration: 1s
	}

@-webkit-keyframes animatebottom 
	{
	from { bottom:-100px; opacity:0 } 
	to { bottom:0px; opacity:1 }
	}

@keyframes animatebottom 
	{ 
	from{ bottom:-100px; opacity:0 } 
	to{ bottom:0; opacity:1 }
	}

/*
==================
lmy div 
==================
*/
/*
#myDiv 
	{
	display: none;
	text-align: center;
	}
*/

div#loaderImageWrap
	{
	position: absolute;

	left: 50%;
	top: 50%;

	width: 32px;
	height: 32px;

	margin-top:-18px;
	margin-left:-16px;

	background:red;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	}

div#loaderCopy
	{
	position: absolute;

	left: 50%;
	top: 50%;

	width: 200px;
	height: 32px;

	text-align:center;
	color:#3399ff;
	color:#000000;

	margin-top:-50px;
	margin-left:-100px;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

div#loaderCopy h1
	{
	font-size:30px;
	font-weight:bold;
	}