/* For mobile, Joey has changed a few width:750px into max-width:750px below.
   We may want to convert *more* of the width:750px to max-width:750px.
*/

body {
  text-align: center;
  font-family: Arial;
  }


#container {
  margin: 0 auto;
  max-width: 750px;
  text-align: left;
  font-family: Arial;

  }


#container2 {
  margin: 0 auto;
  width: 750px;
  text-align: left;
  font-family: Times;
  background-color: #CCFF33;
}

#header {
  background-color: #666666;
}

#author {
  float: left;
  width: 100%;
  background-color: #CCCCCC;
  text-align: center;
  padding-top: 10px;
  font-size: 18px;
  font-family: Arial;
  }


.main {
  max-width: 750px;
  text-align: left;
  float: left;
  margin-left: 1px;
  font-family: Arial;
  background-color: #FFFFFF;
  }

.main2 {
  width: 750px;
  text-align: justify;
  float: left;
  margin-left: 1px;
  font-family: Arial;
  background-color: #FFFFFF;
  }

/* Really we should make the title an h1, but just in case it isn't: */
div#title {
  /* The title should be larger than the other text. */
  font-size: 2.0rem;
  font-weight: bold;
  margin: 0.67em 0em;
}

#title {
  /* If the title is one long word, the word should split when the display is very narrow. */
  word-wrap: break-word;
}

.main a {
  color: #FF9900;
  text-decoration: none;
  }
  
.main2 a {
  color: #FF9900;
  text-decoration: none;
  }

.linktext {
  /* Prevent the navbar text from touching the edge when it wraps. */
  padding: 4px 8px;
}

.linktext a {
  /* We could introduce this in future, if we drop the   in the HTML. */
  /* padding: 1px 6px; */
  text-decoration: none;  
  color: #FFFFFF;
  font-size: 17px;
  }
  
 .mainx {
  width: 750px;
  text-align: left;
  float: left;
  margin-left: 1px;
  font-family: Arial;
  background-color: #99CC99;
  }

.mainx a {
  color: #339900;
  font-size: 16px;
  text-decoration: none;
  }


.menux {
width: 146px;
background-color: #FFFFFF;
float: left;

}


.menu2x {
width: 550px;
float: left;
border: 1px solid gray;
padding-left: 2px;
background-color: #FFFFFF;
text-align: right;
}

.column1 {
  width: 750px;
  text-align: left;
  float: left;
  margin-left: 1px;
  font-family: Arial;
  }

.column1 a {
  color: #339900;
  font-size: 16px;
  text-decoration: none;
  }

.column-left {
  width: 120px;
  text-align: left;
  float: left;
  font-family: Arial;
  font-weight: bold;
 
}


.column-right {
  width: 630px;
  text-align: left;
  float: left;
  font-family: Arial;
}

.column-right a {
  color: #339900;
  font-size: 16px;
  text-decoration: none;
  }
  

.column3 {
  width: 249px;
  text-align: left;
  float: left;
  margin-left: 1px;
  font-family: Arial;
}
  

.column3 a {
  color: #666600;
  font-size: 16px;
  text-decoration: none;
  }

.bottom {
  width: 100%;
  background-color: #333333;
  color: #CCCCCC;
  float: left;
  }  

.bottom a {
 text-decoration: none;  
  color: #FFFFFF;
  font-size: 17px;
  font-family: Arial;
  }  

img
{
 border-color: white;
}


.menu {
width: 146px;
background-color: #99CC99;
float: left;
border: 1px solid gray;
padding-left: 2px;
}

.menu2 {
width: 596px;
float: left;
border: 1px solid gray;
padding-left: 2px;
background-color: #FFFFFF;
}

.menu2 a {
text-decoration: none;
color: #333300;
}

.review1 {
  width: 120px;

  }


.review2 {
  width: 628px;

  }


/*********************************************************************/
/*** Code to make the pages responsive (for small mobile displays) ***/
/*********************************************************************/

@media (max-width: 768px) {

  .linktext {
    /* Prevent the navbar text from touching the edge when it wraps. */
    padding: 2px 6px 8px 6px;
  }

   /* Smaller text in the navbar. */
  .linktext a {
    font-size: 10px;
  }

  .menu, .menu2 {
    width: 100%;
    padding: 5px 0px 5px 2px;
  }
}

/* Make the header image less tall */
#header > img {
  /* This actually makes the image scale to be the same width as the page, but it does not grow above 750px. */
  max-width: 100%;
}

/* On the Generation%20Online_%20Writing.html page there is a Facebook widget that causes the third .column3 to grow larger than its 249px.  We override the width they suggest (450px) and use overflow:hidden; to force the div to crop to 249px instead of growing above it.  (Forcing it to wrap might be more desirable.) */
.fb_iframe_widget {
  /* display: block !important; */
  overflow: hidden !important;
}
.fb_iframe_widget span {
  width: 249px !important;
}