#content-map {
    height: 368px;
    background: #aaaaaa;
}

#map-overlay{
    background-color: #555;
    background-color: #fff;
    height: 330px;
    left: 0px;
    top: 0px;
    position: absolute;
    width: 70%;
}
 
#map-overlay p{
    color: #000;
    font-size: 1.6em;
    margin-top: 150px;
    text-align: center;
}

#loading img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

#content-info {
    background: url(../images/info-bg.png) 0 0 repeat-x;
    overflow: hidden;
}

#content-info h2 {
    padding: 6px 0 0 24px;
    margin-left: 15px;
    display: block;
    background: url(../images/infohead-bg.png) 0 10px no-repeat;
    font-family: Arial, sans-serif;
    font-size: 90%;
    color: #ffffff;
    cursor: pointer;
}

#content-info h2.collapsed {
    background: url(../images/infohead-bg-collapsed.png) 5px 5px no-repeat;
}

.info-wrap {
    margin-top: 4px;
    margin-left: 2%;
    margin-right: 2%;
    float: left;
    width: 21%;
    background: url(../images/item-head-bg.png) 0 24px repeat-x;
    font-family: Arial, sans-serif;
    font-size: 80%;
}

.info-wrap h3, .info-wrap h3 span {
    display: block;
    height: 24px;
}

.info-wrap h3 {
    background: url(../images/info-head-l.png) 0 0 no-repeat;
    font-weight: normal;
    font-size: 130%;
}

.info-wrap h3 span {
    text-align: center;
    background: url(../images/info-head-r.png) right top no-repeat;
    margin-left: 14px;
    padding-right: 24px;
    padding-top: 5px;
    font-family: serif;
}

.item-head, .info-wrap p {
    margin-left: 8px;
}

.info-wrap p {
    clear: both;
    margin-top: 40px;
    padding-right: 8px;
    line-height: 115%;
    font-size: 90%;
}

.item-head .datetime {
    display: block;
    padding-top: 2px;
    color: #515050;
    font-size: 85%;
    clear: left;
    white-space: nowrap;
}

.item-head .datetime, .item-head h4 {
    float: left;
}

.item-head .feed-links {
    float: right;
    margin-top: -11px;
    margin-right: 5px;
}

#content-main {
    margin-top: 33px;
}

#content-webcams, #content-congestion, #content-construct, #content-deadend, #content-specialtransport, #content-spire {
    margin-bottom: 15px; 
    background: url(../images/main-delim.png) left bottom repeat-x;
}

#content-congestion, #content-construct, #content-deadend, #content-specialtransport {
    overflow: hidden;
}

#content-main div h2 {
    display: block;
    padding: 11px 0 0 63px;
    height: 36px;
    color: #9f3639;
    font-family: Arial, sans-serif;
}

#content-webcams {
}

#content-webcams h2 {
    background: url(../images/mapicons/webcam.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-congestion h2 {
    background: url(../images/mapicons/coda.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-construct h2 {
    background: url(../images/mapicons/cantiere.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-deadend h2 {
    background: url(../images/mapicons/chiusura.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-specialtransport h2 {
    background: url(../images/mapicons/trasporto_eccezionale.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-spire h2 {
    background: url(../images/mapicons/spira.png) 13px 0 no-repeat;
    cursor: pointer;
}

#content-camviews {
    overflow: hidden;
    margin-left: 13px;
}

.camview {
    float: left;
    width: 300px;
    height: 300px;
    margin-right: 12px;
    margin-bottom: 32px;
    font-family: Arial, sans-serif;
}

.cam-popup {
    float: left;
    width: 265px;
    height: 230px;
    margin-right: 0px;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
}

.camview h4, .camview p {
    font-size: 80%;
    line-height: 110%;
}

.camview h4 {
    height: 30px;
}

.camview p {
    display: block;
    height: 18px;
}

.camview img {
    margin: 5px 0 2px 0;
}

.camview p.cam-signature {
    display: inline;
    margin-top: 4px;
}

.cam-signature span {
    color: #e51223;
}

.cam-signature a.live {
    margin-left: 10px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    color: rgb(159, 54, 57);
}

.info-wrapper {
    overflow: hidden;
}

.info-delimiter {
    background: url(../images/main-delim.png) left bottom repeat-x;
    margin-bottom: 20px;
}

.info-item {
    font-family: Arial, sans-serif;
    float: left;
    width: 48%;
    margin-left: 13px;
    margin-bottom: 55px;
}

.coda-popup {
    width: 500px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.pmv-popup {
    width: 400px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.cantiere-popup {
    width: 400px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.chiusura-popup {
    width: 400px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.info-item dl {
    font-size: 80%;
}

.info-item dl dt, .interval span, dl.session-data dt, 
dl.reference-station dt, dl.session-code dt {
    color: #4d4d4d;
}

dl.session-data dd, 
dl.reference-station dd, dl.session-code dd {
    font-weight: normal;
}

.info-item h3 {
    clear: both;
    color: #9f3639;
}

.info-item h3, .info-item p {
    font-size: 90%;
}

.info-item h3 {
    padding: 24px 0 6px 0;
}

dl.road, dl.interval, dl.session-code, dl.session-data, dl.reference-station {
    font-weight: bold;
    overflow: hidden;
    float: left;
}

dl.road {
    margin-right: 10%;
}

dl.road dt, dl.road dd, dl.interval dd, dl.interval dt, dl.add-info dd, dl.add-info dt,
dl.session-data dd, dl.reference-station dd, dl.session-code dd, dl.session-data dt, 
dl.reference-station dt, dl.session-code dt {
    float: left;
    margin-top: 5px;
}

dl.interval dd, dl.interval dt {
    line-height: 90%;
}

dl.interval dd img, dl.interval dt img {
    margin-top: -2px;
}

dl.road dt, dl.interval dt, dl.add-info dt, dl.session-data dt, dl.reference-station dt, dl.session-code dt {
    clear: left;
    margin-right: 10px;
}

dl.add-info {
    margin-top: 12px;
}

dl.session-code, dl.session-data {
    margin-right: 5%;
}

.spire-info {
    padding-left: 15px;
}

/* spire css */
#content-spire {
    font-family: Arial, sans-serif;
}

#content-spire table {
    font-weight: bold;
    font-size: 80%;
    text-align: center;
    width: 100%;
}

#content-spire table td {
    margin-right: 2%;
    padding: 14px 0 14px 0;
}

#content-spire table thead {
    color: #4d4d4d;
}

#content-spire table tbody tr {
    border-bottom: 4px solid #dcdada;
}

#content-spire table tbody tr.main-info {
    cursor: pointer;
}

.description-col {
    text-align: left;
}

.speed-col {
    padding-right: 50px;
}

#content-spire table td:first-child + td {
    text-align: left;
}

#content-spire table td:first-child + td + td + td + td + td + td + td {
    width: 10%;
}

#content-spire table tbody tr.active-row {
    background: url(../images/active-row-bg.png) left top repeat-x;
}

#content-spire table tbody td:first-child {
    width: 60px;
}

#content-spire table tbody td:first-child {
    background: url(../images/info.png) 23px 12px no-repeat;
}

#content-spire table tbody tr.active-row td:first-child {
    background: url(../images/info-a.png) 23px 12px no-repeat;
}

