@charset "utf-8"

.bold {
font-weight: bold;
}

.center {
text-align: center;		
}

.right {
text-align: right;
}

.left {
text-align: left;
}

.floatRight {
float: right;
}

.floatLeft {
float: left;
}

.floatingRight {
float: right;
}

.floatingLeft {
float: left;
}


.clear {
clear: both;
}

.style_black {color: #000000}
.style_blue {color: #0000FF}
.style_green {color: #1ab136}
.style_yellow {color: #FF9000}
.style_red {color: #FF0000}
.style_gray {color: #666666}
.style_skyblue {color: #0099CC}
.style_lblue {color: #3399FF}
.style_s {
	 font-size: 11px
}


.style_jyosetsu {
  color: #FF9999;
}

.style_sanpu {
  color: #D7D700;
}

.style_snowtire {
  color: #988EFF;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.x_clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/*
body {
min-width: 840px;
z-index: 0;
font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
line-height: 150%;
font-size: 13px;
color: #565656;
}
*/

.subject {
background: #ffa500;
color: #ffffff;
padding: 6px 4px;
text-align: center;
}


.loadingNow {
/*width: 100%;*/
width: 700px;
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
}


.loadingmap {
margin: 200px 300px;
}


.roundTopLeft {
border-top-left-radius: 6px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
}

.roundBottomLeft {
border-bottom-left-radius: 6px;
-moz-border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}


.roundTopRight, #areaMapHeader {
/*border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;*/
}


#areaMapHeader {
    /*width:100%;*/
 /*   width:688px;
    height:15px;
    font-size:15px;
    color:#FFFFFF;
    display:block;
    border:1px solid #f08d18;
    padding:5px;
	background: #f08e19;
    background: -moz-linear-gradient(center bottom, #f08e19 0%,#f4bb77 100%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f08e19),color-stop(1, #f4bb77));*/
color:#000;
display:block;
padding-top:5px;
/*height:15px;*/

_margin-left: -10px;
width: 700px;
height: 26px;
background: url(../images/contents/ttl_bar_repeat.jpg) repeat-x left top;
font-weight: bold;
_position:relative;
_margin-left:1px;
/*float: left;*/
}


/*  header  */

#headPanel {
position: absolute;
height: 100px;
border-top: 4px solid #F08D18;
width: 100%;
z-index: 1;
}

#headPanel .logo {
float: left;
}

#headPanel #headerText {
 margin: 8px;
}


/* main panel layout */
#mainPanel {
z-index: 10;
position: absolute;
top: 120px;
min-width: 700px;
}


/* side panel */
#sidePanel {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 208px;
}

#sidePanel > div {
margin: 2px 0;
}

#naviMapImage {
width: 200px;
}



#searchPanel {
/*padding: 8px;
min-width: 600px;*/
/*background: url('../img/steel.png');*/
/*background: #ddd;
border: 2px inset #d0d0d0;*/
/*opacity: 0.96;*/
/*color: #505050;
-webkit-box-shadow: 2px 2px 8px #505050;
-moz-box-shadow: 2px 2px 8px #505050;*/
/*position:absolute;*/
position:absolute;
/*margin:0 auto;*/
margin-left:200px;
z-index: 300;
clear:both;
}


.grad {
background: -moz-linear-gradient(top, #036, #65AACE);
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#65AACE));
}


.formPart {
padding: 1px;
margin: 4px;
border: 1px inset #f6f6f6;
}

.formPart .caption {
padding: 1px 4px;
}
}


#divSelectIc {
position: absolute;
left: 180px;
top: 100px;
width: 400px;
z-index: 100;
}


.roundButton {
margin: 20px 2px;
font-size: 18px;	     
padding: 20px 8px;
font-weight: bold;
background: #efefef;
border: 3px solid #505050;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}


/* body panel */

#bodyPanel {
/*position: absolute;
top: 102px;
left: 218px;
width: 100%;*/
z-index: 20;
/*width: 700px;*/
width: 100%;
    _margin:0px;
    _padding:0px;
    _height:0px;
}

