/*
*=================================================================
* additional style sheet for pelican website
* Copyright 2018, Sarah Zobel
*=================================================================
*/

:root {
    --bgcolor: #d3e1f8;
	--maincolor: #254d92;
	--footlinecolor: #637da9;
}

body {
 background-color: var(--bgcolor);
}

/*
*=================================================================
* Style for menu row
*=================================================================
*/

/* Default and larger than 750px (when menu starts looking good) */

	.menu {
	  text-align: center;
	  color: var(--maincolor);
	  padding: 5px;
	  background-color: #fff;
	  border-radius: 0px 0px 25px 25px;
	  margin: 5px;
	  overflow: hidden;
	}

	.menu {
	  text-align: right;
	  color: var(--maincolor);
	  padding: 5px;
      padding-right: 2em;
	  background-color: #fff;
	  border-radius: 0px 0px 25px 25px;
	  margin: 5px;
	  overflow: hidden;
	}

	.menu a {
      padding-left: 1em;
	  font-size: 100%;
	  color: var(--maincolor);
	  font-weight: bold;
	  text-decoration: none;
	}

	.menu .icon {
  	  display: none;
	}
	

/* Size at which the menu starts looking bad */
@media screen and (max-width: 750px) {

	.menu {
	  text-align: center;
	}

    .menu a:not(icon) {display: none;}
	.menu a.icon {
      display: block;
  	}

}

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

    .menu.responsive {position: relative;}
	.menu.responsive .icon {
   	  position: absolute;
      right: 0;
      top: 0;
    }	

	.menu.responsive a {
      float: none;
      display: block;
      text-align: center;
      color: var(--maincolor);
	  font-weight: bold;
	  text-decoration: none;
	}

}


/*
*=================================================================
* Style for header row
*=================================================================
*/

	.header {
	  background-color: var(--maincolor);
	  border-radius: 25px;
	  padding: 20px;
	  padding-left: 2em;
	  margin: 5px;
	}

	.header a {
	  color: #fff;
	  text-decoration: none;
	}

	.header h1 {
	  margin: 0;
	}


/*
*=================================================================
* Style for content row
*=================================================================
*/

	.content {
	  padding-left: 2em;
	  padding-right: 2em;
	  padding-top: 3em;
	  background-color: #fff;
	  border-radius: 25px 25px 0px 0px;
	  margin-left: 5px;
	  margin-right: 5px;
	}

	.page-title {
	  text-align: left;
	  color: var(--maincolor);
	}

	.ref {
	  font-size: 80%
	}

	.small {
      font-size: 90%
	}

	ul ul, ul ol, ol ol, ol ul {
  	  list-style-type: none; 
	}


/* ---- 9 column content part ---- */

	.cont {
	  padding-top: 1em;
	}

	.cont h6 {
	   margin-top: 2em;
	   font-weight: bold;
	   color: var(--maincolor);
	}

	.cont a {
	  color: var(--maincolor);
	  text-decoration: none;
	}

	.cont table {
	  width: 100%;
	}

	.cont th {
	  padding: 12px 15px;
	  text-align: center;
	}

	.cont th:first-child, td:first-child {
	  padding-left: 0; 
	}

	.cont th:last-child, td:last-child {
	  padding-right: 0;  
	}

	.modified {
	  font-size: 0.8em;
	  color: var(--maincolor);
	  padding-top: 2em;
	  padding-bottom: 1em;
	}

/* ---- 3 column side part ---- */

	.side {
	  padding-top: 1em;
	}

	.side a {
	  color: var(--maincolor);
	  text-decoration: none;
	}

	.side h6 {
	  font-weight: bold;
	}



/* ---- Responsive image on index ---- */
	img[alt=sarahzobel] { 
	   float: left;
	   width: 100px; 
	   margin-right: 1em;
	   margin-bottom: 1em;
	}

@media (min-width: 750px) {

	img[alt=sarahzobel] { 
	   float: left;
	   width: 180px; 
	   margin-right: 2em;
	   margin-bottom: 2em;
	}

}


/*
* Style for footer row
*/

	.footer {
	  text-align: right;
	  color: var(--maincolor);
	  padding-left: 2em;
	  padding-right: 2em;
	  background-color: #fff;
	  border-radius: 0px 0px 25px 25px;
	  margin-left: 5px;
	  margin-right: 5px;
	}

	.footer p {
	  border-top-style: solid;
	  border-color: var(--footlinecolor);
	  border-width: 1px;
	  padding-top:2px;
	}

	a.foot {
	  color: var(--maincolor);
	  font-weight: bold;
	  text-decoration: none;
	}