/* CSS file for zazen.uk
*  created & maintained by: admin
*  created: March 2021
*  version: 1.0
********/

/*
* site wide
********/

html {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6em;
  background-color: #111;
  margin: 0;
  padding: 0;
}

body {
  width: 360px;
  padding: 4px;
  margin: auto;
  color: #eee;
}

h1 {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #ccc;
  padding-left: 0;
  padding-top: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

h2 {
  clear:both;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #ccc;
  padding-left: 0;
  padding-top: 1em;
  margin-bottom: 0.5em;
}

h3 {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #eee;
  padding-left: 0;
  padding-top: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.1em;
}

p {
  font-weight: 300;
  margin-top: 0;
  padding: 5px;
}
.alert,
a.alert, 
dd.alert {
  color:#cbfecb;
}
dl.replay {
    font-size:1.5em;
    color:#cbfefe;
    padding-left:20px;
}
.emph,
dt {
    font-weight:600;
}

.sq ul {
  list-style-type: square;
}

.sq li {
  font-weight: 300;
  list-style-type: square;
}

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

#start {
    color:#111;
    height:0;
}

.credit {
    text-align:right;
    font-size:0.9em;
}

div.menu {
  width: 360px;
  height: 72px;
  background-image:url("wang-junyi-blossom.jpg");
  border:1px solid #fff;
  padding:2px;
}

div.register {
    width:360px;
    margin:auto;
}
div.content {
    margin-top:32px;
}

div.content ul li a.grn {
    color:#000;
    font-weight:600;
    font-size: 1.25em;
    padding:16px;
    background-color:#cbfecb;
    border-radius:4px;
    text-decoration:none;
    list-style-type:none;
}
div.content .grn a:hover,
div.content .grn a:active {
    background-color:#eee;
}
div.content ul.grn {
    margin:50px 20px;
    list-style-type:none;
}

div.ir {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:18px;
    color:#000;
    background-color:#eee;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
    width:360px;
    margin:auto;
    border-radius:4px;
    box-sizing:border-box;
}
dl.replay dt {
    padding-bottom:10px;
}
.ir .norm {
  font-family: 'Roboto Mono', monospace;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4em;
}

img.ir {
    width:20px;
    height:20px;
    background-color:#eee;
    text-align:left;
    padding:0;
    margin:0;
}
.reverse {
    background-color:#eee;
    color:#111;
    width:340px;
    padding:5px 10px;
    margin-bottom:10px;
    border-radius:4px;
}
.max h3 {
border:solid 1px #777;
background-color:#aaa;
padding:2px 18px;
color:#222;
font-weight:600;
}
audio {
width:100%;
margin:auto;
}

.menu p {
    margin-top: 6px;
}

.menu a {
  position: relative;
  float: left;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  margin-left: 0px;
  color: #000;
  margin-top: 8px;
  padding: 2px 3px 1px 3px;
  border:1px solid #060;
  border-radius:4px;
  background-color:#fff;
}

.menu a:hover,
.menu a:active,
.menu .active a {
  color: #000;
  background-color: #eee;
  text-decoration: none;
  border:1px solid #000;
  margin-bottom:1px;
  border-radius:4px;
}

div.content a {
    font-weight:500;
    text-decoration: underline;
    color:#fff;
}

.invis {
    color:#111;
}

/*
* full-width site
********/

@media screen and (min-width: 720px) {
  body, div.menu {
    width: 720px;
  }
  .backdrop {
      width:720px;
  }
  div.menu {
      margin-top:60px;
      padding:0;
  }
  menu .img {
      width:720px;
  }
  .menu p {
      margin-top:-45px;
  }
  .menu a {
    margin-top: 54px;
    margin-left: 6px;
    font-size: 20px;
    padding: 8px;
    border-radius: 4px;
  }
  div.max {
      width:360px;
      margin:auto;
  }
  .max h3 {
  padding:2px 8px;
  }
  audio {
  width:356px;
  margin:auto;
  }
}