* html #bodyPanel{
	margin:0px;
	padding:0px;
	height:0px;
}

/*
*+html #bodyPanel{
 margin:0px;
 padding:0px;
 height:0px;
}
*/
#bodyPanelOver {
/*position: absolute;
top: 102px;
left: 218px;*/
z-index: 100;
    _margin:0px;
    _padding:0px;
    _height:0px;
    _overflow:hidden;
}

* html #bodyPanelOver{
	margin:0px;
	padding:0px;
	height:0px;
	overflow:hidden;
}

*+html #bodyPanelOver{
 margin:0px;
 padding:0px;
 height:0px;
}

/* map and kisei */
#areaMap {
width: 700px;	 
}

#areaMapHeader div {
/*margin: 2px;
vertical-align: bottom;*/
}

#areaMapHeader .areaName {
/*color: #fff;*/
color: #555;
font-size: 14px;
font-weight:bold;
width:270px;
margin-left: 10px;
}

#areaMapToggle a {
text-decoration: none;
}

#areaMapToggle a:hover {
border:1px solid #555;;
background: #fff:
}

#areaMapBase {
position: related;
z-index: 25;
}

.announceTime {
/*margin-top: -3px;*/
margin-top: 1px;
/*margin-left: 75px;*/
margin-right:5px;
padding-left: 5px;
padding-right: 5px;
font-size: 12px;
color: #555;
background: #fff;
border:1px inset #ccc;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}


#areaMapImage {
z-index: 20;
position: relative;
}

#areaMapImagePanel {
position: relative;
}

#areaMapImageSrc {
z-index: 21;
position: relative;
}

div#tooltipKiseiInfo {
z-index: 22;
}


#areaKiseiPanel {
position: absolute;
/*margin-top: 1.5em;*/
/*background: #ddd;*/
background: #eee;
opacity: 0.9;
z-index: 27;
width: 680px;
padding: 10px;
}


dl.dlKiseiInfo {
width: 680px;
}

.dlKiseiInfo dt {
padding: 2px;
/*border-top: 1px solid #aaa;
border-bottom: 1px solid #fff;
color: #ff9410;*/
color: #fff;
font-weight: bold;
}

.dlKiseiInfo dd {
color: #111;
margin: 0px;
/*background: #333;*/
}

.dlKiseiInfo ul {
padding-left: 0;
}

.dlKiseiInfo li {
padding: 2px 8px;
list-style: none;
border-bottom: 1px solid #888;
font-size: 14px;
}

.divLineName {
width: 210px;
display:inline;
float:left;
}

.divPoint {
margin-left:10px;
margin-right:5px;
width: 235px;
display:inline;
float:left;
}

.divReason {
width: 70px;
display:inline;
float:left;
color:red;
}

.divKaijoMail {
display: block;
}

.divJutaiLen {
color:red;
}

/* kisei info popup */
.kiseiPopup {
padding: 4px;
}


.roundShadow {
background: #ffffff;
border-radius: 10px;
_border: 2px solid #f08d18;
border: 2px solid #ffa500;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 15px 15px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 15px 15px rgba(0,0,0,0.7);
-moz-box-shadow: 0 15px 15px rgba(0,0,0,0.7);
font-family: "ＭＳ Ｐゴシック", "MS Gothic", "Osakaー等幅", Osaka-mono, monospace;
}

/*#toggleKiseiInfoMisc {*/
div#areaMapToggle a {
text-decoration: none;
/*margin-bottom: 5px;*/
display: block;
/*width:150px;*/
/*margin-top: 15px;*/
/*color: #555;
background: #eee;
border: 1px solid #888;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px 5px 2px 5px;
font-weight:bold;
background: -webkit-gradient(linear, left bottom, left top, from(#ddd), to(#fff));
background: -moz-linear-gradient(top, #fff, #ddd);*/
background: #21669A;
border: 1px solid #333;
color: #fff;
padding: 1px 5px 1px 5px;
margin-bottom: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-right:5px;
}

