code { padding: 5px; background-color: lightgrey; text-align:left; font-weight: normal; font-size: 18px;  color: #000000; font-family: Helvetica; line-height: 140%; }

body {
   width: 60%;	
   margin: auto; 
   background: white url("background.jpg");  
   background-repeat: repeat-x;

}

.pub {   height: 20px;   width: 100%; font-size:14px; font-weight:bold; font-family: Helvetica; color:#000099;} /* Darker Blue */

.author {  margin: 10px 0px 10px 0px; width: 100%; font-size:14px; font-weight:bold; font-family: Helvetica; color:#000099;} /* Darker Blue */

.comment {  margin: 5px 0px 20px 0px; width: 100%; font-size:14px; font-weight:normal; line-height: 140%; font-family: Helvetica; color:#333; } /* Grey */

.sep {  margin: 2px; text-align:center; width: 100%; font-size:14px; font-weight:bold; font-family: Helvetica; color:#000000;} 

/* columns */
.column {
  float: left;
  width: 48%;
  margin: 1%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



footer { text-align:left; }
footer a, .Footer{ font-size:14px; }
footer p, .Footer{ font-size:14px; }


H1 { 	text-align:center; font-weight: normal; font-size: 28px; color: #000000; font-family: Helvetica; }
H2 { 	text-align:left; font-weight: bold; font-size: 24px; color: #000000; font-family: Helvetica; }
H3 { 	text-align:left; font-weight: bold; font-size: 20px; color: #000000; font-family: Helvetica; }
H4 { 	text-align:left; font-weight: bold; font-size: 18px; color: #000000; font-family: Helvetica; }
p { text-align:left; font-weight: normal; font-size: 18px; color: #333; font-family: Helvetica; line-height: 140%; }

/* links */

a:link { color: #000099; font-weight: bold;   text-decoration: none;} /* Darker Blue */
a:visited { color: #000099; font-weight: bold;   text-decoration: none;} /* Darker Blue */
a:hover {  color: #0033FF; font-weight: bold;   text-decoration: none;} /* Mid Blue */
a:active { color: #0033FF; font-weight: bold;   text-decoration: none;} /* Mid Blue */



#contents { float: center;  }
/* unordered list */


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0033FF;
  font-family: sans-serif;
  font-size: 18px;
  text-align:center;
}
/* list item */
li {
  float: center;

}
/* list item link */
li a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
}

li a:hover {
  background-color: #000099; /* Darker Blue */
}
/* Form styling */

input[type=text] {
  width: 100%;
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}
input, textarea {
  font-family:helvetica;
  font-size: 18px;;
}
input[type="submit" i]  {
  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;
  /* usual styles */
  padding:10px;
  border:none;
  background-color:#0066CC;
  color:#fff;
  font-weight:400;
  border-radius:4px;
  width:100%;
  transition-duration: 0.2s;
}

input:hover[type="submit"]  {
  background-color: #000099; /* Darker Blue */
}
/* images */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* If the screen size is 900px or less (small laptops and tablets), set the font-size */


/* If the screen size is 740px or less, (phones) set the font-size */

@media only screen and (max-width: 740px) {
body {  width: 90%; }
.column {   width: 100%;  }
H1 { font-size: 20px;	 }
H2 { font-size: 24px; }
H3 { font-size: 20px; }
H4 { font-size: 18px; }
UL { font-size: 16px; }
P { font-size: 18px; }

footer a, .Footer{ font-size:12px; }
footer p, .Footer{ font-size:12px; }
img {  width: 100%;  margin: 0px 0px 0px 0px; }
}