html, body {
	width:100%;
	min-height:100%;
	background:black;
	text-align: center;
	color:#00acf5;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	padding: 0;
	margin: 0;
}

#logo {
  background-image: url(advocatesoflight-logo.png);
  position: absolute;
  left: 1em;
  top: 1em;
  width: 10em;
  height: 2em;
  background-repeat: no-repeat;
  background-size: contain;
}

p {
	color:grey;
	font-size: x-large;
}

#animation1, #animation2 {
  cursor: pointer;
}

button {
  /*background-color: rgb(0, 172, 245);*/
  border: none;
  border-radius: 3pt 0 0 3pt;
  padding: 6pt 10pt;
  color: white;
  margin: 5pt 7pt;
  font-size: larger;
  cursor: pointer;
  background-color: transparent;
  padding-right: 32pt;
/*  border-width: 2px 0 2px 2px;
  border-color: white;
  border-style: solid;
}

button:hover {
  border:none;*/
  background-image: url(wing.png);
  background-position: right;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

button.left {
	background-position: left;
	padding-left: 32pt;
	padding-right: 10pt;
	border-radius: 0 3pt 3pt 0;
}


button:hover {
	text-decoration: underline;
}

em {
	color:white;
}

#welcome h2 {
	font-style: italic;
}

h1 em, h2 em {
	font-style: normal;
}

footer {
	position: relative;
	margin-top:5em;
	left:1em;
	right:1em;
	bottom:1em;
	color:#444;
}

footer a {
	color:#444;
}

p {
  width: 60%;
  padding-left: 20%;
  padding-right: 20%;
}

/*#welcome {
  position:relative;
  top:64%;
}*/

#welcome {
	padding-top: 1em;
	padding-bottom: 5em;
}

#welcome ul, #welcome li {
	list-style: none;
	display:inline-block;
}

#welcome ul {
	margin: 0;
	padding: 0;
	width:60%;
}

#welcome li {
	width:50%;
}

#welcome .detail {
	color:grey;
	font-size: smaller;
}

#fire {
	background-image: url(fire1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 4%;
	top:10%;
	height: 45%;
	width: 100%;
	position: absolute;
	margin: 0 auto;
	opacity: 0;

}

#riftwrapper {
	position:relative;
	width:100%;
	height:40%;
	top:5%;
	/*background-color: #00acf5;*/
	background-image: url(map-background.gif);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 8%;
	overflow: hidden;
}

#prerift, #postrift {
	position: absolute;
	height:100%;
	background-color: black;
	width:10%;
	top:0;
}

#prerift {
	left:0;
}

#postrift {
	right:0;
}

/* fix for Safari blue line artefact below the rift */
#lowerrift {
	position:relative;
	width:100%;
	top:46%;

	bottom:0;
	left:0;
	right:0;
	height: 10px;
	background-color:black;z-index:10;
}

#rift {
  background-image: url(rift-full-transparent.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  top:-20%;
  height: 140%;
  /*width: 100%;*/
  position: relative;
  margin: 0 auto;
}

#riftwrapper.pulsate {
  -webkit-animation: pulsate 72s infinite linear;
  -moz-animation: pulsate 72s infinite linear;
  -o-animation: pulsate 72s infinite linear;
  animation: pulsate 72s infinite linear;
}

#rift.rotate {
  -webkit-animation: rotate 72s infinite linear;
  -moz-animation: rotate 72s infinite linear;
  -o-animation: rotate 72s infinite linear;
  animation: rotate 72s infinite linear;
}

@-webkit-keyframes rotate {
  from {
  	-webkit-transform:rotate(360deg);
  }
  to {  
  	-webkit-transform:rotate(0deg);
  }
/*  0% { background-size:auto 100%; }
  20% { background-size:auto 110%; }
  40% { background-size:auto 100%;}
  60% { background-size:auto 95%;}
  80% { background-size:auto 97%;}
  100% { background-size:auto 100%;}  */
}

@-webkit-keyframes pulsate {
  0% { opacity: 0.2;}
  20% { opacity: 1.0;}
  40% { opacity: 0.5;}
  60% { opacity: 1.0;}
  80% { opacity: 0.3;}
  100% { opacity: 0.2;}
}

@-moz-keyframes rotate {
  from {
  	-moz-transform:rotate(360deg);
  }
  to {  
  	-moz-transform:rotate(0deg);

  }
/*  0% { background-size:auto 100%; }
  20% { background-size:auto 110%; }
  40% { background-size:auto 100%;}
  60% { background-size:auto 95%;}
  80% { background-size:auto 97%;}
  100% { background-size:auto 100%;}*/
}

@-moz-keyframes pulsate {
  0% { opacity: 0.2;}
  20% { opacity: 1.0;}
  40% { opacity: 0.5;}
  60% { opacity: 1.0;}
  80% { opacity: 0.3;}
  100% { opacity: 0.2;}
}

/* deferred loading of large animated gifs 
    @see http://stackoverflow.com/questions/1373142/preloading-css-background-images/14390213#14390213
*/
body:after {
  display:none;
  content: url(animation1.gif) url(animation2.gif);
}