/*IE6*/
* html #telop{
	margin:0px;
	padding:0px;
}

#telop_ie6 .telopInfo {
border:1px solid #ccc;
background:#fff;
color: #000;
width:698px;
font-weight:bold;
}

#telop_ie6 .telopAnnounce {
border:1px solid blue;
background:#fff;
color: #0000FF;
width:698px;
font-weight:bold;
}

#telop_ie6 .telopWarning {
border:1px solid #FF0000;
background:#FF0000;
color: #fff;
width:698px;
font-weight:bold;
}

* html #notice .telopInfo {
color: #000;
}

* html #notice  .telopAnnounce {
color: #0000FF;
}

* html #notice .telopWarning {
color:#FF0000;
}

/*IE6*/

/*#toggleKiseiInfoMisc a:hover {*/
div#areaMapToggle a:hover {
text-decoration: none;
background: #fff;
color: #333;;
}

/*#toggleKiseiInfo {*/
div#kiseiOther a {
width:125px;
text-decoration: none;
margin-top:20px;
margin-right:5px;
font-size: 12px;
display: block;
font-weight:bold;
/*color: #555;
background: #ddd;
border:1px solid #888;;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee));
background: -moz-linear-gradient(top, #eee, #ccc);*/
display: block;
background: #21669A;
border: 1px solid #333;
color: #fff;
padding: 1px 5px 1px 5px;
margin-bottom: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*#toggleKiseiInfo a:hover {*/
div#kiseiOther a:hover {
text-decoration: none;
background: #fff;
color:#333;
}

#notice ul {
/*margin-left: 10px;*/
}


.emptyKiseiInfo {
color: #333;
}

