/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*OUR CSS*/
/*Lets make the html document grey and the font family Arial or helvetica neue or helvetica or a sans serif font*/
html {
	background: #dedede;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
/*this is the header of our document*/
header {
	background: #404040;  /* let's make the background dark grey */
	color: #FFF; /* let's make the font white */
	padding: 20px; /*let's add padding to the header. 20px all around */
	font-size:18px;  /* let's make the heading 18px */
	text-align: center; /* let's align the text centre */
	text-transform: uppercase; /*let's make it all uppercase */
	letter-spacing: 2px; /* let's add some letter spacing. Kern that up buttercup*/
}
/*this is the 'box' our ball will be bouncing in Let's make it 70px wide and 250px tall and let's make the background white and have it centred. Let's Position this container relative so that when we absolutely position the ball it will be relative to the container it is in. Otherwise if you state that your ball is top:50px and left:10px it will be relative to the nearest conainting element that is positioned relative or absolutely OR the document. In our case it would be the document.*/
.container {
	width: 70px; /* width of container */
	margin: 30px auto; /* let's make it 30px from the top of the document and then centred */
	height: 250px; /* let's make it 250px */
	background: #FFF; /* let's make the background white */
	position: relative; /* let's position this div relative so that we can make the ball absolutely positioned */
}

/* I have some heading and paragraph text in the ball, not necessary and we don't need it visually there so we can make it text indented off the page. Screen readers will be able to read this*/
.ball h2, .ball p {
	text-indent: -9999px;}
	
/*this is the ball*/
.ball {
	width:50px; /*50px wide*/
	height: 50px; /* 50px tall*/
	border-radius: 50px;  /*let's make the border radius 50px. This will happen on all angles and make the div look round*/
	-moz-border-radius: 50px; /*old mozilla browsers*/
	-webkit-border-radius: 50px;  /*old webkit browsers*/
	background: #4c84d4; /*let's make the ball blue*/
	position: absolute; /*We are positioning the ball absolutely. This is so that we can make it move within the container element*/
	top: 0; /*it's start position is at the top of the container div*/
	left: 10px; /*it's also 10px right of the left side of the container div*/
	animation:  ballbounce 2s; /*we are calling the ballbounce animation which we define below. We want it to run for 2 sceconds*/
	animation-timing-function: linear; /*we would like it to be liner*/
	animation-iteration-count: infinite; /*we want it to be infitine*/
	/*the following is the same as the 3 lines above however it caters for older webkit, mozilla and opera browsers*/
	-webkit-animation:  ballbounce 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;  
	-moz-animation:  ballbounce 2s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite; 
	-o-animation:  ballbounce 2s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite; 
}

/* this is the animation.*/
@keyframes ballbounce {
    0% { top: 0; } /*at 0 seconds we want the ball to be at the top of the container div*/
    50% { top:200px; } /*halfway through the animation we want it to be 200px from the top. This is because the container is 250px in height, the ball is 50px in height and we want the bottom of the ball to touch the bottom of the container*/
    100%{top:0%;} /*at the end of the animation we want the ball to return to the top*/
}
/*the following is the same as the keframe above but it caters for old webkit, mozilla and opera browsers*/
@-webkit-keyframes ballbounce {
    0% { top: 0; }
    50% { top:200px; }
    100%{top:0%;}
}
@-moz-keyframes ballbounce {
	0% { top: 0; }
    50% { top:200px; }
    100%{top:0%;}
}
@-o-keyframes ballbounce {
    0% { top: 0; }
    50% { top:200px; }
    100%{top:0%;}
}