body,ul{
  padding: 0;
  margin: 0;
}

body{
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  background-size: 100%;
  font-size: 16px;
  background-color: rgba(10,10,10,0.9);
}


.wrap{
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  box-sizing:border-box;
  height: 100%;
  width: 100%;
  background-color: rgba(10,10,10,0.9);
}

.wrap img{
  height: 80%;
  margin: auto;
  display: block;
  border:1px solid #fff;
}



button{
	cursor: pointer;
}


@media screen and (min-width: 900px){
  	body{
		background-image: url();
  	}
  	.panel{
		position: absolute;
		width: 300px;
		height: 50px;
		left: 0;
		bottom: 8px;
		z-index: 100;
		background-color: #333;
		border-radius: 0 5px 5px 0;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	}
	.panel button{
		display: inline-block;
		float: left;
		vertical-align: middle;
		width: 80px;
		height: 30px;
		color: #aaa;
		border-radius: 5px;
		background-color: #333;
		border: 1px solid #222;
		margin: 10px 10px 10px 0;
		outline: none;
		background-image: -webkit-linear-gradient(top right, #333, #222);
		background-image: -o-linear-gradient(top right, #333, #222);
		background-image: linear-gradient(to bottom left, #333, #222);

	}
	.panel button:first-of-type{
		margin-left: 10px;
	}

	.panel button:hover{
		background-color: #222;
	}
	.panel-show{
		left: -300px;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	} 
	.tips{
		position: absolute;
		width: 100px;
		height: 20px;
		right: 0;
		bottom: 8px;
		z-index: 90;
		background-color: #4169E1;
		border-radius: 0 5px 5px 0;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	}
	.tips-show{
		right: -80px;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	} 
}

@media screen and (max-width: 900px){
	.wrap img{
  		height:initial;
  		width: 100%;
  		border:none;
	}
	.wrap{
		background-color: #000;
	}
	.panel{
		position: absolute;
		width: 100%;
		height: 140px;
		background-color: #333;
		left: 0;
		bottom: 0;
		z-index: 0;
		box-shadow:0 -1px 1px -1px #ccc;
		opacity: 0;
		-webkit-transition: 1500ms;
		-o-transition: 1500ms;
		transition: 1500ms;
	}
	.panel button{
		display: inline-block;
		float: left;
		padding: 10px 0px 10px 0px;
		width: 40%;
		height: 40px;
		color: #aaa;
		border-radius: 5px;
		background-color: #333;
		border: 1px solid #222;
		margin: 20px 5% 0 5%;
		outline: none;
		background-image: -webkit-linear-gradient(top right, #333, #222);
		background-image: -o-linear-gradient(top right, #333, #222);
		background-image: linear-gradient(to bottom left, #333, #222);
	}

	.panel button:hover{
		background-color: #222;
	}

	.panel-show{
		opacity: 1!important;
		z-index: 20;
		-webkit-transition: 1500ms;
		-o-transition: 1500ms;
		transition: 1500ms;
	}
	.tips{
		position: absolute;
		width: 100px;
		height: 20px;
		right: 0;
		bottom: 8px;
		z-index: 100;
		background-color: #4169E1;
		border-radius: 0 5px 5px 0;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	}
	.tips-show{
		right: -80px;
		-webkit-transition: 750ms;
		-o-transition: 750ms;
		transition: 750ms;
	} 
}