/*
.rowKisei.clearfix.showRoadName {
font-size: 13px;
}
*/
.rowKiseiKind {
/*background: #6495ED;
background: -webkit-gradient(linear, left bottom, right top, from(#6495ED), to(#F0F8FF));
background: -moz-linear-gradient(left, #6495ED, #F0F8FF);*/
margin-top: 5px;
background: rgb(184,178,130); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(184,178,130,1) 0%, rgba(220,222,195,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(184,178,130,1)), color-stop(100%,rgba(220,222,195,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(184,178,130,1) 0%,rgba(220,222,195,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(184,178,130,1) 0%,rgba(220,222,195,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(184,178,130,1) 0%,rgba(220,222,195,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(184,178,130,1) 0%,rgba(220,222,195,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8b282', endColorstr='#dcdec3',GradientType=1 ); /* IE6-8 */
padding:5px;
}

.kisei_1 {
/*background: #DF585E;
background: -webkit-gradient(linear, left bottom, right top, from(#DF585E), to(#DBC9C9));
background: -moz-linear-gradient(left, #DF585E, #DBC9C9);
margin-top:5px;*/
margin-top: 5px;
background: rgb(216,94,93); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(216,94,93,1) 0%, rgba(216,175,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(216,94,93,1)), color-stop(100%,rgba(216,175,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(216,94,93,1) 0%,rgba(216,175,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(216,94,93,1) 0%,rgba(216,175,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(216,94,93,1) 0%,rgba(216,175,171,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(216,94,93,1) 0%,rgba(216,175,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d85e5d', endColorstr='#d8afab',GradientType=1 ); /* IE6-8 */
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
padding:5px;

}

.kisei_2 {
/*background: #6C9577;
background: -webkit-gradient(linear, left bottom, right top, from(#6C9577), to(#C8DBC8));
background: -moz-linear-gradient(left, #6C9577, #C8DBC8);
margin-top:5px;*/
margin-top: 5px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(112,156,236,1) 0%, rgba(223,240,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(112,156,236,1)), color-stop(100%,rgba(223,240,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(112,156,236,1) 0%,rgba(223,240,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(112,156,236,1) 0%,rgba(223,240,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(112,156,236,1) 0%,rgba(223,240,255,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(112,156,236,1) 0%,rgba(223,240,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709cec', endColorstr='#dff0ff',GradientType=1 ); /* IE6-8 */
padding:5px;

}

.kisei_3 {
/*background: #BA55D3;
background: -webkit-gradient(linear, left bottom, right top, from(#BA55D3), to(#D8BFD8));
background: -moz-linear-gradient(left, #BA55D3, #D8BFD8);
margin-top:5px;*/
margin-top: 5px;
background: rgb(111,151,124); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(111,151,124,1) 0%, rgba(199,216,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(111,151,124,1)), color-stop(100%,rgba(199,216,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(111,151,124,1) 0%,rgba(199,216,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(111,151,124,1) 0%,rgba(199,216,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(111,151,124,1) 0%,rgba(199,216,200,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(111,151,124,1) 0%,rgba(199,216,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f977c', endColorstr='#c7d8c8',GradientType=1 ); /* IE6-8 */
padding:5px;
}

.kisei_4 {
/*background: #B6AF81;
background: -webkit-gradient(linear, left bottom, right top, from(#B6AF81), to(#D9DACA));
background: -moz-linear-gradient(left, #B6AF81, #D9DACA);
margin-top:5px;
text-align: left;
padding: 5px;
margin-top: 8px;
background: #E47271;
background: -moz-linear-gradient(left, rgba(228, 114, 113, 1) 1%, rgba(242, 226, 227, 1) 68%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(228, 114, 113, 1)), color-stop(68%,rgba(242, 226, 227, 1)));
background: -webkit-linear-gradient(left, rgba(228, 114, 113, 1) 1%,rgba(242, 226, 227, 1) 68%);
background: -o-linear-gradient(left, rgba(228, 114, 113, 1) 1%,rgba(242, 226, 227, 1) 68%);
background: -ms-linear-gradient(left, rgba(228, 114, 113, 1) 1%,rgba(242, 226, 227, 1) 68%);
background: linear-gradient(left, rgba(228, 114, 113, 1) 1%,rgba(242, 226, 227, 1) 68%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e47271', endColorstr='#f2e2e3',GradientType=1 );
color: #301F0D;
border-bottom: #898987 1px solid;*/
margin-top: 5px;
background: rgb(230,163,75); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(230,163,75,1) 0%, rgba(241,223,199,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(230,163,75,1)), color-stop(100%,rgba(241,223,199,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(230,163,75,1) 0%,rgba(241,223,199,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(230,163,75,1) 0%,rgba(241,223,199,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(230,163,75,1) 0%,rgba(241,223,199,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(230,163,75,1) 0%,rgba(241,223,199,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6a34b', endColorstr='#f1dfc7',GradientType=1 ); /* IE6-8 */
padding:5px;
}

.kisei_5 {
/*background: #6C9577;
background: -webkit-gradient(linear, left bottom, right top, from(#6C9577), to(#C8DBC8));
background: -moz-linear-gradient(left, #6C9577, #C8DBC8);
margin-top:5px;
text-align: left;
padding: 5px;
margin-top: 8px;
background: #A5CCAF;
background: -moz-linear-gradient(left, rgba(165, 204, 175, 1) 1%, rgba(221, 231, 222, 1) 68%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(165, 204, 175, 1)), color-stop(68%,rgba(221, 231, 222, 1)));
background: -webkit-linear-gradient(left, rgba(165, 204, 175, 1) 1%,rgba(221, 231, 222, 1) 68%);
background: -o-linear-gradient(left, rgba(165, 204, 175, 1) 1%,rgba(221, 231, 222, 1) 68%);
background: -ms-linear-gradient(left, rgba(165, 204, 175, 1) 1%,rgba(221, 231, 222, 1) 68%);
background: linear-gradient(left, rgba(165, 204, 175, 1) 1%,rgba(221, 231, 222, 1) 68%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5ccaf', endColorstr='#dde7de',GradientType=1 );
color: #301F0D;
border-bottom: #898987 1px solid;*/
margin-top:5px;
background: rgb(175,175,175); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left,  rgba(175,175,175,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(175,175,175,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(175,175,175,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(175,175,175,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(175,175,175,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(175,175,175,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-8 */
padding:5px;
}

.kisei_101 {
margin-top:5px;
background: rgb(255,153,153); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,153,153,255) 0%, rgba(255,238,238,255) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,153,153,255)), color-stop(100%,rgba(255,238,238,255))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,153,153,255) 0%,rgba(255,238,238,255) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,153,153,255) 0%,rgba(255,238,238,255) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,153,153,255) 0%,rgba(255,238,238,255) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,153,153,255) 0%,rgba(255,238,238,255) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9999', endColorstr='#ffeeee',GradientType=1 ); /*IE6-8 */
padding:5px;
}

.kisei_102 {
margin-top:5px;
background: rgb(215,215,0); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(215,215,0,255) 0%, rgba(255,255,215,255) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(215,215,0,255)), color-stop(100%,rgba(255,255,215,255))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(215,215,0,255) 0%,rgba(255,255,215,255) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(215,215,0,255) 0%,rgba(255,255,215,255) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(215,215,0,255) 0%,rgba(255,255,215,255) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(215,215,0,255) 0%,rgba(255,255,215,255) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d700', endColorstr='#ffffd7',GradientType=1 ); /*IE6-8 */
padding:5px;
}

.routeRowKisei dt {
display:block;
/*padding: 5px 5px 5px;*/
padding: 2px 5px 2px 5px;
color: #fff;
}

.routeRowKisei dd {
display:block;
padding: 5px 20px 5px;
}

div#telop > .telopInfo {
border:1px solid #ccc;
background:#fff;
color: #000;
width:698px;
font-weight:bold;
}

div#telop > .telopAnnounce {
border:1px solid blue;
background:#fff;
color: #0000FF;
width:698px;
font-weight:bold;
}

div#telop > .telopWarning {
border:1px solid #FF0000;
background:#FF0000;
color: #fff;
width:698px;
font-weight:bold;
}

div#notice > .telopInfo {
color: #000;
}

div#notice > .telopAnnounce {
color: #0000FF;
}

div#notice > .telopWarning {
color:#FF0000;
}


/* drive compass */
.dcJamShow {
position: relative;
}

#dcJamForecastPanel {
/*background: #fffefe;
border: 2px solid #909090;*/
border: #759CF7 2px solid;
background-color: #E0E6F4;
padding: 2px;
width: 340px;
z-index: 20;
position: absolute;
top: -10px;
_top:-150px;
left: 100px;
}

*:first-child+html #dcJamForecastPanel {
top:-180px;
}

/*
#dcJamForecastPanel > div {
padding: 4px;
}
*/

#dcJamForecastPanel .mark {
color: #f8ae43;
}

#dcJamForecastPanel .center {
/*#dcCalendar {*/
text-align: center;
}

#dcJamForecastPanel .panelTitle  {
position: relative;
/*color: #ffffff;
background: #909090;
padding: 2px 4px;*/
height: 15px;
font-size: 15px;
color: #fff;
display: block;
padding: 8px;
margin-bottom: 5px;
border-bottom: #759CF7 1px solid;
background: #3462B3;
background: -moz-linear-gradient(top, rgba(52, 98, 179, 1) 0%, rgba(71, 163, 255, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52, 98, 179, 1)), color-stop(100%,rgba(71, 163, 255, 1)));
background: -webkit-linear-gradient(top, rgba(52, 98, 179, 1) 0%,rgba(71, 163, 255, 1) 100%);
background: -o-linear-gradient(top, rgba(52, 98, 179, 1) 0%,rgba(71, 163, 255, 1) 100%);
background: -ms-linear-gradient(top, rgba(52, 98, 179, 1) 0%,rgba(71, 163, 255, 1) 100%);
background: linear-gradient(top, rgba(52, 98, 179, 1) 0%,rgba(71, 163, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3462b3', endColorstr='#47a3ff',GradientType=0 );
text-align: left;
font-weight: bold;
}

#dcJamForecastPanel #dcRouteInfo {
/*background: #fac090;*/
background: #fff;
border: 1px inset;
margin-left: 10px;
padding:2px;
font-size: 9pt;
}

div.seachNow.floatRight {
margin-top: -36px;
}

#closeSearchJamPanel {
width: 16px;
height: 16px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
padding: 2px;
background: #B0E0E6;
margin: 0;
line-height: 16px;
}


#dcCalendar {
padding: 0;
margin: 0;
float: left;
}


#dcJamForecastPanel .ui-datepicker {
font-size: 11px;
}

#calendarBase {
padding: 4px;

}


/* override some .floatLeft def */
#dcJamForecastPanel .floatLeft, #dcJamForecastPanel .floatRight  {
margin: 0;
padding: 0;
width: auto;
}


#dcMemo {
font-size: 9pt;
width: 120px;
float: right;
}


/* jam forecast */

#jamMapSelector {
position: absolute;
/*
top: 880px;
left: 200px;
*/
padding: 8px;
background: #E0E6F4;
font-size: 8pt;
border: #759CF7 2px solid;
z-index: 100;
}

#jamMapSelector .form * {
vertical-align: middle;
margin-right: 2px;
}

#jamMapSelector .note {
margin: 4px 2px 0 2px;
}

#jamMapHour {
width: 3em;
}


#jamMapSelectorClose {
margin-left: 10px;
background: #ffffff;
}

#showJamMap {
padding: 2px;
}


/*---------------------------------------------
 *
 * winter map 
 *
 ---------------------------------------------*/

#wmcntlPanel {
position: absolute;
top: 10px;
left: 10px;
z-index: 53;
opacity: 0.85;
filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=85);
}

#wmcntlPanel .wmcntl {
float: left;
padding: 2px 4px;
}

#wmcntlPanel .wmcntl.active {

}


#areaMapImage .camPoint {
position: absolute;
z-index: 52;
height: 18px;
width: 18px;
border: 1px soid gray;
}

