/********* main html elements *********/

body { 
	font-family: Arial, Helvetica, sans-serif;  
 	margin: 0;
 	font-size: 12pt;
}

textarea {
	margin: 1rem;
}

main { 
	margin-left: 9rem;  
	margin-right: 1rem;
}

section { 
	margin-top: 0.1em;
	padding: 0.5rem;
}

fieldset {
	padding: 0.5rem;
}

footer  { 
	margin: 2rem 0 0 0; 
}

footer > div { /* footer bar. Remove #foot after conversion */
	padding: 0; 
	margin: 0; 
	text-align: center;
	width: 100%;
	background: #000;
	color: #FFF; 
	padding-top: 2px; 
	padding-bottom: 2px; 
}

footer > div a { color: #8DF; }

input { border-radius: 3px; }

/********* Registration interface *********/

#main { 
	margin-top: 2.5em;  
	margin-left: 2em;  
	margin-right: 2em;
}

.CMS-menu { 
	position: absolute;
	z-index: 999;
	left: 0;
	top: 0;
	margin: 0;
	width: 8em;
	text-align: left;
}

.CMS-menu > li { 
	display: inline-block; 
	height: 1.2em;
	position: absolute;
	left: 0;
	background: #000;
	border-width: 1px;
	border-style: solid;
	border-color: #272;
	color: #FFF;
	width: 5em;
}

.CMS-menu ul { 
	display: none;
	list-style-type: none; 
	position: absolute;
	z-index: 999;
	background: #CCC; 
	border-bottom: 1px dotted #5D5;
	width: 9em;
	border: 1px solid #000;
}

.CMS-menu li:hover > ul  { 
	display: block; 
	position: absolute;
	left: 1rem;
	top: 1rem;
	padding-left: 0.5em;
}

.CMS-menu > li:hover {
	color: #000;
	background: #CCC; 
}

.CMS-menu > li a {
	background: #CCC; 
	color: #000;
	text-decoration: none;
}

/******************** Admin interface vertical menu ************************/

.left-menu {
	position: absolute;
	left: 0;
	top: 1.2em;
	overflow: visible;
	width: 8em;
	margin-right: 1em;
	margin-left: 0;
	padding: 0;
	text-align: left;
}

.left-menu li {
	position: relative;
}

.left-menu ul { 
	display: none;
	list-style-type: none; 
	position: absolute;
	z-index: 900;
	padding: 2px; 
	left: 8em; 
	top: -1.2em;
	width: 8em;
	background: #DDE;
	text-align: left;
	border-width: 1px;
	border-style: dotted;
	border-color: #55D;
}

.left-menu > li { /* Main vertical menu */
	display: inline-block; 
	color: #55D;
	height: 1.2em;
	background: #DDE; 
	border-bottom: 1px dotted #55D;
	padding: 1px;
	width: 8em;
}

.left-menu a {
	text-decoration: none;
	display: block; 
	color: #55D;
}

.left-menu a:hover {
	color: #FFF;
	background: #39E; 
}

.left-menu li:hover > ul  { 
	display: block; 
	padding-left: 0.5em;
}
.left-menu li:hover { 
    background: #39E;
	color: #FFF;
}

/******************** Admin interface horizontal menu ************************/

#services { 
	display: inline-block;
	list-style-type: none; 
	z-index: 800;
	padding: 0; 
	margin: 0; 
	text-align: left;
	width: 100%;
	background: #000; 
	color: #FFF;
	overflow: hidden;
	white-space: nowrap;
	border-bottom: 1px dotted #8DF;
}
#services li { 
	display: inline-block;
	float: left; 
	margin: 0;
	padding: 0;
}
#services li a { 
	padding: 0.5em 1.2em 0.5em 1.2em;
	background-color: #000; 
	display: block; 
	color: #FFF;
	font-style: bold;
	text-decoration: none;
	margin: 0;
}
#services li a#selected {
	background: #DDE; 
	color: #55D;
	text-decoration: none;
	margin: 0;
}
#services li a:hover, #services li a:hover#selected {
	text-decoration: none;
    color: #000;
    border-radius: 3px;
    background: #FFF;
 }

/******************** General ************************/

.debug { 	
	margin-left: 12rem;
}

.plainlink { text-decoration: none;  }

