/*
	Inspirational Website
	GRC 275 - Project 3

	Name: Vy Tat
	Date: 12/05/2012
	Filename: main.css

*/


/* CSS reset */
	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;
	}

	html {
		height: 100%;
	}

/* Body Styles */

	body {
		background-color: #000;
		text-align: center;
		margin: 0px;
		padding: 0px;
	}

	img.background {
		width: 100%;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		position: fixed;
		z-index: 1;
		left: 0px;
		top: 0px;
	}

	img.background_2 {
		display: none;
	}

	img.background_3 {
		display: none;
	}

/* Navigatons Styles */

	nav#menu {
		position: relative;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		z-index: 2;
		font-family: 'Mouse Memoirs', sans-serif;
	}

	nav#menu ul {
		list-style: none;
	}

	nav#menu ul li {
		float: left;
		display: block;
		font-size: 1.6em;
		margin-right: 3%;
	}

	nav#menu ul li a, a:hover, a:focus {
		text-decoration: none;
		color: #fff;
		text-shadow: none;
		-webkit-transition: 500ms linear 0s;
		-moz-transition: 500ms linear 0s;
		-o-transition: 500ms linear 0s;
		transition: 500ms linear 0s;
		outline: 0 none;
	}

	nav#menu ul li a:hover, a:focus {
		color: #fff;
		text-shadow: -1px 1px 8px #00cc99, 1px -1px 8px #fff;
	}

	ul li ul {
	  padding: 0;
	  position: absolute;
	  top: 28px;
	  left: 0;
	  width: 100px;
	  margin-left: 300px;
	  -webkit-box-shadow: none;
	  -moz-box-shadow: none;
	  box-shadow: none;
	  display: none;
	  opacity: 0;
	  visibility: hidden;
	  -webkit-transiton: opacity 0.2s;
	  -moz-transition: opacity 0.2s;
	  -ms-transition: opacity 0.2s;
	  -o-transition: opacity 0.2s;
	  -transition: opacity 0.2s;
	}
	ul li ul li { 
	  background: #555; 
	  width: 110px;
	  padding-left: 5px;
	  padding-right: 5px;
	  display: block; 
	  color: #fff;
	  font-size: 1em !important;
	  text-shadow: 0 -1px 0 #000;
	}
	ul li ul li:hover { background: #666; }
	ul li:hover ul {
	  display: block;
	  opacity: 1;
	  visibility: visible;
	}

/* Header Styles */
	header {
		position: relative;
		width: 20%;
		margin-top: 4%;
		margin-left: 58%;
		z-index: 3;
	}

	header h1 {
		color: #fff;
		font-size: 4.2em;
		font-family: 'Mouse Memoirs', sans-serif;
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		-ms-transform: rotate(6deg);
		-o-transform: rotate(6deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

	header h1:hover {
		color: #fff;
		text-shadow: -1px 1px 8px #00cc66, 1px -1px 8px #fff;
		-webkit-transition: 500ms linear 0s;
		-moz-transition: 500ms linear 0s;
		-o-transition: 500ms linear 0s;
		transition: 500ms linear 0s;
		outline: 0 none;
	}


/* Sections Styles */

	section {
		position: relative;
		width: 31%;
		z-index: 4;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		margin-top: 10%;
		margin-left: 24%;
	}

	section h3 {
		color: #fff;
		font-weight: bold;
		font-size: 1.2em;
	}

	section p {
		color: #fff;
		font-size: .9em;
		margin-top: 10px;
		text-align: left;
	}


/* Footer Styles */
	
	footer {
		position: relative;
		z-index: 1;
		margin-top: 40%;
	}

	.copy_right {
		margin-top: 20px;
		text-align: center;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: .9em;
		color: rgba(255, 255, 255, 0.8);
	}


/* 1024px Screen Styles  */

	@media screen and (max-width: 1024px) {
			
		nav#menu ul li {
			font-size: 1.1em;
			margin-right: 3%;
		}

		nav#menu ul li a, a:hover, a:focus {
			text-decoration: none;
			color: rgba(0, 204, 204, 1);
		}

		nav#menu ul li a:hover, a:focus {
			color: #fff;
			text-shadow: -1px 1px 8px #fff, 1px -1px 8px rgba(0, 204, 204, 1);
		}

		header h1 {
			color: #00cccc;
			font-size: 3em;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
		}

		header h1:hover {
			color: #fff;
			text-shadow: -1px 1px 8px #fff, 1px -1px 8px #00cccc;
		}

		section {
			width: 30%;
			margin-top: 17%;
			margin-left: 10%;
		}
	
		ul li ul {
		  width: 70px;
		  margin-left: 180px;
		  margin-top: -8px;
		}


		footer {
			position: relative;
			z-index: 1;
			margin-top: 60%;
		}

		.copy_right {
			margin-top: 20px;
			text-align: center;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: .6em;
			color: #00cccc;
		}

		.copy_right:hover {
			color: #fff;
			text-shadow: -1px 1px 8px #fff, 1px -1px 8px #00cccc;
			-webkit-transition: 500ms linear 0s;
			-moz-transition: 500ms linear 0s;
			-o-transition: 500ms linear 0s;
			transition: 500ms linear 0s;
			outline: 0 none;
		}


	}



