/* New stylesheet for PHCL.
 * (C) 2013 Alain D D Williams <addw@phcomp.co.uk> 
 * SCCS: @(#)Style.css	1.13 11/23/15 18:38:43
 */

body {
 color: #000000;
 font-size: 100%;
 margin:0 0.4em 0.4em 0.4em;
 border:0;
 background-color: #b8e6f9;
}

/* Get browser consistency */
h1 {
 margin:0;
 font-size:3em;
 font-weight: bold;
 text-align: center;
}
h2 {
 font-size:1.5em;
 font-weight: bold;
}
h3 {
 font-size:1.25em;   
}
h4 {
 font-size:1em;
}
 
/* Error styling */
#errbody {
  font-size:20px;
  color:#000099;
  padding-top:50px;
  position:absolute;
  width:750px;
  left:10%;
}
.erraction {
  color:#ee0000;
  font-size:30px;   
}
.errinfo {
  color:#594e8d;
}

/* For use on Images where the text is to be middle aligned */
.MiddleImageText {
 vertical-align:middle;
}

/* Images on a page with logos in a list and explanation to their right */
.LogoList li > a {
 float:left;
}

.LogoList li > a > img {
 margin-right:6px;
}

/* Header block */
#C_head {
 width:100%;
}

/* Logo at top LH
 * Make it absolute positioned so that it doesn't upset the flow of anything else, specifically #C_head h1
 */
#C_head .logoImage {
 position:absolute;
 margin-top:4px;
 top:0;   /* With respect to #C_head - MUST have this else different browsers place it differently */
}

/* Header at top of page, same margin as #C_main - avoid top logo & #C_menu */
#C_head h1 { 
 min-height: 67px; /* Height of Image - margin 83-16 */
 margin: 16px auto 0.25em auto;
 font-size:3em;
 font-weight: bold;
 text-align: center;
 max-width: 15em; /* = #C_main .c_mainCenter width of 44em / 3em (font-size) */
}

/* Link to tutorial home */
#tutorialHome {
 font-size: x-large;
 font-weight: bold;
}

/* A drop down menu in head position.
 * To get it to float to the center, need the following abomination of #C_headMenu & #C_headMenuCentered
 */
#C_headMenu {
 position:relative;
 float:right;
 left:-50%;
 margin:0;
 padding:0;
}
#C_headMenuCentered {
 position:relative;
 left:50%;
}

/* A menu. This places it to the left */
#C_menu {
 float:left;
 margin-top:3em;
 width: 9em;
 clear:both;
}
#C_menu > div {
 margin-bottom: 2em;
}
 
/* A menu. This places it to the left */
#C_RightMenu {
 float:right;
 margin-top:3em;
 width: 9em;
}
#C_Rightmenu > div {
 margin-bottom: 2em;
}

/* A Center block where the main text of the page goes */

#C_main {
/* margin-left:9.5em;  Margin no longer needed since the menu is no longer on the left */
}

#C_main .c_mainCenter {
 max-width: 44em;
 margin-left: auto;
 margin-right: auto ;
 text-align:left;
}

/* Hover over tool tip */
.tooltip {
 position:absolute;
 display:block;
 visibility: hidden;
 transition-property:visibility;
 transition-delay:0.2s;
 background-color: yellow;
 padding:0.5em;
 border-style: solid;
 border-width:1px;
 border-color: #000;
 max-width:15em;
 text-align: center;
 z-index:12;
 /* Position it relative to the position:relative block that contains this */
 bottom:-2em;
 left:2em;
}
/* Use this when the width is being badly constrained by a containing block */
.tooltipWide {
 width:15em;;
}

/* Use this on tooltips on the right of the page class="tooltip tooltipr" */
.tooltipr {
 left:auto;
 right:2em;
}
a:hover + .tooltip {
 visibility:visible;
 transition-property:visibility;
 transition-delay:0.2s;
}
/* Use on div or paragraph that contains tooltips */
.tooltipBox {
 position:relative;
}

/* Various paragraph type styles
 */
.Slogan {
  font-size:200%;
  font-weight:bold;
}
.BoldSlogan {
  font-size:250%;
  font-weight:900;
  text-align:center;
  font-family:"Book Antiqua", Palatino, serif;
  font-style:italic;
}
.SmallSlogan {
  font-size:130%;
  text-align:center;
  font-family:"Book Antiqua", Palatino, serif;
  font-style:italic;
}

