/********************************************************************

Style sheet for REM generated pages - links with details_page.php

********************************************************************/

/* Styles for the main page left and right columns */
/* Tables have been superceded by div blocks : see styles from REMpg-container */
table.REMpg-page-table
{
	border-collapse: collapse;
	border-spacing: 10px;
	empty-cells: hide;
}

td.REMpg-page-td-left
{
	width: 30%;
	vertical-align: top;
	border: none;
	border-right: medium solid #ddd;
	border-left: medium solid #ddd;
	/*background-color: white;*/
	color: black;
	padding: 10px;
}

td.REMpg-page-td-right
{
	width: 70%;
	vertical-align: top;
	border: none;
	border-right: medium solid #ddd;
	/*background-color: white;*/
	color: black;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Spacer used within page layouts */
div.REMpg-div
{
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px 0px 0px 0px;
}

/* Style for page images in left column - now section 3*/
p.REMpg-img-p
{
	color: black;
	border: none;
	padding: 0;
	/*padding-left: 15px;
	/*background-color: white;*/
        text-align: left;
        font-size: medium;
}

.REMpg-img href
{
	width: 200px;
	height: 135px;
	float: left;
	padding: 0px 0px 0px 0px;
	margin-top: 10px;
	border: none;
} 

.REMpg-img span {
	position: fixed;
	right: 100px; 
	/*background-color: #FFFFBC; */
	background-color: gainsboro;
	/*padding: 2px; */
        padding: 1px 1px 10px 1px;  /*top,right,bottom,left*/
	/*border: 2px dashed blue; /* gray; */ 
	border: medium solid blue;
	visibility: hidden;
	color: black;
	text-decoration: none;
        text-align: center;
        font-size: large;
	font-weight: bold;
}

.REMpg-img:hover {
	background-color: transparent;
	z-index: 50;
}

.REMpg-img:hover span {
	visibility: visible;
/*	left: 110px; */
	margin: 40px;
	top:  16px; 
	text-align: center;
}

/* Style for page images in page */
.REMpg-pg-img href {
	width: 200px;
	height: 135px;
	float: left; 
	padding: 0px 0px 0px 0px;
	margin-top: 10px;
	border: none;

}

.REMpg-pg-img span {
/*	position: relative; */
	background-color: #FFFF9C;
	padding: 5px;
	/*border: 1px dashed gray;  */
	border: medium solid lime;
	visibility: hidden;
	color: black;
	text-decoration: none;
	font-weight: bold;
}

.REMpg-pg-img:hover {
	background-color: transparent;
	z-index: 50;
}

.REMpg-pg-img:hover span {
	visibility: visible;
	width: 60%;
	top: -200px; 
        left: -100px;  
	text-align: center;
}

img.REMpg-large-img {
        width: 80%;
	border: medium solid blue;
}

/* Following styles also needed for PHP markdown,
 *  * contained with a REM-pg-div <div>  */
/* REMkey=title class */
div.REMpg-div h1, h1.REMpg-top-heading
{
	/*background-color: white;*/
  	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-weight: bold;
	font-size: large;
	vertical-align: middle;
	text-align: center;
}

/* REMkey=heading class */
h1.REMpg-heading
{
	/*background-color: white;*/
  	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-weight: bold;
	font-size: large;
	vertical-align: middle;
	text-align: center;
}

/* REMkey=paragraph class */
div.REMpg-div p, p.REMpg-ptext
{
	color: black;
  	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
}

div.REMpg-div h2, span.REMpg-pheading
{
	/*background-color: white;*/
  	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-weight: bold;
	font-size: large;
	vertical-align: 10px;
	text-align: center;
}

div.REMpg-div h3
{
        /*background-color: white;*/
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        font-weight: bold;
        font-size: medium;
        vertical-align: 10px;
        text-align: left;
}

/* REMkey=table class */
div.REMpg-div table, table.REMpg-table
{
	border: medium solid blue;
	border-collapse: collapse;
	empty-cells: show;
}

div.REMpg-div th, td.REMpg-tdH
{
	border: thin solid gray;
	/*background-color: white;*/
	color: black;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	padding: 5px 5px 5px 5px;
}

div.REMpg-div td, td.REMpg-td
{
	border: thin solid gray;
	/*background-color: white;*/
	color: black;
	vertical-align: middle;
	text-align: left;
	padding: 5px 5px 5px 5px;
}

div.REMpg-div td.REMpg-tdH
{
	/*background-color: white;*/
	font-weight: bold;
	text-align: center;
}

div.REMpg-div code
{
        color: blue;
}

div.REMpg-div a
{
        padding: 2px 2px 2px 2px;
}

/* REMkey=list class */
div.REMpg-div ul, ul.REMpg-ul
{
	vertical-align: top;
}

div.REMpg-div li, li.REMpg-li
{
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
  	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
}
/* End of styles also needed for PHP markdown */

p.REMpg-sidelink
{
	border: none;
	/*background-color: white;*/
	padding: 0;
	padding-left: 1px;
	padding-bottom: 10px;
        text-align: left;
        font-weight: bold;
        font-size: larger;
}

span.REMpg-currlink
{
	color : darkblue;
}

/* Input form */
div.REMpg-form table
{
	border-style: none;
	border-collapse: separate;
	border-spacing: 5px;
}

div.REMpg-form td
{
	border-style: none;
	background-color: white;
	color: black;
	vertical-align: middle;
	text-align: left;
	padding: 2px 2px 2px 2px;
}

div.REMpg-form input[type=submit]
{
        background-color: lightgray;
        border: none;
        border-radius: 8px;
        border-top: thin solid darkgray;
        border-right: thin solid darkgray;
        border-bottom: thin solid darkgray;
        border-left: thin solid darkgray;
        color: black;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        display: inline-block;
        text-align: center;
        font-size: medium;
        cursor: pointer;
}

div.REMpg-form span.REMpg-form-message
{
        padding-top: 25px;
        padding-right: 1px;
        padding-bottom: 1px;
        padding-left: 8px;
	color : black;
        font-size: medium;
        font-weight: bold;
        display: block;
}


div.highslide-gallery
{
        width: 100%;
}

div.REMpg-img-container
{
      display: -webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;	/* OLD - Firefox 19- */
      display: -ms-flexbox;	/* Inbetween - IE 10 */
      display: -webkit-flex; 	/* NEW - Chrome */
      display: flex;		/* NEW, spec - Opera 12.1, Firefox 20+ */
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}

div.REMpg-container
{
      display: -webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;	/* OLD - Firefox 19- */
      display: -ms-flexbox;	/* Inbetween - IE 10 */
      display: -webkit-flex; 	/* NEW - Chrome */
      display: flex;		/* NEW, spec - Opera 12.1, Firefox 20+ */
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}

/* Default setting is small screen layout, with stacked columns */
div.REMpg-section1
{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      width: 100%;
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
}
div.REMpg-section2
{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      width: 100%;
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
}
div.REMpg-section3
{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      width: 100%;
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
}

@media (min-width: 600px)
{
      div.REMpg-section1 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 20%;
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
      }
      div.REMpg-section2 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 80%;
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
      }
      div.REMpg-section3 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 100%;
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
      }
}

@media (min-width: 800px)
{
      div.REMpg-section1 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 20%;
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
      }
      div.REMpg-section2 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 50%;
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
      }
      div.REMpg-section3 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 30%;
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
      }
}

/* Style below for mobile only */
p.REMpg-mobile-only 
{
	border: none;
	/*background-color: white;*/
	padding: 0;
	padding-left: 1px;
        text-align: left;
        font-weight: bold;
        font-size: larger;
        color: blue;
}

@media (min-width: 600px)
{
      p.REMpg-mobile-only {
            visibility: hidden;
            padding: 0;
            border: none;
      }
}

/* Extra adjustments for mobile media */
@media (max-width: 600px)
{
      /* No display of code examples */
      div.REMpg-div code {
            visibility: hidden;
            display: none;
            padding: 0;
            border: none;
      }
      /* Ensure image not greater than screen */
      img.REMpg-large-img {
            width: 100%;
      }
      /* Standard page : padding-bottom 5px 
         Enlarged for mobile to ensure line accessible */
      div.REMpg-div li {
            padding-bottom: 12px;
      }
}