/* 800px Screen Styles */

	@media screen and (max-width: 800px) {
		nav#menu ul li {
			font-size: 1em;
			margin-right: 3%;
		}

		header {
			margin-left: 65%;
		}

		header h1 {
			color: #00cccc;
			font-size: 2.5em;
		}

		section {
			width: 30%;
			margin-top: 17%;
			margin-left: 22%;
		}

		.lb-album{
			width: 100px;
			margin: 0 auto;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			margin-top: -50px;
		}

		.lb-album li{
			margin: 5px;
		}

		.lb-album li > a{
			width: 60px;
			height: 60px;
			position: relative;
			padding: 5px;
		}
		.lb-album li > a span{
			position: absolute;
			width: 60px;
			height: 60px;
			font-size: 12px;
		}
	
		ul li ul {
		  width: 70px;
		  margin-left: 150px;
		  margin-top: -10px;
		}


		footer {
			position: relative;
			z-index: 1;
			margin-top: 63%;
		}

		.copy_right {
			margin-top: 20px;
			text-align: center;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: .6em;
			color: #00cccc;
		}

		.copy_right:hover {
			color: #fff;
			text-shadow: -1px 1px 8px #fff, 1px -1px 8px #00cccc;
			-webkit-transition: 500ms linear 0s;
			-moz-transition: 500ms linear 0s;
			-o-transition: 500ms linear 0s;
			transition: 500ms linear 0s;
			outline: 0 none;
		}
		
	}



	/* 600px Screen Styles */

	@media screen and (max-width: 600px) {
		nav#menu ul li {
			font-size: 1em;
			margin-top: 15%;
			margin-right: 3%;
		}

		header {
			margin-left: 64%; 
		}

		header h1 {
			color: #00cccc;
			font-size: 2em;
		}
	
		ul li ul {
		  width: 40px;
		  margin-left: 160px;
		  margin-top: 30px;
		}

		ul li ul li {
			width: 40px;
			margin-top: -5px;
		}


		footer {
			position: relative;
			z-index: 1;
			margin-top: 98%;
		}
		
	}



/* 480px Screen Styles */

	@media screen and (max-width: 480px) {
		nav#menu {
			margin-right: 2%;
		}
		
		nav#menu ul li {
			float: none;
			text-align: right;
			font-size: 1.2em;
			margin-top: 12%;
			line-height: .4em;
		}

		nav#menu ul li a {
			color: #000;
		}

		header {
			width: 150px;
			margin-left: 68%; 
			margin-top: 60%;
		}

		header h1 {
			color: #fff;
			font-size: 2em;
		}

		section {
			width: 35%;
			margin-top: -50%;
			margin-left: 35%;
		}

	
		ul li ul {
		  width: 90px;
		  margin-left: 92px;
		  margin-top: 80px;
		}

		ul li ul li {
			width: 65px;
		}


		footer {
			display: none;
		}

		img.background_2 {
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 1;
			left: 0px;
			top: 0px;
		}

		img.background_2 {
			display: inherit;
		}

		img.background {
			display: none;
		}
		
	}


/* 320px Screen Styles */

	@media screen and (max-width: 320px) {
		nav#menu {
			margin-right: 2%;
		}
		
		nav#menu ul li {
			float: none;
			text-align: right;
			font-size: 1em;
			margin-top: 12%;
			line-height: .4em;
		}

		nav#menu ul li a {
			color: #000;
		}

		header {
			width: 151px;
			margin-left: 50%; 
			margin-top: 90%;
		}

		header h1 {
			color: #fff;
			font-size: 2em;
		}

		section {
			width: 42%;
			margin-top: -100%;
			margin-left: 44%;
		}

	
		ul li ul {
		  width: 90px;
		  margin-left: 40px;
		  margin-top: 48px;
		}

		ul li ul li {
			width: 55px;
		}


		footer {
			display: none;
		}

		img.background_3 {
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 1;
			left: 0px;
			top: 0px;
		}

		img.background_2 {
			display: none;
		}

		img.background {
			display: none;
		}

		img.background_3 {
			display: inherit;
		}
		
	}