/*
Theme Name: leibniz
Theme URI: -
Description: a minimalistic theme for monade, a picture weekly by <a href="http://www.erational.org">erational</a>
Version: 1.0
Author: erational
Author URI: http://www.erational.org

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/


/******************** structure ********************/

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet Ms", Trebuchet, Arial, "Courier new",Courier,  sans-serif;
	font-size: 0.8em;
}

/******************** layout **************************/
#page {
	margin: 0;
	padding: 0;
}

#header {
	position: fixed;
	width: 200px;
	height: 280px;
	bottom:0;
	right: 4%; /*6em;*/
	z-index: 100;

	text-align: right;
	background:transparent url(images/monade.png) no-repeat bottom left;
	/*border: 1px solid red;
	padding:1rem; */
}


#content {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 69;
  padding: 2% 0;

  /*border: 1px solid purple;
  background: teal;*/
}

#sidebar {
  position: absolute;
  text-align: left;
  z-index: 404;
  top: 2em;
  left: 2em;
}

@media (max-width:1100px) {
	#page {
		display:flex;
		flex-wrap:wrap;
		min-height:100vh;
	}

	#header,
	#content,
	#sidebar {
		position:initial;
		/*border:1px solid red;*/
		width:100%;
	}

	#sidebar {
		margin-bottom:2rem;
		padding:1rem;
	}

	#sidebar ul ul {
		display:flex;
		flex-wrap:wrap;
	}

	#sidebar ul ul li {
		width:33%;
		margin-bottom:.8rem;
	}


	#header {
		order:3;
		height:auto;
		font-size:.9rem;
		padding-right:1rem;
		min-height:250px;
	}


}


/******************** main tags ********************/
h1 {
  font-size: 1.2em;
}
h1 a {
  color: #000;
}

.post h1 {
	margin:0.1rem;
}
small {
	color:#999;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #286aff;
  font-weight: bold;
}

a:hover {
  color: #194097;
}

label {
  display: block;
  margin: 2em 0;
}

form {
	margin:1rem;
}


input.blue {
	background-color:#eee;
	border:none;
	padding:0.5rem 1rem;
	width:80%;
	margin-bottom:1rem;
}

/********************* color **********************/
.warning {
  width: 300px;
  border: 1px dashed #7F7F7F;
  margin: 0 auto;
  padding: 15px;
  background: #EFEFEF url(./images/but_warning.png) no-repeat 5px 5px;
}

.congratulation {
  width: 300px;
  border: 1px dashed #7F7F7F;
  margin: 0 auto;
  padding: 15px;
  background: #EFEFEF url(./images/but_congratulation.png) no-repeat 5px 5px;
}

/********************** responsive *********************/
img {
	max-width:calc(100% - 2rem);
	max-height:90vh;
	height:auto;
	border-bottom:1rem;
}
@media (max-width:1100px) {
	#post-2 {
		margin:0 1rem
	}
}