@import url("nexus.css");
@import url("newtiles.css");

html {
    padding:0;
    margin:0;
}
body {
    padding:0 0 70% 0;
    margin:20px 2% 20px 2%;
    font-family:Open Sans, sans-serif;
    color:#212529;
    background: url(Logo.png) no-repeat #fff;
    background-size:200px;
    background-position-y: 20px;
    background-position-x: 98%;
}
body.subIndex .navi {
    margin-top:20px;
    /*     margin-left:30px; */
}
body.subIndex .headRows {
    /*     position:static; */
}
h1.KUE, h1.KT {
    width:280px;
    min-height:60px;
    border:1px solid #ccc;
    border-radius: 6px;
    margin:10px 0px 10px 0px;
    padding:5px 10px 5px 10px;
    text-align:center;
    opacity:0.77;
}
div.description {
    width:280px;
    border:1px solid #ccc;
    border-radius: 6px;
    margin:10px 0px 10px 0px;
    padding:5px 10px 5px 10px;
    text-align:left;
    background-color:#ffffff;
    opacity:0.88;
    filter: drop-shadow(4px 4px 2px gray);
}
div.contact {
    width:280px;
    min-height:30px;
    height: auto !important;
    color:#ffffff;
    background-color:#333333;
    border:1px solid #ccc;
    border-radius:6px;
    margin:26px 0px 26px 0px;
    padding:5px 10px 5px 10px;
    opacity:0.88;
    filter: drop-shadow(4px 4px 2px gray);
}
body.subIndex section div.contact {
    margin:20px 0px 16px 0px;
    height:300px;
}


.KT { /*Tile Table*/
    background-color:#86cedc;
}
.navi a.KT {
    background-color:#86cedc;
    border-bottom:3px solid #333333;
}
.KUE { /*Index*/
    background-color:#0098bb;
}

.Standard,
.navi a.Standard,
li.All,
a.All
{ /*Standard*/
    background-color:#447777;
}

.Motorway,
.navi a.Motorway
{ /*Motorway*/
    background-color:#40b5f1;
}
.Motorway-Rural,
.navi a.Motorway-Rural
{/*Motorway-Rural*/
    background-color:#8FADF8;
}
.Motorway-Town,
.navi a.Motorway-Town
{/*Motorway-Town*/
    background-color:#87c278;
}
.Motorway-Megacity,
.navi a.Motorway-Megacity
{/*Motorway-Megacity*/
    background-color:#538e2b;
}
.Rural,
.navi a.Rural
{/*Rural*/
    background-color:#dea600;
    color:#333333;
}
.Town,
.navi a.Town
{/*Town*/
    background-color:#ced000;
    color:#333333;
}
.Town-Rural,
.navi a.Town-Rural
{/*Town-Rural*/
    background-color:#efca00;
}
.Town-Megacity,
.navi a.Town-Megacity
{/*Town-Megacity*/
    background-color:#9A9B33;
}
.Megacity,
.navi a.Megacity
{/*Megacity*/
    background-color:#666666;
}
.Megacity-Transition,
.navi a.Megacity-Transition
{/*Megacity-Transition*/
    background-color:#888866;
}
.Special,
.navi a.Special,
.Proving-Ground,
.navi a.Proving-Ground,
.Proving-ground,
.navi a.Proving-ground
{/*Special*/
    background-color:#dd0000;
}
.Tram,
.navi a.Tram {
    background-color:#9142aa;
}
.Parking,
.navi a.Parking {
    background-color:#4b4b71;
}
.Stacked,
.navi a.Stacked {
    background-color:#690a69;
}
.NewTiles,
.navi a.NewTiles {
    background-color:#00ff00;
    color:#000c5f;
}

.navi a,
li
{
    color:#ffffff;
    /*         color: #005072; */
    text-decoration: none;
    transition: none;
    text-align: center;
    padding: 2px 2px 0 2px;
    white-space: normal;
    font-weight: bold;
    /*         font: 700 14px/17px Open Sans,sans-serif; */
    margin:0px 0px 0px 0px;
    text-transform:uppercase;
    border: 1px solid #aaaaaa;
    display:block;
    width:auto;
    line-height:1.0em;
    border-radius: 7px;
}
div.description a {
    color:inherit;
    text-decoration: none;
    text-align: center;
    padding: 1px;
    white-space: normal;
    font-weight: bold;
    margin:0;
    text-transform:uppercase;
    border: 2px dashed #aaaaaa;
    display:inline;
    width:auto;
    border-radius: 7px;
}

.navi a:hover,
div.description a:hover
{
    background-color:#e0002a;
    color:#666666;
}
.navi a:active {
    color: #ffff00;
}
a.top {
    max-width:300px;
}
.navi a
{
    text-align:left;
    padding-left: 10px;
}
.navi {
    width:300px;
    min-height:290px;
    /*         max-height:300px */
    background-color:#333333;
    border:1px solid #ccc;
    border-radius:6px;
    margin:10px 0px 10px 0px;
    padding-top: 0px;
    position:relative;
}