#content-spire table tbody tr.active-row + tr {
    background: #efefe1;
}

#content-spire table tbody tr.active-row + tr td:first-child {
    background: transparent;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window {
    vertical-align: top;
}

#content-spire .stats-active {
    width: 85%;
    height: 85px;
    overflow-y: scroll;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table {
    width: 99%;
    margin: 5px 2px;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr {
    border: 0 !important;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td {
    margin: 0 !important;
    padding: 2px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #adadad !important;
    font-size: 11px;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td.col1 {
    width: 20%;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td.col2 {
    width: 16%;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td.col3 {
    width: 16%;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td.col4 {
    width: 24%;
}

#content-spire table tbody tr.detailed-info td.spira-stats-window table tr td.col5 {
    width: 24%;
}

#content-spire table thead td img {
    margin-bottom: -3px;
}

#content-spire .info-wrapper {
    padding-bottom: 36px;
}

.green-speed {
    background: url(../images/green-c-bg.png) -10% bottom no-repeat; 
}

.red-speed {
    background: url(../images/red-c-bg.png) -10% bottom no-repeat; 
}

.yellow-speed {
    background: url(../images/yellow-c-bg.png) -10% bottom no-repeat; 
}

/* map panels */
.map-panel {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}

#map-zona-panel {
    width: 250px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;

    background-color: #d2d0ce;
    border-bottom: 1px solid #8f8f8e;
    border-right: 1px solid #8f8f8e;

    font: 0.9em Arial, sans-serif;
}

#map-zona-panel label {
    vertical-align: middle;
}

#map-zona-panel #zona-select {
    width: 200px;
}

#map-filters-panel {
    height: 240px;
    margin: 0;
    padding: 0;
    background-color: #d2d0ce;
    border-top: 2px solid #c2c0be;
    border-bottom: 2px solid #9ba098;
    border-left: 1px solid #a8a7a4;
    border-right: 2px solid #696969;
            
    font: 0.8em Arial, sans-serif;
}

#map-filters-panel .left {
    float: left;
    width: 16px;
    height: 240px;
}

#map-filters-panel img.action-icon {
    cursor: pointer;
}

#map-filters-panel .left img.action-icon {
    float: left;
    margin-top: 100px;
    margin-left: 3px;
}

#map-filters-panel .left.opened img.action-icon {
    display: none;
}

#map-filters-panel .right {
    float: left;
    width: 260px;
    height: 240px;
    margin: 5px 0 0 0;
    padding: 0;
    vertical-align: middle;
}

#map-filters-panel .right ul {
    margin: 0;
    padding: 0;
    float: left;
}

#map-filters-panel .right ul li {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    list-style: none; 
}

#map-filters-panel .right ul li img {
    vertical-align: middle;
}

#map-filters-panel .right img.action-icon {
    float: right;
    margin-top: 100px;
    margin-right: 3px;
}

#map-phone-panel {
    width: 164px;
    height: 59px;
    background-color: #ffffff;
}