/* Classic Theme (Default) */
body
{
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #fff;
	background-repeat: repeat-x;
	background-image: url(images/background.gif);
}

h1
{
	font: normal 20px arial, verdana, 'Times New Roman', Serif;
	line-height: 20px;
	color: #d25956;
	padding-bottom:4px;
	margin: 0;
}

h2
{
	font: normal 18px arial, 'Times New Roman', Serif;
	line-height: 18px;
	color: #ab916b;
	padding: 0px 0px 4px 0px;
	margin: 0px 0px 0px 0px;
}

h3
{
	font: normal 14px arial, 'Times New Roman', Serif;
	line-height: 14px;
	color: #ab916b;
	margin: 0px 0px 0px 0;
	padding: 0;
	font-weight:bold;
}

p
{
	font: normal 11px/17px tahoma, arial, verdana, sans-serif;
	margin: 0;
	padding: 4px 0;
	color: #666;
}

.searchcontrolfont
{
	font: normal 11px/17px tahoma, arial, verdana, sans-serif;
	color: #666;
}

.searchinputcontrol
{
	width: 200px;
	font: normal 11px/17px tahoma, arial, verdana, sans-serif;
	color: #666;
}

p.pagenav
{
	font: normal 9px tahoma, arial, verdana, sans-serif;
	text-align: center;
	background-position: top left;
	background-repeat: repeat-x;
	background-image: url(images/dotted_line.gif);
}

p.news
{
	color: #9ba8c6;
	font-size: 11px;
	/*
	background-position: top left;
	background-repeat: repeat-x;
	background-image: url(images/dotted_line.gif);
	*/
}

/* Fix for dark theme - ensure readable contrast for .news rows */
[data-theme="dark"] .news {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] p.news {
	color: #9ba8c6;
}

ul
{
	list-style-image: url("images/bullet.gif");
	font: normal 11px/16px tahoma, arial, verdana, sans-serif;
	margin: 0 0 0 20px;
	padding: 0;
	color:#666;
}

a, a:link, a:visited
{
	color: #588DA2;
	text-decoration: none;
	padding: 1px 2px;
}

a:hover
{
	background-color: #E0EFF0;
	padding: 1px 2px;
}

a.review, a.review:hover, a.review:link, a.review:visited, a.review:hover
{
	padding: 0px 0px 0px 0px;
	text-decoration: none;
}

img
{
	border: none;
}

.wrapper
{

	width: 698px;
	text-align: left;
	margin: 0px auto;
	position: relative;
	padding: 42px;
	top: 0px;
	left: 0px;
}


.wrapper3
{
	width:698px;
	margin: 0px auto;
	overflow:hidden;
}


.ad
{
	width: 120px;
	float:right;
	text-align: left;
	margin-top: 200px;
}

.menulayout
{
	float: left;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	visibility: visible;
	z-index: 1;
	width: 120px;
	background-position:  top right;
	background-repeat: repeat-y;
	background-image: url(images/dotted_line_vert.gif)
}

.news, .newtompq
{
	padding: 5px 2px 2px 2px;
	background-position: top left;
	background-repeat: repeat-x;
	background-image: url(images/dotted_line.gif);
}

.newtompq
{
	background-color: #fff9d1;

}

.screenshot
{
	padding: 5px 2px 2px 2px;
	width: auto;
	background-position: top left;
	background-repeat: repeat-x;
	background-image: url(images/dotted_line.gif);
	margin-top: 4px;
	text-align: center;
}


div.main_body
{
	float: left;
	width: 565px;
	visibility: visible;
	z-index: 1;
	overflow: auto;
	position: relative;
	margin: 10px 0px 0px 0px;
	padding: 0px 6px 0px 6px;
	background-position:  top right;
	background-repeat: repeat-y;
	background-image: url(images/dotted_line_vert.gif)
}


.header
{
	top:20px;
	width:699px;
	height:149px;
	z-index:1;
	visibility:visible;
	background-image: url(images/MPQLogo-placeholder.gif);
}

.footer
{
	float: left;
	width:698px;
	text-align:right;
	font-size:9px;
	visibility:visible;
	z-index:1;
	text-indent: 10px;
	background-position: top left;
	background-repeat: repeat-x;
	background-image: url(images/dotted_line.gif);
}

.main
{
	width:698px;
	z-index:1;
	visibility:visible;
}

a img
{
	border: none;
}

.listleft
{
	float:left;
	width: 300px;
}

#listright, #listrightauthor
{
	width: 90px;
	/*width: 155px;*/
	float: right;
	text-align: right;
	padding: 0px 0px 0px 8px;
}

#listrightauthor
{
	width: 120px;
}

#fileright
{
	width: 130px;
	/*width: 155px;*/
	float: right;
	text-align: right;
	padding: 0px 0px 0px 8px;
}

/* ========================================
   MODERN THEME STYLES
   ======================================== */

