header, hgroup, nav, footer, figure, figcaption, aside, section, article { display: block; }
body {
background-image:url(media/background7.jpg);
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:75%;
min-width:800px;
background-color:Chocolate;
box-shadow: 5px 5px 5px Brown;
}
#content {
padding:1px 20px 20px 20px;
background: BlanchedAlmond;
margin-left: 190px;
padding-left: 30px;
font-family: "Times New Roman", Georgia, , sans-serif;
}
nav {
padding:20px 5px 5px 20px;
font-weight:bold;
float: left;
width: 160px;
}
footer {
padding:5px;
font-size:65%;
font-style:italic;
text-align:center;
font-family: Georgia, "Times New Roman", sans-serif;
background: #ffffff;
margin-left: 190px;
float: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 0;
font-size: 1.4em;
}
nav a {
text-decoration: none;
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}
nav a:link {
color: Maroon;
}
nav a:visited {
color: SaddleBrown;
}
nav a:hover {
color: Pink;
}
#content img {
width:100%;
max-width:400px;
}
h1 {
margin-bottom: 0;
padding: 10px;
font-family: Georgia, "Times New Roman", sans-serif;
}
h2 {
color:DarkRed;
font-family: Georgia, "Times New Roman", sans-serif;
text-shadow: 1px 1px 1px #ccc;
}
h3 {
font-family: Georgia, "Times New Roman", sans-serif;
color:Chocolate;
}
ul {
clear:both;
margin-left: 5%;
margin-right: 10%;
}
figure {
border: 4px ridge Pink;
padding:5px;
float: left;
width:60%;
max-width:400px;
margin-left: 0;
background-color:White;
}
figcaption {
text-align:center;
font-family:Papyrus, fantasy;
font-size:1.1em;
line-height: 1.2em;
font-weight:bold;
}
figcaption small {
font-family:Georgia, "Times New Roman", sans-serif;
font-size:0.6em;
font-weight:normal;
font-style:italic;
}
figure a {
margin: 0;
padding: 0;
}
header {
background-image: url(media/background2.gif);
background-size: 30% 100%;
margin-right: 130px;
// background-size: auto 100%;
background-repeat: no-repeat;
background-position: right;
}
table {
clear:both;
margin-left: auto;
margin-right: auto;
width: 80%;
border-spacing: 0;
}
table td {
padding: 5px;
border: 1px solid Black;
text-align: center;
}
table th {
padding: 5px;
border: 1px solid Black;
}
.clearFloat{
clear:both;
}
@media only screen and (max-width: 768px) {
body {
margin: 7px;
}
#wrapper {
width: 100%;
min-width: 0;
margin: 0;
}
#content {
margin: 0;
}
nav {
float: none;
width: auto;
padding: 0;
}
nav ul {
text-align: center;
}
nav li {
display: inline;
padding: 0 .4em;
}
footer {
margin: 0;
}
h2 {
text-align:center;
}
ul {
margin-left: 5%;
margin-right: 10%;
}
}
@media only screen and (max-width: 600px) {
body {
margin: 7px;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
}
#content {
margin: 0;
}
nav ul {
padding: 0;
}
nav li {
display: block;
padding: 0 .75em;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
footer {
margin: 0;
}
h2 {
text-align:center;
}
ul {
margin-left: 3%;
margin-right: 5%;
}
header {
background-size: auto 50%;
background-position: center bottom;
padding-top: 0;
margin-right: 0;
}
h1 {
padding-bottom: 40px;
text-align:center;
}
table {
width: 90%;
}
}
@media only screen and (max-width: 480px) {
body {
margin: 0;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
}
#content {
padding: 0.1em 1em;
margin: 0;
font-size: 90%;
}
h1 {
margin: 0;
font-size: 1.5em;
padding-left: 0.3em;
}
nav ul {
padding: 0;
}
nav li {
display: block;
padding: 0 .75em;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
#content img {
float: none;
padding: 0;
margin: 0.1em;
width:100%;
}
figure {
float: none;
width:98%;
border: 2px solid Pink;
}
#content ul {
list-style-position: outside;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
label {
float: none;
text-align: left;
}
h2 {
text-align:center;
}
ul {
margin-left: 0%;
margin-right: 2%;
}
table {
width: 100%;
}
}