code, pre {
  width: 80%;
color: #222;
background-color: #fff;
overflow: scroll;
}

pre {
  padding: 1.34em;
  border-radius: 5px;
border: 1px solid black
}



h1 {
  font-weight: bold;
  font-size: 1.5em;
}

h2 {
  font-weight: bold;
  font-size: 1.25em;
}

h3 {
  font-weight: bold;
  font-size: 1.25em;
}

h4 {
  font-weight: bold;
  font-size: 1.25em;
}

h5 {
  font-weight: bold;
  font-size: 1.25em;
}

h6 {
  font-weight: bold;
  font-size: 1.25em;
}

  .demo-card-wide.mdl-card {
    width: 100%;
    margin: 10px auto;  

    background-color: white;
  }
  .preopreo {
    color: #fff;
    min-height: 213px;
    background-color: #0234ce;
    background: center / cover;
  }
  .demo-card-wide > .mdl-card__menu {
    color: #fff;
  }
  
  .profimg {
   border: 5px solid white;
    border-radius: 50%;
    background-color: black;
  }

  .bio {
    text-align: center;
    margin: auto;
    
  }
  .biofull {
    text-align: left;
    
  }

.avatar {
  height: 64px;
  width: 64px;
}

.mdl-textfield {
  width: 100%;
}

details > summary:first-of-type {
  list-style-type: none;
}



.name {
  font-weight: bold;
  font-size: 200%;
}


.mdl-card__media {
	margin: 0;
}
.mdl-card__media > img {
	max-width: 100%;
}
.mdl-card__actions {
	display: flex;
	box-sizing:border-box;
	align-items: center;
}
.mdl-card__actions > .mdl-button--icon {
	margin-right: 3px;
	margin-left: 3px;
}


.profile_pic {
  width: 48px;
  }
  
 .biofull {
   margin-left: 15px;
 }

 .skills {
   width: 95%;
 }
 .skills a {
  margin-left: 15px;
  display: list-item;
 }
 
 
.name {
margin-bottom: 0px
}

#comm {
  border: 1px solid grey;
  padding: 1em;
  margin-bottom: 1em;
}

#comm:nth-child(odd) {
  background: #ddd;
}

#comm:nth-child(even) {
  background: #bbb;
}

button {
  font-weight: bold;
}

.mdl-chip {
  margin: 2px;
}

/*************************************
 * TITLE: Sinorca Screen Stylesheet  *
 * URI  : sinorca/sinorca-screen.css *
 * MODIF: 2003-Apr-30 19:31 +0800    *
 *************************************/


/* ##### Common Styles ##### */

body {
  color: black;  
  margin: 0;
  padding: 0;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}




acronym, .titleTip {
  border-bottom: 1px dotted rgb(153,153,153);
  cursor: help;
  margin: 0;
  padding: 0 0 0.4px 0;
}

.doNotDisplay {
  display: none;
}

.smallCaps {
  font-size: 110%;
  font-variant: small-caps;
}


/* ##### Header ##### */

.superHeader {
  color: white;
  background-color: rgb(100,135,220);
  height: 2px;
}


.midHeader {
  color: rgb(39,78,144);
  background-color: rgb(140,170,230);
}

.headerTitle {
  font-size: 32px;
  font-weight: normal;
  margin: 0 0 0 4mm;
  padding: 0 0;
}

.subHeader {
  color: white;
  background-color: rgb(0,51,153);
  margin: 0;
  padding: 1ex 1ex 1ex 1.5mm;
}

.subHeader a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  font-weight: bold;
  margin: 0;
  padding: 0 0.75ex 0 0.5ex;
}  

.subHeader a:hover {
  text-decoration: underline;
}

.superHeader .highlight, .subHeader .highlight {
  color: rgb(253,160,91);
  background-color: transparent;
}


.thisPage {
  color: black;
  background-color: white;
  padding-left: 4mm;
  border-top: 1px solid rgb(153,153,153);
  border-bottom: 1px solid rgb(153,153,153);
}




.lighterBackground {
  color: inherit;
  background-color: white;
}


/* ##### Main Copy ##### */

#main-copy {
  background-color: white;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 0 0 0em;
  padding: 0.5mm 5mm 5mm 5mm;
  border-left: 1px solid rgb(153,153,153);
}

#main-copy p {
  margin: 1em 1ex 2em 1ex;
  padding: 0;
}

#main-copy a {
  background-color: transparent;
  text-decoration: underline;
}

#main-copy a:hover {
  text-decoration: none;
}



#main-copy .topOfPage {
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
  margin: 2.5ex 1ex 0 0;  /* For MSIE */
  padding: 0;
  float: right;
}

#main-copy > .topOfPage {
  margin: 2.75ex 1ex 0 0;  /* For fully standards-compliant user agents */
}

dl {
  margin: 1em 1ex 2em 1ex;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 0;
}

dd {
  margin: 0 0 2em 2em;
  padding: 0;
}


/* ##### Footer ##### */

#footer {
  color: white;
  background-color: rgb(100,135,220);
  font-size: 91%;
  margin: 0;
  padding: 1em 2.5mm 2.5ex 2.5mm;
  clear: both;
}

#footer .left {
  line-height: 1.45em;
  float: left;
  clear: left;
}

#footer .right {
  text-align: right;
  line-height: 1.45em;
}

#footer a {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

#footer a:hover {
  text-decoration: none;
}

.demo-card-square.mdl-card {
  width: 100%;
  margin-top:15px;
  margin-bottom: 15px;
}


.mdl-card__media {
  margin: 0;

}
.mdl-card__media > img {
	max-width: 100%;
  background: whitesmoke;
}
.mdl-card__actions {
	display: flex;
	box-sizing:border-box;
	align-items: center;
}
.mdl-card__actions > .mdl-button--icon {
	margin-right: 3px;
	margin-left: 3px;
}

#thumbs {
  cursor: pointer;
}

.icons {
    font-size: 20px;
    text-decoration: none;
    padding: 5px;
}

.label {
 color: white;
}

.mdl-grid {
	max-width: 90%;
}





.external {
  float: right;
  position: fixed; 
  bottom: 90px;
  right: 20px;
  width: 90%;
  max-width:300px;
}

#blokzmenu {
  position:fixed;
  bottom:25px;
  right:25px;
  border: 1px solid whitesmoke;
}
#blokztop {
  position:fixed;
  bottom:25px;
  left:25px;
  display: none;
}



#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}


a {
  color: #E31337;
  text-decoration: none;
}



img {
  max-width: 100%;
}

#splash {
  justify-content: center;
  margin: auto;
  text-align: center;
  max-width: 420px;
  background-color: whitesmoke;
  margin-top: 2em;
  padding: 10px;
  border: 1px solid black;
}

#comments {
  background-color: #ddd;
}




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: #f0f0f8; /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: 40px auto;
  padding: 10px;
  padding-bottom: 75px;
  border: 1px solid #e7e7f1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24), 0 6px 20px 0 rgba(0, 0, 0, 0.42);
  width: 80%;
  height: 60%;
  overflow: scroll;
}

/* The Close Button */
.close {
  color: #E31337;
  right: 15px;
  float: right;
  top: 15px;
  position: absolute;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



td, th {
  border: 1px solid #ddd;
  padding: 3px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding: 3px;
  text-align: center;
  background-color: #ddd;
  color: #555;
}

#newPostDiv {
 margin-bottom: 100px;
}