/*
  Styles for my website

  Philip J. Guo
  http://alum.mit.edu/www/pgbovine/
*/

/* This defines the default look for the entire body of the HTML page */
body {
  margin-left: 20px;
  margin-top: 15px;
  background-color: white;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;*/

  font-size: 10pt;
}


/* This is used for the title of each page */
h1 {
  font-weight: normal;
  font-size: 18pt;
  font-family: Georgia, Palatino, Times, serif;
  margin-top: 0px;
  margin-bottom: 12px;
  line-height: 1.3em;  /* enforce single spacing so that Georgia works */
}


/* make all bold be italicized as well */
strong {
  font-style: italic;
}


/* This is used for subtitles, such as writing my name and email address
   below the title of articles */
h2,
div.articleDate {
  font-size: 11pt;
  font-weight: normal;
  /*font-family: Georgia, Palatino, Times, serif;*/
  font-family: Arial, sans-serif;

  color: #888888;
}

h2 {
  margin-top: 0px;
  margin-bottom: 25px;
}

div.subtitle {
  font-size: 13pt;
  font-weight: normal;
  font-family: Georgia, Palatino, Times, serif;
  margin-bottom: 12px;
}


div.articleDate {
  /*margin-top: -25px; */ /* risky! */
  margin-bottom: 30px;
}


h3,
h4 {
  color: #3D477B;
  /*color: #06266F;*/

  /*color: #000000;*/
  font-weight: normal;
  font-family: Georgia, Palatino, Times, serif;
  margin-bottom: 2px;
  margin-top: 2px;
}

/* This is used to provide section headings on a page */
h3 {
  font-size: 12pt;
  margin-top: 35px;

  padding-bottom: 2px;
  border-bottom: 1px solid #999;

  text-transform: uppercase;
}

/* Sub-section headings */
h4 {
  font-size: 12pt;
  margin-top: 25px;

  color: #000000;
  font-weight: bold;
}


table {
  border: 0px;
  font-size: 10pt;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* This is used to introduce overall content of a page and to provide a
   page summary */
div.summary {
  font-weight: normal;
  font-size: 12pt;

  margin-top: 25px;
  margin-right: 40px;
  margin-bottom: 20px;
  
  padding: 1px 1px 1px 1px;
}

div.summaryHeader {
  /*background-color: #79a4aa;*/
  /*background-color: #84a0a2;*/

  /*background-color: #8ba7a9;*/
  /*background-color: #258799;*/
  /*background-color: #5c99a4;*/
  background-color: #5f99a4;

  font-family: Georgia, Palatino, Times, serif;
  font-size: 12pt;
  font-weight: bold;

  color: #ffffff;
  padding-top: 1px;
  /*padding-bottom: 1px;*/
  padding-left: 5px;
  padding-right: 5px;
}

div.summaryBody {
  background-color: #f6f8f8;
  /*color: #3D477B;*/
  padding: 5px 5px 5px 5px;
  /*border: 1px solid #8ba7a9;*/
  border: 1px solid #5f99a4;
}


DIV.imageCaption {
  font-style: italic;
  font-size: 8pt;
  text-align: left;
  margin-top: 3px;
  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
  margin-bottom: 25px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

A.galleryLink {
  FONT-WEIGHT: normal;
  TEXT-DECORATION: none;
}

A.gallerySmallLink {
  FONT-SIZE: 8pt;
  FONT-WEIGHT: normal;
  TEXT-DECORATION: none;
}

/* This is for the 'Last modified: DATE' entries, usually
   at the bottom of selected pages */
DIV.lastModified
{

  border-width: 2px 0px 1px 0px;
  border-style: solid;
  border-color: #444444;
  padding-top: 3px;
  padding-bottom: 3px;

  margin-top: 35px;

  margin-bottom: 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #666666;
}

A,
A:visited {
  COLOR: #3D477B;
}

A:hover {
  color: #888888;
}


/* make these links a different blue to stand out from the header/sidebar */
#content A,
#content A:visited {
  color: #08258F;
}


.relatedPages {
  font-family: arial, sans-serif;
  font-size: 11pt;
  margin-top: 40px;
}

.relatedPages A,
.relatedPages A:visited {
  color: #000000;
}

.relatedPages .relatedPagesHeading {
  font-size: 13pt;
  /*font-weight: bold;*/
  /*color: #ef002a;*/
}


img.thumbnail {
  float: left;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 0px;
  clear: left;
}


ol {
  padding-left: 0px;
  margin-left: 1.6em; /* to get IE to work properly */
}

/* only for UNORDERED lists */
ul li {
  margin-left: -16pt; /* might backfire on me! */
  list-style-type: disc;
  /*list-style-type: circle;*/
}


/* Top-level components of my pages */

div#header {
  width: 800px;
  padding: 0px;
  margin: 0 auto; /* center */
}