nav {
    overflow:none;
    filter: drop-shadow(4px 4px 2px gray);
}
nav ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 10px;
    list-style-type: none;
    width: 270px;
    overflow: none;
}
nav.navi > * {
    opacity:0.77;
}
.anchor {
    visibility:hidden;
    translate: 0px 160px;
}

/*li > a {
 *    display: inline;
 *    width: 150px;
 *    text-align: center;
 * }*/
li {
    border-width: 0px;
    margin: 0px 0px 4px 0px;
    padding: 4px 0px 4px 0px;
    color: #ffffff;
    font-weight: bold;
}
.hide {
    width:0px !important;
    height:0px !important;
    border:0px !important;
    opacity:0.0;
}
a.hide {
    translate: 0px -0px;
}

h1.country {
    opacity:0.85;
    margin: 0px 0px 10px 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 70px;
    /*     background-color: rgba(222, 222, 222, 0.85); */
    background:linear-gradient(180deg, #ffffff, #ffffff00) repeat;
    /*     background:linear-gradient(180deg, #f1f1f1, #f1f1f100) repeat; */
    /*     background:linear-gradient(180deg, #00ff00, #00ff0000) repeat; */
    text-align: center;
    text-transform:uppercase;
    border-radius: 5px 5px 0px 0px;
    border: 0px solid #aaaaaa;
    font-size:1.5em;

}
h1.country a {
    opacity:1.0;
    color:#000000;
    border:0px;
    text-align: center;
    padding:5px 0px 5px 0px;
    border-radius:0px;
}
h1.country a:hover {
    background-color:#a6d96700;
    color:#000000;
}

nav.Standard {
    background-image: url("General01.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.General {
    background-image: url("General01.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.USA {
    /*     background-image: url("USA.jpeg"); */
    background-image: url("USA02.jpeg");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.China {
    /*     background-image: url("China.jpeg"); */
    background-image: url("China08.jpeg");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.Japan {
    /*     background-image: url("Japan.jpeg"); */
    background-image: url("Japan02.jpeg");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.Germany {
    /*     background-image: url("Germany.jpeg"); */
    background-image: url("Germany03.jpeg");
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
pid {
    font-size: smaller;
}
.brand_link {
    background-color: #e0002a !important;
    font-family: "Rubik-Medium","Meiryo","Osaka",Arial,serif;
    font-size: .8rem;
    font-weight: bold;
    line-height: 1.6em;
    letter-spacing: .12em;
    padding: 12px 30px 10px 30px;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
    display: inline-block;
    margin: 15px 0 0;
    min-width: 220px;
    width: auto;
    text-align: center !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border: 1px solid #e0002a !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
/* Placeholder box for better arrangement */
.placeholder
{
    opacity:0.03;
}
/* container <section> */
.responsive-two-column-grid-01,
.responsive-two-column-grid-02
{
    display:block;
    max-width:1200;
    margin-left:30px;
    margin-top:10px;
    /*     border: 1px solid red; */
}
.responsive-two-column-grid,
.responsive-two-column-grid-left,
.responsive-two-column-grid-right
{
    display:block;
    max-width:800px;
    margin-left:10px;
    margin-top:10px;
    /*     border: 1px solid blue; */
}
/* columns */
.responsive-two-column-grid > *,
.responsive-two-column-grid-01 > *,
.responsive-two-column-grid-02 > *,
.responsive-two-column-grid-left > *,
.responsive-two-column-grid-right > *
{
    margin:1rem 1rem 1rem 0rem;
}

/* tablet breakpoint */
@media screen and (min-width:700px) {
    .responsive-two-column-grid-01,
    .responsive-two-column-grid-02
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /*         grid-template-columns: auto auto; */
    }
    .responsive-two-column-grid-left
    {
        border-right: 3px dotted #4C4C4C;
    }
    .responsive-two-column-grid-right
    {
        padding-left: 10px;
    }
}

@media screen and (min-width:768px) {
    .responsive-two-column-grid,
    .responsive-two-column-grid-left,
    .responsive-two-column-grid-right
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /*         grid-template-columns: auto auto; */
    }
}

/*@media screen and (max-width:1100px) {*/
.responsive-two-column-grid-01,
.responsive-two-column-grid-02
{
    /*border-top: 3px dotted #4C4C4C;
     *            padding-top: 10px;*/
    max-width: 720px;
}
/* } */

@media print {
    nav.placeholder
    {
        display: none;
    }
    /*    a:after {
     *        content: " (" attr(href) ") ";
     *        color: black;
     *        font-size: smaller;
}*/
}