/**

** OUTLINE **

a] THEME
b] CSS3 EFFECTS
	1] Keyframes (Fire Glow)
	2] Keyframes (Fire embers and smoke)
c] MEDIA QUERIES
	1] iPad/Tablet background image
	2] iPad/Tablet fire glow @ Exactly 1024px
	3] iPad/Tablet Portrait (768px)
	4] Smartphone (320x480)
	
**/

/* -------------------------------------------------------- */
/* - THEME ------------------------------------------------ */
/* -------------------------------------------------------- */
.logo img {
  position: relative;
  left: -80px;
}

html {
	background: #000 url('/sites/trial.turbine.com/contentpack/LOTROBackgrounds/background9.jpg') top center no-repeat;
}

aside {
	background: #77787b; /* Old browsers */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzc3ODdiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjYTJhNmIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDclIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjYTJhNmIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc3Nzg3YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(45deg,  #77787b 0%, #a2a6b3 30%, #e0e0e0 47%, #e0e0e0 53%, #a2a6b3 70%, #77787b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#77787b), color-stop(30%,#a2a6b3), color-stop(47%,#e0e0e0), color-stop(53%,#e0e0e0), color-stop(70%,#a2a6b3), color-stop(100%,#77787b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  #77787b 0%,#a2a6b3 30%,#e0e0e0 47%,#e0e0e0 53%,#a2a6b3 70%,#77787b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  #77787b 0%,#a2a6b3 30%,#e0e0e0 47%,#e0e0e0 53%,#a2a6b3 70%,#77787b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  #77787b 0%,#a2a6b3 30%,#e0e0e0 47%,#e0e0e0 53%,#a2a6b3 70%,#77787b 100%); /* IE10+ */
	background: linear-gradient(45deg,  #77787b 0%,#a2a6b3 30%,#e0e0e0 47%,#e0e0e0 53%,#a2a6b3 70%,#77787b 100%); /* W3C */
	filter: none;
}

/* -------------------------------------------------------- */
/* - MEDIA QUERIES ---------------------------------------- */
/* -------------------------------------------------------- */

/* iPad/Tablet background image --------------------------- */
@media screen
and (max-width : 1024px) {
	html {
		background: url(../images/bg-tablet-1048x768.jpg) no-repeat 50% 0 #000;
	}

	#newEffect-1 {
		width: 100%;
		height: 100%;
		left: 0;
		top: 254px;
	}
}
/* ------------------------- *//* ------------------------- */
/* iPad/Tablet fire glow @ Exactly 1024px ----------------- */
@media screen 
and (width : 1024px) {
	#newEffect-1 {
		background: url(../images/background0-fire-glow-tablet.png) no-repeat 50% 0;
	}
	
	#newEffect-2 > div > span:nth-child(1) {left: 370px;}
	#newEffect-2 > div > span:nth-child(2) {left: 380px;}
	#newEffect-2 > div > span:nth-child(3) {left: 387px;}
	#newEffect-2 > div > span:nth-child(4) {left: 378px;}
	#newEffect-2 > div > span:nth-child(5) {left: 350px;}
		@-moz-keyframes 		moveIT5 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 330px;} 65% {left: 410px;} 100% { opacity: 0; top: -70px;} }
		@-webkit-keyframes 	moveIT5 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 330px;} 65% {left: 410px;} 100% { opacity: 0; top: -70px;} }
		@-ms-keyframes 			moveIT5 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 330px;} 65% {left: 410px;} 100% { opacity: 0; top: -70px;} }
		@-o-keyframes 			moveIT5 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 330px;} 65% {left: 410px;} 100% { opacity: 0; top: -70px;} }
		@keyframes 					moveIT5 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 330px;} 65% {left: 410px;} 100% { opacity: 0; top: -70px;} }
	#newEffect-2 > div > span:nth-child(6) {left: 355px;}
		@-moz-keyframes 		moveIT6 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 370px;} 65% {left: 400px;} 100% { opacity: 0; top: -100px;} }
		@-webkit-keyframes 	moveIT6 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 370px;} 65% {left: 400px;} 100% { opacity: 0; top: -100px;} }
		@-ms-keyframes 			moveIT6 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 370px;} 65% {left: 400px;} 100% { opacity: 0; top: -100px;} }
		@-o-keyframes 			moveIT6 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 370px;} 65% {left: 400px;} 100% { opacity: 0; top: -100px;} }
		@keyframes 					moveIT6 { 0% { opacity: 0;} 5% {opacity: 1; top: 50px;} 20% {left: 370px;} 65% {left: 400px;} 100% { opacity: 0; top: -100px;} }
	#newEffect-2 > div > span:nth-child(7) {left: 390px;}
	#newEffect-2 > div > span:nth-child(8) {left: 390px;}
}
/* ------------------------- *//* ------------------------- */
/* iPad/Tablet Portrait ----------------------------------- */
@media screen 
and (max-width : 768px) {
	#newEffect-1 {
		background: url(../images/background0-fire-glow-tablet.png) no-repeat 50% 0;
	}
	
	div[id^="newEffect"] {
		display: block;
	}
}


/* ------------------------- *//* ------------------------- */
/* Smartphone --------------------------------------------- */
@media screen 
and (max-width : 480px)
and (min-width : 320px) {
	html {
		background: url(../images/bg0-smartphone-320x480.jpg) no-repeat 50% 0 #000;
	}
}