/* HEADER */
.icon a {outline: none; background: white;}
.search input.text {
	border: 1px solid white;
	color: black;}
.search input.text:focus {
	border: 1px solid #ff6633;
	color: black;}
.search input {
	color: #ff6633;
	font-size: 1em;
	outline: none;
	width: 98%;
	border: 0;
	margin-top: 0.1em;
	padding: 0.3em;
	padding-top: 0;
	background: 0;}
.search ul {
	margin: 0;
	padding: 0;
	background: white;
	list-style-type: none;
	border: 1px solid #ff6633;
	border-top: 0;}
.search li.selected a {color: #fff;}
.search li.selected {
	background-color: #ff6633;
	color: white;}
.search li {
	margin: 0;
	display: block;
	padding: 0.2em;
	cursor: pointer;
	list-style-type: none;}
.menu ul {
	margin: 0;
	margin-top: 0.2em;
	padding-bottom: 0.2em;
	list-style-type: none;}
.menu ul li {
	display: inline;
	margin: 0;
	margin-right: 1.5em;
	list-style-type: none;}
.menu li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 0.5em;
	padding-bottom: 0.3em;}


/*BLOG*/
div.post {margin-bottom: 4.5em;}
div.comment {margin-bottom: 3em;}
.meta {font-size: 80%; color: #aaa;}
.leavecomment {margin-top: 4.5em; margin-bottom: 4.5em;}
.comments {margin-top: 4.5em;}


/* NAVIGATION */
.sidebar ul {
	margin-top: 0;
	margin-left: 0;
	list-style-type: none;}
.sidebar ul ul {
	margin-bottom: 0;
	margin-left: 1.5em;}
.sidebar ul li {
	margin-top: 1.5em;}
.sidebar ul li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;}
.sidebar p,
.sidebar h1, .sidebar h2, .sidebar h3,
.sidebar .postticker .timestamp,
.sidebar .postticker .summary {padding-left: 0.3em;}
.sidebar .active,
.menu li a.active {
	color: white;
	background: #ff6633;}


/*MAIN BODY*/
.mainbody {
	padding-top: 4em;
	padding-bottom: 15em;}
.postticker ul {
	font-size: 80%;
	color: #aaa;
	list-style: none;
	margin-left: 0;}
.postticker ul li {
	margin-bottom: 1.5em;}
.postticker .timestamp {color: #aaa; font-size: 80%;}
.postticker .subscribe,
.postticker .timestamp .time,
.postticker .timestamp .author {display: none;}
.postticker a.post {color: #aaa;}


/* FOOTER */
.footer {
	color: #aaa;
	font-size: 80%;
	text-align: left;}
.footer a { color: #aaa;}
.footer ul {list-style: none; margin-left: 0em;}
.footer ul ul {margin-left: 1.5em;}
.footer .commands ul, .footer .views ul {display: inline;}
.footer .commands ul li, .footer .views ul li {display: inline; padding-right: 1em;}


/* META */
.metaenvironment h1.heading {display: none;}
.metaheader {background: #C3D9FF; font-size: 200%}
.metaheader ul {display: inline; margin: 0;}
.metaheader li {list-style: none; display: inline; margin: 0;}
.metaheader li:after {content: "/"}
.metaenvironment.container {border: 1px solid #C3D9FF; margin-top: 0;}
.metafooter {background: #C3D9FF;}
.metafooter li {list-style: none;}


/*DEFAULT - sizes customized*/
body {margin-top: 0;}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: 100%; line-height: inherit; }
h1.heading { font-size: 2em; margin-bottom: 1.5em; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 1em; }
.maincontents {font-size: 1.5em;}
h2 { font-size: 2.25em; height: 1.25em; line-height: 1.25; margin-bottom: 1.25em; }
h3 { font-size: 2em; font-weight: bold; margin-bottom: 1.5em; }
h4 { font-size: 1.5em; font-weight: bold; }
h5 { font-size: 1.25em; }
textarea {width: 100%;}
input.text, input.password {width: 200px;}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], button { margin-left: 0.5em;} 

/* widgets */
ul.toc { list-style: none; margin-left: 0; }
ul.toc li.toc-level-1 { margin-left: 0em; }
ul.toc li.toc-level-2 { margin-left: 1em; }
ul.toc li.toc-level-3 { margin-left: 2em; }
ul.toc li.toc-level-4 { margin-left: 3em; }
ul.toc li.toc-level-5 { margin-left: 4em; }
ul.toc li.toc-level-6 { margin-left: 5em; }

/* magritte */
.magritte td { vertical-align: top; }
.magritte textarea { width: 100%; height: 250px; padding: 0; margin: 0; }
.magritte tr td.required:after { content: "*"; color: #8a1f11; font-weight: bold; margin-left: 0.5em; }
.magritte th { vertical-align: top; padding-top: 10px; background-color: inherit; width: 120px; }
.magritte tr.group th { font-size: 1.5em; line-height: 1; margin-bottom: 1em; width: 100% }
.magritte .error { border: 0; padding: 4px 10px 4px 5px; }

/* PIER */
.broken { color: red; font-weight: bold;}
.protected { color: #aaa; }
a {color: #ff6633;}
a:hover {
	color: white;
	background: #ff6633; }
a:hover.nobackground {background: white;}
a.view, a.command {color: gray;}
a {text-decoration: none;}
a.environment:after {content: "*";}
.right {text-align: right;}
.left {text-align: left;}
.center {text-align: center;}
.float {float: right;}
.nobullets ul {list-style: none; margin-left: 0;}
.nobullets ul li {list-style: none; margin-left: 0;}
tr th {background: #eee; font-weight: normal;}
label {font-weight: normal;}
tr.group th {background: white; font-size: 1em; font-weight: bold; margin-top: 1.5em; }
td.required:after {color: #ff6633; content: "*"; margin-left: 0.5em;}

/* Customizations */
table.prtable {table-layout: auto; width: auto; border: inset 1px;}
table.prtable td {border: 1px solid;}

/* 2009-Aug-2 - Bold pre-formatted text should be the same size as normal per-formatted text */
pre b {font-size: 95%;}
code b {font-size: 95%;}

/* 2009-Oct-7 - Add todo items */
.TODO {color: red; background-color: yellow;}
.TODO a {color: #ff6633;}
.TODO a:hover {color: white; background: #ff6633; }

/* 2020-Feb-22 - Working through https://ci.inria.fr/pharo-contribution/job/EnterprisePharoBook/lastSuccessfulBuild/artifact/book-result/PillarChap/Pillar.html */
.annotated-paragraph {
	margin: 20px 0;
	padding: 15px 30px 15px 15px;
	border-left: 5px solid #eee;
}

.annotated-paragraph h4 {
	margin-top: 0;
}

.annotated-paragraph p:last-child {
	margin-bottom: 0;
}

.note {
	background-color: #f0f7fd;
	border-color: #d0e3f0;
}

.note h4 {
	color: #3a87ad;
}

.quote {
	background-color: #f7f7f7;
	border-color: #d0e3f0;
	font-style: italic;
	margin-left: 3em;
}

/* Styling the area of the slides */
#slideshow {
  overflow: hidden;
  height: 300px;
  width: 400px;
  margin: 0 auto;
}

/* Styling the area of the slides */
#cycler {
  overflow: hidden;
  height: 300px;
  width: 400px;
  margin: 0 auto;
}
 
/* Style each of the sides with a fixed width and height */
.cyclerItem {
  float: left;
  height: 300px;
  width: 400px;
}
 
/* Add animation to the slides */
.cycler {
  /* Calculate the total width on the basis of number of slides */
  width: calc(400px * 10);
 
  /* Specify the animation with the duration and speed */
  animation: cyclerItem 15s ease infinite;
} 
/* Define the animation for the slideshow */
@keyframes cyclerItem {
/* Calculate the margin-left for each of the slides (cyclerItems) */
  10% {
    margin-left: 0px;
  }
  20% {
    margin-left: calc(-400px * 1);
  }
  30% {
    margin-left: calc(-400px * 2);
  }
  40% {
    margin-left: calc(-400px * 3);
  }
  50% {
    margin-left: calc(-400px * 4);
  }
  60% {
    margin-left: calc(-400px * 5);
  }
  70% {
    margin-left: calc(-400px * 6);
  }
  80% {
    margin-left: calc(-400px * 7);
  }
  90% {
    margin-left: calc(-400px * 8);
  }
}