header, hgroup, nav, footer, figure, figcaption, aside, section, article {display: block;} body { background-color: #FFF; color: #666; background-image: url("images/ptrbackground.jpg"); font-family: Arial, Helvetica, sans-serif; } #wrapper { margin-left: auto; margin-right: auto; width: 80%; min-width: 960px; background-color: #90c7e3; box-shadow: 5px 5px 5px #003; } header { background-color: #003; color: #FFF; background-image: url("images/sunset.jpg"); background-repeat: no-repeat; background-position: right; } nav { float: left; padding: 5px; padding-left: 20px; width: 160px; background-color: #90C7E3; font-weight: bold; } nav ul { margin: 0px; padding-left: 0px; list-style-type: none; font-size: 1.2em; } nav a { text-decoration: none; } nav a:link { color: #003; } nav a:visited { color: #344873; } nav a:hover { color: #fff; } #content { margin-left: 190px; padding: 30px; padding-top: 1px; background-color: #fff; } #content ul { list-style-image: url("images/marker.gif"); list-style-position: inside; } #content img { float: left; padding-right: 20px; } footer { margin-left: 190px; padding: 20px; background-color: #fff; font-size: .75em; font-family: Georgia, Times New Roman, serif; font-style: italic; } h1 { padding: 10px; margin-bottom: 0; font-family: Georgia, Times New Roman, serif; } h2 { color: #39C; font-family: Georgia, Times New Roman, serif; text-shadow: 1px 1px 1px #ccc; } h3 { color: #003; font-family: Georgia, Times New Roman, serif; } img { max-width: 100%; height: auto; } dt { color: #003; } table { width: 80%; border: 1px solid #39c; border-spacing: 0; } td, th { padding: 5px; border: 1px solid #39c; } td { text-align: center; } tr:nth-of-type(odd) { background-color: #F5FAFC; } label { float: left; display: block; width: 120px; padding-right: 20px; text-align: right; } input { display: block; margin-bottom: 20px; } textarea { display: block; margin-bottom: 20px; } .resort { color: #5C7FA3; font-weight: bold; } .text { text-align: left; } #contact { font-size: .9em; } #mobile { display: none; } #desktop { display: inline; } @media only screen and (max-width: 960px) { #wrapper { width: 95%; min-width: 768px; } } /* Generic Tablet Display */ @media only screen and (max-width: 768px) { body { margin: 0px; } #wrapper { width: auto; min-width: 0px; } #content { margin-left: 0px; } nav { float: none; width: auto; padding: 0px; } nav ul { text-align: center; } nav li { display: inline; padding: 0px; padding-left: 0.75em; padding-right: 0.75em; } footer { margin-left: 0px; } } /* Generic Smartphone Display */ @media only screen and (max-width: 480px) { body { margin: 0px; } #wrapper { width: auto; } #content { margin: 0px; padding: 1em; padding-top: 0.1em; padding-bottom: 0.1em; font-size: 0.9em; } nav ul { padding: 0px; } nav li { display: block; margin: 0px; border-bottom: 2px solid #300; } nav a { display: block; } h1 { margin: 0px; padding-left: 0.3em; font-size: 1.5em; } label { float: none; text-align: left; } #content img { float: none; margin: 0.1em; padding: 0px; } #content ul { list-style-position: outside; } #mobile { display: inline; } #desktop { display: none; } }