#areaMapImage div.majorPoint {
position: absolute;
z-index: 52;
width: 45px;
/*height: 50px;*/
background: white;
border: 1px solid #707070;
}

div.majorPoint .pointName {
text-align: center;
font-size: 8pt;
background: #707070;
}

#noticeWinterUl li {
 background: #707070;
 color: #fffefe;
 width: 100%;
 margin: 1px 0;
 padding: 1px 0;
}

div.winterNoticeArea {
width: 80px;
float: left;
background: #a0a0a0;
padding: 1px 2px;
}

#linkDriveTraffic {
position: absolute;
/*
top: 300px;
left: 400px;
*/
z-index: 26;
display: none;
width: 145px;
height: 50px;
}

.areaName_hokkaido #linkDriveTraffic {
display: block;
top: 640px;
left: 545px;
z-index: 126;
}
.areaName_tohoku #linkDriveTraffic {
display: block;
top: 640px;
left: 10px;
z-index: 126;
}
.areaName_hokuriku #linkDriveTraffic {
display: block;
top: 213px;
left: 540px;
}
.areaName_kanto #linkDriveTraffic {
display: block;
top: 727px;
left: 550px;
}

/* winter area notice */
div.winterNoticeArea.area_w_chuoudou {
background: #3db900;
}
div.winterNoticeArea.area_w_toumei {
background: #0092dc;
}
div.winterNoticeArea.area_w_tokai {
background: #f08d18;
}
div.winterNoticeArea.area_w_hokuriku {
background: #b848ff;
}
div.winterNoticeArea.area_w_koushin {
background: #3db900;
}
div.winterNoticeArea.area_w_alltoumei {
background: #0092dc;
}



