/* Custom settings for ospreycottage */
/* Override settings from main stylesheet to increase width of middle content section */

#content {
  width: 100% !important;
}

#sidebars {
  display: none !important;
}

.format_text {
  position: relative;
  height: 500px;
}

#instructions p {
  font-size: 12px;
  line-height:18px;
  padding: 5px;
}

/* Standard plugin style settings */

#floorplancontainer {
  /* float: left; */
	position: absolute;
  top: 20px;
	margin: 0;
	padding: 0;
}
		
 #floorplan {
    width: 442px; height: 277px; /* width and height of floorplan */
    background: url(/floorplan-images/heather-b-floorplan.png);
    margin: 10px;
		margin-top: 0px;
		padding: 0;
    position: relative;

		}

  #floorplan li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; /* top: 0; */}
		
  #floorplan a {
    display: block;}
#room1 {left: 36px; top: 4px; width: 70px; height: 81px;} /* Mast en suite Measure from PSP then check with firebug - float over li elements and check highlighting on floorplan */
#room2 {left: 105px; top: 4px; width: 60px; height: 81px;} /* Bath 2 */
#room3 {left: 166px; top: 4px; width: 91px; height: 81px;} /* Bed 2 */
#room4 {left: 256px; top: 4px; width: 100px; height: 81px;} /* Bed 3 */
#room5 {left: 356px; top: 4px; width: 81px; height: 30px;} /* Ut Room */
#room6 {left: 356px; top: 34px; width: 79px; height: 50px;} /* Main ent */
#room7 {left: 36px; top: 84px; width: 70px; height: 90px;} /* Mast bed */
#room8 {left: 106px; top: 84px; width: 250px; height: 120px;} /* Dining */
#room9 {left: 106px; top: 84px; width: 180px; height: 60px;} /* Lounge */
#room10 {left: 356px; top: 84px; width: 80px; height: 90px;} /* Kitchen */
#room11 {left: 36px; top: 174px; width: 400px; height: 70px;} /* Deck */
#room12 {left: 5px; top: 205px; width: 70px; height: 69px;} /* Spa */

#room1 a {height: 81px;} /* same heights as divs */
#room2 a {height:81px;}
#room3 a {height: 81px;}
#room4 a {height: 81px;}
#room5 a {height: 30px;}
#room6 a {height: 50px;}
#room7 a {height: 90px;}
#room8 a {height: 120px;}
#room9 a {height: 60px;}
#room10 a {height: 90px;}
#room11 a {height: 70px;}
#room12 a {height: 69px;}

/* Horizontal, vertical */
/* Horizontals are same as left pos of room, verticals for top rooms all start at top of 2nd plan or 3rd plan - about 3 px due to 3px offset???*/
#room1 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -35px -283px no-repeat; }
#room2 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -104px -283px no-repeat; }
#room3 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -165px -283px no-repeat; }
#room4 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -255px -283px no-repeat; }
#room5 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -355px -283px no-repeat; }
#room6 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -355px -313px no-repeat; }
#room7 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -35px -363px no-repeat; }
#room8 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -105px -644px no-repeat; }
#room9 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -105px -363px no-repeat; }
#room10 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -355px -363px no-repeat; }
#room11 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -35px -453px no-repeat; }
#room12 a:hover {background: url(/floorplan-images/heather-b-floorplan.png) -4px -765px no-repeat; }

/* Room image style - only displayed if Javascript is available */
#roomimage {
  margin: 10px 20px;
	}
	
/* must have non-static (absolute works) position so that absolute positioning of the 2 child images and caption works */
#roomimagecontainer {
  position: absolute;
	top: 24px;
	left: 500px;
	margin: 0;
	padding: 0;
}

#roomimagecontainer p {
  font-size: 16px;
	margin: 0;
	padding: 10px;
}

#roomimagecontainer img {
  width: 400px;
	height: 300px;
	margin: 0;
	padding: 0;
  border: none;
	/* position: absolute; */ /* INclude this an IE7 doesn fade the next image in at all! */
}

/* current and next images are overlaid */
#roomimagecurrent, #roomimagenext, #roomimagecaption {
  position: absolute;
}

#roomimagecurrent {
  z-index: 1;
}
#roomimagenext {
  z-index: 2;
	/* top: 400px; */ /* Uncomment to debug image transition */
}

#roomimagecaption {
  z-index: 3;
	background: black;
	top: 260px;
	left: 0px;
	height: 40px;
	width: 400px; /* In pixels, not percent, since this would be % of the container (has 0 width) */
	opacity: 0.6;
	filter:alpha(opacity=60);
	color: white;
	border-top: 1px solid #666;
}

.shareLink {
  float: right;
}

.shareLink a {
  color: white;
	text-decoration: none !important;
	font-weight: normal;
}

/* Styles for html test of image share popup */
#fullOpaqueOverlay {
  position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: black;
	z-index: 53; /* Puts this on top of other elements with a z-index */
	opacity: 0.6;
	filter:alpha(opacity=60);
}

#shareImagePopup {
  position: fixed;
	width: 40%;
	height: 50%;
	top: 50px;
	left: 200px;
	background: black;
	z-index: 54;
	color: white;
}

#shareImagePopup p {
  font-size: 80%;
	text-align: right;
  font-weight: normal;
  margin: 5px;
  padding: 5px;
}

#shareImagePopup p a {
	text-decoration: none;
	color: white;
  font-weight: normal;
}

#shareImagePopup ul {
	padding: 10px;
}

#shareImagePopup li {
  border: 1px solid #666;
	list-style-type: none;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#shareImagePopup li a {
	text-decoration: none;
	color: white;
  font-weight: normal;
  font-size: 16px;
}

#instructions {
  position: absolute;
  top: 300px;
  left: 290px;
  width: 300px;
}

/* Overrides for standard settings */

#instructions {
  left: 90px;
}