---
---

@import 'variables';
@import 'style';


.wrapper {
	height: 100%;
	width: 100%;
	max-height: 100%;
	min-height: 100%;
	display: flex;
	overflow: hidden;
}
// Content
.content {
	display: flex;
  justify-content: center;
	min-height: 100%;
	height: 100%;
  width: 100%;
	overflow-y: auto;
	color: $content-color;
	line-height: 1.7;
	word-wrap: break-word;
}

.inner {
  width: 100%;
	max-width: $content-width;
	padding: $base-height ($base-height * 2) ($base-height * 3) $base-height;
}

.collapsibleList li{
  list-style-image : url('button.png');
  cursor           : auto;
}

li.collapsibleListOpen{
  list-style-image : url('button-open.png');
  cursor           : pointer;
}

li.collapsibleListClosed{
  list-style-image : url('button-closed.png');
  cursor           : pointer;
}

.posts {
  display: block;
  display: none;
}


//Search
#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

ul {
    //https://catalin.red/css3-ordered-list-styles/
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
 
}

li.folder {
    position: relative;
    display: block;
    font-size: 16pt;
    //background: rgba(250, 84, 84, 0.122);
    color: rgb(50, 132, 179);
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    padding-left: 15px;
  }

li.folder:hover {
    position: relative;
    display: block;
    color: rgb(98, 210, 218);

    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
  }


ul a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
  }

  ul a:hover{
    background: #eee;
  }

  ul a:hover:before{
    transform: rotate(360deg);
  }

  ul a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
  }


//line breaks
#content br {display: none;}
#content p br {display: inline;}