/* Table of contents
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
- Normalize
- Grid
- Fonts
- Base Styles
- Typography
- Links
- Lists
- Code
- Tables
- Spacing
- Fontawsome
- Utilities
- Navigation
- Footer
- Clearing
- Media Queries
*/

/* Normalize
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
  margin: 0;
  padding: 0;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2em;
  box-sizing: border-box; 
}

/* rows */
.row {
	padding: 0;
	margin: 0;
}
.row:before,
.row:after {
  content:"";
  display:table;
}
.row:after {
  clear:both;
}

/* columns */
.col {
	display: block;
	float:left;
//	margin: 1% 0 1% 4%;
	margin: 1% 0 1% 4%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

/* cells */
.cell1of1 {	width: 100%;}
.cell2of2 {	width: 100%;}
.cell1of2 {	width: 48%;}
@media only screen and (max-width: 480px) {
  .cell1of2, .cell2of2 { width: 100%; }
}

.cell3of3 {	width: 100%; }
.cell2of3 {	width: 65.33%; }
.cell1of3 {	width: 30.66%; }
@media only screen and (max-width: 600px) {
	.cell1of3, .cell2of3, .cell3of3 { margin: 0; width: 100%; }
}

.cell4of4 { width: 100%; }
.cell3of4 { width: 74%; }
.cell2of4 {	width: 48%; }
.cell1of4 {	width: 22%; }
@media only screen and (max-width: 700px) {
	.cell1of4, .cell2of4, .cell3of4, .cell4of4 { margin: 0; width: 100%; }
}

.cell5of5 { width: 100%; }
.cell4of5 { width: 79.2%; }
.cell3of5 { width: 58.4%; }
.cell2of5 { width: 37.6%; }
.cell1of5 { width: 16.8%; }
@media only screen and (max-width: 480px) {
	.cell1of5, .cell2of5, .cell3of5, .cell4of5, .cell5of5 { width: 100%; }
}

.cell6of6 { width: 100%; }
.cell5of6 { width: 82.66%; }
.cell4of6 { width: 65.33%; }
.cell3of6 { width: 48%; }
.cell2of6 { width: 30.66%; }
.cell1of6 { width: 13.33%; }
@media only screen and (max-width: 480px) { 
  .cell1of6, .cell2of6, .cell3of6, .cell4of6, .cell5of6, .cell6of6 { width: 100%; }
}  

.cell7of7 { width: 100%; }
.cell6of7 { width: 85.14%; }
.cell5of7 { width: 70.28%; }
.cell4of7 { width: 55.42%; }
.cell3of7 { width: 40.57%; }
.cell2of7 { width: 25.71%; }
.cell1of7 { width: 10.85%; }
@media only screen and (max-width: 480px) { 
  .cell1of7, .cell2of7, .cell3of7, .cell4of7, .cell5of7, .cell6of7, .cell7of7 { width: 100%; } 
}

.cell8of8 { width: 100%; }
.cell7of8 { width: 87%; }
.cell6of8 { width: 74%; }
.cell5of8 { width: 61%; }
.cell4of8 { width: 48%; }
.cell3of8 { width: 35%; }
.cell2of8 { width: 22%; }
.cell1of8 { width:  9%; }
@media only screen and (max-width: 480px) { 
  .cell1of8, .cell2of8, .cell3of8, .cell4of8, .cell5of8, .cell6of8, .cell7of8, .cell8of8 { 	width: 100%; }
}


/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
 @font-face {
  font-family: 'roboto light';
  src: url('/fonts/roboto_light.woff')
	  format('woff');}
@font-face {
  font-family: 'roboto regular';
  src: url('/fonts/roboto_regular.woff')
	  format('woff');}
@font-face {
  font-family: 'roboto medium';
  src: url('/fonts/roboto_medium.woff')
	  format('woff');}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html { 
		background-image:
				url("/images/gray-dot.svg") ;
		background-position: center;
		background-repeat: repeat;
		background-size: 20px;
		//background:
				//		repeat scroll 0% 0%,
				//   #F5F1E8 none repeat scroll 0% 0%;
  font-size: 100%; height: 100%; 
  line-height: 1.5;
}

header { 
		background:
				repeat scroll 0% 0%,
				#33331a none repeat scroll 0% 0%;
//				#F5F1E8 none repeat scroll 0% 0%;
		font-size: 100%; height: 100%; 
		line-height: 1.5;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
								0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  background: #FFF;
  color: #330000;
  font-family: 'roboto light', sans-serif;
  font-size: 1em;
  font-weight: 300;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
							0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
  font-family: 'roboto light', sans-serif;
  font-weight: 300;
  text-shadow: 2px 2px 2px #aaa;
//  letter-spacing: -.03em;
  letter-spacing: .025em;
  line-height: 1.2;
  margin: 0 0 .8em 0;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }
.home h1 {font-size: 1.5em}

p { line-height: 1.5em; }

strong, b, .bold, dt { font-family: 'roboto regular', sans-serif;
		       font-weight: normal;}

em, i, .italic { font-style: italic; letter-spacing: .03em; }

.mydiv { padding-top: 0 }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
a         { color: #005DB7; text-decoration: none; }
//a:hover   { text-decoration: underline; border-bottom: 1px dotted gray; }
a:hover   { border-bottom: 1px dotted gray; }
a:visited { color: #005DB7; }
a:active,
a:focus   { outline: 0; }
a:target  { color: #007F00; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle outside; }
ol {
  list-style: decimal outside; }
ol, ul {
    padding-left: 0; margin-left: 2em;
    margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5em 0 1.5em 3em;
  font-size: 90%; }
li {
  margin-bottom: 0.3em; }
.lsn { list-style: none; }

ul.team, ul.team ul { list-style: inside none; margin: .5em 0 .2em;}
ul.team ul { margin: 0 0 0 .2em; }
ul.team ul li { margin: 0; }
ul.team a span {color: #000;}


ol.enumerate1 { list-style: decimal inside; margin-left: 1em;
		margin-top: 0;
	  padding-top: 0; text-indent: -1em; }
li.enumerate {
  margin-bottom: 0.3em; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
//  background: #F1F1F1;
//  border: 1px solid #E1E1E1;
//  border-radius: 4px;
  font-size: 90%;
	color: brown;
//  margin: 0 .2em;
//  padding: .2em .5em;
  white-space: nowrap; }

pre > code {
  display: block;
  overflow: auto;
  padding: 1em 1.5em;
  white-space: pre;
  word-wrap: normal; }

pre  {
		overflow: auto;
		padding: .5em 0em .4em 1em;
		margin-left: 0em;
		font-family: monospace; 
		color: DarkSlateGrey;
		border-left: solid 10px;
		border-color: #cccccc;
		background-color: #eeeeee;
		font-size: .9em;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 1em 1.2em;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
article { margin: 2em 0 0; }
button,
.button {
  margin-bottom: 1em; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5em; }
pre,
blockquote,
dl,
figure,
table,
ul,
ol,
form { margin-bottom: 2.5em; }

p { margin-bottom: 1.5em; padding: 0; } 

/* Fontawsome
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
span.fa { color: #555; margin: 0 0.5em 0 0;}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header { margin: 0 -2em 1.5em; }
header img { display: block; margin: auto auto ; }
header span {
		position: absolute !important;
		top: -9999em !important; left: -9999em !important;
} 

// site-title { text-align: center; font-size: 3em; }

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
nav { position: relative; margin-top: 2em; }
nav ul { background: #666633; //#008080;
	 list-style: none; margin: 0;
	 text-align: center; width: 100%; }
nav ul li { display: inline-block; margin: -1px 0 0 0; }
nav ul li a, 
nav ul li a:visited { color: #FFF;
		    display: block;
		    padding: .4em .8em;
		    text-align: center;
		    text-decoration: none; }
nav ul li a:hover { color: #FFF;
		    display: block;
		    padding: .4em .8em;
		    text-align: center;
		    text-decoration: none; 
        border: none;
        }
// nav ul li a:hover { text-decoration: underline; }
// nav ul li a:hover { border-bottom: 1px dotted gray; }
nav ul li.active a, nav ul li.active a:hover {
		color: #4dffff;
		font-family: 'roboto regular';
		font-weight:400;
    text-decoration: none;
    border: none;
} 
nav li:hover ul a { background: #FFF; color: #005DB7; }
nav li ul a:hover { color: #000; }
nav li ul { display: none; position: absolute; width: auto; }
nav li ul li { display: block; float: none; }
nav li ul li a { min-width: 8em; width: auto; }
nav ul li a:hover + .sub, .sub:hover { display: block; text-decoration: none; }

.show-menu { text-decoration: none;
	     color: #fff; background: #008080;
	     text-align: center; padding: .5em 0;
	     display: none; }

nav input[type=checkbox] { display: none; -webkit-appearance: none; }
nav input[type=checkbox]:checked ~ ul { display: block; }

@media screen and (max-width : 700px){
  nav ul {
    position: static;
    display: none;
  }
  nav ul li, li a {
    display: block;
    width: auto;
  }
  .show-menu {
    display:block;
  }
}


/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
		background: #33331a; // #565A5E;
		color: #BBB;
		font-size: 0.9em;
		margin: 0 -2.2em -3em;
		padding: 1.5em 2em 1em 2em;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
								0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
footer a, footer a:visited { color: #80e0ff; }
footer svg { margin: 0 0 0.7em; }
footer ul { list-style: none; }
footer li { border-bottom: 1px solid #555; }
footer li a {display: block; font-size: 0.9em;}
footer li a:hover { color: #EEE; text-decoration: none; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  clear: both;
  color: #e3e3e5;
  background: #e3e3e5;
  height: 2px;
  border: 0;
  margin: 0 0 2.5em; }

scap { font-size: .825em; text-tranformation; uppercase; }
span.TEX {letter-spacing: -0.125em; padding-right:0.125em; }
span.TEX span.E{ position:relative;top:0.5ex;left:-0.0417em;}
.A span.TEX span.E {text-decoration: none; }
span.LATEX span.A{ position:relative;
		   top:-0.5ex; left:-0.375em;
		   padding-right:0.1em;
		   font-size:75%;}
span.LATEX span.TEX{ margin-left:-0.4em; }

/* Various
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* home */
.home dt { margin: 1em 0 .3em; }

/* teaser */
.teaser a:hover { display: inline-block;
		  text-decoration: none; }
.teaser section a h2,
.teaser section a h3 { color: #005DB7;
		       font-size: 1.2em;
		       margin: 0 0 .5em;
		       padding: .2em 0;}
.teaser section a p { color: #000; }
.teaser section a:hover p { color: #005DB7; }

/* news */
span.fa-rss-square { color: #fe9900;}
small span.fa-rss-square { margin: 0 .2em; }
ul.news-posts, 
ul.all-news-posts { list-style: none; margin: 0 0 1em; }
ul.news-posts li, 
ul.all-news-posts li { margin: 0 0 0.6em; }
ul.news-posts a, 
ul.all-news-posts a { display: block; }
ul.news-posts a:hover, 
ul.all-news-posts a:hover { text-decoration: none; }
ul.news-posts span.post-date { color: #555; display:
	block; font-size: 0.8em; }
ul.news-posts h3 { color: #005DB7;
		   font-size: 1.2em;
		   margin: 0;
		   padding: 0 0 .6em; }
ul.news-posts p { color: #000; }
ul.news-posts a:hover p, 
ul.all-news-posts a:hover h3 { color: #005DB7; }
ul.all-news-posts h3 {font-size: 1em;}
ul.all-news-posts h1, 
ul.all-news-posts p {display: none;}
ul.all-news-posts {margin: 0 0 2.5em;}

/* toc */
.toc { list-style: none; }
.toc li:before { content: "\27A4 \2002 \2005"; color: #777;}
.toc li { border-bottom: 1px dotted #999;
	  margin: 0; padding: .2em .5em;}
.toc a { display: inline-block; width: auto; }
.toc a:hover { color: #000; text-decoration: none; }

/* links */
.links ul { list-style: none; }
.links ul li { margin: 0 0 1em; }
.links ul li a:first-child { font-weight: bold; }
.links .toc li a:first-child { font-weight: normal; }
.links .toc li { margin: 0; }

/* books */
.books img { float: left; margin: .3em 1em .2em 0;
	     padding: .1em; border: 1px solid #DDD; }

/* team */
.team h2 { font-size: 1.2em; margin: 1.3em 0 .5em; }
.team h2 .role { color: #999; font-size: 0.7em; }

/* flattr */
a[href*="flattr"] { float: right; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Custom
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
span.neptune { font-family: 'roboto regular' ;
							 font-size: 90%; font-weight: 300;
							 letter-spacing: .1em; color: \#008080;}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Dropdown
---------------------------------------------------------------------------- */
/* Style The Dropdown Button */
.dropbtn {
		color: #222;
		font-family: 'roboto regular', sans-serif;
		font-weight: 300;		background-color: #ffffff;
		padding: .25em 1em;
		padding-left: 0;
		padding-bottom: 0;
		margin-bottom: -1em;
		font-size: .95em;
		border: none;
		cursor: pointer;
		text-shadow: 2px 2px 2px #aaa;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {                     
		position: relative;
		display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
		display: none;
		position: absolute;
		background-color: white;
		font-size: .9em;
		min-width: 300px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		left:0;
}

/* Links inside the dropdown */
.dropdown-content a {
		color: black;
		padding: .25em .5em;
		text-decoration: none;
		display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
		background-color: white;
		color: #006699;
		font-weight:300;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
		display: block;
		color: black;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
		background-color: white;
}