Difference between revisions of "MediaWiki:Common.css"

From Wiki
Jump to navigation Jump to search
 
(141 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
*/
 
*/
  
.first  { background-color:#00FFFF; }
+
.first  { background-color:#cfefff; }
.second  { background-color:#CCFF66; }
+
.second  { background-color:#b2f2b2; }
.third  { background-color:#FF6FCF; }
+
.third  { background-color:#f8bfbf; }
         .fourth  { background-color:#FFFF66; }
+
         .fourth  { background-color:#efef98; }
.cmd    { font-family:monospace; }
+
.cmd    { font-family:monospace; font-size: 10pt; }
 
.annot  { font-family:sans-serif; margin-top:1cm; }
 
.annot  { font-family:sans-serif; margin-top:1cm; }
 
.large  { font-size: 24pt; }
 
.large  { font-size: 24pt; }
 +
/* new color names, based on proposal by thala, to replace first ... fourth eventually */
 +
.arg1 { font-family:monospace; font-size: 10pt; background-color: #cfefff} 
 +
.arg2 { font-family:monospace; font-size: 10pt; background-color: #b2f2b2} 
 +
.arg3 { font-family:monospace; font-size: 10pt; background-color: #f8bfbf} 
 +
.arg4 { font-family:monospace; font-size: 10pt; background-color: #efef98} 
 +
.arg5 { font-family:monospace; font-size: 10pt; background-color: #bfc4ee} 
 +
.arg6 { font-family:monospace; font-size: 10pt; background-color: #f5deb3} 
 +
.arg7 { font-family:monospace; font-size: 10pt; background-color: #e4bfe4}
 +
 +
.doc1 { background-color: white; border-bottom: 1px solid #cfefff; border-left: 20px solid #cfefff; } 
 +
.doc2 { background-color: white; border-bottom: 1px solid #b2f2b2; border-left: 20px solid #b2f2b2; } 
 +
.doc3 { background-color: white; border-bottom: 1px solid #f8bfbf; border-left: 20px solid #f8bfbf; } 
 +
.doc4 { background-color: white; border-bottom: 1px solid #efef98; border-left: 20px solid #efef98; } 
 +
.doc5 { background-color: white; border-bottom: 1px solid #bfc4ee; border-left: 20px solid #bfc4ee; } 
 +
.doc6 { background-color: white; border-bottom: 1px solid #f5deb3; border-left: 20px solid #f5deb3; } 
 +
.doc7 { background-color: white; border-bottom: 1px solid #e4bfe4; border-left: 20px solid #e4bfe4; }
 +
 +
/* next three classes are generated by <syntax> */
 +
a.cmdref:link    { color: #872222; text-decoration: none;}
 +
a.cmdref:visited { color: #872222; text-decoration: none;}
 +
a.cmdref:hover  { color: #36b;    text-decoration: none;}
 +
a.cmdref:active  { color: #872222; text-decoration: none;}
 +
 +
a.cmdinst:link    { color: #872222; text-decoration: none; font-style: italic;}
 +
a.cmdinst:visited { color: #872222; text-decoration: none; font-style: italic;}
 +
a.cmdinst:hover  { color: #36b;    text-decoration: none; font-style: italic;}
 +
a.cmdinst:active  { color: #872222; text-decoration: none; font-style: italic;}
 +
 +
a.cmdvalue:link    { color: #872222; text-decoration: none; font-style: italic;}
 +
a.cmdvalue:visited { color: #872222; text-decoration: none; font-style: italic;}
 +
a.cmdvalue:hover  { color: #36b;    text-decoration: none; font-style: italic;}
 +
a.cmdvalue:active  { color: #872222; text-decoration: none; font-style: italic;}
 +
 +
span.iref span.arg1 { border: 5px solid #cfefff; }
 +
span.iref span.arg2 { border: 5px solid #b2f2b2; } 
 +
span.iref span.arg3 { border: 5px solid #f8bfbf; } 
 +
span.iref span.arg4 { border: 5px solid #efef98; } 
 +
span.iref span.arg5 { border: 5px solid #bfc4ee; } 
 +
span.iref span.arg6 { border: 5px solid #f5deb3; } 
 +
span.iref span.arg7 { border: 5px solid #e4bfe4; }
 +
 +
span.ireferror { background-color: red; }
 +
 +
span.variantname::before {
 +
  content: ' (';
 +
}
 +
 +
span.variantname::after {
 +
  content: ' variant)';
 +
}
 +
 +
span.variantname {
 +
    font-family:sans-serif;
 +
    font-weight:normal;
 +
    font-size: large;
 +
}
 +
 +
    /* Style the buttons that are used to open the tab content */
 +
    button.tablinks {
 +
      display: block;
 +
      background-color: transparent;
 +
      padding: 5px 5px;
 +
      width: 30%;
 +
      outline: none;
 +
      text-align: left;
 +
      cursor: pointer;
 +
      font-size: 14pt;
 +
      font-weight: bold;
 +
      transition: 0.3s;
 +
      margin-top: 0.70em; margin-bottom: 0.70em; padding-top: 0.5rem; padding-left: 0.5rem;  border-bottom: none; border-left: solid 8px #872222;
 +
    }
 +
 +
    /* Change background color of buttons on hover */
 +
    button.tablinks:hover {
 +
      background-color: #ddd;
 +
    }
 +
 +
    /* Create an active/current "tab button" class */
 +
    button.tablinks.active {
 +
      background-color: #ccc;
 +
      color: black;
 +
    }
 +
 +
    /* Style the tab content */
 +
    .contextxmlform {
 +
      margin-left: 10px;
 +
      display: none;
 +
    }
 +
#shortdescform {
 +
      margin-left: 10px;
 +
      display: block;
 +
}
 +
h1.command {
 +
  font-family:monospace;
 +
    font-weight: bold;
 +
  font-size: xx-large;
 +
}
  
 
span.minor {
 
span.minor {
Line 38: Line 135:
  
 
pre.tex { color:#000000;  }
 
pre.tex { color:#000000;  }
pre span.cs { color:#007F00; }
+
pre span.documentcs { color:#007F00; font-weight: bold;}
 +
pre span.stylecs { color:#007F00; }
 +
pre span.systemcs { color:#00007F; }
 +
pre span.protectedcs { color:#7F007F; }
 +
pre span.cs { color:#00007F; } /* basic, ends up as primitives only */
 
pre span.def { color:#00007F; }
 
pre span.def { color:#00007F; }
 
pre span.comment { color:#7F7F00; }
 
pre span.comment { color:#7F7F00; }
 
pre span.br { color:#7F0000; }
 
pre span.br { color:#7F0000; }
 +
pre span.brx { color:#00007F; }
  
 
pre.xml { color:#000000;  }
 
pre.xml { color:#000000;  }
Line 53: Line 155:
 
/* TWEAKS OF THE DEFAULTS                                                      */
 
/* TWEAKS OF THE DEFAULTS                                                      */
  
.mw-body-content h1 { margin-top: 0.7em; padding-top: 0px; margin-bottom: 0.5em;}
+
/*background-color: #eeeedc ; border-top: solid 1px #872222; border-bottom: none; } */
.mw-body-content h2 { margin-top: 0.6em; padding-top: 0px; margin-bottom: 0.4em; border-style: none;}
+
.mw-body-content h1 { margin-top: 0.70em; margin-bottom: 0.70em; padding-top: 0.5rem; padding-left: 0.5rem;  border-bottom: none; border-left: solid 8px #872222; }
.mw-body-content h3 { margin-top: 0.5em; padding-top: 0px; margin-bottom: 0.3em; border-style: none;}
+
.mw-body-content h2 { margin-top: 0.70em; margin-bottom: 0.60em; padding-top: 0px; }
 +
.mw-body-content h3 { margin-top: 0.70em; margin-bottom: 0.50em; padding-top: 0px; border-style: none;}
  
 
.mw-body-content ul { margin-top: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;}
 
.mw-body-content ul { margin-top: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;}
 
.mw-body-content li ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0.5px; padding-bottom: 0.px;}
 
.mw-body-content li ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0.5px; padding-bottom: 0.px;}
  
 +
/* comment after feedback on mailing list 20200629
 +
https://lists.contextgarden.net/pipermail/wiki/2020/000112.html*/
  
.mw-parser-output a.external:link    { color: #cc3333; text-decoration: none;}
+
.mw-parser-output a.external:link    { color: #872222; text-decoration: none;}
.mw-parser-output a.external:visited { color: #cc3333; text-decoration: none;}
+
.mw-parser-output a.external:visited { color: #872222; text-decoration: none;}
 
.mw-parser-output a.external:hover  { color: #36b;    text-decoration: none;}
 
.mw-parser-output a.external:hover  { color: #36b;    text-decoration: none;}
.mw-parser-output a.external:active  { color: #cc3333; text-decoration: none;}
+
.mw-parser-output a.external:active  { color: #872222; text-decoration: none;}
  
#mw-panel * {  
+
.mw-parser-output a.extiw:link    { color: #872222; text-decoration: none;}
  a:link    { color: #cc3333; text-decoration: none;}
+
.mw-parser-output a.extiw:visited { color: #872222; text-decoration: none;}
  a:visited { color: #cc3333; text-decoration: none;}
+
.mw-parser-output a.extiw:hover  { color: #36b;    text-decoration: none;}
  a:hover  { color: #36b;    text-decoration: none;}
+
.mw-parser-output a.extiw:active  { color: #872222; text-decoration: none;}
  a:active  { color: #cc3333; text-decoration: none;}
+
 
 +
#mw-panel .portal .body li a:link    { color: #872222; text-decoration: none;}
 +
#mw-panel .portal .body li a:visited { color: #872222; text-decoration: none;}
 +
#mw-panel .portal .body li a:hover  { color: #36b;    text-decoration: none;}
 +
#mw-panel .portal .body li  a:active { color: #872222; text-decoration: none;}
 +
 
 +
a:link    { color: #872222; text-decoration: none;}
 +
a:visited { color: #872222; text-decoration: none;}
 +
a:hover  { color: #36b;    text-decoration: none;}
 +
a:active  { color: #872222; text-decoration: none;}
 +
 
 +
a.external:link    { color: #872222; text-decoration: none;}
 +
a.external:visited { color: #872222; text-decoration: none;}
 +
a.external:hover  { color: #36b;    text-decoration: none;}
 +
a.external:active  { color: #872222; text-decoration: none;}
 +
 
 +
a.new:link    { color: red; text-decoration: none;}
 +
a.new:visited { color: red; text-decoration: none;}
 +
a.new:hover  { color: red; text-decoration: none;}
 +
a.new:active  { color: red; text-decoration: none;}
 +
 
 +
 
 +
 
 +
/*==============================================================================*/
 +
/* Specific to vector                                                          */
 +
 
 +
.mw-body {
 +
  border:1px solid #c18e8e;
 +
  border-right-width:0;
 +
  margin-top:-1px
 +
}
 +
 
 +
 
 +
.vectorTabs li {
 +
background-image: url(https://wiki.contextgarden.net/images/8/8b/tab-normal-fade_context.png);
 +
}
 +
 
 +
.vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3 {
 +
    background-image: url(/skins/Vector/images/tab-separator.png?09d4b);
 +
    background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#c18e8e 100%);
 +
}
 +
 
 +
.vectorTabs li a { color: #872222; }
 +
.vectorMenu li a { color: #872222; }
 +
 
 +
.vectorTabs #ca-unwatch.icon a {
 +
background-image: url(https://wiki.contextgarden.net/images/7/79/unwatch-icon_context.png);
 +
}
 +
.vectorTabs #ca-unwatch.icon a:hover, .vectorTabs #ca-unwatch.icon a:focus {
 +
background-image: url(https://wiki.contextgarden.net/images/7/79/unwatch-icon_context.png);
 +
}
 +
 
 +
.vectorTabs #ca-watch.icon a  {
 +
background-image: url(https://wiki.contextgarden.net/images/b/b2/watch-icon_context.png);
 +
}
 +
.vectorTabs #ca-watch.icon a:hover, .vectorTabs #ca-watch.icon a:focus {
 +
background-image: url(https://wiki.contextgarden.net/images/b/b2/watch-icon_context.png);
 
}
 
}
  
a:link    { color: #cc3333; text-decoration: none;}
 
a:visited { color: #cc3333; text-decoration: none;}
 
a:hover  { color: #36b; text-decoration: none;}
 
a:active  { color: #cc3333; text-decoration: none;}
 
  
  
Line 89: Line 246:
 
     grid-template-columns:  100px 100px 100px 100px 100px ;
 
     grid-template-columns:  100px 100px 100px 100px 100px ;
 
     grid-gap: 1.5rem;
 
     grid-gap: 1.5rem;
     justify-content: start;
+
     justify-content: space-evenly;
 
     list-style: none;  
 
     list-style: none;  
 
     padding: 1rem;
 
     padding: 1rem;
Line 99: Line 256:
 
#WelcRework > li {
 
#WelcRework > li {
 
     text-align:center;
 
     text-align:center;
     background-color: #eeeedc ;
+
     background-color: #eeeee4 ;
     box-shadow: 0px 8px 8px gray;
+
     box-shadow: 0px 5px 8px rgba(0,0,0,.25);
 
     height: stretch;
 
     height: stretch;
     width=100px;
+
     width: 100px;
     border-top: solid 4px #cc3333;
+
     border-bottom: solid 4px #872222;
 
     height: stretch;
 
     height: stretch;
 
     height: 140px;
 
     height: 140px;
Line 113: Line 270:
 
#DownloadRework {
 
#DownloadRework {
 
     display: grid;
 
     display: grid;
     grid-template-columns: 140px 140px 140px;  
+
     grid-template-columns: 150px 150px 150px;  
     grid-gap: 1.5rem;
+
     grid-gap: 1em;
     justify-content: start;
+
     justify-content: space-evenly;
 
     list-style: none;  
 
     list-style: none;  
 
     padding: 0rem;
 
     padding: 0rem;
Line 125: Line 282:
 
#DownloadRework > li {
 
#DownloadRework > li {
 
     text-align:left;
 
     text-align:left;
     background-color: #eeeedc ;
+
     background-color: #eeeee4 ;
     box-shadow: 0px 8px 8px gray;
+
     box-shadow: 0px 5px 8px rgba(0,0,0,.25);
 
     height: stretch;
 
     height: stretch;
     border-top: solid 4px #cc3333;
+
     border-bottom: solid 4px #872222;
 
     padding: 0.25rem;
 
     padding: 0.25rem;
 
}
 
}
Line 138: Line 295:
  
 
#DownloadRework > li> ul {
 
#DownloadRework > li> ul {
   padding: 0px 0.5rem;
+
   padding: 0px 0.rem;
 
}
 
}
 
#DownloadRework > li> ul > li {
 
#DownloadRework > li> ul > li {
Line 151: Line 308:
 
   list-style: none;
 
   list-style: none;
 
   display: grid;
 
   display: grid;
   grid-template-columns: 90px 90px 90px 90px 90px 90px 90px 90px;
+
   grid-template-columns: repeat(auto-fit, 100px);
   grid-gap: 0.25rem 0.25rem;
+
   grid-gap: 0.2em 1.5em;
   justify-content: center;
+
   justify-content: space-evenly;
 
   overflow: hidden;
 
   overflow: hidden;
   padding: 1rem 0px;
+
   padding: 1em;
 
   margin: 0;
 
   margin: 0;
  width: 100%;
 
 
}
 
}
  
Line 166: Line 322:
 
   font-size: 75%;
 
   font-size: 75%;
 
   padding: 0.1rem 0.1rem;
 
   padding: 0.1rem 0.1rem;
  margin: 0;
 
 
   border-radius: 8px;
 
   border-radius: 8px;
   border: solid 2px #cc3333;
+
   border: solid 2px #872222;
 +
  width: 100px;
 
}
 
}
  
Line 175: Line 331:
 
   list-style: none;
 
   list-style: none;
 
   display: grid;
 
   display: grid;
   grid-template-columns: repeat(auto-fit, 140px);
+
   grid-template-columns: repeat(auto-fit, 100px);
 +
  font-size: 85%;
 
   grid-gap: 1.5rem;
 
   grid-gap: 1.5rem;
   justify-content: center;
+
   justify-content: space-evenly;
 
   overflow: hidden;
 
   overflow: hidden;
 
   padding: 1rem;
 
   padding: 1rem;
Line 187: Line 344:
 
   display: none;
 
   display: none;
 
   text-align:center;
 
   text-align:center;
   background-color: #eeeedc ;
+
   background-color: #eeeee4 ;
   box-shadow: 0px 8px 8px gray;
+
   box-shadow: 0px 5px 8px rgba(0,0,0,.25);
 
   height: stretch;
 
   height: stretch;
   border-top: solid 4px #cc3333;
+
   border-bottom: solid 4px #872222;
 
}
 
}
  
Line 204: Line 361:
 
     border-radius:100%;
 
     border-radius:100%;
 
   }
 
   }
 +
}
 +
 +
/*==============================================================================*/
 +
/* TWO and THREE COMLUMNS LISTS                                                */
 +
 +
div.mw-body-content { max-width: 70em; margin: 0 auto;}
 +
 +
ul.ColumnsUnderLevel1 {
 +
  display: grid;
 +
  grid-template-columns: repeat(auto-fit, minmax(15em, 29em));
 +
  grid-gap: 1.9em;
 +
  justify-content: space-evenly;
 +
  list-style: none;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
 +
ul.TwoColumnsHighlight {
 +
  display: grid;
 +
  grid-template-columns: repeat(auto-fit, minmax(15em, 29em));
 +
  grid-gap: 1.9em;
 +
  justify-content: space-evenly;
 +
  list-style: none;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
 +
ul.ThreeColumnsHighlight {
 +
  display: grid;
 +
  grid-template-columns: repeat(auto-fit, minmax(15em, 19em));
 +
  grid-gap: 1.4em;
 +
  justify-content: space-evenly;
 +
  list-style: none;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
 +
 +
li.ColumnsHighlight {
 +
  height:stretch;
 +
  padding: 10px;
 +
  background-color: #eeeee4;
 +
  box-shadow: 0px 5px 8px rgba(0,0,0,.25);
 +
  border-bottom: solid 4px #872222;
 +
}
 +
 +
/*==============================================================================*/
 +
/* COLOR NABOX                                                                  */
 +
 +
ul.Navbox {
 +
  display: grid;
 +
  grid-template-columns: repeat(6, 9.5em);
 +
  grid-gap:0.5em;
 +
  justify-content: space-between;
 +
  list-style: none;
 +
  padding: 0rem;
 +
  margin: 0;
 +
  margin-top: 1em;
 +
  margin-bottom: 1em;
 +
}
 +
 +
ul.Navbox > li {
 +
  background-color: #f6f6f6;
 +
  font-size:80%;
 +
}
 +
 +
ul.Navbox > li > ul {
 +
  padding: 0rem;
 +
  padding-left: 0.5em;
 +
  margin: 0;
 +
  list-style: none;
 
}
 
}

Latest revision as of 11:24, 8 January 2021

/* 
<pre>
*/

	.first   { background-color:#cfefff; }
	.second  { background-color:#b2f2b2; }
	.third   { background-color:#f8bfbf; }
        .fourth  { background-color:#efef98; }
	.cmd     { font-family:monospace; font-size: 10pt; }
	.annot   { font-family:sans-serif; margin-top:1cm; }
	.large   { font-size: 24pt; }
/* new color names, based on proposal by thala, to replace first ... fourth eventually */
.arg1 { font-family:monospace; font-size: 10pt; background-color: #cfefff}  
.arg2 { font-family:monospace; font-size: 10pt; background-color: #b2f2b2}  
.arg3 { font-family:monospace; font-size: 10pt; background-color: #f8bfbf}  
.arg4 { font-family:monospace; font-size: 10pt; background-color: #efef98}  
.arg5 { font-family:monospace; font-size: 10pt; background-color: #bfc4ee}  
.arg6 { font-family:monospace; font-size: 10pt; background-color: #f5deb3}  
.arg7 { font-family:monospace; font-size: 10pt; background-color: #e4bfe4} 

.doc1 { background-color: white; border-bottom: 1px solid #cfefff; border-left: 20px solid #cfefff; }  
.doc2 { background-color: white; border-bottom: 1px solid #b2f2b2; border-left: 20px solid #b2f2b2; }  
.doc3 { background-color: white; border-bottom: 1px solid #f8bfbf; border-left: 20px solid #f8bfbf; }  
.doc4 { background-color: white; border-bottom: 1px solid #efef98; border-left: 20px solid #efef98; }  
.doc5 { background-color: white; border-bottom: 1px solid #bfc4ee; border-left: 20px solid #bfc4ee; }  
.doc6 { background-color: white; border-bottom: 1px solid #f5deb3; border-left: 20px solid #f5deb3; }  
.doc7 { background-color: white; border-bottom: 1px solid #e4bfe4; border-left: 20px solid #e4bfe4; } 

/* next three classes are generated by <syntax> */
a.cmdref:link    { color: #872222; text-decoration: none;} 
a.cmdref:visited { color: #872222; text-decoration: none;} 
a.cmdref:hover   { color: #36b;    text-decoration: none;} 
a.cmdref:active  { color: #872222; text-decoration: none;}

a.cmdinst:link    { color: #872222; text-decoration: none; font-style: italic;} 
a.cmdinst:visited { color: #872222; text-decoration: none; font-style: italic;} 
a.cmdinst:hover   { color: #36b;    text-decoration: none; font-style: italic;} 
a.cmdinst:active  { color: #872222; text-decoration: none; font-style: italic;}

a.cmdvalue:link    { color: #872222; text-decoration: none; font-style: italic;} 
a.cmdvalue:visited { color: #872222; text-decoration: none; font-style: italic;} 
a.cmdvalue:hover   { color: #36b;    text-decoration: none; font-style: italic;} 
a.cmdvalue:active  { color: #872222; text-decoration: none; font-style: italic;}

span.iref span.arg1 { border: 5px solid #cfefff; }
span.iref span.arg2 { border: 5px solid #b2f2b2; }  
span.iref span.arg3 { border: 5px solid #f8bfbf; }  
span.iref span.arg4 { border: 5px solid #efef98; }  
span.iref span.arg5 { border: 5px solid #bfc4ee; }  
span.iref span.arg6 { border: 5px solid #f5deb3; }  
span.iref span.arg7 { border: 5px solid #e4bfe4; }

span.ireferror { background-color: red; }

span.variantname::before {
  content: ' (';
}

span.variantname::after {
  content: ' variant)';
}

span.variantname {
    font-family:sans-serif; 
    font-weight:normal;
    font-size: large;
}

    /* Style the buttons that are used to open the tab content */
    button.tablinks {
      display: block;
      background-color: transparent;
      padding: 5px 5px;
      width: 30%;
      outline: none;
      text-align: left;
      cursor: pointer;
      font-size: 14pt;
      font-weight: bold;
      transition: 0.3s;
      margin-top: 0.70em; margin-bottom: 0.70em; padding-top: 0.5rem; padding-left: 0.5rem;  border-bottom: none; border-left: solid 8px #872222;
    }

    /* Change background color of buttons on hover */
    button.tablinks:hover {
      background-color: #ddd;
    }

    /* Create an active/current "tab button" class */
    button.tablinks.active {
      background-color: #ccc;
      color: black;
    }

    /* Style the tab content */
    .contextxmlform {
      margin-left: 10px;
      display: none;
    }
#shortdescform {
      margin-left: 10px;
      display: block;
}
h1.command {
  font-family:monospace; 
    font-weight: bold;
  font-size: xx-large;
}

span.minor {
    font-style:italic;
    font-weight:normal;
}

#googleSearch {
    width: 10.9em;
    margin: 0;
    font-size: 95%;
}

#search_string  {
    width: 10.9em;
    margin: 0;
    font-size: 95%;
}

#bodyContent a[href ^="javascript:"] {
    background: none;
    padding: 0px;
    text-decoration: none ;
}

/* pg: new markup <texcode>..</texcode> */
/* th: colors adjusted to be closer to standard hans' usage */

pre.tex { color:#000000;  }
pre span.documentcs { color:#007F00; font-weight: bold;}
pre span.stylecs { color:#007F00; }
pre span.systemcs { color:#00007F; }
pre span.protectedcs { color:#7F007F; }
pre span.cs { color:#00007F; } /* basic, ends up as primitives only */
pre span.def { color:#00007F; }
pre span.comment { color:#7F7F00; }
pre span.br { color:#7F0000; }
pre span.brx { color:#00007F; }

pre.xml { color:#000000;  }
pre span.name    { color:#3366BB; }

/* 
</pre>
*/

/*==============================================================================*/
/* TWEAKS OF THE DEFAULTS                                                       */

/*background-color: #eeeedc ; border-top: solid 1px #872222; border-bottom: none; } */
.mw-body-content h1 { margin-top: 0.70em; margin-bottom: 0.70em; padding-top: 0.5rem; padding-left: 0.5rem;  border-bottom: none; border-left: solid 8px #872222; }
.mw-body-content h2 { margin-top: 0.70em; margin-bottom: 0.60em; padding-top: 0px; }
.mw-body-content h3 { margin-top: 0.70em; margin-bottom: 0.50em; padding-top: 0px; border-style: none;}

.mw-body-content ul { margin-top: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;}
.mw-body-content li ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0.5px; padding-bottom: 0.px;}

/* comment after feedback on mailing list 20200629
https://lists.contextgarden.net/pipermail/wiki/2020/000112.html*/

.mw-parser-output a.external:link    { color: #872222; text-decoration: none;}
.mw-parser-output a.external:visited { color: #872222; text-decoration: none;}
.mw-parser-output a.external:hover   { color: #36b;    text-decoration: none;}
.mw-parser-output a.external:active  { color: #872222; text-decoration: none;}

.mw-parser-output a.extiw:link    { color: #872222; text-decoration: none;}
.mw-parser-output a.extiw:visited { color: #872222; text-decoration: none;}
.mw-parser-output a.extiw:hover   { color: #36b;    text-decoration: none;}
.mw-parser-output a.extiw:active  { color: #872222; text-decoration: none;}

#mw-panel .portal .body li  a:link    { color: #872222; text-decoration: none;}
#mw-panel .portal .body li  a:visited { color: #872222; text-decoration: none;}
#mw-panel .portal .body li  a:hover   { color: #36b;    text-decoration: none;}
#mw-panel .portal .body li  a:active  { color: #872222; text-decoration: none;}

a:link    { color: #872222; text-decoration: none;} 
a:visited { color: #872222; text-decoration: none;} 
a:hover   { color: #36b;    text-decoration: none;} 
a:active  { color: #872222; text-decoration: none;}

a.external:link    { color: #872222; text-decoration: none;} 
a.external:visited { color: #872222; text-decoration: none;} 
a.external:hover   { color: #36b;    text-decoration: none;} 
a.external:active  { color: #872222; text-decoration: none;}

a.new:link    { color: red; text-decoration: none;}
a.new:visited { color: red; text-decoration: none;}
a.new:hover   { color: red; text-decoration: none;}
a.new:active  { color: red; text-decoration: none;}



/*==============================================================================*/
/* Specific to vector                                                           */

.mw-body {
  border:1px solid #c18e8e;
  border-right-width:0;
  margin-top:-1px
 }


.vectorTabs li { 
background-image: url(https://wiki.contextgarden.net/images/8/8b/tab-normal-fade_context.png);
}

.vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3 {
    background-image: url(/skins/Vector/images/tab-separator.png?09d4b);
    background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#c18e8e 100%);
}

.vectorTabs li a { color: #872222; }
.vectorMenu li a { color: #872222; }

.vectorTabs #ca-unwatch.icon a { 
background-image: url(https://wiki.contextgarden.net/images/7/79/unwatch-icon_context.png);
}
.vectorTabs #ca-unwatch.icon a:hover, .vectorTabs #ca-unwatch.icon a:focus { 
background-image: url(https://wiki.contextgarden.net/images/7/79/unwatch-icon_context.png);
}

.vectorTabs #ca-watch.icon a   { 
background-image: url(https://wiki.contextgarden.net/images/b/b2/watch-icon_context.png);
}
.vectorTabs #ca-watch.icon a:hover, .vectorTabs #ca-watch.icon a:focus { 
background-image: url(https://wiki.contextgarden.net/images/b/b2/watch-icon_context.png);
}



/*==============================================================================*/
/* Trial for update of WelcomePage2020.05.25                                    */

body.page-Main_Page h1.firstHeading { border-style: none; color:rgba(0,0,0,0); }
h1.firstHeading { border-style: none;}

#WelcRework {
    display: grid;
    grid-template-columns:  100px 100px 100px 100px 100px ;
    grid-gap: 1.5rem;
    justify-content: space-evenly;
    list-style: none; 
    padding: 1rem;
    margin: 0;
    height: stretch;
    backgound: blue;
}

#WelcRework > li {
    text-align:center;
    background-color: #eeeee4 ;
    box-shadow: 0px 5px 8px rgba(0,0,0,.25);
    height: stretch;
    width: 100px;
    border-bottom: solid 4px #872222;
    height: stretch;
    height: 140px;
}

/*==============================================================================*/
/* DOWNLOAD PAGE                                                                */

#DownloadRework {
    display: grid;
    grid-template-columns: 150px 150px 150px; 
    grid-gap: 1em;
    justify-content: space-evenly;
    list-style: none; 
    padding: 0rem;
    margin: 0;
    list-style-type: none;
    height: stretch;
}

#DownloadRework > li {
    text-align:left;
    background-color: #eeeee4 ;
    box-shadow: 0px 5px 8px rgba(0,0,0,.25);
    height: stretch;
    border-bottom: solid 4px #872222;
    padding: 0.25rem;
}

#DownloadRework > li> h3 {
   padding: 0px 0.25rem;
   margin:0px;
}

#DownloadRework > li> ul {
   padding: 0px 0.rem;
}
#DownloadRework > li> ul > li {
   padding: 0px;
   margin: 0px;
}

/*==============================================================================*/
/* MANUALS PAGE                                                                 */

ul.filter-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-gap: 0.2em 1.5em;
  justify-content: space-evenly;
  overflow: hidden;
  padding: 1em;
  margin: 0;
}

.filter-links li {
  height: stretch; 
  background-color: #f6f6f6;
  text-align:center;
  font-size: 75%;
  padding: 0.1rem 0.1rem;
  border-radius: 8px;
  border: solid 2px #872222;
  width: 100px;
}


ul.filter-sections {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  font-size: 85%;
  grid-gap: 1.5rem;
  justify-content: space-evenly;
  overflow: hidden;
  padding: 1rem;
  margin: 0;
}

ul.filter-sections li {
  opacity: 0;
  display: none;
  text-align:center;
  background-color: #eeeee4 ;
  box-shadow: 0px 5px 8px rgba(0,0,0,.25);
  height: stretch;
  border-bottom: solid 4px #872222;
}



.view {
  display: block !important;
  opacity: 1 !important;
}

@keyframes selected {
  0% {
    border-radius:100%;
  }
}

/*==============================================================================*/
/* TWO and THREE COMLUMNS LISTS                                                 */

div.mw-body-content { max-width: 70em; margin: 0 auto;}

ul.ColumnsUnderLevel1 {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(15em, 29em));
  grid-gap: 1.9em; 
  justify-content: space-evenly;
  list-style: none;
  padding: 0px; 
  margin: 0px;
}

ul.TwoColumnsHighlight {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(15em, 29em));
  grid-gap: 1.9em; 
  justify-content: space-evenly;
  list-style: none;
  padding: 0px; 
  margin: 0px;
}

ul.ThreeColumnsHighlight {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(15em, 19em));
  grid-gap: 1.4em; 
  justify-content: space-evenly;
  list-style: none;
  padding: 0px; 
  margin: 0px;
}


li.ColumnsHighlight {
  height:stretch; 
  padding: 10px; 
  background-color: #eeeee4;
  box-shadow: 0px 5px 8px rgba(0,0,0,.25);
  border-bottom: solid 4px #872222;
}

/*==============================================================================*/
/* COLOR NABOX                                                                  */

ul.Navbox {
  display: grid;
  grid-template-columns: repeat(6, 9.5em);
  grid-gap:0.5em;
  justify-content: space-between;
  list-style: none;
  padding: 0rem;
  margin: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.Navbox > li {
  background-color: #f6f6f6; 
  font-size:80%;
}

ul.Navbox > li > ul {
  padding: 0rem;
  padding-left: 0.5em;
  margin: 0;
  list-style: none;
}