div.winterNoticeText {
width: 500px;
height: 1.4em;
float: left;
padding: 0 0 0 1em;
overflow: hidden;
}

div.winterNoticeShow {
width: 70px;
float: right;
}

div.winterNoticeShow a:visited, div.winterNoticeShow a {
text-decoration: none;
color: white;
background: #21669a;
padding: 1px 2px;
border: 1px solid black;
}

div.winterNoticeShow a:hover {
background: white;
color: #333;
}


/*
 * major ic point weather
 */
#weatherIc {
position: absolute;
top: 150px;
left: 200px;
z-index: 52;
background: white;
border: 2px solid steelblue;
padding: 6px;

hheight: 300px;
width: 320px;

box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-webkit-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
}

#weatherIc .loadingNow {
height: 240px;
width: 320px;
}

#icPointWeatherCntl a {
padding: 2px;
border: 1px solid #707070;
text-decoration: none;
}

#icPointWeatherHead {
margin: 5px 0 0 0;
font-size: 13pt;
}

#icPointRoadStat {
margin: 0 0 0 0;
width: auto;
}

#icPointWeatherHead .icName {
font-weight: bold;
}

#weatherNow {
padding: 5px 10px;
width: 70px;
float: left;
}

#weatherNowIcon {
text-align: center;

}