/* CSS Custom Properties for Modern Theme */
[data-theme-style="modern"] {
  --primary-color: #dc2626;
  --primary-hover: #ef4444;
  --primary-light: #fecaca;
  --secondary-color: #64748b;
  --accent-color: #0891b2;
  --success-color: #059669;
  --warning-color: #d97706;
  --danger-color: #dc2626;
  
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f5f5f5;
  --bg-card: #ffffff;
  --bg-hover: #f9fafb;
  
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Dark mode overrides for modern theme */
[data-theme-style="modern"][data-theme="dark"] {
  --primary-color: #ef4444;
  --primary-hover: #f87171;
  --primary-light: #450a0a;
  
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --bg-tertiary: #262626;
  --bg-card: #171717;
  --bg-hover: #262626;
  
  --text-primary: #fafafa;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;
  
  --border-color: #404040;
  --border-light: #525252;
}

/* Modern theme body override */
[data-theme-style="modern"] body {
  background: var(--bg-secondary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  background-image: none;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Modern typography */
[data-theme-style="modern"] h1 {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  font-family: inherit;
  letter-spacing: -0.025em;
}

[data-theme-style="modern"] h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
  font-family: inherit;
  letter-spacing: -0.01em;
}

[data-theme-style="modern"] h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  font-family: inherit;
}

[data-theme-style="modern"] p {
  font-size: 0.95rem;
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: inherit;
}

/* Modern links */
[data-theme-style="modern"] a,
[data-theme-style="modern"] a:link,
[data-theme-style="modern"] a:visited {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.25rem;
  font-weight: 500;
  position: relative;
}

[data-theme-style="modern"] a:hover {
  color: var(--primary-hover);
  background-color: rgba(220, 38, 38, 0.1);
}

[data-theme-style="modern"][data-theme="dark"] a:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

[data-theme-style="modern"] a.review,
[data-theme-style="modern"] a.review:hover,
[data-theme-style="modern"] a.review:link,
[data-theme-style="modern"] a.review:visited {
  padding: 0;
  background: none;
}

/* Modern form elements */
[data-theme-style="modern"] .searchinputcontrol {
  width: 250px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  font-family: inherit;
}

[data-theme-style="modern"] .searchinputcontrol:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

/* Modern layout */
[data-theme-style="modern"] .wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: background-color 0.3s ease;
  text-align: left;
  width: auto;
  position: static;
  top: auto;
  left: auto;
}

[data-theme-style="modern"] .header {
  width: 100%;
  height: 160px;
  background: var(--bg-card);
  background-image: url(images/MPQLogo-placeholder.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--radius-xl);
  margin: 1rem 1rem 1rem 1rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  top: auto;
  z-index: auto;
  visibility: visible;
  transition: all 0.3s ease;
}

[data-theme-style="modern"][data-theme="light"] .header {
  box-shadow: none;
  border: none;
}

[data-theme-style="modern"][data-theme="dark"] .header {
  box-shadow: none;
  border: none;
}

[data-theme-style="modern"] .main {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
  width: 100%;
  z-index: auto;
  visibility: visible;
  padding: 0 1rem;
}

[data-theme-style="modern"] .menulayout {
  background: var(--bg-card);
  padding: 1rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  height: fit-content;
  position: sticky;
  top: 1rem;
  transition: all 0.3s ease;
  float: none;
  margin: 0;
  width: auto;
  background-image: none;
  z-index: auto;
  visibility: visible;
  font-size: 0.9rem;
}

/* Modern theme menu links and text */
[data-theme-style="modern"] .menulayout * {
  font-size: 0.9rem !important;
  line-height: 1.4;
  font-family: inherit;
}

[data-theme-style="modern"] .menulayout a {
  font-size: 0.9rem !important;
  padding: 0.4rem 0.5rem;
  display: block;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  border-radius: var(--radius-md);
  margin: 0.1rem 0;
  font-weight: 500;
}

[data-theme-style="modern"] .menulayout a:hover {
  color: var(--primary-color);
  background: var(--bg-hover);
  transform: translateX(2px);
}

[data-theme-style="modern"] .main_body {
  background: var(--bg-card);
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  min-height: 400px;
  transition: all 0.3s ease;
  float: none;
  width: auto;
  visibility: visible;
  z-index: auto;
  overflow: visible;
  position: static;
  margin: 0;
  background-image: none;
}

/* Modern content sections */
[data-theme-style="modern"] .news,
[data-theme-style="modern"] .newtompq {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  box-shadow: none;
  transition: all 0.3s ease;
  background-image: none;
  background-position: unset;
  background-repeat: unset;
  position: relative;
  overflow: hidden;
}

[data-theme-style="modern"] .news:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-theme-style="modern"] .news:hover:before {
  opacity: 1;
}

[data-theme-style="modern"] .news:hover,
[data-theme-style="modern"] .newtompq:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-color);
}

