@charset "utf-8";
/* CSS Document */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	body {
		font-size: 1.5em;
		background-image: url(../images/stock-203.jpg);
		background-repeat: no-repeat;
		background-position: center;
	}
	
  #left-side {
	  position: absolute;
	  z-index: 1;
	  top: 0;
	  left: 0;
	  background-image: none;
	  background-color: #903;
	  width: 5%;
  }
  
  #right-side {
	  left: 95%;
	  background-image: none;
	  background-color: #903;
	  width: 5%;
  }
  
  #content {
	  top: 10%;
	  height: 90%;
	  left: 5%;
	  width: 90%;
  }
  
  img#mobileLogo {
	display: block;
  }
  
  #home-banner {
	position: absolute;
	left: 5%;
	top: 0;
	height: 30%;
	width: 80%;
	background-image: url(../images/gardens-dulwich-logo-mobile.gif);
	overflow: hidden;
	/* border: 1px dashed #fff; */
   }
   
   ul#navigation {
	   border: 1px dotted  #fff;
	   font-size: 3em;
   }
   
   div#menu li.contact, div#menu li.about, div#menu li.about, div#menu li.friends, div#menu li.dining {
	   display: none;
   }
   
   div#mobileFooter {
	display: block;
   }
   
   div#mobileFooter li.about {
	   display: none;
   }
  
   div#desktopMenu {
	  display: none;
   }
   
   nav#desktopMenu {
	   display: none;
   }
   
   div#servicesMenu {
	   /* make full screen wide on mobile */
	   width: 100%;
   }
   
   #borderLeft {
	   /* no room for borders on phones */
	   width: 0;
	   height: 0;   
   }
   
   #borderRight {
	   /* no room for borders on phones */
	   width: 0;
	   height: 0;   
   }
   
   #side1 {
		left: 0;
		width: 20%;
   }
   
   #side2 {
		left: 80%;
		width: 20%;
   }
   
   #menu {
		position: absolute;
		top: 10%;
		left: 0;
		width: 100%;
		background-color: transparent;
		height: 10%;
		border-bottom: 1px solid #000000;
		border-left: 1px solid #000000;
		border-right: 1px solid #000000;
		padding-bottom: 1px; 
	}
	
	#footer {
		position: absolute;
		bottom: 2%;
		left: 0;
		margin-top: 5%;
		width: 100%;
		height: 4%;
		border-top: 10px solid #006;  
	}
	
	#container {
	background-image: url(../images/stock-203.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}