#wrap {max-width: 1100px}

  header {
    background-color: transparent;
    margin: 0.2em 0em;
    padding: 0em;
    color: #fff;
    font-size: 1.0em;
/*    overflow: hidden;*/
  }

  details > summary { outline: none}
  details#menu {
    background-color: transparent;
    color: #220;
    margin: 1em 0.5em;
    padding: 0 0.5em;
    margin-top: -2em;
  }
  details#menu > summary {
      list-style-type: none;
    background-color: transparent;
    margin: 0em;
  outline:none;
  }


details#menu > summary::-webkit-details-marker {
    display: none;
}

#iconmenu {float: right; width: 100px}

#iconmenu > div {
  width: 25px;
  height: 3px;
  background-color: #ccf;
  margin: 4px 0;
}

details#menu > div {
  background-color: #e9a; margin: 1.2em 0.2em 0.2em 0.2em; padding: 0.9em;
}

  .main header #banner {
    background-color: #113;
    background-image: url("http://a0.jamesrobertson.me.uk/images/view2.jpg");
    background-repeat: no-repeat, repeat;
    background-position: center;

    background-size: cover;
    /*margin: 0.2em 0em;*/
    margin: 0em;
    padding: 1em;
    color: #fff;
    min-height: 140px;
    
  }

  
  header h1 {
    background-color: transparent; 
    font-size: 1.7em; color: #fff; font-family: Monaco, Papyrus;
    margin-top: 1.4em;
  }


.column:last-child {
  background-color: #dfd;
  border-radius: 18px;
  margin: 1.1em 0.9em;
  padding: 1em;
  color: #141;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

  #warning {
    background-color: #e77;
    margin: 0.4em; padding: 1em;
    color: #125;
    font-size: 1.1em;
    max-width: 600px
  }

  #search {
    background-color: transparent; float: right; width: 150px; margin: 0.4em; padding: 0.9em;
    margin-right: 2em;
  }
  #warning mark {background-color: #cc6; color: #125}

  #input textarea {background-color: transparent; font-size: 1.3em; outline: none; margin: 0.5em; padding 0.95em; border: 1px solid #ddd}

.column {max-width: 600px;}
#ptop {background-color: transparent; font-size: 1.1em; font-family: Sans-serif, Arial, Verdana ; margin-top: -120px; }
#ptop img {background-color: transparent; width: 140px; margin: 0em; padding: 0em; border-radius: 50%;border: 4px solid white}
#ptop span {background-color: transparent; display: block}
#ptop #title {background-color: transparent; font-size: 1.2em; margin: 0.03em 0em; padding: 0.1em; font-weight: 600}
#ptop #user {background-color: transparent; font-size: 0.8em; margin: 0em 0.1em; padding: 0.04em 0.1em; color: #444}
#ptop p {background-color: transparent; font-size: 0.9em; margin: 0.3em 0.1em; padding: 0.5em 0.1em; color: #000}

hr {margin: 2em 0.5em}
  .notice {
    background-color: transparent;
    max-width: 500px;
    margin: 0em 0.5em;
    padding: 0.8em 0.4em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.965em;
    border: 0.002em solid rgba(80,80,150, 0.1);
    border-bottom-style: 2em solid #e33;
    min-height: 65px;

  }
  .notice:hover {background-color: #ededfe}
  .notice div#avatar {background-color: transparent; float: left; width: 72px; }
  .notice .user {background-color: transparent}
  .notice .user a:first-child {background-color: transparent; color: #000; font-weight: 600}
  .notice .user .ellipsis {width: 17px; background-color: transparent; vertical-align: text-bottom; float: right; display: none}



  .notice .card {background-color: transparent; max-width: 500px;}

  .notice div#avatar img {
    background-color: transparent; 
    width: 35px; 
    display: block;
    margin: 0.2em 0.9em;
    padding: 0.4em;
    /*margin-top: 0.4em;
    margin-right: 0.4em*/
  }

.notice div#avatar img:hover {filter: brightness(90%);}

.profile {
  position: relative;
  display: inline-block;
}

#ucard {
  visibility: hidden;
  width: 276px;
  height: 264px;
  background-color: #fff;
  color: #fff;
  border-radius: 15px;
  margin: 0.2em;
  padding: 1em;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  border: 1px solid #ccc;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

#ucard div img {width: 90px}
#ucard .title {color: #000; display: block; font-weight: 600; margin: 0.1em; padding: 0.2em}
#ucard .username {color: #000; display: block; margin: 0.1em; padding: 0.2em; color: #333}
#ucard p {margin: 0.1em; padding: 0.2em; line-height: 1.3em}
.profile:hover #ucard {
  visibility: visible;
  transition: 0.5s;
  transition-delay:0.9s;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.2s;
}


