#wrapper {
	text-align: center; 
	margin-right:auto; 
	margin-left:auto;
	margin-top: 0px; 
	position: relative; 
	width: 1240px; 
	height:900px;
	
}
.wrapperstyle {

	left: 0px; 
	top: 0px; 
	height: 950px;
}
#mobilewrapper {
	text-align: center; 
	margin-right:auto; 
	margin-left:auto;
	margin-top: 0px; 
	position: relative; 
	width: 350px; 
	height:900px;
	
}
.mobilewrapperstyle {

	left: 0px; 
	top: 0px; 
	height: 950px;
}

#header {
	position: absolute; 
	width: 1000px; 
	height: 200px; 
	z-index: 1; 
	left: 0px; 
	top: 0px;
	background-color: #114432;
}

}
.modalDialog {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	top: 230px;
	width: 600px;
	left: 200px;
	bottom: 600px;
	height: 450px;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	top: 50px;
	width: 470px;
	height:350px;
	position: relative;
	margin:10% auto;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
	background: #7ea0fe;
	
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }


.auto-style2 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.auto-style3 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: medium;
}
  <style type="text/css">
    #items {
    position : relative;
    width : 400px;
    height : 200px;
    top : 20px;
    left : 20px;
}
.item {
    position : absolute;
   
    border : 0px solid #ccc;
    width : 398px;
    height : 198px;
    display :none;
    text-align : center;
    font-size : 10px;
}
.first{
    display : block;
}
#controls {
    margin-top : 4px;
  
}
.buttonp {
background-image:url('../images/prevbtn.png');
width:12px;
height:12px;

border:thin silver inset;
}
.buttonpl {
background-image:url('../images/playbtn.png');
width:12px;
height:12px;

border:thin silver inset;
}
.buttonpa {
background-image:url('../images/stopbtn.png');
width:12px;
height:12px;
border:thin silver inset;
}
.buttonn {
background-image:url('../images/nextbtn.png');
width:12px;
height:12px;
border:thin silver inset;
}

li {
    display : inline-block;
    padding : 5px;
    border : 0px solid #ccc;
    background-color : #eee;
    cursor : pointer;
}
#play {
    display : none;
}
.yellow {
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
	color:yellow;
}
  .auto-style2 {
	  text-align: center;
  }
  .auto-style3 {
	  background-color: #000d2d;
  }

  .auto-style4 {
	text-align: center;
}

  .auto-style5 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-align: right;
	margin-left: 0px;
}

  .auto-style6 {
	text-align: right;
}

  .auto-style7 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: medium;
	text-align: right;
	background-color: #000d2d;
}

  .auto-style9 {
	background-image: url('../images/prevbtn.png');
	width: 12px;
	height: 12px;
	border: thin silver inset;
	text-align: right;
}
.auto-style10 {
	background-image: url('../images/nextbtn.png');
	width: 12px;
	height: 12px;
	border: thin silver inset;
	text-align: right;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
background-color: #743F0A;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#F39506;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}