#weatherNowDetail {
width: 220px;
float: left;
}

#weatherNowDetail ul {
margin: 10px 0 0 0;
}

#weatherNowDetail ul li {
float: left;
/*clear: both;*/
width: 100px;
margin: 1px;
}

#weatherNowDetail ul li div.detailName {
float: left;
padding: 1px;
}

#weatherNowDetail ul li div.detailValue {
float: left;
text-align: left;
padding: 1px;
}

#icPointWeatherForecast {
margin: 5px 0 0 0;
}

#icPointWeatherTitle {
font-weight: bold;
}

#icPointWeatherForecast table {
border-collapse: collapse;
empty-cells: show;
width: 100%;
}

#icPointWeatherForecast table th {
border: 1px solid #a0a0a0;
vertical-align: middle;
}

#icPointWeatherForecast table td {
border: 1px solid #a0a0a0;
}

#icPointWeatherForecast table thead th {
background: steelBlue;
color: white;
text-align: center;
}


#icPointWeatherFooter {
text-align: right;
color: #a0a0a0;
}



/* yukimichi mail */

dl.dlTable {
margin: 4px;
overflow: hidden;
}

dl.dlTable dt {
width: 200px;
float: left;
clear: both;
}

dl.dlTable dd {
padding 0 0 5px 220px;
border-bottom: 1px dotted gray;
}


span.ym_iclist {
margin: 0 1em 0 0;
}

#camThumIc {
position: absolute;
z-index: 52;
border: 2px solid gray;
text-align: center;
width: auto;
background: white;
}

.camThum {
margin: 2px;
background: #707070;
color: white;
float: left;
width: 100px;
}

#camThumIc_title {
height: 1.3em;
overflow: hide;
}

#camView {
position: absolute;
top: 80px;
left: 100px;
width: 500px;
z-index: 52;
padding: 2px;
text-align: center;
background: white;
border: 2px solid steelBlue;
}

#camViewTitle {
margin: 2px;
padding: 2px;
background: orange;
text-align: left;
}

#camViewClose {
float: right;
}

#camViewTitleName {
float: left;
font-size: 13pt;
font-weight: bold;
}

