javajam8-javajam.css

body {
            background-color:#ffffcc;
            background-image:url(background.gif);
            color:#330000;
            font-family:Verdana,Arial,sans-serif;
}
#wrapper {
            margin-left:auto;
            margin-right:auto;
            width:80%;
            background-color:#ffffcc;
            min-width:700px;
            max-width:1024px;
            -webkit-box-shadow:5px 5px 5px #828282;
            -moz-box-shadow:5px 5px 5px #828282;
            box-shadow:5px 5px 5px #828282;
}
header,nav,main,footer {
            display:block;
}
header {
            background-color:#ccaa66;
            background-position:center;
            background-repeat:no-repeat;
            color:#000000;
            text-align:center;
}
nav {
            text-align:center;
            float:left;
            margin-top:10px;
            width:100px;
            font-weight:bold;
}
nav a {
            text-decoration:none;
            padding-bottom:15px;
}
nav a:link {
            color:#996633;
}
nav a:visited {
            color:#ccaa66;
}
nav a:hover {
            color:#330000;
}
nav ul {
            list-style-type:none;
}
main {
            padding-top:10px;
            padding-bottom:30px;
            padding-left:20px;
            padding-right:20px;
            margin-left:150px;
            background:#f2eab7;
            color:#000000;
            overflow:auto;
}
#menu {
            margin-left:auto;
            margin-right:auto;
            width:90%;
            border-spacing:0;
            background:#FFFFCC;
}
#menu td,th {
            padding:10px;
}
#menu tr:nth-child(odd) {
            background:#CCAA66;
}
footer {
            background-color:#ccaa66;
            color:#000000;
            font-size:.60em;
            font-style:italic;
            text-align:center;
            padding-top:20px;
            padding-bottom:20px;
            clear:top;
            clear:left;
            clear:right;
            clear:bottom;
}
footer a:link {
            color:#ffffcc;
}
footer a:visited {
            color:#f2eab7;
}
footer a:hover {
            color:#330000;
}
h1 {
            margin:0px;
            text-indent:100%;
            white-space:nowrap;
            overflow:hidden;
}
h2 {
            text-transform:uppercase;
            background-color:#ffffcc;
            color:#663300;
            font-size:1.2em;
            border-bottom:1px solid #000000;
            padding:5px 0px 0px 5px;
            clear:left;
}
.floatright {
            float:right;
            padding-left:20px;
}
.floatleft {
            float:left;
            padding-right:20px;
            padding-bottom:20px;
}
.details {
            padding-left:20%;
            padding-right:20%;
            overflow:auto;
}
#mobile {
            display:none;
}
#desktop {
            display:inline;
}
img {
            border-style:none;
}
@media only screen and (max-width:1024px) {
body {
            margin:0px;
            background-image:none;
}
#wrapper {
            min-width:0px;
            margin:0px;
            box-shadow:none;
}
header {
            background-image:javalogo.gif;
            background-position:center;
            background-repeat:no-repeat;
            height:80px;
}
nav {
            float:none;
            width:auto;
            padding-top:0px;
            margin-top:0px;
}
nav a {
            padding:1em;
            font-size:1.3em;
            width:8em;
            font-weight:bold;
            border-style:none;
}
nav ul {
            padding:0px;
            margin:0px;
}
nav li {
            display:inline-block;
}
main {
            padding:2em;
            margin:0px;
            font-size:90%;
}
}
@media only screen and (max-width:768px) {
nav a {
            display:block;
            padding:0.2em;
            width:auto;
            border-bottom:1px solid #330000;
}
nav li {
            display:block;
}
h2 {
            padding-top:0.5em;
            padding-right:0em;
            padding-bottom:0em;
            padding-left:0.5em;
            margin-right:0.5em;
}
.details {
            padding-right:0em;
            padding-left:0em;
}
.floatright {
            display:none; /* display set to none to remove winding road image on mobile devices */
}
.floatleft {
            padding-right:0.5em;
            padding-left:0.5em;
}
#mobile {
            display:inline;
}
#desktop {
            display:none;
}
}