@charset "utf-8";
/* Pinckney Bend Bed and Breakfast CSS Document */

body {
	background-color: #898065;   /* was AE9F82 */
	background-image: url(images/wood2.png);
	background-repeat: repeat;
}

html{
	height:100%;				/* Force vertical scrollbars in VTz + Opera to prevent 'jumping' */
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
}

a:link, a:visited, a:active {
	color: #5B95C3;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #FBAB19;
	font-weight: bold;
	text-decoration: none;
}

p {   margin: 0px;   padding: 0px;}

h1{	
	text-align: center;
	vertical-align: top;
/*	color: #6C8239;		/* green summer */
	color: #5B95C3;		/* blue  winter */
	font-family: Arial, Helvetica, serif;
	font-weight: bold;
	margin-top:15px;
	margin-bottom:15px;
}

h2{	
	color: #FBAB19;		/* sunrise */
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
	font-weight: bold;
	text-align: center;
}
h3{	
	text-align: left;
	vertical-align: top;
	color: #FBAB19;		/* sunrise */
	font-family: Arial, Helvetica, serif;
	font-weight: bold;
	display: inline;
}

.Accomodations {width: 400px; float: left;  }
.AccomodationsL {margin-right: 50px;  }


.BodyBk {	background-color: #fff;}

.ClearBoth {clear: both;}
.colorBark {color: #898065;}
.colorBlue {color: #5B95C3;}
.colorSunrise {color: #FBAB19;}


img {border:0px; padding:0px;}
img.framed {border:1px; padding:0px; border-color:#000;}

.iframeMap: {height: 270px; width: 450px;}

.Centered {margin: auto; }
.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.Copyright{
	color:#fff;
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
	vertical-align:middle;
	font-weight:normal;
}

/* SEE ALSO, MEDIA QUERIES AT BOTTOM FOR CONTAINER HEIGHT */
#fadeshow1 img{
	max-width: 1000px;
	padding: 0px;
	width: 100%;
	height: auto;
	margin: auto;
}
#fadeshow1 {
	margin-right: 0px; margin-left: 0px;
}

.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}


.FrameBark {
	background-color: #898065; 
	padding: 5px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	/* end of rounded borders */
}

.FrameWood {
	background-image: url(images/wood2.png);
	background-repeat: repeat;
	padding: 5px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	/* end of rounded borders */
}

.KeepTogether {display: inline-block;}

.Link_Copyright:link, .Link_Copyright:visited, .Link_Copyright:active {
	color:#fff;
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;	
	font-weight:normal;
}
.Link_Copyright:hover {
	color:#FBAB19; /* Bark */
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;	
	font-weight:normal;
}

.MainFrame {
	max-width: 1012px;  margin: auto;
	background-color: #898065;
	padding: 3px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.MainTable {
	background-color: #898065;
	padding: 3px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.Link_Nav:link, .Link_Nav:visited, .Link_Nav:active {
	color:#fff;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.Link_Nav:hover {
	color:#FBAB19;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-weight:bold;
}

.NavTable {
	clear: both;
	vertical-align: middle;
	background: #898065;
	margin-bottom: 5px;
	margin-top: 5px;
	width: 100%; 
}

.Pad5 {margin: 5px;}
.PadL10 {margin-left: 10px;}
.PadR10 {margin-right: 10px;}


.PhoneHeader {max-width: 1012px; text-align: right; margin: auto; padding-right: 3px;}

.PHONE:link, .PHONE:visited, .PHONE:active {
	color:#fff;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.PHONE:hover {
	color:#FBAB19;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-weight: bold;
}


.PhotoNature {margin-right: 30px; margin-bottom: 30px; width: 400px; height: 300px;}

.Social {float: left; padding-right: 10px;}

.TextBody {
	color: #000000;
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;	
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.HeaderQuote {
	color: #000000;
	font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;	
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}


ul  {margin-top: 0px;}
ul li {margin-left: -25px;}

ul.mainmenu 	{list-style-type: none; margin: 0; padding: 0 0 0 20px; margin-left: -10px; }
ul.mainmenu li 	{display: inline; float: left; padding: 0px;  vertical-align: middle; margin-left: 0px;}

.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}

/* CSS Hack for hiding the Facebook LIKE count */
/*div.fb-like span {
  display:block;
  width:48px !important;  
}
div.fb-like iframe {
  width:48px !important;
}
div.fb-like iframe.fb_iframe_widget_lift {
  width:450px !important;
}
*/




/* CSS for hovering over images on RIGHT side of screen */
ul.enlargeR{
 list-style-type:none; /*remove the bullet point*/
}
 ul.enlargeR li{
 display:inline-block; /*places the images in a line*/
 position: relative;
 vertical-align: top;
 z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
 margin: 1px 0px 0px -40px;
 }
 ul.enlargeR img{
	background-color: #898065;
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 ul.enlargeR span{
	position: absolute;
	left: -9999px;
	background-color: #898065;
	padding: 10px;
	text-align: left;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
	-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
	box-shadow: 0 0 20px rgba(0,0,0, .75);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 }
 ul.enlargeR li:hover{
 z-index: 50;
 cursor:pointer;
 }
 ul.enlargeR span img{
 padding:2px;
 background:#ccc;
 }
 ul.enlargeR li:hover span{ 
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
 left: 30px; /*distance from the left of the thumbnail to the left of the popup image*/
 }
 ul.enlargeR li:hover:nth-child(2) span{
 left: 30px; 
}
 ul.enlargeR li:hover:nth-child(3) span{
 left: 30px; 
}
 /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
 ul.enlargeR img, ul.enlarge span{
 behavior: url(pie/PIE.htc); 
} 


/* CSS for hovering on images on LEFT side of screen */
ul.enlargeL{
 list-style-type:none; /*remove the bullet point*/
  }
 ul.enlargeL li{
 display:inline-block; /*places the images in a line*/
 position: relative;
 vertical-align: top;
 z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
 margin: 1px 0px 0px -40px;
 }
 ul.enlargeL img{
	background-color: #898065;
	padding: 6px;   /* this is the thickness of the frame */
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 ul.enlargeL span{
	position: absolute;
	left: -9999px;
	background-color: #898065;
	padding: 10px;
	text-align: left;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
	-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
	box-shadow: 0 0 20px rgba(0,0,0, .75);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 }
 ul.enlargeL li:hover{
 z-index: 50;
 cursor:pointer;
 }
 ul.enlargeL span img{
 padding:2px;
 background:#ccc;
 }
 ul.enlargeL li:hover span{ 
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
 left: -250px; /*distance from the left of the thumbnail to the left of the popup image*/
 }
 ul.enlargeL li:hover:nth-child(2) span{
 left: -250px; 
}
 ul.enlargeL li:hover:nth-child(3) span{
 left: -250px; 
}
 /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
 ul.enlargeL img, ul.enlarge span{
 behavior: url(pie/PIE.htc); 
}



/* MOBILE OPTIMIZATION *************************************** */

img { max-width: 100%; }
.table1012 {   display: block; max-width: 1012px;   border-collapse: collapse; margin: auto;   }


/* FOR SPECIFIED VIEWPORT */ 
@media all and (min-width: 1012px) {
	.MobileShow {display: none;}
	.MobileHide {display: inline;}	
	h1 {		font-size: 20px;}
	h2 {		font-size: 18px;}
	h3 {		font-size: 16px;}
	.Copyright {font-size: 16px; line-height:30px; }
	.Link_Copyright {	font-size: 16px;}
	.Link_Nav {	font-size: 19px; }
	.Logo {float: left; padding-right: 20px;}
	ul.mainmenu li 	{padding-right: 23px;         /*  SPACE BETWEEN MENU ITEMS----------------------------- */
        padding-top: 3px; padding-bottom: 3px; }	
	.PHONE {	font-size: 26px;}
	.TextBody, .HeaderQuote {	font-size: 16px; line-height: 22px;  }
	.width1000 {  width: 1000px;  border-collapse: collapse; margin: auto;   }
}

/* medium devices */ 
@media (min-width: 769px) and (max-width: 1012px) {
	.MobileShow {display: none;}
	.MobileHide {display: inline;}
	h1 {		font-size: 20px;}
	h2 {		font-size: 14px;}
	h3 {		font-size: 14px;}
	.AccomodationsL {margin-right: 0px;  }
	.Copyright {font-size: 14px; line-height:30px; }
	.Link_Copyright {	font-size: 14px;}
	.Link_Nav {	font-size: 19px; }
	.Logo {float: left; padding-right: 20px;}
	ul.mainmenu li 	{padding-right: 16px; padding-top: 3px; padding-bottom: 3px; }	
	.PHONE {	font-size: 30px;}
	.TextBody  {	font-size: 16px; line-height: 22px;  }
	.HeaderQuote {	font-size: 14px; line-height: 20px;  }
	.width1000 {  width: 100%;  border-collapse: collapse; margin: auto;   }	
}

/* small devices */ 
@media all and (max-width: 768px) {
	.MobileShow {display: inline;}
	.MobileHide {display: none;}
	h1 {		font-size: 20px;}
	h2 {		font-size: 16px;}
	h3 {		font-size: 16px;}
	.Copyright {	font-size: 14px; line-height:20px; }
	.Link_Copyright {	font-size: 14px;}
	.Link_Nav {	font-size: 18px; }
	.Logo {margin: auto; display: block;}
	.FloatL, .FloatR {margin-left: 10px; margin-right: 10px;}
	ul.mainmenu li 	{padding-right: 15px; padding-top: 3px; padding-bottom: 3px; }	
	.PHONE {	font-size: 30px;}	
	.TextBody, .HeaderQuote {	font-size: 16px; line-height: 22px;  }
	.width1000 {  width: 100%;  border-collapse: collapse; margin: auto;   }
	ul.enlargeR span img{	display: none !important;} /* TURN THIS FEATURE OFF */
	ul.enlargeL span img{	display: none !important;} /* TURN THIS FEATURE OFF */
}

/* VERY small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 450px) {
	.Accomodations {width: 300px; float: left;  }
	.AccomodationsL {margin-right: 50px;  }
	.PhotoNature { width: 300px; height: 225px; margin-right: 0px; display: block;}
}

/* VERY small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 320px) {
	.iframeMap: {height: 176px; width: 292px;}

}


/* for SLIDESHOW ONLY */

@media screen and (max-width: 860px){ #fadeshow1{ height: 160px !important;}} /* don't forget to add 10 extra px */
@media screen and (max-width: 600px){ #fadeshow1{ height: 105px !important;}}
@media screen and (max-width: 500px){ #fadeshow1{ height:  88px !important;}}
@media screen and (max-width: 400px){ #fadeshow1{ height:  70px !important;}}
@media screen and (max-width: 300px){ #fadeshow1{ height:  53px !important;}}
@media screen and (max-width: 200px){ #fadeshow1{ height:  35px !important;}}