div#headerpic {
  width: 800px;
  margin: 0 auto; /* center */

  /* hack to get working in IE */
  margin-bottom: -2px;
}

div#menubar {
  margin: 0 auto; /* center */
  width: 800px;

  padding: 0px;
  padding-top: 10px;

  padding-bottom: 30px;
  border-bottom: 1px solid #bbbbbb;

  clear: both;
}

div#menubar table {
}

div#menubar table td {
  text-align: center;
  padding-top: 0px;
  padding-right: 0px;
  font-size: 10pt;
  font-family: arial, sans-serif;
}

div#menubar table td a, 
div#menubar table td a:visited,
div#menubar table td a:hover {
  text-decoration: none; /* no underline */
}

table#contentPlusSidebar {
  width: 800px;
  margin: 0 auto; /* center */

  margin-top: 10px;
  margin-bottom: -2px;
}

table#contentPlusSidebar td {
  vertical-align: top;
}

table#contentPlusSidebar td#content {
  margin-left: 15px;
  margin-bottom: 20px;
  padding: 0px;
  padding-bottom: 50px;
}

/* make hr a noticeable solid line */
hr {
  height: 2px;
  border: 0;
  background-color: #444444;

  /*
  height: 1px;
  border: 0;
  background-color: #bbbbbb;
  */
}


/* All text in td#content is enclosed in this div */
td#content div#contentText {
  line-height: 1.5;  /* slightly more than single spacing, for prose text */

  padding-right: 100px; /* make prose text skinnier for readability */

  font-family: Georgia, Palatino, Times, serif;
  font-size: 12pt;
}


table#contentPlusSidebar td#sidebar {
  color: #222;
  width: 216px; /* moo likes the sidebar at 216px width in Chrome */
  /*min-width: 206px;*/ /* don't let it squish too small! */
  position: relative;

  font-size: 12px;

  padding-left: 8px;

  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: #bbbbbb;
  padding-bottom: 50px;
}

td#sidebar a:link,
td#sidebar a:visited
{
  text-decoration: none;
}

div.sidebarBio {
  margin-bottom: 35px;
  text-align: center;
}

DIV.sidebarHeading
{ 
  font-size: 18px;
  font-family: georgia, serif;
  text-align: center;
  margin-bottom: 10px;
}

DIV.sidebarCategory {
  border-bottom: 1px solid #999;
  color: #888;
  padding-bottom: 1px;
  margin: 36px 0 12px 0;
  font-size: 10pt;
}

DIV.sidebarEntry {
  margin: 0px 0px 15px 0px;
}


div#footer {
  margin: 0px auto; /* center */

  width: 800px;
  height: 20px;
  color: #eeeeee;
  font-size: 8pt;
  text-align: right;

  padding-top: 5px;
  padding-bottom: 6px;
  padding-right: 0px;

  clear: both;

  border-style: double;
  border-color: #bbbbbb;
  border-width: 4px 0px 0px 0px;

  color: #3D477B;
}


/* <tt>, <code>, and <pre> are usually for code snippets */
tt,
code,
pre {
  color: #555;
  font-weight: normal;
  font-size: 9pt;
}

pre { 
  line-height: 1em; /* single space */

  /* make sure not to overflow TOO WIDE */
  /* UGH this is sooooooo hard to get working properly in IE */
  overflow-x: auto;
  overflow-y: hidden; /* we never have to worry about vertical overflow,
                         so don't display UGLY scroll bar skeletons */
  width: 450px;
}

pre.codesnippet
{
  color: #444444;
  background-color: #eee;
  padding: 5px;
  padding-bottom: 6px;

  border-right-width: 1px;
  border-right-color: #aaaaaa;
  border-right-style: solid;

  border-bottom-width: 1px;
  border-bottom-color: #aaaaaa;
  border-bottom-style: solid;
}

pre.emailPre {
  margin-bottom: 30px;
  border: 1px dashed #aaaaaa;
  padding: 5px 8px 5px 8px;
}


/* creates a colored box with padding to display small blurbs or abstracts */
DIV.abstract,
div.quote { 
  /*background-color: #f6f8f8;*/
  /*background-color: #cccccc;*/

  /*background-color: #A7C2C7;*/
  /*background-color: #A3CDD5;*/
  /*background-color: #A8C8CE;*/

  /*background-color: #E5FADD;*/
  /*background-color: #EDFFE4;*/
  /*background-color: #F2FAD6;*/


  /*background-color: #F6FCE1;*/ /* prior yellowish tint */
  background-color: #f6f8f8;

  /*border: 1px dashed #aaaaaa;*/
  padding: 18px;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

/* box for quoting stuff */
div.quote {
  /*margin-left: 35px;*/
  margin-right: 60px;

  /*font-style: italic;*/
}