/*
  Used with the Browser Hugo shortcode.

  ***

  Minimal design
  based on the sleek design of Jacob Säwensten ( http://www.jacobsawensten.com/ )
  PDF: https://dribbble.com/shots/1460141-Free-minimal-browser-window/attachments/216671
*/
.facade-minimal
{
  position:  relative;
  margin:  24px 0;
  padding:  64px 16px 10px 16px;
  /* box-shadow:  0px 5px 10px rgba(0,0,0,0.1); */
  font-family: sans-serif;
  color:#454545;
  border-radius:3px;
  overflow-x:hidden;
}

/*
  INLINE SVG
  Color can be changed inline (search for %23, which equals #)
*/

.facade-minimal:before
{
  content:  "";
  position:  absolute;
  display:  block;
  top:  -1px;
  left:  -1px;
  right:  -1px;
  height:  56px;
  border-bottom:  1px solid rgba(0,0,0,0.05);
  border-radius:  3px 3px 0px 0px;
  background: url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g id="Ellipse_1"><g><circle fill-rule="evenodd" clip-rule="evenodd" fill="%23B3B3B3" cx="8" cy="8" r="5"/></g></g></svg>') 16px 22px no-repeat,
      url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g id="Ellipse_1"><g><circle fill-rule="evenodd" clip-rule="evenodd" fill="%23B3B3B3" cx="8" cy="8" r="5"/></g></g></svg>') 32px 22px no-repeat,
      url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g id="Ellipse_1"><g><circle fill-rule="evenodd" clip-rule="evenodd" fill="%23B3B3B3" cx="8" cy="8" r="5"/></g></g></svg>') 48px 22px no-repeat,
      url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-settings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g id="Menu_icon"><g><path fill-rule="evenodd" clip-rule="evenodd" fill="%23B3B3B3" d="M1,1v3h14V1H1z M1,10h14V7H1V10z M1,16h14v-3H1V16z"/></g></g></svg>')  right 16px top 22px no-repeat,

      #e8e8e8;
}

.facade-minimal:after
{
  content:  attr(data-url);
  position:  absolute;
  padding:  2px 16px 0px 42px;
  top:  16px;
  height:  24px;
  left:  80px;
  right:  48px;
  border-radius:  3px;
  box-shadow:  inset 0 1px 1px -1px rgba(0,0,0,0.5);
  font-size:  12px;
  line-height:  22px;
  white-space:  nowrap;
  overflow:  hidden;
  text-overflow:  ellipsis;
  text-align:  left;

}

.facade-minimal:after {
  background-color: white;
}

.lock {
  background: url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-settings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1 0 14 16" width="14" height="16"><path d=" M 8 0 C 5.067 0 2.667 2.304 2.667 5.12 L 2.667 6.827 L 1 6.827 L 1 16 L 14.809 16 C 14.914 16 15 15.914 15 15.809 L 15 6.827 L 13.333 6.827 L 13.333 5.12 C 13.333 2.304 10.933 0 8 0 Z  M 8 1.707 C 9.972 1.707 11.556 3.226 11.556 5.12 L 11.556 6.827 L 4.444 6.827 L 4.444 5.12 C 4.444 3.226 6.028 1.707 8 1.707 Z " fill="%23B3B3B3"/></svg>') 0px 0px no-repeat transparent;

  width: 14px;
  height: 16px;
  position: absolute;
  left: 84px;
  top: 21px;
  z-index: 999;
  display: block;
}

.refresh-button {
  background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" id="Refresh_icon_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g id="minimal-browser-refresh"><g><path fill-rule="evenodd" clip-rule="evenodd" fill="%23B3B3B3" d="M12.5,10.9l2.5-3h-1.7C13.2,4.6,10.7,2,7.7,2C4.5,2,2,4.7,2,8c0,3.3,2.5,6,5.7,6c1.3,0,2.5-0.5,3.5-1.3l-1-1.1c-0.7,0.5-1.6,0.9-2.5,0.9c-2.3,0-4.2-2-4.2-4.5s1.9-4.5,4.2-4.5c2.3,0,4.2,1.9,4.2,4.4h-2L12.5,10.9z"/></g></g></svg>') 0px 0px no-repeat transparent;

  width: 16px;
  height: 16px;
  position: absolute;
  left: 102px;
  top: 21px;
  z-index: 999;
  display: block;
}

/* Browser specialisations */

.browser {
  background-color: white;
  box-shadow: 0 20px 60px #666;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

.browser-content {
  /* height: 3em; */
  display: flex;
  flex-direction: column;
  align-content:center;
  justify-content: center;
}

/* Site-specific */

.browser-content p {
  margin-bottom: 1em;
  margin-top: 0;
}

.browser-content p:last-of-type {
  margin-bottom: 0;
}

.browser-content h2:first-of-type {
  margin-top: 0.5em;
  margin-bottom: 0;
}

.browser-content h2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}