body {
margin:10px;
padding:0;
font-family:'Times New Roman', serif;
font-size:1.1em;
color:#662200;
background-color:#FFFFFF;
background-image:url(./images/keyboard.jpg);
background-repeat: repeat-x;
text-align:center;
}

.mainframe {
max-width:50em;
margin-left:auto;
margin-right:auto;
padding-top: 110px;
}

.topnav {
margin-left:auto;
margin-right:auto;
background-color:#f6f6d0;
}

a:link, a:visited, a:active {
color:#CC3300;
text-decoration:underline;
display:block;
}

.topnav a:link, .topnav a:visited, .topnav a:active {
display:inline-block;
font-weight:bold;
margin:0.5em;
padding:0 0.5em;
text-decoration:none;
}

a:hover {color:#000098;text-decoration:underline;}

.topnav a:hover {color:#662200;text-decoration:none;background-color:#eeeebb;}

.content {
max-width:700px;
margin-left:auto;
margin-right:auto;
padding-top: 2em;
}

.content a:link, .content a:visited, .content a:active {
display:inline;
text-decoration:none;
color:#662200;
font-weight: bold;
}

.content a:hover {
display:inline;
text-decoration:underline;
color:#662200;
}


.textright {
max-width:300px;
display:inline-block;
margin-left:auto;
margin-right:auto;
}

h1 {
font-size:140%;
font-weight:bold;
color:#662200;
margin-top:0;
}

h2 {
font-size:120%;
font-weight:bold;
color:#662200;
margin-top:1em;
}

h3 {
font-size:110%;
font-weight:bold;
color:#ff6633;
margin:2em 0;
border-bottom:solid 1px #ff6633;
text-align:right;
}

p {
font-size:110%;
max-width:44em;
margin-left:auto;
margin-right:auto;
clear:left;
}

.sub {
font-size:85%;
display: inline-block;
}

img {border:none;}

.imageleft {
float:left;
width:auto;
border:none;
margin:1em;
}

#chrisjewell {
float:left;
width:300px;
height:212px;
border:none;
margin:0 1em 2em 0;
}

#chrisjewellabout {
float:left;
width:147px;
height:258px;
border:none;
margin:0 1em 2em 0;
}

#chrisjewellrecordings {
float:left;
width:300px;
height:201px;
border:none;
margin:0 1em 2em 0;
}

li {
line-height:1.6em;
}

.imageright {
float:right;
width:auto;
border:none;
margin-left:3em;
margin-bottom:1em;
}

.imagerightlarge {
float:right;
width:320px;
border:none;
margin-left:10px;
margin-bottom:1em;
clear:right;
}

form {
background-color:#FFCC99;
max-width:400px;
padding:5px;
border: thin solid #cc0000;
margin-left:auto;
margin-right:auto;
}

table {background-color:#cc0000;}

tr {margin:1px;background-color:#FFCC99;}

td {padding:0.5em;}

.comment {
color:#330000;
background-color:#ffcccc;
margin:1em;
padding:1em;
border:inset medium #cc0000;
}

hr {margin-top:2em;margin-bottom:2em;}


.footer {
margin-left:auto;
margin-right:auto;
line-height:2.5em;
background-color:#f6f6d0;
}


@media only screen and (max-device-width: 650px) {
body {
margin:0px;
}
.topnav {
line-height:2em;
}
.topnav a:link, .topnav a:visited, .topnav a:active, .topnav a:hover {
padding:1em;
}
p {
margin:0px 5px;
}
}