html {
    height: 100%;
    font-family: Verdana,sans-serif;font-size:13.5px;
}

body {
    background: white;
    margin: 0;
    padding: 0;
    height: 100%;
    color: #444;
    }
body > header.desktop {
    position: fixed;
    width: 100%;
    box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.75);
    height: 5em;
    line-height: 5em;
    background: hsla(0, 0%, 100%, 0.8);
    z-index: 2;
    
}
body > header.mobile { display: none; }
    body > header.desktop .items { position: relative; margin: auto; width: 1060px; }


#logo {
    display: block; 
    position: absolute;
    left: 0; top: 1em;
    width: 322px;
    height: 40px;
    z-index: 3;
    background: url(../images/logo.png) no-repeat;
    outline: none;
    cursor: pointer;
    }
    
 .nav {position:absolute; display: block; right: 0; font-size:1.15em;font-weight:normal;z-index:2;}
  .nav > ul {margin:0;padding:0;}
  .nav a {text-decoration:none;}
   .nav a:hover {}
  .nav li { list-style-type:none; }
  .nav > ul > li {position:relative;float:left;margin-left: 0.25em; line-height: 4.5em; }
   .nav > ul > li.active, .nav > ul > li:hover { background: #ab1212; color: white;  }
   .nav > ul > li > a { display: block; padding: 0 1.25em; }
   .nav > ul > li.active a, .nav > ul > li:hover a { color: white; }
  .nav > ul > li > ul { display:none;position:absolute;right: -20px;top:4.25em; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.5); border:none;padding:5px 0px;margin:0px;background:#b0201f;
                      border-radius:10px;border:#ffffff 2px solid; line-height: 1.2em; }
    .nav > ul > li:hover > ul {display:block;}
    .nav > ul > li > ul li {float:none;border:none;padding:0px;margin:0px;text-align:left;font-size: 0.8em;}
    .nav > ul > li > ul li a {color:#ffffff;text-decoration:none;margin:10px;display:block;font-weight:normal;}
    .nav > ul > li > ul li a:hover {text-decoration:underline;}
    .nav > ul > li > ul:after { content: ""; position:absolute;width:90px;height:20px;background:url('../images/point-red.png') center bottom no-repeat;top:-20px;right:0px;}

#container {
    position:relative; margin:0px auto 0px auto;background:url('../images/rice-paper-bgd.jpg') repeat;text-align:left;min-height: 100%;
    top: 5em;
    width: 940px;
    padding: 0 60px;
    box-shadow: 0 10px 15px black;
    }


#photolabels {border-radius:10px;border:#ffffff 2px solid;background:url('../images/bg-trans-black.png');display:block;padding:7px;margin:0px 0px 20px 0px;}
#photolabels h2 {margin:4px 0px;padding:4px 18px;border-right:1px #aaaaaa solid;font-size:14px;}
#photolabels h2.last {border-right:none;}
#photolabels h2 a {color:#000000;background:none;}
#photolabels h2 a:hover {color:#ffffff;}


#tapestry {position:absolute;left:-35px;top:0px;height:496px;z-index: 1;width:50px;background: url(../images/tapestry-white.png) no-repeat; box-shadow: 0 -10px 15px hsla(0, 0%, 0%, 0.5); }

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

#content {
    position: relative;
    padding-top: 75px;
    margin-bottom: 269px;   /* take account of our top offset, & the footer */
    z-index: 0;
    width: 940px;
    min-height: 200px;  /* make sure we don't leave gaps in very short windows */
    line-height: 1.6em;
    font-size: 1.15em;
    }

#editor {
    width: 99%;
    background: #dfdcce;
    }
    #editor .info {
        margin-right: 0;
        margin-left: 10px;
        left: 0;
        }


#content a {
    }

#content a:hover {
    color: #500;
    }
    
#content h1.first {
    position: relative;
    max-width:700px;
    left: 0px;
    margin: 0px 0px 45px 0px;
    padding: 6px 0px 6px 75px;
    font-size: 10pt;
    font-weight: bold;
    text-align: left;
    background: url('../images/header-bg.png');
    background-position: left;
    background-repeat: no-repeat;
    font-size:17px;
    height:22px;
    line-height:22px;
    width: 100%;
    color: white;
    z-index:1;
    }

    #content h1.first img {
        display: inline;
        }
    
