#navi{
    width:100%;
    list-style-type:circle;
    margin-left:0;
    padding-left:0;
    font-size:14px;
}

ul#navi li{
    width:150px;
    float:right;
    text-align:center;
    vertical-align:central;
}
ul#navi li a{
    display:block;
    width:150px;
    vertical-align:central;
    text-decoration-color:none;
    background-color:cornflowerblue;
    color:aqua;
}
ul#navi li a:hover{
    background-color:blue;
}

.tdc{
    background-color:cornflowerblue;
    background-image:url("../img/top6_b_1.JPG");
    width:150px;
    height:50px;
    text-align:center;
    border-right-style:solid;
    border-right-color:blue;
    border-right-width:thin;
    border-bottom-style:inset;
    border-bottom-color:blue;
    border-bottom-width:thin;
    text-wrap:none;
    /*border-radius:40px;*/
}
.tdc:hover{
    background-color:darkturquoise;
    background-image:url("../img/grablue1.jpg");
    color:cadetblue;
}
a:link{
    color:darkblue;
}
a:hover{
    color:forestgreen;
}
a:visited{
    color:red;
}

@media screen and (max-width: 800px) {

    #navi{
    width:100%;
    list-style-type:circle;
    margin-left:0;
    padding-left:0;
    font-size:14px;
}

ul#navi li{
    float:right;
    text-align:center;
    vertical-align:central;
}
ul#navi li a{
    display:block;
    vertical-align:central;
    text-decoration-color:none;
    background-color:cornflowerblue;
    color:aqua;
}
ul#navi li a:hover{
    background-color:blue;
}

.tdc{
    background-color:cornflowerblue;
    background-image:url("../img/top6_b_1.JPG");
    width:100%;
    height:80px;
    text-align:center;
    border-right-style:solid;
    border-right-color:blue;
    border-right-width:thin;
    border-bottom-style:inset;
    border-bottom-color:blue;
    border-bottom-width:thin;
    text-wrap:none;
    /*border-radius:40px;*/
}
.tdc:hover{
    background-color:darkturquoise;
    background-image:url("../img/grablue1.jpg");
    color:cadetblue;
}
a:link{
    color:darkblue;
}
a:hover{
    color:forestgreen;
}
a:visited{
    color:red;
}

}