/* Table with border, similar to border=1
 * Styles the table & internal td & th.
 */
table.BorderTable {
  border: 1px solid;
  border-color: gray black black gray;
}
table.BorderTable td, table.BorderTable th {
  border: 1px solid;
  border-color: black gray gray black;
}

/* CSS hierarchical menus.
 *
 * Horiz menu with drop down sub menus. Nested sub menus, also drop down to the right of the item.
 * Also vertical menu for the left/right of the page.
 *
 * Notes
 * The width & height must be enough to contain the text. If not the menu box will be expanded but the border might get lost - or something
 *
 * If when a descending a menu it suddenly disappears, it may be that the mouse has
 * moved into an area that belongs to some other element. The z-index should take care
 * of that - but does not always.
 *
 * For devices that do not have a pointer (think: mobile phones) you should
 * assume that only the top level menu will work, so on each top level item
 * provide a clickable menu page that will allow choice of what the sub menus
 * would have done -- this is good anyway since you may want to provide a little
 * more explanation for the first time user.
 *
 * Default is menu_drop, this is a horizontal menu with sub-menus that drop down on hover over menu items
 * This is intended to be used in the center of a page.
 *
 * menu_left is a varient for use on LH of page: a vertical menu with sub-menus that appear right on hover over menu items.
 * menu_right is a varient for use on RH of page: a vertical menu with sub-menus that appear left on hover over menu items.
 *
 * menu_foot - not done, maybe at some stage when I can work out how to make a ul move li,s up.
 *
 * .menu_this_page for an item that reflects this page, somehow. Probably a span
 * since you don't want a user to take a link to the page that he is on.
 */


/* Top level.
 * These attributes are to do with overall placement of the menu,
 * nothing about internal working.
 */
ul.menu_drop {
 margin:0;  /* Default margin for ul seems to be 16 */
 padding:0; /* Default left padding is 40 */
}

/* Deal with sub menus */
ul.menu_drop ul {
 position: absolute; /* Something for top/left/... below to act against */

 padding:0;    /* Default left padding is 40 */

 visibility: hidden; /* Keeps them hidden 'till mouseover */
 transition-property:visibility;
 transition-delay:0.2s;
}

ul.menu_drop li {

 /* Generate a horizontal menu by floating.
  * Removed for menu_left & menu_right (see next rule below)
  */
 float: left;

 position: relative;
 list-style: none; /* No list markers (bullets) */
 text-align:center;

 border-style: solid;
 border-width: 1px;

 top:-1px;    /* Needed to make the sub menus position correctly */

 /* You may want to play with the following: */
 font-size:12px;
 width:9em;
 height:2em;
 background-color:#fbfabd;
 color: #000;
 transition-property:background-color;
 transition-delay:0.2s;
}
ul.menu_left li, ul.menu_right li {
 float:none;

 /* How to separate items in a veritcal menu
  * If you do this you need to remove border-top-width below.
  *    margin-bottom:10px;
  */
}

/* Deal with borders between adjacent menu cells at top level in horizontal menu.
 * Stop doubling adjacent borders.
 * Different for horisontal & vertical.
 */
ul.menu_drop > li + li {
 border-left-width:0;
}
/* Top level menu cells in vertical menu.
 * Need LH border, but not the top one in all except the first.
 */
ul.menu_left  > li + li, ul.menu_right  > li + li {
 border-left-width:1px; /* Replace what we removed in the rule above */

 /* Stop doubling adjacent borders
  * Remove this if you separate items in a vertical menu with margin-bottom (above)
  */
 border-top-width:0;
}

/* Make the menu appear below when you mouseover and menu item appear lighter
 */
ul.menu_drop li:hover > ul, ul.menu_drop li:hover {
 visibility:visible;
 background-color:#ff9a9a !important;
 z-index:24;
 transition-property:background-color;
 transition-delay:0.2s;
}

/* The bits within the <li> that the user sees.
 * <a> for choosing a menu item
 * <span> used in sub menu heading not containing <a>
 */
.menu_drop a, .menu_drop span {
 display:block;
 padding:3px 0 3px 0; /* In case of wide items in a menu */
 text-decoration:none;
 font-style:normal;
 color:#000;
}


/* Items in drop down, set separation between them to 0. Only needed in case there is a margin at the top level
 */
ul.menu_drop > li > ul li {
 margin:0;
} 

