/*tablet 480px*/

	@ media screen and (max-width: 30em) / * 480px*/ {


wrapper {

        max-width: 30em; /* 480px */

	float: left;

	padding-left: 5px;

	padding-right: 5px;

	overflow: hidden;

	}

body {

	height: 45%;
		
	 max-width: 30em; /* 480px */

	background-image: url("peibeachtrans2.jpg");
	
	}

header {

	float: top;

	 max-width: 30em; /* 480px */

	}

article {

	position: left;

	 max-width: 30em; /* 480px */

	color: #990033;

	text-align: center;

	}

 nav {

	display:none;

	}

h1     {

	font: 8pt arial; 		

	color: #990033;

	text-align: center;
	
	}


p       { 

        font: 8pt comic sans; 		

	color: #990033;

	text-align: center;

        }

p.left { 

	font: 8pt arial; 

	color: #990033;

	text-align: left;

        }

dl	 { 

	font: 8pt arial; 

	color: #990033;

	text-align: left;

	text-indent: 30px;

        }

p.leav { 

        font: 8pt arial; 

	text-align: center;

	color: #990033;

        }


p.end {
		
	font-size: 8pt arial;

	text-align: center;

        }

p.by {
		
	font-size: 8pt arial;

	text-align: left;

        }

table {

	max-width: 30em; /* 480px */

	float: center;

	cellpadding: 8px;

	cellspacing: 8px;

	background-color: #cccccc;

	border: 8px;

	}

map {
 
	max-width: 30em; /* 480px */

	float: center;

	margin-left: auto;

	margin-right: auto;

	}	
	

 div#tb {
	    
	margin-left: auto;

	margin-right: auto;
	
       }
			
dt.ids {	

	margin-left: auto;

	text-align: center;		
			
       }

dd.ans {
		
	margin-left: auto;

	text-align: center;

       }

li.home	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #BB8FCE;

	 }  /* purple */

li.home:hover {background-color: #E8DAEF;}

li.water	{

	display: inline-block;

        border: none; /* Remove borders */

        padding: 24px 38px; /* Add some padding */

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 10pt arial; 

	background-color:  #00ccff;

	}  /* light blue */

li.water:hover {background-color: #008fb3;}

li.visit	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #ff6600;

	 } /* Orange */

li.visit:hover {background-color: #cc5200;}

li.dinner	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #ff66ff;

	} /* pink */

li.dinner:hover {background-color: #ff00ff;}

li.pubhop	{

	display: inline-block;

        border: none; /* Remove borders */

        padding: 24px 38px; /* Add some padding */

	cursor: pointer; /* Add a pointer cursor on mouse-over */

	font: 10pt arial;  

	background-color: #ffff00;

	} /* yellow */

li.pubhop:hover {background-color: #e69900;}

li.attic	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */
 
	 font: 10pt arial; 

	 background-color: #6666ff;

	 } /* dark blue*/

li.attic:hover {background-color: #002080;}

li.golf	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color:#009933;

	 } /* green */ 

li.golf:hover {background-color: #006622;}

li.farm	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #ffcc66;

	 }/* gold */

li.farm:hover {background-color: #e69900;}

li.form	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */
 
	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #ff0000;

	 } /* red */ 

li.form:hover {background-color: #cc0000;}

li.ref	{

	display: inline-block;

	 border: none; /* Remove borders */

         padding: 24px 38px; /* Add some padding */

	 cursor: pointer; /* Add a pointer cursor on mouse-over */

	 font: 10pt arial; 

	 background-color: #66ff66;

	 } /* green */

li.ref:hover {background-color: #46a049;}


footer {

	clear: all;
 
	height: 60px;
 
	max-width: 30em; /* 480px */
 	
	bottom: 0px;

	right: 0px;
	
	}


	}