/* homes3.css   2017   Barry Spatz  */

html { 
	height: 100% ;
	text-align: center;
}

body { height: 100%; margin:0px; padding: 0px; }


#page {
	position:relative;
	background-color:rgb(250, 245, 225);/*#f8f0d3;/*rgb(250, 245, 225); */
	border-radius:10px;
	width:1020px;
	height:660px;
/*	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:10px;*/
	text-align:center;
	margin-right:auto; 
	margin-left:auto; 
}

#header{
	
	background-image: url("hollypond.png");
	background-size: 1020px;
	width:1020px;
	height:80px;
	position:relative;
	border-radius:10px 10px 0px 0px;
	
}

/* Menu---------------------------------------------------------------*/
#hmenu{
	/*border-radius: 0px 0px 15px 15px;*/
	
}

#homeMenu{	
	color:white;		
	position:relative;
	font:bold 13px arial, san-serif;
	/*padding-left:10px;
	padding-right:5px;*/
	background-color:#004d00; /*maroon;*/
	width:1020px;
	height:30px;
	
}

#leftNav{
	width:290px;
	float:left;
	padding-left:10px;
	
}

#middleNav{
	width:350px;
	float:left;
	/*background-color:#660000;*/
	text-align:center;
}

#rightNav{
	/*font:bold 11px arial, san-serif;*/
	width:350px;
	float:left;
	padding-left:10px;
}


ul {
	display:inline;
    list-style: none;
    padding-left:10px;
	padding-top:5px;
  /*  overflow: hidden;  */
/*color:white;*/
	text-decoration:none;
}

ul li {
    float: left;
	display:inline-block;
	/*background:maroon;*/
	color:white;
	text-decoration:none;
	padding-right:5px;
	padding-top:3px;
	padding-bottom:6px;
	padding-left:5px
}

ul li:hover{
	background:black;
	color:white;
}

ul li ul{
	position:absolute;
	left:659px;
	top:25px;
	width:140px;
	height:80px;
	display:none;
	color:white;
	text-decoration:none;
	background:maroon;
	text-align:left;	
	z-index:51;
	border-radius:0px 0px 10px 10px;
}

ul li ul li{
	display:block;	
	text-align:left;
	padding-left:18px;
	
}

ul li ul li:hover{
	background:black;	
	color:white;
	text-align:left;
	
}

ul li:hover ul{
	display:block;
	color:white
	Background-color:black;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 4px 4px 0px 0px;
    text-decoration: none;
}

ul li ul a{
	padding-left:5px;
}



/* Floorplan--------------------------------------------------------------*/
#left{
	background-color:rgb(250, 245, 225);/*#f8f0d3;/*rgb(250, 245, 225);*/
	/*background-color:rgb(250, 245, 225);#f0e2a8; /*rgb(240,237,229);*/
	width:300px;
	height:500px;
	/*border: 1px solid black;*/
	float:left;
	padding-top:25px;
	padding-left:10px;
}	



/* Middle column with pictures from floorplan , map and streetview-------------*/
#middle{
	background-color:rgb(250, 245, 225);/*#f8f0d3;/*#f8f0d3;/*rgb;(250, 245, 225);  rgb(240,237,229);  rgb;(250, 245, 225); rgb(240,237,229); #f0e2a8;*/
	width:350px;
	height:512px;
	/*border: 1px solid black;*/
	float:left;
	padding-top:25px;
	position:relative;
	
	
}

#mainpicture{
	/*background-color:white; /*rgb(240,237,229);*/
	width:350px;
	height:250px;	
	position:relative;	
}

#mainpic{
	border-radius:5px;
	height:245px;
	width:335px;
	}

#map-pic{
	/*background-color:white; /*rgb(240,237,229);*/
	width:350px;
	height:240px; 		
	padding-top:10px
	border-radius:5px;
}



/* here are all the ID's for the right column which changes between Property details,
   about Hollybrook (4 screens), Contact and help */
   

#right{
	background-color:rgb(255,254, 250);/*rgb(250, 245, 225);rgb(240,237,229);*/
	width:335px;
	height:500px;
	float:right;
	position:relative;
	padding-top:5px;
	border-left:2px solid #004d00;
	padding-left:15px;
/*	margin-left:15px;
	margin-right:15px;*/	
}

