body {
    background-color: #bbbb99;
    color: black;
    max-width: 38em;	/* check with comparison page */
    margin: 0;
    padding: 40px 9%;
    font-family: Ubuntu,UnDotum,'Trebuchet MS',Helvetica,sans-serif;
}

h1 {
    background-color: #777744;
    color: white;
    padding: 10px;
    border: 4px solid white;
    text-align: center;
    line-height: 1.3em;
}
h2,h3 {
    background-color: #4186ac;
    color: white;
    padding: 10px;
    border: 4px solid white;
}
#footnotes h2 {
    background: none;
    border: 0;
    padding: 0;
}
h1 {
    font-size: 2em;
}
h1.title {
    display: none;
}

.box, pre, input, button {
    background-color: #a1435f;
    color: white;
    padding: 0.5em;
    border: 4px solid white;
}
.box a, .box a:visited, pre a, pre a:visited {
    background-color: #ffffff;
    text-decoration: none;
    padding: 2px;
}

button, input.button {
    background-color: #43a18b;
    font-weight: bold;
}

form {
    margin-bottom: 0.1em;
}

a, a:visited {
    color: black;
    text-decoration: underline;
}
a img {
    border: 0;
}

#page a {
    color: #eb0c60;
}
#page a:visited {
    color: black;
}
#page {
    background-color: #ddddcc;
    margin: 1.3em 0 0 0;
    padding: 100px 1em 1em 1em;
    border: 12px solid white;
    text-align: justify;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    z-index: 1;
    line-height: 1.3em;
    box-shadow: 3px 3px 12px rgba(0,0,0, 0.5);
}

#header {
    text-align: center;
    position: relative;
    margin: 0 0 -110px 0;
}
#header a {
    display: block;
    width: 430px; height: 150px;
    margin: auto;
    background: url('../img/secushare-horizon-430-150.png') no-repeat;
}
.frame {
    border: 7px solid white;
    width: 90%;
}
#langtab {
    text-align: right;
    text-transform: uppercase;
    font-size: 50%;
    background-color: white;
    color: white;
}
#langtab a {
    text-decoration: none;
}


#nav {
    top: 9em;
}
#table-of-contents {
    top: 11.7em;
}
#legend {
    top: 14.3em;
}
#nav, #table-of-contents, #legend {
    position: fixed;
    left: 0px;
    width: 1em; /* forced to limit width as auto gets it wrong */
    line-height: 1em;
    font-size: 80%;
    z-index: 4;

    hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
}

#text-legend {
    background-color: #b85270;
    margin: -7.1em 0 0 1.5em;
}
#text-table-of-contents {
    background-color: #63a1c4;
    margin: -8.2em 0 0 1.5em;
}
#nav-menu {
    background-color: #55b8a1;
    margin: -9em 0 0 1.5em;
}
#nav-menu, #text-table-of-contents, #text-legend {
    display: none;
    color: white;
    text-align: left;
    border: 4px solid white;
    padding: 0.5em;
    min-width: 38em; /* have to provide min-width to break inherit */
    box-shadow: 0px 0px 404px 404px rgba(0,0,0, 0.7);
}

#nav:hover #nav-menu, #table-of-contents:hover #text-table-of-contents,
#legend:hover #text-legend {
    display: block;
}

#text-legend b {
    display: inline-block;
    min-width: 2em;
}
#legend h2 {
    background-color: #a1435f;
}
#top, #nav h2 {
    background-color: #43a18b;
}
#table-of-contents h2 {
    background-color: #4186ac;
}
#top, #nav h2, #table-of-contents h2, #legend h2 {
    padding: 0.7em;
    color: white;
    text-align: left;
    font-size: 100%;
    font-weight: normal;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}
#table-of-contents h2 {
    width: 5.5em;
    margin: 6em 0 0 0;
}
#nav h2 {
    width: 6.3em;
    margin: 0.5em 0 0 0;
}
#legend h2 {
    width: 4.3em;
    margin: 10.5em 0 0 0;
}
#top, #nav h2, #table-of-contents h2, #legend h2 {
    height: 1em;
    border: 4px solid white;
    border-top: 0;
    box-shadow: -5px 5px 12px rgba(0,0,0, 0.5);

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

#nav ul, #table-of-contents ul, #legend ul {
    margin: 1em;
    padding: 0 0 0 1.5em;
}

#nav ul {
    padding: 0;
}
#nav li {
    list-style: none;
}
#nav a, #table-of-contents a {
    color: black;
    text-decoration: none;
}
#nav a:hover, #table-of-contents a:hover, #legend a:hover {
    text-decoration: underline;
    width: auto;
}
#nav a {
    display: inline-block;
    min-width: 8em;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.1em;
}


#postamble {
    margin: 0;
    padding: 0;
}

#top {
    display: inline;
    width: 1.8em; height: 1em;
    margin-left: 20px;
    border: 4px solid white;
    box-shadow: 3px 3px 12px rgba(0,0,0, 0.5);
}


#org-div-home-and-up {
    float: right;
    color: #eee;
}
#org-div-home-and-up a:first-child {
    display: none;
}
#org-div-home-and-up a:visited {
    text-decoration: none;
    color: #035;
}
#org-div-home-and-up a {
    text-decoration: none;
    color: #035;
}

.org-info-js_header-navigation {
    margin-top: -1.5em;
}

thead {
    color: white;
    background-color: #586e75;
}
tbody {
    background-color: white;
}
thead,tbody,table {
    border: 4px solid white;
}
table {
    width: 100%;
    letter-spacing: -0.05em;
}
table,form {
    text-align: left;
}

td {
    border: 0;
}
td.center {
    text-align: center;
}
td.left {
    text-align: left;
}
td.right {
    text-align: right;
}

table.icons td.center {
    font-size: 125%;
    line-height: 1em;
}
table tbody tr:hover {
    background-color: #ddddcc;
}

.lists input.text {
    width: 16em;
}

ul {
    margin: 0;
    padding: 0 0 0 1.5em;
}

#text-buzzwords li a {
    display: inline-block;
    min-width: 5.5em;
}

img:hover { // unused
    transform: scale(1.2);
    transition: all 0.9s ease 0.4s;
}