<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
<title i18n-content="title"></title>
<style type="text/css">
body {
  background-color:#500;
  font-family:Helvetica,Arial,sans-serif;
  margin:0px;
}
.background {
  position:absolute;
  width:100%;
  height:100%;
}
.cell {
  padding:40px;
}
.box {
  width:80%;
  background-color:white;
  color:black;
  font-size:10pt;
  line-height:16pt;
  text-align:left;
  padding:20px;
  position:relative;
  -webkit-box-shadow:3px 3px 8px #200;
  border-radius:5px;
}
html[dir='rtl'] .box {
  text-align:right;
}

.icon {
  position:absolute;
}
.title {
  margin: 0px 77px 0px;
  font-size:18pt;
  line-height: 140%;
  margin-bottom:6pt;
  font-weight:bold;
  color:#660000;
}
.main {
  margin:0px 80px 0px;
}

.submission {
  margin:15px 5px 15px 0px;
  padding:0px;
}
input {
  margin:0px;
}
.proceedbutton {
}
.helpbutton {
  float:right;
}
.example {
  margin:30px 80px 0px;
  border-top:1px solid #ccc;
  padding-top:6px;
}
.moreinfotitle {
  margin-left:5px;
  margin-right:5px;
}
</style>

<script>
  function $(o) {return document.getElementById(o);}

  function sendCommand(cmd) {
    window.domAutomationController.setAutomationId(1);
    window.domAutomationController.send(cmd);
  }

  function toggleMoreInfo(collapse) {
    if (collapse) {
      $("more_info_long").style.display = "none";
      $("more_info_short").style.display = "block";
    } else {
      $("more_info_long").style.display = "block";
      $("more_info_short").style.display = "none";
    }
  }
  function setDirectionSensitiveImages() {
    if (document.documentElement.dir == 'rtl') {
      $("twisty_closed_rtl").style.display = "inline";
    } else {
      $("twisty_closed").style.display = "inline";
    }
  }
</script>
</head>
<body oncontextmenu="return false;">
<script>
document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages);
</script>
<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"></div>
<table width="100%" cellspacing="0" cellpadding="0">
  <td class="cell" valign="middle" align="center">
    <div class="box">
      <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"></div>
      <div class="title" i18n-content="headLine"></div>
      <div class="main" i18n-values=".innerHTML:description"></div>
      <div class="main">
        <form class="submission">
          <input type="button" i18n-values="value:proceed" name="proceed" class="proceedbutton" onClick="sendCommand(1);">
          <input type="button" i18n-values="value:exit" name="exit" onClick="sendCommand(0);">
        </form>
      </div>
      <div class="example" id="more_info_short">
      <!--
       // The img madness here is due to the inlining of the html file
       // resources. The script that does this looks for subresources like
       // images and inlines them, so we need to have references to both the
       // ltr and rtl versions statically. Just doing
       // i18n-values="src:path_to_correct_image_set_by_c++" won't work, since
       // the inlined version will just end up with that path string rather
       // than the inlined image.
      -->
        <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
      </div>
      <div class="example" id="more_info_long" style="display:none;">
        <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
        <p i18n-values=".innerHTML:moreInfo1"></p>
        <p i18n-values=".innerHTML:moreInfo2"></p>
        <p i18n-values=".innerHTML:moreInfo3"></p>
        <p i18n-values=".innerHTML:moreInfo4"></p>
        <p i18n-values=".innerHTML:moreInfo5"></p>
      </div>
  </td>
</table>
</body>
</html>