#bullet-left{
	width:150px;
	height:190px;
	float:left;
	position:relative;
	top:27px;
	text-align:left;
	font-size:14px;
	
}

#bullet-right{
	width:150px;
	height:190px;
	float:right;
	position:relative;
	top:27px;
	text-align:left;
	font-size:14px;
}


/* Development Amenities ----------------------------------------------*/
#amenities{
	display:none;
}

#aPics{  /* Amenities pictures (slideshow) */
	width:325px;
	height:250px;
	padding-top:19px;	
	
}

#aComments{  /*Amenities comments*/
	width:325px;
	height:250px;
	padding-top:5px;
 }
 
 /* Slideshow for amenities*/
#slides{
		position:absolute;	
		width:325px;
	}

	.slide-pic{
		width:320px; 
		height:245px;
		border-radius:5px;		
	}

#cycler{
	position:absolute;
	}
	
#cycler img{
	position:absolute;
	z-index:1;
	}
	
#cycler img.slide-pic.active{
	z-index:3;
	}
 
/* Development Site Plan---------------------------------------------*/
#bigSitePlan{	
	background-color:rgb(250, 245, 225);
	/*border:1px solid black; */
	position:relative; 
	width:700px; 
	/*height:555px; 
	bottom:15px; 
	left:205px; */
	display:none;
	/*z-index:1;
	border-radius:10px;*/
	
}

#mappic{
	position:absolute; 
	left:315px;
	top:18px;
	display:none;
	z-index:31;
}

#mapClick{
	position:absolute;
	top:285px;
	left:18px;
	width:110px;
	height:26px;
	background-color:white;
	font: 12px arial, san-serif ;
	color:red;
	z-index:25;
}

#streetPic{
	position:absolute; 
	left:315px;
	top:18px;
	display:none;
	z-index:31;
}

#streetClick{
	position:absolute;
	top:285px;
	left:18px;
	width:110px;
	height:26px;
	background-color:white;
	font: 12px arial, san-serif ;
	color:red;
	z-index:25;
	display:none;
}

#bigSitePic{
	position:absolute; 
	left:315px;
	top:18px;
	width:690px; 
	height:500px; 
	border:0px;
	z-index:26;
	/*border:1px white;	*/
}

#bigMainPic{
	position:absolute; 
	left:315px;
	top:18px;
	width:690px; 
	height:500px; 
	border:0px;
	z-index:30;
	display:none;
	border-radius:15px;
}

#nextpic{
	position:absolute;
	top:250px;
	left:975px;
	width:25px;
	z-index:32;
	display:none;
	opacity:0.3;
	filter: alpha(opacity=30);
}

#prevpic{
	position:absolute;
	top:250px;
	left:320px;
	width:25px;
	z-index:32;
	display:none;
	opacity:0.3;
	filter: alpha(opacity=30);
}

#phases{
	background-color:white; 
	border:3px solid black; 
	position:absolute; 
	width:350px; 
	height:350px; 
	top:100px; 
	left:450px; 
	display:none;
	z-index:27;
}

#phaseDetail{
	position:relative;
	top:20px;
	
}

 
/* Apartments         ---------------------------------------------*/
#apartments{
	display:none;
	width:320px;
	height:250px;
	padding-top:15px;
} 


#footer{
	
	background-color:#004d00; /*  maroon  rgb(250, 245, 225); /*rgb(240,237,229);*/
	width:1020px;
	color:white;
	height:28px;
	float:left;
	padding-top:5px;
	border-radius: 0px 0px 10px 10px;
	position:relative;
	/*top:15px;*/
}

#textBox{	
position:absolute;
width:225px;
height:120px;
top:225px;
left:400px;
display:block;
/*background-color:maroon;*/
color:white;
/*border: 1px solid white;
border-radius:10px;*/
padding:0px;
z-index:2000;

}

#txtBoxHead{
height:20px;
font:13px bold arial, sans-serif;
color:maroon;
background-color:rgb(250, 245, 225);
padding:5px;
border-radius:10px 10px 0px 0px;	
}

#txtBoxBody{
	text-align:center;
	background-color:maroon;
	color:white;
	padding:10px;
	font:12px arial, san-serif;	
	border-radius:0px 0px 10px 10px;
}

.rotate{
	transform: rotate(-90deg);
}