<!DOCTYPE html>
{*
Simple base for the A/B dashboard.
It contains the standard header and footer.
*}<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{trans 'A/B Testing Dashboard'}</title>
<style type="text/css">
{literal}
body {
background: #fff;
font-family: Lucida Grande, Verdana, sans-serif;
}
h1, h2 {
font-weight: normal;
}
#main {
width: 600px;
float: left;
position: relative;
margin: 1em 2em;
}
body.funnel #main {
width: 900px;
}
#details {
width: 300px;
float: left;
position: relative;
margin: 1em 2em;
}
hr {
border: 1px solid #d3d7cf;
border-collapse: collapse;
height: 1px;
margin-top: 2em;
}
table {
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
tr {
margin: 0;
padding: 0;
}
tr.winner {
background-color: #729fcf;
}
td {
border-top: 1px solid #d3d7cf;
border-bottom: 1px solid #d3d7cf;
padding: 10px;
vertical-align: top;
}
td.details {
background: #eeeeef;
margin: 0;
padding: 5px 10px;
}
pre {
margin: 0;
padding: 0;
}
.strong {
font-weight: bold;
}
.note, .details {
font-size: 0.8em;
}
.right {
text-align: right;
}
p.note {
margin-top: 2em;
}
.percent {
display: block;
float: left;
height: 10px;
width: 100%;
background-color: #e9b96e;
border: 1px solid #888a85;
}
.percent span {
background-color: #3465a4;
display:block;
float:left;
height:10px;
}
.margin {
display: block;
float: left;
width: 100%;
height: 10px;
font-size: 0.8em;
}
.margin span {
display:block;
float:left;
height: 10px;
}
.arrow {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #3465a4;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
float: right;
margin-right: 25px;
margin-top: 5px;
}
.arrowl {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid #fff;
border-right: 20px solid #d3d7cf;
border-bottom: 10px solid #fff;
margin-left: -27px;
position: relative;
top: -35px;
}
.stepstats {
background-color: #d3d7cf;
position: relative;
float: left;
margin-left: 20px;
padding: 0 7px;
}
.propsstats {
background-color: #d3d7cf;
padding: 1px 15px;
width: 50%;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
table.funnel td {
vertical-align: bottom;
border: none;
padding-right: 30px;
margin: 0;
}
table.funnel, table.funnel tr {
margin: 0; padding: 0;
}
{/literal}
</style>
</head>
<body{block bodyclass}{/block}>
<div>
<div id="main">{block body}{/block}</div>
<div id="details">{block details}{/block}</div>
<div class="clear"></div>
</div>
</body>
</html>