/* -- Style Sheet for www.ukqrm.org.uk -- */
/* -------------- Body -------------- */
pre { font-family: monospace; }
body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; }

html, body, #contents { min-height: 100%; width: 100%; height: 100%; }
html>body, html>body #contents { height: auto; }

@media screen {
  html>body #menu { position: fixed; left: auto; }
  #contents { position: relative; top: 0; left: 0; margin-left: auto; margin-right: auto; width: 100%; overflow: hidden; }
  #content { margin-left: 125px; margin-right: 225px; margin-top: 40px; margin-bottom: 40px; }
  #squish { display: none; }
}

/* -------------- Image handling -------------- */
img { border: none; }
img[src*="pdf.png"] { width:20px; height:22px; vertical-align:middle; }
img[src*="text.png"] { width:20px; height:22px; vertical-align:middle; }

/* -------------- Texty stuff -------------- */
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify; color: #000000; background-color: transparent; padding-left: 15px; padding-right: 15px; }
.large-centre { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; color: #000000; text-align: center; background-color: transparent; }
.super { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-style: normal; font-weight: bold; color: #000000; text-align: center; background-color: transparent; }
.large { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; color: #000000; text-align: justify; background-color: transparent; }
.left { text-align: left; }
.centre { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.underline { text-decoration: underline; }
.date { font-family: Verdana, sans-serif; font-size: 9px; font-style: normal; font-weight: bold; color: #000000; background-color: transparent; }
.mono { font-family: "Courier New", Courier, monospace; font-size: 10px; font-style: normal; font-weight: bold; color: #000000; background-color: transparent; }
.highlight { background-color: #FFFF00; }
.warning { font-family: Verdana, sans-serif; font-size: 9px; font-style: normal; font-weight: bold; text-align: justify; color: #FF0000; background-color: transparent; }
.print { font-family: Verdana, sans-serif; font-size: 10px; font-style: normal; font-weight: bold; color: #000000; text-align: right; padding-top: 2px; padding-right: 4px; background-color: transparent; }
.tab { margin-left: 30px; }
.tab2 { margin-left: 60px; }
.quote { margin-left: 30px; margin-right: 30px; }
.quote2 { margin-left: 60px; margin-right: 60px; }
.quote3 { margin-left: 60px; margin-right: 60px; border: 2px solid #808080; border-radius: 5px; padding: 10px; }
.tweet { margin-left: auto; margin-right: auto; border: 2px solid #007E40; border-radius: 5px; width: 60%; padding: 5px; }
.q { font-size: 19px; font-weight: bold; color: #006600; }
.red { color: #FF0000; }
.green { color: #008000; }
.brown { color: #593E1A; }


/* -------------- hr lines -------------- */
hr.quarter { border: 1px solid; border-color: #007E40; width: 25%; margin-top: 0.5em; margin-bottom: 0.5em; }
hr.half { border: 1px solid; border-color: #007E40; width: 50%; margin-top: 0.5em; margin-bottom: 0.5em; }
hr.full { border: 1px solid; border-color: #007E40; width: 100%; margin-top: 0.5em; margin-bottom: 0.5em; }

/* -------------- Header -------------- */
@media screen {
  #header { position: fixed; top: 0; left: 0; width: 100%; height: 30px; background-color: #BBEEBB; color: #000000; border-bottom: 5px solid; }
  #header .spectrum { position: fixed; left: 0; top: 30px; width: 100%; height: 5px; background-image: url(https://www.ukqrm.org.uk/images/spectrum.jpg); background-repeat: no-repeat; background-size: 100%; }
  #header .left { font-family: Verdana, sans-serif; font-size: 20px; color: #000000; float: left; margin-left: 0.5em; margin-top: 2px; }
  #header .right { font-family: Verdana, sans-serif; font-size: 20px; color: #000000; float: right; margin-right: 0.5em; margin-top: 2px; }
}

/* -------------- Footer -------------- */
@media screen {
  #footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 15px; background-color: #FFFFFF; z-index: 1; background-image: url(https://www.ukqrm.org.uk/images/spectrum.jpg); background-repeat: no-repeat; background-size: 100%; }
  #footer .left { font-family: Verdana, sans-serif; font-size: 10px; font-weight: bold; color: #000000; float: left; margin-left: 0.5em; }
  #footer .right { font-family: Verdana, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; float: right; margin-right: 0.5em; }
}

/* -------------- Menu -------------- */
@media screen {
  #menu { top: 35px; left: 0; width: 120px; text-align: center; height: 100%; background-color: #FFFFFF; }
  #menu ul { list-style: none; padding: 0; margin: 1px; }
  #menu li { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-bottom: 2px; background-color: #83D083; white-space: nowrap;
   border: 2px solid; border-color: #007e40; border-radius: 5px; text-decoration: none; color: #000000; }
  #menu li a { display: block; text-decoration: none; color: #505050; font-weight: bold; background-color: transparent; }
  #menu li a:hover { color: #000000; background-color: #BBEEBB; text-decoration: none; border-radius: 5px; }
  #menu li a:visited { color: #505050; background-color: transparent; text-decoration: none; border-radius: 5px; }
  #menu li a:visited:hover { color: #000000; background-color: #BBEEBB; text-decoration: none; border-radius: 5px; }
  #index #menu_index a, #news #menu_news a, #legislation #menu_legislation a, #smps #menu_smps a, #plasma #menu_plasma a, #lighting #menu_lighting a,
  #misc #menu_misc a, #plt #menu_plt a, #finding #menu_finding a, #story #menu_story a, #glossary #menu_glossary a, #mp #menu_mp a,
  #vdsl #menu_vdsl a { color: #000000; background-color: #BBEEBB; text-decoration: none; border-radius: 5px; }
  #logos { position: fixed; bottom: 1.5em; width: 120px; text-align: center; }
}

/* -------------- Likes, Shares and Tests -------------- */
@media screen {
  #sidebar { position: fixed; top: 35px; right: 0; width: 220px; height: 100%; background-color: #FFFFFF; }
  #twitter { position: fixed; top: 40px; right: 0; height: 400px; width: 220px; background-color: transparent; text-align: center; } 
  #qr { position: fixed; bottom: 1.0em; right: 0px; height: auto; width: 220px; background-color: transparent; text-align: center; }
}

/* -------------- Links -------------- */
a { color: #0000FF; text-decoration: underline; background-color: transparent; }
a:hover, a:visited:hover { color: #FF0000; text-decoration: underline; background-color: transparent; }
a:visited { color: #000080; text-decoration: underline; background-color: transparent; }
a:active, a:visited:active { color: #008000; text-decoration: underline; background-color: transparent; }

a.link { color: #0000FF; text-decoration: underline; background-color: transparent; }
a.link:hover, a.link:visited:hover { color: #FF0000; background-color: #A0DFBF; }
a.link:visited { color: #000080; background-color: transparent; }
a.link:active, a.link:visited:active { color: #008000; background-color: #A0DFBF; }

/* -------------- Headings/Titles -------------- */
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: bold;	color: #003300; text-align: center; background-color: transparent; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold;	color: #006600; text-align: left; background-color: transparent; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold;	color: #009900; text-align: left; background-color: transparent; }

/* -------------- Tables -------------- */
td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #000000; background-color: transparent; text-align: justify; }
table.centre { margin-left: auto; margin-right: auto; }
.qr { margin-left: auto; margin-right: auto; border: 2px solid #007E40; border-radius: 5px; width: 40%; padding: 5px; }
.qr th { font-size: 12px; text-align: justify; }
.qr td { width: 33%; text-align: center; }
.glossary { margin-left: auto; margin-right: auto; width: 50%; border-collapse: collapse; }
.glossary th { font-size: 12px; font-weight: bold; background-color: #A0DFBF; padding-left: 2px; }
.glossary td { border: 1px solid #A0DFBF; }
.glossary td:nth-child(odd) { text-align: center; width: 15%; }
.glossary th:nth-child(even) { text-align: left; width: 85%; }
.affected { margin-left: auto; margin-right: auto; width: 40%; border-collapse: collapse; }
.affected th { font-size: 12px; font-weight: bold; background-color: #A0DFBF; padding-left: 2px; text-align: left; }
.affected td { border: 1px solid #A0DFBF; padding-left: 2px; text-align: left; }
.affected td:nth-child(odd) { width: 60%; }
.affected th:nth-child(even) { width: 40%; }
.vdsl { margin-left: auto; margin-right: auto; width: 20%; border-collapse: collapse; }
.vdsl th { font-size: 12px; font-weight: bold; background-color: #A0DFBF; padding-left: 2px; text-align: center; }
.vdsl td { border: 1px solid #A0DFBF; padding-left: 2px; text-align: center; }

/* -------------- Lists -------------- */
li { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; color: #000000; background-color: transparent; }

/* -------------- Mobile -------------- */
@media only screen and (max-width: 1600px) {
  img { max-width: 100%; max-height: 100vh; height: auto; object-fit: contain; }
  #sidebar { display: none; }
  #content { margin-right: 0.5em; }
  #squish { display: inline; }
}

@media only screen and (max-height: 700px) {
  #logos { display: none; }
  #qr { display: none; }
}

/* -------------- Print -------------- */

@media print {
  html>body #menu { position: fixed; }
  #contents { position: absolute; top: 0; left: 0; }
  #content { margin-left: 0.5em; margin-right: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em; }
  #sidebar { display: none; }
  #menu { display: none; }
  #header { display: none; }
  #footer { display: none; }
}