.on, .warn { color: #F00; }

.selected { 
	background-color: #22A; 
	color: #FFF;
}

.unsel { 
	background: #EEE;
	padding-left: 1em;
	padding-right: 1em;
}
.dim { 
	background: #99B;
	padding-left: 1em;
	padding-right: 1em;
}
.box { 
	display: inline-block;
	min-height: 2em; 
	margin: 2px; 
	width: 7.5em;
	border: none;
}
.search { 
	background-color: #FF7; 
	font-style: bold; 
}

.logged { 
	float: right;
	clear: both;
	padding: 0;
	margin-top: 0;
	margin-right: 1em;
	font-style: italic;
	color: #8DF;
}

.higher { 	
	border: solid 1px red;
	color: red;
}
.required { background: #FEE; }
.complete { background: #EFE; }
.login { background: #EFE; }
.file { background: #EEF; }
.latex { background: #CEF; }
.slide { background: #FEC; }
.entry { margin-top: 4px; margin-bottom: 4px; }
.cost { text-align: right;  }
.table-list { padding-left: 2em;  }
.white-link { color: #FFF;  }

.number { 
	color: #000;
	background: #EEF;
  	border: 1px solid #000;
  	padding: 1px;
  	margin: 2px;
	border-radius: 20%;
}

.number a { text-decoration: none;  }


/************ For CMS 2.0 *************/

div, section, h1, h2, h3 { 
	/* Stabilise highlighted chunks on mouseover of their edit control. */
	border: solid 1px transparent;
	margin-top: 0.1em;
}

.undead { 
	background: repeating-linear-gradient(45deg, #BBB, #BBB 10px, #DDD 10px,#DDD 20px);
	padding: 0.5em;
 }

.object-highlight { 
	background: #DDE; 
	border: 1px solid;
}

.object-drop { 
	background: #FCC; 
	border: 1px dotted #999;
}

.drop-area {  
	border: 2px blue ridge;
	height: 15em;
	width: 15em;
	background: repeating-linear-gradient(45deg, #EEE, #EEE 10px, #FFF 10px, #FFF 20px);
	padding: 0.3em;
	background-repeat: no-repeat;
	background-size: contain;
}

.drop-label {  
	text-align: center;
	width: 100%;
	padding: 0.2em;
	font-weight: 800;
	font-size: 14px;
	height: 5em;
}

/****************** Pictures ****************************************/

figure { 
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	border: 1px dotted gray;
}

.no-border { border: none; }
 
figure > img {
	padding: 0em;
	align-items: bottom;
	margin: 0.1em;
	width: 90%;
	height: 90%;
	object-fit: cover; /*magic*/
	margin-left: 5%;
	border: solid 1px transparent;
}

.help-picture {
	padding: 0rem;
	margin: 0.1rem;
	max-width: 30rem;
	height: auto;
	border: dotted 1px #00F;
	text-align: center;
}

figcaption { 
	text-align: center;
	width: 100%;
	border: 1px solid;
	background: #999;
	font-weight: 200;
	color: #FFF;
	border: solid 1px transparent;
}

/****************** New CMS widgets ****************************************/

.scrolling, .scroller {
	display: flex;
	align-items: bottom;
	overflow: auto;
	white-space: nowrap;
	padding: 5px;
	margin-bottom: 1em;
}

.scrolling img, .scroller img {
	padding: 1rem;
	width: 14rem; 
	display: inline-block;
}

.scrolling figure, .scroller figure {
	padding: 1rem;
	width: 16rem; 
	height: auto;
	display: inline-block;
}

.moving {
	animation: picmove 1s 1 ease-out;
	position: relative;
}

@keyframes picmove {
	from {left: 80%;}
	to {left: 0%;}
}

.flex {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.flex div {
  padding: 5px;
  width: 45%;
  display: inline-block;
}

.flex figure {
  padding: 5px;
  max-width: 45%;
  display: inline-block;
}

.vcentre {
	align-items: center;
}

.hcentre {
	justify-content: center;
}

/********************* Icons *******************************/

.cross { color: #F00; font-size: 12pt;  }
.tick { color: #0F0; font-size: 12pt;  }
.edit-icon { float: right;  }

.edit-section { /* Push section edit icon into the left margin. */
  	position: relative; 
	left: -1em;
	top: 1em;
}

.svg-icon {
	display: inline-block;
	vertical-align: middle;
	height: 16px;
	width: 16px;
}

.conference-icon {
	background-color: rgba(255, 0, 0, 0.25);
	padding: 1;
	margin: 0;
	border: 1px solid red;
}

.hover-icon {
	margin: 3px;
}

/********************* For new look CMS *******************************/

.report { 
	width: 50%;
	padding: 0.1em;
	background-color: #FF6;
	border-color: #8F8;
}

.alert { 
	width: 50%;
	padding: 0.1em;
	background-color: #FBB;
	color: #F00;
	border-color: #F00;
}

.hidden {
	display: none; 
	text-align: center;
	border: 1px; 
	border-style: dotted;
	border-color: #00F;
	background-color: #DEF; 
    border-radius: 2px;
}

/******************** Data tables ************************/

.tab-before {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
	margin: 0;
	list-style: none;
	text-align: center;
}

.tab-before li, .tab-before a {
	display: inline-block;
	text-decoration: none;
	padding-left: 0.5em;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0;
	margin: 0;
}

.data-table {
	font-size: 100%;
	border-color: #8DF;
	background: #FFF;
	border-width: 1px;
	padding: 0;
	border-collapse: collapse;
	border-style: dotted;
	margin: 0.5em;
}

th {
	border-width: 0px 1px 2px 0px;
	bottom-border-style: solid;
	right-border-style: dotted;
	vertical-align: top;
	border-color: #8DF;
	background: #555;  	
	color: #FFF; 
 }
 
.medium-column {
	max-width: 25em;
}
 
 .verify-pass {
	margin-top: 3px;
	padding: 3px;
	color: #F00;
	text-align: center;
	border-bottom: 1px dotted #AAC;
	border-left: 1px dotted #AAC;
	border-right: 1px dotted #AAC;
	background: #FEE;
}


.hidden-cols {
	display: inline-block;
	margin: 0;
	list-style: none;
	text-align: center;
	font-size: 0.8em;
	border-top: 1px dotted #AAC;
	border-left: 1px dotted #AAC;
	background: #EEF;
}

.hidden-cols li, .hidden-cols a {
	display: inline-block;
	text-decoration: none;
	margin-left: 2px;
	padding-left: 0.5em;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	font-weight: bold;	
	color: #000;
	background: #CCC;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.hidden-cols li {
	border: 1px ridge #AAA;
}

.hidden-cols li.off {
  background: #EEF;
  border: none;
}

.zebra tr:nth-child(even) { background: #FFF; }
.zebra tr:nth-child(odd) { background: #EEE; }

.continue {
	line-height: 2.5em;
	font-style: bold; 
	width: 100%;
	padding: 5px;
	color: #000;
	text-align: right;
	background: #80D7F0;
	border-top: #8DF 2px ridge;
	border-bottom: #8DF 2px ridge;
}

.continue a {
	font-size: 150%;
	font-style: bold; 
	color: #000;
	padding: 3px;
	text-align: right;
	text-decoration: none;
	border-top: 0;
}

.butt {
	color: #FFF;
	margin: 3px;
	padding: 3px;
	text-align: right;
	text-decoration: none;
	background: #000;
	border-width: 2px;
	border-style: ridge;
	border-color: #8DF;
	border-radius: 5px;
}

.sunken {	
	display: inline-block;
	border-color: #58C;
	background: #DDD;
	padding: 4px;
	border-top: ridge 2px;
	border-left: ridge 2px;
	border-bottom: groove 2px;
	border-right: groove 2px;
	border-radius: 5px;
}

.table-controls { /* Used only for group theory objects */
	margin-left: 0;
	display: inline-block;
}

/************ Forms ****************************************/

input[type=text], select, textarea {
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  box-sizing: border-box;
}

input[type=submit] {
  background-color: #777;
  color: white;
  font-size: 1em;
  padding: 6px 12px;
  cursor: pointer;
  float: left;
}

input[type=submit]:hover {
  background-color: #AAA;
}

input[type=submit]:disabled {
  background-color: #DDD;
}

.label-col {
  float: left;
  width: 25%;
  margin-top: 0em;
  box-sizing: border-box;
}

.input-col {
  float: left;
  width: 75%;
  margin-top: 0em;
  box-sizing: border-box;
}

.input-full {
  width: 100%;
  margin-top: 0em;
}

.inline-form {
  display: inline;
  margin: 0em;
}

.input-row { 
	margin-left: 0.5em;
}

.input-row::after {  /* Clear floats after the columns */
  content: "";
  display: table;
  clear: both;
  box-sizing: border-box;
}

/******************** Miscellaneous items  ************************/

.sessions {
	width: 100%
	border-color: #000;
	background: #FFF;
	border-width: 1px 1px 1px 1px;
	padding: 0px 0px 0px 0px;
	border-collapse: collapse;
}

.svg-graph {
	padding: 2em;
}

.photo {
	width: 200px; /* you can use % */
	height: auto;
}	

#adobe-dc-view {
	height: 30em;
}	

/************** Password creation  ****************/

.password-box { 
    max-width: 35em;
}

.password-validator {  
	display: inline-block;
	position: relative;
    padding: 0;
    margin-top: 15px;
    border-width: 1px;
    border-style: solid;
    border-color: #FAA;
    border-radius: 5px;
    background-color: #FDD;
}

.password-validator:before {
    display: block;
    content: '';
    position: absolute;
    left: 20%;
    border: 8px outset transparent;
    border-bottom: 20px solid #FDD;
    top: -25px;
}


/************** look_up dropdowns  ****************/

.suggestions {  
	display: inline-block;
	position: relative;
    padding: 0;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #CCF;
    border-radius: 5px;
    background-color: #DDD;
}

.suggestions li { 
	display: block;
	position: relative;
	padding-top: 0.1em;
	border-bottom: 1px #CCF dotted;
}

.suggestions:before {
    display: block;
   	content: '';
    position: absolute;
    left: 10%;
    border: 8px outset transparent;
    border-bottom: 20px solid #DDD;
    top: -30px;
}

.suggestions a {
    display: block;
    position: relative;
    padding: 0.5em;
    color: #889;
    font-weight: 500;
    text-decoration: none;
}

.suggestions a:hover {
    text-decoration: none;
    color: #FFF;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #FFF;
    background-color: #38D;
    background-image: linear-gradient(top, #5BF, #38D);
}

/***************** Feeds ***********************************************/

article { /* Used for feed posts  */
	margin-top: 0.5em;
	max-width: 75%;
} 

.poster {
	font-style: italic;
	font-weight: 100;
	margin-left: 2em;
}

.reply p {
	background: #EEE;
	margin-left: 1em;
	max-width: 39em;
  	border-width: 1px;
  	border-style: dotted;
	padding: 0.5em;
}

.replies {
	border-top: 1px dotted #99A;
	border-bottom: 1px dotted #99A;
	background-color: #EEF;
	list-style: none;
}

.story {
  padding: 5px;
  width: 40%;
  display: inline-block;
}

.story div {
  white-space: normal;
}

.float-right {
	float: right;
	clear: all;
}

.center {
	text-align: center;
}

/***************** Collapsing lists ***********************************************/

.collapsible {
	list-style: none;
  	display: block;
  	margin: 4px;
}

.collapsible li {
  	margin: 1px;
}

.collapsible a {
	text-decoration: none;
}

.collapsed {
	display: none;
}

.pm {
	font-weight: bold;
  	border-width: 1px;
  	border-radius: 2px;
  	color: #FFF;
  	background: #000;
  	padding: 2px;
  	width: 2em;
  	text-align: center;
}

.collapse-entry {
  	border-width: 1px;
  	width: 35em;
  	padding: 0.5em;
}

.collapse-button {
	cursor: pointer;
	background: #CDF;
  	text-align: left;
	color: #22F; 
	font-size: 1em;
	width: 100%;
	padding: 2px;
  	border: 1px #00F dotted;
  	border-radius: 5px;
  	margin: 3px;
}

.collapse-button:hover {
	background: #FFF;  	
	color: #000; 
}

/******************** Timetable ************************/

.time-slot {
	background: #778;
	color: #FFF;
	padding: 2px;
	margin: 0;
	font-style: italic;	
}

.slot-info {
	border-collapse: collapse;
}

.slot-info td {
	background: #EEF;
	color: #002;
	padding: 0.3em;
}

.slot-info th {
	background: #778;
	border-bottom: 1px solid #DDF;
	padding: 0.3em;
}

.blank {
	background: #DDD;
}

.end {
	background: #99B;
	color: #FFF;
}

.timetable {
	font-size: 80%;
	border-color: #000;
	background: #FFF;
	border-width: 1px 1px 1px 1px;
	padding: 0px 0px 0px 0px;
	border-collapse: collapse;
}

.talk-button {
	cursor: pointer;
	background: #FFF;
	font-size: 0.8em;
	padding: 3px;
  	border: 1px ridge #AAA;
	border-radius: 5px;
  	text-align: center;
  	text-decoration: none;
}

.talk-title {
	padding-top: 0.5em;
	margin: 0;
}


.talk-button:hover {
	background: #DDD;  	
}

.room { 
	color: #000;
	background: #EEF;
  	border: 1px solid #000;
  	padding: 2px;
  	margin: 3px;
	border-radius: 20%;
}

.session { 
	margin: 0;
  	border: 1px solid #000;
	padding: 2px;	
	background: #CCF;
 }

.prefs-table { 
	margin: 2px;
  	border: none;
	padding: 2px;	
	background: #EEE;
 }

/*******************  Calendar *************************************************/

.calendar-layout {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: top;
	list-style: none;
}

.calendar-layout li {
	border: dotted 1px;
	margin: 2em;
}


/*******************  Modals and buttons *************************************************/

.modal-hidden { display: none; }

.modal-background { /* Semi opaque layer covering the main page and containing the actual modal box. */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0; /* Start at top left corner ... */
  top: 0; 
  width: 100%; /* ... and cover whole window.  */
  height: 100%; 
  overflow: auto; /* Scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black semi opaque */
}

.modal-box {
	margin: 15% auto; /* 15% from the top and centered */
	width: 60%; /* Could be more or less, depending on screen size */
	background-color: #EEE;
	border: 1px dotted #00F;
}

.modal-box h1 {
  background-color: #555;
  margin: 0;
  color: #FFF;
  padding: 2px 16px;
  width: 100% auto; 
}

.modalContent {
  padding: 1em 2em;
}

.modal-close {
  color: #BBB;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
}

.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.button-link {  
	cursor: pointer;
    min-width: 9em;
    display: inline-block;
	margin: 0.3em;
	padding: 0.2em;
	text-align: center;
	background: #CDF;
	color: #008;
	font-weight: 400;
	border-radius: 5px;
	border: 1px ridge #AAA;
	text-decoration: none;
}

button, .buttons {  
	cursor: pointer;
	margin-top: 0.2rem;
    min-width: 9em;
    display: inline-block;
	padding: 0.4em;
	text-align: center;
	background-color: #CDF;
	color: #008;
	font-weight: 400;
	border-radius: 5px;
	border: 1px ridge #AAA;
}

button:hover, .buttons:hover {
	background-color: #DEF;
}

button a, .buttons a { 
	text-decoration: none;
}

.dim { 
	background-color: #CCC;
	border-color: #444;
 }

.bright { 
	background-color: #ECC;
	border-color: #A44;
 }

.small { 
	min-width: 6em;
	height: 2em;
 }

.dates { min-height: 2em; }

.tiny { min-width: 1.5em; }

.phone,  {  
	background-color: #ADF;
}

.refresh {  
    width: 4em;
    float: right;
    display: block;
	border: 1px ridge #8DF;
	background: #CCC;
	text-decoration: none;
	margin: 0;
	text-align: center;
}

.picture {
	max-width: 80%;
	max-height: 700px;
	vertical-align: middle;
}

.picture-line {
	margin-top: 1em;
	text-align: center;
}

/***************** Table and data row glosses  ***********************************************/

.help_box, .help-box {
	margin: 0;
	padding: 0.2em;
	position: absolute;
	z-index: 999;
	width: 15em;
	height: auto;
	font-weight: normal;
	background: #EEE;
	color: #000;
	text-align: left;
	border-radius: 5px;
	border-style: groove;
	border-width: 2px;
	border-color: #8DF;
}

.wide {
	width: 40em;
}
.very_wide {
	width: 70em;
}

/***************** Responsive design ***************************************/

@media screen and (max-width: 767px) {

	main { 
		margin-left: 1rem;  
		margin-right: 0rem;
	}
	#services li, #services li a#selected { 
		display: block;
		float: none; 
		text-align: right;
	}

	.left-menu { top: 0em; }
	.modal-box { width: 75%; }

	.flex {
		flex-flow: column;
	}

}

@media screen and (max-width: 600px) {

	.label-col, .input-col, input[type=submit] { /* Make the form columns stack on top of each other */
		width: 100%;
		margin-top: 0;
	}
  

}

@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) { /* Phones */

	main { margin-left: 1rem;  }

	#services li { 
		display: block;
		float: none; 
		text-align: right;
	}

	#services li a#selected { text-align: right; }
	.collapsible { display: none; }
	.modal-box { width: 90%; }
	
	.left-menu { display: none; }

}