* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;   
}

a:link {color:#fa0;}
a:visited {color:#fa0;}
 
 
a:hover {color:#fff;}

a:active {color:#fa0; text-decoration: none;}
 

body {
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #ddd;
  background-color:#000;
  width: 1000px;  
}

body {
  overflow-y:scroll;
}

@media only screen and (max-width: 500px) 
{
    body 	{ width:100%; }
    img 	{ width:40%; padding: 10px 10px 5px 0px; min-width:150px;}
    p           { width: auto; min-width: 150px; max-width: 500px;}
}

@media only screen and (min-width: 500px) 
{
    body 	{ width:100%;}
    img 	{ width:40%; min-width:200px; padding: 10px 10px 5px 0px;}

@media only screen and (min-width: 1000px) 
{
    body 	{ width:1000px;}
    img 	{ width:500px; padding: 10px 10px 5px 0px;}
}

p {
   width: auto;
   min-width: 250px;
   max-width: 600px;
 }

textbox {

   height: 500px;
   float: left;
}

.topnav {
    overflow: hidden;
    background-color: #000;
}

.topnav a {
    float: left;
    display: block;
    color: #fa0;
    text-align: center;
    padding: 0px 0;
    margin: 0 10px 0 0;
    text-decoration: underline;   
    border-top: 5px solid #000;
    border-bottom: 5px solid #000;
}

.topnav a:hover {
    background-color: #000;
    color: #fff;    
    text-decoration: underline;   
    border-top: 5px solid #000;
    border-bottom: 5px solid #000;
}

.topnav a:active {
    background-color: #333;
    color: #fff;    
    text-decoration: underline;   
    border-top: 5px solid #000;
    border-bottom: 5px solid #000;
}

.content {
    background-color: #000;
    padding: 5px 5px 5px 5px;
    display: block;
    margin-left: 0;
    margin-right: auto;
    width: 100%;  
}

.footer {
	background-color: #333;
	color: #666;
    padding: 3px;
	text-align: center;
	max-width: 100%;
}