#camViewImage {
margin: 4px;
width: 100%;
/*height: 242px;*/
}

#camViewImage .loadingNow {
height: 360px;
width: 480px;
}

#camViewImg {
margin: 4px;
width: 480px;
height: 360px;
}

#camViewText ul {
margin: 4px;
}

#camViewText li { 
font-size: 8pt;
text-align: left;
}

#camViewText .center {
text-align: center;
} 

/*
 * winter ic weather on route
 */

.exists_snowfall_span {
color: red;
padding: 0 1em;
}


.route_summary {
position: relative;
height: 2em;
line-height: 2em;
background: transparent;
}

.route_summary_desc {
margin: 2px 10px;
width: auto;
float: left;
}

.showWinterRoadIc {
margin: 0 7px 0 0;
height: 1.3em;
text-height: 1.3em;
float: right;
}


.routeIcWeather.loadingNow {
width: auto;
height: 100px;
background-color: white;
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 10px 10px 10px 20px;
border: 1px solid #ccc;
}

.routeIcWeatherWinter {
border: 1px solid #ccc;
padding: 10px;
background: white;
margin: 10px 10px 10px 20px;
}

.panelCloseDiv {
float: right;
}

.routeIcWeatherTableTitle {
background: steelBlue;
color: white;
padding: 4px;
height: 1.4em;
line-height: 1.3em;
}

.routeIcWeatherTableTitle .panelCloseDiv a {
padding: 3px;
border: 1px solid white;
text-decoration: none;
color: white;
font-size: 8pt;
}

.routeIcWeatherTable table {
border-collapse: collapse;
empty-cells: show;
width: 100%;
}


.routeIcWeatherTable table th {
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
background: #91BDF0;
color: white;
}

.routeIcWeatherTable table td {  
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
}

.routeIcWeatherTable table td.left {  
text-align: left;
}

.routeIcWeatherExternalArea .ttl {
margin: 4px 0;
padding: 2px 4px;
background: #477677;
color: white;
}


.routeIcWeatherExternalArea ul li {
margin: 4px;
}

.routeIcWeatherExternalArea ul li a, .routeIcWeatherExternalArea ul li a:visited {
text-decoration: none;
color: white;
background: #5bb4d6;
padding: 1px 2px;
border: 1px solid black;
}

.routeIcWeatherExternalArea ul li a:hover {
background: white;
color: #333;
}

.guideExternalSite {
margin: 4px 4px;
}


/*
 * Live Camera on Road
 */

#liveCamera {
position: relative;
}

#camRoadSelector {
z-index: 100;
position: absolute;
top: 740px;
}

#liveCameraHeader {
height: 26px;
line-height: 26px;
vertical-align: middle;
padding: 0 1em;
background: url(/web/images/contents/ttl_bar_repeat.jpg) repeat-x left top;
font-weight: bold;
}

#liveCameraTitle {
}

#liveCameraSelector {
}

#liveCameraMap {
margin: 5px 0;
height: 200px;
width: 100%;
background: #eee;
}

#liveCameraThums {

}

#liveCameraThums ul li {
margin: 4px;
border: 1px solid steelBlue;
width: auto;
}

#liveCameraThums ul li .camName {
background: #91bdf0;
color: white;
text-align: center;
}

#liveCameraThums ul li .camThum {
margin: 3px;
}


/*
 * popup news
 */

.popupNews {
position: absolute;
padding: 4px;

background: #ffffff;
border: 2px solid #ff8c00;
_border: 2px solid #ff8c00;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-webkit-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
}

.popupNewsWinter {
position: absolute;
padding: 6px;

background: #ffffff;
border: 2px solid #efefff;
_border: 2px solid #efefff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-webkit-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 12px rgba(0,0,0,0.7);

background: steelBlue;
color: white;
}

.popupNewsDiv .newsFooter {
margin: 4px 6px 4px 4px;
}