[data-theme-style="modern"] .newtompq {
  background: var(--primary-light);
  border-color: var(--primary-color);
  border-left-width: 4px;
}

[data-theme-style="modern"][data-theme="dark"] .newtompq {
  background: var(--primary-light);
  border-color: var(--primary-color);
}

[data-theme-style="modern"] .screenshot {
  padding: 0.75rem;
  margin-top: 0.5rem;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  width: auto;
  background-image: none;
  background-position: unset;
  background-repeat: unset;
}

/* Modern theme screenshot images - override hardcoded dimensions */
[data-theme-style="modern"] .screenshot img,
[data-theme-style="modern"] .screenshot p img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Override layout constraints for screenshot pages in modern theme */
[data-theme-style="modern"] #maincontainer {
  width: auto !important;
  max-width: 1200px !important;
  text-align: center !important;
}

[data-theme-style="modern"] #maincontainer .main {
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
}

[data-theme-style="modern"] #maincontainer .screenshot {
  width: auto !important;
  max-width: 100% !important;
  padding: 2rem !important;
}

/* Modern footer */
[data-theme-style="modern"] .footer {
  width: calc(100% + 2rem);
  text-align: center;
  font-size: 0.8rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 0;
  margin: 1.5rem -1rem 0 -1rem;
  float: none;
  text-indent: 0;
  background-image: none;
  background-position: unset;
  background-repeat: unset;
  z-index: auto;
  visibility: visible;
}

[data-theme-style="modern"] .footer a {
  color: var(--text-secondary);
  font-weight: 500;
}

[data-theme-style="modern"] .footer a:hover {
  color: var(--primary-color);
  background: none;
}

/* Modern lists */
[data-theme-style="modern"] ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.75rem 0;
  list-style-image: none;
  font-family: inherit;
}

[data-theme-style="modern"] ul li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  padding-left: 1.25rem;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

[data-theme-style="modern"] ul li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 600;
  opacity: 0.5;
  transition: all 0.2s ease;
}

[data-theme-style="modern"] ul li:hover:before {
  opacity: 1;
  transform: translateX(4px);
}

[data-theme-style="modern"] ul li:hover {
  color: var(--text-primary);
  padding-left: 1.5rem;
}

[data-theme-style="modern"] ul li:last-child {
  border-bottom: none;
}

/* Modern images */
[data-theme-style="modern"] img {
  border: none;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Modern page navigation */
[data-theme-style="modern"] p.pagenav {
  font-size: 0.875rem;
  text-align: center;
  padding: 0.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin: 0.5rem 0;
  background-image: none;
  background-position: unset;
  background-repeat: unset;
  font-family: inherit;
}

[data-theme-style="modern"] p.news {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Fix dark theme contrast for archive rows with .news class */
[data-theme-style="modern"][data-theme="dark"] .news {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-secondary);
}

[data-theme-style="modern"][data-theme="dark"] p.news {
  color: var(--text-muted);
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 9999px;
  width: auto;
  min-width: 5.5rem;
  height: 3.5rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  font-family: inherit;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .theme-toggle {
  background: rgba(23, 23, 23, 0.8);
  color: var(--text-primary, #fafafa);
}

.theme-toggle:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Modern buttons */
[data-theme-style="modern"] button,
[data-theme-style="modern"] input[type="submit"],
[data-theme-style="modern"] input[type="button"] {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: tahoma, arial, verdana, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

[data-theme-style="modern"] button:hover,
[data-theme-style="modern"] input[type="submit"]:hover,
[data-theme-style="modern"] input[type="button"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Modern select styling */
[data-theme-style="modern"] select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

[data-theme-style="modern"] select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

/* Responsive design for modern theme */
@media (max-width: 768px) {
  [data-theme-style="modern"] .wrapper {
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  
  [data-theme-style="modern"] .header {
    margin: 1rem 0.5rem;
    height: 150px;
    border-radius: var(--radius-lg);
  }
  
  [data-theme-style="modern"] .main {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
  }
  
  [data-theme-style="modern"] .menulayout {
    position: static;
    border-radius: var(--radius-lg);
  }
  
  [data-theme-style="modern"] .main_body {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
  
  [data-theme-style="modern"] h1 {
    font-size: 1.875rem;
  }
  
  [data-theme-style="modern"] h2 {
    font-size: 1.5rem;
  }
  
  [data-theme-style="modern"] .searchinputcontrol {
    width: 100%;
    max-width: 100%;
  }
  
  .theme-toggle {
    bottom: 1rem;
    right: 1rem;
    min-width: 4.5rem;
    height: 3rem;
    font-size: 0.8rem;
    padding: 0 1rem;
  }
  
  [data-theme-style="modern"] .footer {
    margin: 2rem -0.5rem 0 -0.5rem;
    width: calc(100% + 1rem);
  }
}

/* Animation for theme transitions */
[data-theme-style="modern"] * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}