@charset 'utf-8';
/**
 * livecamera.css
 * @version 1.0
 * @author  ADVANCED INFORMATION DESIGN Co.,Ltd.
 */

div#googlemap { width: 100%; height: 740px; border-radius: 4px; }

p.infowindow img { display: block; width: 175px; height: auto; margin-top: 5px; border-radius: 2px; }
p.infowindow img:hover,
dl.camera img:hover { cursor: pointer; opacity: 0.85; filter:alpha(opacity=80); -ms-filter: 'alpha(opacity=85)'; background: none!important; }

dl.camera { float: left; width: calc(25% - 10px); padding: 5px; }
dl.camera dt { padding: 2px 5px; background: #333; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #fff; font-size: 90%; }
dl.camera dt a { color: #fff; }
dl.camera img { width: 100%; height: auto; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }

iframe { width: 640px; height: 480px; border: none; border-radius: 4px; overflow: hidden; }

#modal-main { display: none; position: fixed; width: 640px; height: 480px; margin: 0; padding: 10px;
  border: #1a1a1a solid 4px; border-radius: 4px; background-color: #fff; overflow-y: auto; z-index: 99; }

#modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 98; }


@media only screen and (max-width: 1060px) {
  dl.camera { width: 31.3%; padding: 1%; }
}

@media only screen and (max-width: 640px) {
  dl.camera { width: 48%; }
  #modal-main,
  iframe { width: 600px; height: 450px; }
}