.sessions {
    font-size: 10pt;
    }
    .sessions table {
        border-collapse: collapse;
        }
    .sessions td {
        padding: 3px 14px;
        padding-left: 0;
        vertical-align: top;
        }

.club {
    width: 80%;
    margin-top: 50px;
    }
    .club th, .club td {
        text-align: left;
        vertical-align: top;
        }
    .club h2 {
        margin-top: 0;
        }


.location-info {
    margin-bottom: 3rem;
}

.locations-table,
.location-table {
    margin-top: 1rem;
    width: 100%;
    float: left;
    margin-bottom: 3rem;
}

.locations-table th,
.location-table th {
    padding: 0.5rem 1rem;
    vertical-align: top;
}

.locations-table,
.location-info h3 {
    margin-top: 3rem;
}

.locations-table {
    float: none;
}

.location-map {
    width: 100%;
    float: left;
}

.location-image,
.location-map iframe {
    width: 100%;
}

.location-image img {
    max-width: 100%;
}

@media (min-width: 769px) {
    .location-table {
        width: 50%;
    }
    .location-map {
        width: 50%;
    }
    .location-image img {
        max-width: 50%;
    }
}

.contacts {
    }
    .contacts th, .contacts td {
        text-align: left;
        vertical-align: top;
        }
    .contacts table {
        padding-right: 40px;
        }
    .contacts .name {
        color: #666;
        }

#techniques .thumb img {
    display: inline;
    width:180px;
    }

#home .display {
    width:auto;
    margin: auto;
    }
    #home .thumb {
        display: inline;
        text-align: center;
        }
        

.bios .thumb {
    float: left;
    margin-top: 15px;
    margin-bottom: 5px;
    }

h1, h2, h3, .h1, .h2, .h3 {font-family:"Trebuchet MS", sans-serif;}
    
h1, .h1 {
    font-size: 2em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    }

h2, .h2 {
    font-size: 1.75em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    }

h3, .h3 {
    font-size: 1.25em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    }

option.h1, option.h2, option.h3 {
    margin: 0;
    }

.info {
    float: right;
    width: 250px;
    font-size: 9pt;
    background: white;
    padding: 10px;
    border: 1px solid #ab1212;
    line-height: 11pt;
    margin-left:10px;
    }
    .info h3 {
        color: #444;
        font-size: 10pt;
        font-weight: bold;
        margin: 0;
        margin-top: 0px;
        margin-bottom: 0px;
        }
    .info ul {
        list-style-type: none;
        padding: 0 10px 0 18px;
        margin: 10px 0;
        }
    .info li {
        margin: 3px 0;
        }

ul .label {
    color: #ab1212;
    font-weight: bold;
    position: relative;
    left: -6px;
    }

ul.arrows {
    padding-left: 15px;
    margin-left: 0;
    }
    ul.arrows li {
        background: url(../images/list-arrow.png) no-repeat;
        background-position: left 0.4em;
        list-style-type: none;
        padding-left: 14px;
        margin-left: 0;
        }

a:hover img {
    opacity: 0.75;
    filter: alpha(opacity=75);
    }
.thumb, .thumblink {
    left: 0;
    top: 0;
    margin: 5px 30px 30px 30px;
    text-align: center;
    position: relative;
    outline: none;
    font-size: 12px;
    }
    .thumbfirst {margin-left:10px;}   
    .thumblast {margin-right:10px;}   
