/* CSS Popout Menu */

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li{float:left;height:.7%;}
* html #menu ul li a{height:.7%;}
/* End */

body
	{
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: justify;
}	
.hometext
	{
	color: black;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: justify;
	padding: 20px 10px 10px 30px;
}	
.tripbox
	{
	margin: 0em auto 0 auto;
	width: 400px;
	background-repeat: no-repeat;
	background-position: left;
	padding-right: 0px;
	padding-left:  40px
}	

h1
	{
	margin: 0;
	color: #610062;
	font-size: 22px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: Left;
	letter-spacing: 15px;
	padding: 0px 20px 20px 0px;
	font-weight: bold;
}	
h2
	{
	margin: 0;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: center;
	font-weight: 200;
	padding: 10px 0px 20px 0px;
}	
.indexbox
	{
	margin: 0em auto 0 auto;
	width: 400px;
	float: right;
	padding: 0px 30px 30px 30px;
}
.featurebox
	{
	margin: 2em auto 0 auto;
	width: 400px;
	height: 300px;
	background-image: url(images/testimonialbox.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-right: 40px;
}	
.featuretext
	{
	width: 160px;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	line-height: 70%;
	float: left;
	padding: 20px 10px 10px 30px;
}	
.featurepics
	{
	width: 160px;
	float: right;
	padding: 20px;
}	
.aboutbox
	{
	margin: -2em auto 0 auto;
	width: 440px;
	height: 450px;
	background-image: url(images/aboutbox.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-right: 20px;
}	
.abouttext
	{
	width: 200px;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	line-height: 120%;
	float: left;
	padding: 40px 10px 10px 50px;
}
.aboutpics
	{
	width: 70px;
	float: left;
	padding: 120px 20px 20px 0px;
}	


.aboutbox ul{
	margin: 0;
	padding: 0 0 0 10px;
	float: right;
	margin: 0;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	border-right-color: #CC0033;
	border-right-style: solid;
	border-right-width: 1px;
}

.aboutbox ul li{
	display: list-item;
	list-style: square outside;
}

.aboutbox ul li a{
	text-decoration: underline;
	color: White;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
}

.aboutboxul li a:visited{
	color: white;
}

.aboutbox ul li a:hover, .menu ul li .current{
	color: #CC0033;
}
 


.ratebox
	{
	margin: 2em auto 0 auto;
	width: 704px;
	height: 409px;
	background-image: url(images/ratebox.png);
	background-repeat: no-repeat;
	background-position: left;
}	
	.ratetext
	{
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	line-height: 130%;

}
.ratefineprint
	{
	color: white;
	font-size: 14px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	line-height: 90%;
	float: left;
	padding: 30px 10px 10px 150px;
}
.rateheadertext
	{
	margin: 0;
	color: white;
	font-size: 22px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: center;
	padding: 10px 20px 20px 0px;
	font-weight: bold;
}	
.ratefooter
	{
	color: black;
	font-size: 12px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: left;
	line-height: 100%;
}
.locationouterwrapper
	{
	margin: 0em auto 0 auto;
	width: 883px;
	height: 409px;
	}
	
.locationleftwrapper
	{
	margin: 0em auto 0 auto;
	width: 600px;
	height: 800px;
	float: left;
	}

.locationrightwrapper
	{
	margin: 0em auto 0 auto;
	width: 220px;
	height: 1300px;
	background-color: #f26102;
	float: right;
	padding: 5px 5px 5px 5px;
	text-align: center;
	color:white;
	
	}	

.locationdonkey
	{
	margin: 0em auto 0 auto;
	width: 500px;
	height: 300px;
	padding: 5px 5px 5px 5px;
	float: left;
}	
.locationgoogle
	{
	margin: 0em auto 0 auto;
	width: 350px;
	height: 300px;
	float: left;
	padding: 5px 5px 5px 5px;
	
	}		
.stjohnouterwrapper
	{
	margin: 0em auto 0 auto;
	width: 883px;
	}
.stjohnislandfacts
	{
	margin: 0em auto 11px auto;
	width: 482px;
	background-color: #856cdb;
	float: right;
	font-size: 14px;
	color: white;
	padding: 15px 15px 15px 15px;
}	

.stjohnislandfacts a:link {
	color: white;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 14px;
	text-decoration: underline;
	font-weight: normal;
}

 .stjohnislandfacts a:visited {
	color: white; 
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 14px;
	text-decoration: underline;
	font-weight: normal;
}

 .stjohnislandfacts a:hover {
	color: orange;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 14px;
	font-weight: normal;
	text-decoration: underline;
}

.stjohnislandfacts a:active {
color: white; 
font-family:"Franklin Gothic Medium", Arial;
font-size: 14px;
text-decoration: none;
font-weight: normal;
}

.stjohnpics
	{
	margin: 2em 0 0 0em;
	width: 300px;
	float: none;
}	
	
.stjohnwear
	{
	margin: 0em auto 0 auto;
	width: 275px;
	float: left;
	text-align: left;
}		
.stjohnweartext
	{
	margin: 0;
	width: 275px;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: center;
	font-weight: 200;
	background-color: #ff8c00;
	padding: 15px 0px 15px 0px;
}	
.thingstodo
	{
	margin: 2em auto 0 auto;
	padding: 0em 2em 0em 2em;
	width: 450px;
	float: right;
	background-color: #ff8c00;
}
.thingstodotext
	{
	margin: 0;
	color: white;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: justify;
	padding: 10px 10px 10px 10px;
}	

.thingstodotext a:link {
	color: white;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .thingstodotext a:visited {
	color: white; 
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .thingstodotext a:hover {
	color: black;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	font-weight: normal;
	text-decoration: underline;
}

.thingstodotext a:active {
color: white; 
font-family:"Franklin Gothic Medium", Arial;
font-size: 16px;
text-decoration: none;
font-weight: normal;
}
.thingstodotitle
	{
	margin: 0;
	color: #c00e0e;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: justify;
	padding: 30px 0px 10px 0px;
	border-bottom: medium solid #c00e0e;
}	
.ownerbox
	{
	margin: 0em auto 0 auto;
	width: 300px;
	height: 630px;
	float: right;
	background-color: #3ea0ff;
	padding: 20px 20px 20px 20px;
}
.contactbox
	{
	margin: 0em auto 0 auto;
	width: 400px;
	height: 600px;
	float: left;
}
.travelbox
	{
	margin: 0em auto 0 auto;
	width: 840px;
	height: 180px;
	background-color: yellow;
	padding: 30px 30px 30px 30px;
	border: thin ridge #9400d3;
}
.caption
	{
	margin: 0em auto 0 auto;
	font-size: 12px;
	color: white;
}	
	

a:link {
	color: black;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 a:visited {
	color: black; 
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 a:hover {
	color: #CC0033;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	font-weight: normal;
	text-decoration: underline;
}

 a:active {
color: black; 
font-family:"Franklin Gothic Medium", Arial;
font-size: 16px;
text-decoration: none;
font-weight: normal;
}


#homewrapper {
	margin: 0em auto 0 auto;
	width: 950px;
	height: auto;
	font-size: 16px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	padding: 0px 20px 20px 0px;
	color: black;
	text-align: justify;
}

#homelogo {
	margin: 2em 0 0 2em;
}
#beachscene {
	margin: 1.5em 0 0 2em;
}
#reservations {
	margin: 0em 0 0 0em;
	color: #636363;
	font-size: 14px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: right;
}
.footer
	{
	margin: 0;
	color: #610062;
	font-size: 22px;
	font-family: "Franklin Gothic Medium", helvetica, arial, geneva, "Franklin Gothic Medium", sans-serif;
	text-align: center;
	letter-spacing: 15px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
}
.favoritebox
	{
	margin: 0em auto 0 auto;
	width: 900px;
	height: 450px;
	Float: none;
	background-image: url(images/favoritesbox.png);
	background-repeat: no-repeat;
}
.favoritepic
	{
	margin: 60px auto 0 50px;
	width: 200px;
	height: 300px;
	Float: left;
	border-right-style: solid;
	border-right-width: 3px;
	border-right-color: #f26102;
	padding-left: 20px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-top: 0px;
	color: orange;
	line-height: 200%;
	
}
.favoritetext1
	{
	margin: 60px auto 0 30px;
	width: 200px;
	height: 300px;
	Float: left;
	border-right-style: solid;
	border-right-width: 3px;
	border-right-color: #f26102;
	padding-left: 20px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-top: 0px;
	color: orange;
	line-height: 200%;
	
}

.favoritetext1 a:link {
	color: white;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .favoritetext1 a:visited {
	color: white; 
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .favoritetext1 a:hover {
	color: orange;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	font-weight: normal;
	text-decoration: underline;
}

.favoritetext1 a:active {
color: black; 
font-family:"Franklin Gothic Medium", Arial;
font-size: 16px;
text-decoration: none;
font-weight: normal;
}

.favoritetext2
	{
	margin: 60px auto 0 30px;
	width: 200px;
	height: 300px;
	Float: left;
	padding-left: 20px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-top: 0px;
	color: white;
	line-height: 200%;
}

.favoritetext2 a:link {
	color: white;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .favoritetext2 a:visited {
	color: white; 
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	text-decoration: underline;
	font-weight: normal;
}

 .favoritetext2 a:hover {
	color: orange;
	font-family: "Franklin Gothic Medium", Arial;
	font-size: 16px;
	font-weight: normal;
	text-decoration: underline;
}

.favoritetext2 a:active {
color: black; 
font-family:"Franklin Gothic Medium", Arial;
font-size: 16px;
text-decoration: none;
font-weight: normal;
}