read_write_run/app/static/css/style.css

@font-face {
    font-family: 'suisse_works';
    src: url('../font/suisseworks-regular-webfont.woff2') format('woff2'),
         url('../font/suisseworks-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'suisse_works';
    src: url('../font/suisseworks-bold-webfont.woff2') format('woff2'),
         url('../font/suisseworks-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'suisseintl';
    src: url('../font/suisseintl-book-webfont.woff2') format('woff2'),
         url('../font/suisseintl-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body, html{
    margin:0;
    padding:0;
    clear: both;
}

body{
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: white;
	font-family: 'suisse_works';
  font-weight: normal;
  background-color: #eeeeee;
}

h1{
  font-size:15px;
  padding: 10px!important;
  margin-left: 10px!important;
    font-weight: normal;
    font-style:italic;
  	font-family: 'suisseintl';
}
.title{
  position: relative;
text-decoration: none!important;

}
h2{
  font-family: 'suisse_works'!important;
  font-weight: normal;
  font-size: 40px!important;
  margin:0;
  padding:0;
  }
h3{
    font-weight: normal;
  	font-family: 'suisseintl';
    font-size: 30px;
    padding: 10px;
}

a{color: black;
margin: 0;
padding: 0;}

li{
  list-style: none;
}
sub{
  font-size: 14px;
  font-weight: normal;
  font-family: 'suisseintl';
  line-height: 19px!important;
  margin: 0;
  padding: 0;
  display: block;
}

sub *{
    line-height: 10px!important;
}


.container{
  padding: 10px;
  padding-top: 0px;
}

#writingfield{
  display: none;
}
#writing-field{
  font-size: 25px;
  position:relative;
  top:150px;
  left:10%;
  width: 80%;
  min-height: 1200px;
  background-color: white;
  border: 0;
  padding: 50px;
  padding-bottom: 100px;
  margin: 0;
  margin-bottom: 100px;
  box-sizing: border-box;
  word-wrap: break-word;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
}
#writing-field:focus{
  border: 2px solid blue;
  outline:none;
}

#writing-field img{
  width: 100%!important;
  height: auto;
}

.textimage{
  width: 100%!important;
  height: auto;
}

#type_log{
  position: fixed;
  bottom: 10px;
  left: 10px;
  max-height: 205px;
  vertical-align:bottom;
  width: 50%;
  overflow: scroll;
  word-wrap: break-word;
  font-size: 12px;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
}
#type_log {
  vertical-align:bottom;
}
.incoming{
  position: relative;
  display: inline-block;
  margin-left: -30px;
  margin-right: 10px;
}

#autocomplete{
  font-family: sans-serif;
  color: grey;
  font-size: 13px;
  background-color:#f2f2f2 ;
  border: 0.5px solid grey;


-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.24);
}
#autocomplete:empty {
border: none;
}

#autocomplete div{
padding: 5px;

}
#autocomplete div:hover{
background-color: blue;
color: white;
cursor:pointer;
}
#autocomplete div:hover .incoming{
background-color: blue;
color: white;
cursor:pointer;
}

.incoming:hover{
background-color: black!important;
color: white;
cursor:pointer;
}

#autocomplete div:last-child{
border-bottom: none;
}

#title{
  background:  #eeeeee;
  padding: 0px;
  border: none;
  font-size: 35px;
  display: inline-block;
margin: 0;
position: relative;
top:5px;
box-sizing: border-box;
}
#submit{
  padding: 10px;
  box-sizing: border-box;
  border:2px solid #d9d9d9;
    display: inline-block;
  cursor: pointer;
  margin: 0;
}
#submit:hover{
  background-color: yellow;

}

#topbar{
position: fixed;
top:0;
left: 0;
width: 110%;
box-sizing: border-box;
z-index: 999;
background: white;
}
#topbar form{
margin:10px;

}

#toolbar{

line-height: 30px;
  font-size: 12px;
  z-index: 999999;
margin-top: 10px;
 border-top: 1px solid #AAA;
 border-bottom: 1px solid #AAA;

}

#toolbar a{

  text-decoration: none;
  padding:5px;


  margin-left: 10px;
}

#toolbar a:hover{
  background-color: lightgrey;
}


#upload_img{
position:absolute;
top:20px;
left:200px;
z-index: 9999999;
font-family: 'suisseintl';
background-color: yellow;
padding: 20px;
display: none;
  border: 1px solid #AAA;
   background: #FFF;
}

#code_insert{
  position:absolute;
  top:20px;
  left:200px;
  z-index: 9999999;
  font-family: 'suisseintl';
  background-color: yellow;
  padding: 20px;
display: none;
    border: 1px solid #AAA;
     background: #FFF;
}

#code_insert pre{
  min-width: 200px;
  min-height: 100px;
  background-color: #AAA;
}

.post{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  word-wrap: break-word;
  font-family: "suisseintl";
  font-size: 25px;
  line-height: 40px;
}

.post img{
width: 100%;
}
.post p{
  font-family: "suisseintl";
  font-size: 25px;
  line-height: 40px;

}

.post div{
  font-family: "suisseintl";
  font-size: 25px;
  line-height: 40px;

}


.post pre{
  font-size: 12px!important;
  word-wrap: break-word!important;
  font-family: monospace!important;
  background-color: lightgrey;
  width: 100%;
}

.post code{
  line-height: 12px;
  font-size: 12px!important;
  font-family: monospace!important;
  background-color: lightgrey;
  width: 100%;
  padding: 5px;

  white-space: pre;
  word-break: normal;
  word-wrap:break-word;
}

.post *{
  word-wrap: break-word;
}

.linkTo {
  position: relative;
  font-size: 9px;
  font-family:"suisseintl";

}

#index{
  display: block;
margin-top: 20px;
  bottom:10px;
  padding: 20px;

}

#secondframe{
  width: 50%;
  position: absolute;
  left: 50%;
  top:0;
 height: 100%;
  border:none;
}