body { background-color: #fff; }
h1 {
    font-size: 40px;
    /* NTR for opening page only? Throughout? */
    font-family: 'NTR';
}

.divfixed {
    position: fixed;
    z-index: 2;
}
.bar { position:absolute; left:50%; width:50%; top:10%; height:80%;
    background:#cbd; vertical-align: middle; overflow: scroll; }

.vscroll {
    position: absolute;
    z-index: 1;
    overflow: scroll;
}

.top    { height: 30%; top:    0; }
.bottom { height: 70%; bottom: 0; }
.left   { width:  70%; left:   0; }
.right  { width:  30%; right:  0; }
.topbottom { height: 100%; top: 0; }

/*.ap2 { margin: 20px; padding: 20px; }
.radio-button-icons { margin: 20px; padding: 20px; }
*/

/* highlighted relative */
p.isCurrent {
    background-color: #bbd;
    filter: brightness(50%);
}

table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
    /*border: 1px solid black;*/
}
table td {
    background-color: lightgray;
    text-align: center;
    padding-top: .5em;
    padding-bottom: .5em;
    border: 1px solid gray;
}

rect { fill:blue; stroke: black; stroke-width: 1px; }
/*circle { fill:blue; stroke:black; stroke-width: 5px; }*/
line {
    stroke:blue; stroke-width: 5px;
    stroke-linecap:round; stroke-linejoin:round;
    /*shape-rendering:geometricPrecision;*/
}

.arc { stroke:blue; fill:blue; }

.eveTextLabel {
    text-anchor:middle;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;

    color: green;
}
.swathTextLabel {
    text-anchor:middle;
    alignment-baseline:central;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;

    color: green;
}
.textBG {
    fill:#ff0;
}
rect.monarchFrame {
    stroke:#0C0;
    stroke-width:10px;
    stroke-linejoin:round;

    fill:#0F0;
    opacity: 0.9;
}
rect.targetFrame {
    stroke:#C00;
    stroke-width:10px;
    stroke-linecap:round;
    stroke-linejoin:round;
    /*stroke-dasharray: 20,20;*/

    fill:#F00;
    opacity: 0.9;
}

rect.interiorFrame {
    stroke:#FFA500;
    stroke-width:8px;
    stroke-linejoin:round;
    stroke-opacity: 1.0;

    fill:#FFA500;
    opacity: 0.7;
}

.targetImageRect {
    border: 5px solid red;
    stroke: #400;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width: 5px;
    /*stroke-dasharray: 15,15;*/
    /*stroke-opacity: 1.0;*/

    fill: none;
    pointer-events: all;
}

// .targetImageRect:hover
// {
//     stroke-opacity: 0.9;
// }

.peripheral {
    fill:#ccc;
    opacity: 0.4;
}
.peripheral:hover {
    fill:#cc0;
    opacity: 0.2;
}

svg {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-color: #fff;
    /*margin: 10px;*/
}

div.eveTooltip {
    position: absolute;
    text-align: center;
    /*width: 200px;*/
    padding: 8px;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;

    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    left: 50px;
    top: 50px;
    opacity: 0;
}

.evebold {
    font-weight: bold;
}

/*----------------eve/app/static/js/NewPersonDiv.js----------------*/
input.gender {
    margin-right: 10px;
}
.genderButton {
    margin-right: 10px;
}

circle.smalldot {
    fill: #8df;
}

.icon {
    stroke:none;
    fill-rule:evenodd;
    fill:#ee7;
    fill-opacity:0.8;
}

/*----------------relativesstyle.css----------------*/
/*
.fillViewportVertically { min-height: 80vh; }
.fillParentVertically { min-height: 80vh;  }
*/

.red   { background-color: #fdd; border: 2px solid red; }
.grey  { background-color: #ddd; border: 2px solid grey; }
.green {}
.innergreen { background-color: #dfd; }
.innerdarkgrey { background-color: #dde; }
.innergrey { background-color: #eee; }
.blue  { background-color: #ddf; border: 2px solid blue; }

.alternate { background-color: #cee; }


.zero { margin: 0; padding: 0; }
.textcentered { text-align: center; }
.marginauto { width: 100%; margin: auto; }

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

/*----------------bootstrap vertical divider----------------*/
/* Ref: http://stackoverflow.com/a/21352749/ */
.divider-vertical {
    height: 50px;
    margin: 0 9px;
    border-left: 1px solid #F2F2F2;
    border-right: 1px solid #FFF;
}

div#edit_name_div { height: 100px; background-color: #ffa; display: none;
    position: fixed; bottom: 0;
}

/*----------------Center radio button and icons----------------*/
/* Ref: https://stackoverflow.com/a/28180637/ */
.radio-inline {
    display: inline-block;
    vertical-align: middle;
}

.radio-button-icons {
    vertical-align: middle;
}

.drop-ready {
    fill: red;
}

/*----------------Constrain height of logo----------------*/
/* The bootstrap way (https://stackoverflow.com/a/21859493/)
   didn't work. */
/*
   .img-responsive {
   display: block;
   width: auto;
   max-height: 100%;
   }*/

.sg-img-responsive {
    margin: 0 auto;
    float: left;
}

/*----------------navbar style----------------*/
/* tried this: */
/* Ref: https://stackoverflow.com/a/18529465/ */
/* didn't work. */
/* navbar */
.navbar-default {
    background-color: #8888F8;
    border-color: #47E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}


.widthOneHundred { width: 100%; }


/* NEW */

.pull-right { float: right; }