body { font-family: Verdana, Arial, Helvetica, sans-serif}
p {font-size: 12px; color: #000000; text-decoration: none; font-weight: normal}
ol {display: inline-block }
ul {margin-left: 0; padding-left: 0; list-style: none; font-size: 14px;
    display: inline-block}
ul li {font-size: 12px; padding-left: 10px; background-image: url(gfx/ul.gif); background-repeat: no-repeat; background-position: 0px 4px;}

#leftnavmenu {background-color: #DDDDDD; padding: 5px;}
	p.leftnavmenu {padding-left: 10px; padding-top: 7px; width: 120px;}
	li.leftnavmenu {background-position: left center;}
#bodycontent {padding: 5px;}

textarea.comment {
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

a:link {color: #001177; text-decoration: none}
a.content:link {color: #001177; text-decoration: underline}
a:visited {color: #001177; text-decoration: none}
a:hover {color: #001177; text-decoration: underline}
a:active {color: #001177; text-decoration: underline}

h1 {font-size: 20px; color: #777777; font-weight: bold}
h2 {font-size: 12px; color: #555555; font-weight: bold}

div.hrnoshade {width: 100%; height: 0px; border-top: 1px solid #DDDDDD; background: #DDDDDD; overflow: hidden; margin-top:6px; margin-bottom:6px;}

.copy {font-size: 12px; color: #000000; text-decoration: none; font-weight: normal}
.serif {font-family: "Times New Roman", Times, serif;}
.large {font-size: 14px}
.medium {font-size: 12px}
.small {font-size: 10px}

.red {color: #9B121F}
.blue {color: #001177}
.twitterblue {color: #4099FF}
.gray {color: #999999}
.white {color: #FFFFFF}
.green {color: Green;}

.b {font-weight: bold}
.c {text-align: center}
.l {text-align: left}
.r {text-align: right}

.indent {padding-left: 25px}
.sidepad, .pad {padding-left: 12px; padding-right: 12px}
.tbpad, .pad {padding-top: 12px; padding-bottom: 12px}
.rowpad {padding-top: 3px; padding-bottom: 3px}
.border {border: 1px solid #DDDDDD}
.bggray {background-color: #DDDDDD}
.nou {text-decoration: none}
.u {text-decoration: underline}
.hilite {background-color: #FFFFCC;}
.hilite_strong {background-color: #FFFF99;}
.hide {display: none}
.nowrap {white-space: nowrap}

.tdot {padding-bottom: 10px; padding-top: 9px; border-bottom: 1px dotted #BBBBBB;}
.quote {color: #777777; padding-left: 12px; padding-right: 12px; font-size: 12px;}

.button-large { height: 2.5em; min-width: 9em; font-size: 14px;    letter-spacing: 0.6px; }

.signin-message { margin: 60px 0 18px 0; }
.login-input { margin-top: 6px; display: block; width: 105px; font-size: medium; padding: 4px;}
#loginButton  { width: 106px; margin-top: 12px;}
.banner-separator { padding: 0 15px 0 15px;}

.searchbutton { height: 26px; width: 26px; background-color: #999999; background:url("./gfx/magnifyingglass.jpg") no-repeat}
table.searchResults { border: 0px; border-spacing: 0px; font-size: 12px;}
	tr.searchResults:nth-of-type(odd) { background-color: #F6F6F6;}
	td.searchResults { padding: 3px 12px}
	td.searchResults:last-child  { white-space: nowrap; font-size: 10px; }
	tr.blueHR { background-color:#6699CC; }
	td.blueHR { padding: 0px; }	/* requires td to have colspan = 2 and contain <img width="1" border="0" height="1" src="gfx/-.gif">*/
#headerSearchForm { text-align: right; margin-bottom: 0px; white-space: nowrap}
#headerSearchBox { color: #999999; font-style:italic; height: 26px; border-style: outset; vertical-align: bottom  }
#headerSearchButton { vertical-align: bottom; padding:0 }

.tableExpander { text-align: center; font-style: italic; border: 1px; font-size: 10px;}

.markread { margin-bottom: 0px; }
.markAsRead--outside-table  { margin-top: 4px; position: relative;  right: -23px;}

tr.header { background-color: #6699CC; }
table.convTitlesList { border: 0; border-spacing: 0px; padding-top: 6px; padding-right: 4%;}
table.convTitlesIndent { padding-left: 25px; }
    td.convTitlesList { /*width: 54%*/ }
    td.header  { vertical-align: bottom }
#newConvLinkPositioner{ position: relative; top: 0;}
.hotkeyHint{ color: #aaa; font-weight: bold; padding: 0 4px 0 0;}
.newFlag { margin: 0 1px; vertical-align:bottom }

.popupMessage { background-color: #6699CC; color: white; border: 0px solid #7B7979; border-radius: 3px; float: left; font-size: 14px; padding:13px;
    -webkit-box-shadow: 0px 0px 8px -1px rgba(56, 56, 56, 1);
	-moz-box-shadow: 0px 0px 8px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 8px-1px rgba(56, 56, 56, 1);}
.toast { display: none; }
.toast--visible { display: flex; }
.toastOptionButton { 	float: right; font-size:14px;
	text-decoration: none; transition: all 0.2s ease 0s;}
.toastOptionButton:hover { background-color: #001177; }
.toastOptionButton:active { background-color: #001177; }
#undoArrow { filter:invert(1); margin-right:0.5em; height:14px; -webkit-filter: invert(100%); margin-top: 3px; margin-bottom: -3px;}

div.commentContainer {padding-bottom: 15px;}
table.commentContainer {max-width: 850px;}
.commentContents img { width: auto; }
img.squashed {
	width: 100%;
	height: auto;
	cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

/* Twitter blockquote formatting when script fails*/
blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 48px 16px 61px 16px; /* added 93 px to height so unformatted tweets match with loaded tweets */
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

.hamburger {
  display: none;
}



/* Media query for mobile devices */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  p {font-size: 16px;}
  ul {font-size: 20px;}

  li {
    font-size: 16px;
    padding: 10px;
    margin-bottom: 10px; /* Increase spacing for touch targets */
  }

  .copy {font-size: 16px;}
  .medium {font-size: 16px;}
  .small {font-size: 14px;}

  td.leftnavmenu {
    display: none;
  }

  .hamburger {
    display: block;
  }

  span.newIcon {
    display: none;
  }

  .hotkeyHint {
    display: none;
  }

  table.convTitlesIndent { padding-left: 0; }

  a.convTitlesList, td.convTitlesList { padding: 10px 0 10px 0 }

  table.commentContainer {max-width: 75vw;}

}