a.thumb, a.thumblink {
    text-decoration: none;font-weight:normal;
    }
    .thumb img, .thumblink img {border: 4px solid white;box-shadow: 1px 1px 7px #444;}
    .thumb .caption, .thumblink .caption {
        display: block;
        line-height: 10px;
        color: #444444;
        }
    .thumb .date, .thumblink .date {
        display: block;
        color: #777;
        }
    .thumblink .caption {color:#AB1212;}
.popup {
    position: relative;
    top: 0; left: 0;
    box-shadow: 0 0 30px hsla(0, 0%, 0%, 1);
    background: hsla(0, 0%, 0%, 0.75);
    padding: 1em;
    text-align: right;
    font-weight: bold;
    color: #777;
    cursor: pointer;
    background: white;
    }
    .popup .close {
        display: block;
        font-weight: bold;
        font-size: 2em;
        position: absolute;
        right: .5em;
        top: .5em;
        color: white;
        cursor: pointer;
        z-index: 2;
    }
    .popup img {
        display: block;
        border: 2em solid white;
        max-width: 600px;
        }
    .popup .tl, .popup .tr, .popup .bl, .popup .br {
        position: absolute;
        width: 7px;
        height: 7px;
        _display: none; // easier not to have rounded corners in IE6
        }
    .popup .tl {
        left: -2px;
        top: -2px;
        background: url(../images/popup-tl.png) no-repeat;
        }
    .popup .tr {
        right: -2px;
        top: -2px;
        background: url(../images/popup-tr.png) no-repeat;
        }
    .popup .bl {
        left: -2px;
        bottom: -2px;
        background: url(../images/popup-bl.png) no-repeat;
        }
    .popup .br {
        right: -2px;
        bottom: -2px;
        background: url(../images/popup-br.png) no-repeat;
        }

ul.messages {
    margin: 0; padding: 0;
    list-style: none;
}
    ul.messages > li {
      background: hsla(0, 0%, 0%, 0.5);
      color: white;
      padding: 10px 20px;
      margin-bottom: 15px;
      }

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    color: #666;
    padding-bottom: 20px;
    text-align: right;
    }
#social {
    color: #666;
    margin-top: 30px;
    bottom: 0;
    width: 350px;
    }
#mounttaranaki {
    position: absolute;
    bottom: 0;
    left: 30px;
    background: url(../images/mounttaranaki.png) no-repeat;
    width: 359px;
    height: 125px;
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mounttaranaki.png');
    }
    
form th {
    text-align: left;
    }
form th .message {
    font-size: smaller;
    }
form .error .message {
    color: red;
    }

input.string, textarea {
    border: 1px solid #ab1212;
    background: white;
    }

/* === Textbox === */

.textbox {
    position: relative;
    min-height: 20px;
    _height: 20px;
    border: 1px dashed #765;
    background: #dfdcce;
    margin: 10px 0 10px 0;
    padding: 5px 7px;
    z-index: 0;
    }
.list-button ul, .list-button li {
    margin: 0;
    padding: 0;
    }
    .list-button li {
        margin-left: 10px;
        }
.spacer {
    padding-left: 50px;
    }
.buttons, .save-buttons {
    padding: 6px 16px;
    z-index: 1;
    }
    .buttons button, .buttons input, .buttons select,
     .buttons .file {
        border: 1px solid #777;
        background: white;
        margin: 4px 0;
        .margin: 4px 3px;
        cursor: pointer;
        .padding: 0 3px;
        }
.buttons {
    top: 150px;
    left: 15px;
    .width: 190px;
    }

.buttons, .editbar {
    border: 1px solid #ddd;
    background: #f5f5f5;
    }

.message {
    margin-top: 30px;
    }
    .message p  {
        font-style: italic;
        margin-bottom: 3px;
        }
    .message .quotes {
        font-size: 25pt;
        color: #666;
        float: left;
        padding-right: 3px;
        padding-top: 2px;
        height: 1pt;
        }
    .author {
        padding-left: 25px;
        font-weight: bold;
        color: #666;
        }
    .moderate, .delete {
        font-size: smaller;
        font-weight: bold;
        }

#homepic {position:relative;width:747px;height:270px;}        
#virtwrap {position:absolute;top:183px;background:url('../images/bg-trans-black.png');width:100%;height:30px;line-height:30px;text-align:center;}
 #virtues {margin:0px;padding:0px;color:#ffffff;}
 #virtues:hover {cursor:pointer;}
  #virtues .virtue, #virtues .virtdot {list-style-type:none;display:inline-block;position:relative;padding:0px 10px;}
   #virtues .virtue .virtuebox {display:none;position:absolute;top:33px;left:-50px;width:150px;background:#666;line-height:20px;padding:14px 11px;border:2px #ffffff solid;border-radius:15px;font-size:11px;line-height:14px;text-align:left;box-shadow:1px 1px 5px #aaa;}
/*   #virtues .virtue:hover .virtuebox {display:block;} */
    .virtuebox .point {position:absolute;width:17px;height:9px;background:url('../images/point-grey.png') center no-repeat;top:-9px;left:75px;}
        
