/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=- STYLES BY IAN BESLER =-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* -=-=-=-=-=-=-=-
-=-=-= HTML -=-=-=
=-=-=-=-=-=-=-= */

	html {
		width: 100%;
		height: 100%;
	}

/* -=-=-=-=-=-=-=-
-=-=-= BODY -=-=-=
=-=-=-=-=-=-=-= */

	body {
		width: 100%;
		height: 500%;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= HTML5 SEMANTIC TAGS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	section {
		position: static;
		text-align: center;
		float: left;
		width: 25%;
		height: 20%;
	}

/* -=-=-=-=-=-=-=-
-=-=-= DIVS -=-=-=
=-=-=-=-=-=-=-= */

	div {
		width: 100px;
		height: 100px;
	}

		div#static {
			position: static;
		}

		div#relative {
			position: relative;
		}

			div#relative.one {
				left: 10px;
			}

			div#relative.two {
				left: 20px;
			}

			div#relative.three {
				left: 30px;
			}

			div#relative.four {
				left: 40px;
			}

			div#relative.five {
				left: 50px;
			}

			div#relative.six {
				left: 60px;
			}

		div#fixed {
			position: fixed;
		}

			div#fixed.one {
				top: 28px;
			}
			
			div#fixed.two {
				top: 148px;
			}
			
			div#fixed.three {
				top: 268px;
			}
			
			div#fixed.four {
				top: 388px;
			}
			
			div#fixed.five {
				top: 508px;
			}
			
			div#fixed.six {
				top: 627px;
			}

		div#absolute {
			position: absolute;
		}

			div#absolute.one {
				top: 28px;
			}
			
			div#absolute.two {
				top: 500px;
			}
			
			div#absolute.three {
				top: 1000px;
			}
			
			div#absolute.four {
				top: 1500px;
			}
			
			div#absolute.five {
				top: 2000px;
			}
			
			div#absolute.six {
				top: 2500px;
			}

/* -=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= COLOR CLASSES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=- */

	.red {
		background-color: red;
	}

	.orange {
		background-color: orange;
	}

	.yellow {
		background-color: yellow;
	}

	.green {
		background-color: green;
	}

	.blue {
		background-color: blue;
	}

	.purple {
		background-color: purple;
	}