/*
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;*/
padding: 57px 0 0 0;
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,') 16px 22px no-repeat,
url('data:image/svg+xml;charset=utf-8,') 32px 22px no-repeat,
url('data:image/svg+xml;charset=utf-8,') 48px 22px no-repeat,
url('data:image/svg+xml;charset=utf-8,') right 16px top 22px no-repeat,
#e8e8e8;
}
.facade-minimal:after
{
content: attr(data-url);
position: absolute;
padding: 2px 16px 0px 32px;
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: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
background: url('data:image/svg+xml;charset=utf-8,') 8px 6px no-repeat,
#FFFFFF;
}