ul.infoboxes {margin:0px;padding:0px;}
 ul.infoboxes li {width:190px;padding-right:50px;list-style-type:none;float:left;}
 ul.infoboxes li.last {padding-right:0px;}
 
.clear {clear:both;}
.clearfix:after {clear:both;content:'.';display:block;height:0;visibility:hidden;}

.center {text-align:center;}
.left {float:left;}
.small {font-size:12px;}
 
a.biolink {width:180px;display:block;margin:0px 30px 30px 30px;}
  .biolink img {border: 4px solid white;box-shadow: 1px 1px 7px #444;margin:10px 30px 0px 30px;}
  .biolink .name {}
  .biolink .text {font-size:12px;color:black;font-weight:normal;}

/* Events */  
#club_links > a.club_events { border-radius: 13px; display: inline-block; background: none; color: #500; font-weight: bold; height: 26px; line-height: 26px; padding: 0px 10px; }
#club_links > a.club_events.current, #club_links > a.club_events:hover { background: #ab1212; color: white; }
.upcoming_event { display: inline-block; margin: 30px; padding: 20px; width: 210px; background: rgba(255,255,51,.5); vertical-align: top; box-shadow: 8px 8px 8px #bbb; }
.upcoming_event { transform:rotate(1deg); }
.upcoming_event:nth-child(2n) { transform:rotate(-1deg); }
.upcoming_event:nth-child(3n) { transform:rotate(2deg); }
.upcoming_event:nth-child(4n) { transform:rotate(-2deg); }
.upcoming_event > .register_attendance { display: inline-block; padding: 0px 10px; margin-top: 10px; height: 30px; line-height: 30px; border-radius: 15px; border: 2px solid black; background: white; cursor: pointer; display: relative; }
.register_attendance + [name=attending] { display: none; }
.register_attendance + [name=attending] > input[type=text], .register_attendance + [name=attending] > input[type=email] { border: 2px solid grey; }

/* Friends of Sakura Kan */
.friend_box { margin: 3rem 0 3rem 0; overflow: hidden; width: 75%; }
.friend_box img { float: right; margin-right: 50px; max-width: 100px; max-height: 60px; }

/* Video */
.video { width: 940px; margin-bottom: 1em; }
.video.closed > * { display: none; }
.video.closed > header { display: block; }
.video > header { box-sizing: border-box; width: 100%; background: #ab1212; color: white; font-size: 1.3em; line-height: 1.3em; padding: .5em 1em; cursor: pointer; position: relative; }
.video > header:after { content: "►"; display: block; position: absolute; right: 0; top: 0; padding: .5em 1em;}
.video > header:hover { background: #900000; }
.video.closed > header { background: #5f5f5f; }
.video.closed > header:hover { background: #5f5f5f; background: #ab1212; }
.video > iframe { width: 940px; height: 530px; }

/* Home */
.cover-heading { position: absolute; color: white; font-size: 3em; z-index: 2; text-shadow: 0 0 10px black; line-height: 1.25em; }
.cover-heading.top-left { left: 0; top: 110px; }
.cover-heading.bottom-right { right: -30px; top: 500px; }
img.cover-photo { display: block; position: relative; left: -60px; border-top: 0.5em solid hsla(0, 0%, 0%, 0.85); height: 560px; width: 1060px; }
ul.values { position: relative; left: -60px; top: -4em; width: 1060px; overflow: hidden; margin: 0; padding: 0; list-style-type: none;
            display: block; background: hsla(0, 0%, 0%, 0.85); color: white; text-align: center; line-height: 4em; height: 4em; }
ul.values li { display: inline-block; padding: 0 3em; }
ul.values li:hover, ul.values li.active { text-shadow: 0 0 3px hsla(0, 0%, 100%, 1); cursor: pointer; }

/* Our people */
.thumb.bio { float: left; text-align: center; display: inline-block; padding: 2rem; margin: 0; line-height: 1.6em; }
.thumblink.bio, #about_people .thumb.bio { float: left; text-align: center; height: 300px; width: 25%; padding: 0; margin: 0; line-height: 1.6em; }
    .thumblink.bio .details, .thumb.bio .details { color: black; }
    .thumblink.bio .caption, .thumb.bio .caption { font-weight: bold; color: #ab1212; }
    .thumblink.bio img, .thumb.bio img { display: inline; width: 100px; }