/* Stop doubling vertical adjacent borders
 */
ul.menu_drop > li > ul > li + li {
 border-top-width:0;
}
/* Sub menu: borders, but top border is bottom of one on top */
ul.menu_drop > li > ul > li ul li + li {
 border-width:0 1px 1px 1px;
}

/* Sub menus are postioned to the right
 */
ul.menu_drop > li > ul >li ul {
 left:100%;
 top:0;
}
/* Except on a right menu when they are postioned left - to stay on the page */
ul.menu_right > li > ul >li ul {
 left:auto;
 right:100%;
}

/* When a menu appears where is it positioned ?
 * Set for horiz & then for left & right menus
 */
ul.menu_drop li ul {
 left:-1px; /* Adjust for 1px border */
 top:104%;  /* Approx to what is really needed */
 top:calc(100% + 1px);  /* Poorly supported as yet, W3C validator does not (yet) like it */
}

/* Left hand: ie top to bottom menu */
ul.menu_left li ul {
 /* Get the submenu appearing on the right of the item hovered over */
 left:100%;
 top:0;
}

/* Right hand: ie top to bottom menu */
ul.menu_right li ul {
 /* Get the submenu appearing on the left of the item hovered over */
 right:100%;
 left:auto;
 top:0;
}

/* Menu item for the page being displayed -- li element, not ul
 */
li.menu_this_page {
 background-color:#f9f601 !important;
}

/* Show where there is a submenu with an image.
 * Don't tamper with the ordering of the next 4.
 */
li.menu_below {
 background-image:url('/Images/DownTriangle.png');
 background-repeat:no-repeat;
 background-position:center bottom;
}
ul.menu_left li.menu_below {
 background-image:url('/Images/RightTriangle.png');
 background-position:right;
}
li.menu_below li.menu_below {
 background-image:url('/Images/RightTriangle.png');
 background-position:right;
}
ul.menu_right li.menu_below {
 background-image:url('/Images/LeftTriangle.png');
 background-position:left;
}

/* End of CSS hierarchical menus */


/* Untested */

*.discode {
  background-color: #99e9ff;
  border: 1px solid black;
  margin: 1px;
  padding: 10px;
  font-family: monospace;
}




/* Deal with different screen sizes, think: mobile phones
 */

@media (max-width:70em){
 #C_head h1 {
  font-size:2.5em;    /* Stop it bashing the logo */
 }
}

@media (max-width:53em) { /* 53 = #centerBlock+#left **************** */
 /* Make headers smaller */
 h1 { font-size:2em; }
 h2 { font-size:1.25em; }
 h3 { font-size:1em;
      font-weight:bold;
    }
 /* Don't do multi column, have the components run up & down.
  * Reduce vertical space use as well.
  */
 #C_head .logoImage {
  position:static;
  margin:0;
 }
 #C_head h1 {
  font-size:2em;
  margin-left:0;
 }
 #C_menu,#C_RightMenu {
   float: none;
   margin-top:0;
   margin-left:5em; /* Use otherwise empty space */
 }
 #C_menu > div,#C_RightMenu > div {
  margin-bottom:0.5em;
 }
 #C_main {
   margin-left:0;
 }   

 /* When it gets narrow, turn a RH menu into a LH one - that is where it will be positioned anyway*/
 ul.menu_right > li > ul >li ul {
  left:100%;
  right:auto;
  top:0;
 }
 ul.menu_right li ul {
  left:100%;
  top:0;
  right:auto;
 }
}

@media (max-width:27em){ /* 27 = 1/2 previous media max-width */
 body {
  margin:0 0 0.5em 0;
 }
 h1 { font-size:1.25em; }
 h2 { font-size:1em; }
 #C_menu,#C_RightMenu {
  margin-left:0;
 }
}

/* Print: white background (don't waste ink), use the full page width.
 * Hide menus - they want the page content, not what else they could visit.
 */
@media print {
 body {
  background-color: #fff;
 }
 #C_head .logoImage {
  position:absolute; /* Else may be made static by reduced width detection above */
 }
 #C_main {
  margin-left:0;
 }
 #C_main .c_mainCenter {
  max-width: 100%;
 }
 #C_menu,#C_RightMenu,#C_headMenu,#tutorialHome {
  position:absolute;
  visibility: hidden;
 }
 .tooltip {
  bottom:auto; /* Otherwise you get a blank second page */
 }
}