@import url("special.css");

html {
        padding:0;
        margin:0;
}
body {
        padding:0 0 100% 0;
        margin:20px;
/*         background:#ffffff; */
        /*background-color:#eeeeee;*/
        font-family:Open Sans, sans-serif;
        color:#212529;
        background: url(../../../../assets/HEXAGON.png) top right no-repeat #fff; background-size:150px;
   
}
table {
        width:100%;
        background-color:#777777;
        padding:0;
        /*border-collapse:separate !important;*/
	    border-collapse:collapse !important;
        border-radius: 10px;
        overflow: hidden;
}
td {
        padding:3px !important;
        background:#ffffff;
        vertical-align:top;
        text-align:left;
	    border:1px solid #777777;
}
th {
        padding:3px !important;
        background:#cccccc;
        vertical-align:bottom;
        text-align:center;
        font-weight:bold;
	    border:1px solid #777777;
}
ul {
        margin:0 0 0 15px;
        padding:0;
        display:block;
}
ul li {
        list-style:circle;
}

h1,h2, h3, h4, h5, h6 {
        margin:5px 0 5px 80px;
}

h1.KUE, h1.KT {
        padding:5px 10px 5px 10px;
        width:280px;
        border:3px solid #777777;
        margin:10px 0 10px 0;
        text-align:center;
        border-radius: 10px;
        font-size: 1.35em;
}
.KT { /*Tile Table*/
        background-color:#86cedc;
}
#navi a.KT {
        background-color:#86cedc;
        border-bottom:3px solid #333333;
}
table.KT {
        border-left:12px solid #86cedc;    
}
table.KT td.var_Class {
        background-color:#cccccc;
}
.KUE { /*Index*/
        background-color:#0098bb;
}
#navi a.KUE {
        background-color:#0098bb;
        border-bottom:3px solid #333333;
}
table.KUE {
        border-left:12px solid #0098bb;    
}
table.KUE tr:last-child td {
        background-color:#cccccc;
}
table.KUE tbody tr:nth-child(1) {
        display:none;
}

.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;
}
.Town,
#navi a.Town
{/*Town*/
        background-color:#ced000;
}
.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
{/*Special*/
        background-color:#dd0000;
}

#navi a, 
table.KUE a[href], 
table.KT a[href], 
th a[href], 
td a[href],
td.Megacity            a[href],   
td.Megacity-Transition a[href],   
td.Motorway            a[href],   
td.Motorway-Megacity   a[href],   
td.Motorway-Rural      a[href],   
td.Motorway-Town       a[href],   
td.Rural               a[href],   
td.Special             a[href],   
td.Town                a[href],   
td.Town-Megacity       a[href],   
td.Town-Rural          a[href],   
a[href].top
/*, a[href~=top], body > a[href]*/  {
        color:#ffffff;
        text-decoration: none;
        text-align: center;
        padding: 2px 2px 0 2px;
        white-space: normal;
        font-weight: bold;
        margin:0;
        text-transform:uppercase;
        background-color: #333333;
        border: 1px solid #aaaaaa;
        display:block;
        width:auto;
        line-height:1.0em;
        border-radius: 7px;
}
#navi a:hover, 
table.KUE a:hover, 
table.KT a:hover, 
th a:hover, 
td a:hover,
td.Megacity            a:hover,   
td.Megacity-Transition a:hover,   
td.Motorway            a:hover,   
td.Motorway-Megacity   a:hover,   
td.Motorway-Rural      a:hover,   
td.Motorway-Town       a:hover,   
td.Rural               a:hover,   
td.Special             a:hover,   
td.Town                a:hover,   
td.Town-Megacity       a:hover,   
td.Town-Rural          a:hover
/*, body > a[href]:hover*/   {
        background-color:#a6d967;
        color:#666666;
}
#navi a:active, 
table.KUE a:active, 
table.KT a:active, 
th a:active, 
td a:active,
td.Megacity            a:active,   
td.Megacity-Transition a:active,   
td.Motorway            a:active,   
td.Motorway-Megacity   a:active,   
td.Motorway-Rural      a:active,   
td.Motorway-Town       a:active,   
td.Rural               a:active,   
td.Special             a:active,   
td.Town                a:active,   
td.Town-Megacity       a:active,   
td.Town-Rural          a:active
 /*, body > a[href]:active*/   {
        color: #ffff00;
}
a.top {
		max-width:300px;
}
td.top {
		background-color:#cccccc;
}
td.top a.top {
        max-width:100%;
        text-align: left;
}
#navi a  {
        text-align:left;
}
#navi {
        width:300px;
        min-height:140px;
        border:3px solid #777777;
        margin:10px 0 10px 0;
        position:relative;
        border-radius:10px;
        background-color:#333333;
}
th.icon, td.icon{
        max-width:68px;
}
th.name {
        width:150px;
}
th.lanes {
        width:10px;
}
img.icon {
        width:64px;
        height:64px;
        border:1px solid #ffffff;
        border-radius: 7px;
	    padding:0;
}
#legend {
        width:300px;
        height:106px;
        color:#ffffff;
        background-color:#333333;
        border:3px solid #777777;
		margin:0 0 10px 320px;
        position:absolute;
        z-index:10;
        padding:4px 10px 30px 10px;
        overflow:auto;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
}
#legend div {
        border-bottom:2px solid #777777;
        font:bold 1.3em verdana, sans-serif;
}
#legend ul {
        line-height:1.6em;
        border-bottom:0 dashed #777777;
        margin-bottom:8px;
}
img.logo {
        display:none;
}

#container  {
	width:100px;
	border:none;
	background:transparent;
}

#container td {
	border:none;
	background:transparent;
}

