* { 
	box-sizing: border-box;
}

body { 
	background-color: #EAEAEA; 
	color: #666666; 
	font-family: Arial, Helvetica, Sans-serif;
 }
 
 #wrapper {  
	background-color: black;
	margin: auto; 
	background-image: black; 
}

header {
	background-color: black; 
	color: #FFFFFF; 	
	text-align: center; 
	padding-bottom: 5px;
}

header a{
	text-decoration: none;
	color: #FFFFFF;
}
header a:link {
	color: #FFFFFF;
}

header a:visited { 
	color: #FFFFFF; 
}

header a:hover {
	color: #90C7E3; 
}


main {
	padding: 1px 20px 20px 30px; 
	display: block; 
	background-image: linear-gradient(to bottom, lightgrey, black ) ;  
	overflow: auto; 
	color: #FFFFFF;
}

nav { 
	font-weight: bold; 
	padding: 0; 
	font-size: 120%;  
	text-align: center;
	border: 2px solid white;
}

nav a {
	text-decoration: none;
	
	box-shadow: 0px 2px 2px 2px white;
	
}

nav a:link { 
	color: #FFFFFF;
}

nav a:visited {
	color: #FFFFFF; 
}

nav a:hover {
	color: #FFFFFF;
} 

section a:link {
	color: #800000
}
section a:visited{
	color: #800000
}
section a:hover {
	color: #800000
}

li {
	list-style-type: none;
}

 #nav ul {
        list-style: none; 
        padding:0;
        margin:0;
}

#nav li {
        line-height:20px;
		border-bottom: 3px solid white;
}
#nav li a {display:block;}
#nav li ul{ 
        display:none; 
    z-index:99999;
        /*display:list-item !important;*/
        position:absolute;
        /*margin-top:2px;*/
        margin-left:0px;
        
        background: black;
}
#nav li ul ul {left: 100%; top:0;}
#nav ul li ul {
    /*margin-top:-3em;
    margin-left:7em;*/
}   

#nav ul li:hover > ul {
        display: block;
}

#nav ul li:hover ul li {
        float:none;
        padding: 2px 0px;
}
#nav ul ul li {
padding: 5px 15px;
    display: block;
}
#nav ul ul li > a:before { 
        /*content: '» '; */
}


h1 { 
	margin-bottom: 0; 
	margin-top: 0; 
	font-family: Georgia, Times New Roman, serif; 
	padding: 0.5em 0;
	letter-spacing: 0.25em;
}

h2 { 
	color: black; 
	text-shadow: 3px 3px 3px #CCCCCC; 
	font-family: Georgia, Times New Roman, serif;
	
}

h3 { 
	font-family: Georgia, Times New Roman, serif; 
	color: #000033; 
}



dt { 
	color: #002171;
}

html, body {
    cursor: url(mask.png), default;
    /* just change the cursor.ico path to your location */
}


footer { 
	width: auto;
	height: auto;
	text-align: center;
	color: white;
	margin: 5px 5px 5px 5px;
	padding-bottom: 5px;
	border: 3px solid white;
}
.resort { 
	color: Black; 
	font-weight: bold;
}


section {
	width: auto;
	height: auto;
	border: 3px solid black;	
	padding: 2em;
	text-align: left;
	box-shadow: 0px 5px 5px 0px white;
}

#sleeptoken {  
	height: 300px; 
	background-image: url(stbanner.jpg); 
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

#footerst {  
	height: 200px; 
	background-image: url(footer-sleeptoken.jpg); 
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	border: 2px solid white;
}







/******medium layout*****/

@media (min-width:600px) {

	#nav ul { 
		display: flex; 
		flex-wrap: nowrap;
		justify-content: space-around;
		font-size: 20px;
	}
	#nav li {
		border-bottom: none;
	}
	

	
	h2     { 
		grid-row: 1 / 2; 
		grid-column: 1 / 5;
	}
	section{ 
		text-align: center;
		grid-row: 2 / 3; 
		grid-column: auto;
		padding-left: 2em;
		padding-right: 2em;
		
	}
	#special{
		grid-row: auto; 
		grid-column: 1 / 5; 
	}
	footer     { 
		grid-row: auto; 
		grid-column: 1 / 5;
		
		width: auto;
		height: auto;
	}
	.content main {  
		display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr 1fr;
	}
}