@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
  .notice  div2 span {font-weight: 600}
  .notice div2 ~ div {background-color: transparent; min-width: 330px}
  /*.notice:hover {background-color: rgba(244,244,255, 0.5); color: #000} */
  .notice div a {text-decoration: none; color: #555}
  .notice div:first-child a:hover {text-decoration: underline}
  .notice p {background-color: transparent; color: #000; margin: 0.1em 0; padding: 0.3em 0; }
  .notice p a {background-color: transparent; text-decoration: none}
  .notice p a:link {background-color: transparent; color: #448}
  .notice p a:visited {background-color: transparent; color: #774}
  .notice p a:hover {background-color: transparent; text-decoration: underline}
  .top-crop { 
    background-color: #422;
    overflow: hidden;
    border-radius: 15px;
    max-height: 280px;
    /*display: flex;*/
    /*align-items: flex-end;*/
    /*justify-content: center*/
    /*align-items: center; */
   }

.top-crop img {
    max-width: initial;

}

  .y10 img {
    margin-top: -18%
   }

  .y20 img {
    margin-top: -30%
   }

  .center {
    display: flex;
    justify-content: center;
    align-items: center; 
   }

  .bottom {
    display: flex;
    align-items: center; 
    align-items: flex-end;

   }


/* Twitter card */

  .card { background-color: #e00; font-size: 0.8em; color: #f22; clear: both; border: 1px solid #ccc; border-radius: 15px; padding-bottom: 1em;}
   /*.card:hover { background-color: #000}*/
  .card img {width: 100%; border-radius: 15px 15px 0 0;}
  .card a {text-decoration: none; color: #900}
  .card a:hover {text-decoration: none; color: #900}
  .card span {color: #000; font-size: 1.0em;}
  .card .title {background-color: transparent; display: block;  font-size: 1.18em; font-weight: 300; font-family: Verdana, Arial; margin: 0.8em 0.5em 0.4em 0.4em; padding: 0.1em 0.4em}
  .card .desc {background-color: transparent; color: #555; display: block; font-size: 1.18em; font-weight: 500; margin: 0.1em 0.3em; padding: 0.1em 0.9em 0.3em 0.6em;}
  .card .link { display: block}
  .card .linkurl {color: #555; font-weight: 300; font-size: 1.18em; margin: 0.3em 0em; padding: 0.5em 0em }
  .card .link svg {fill: #555; width: 15px; margin-left: 16px; vertical-align: text-bottom}
  .card .top-crop {border-radius: 15px 15px 0 0;}


/* end of Twitter card */

/* start of summary card */
    .card2 {background-color: transparent;  overflow: hidden; border-radius: 15px; border: 1px solid #ccc}
    /*.card2:hover {background-color: #ee2; }*/
    .card2 img {width: 170px; height: 130px; object-fit: cover;}
    #content {
       background-color: transparent;
       font-family: Arial, Verda;
       font-size: 0.9em;
       margin: 0.4em; padding: 0.8em;
    }
    #col1 {
      background-color: transparent; float: left; 
      border-right: 1px solid #ccc; margin: 0; padding: 0; width: 130px; overflow: hidden
    }

    .card2 #col1 svg {background-color: transparent; width: 30px; fill: #556}

    #col2 {
      background-color: transparent;
      margin: 0em; padding: 0em;
}
#col1, #col2 {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Clear floats after the columns */
#col2:after {
  content: "";
  clear: both;
}
    .card2 a {text-decoration: none;}
    .card2 span {color: #000; font-size: 1.1em;}
    .card2 .title {background-color: transparent; display: block;   font-weight: 300; font-family: Verdana, Arial; margin: 0.1em 0em; padding: 0.2em 0em; font-size: 1.0em;}
    .card2 .desc {background-color: transparent; color: #555; display: block; margin: 0.1em 0em; padding: 0.2em 0em; line-height: 1.2em;}
    .card2 .link { display: block}
    .card2 .linkurl {color: #555; font-size: 1.0em;}
    .card2 .link svg {color: #555; width: 15px}
    .card2 .link svg {fill: #555; width: 15px;  vertical-align: text-bottom}
/* end of summary card */

.notice .ncol2 {background-color: transparent; float: left; width: 508px }

.notice:after {
  content: "";
  display: table;
  clear: both;
}
.notice #actions svg {width: 20px; display: none}
#footer {
  background-color: #113;
  color: #fff;
  margin: 0.3em;
  padding: 1em;
}
#footer h2 {font-size: 0.9em}
#footer ul {list-style-type: none}
#footer ul li a { text-decoration: none}
#footer ul li a:link { color: #ee3}
#footer ul li a:hover { text-decoration: underline; color: #4a0}
#footer ul li a:visited { color: #fee}

.backarrow {background-color: #e888; width: 20px}
.img1 {background-color: #000; max-width: 380px;  border-radius: 15px;}
img.weather {width: 22px; margin-top: -0.2em}

@media only screen and (min-width: 860px) {
  .column {
    float: left;
    background-color: transparent;
  }

  .notice {background-color: transparent; min-width: 590px;}
}

@media only screen and (min-width: 9000px) {

  .notice {background-color: transparent; min-width: 700px;}
}