<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE surveyContent SYSTEM "https://www.soscisurvey.de/templates/doctype.survey.dtd">
<surveyLayout version="2.4" program="oFb" progversion="3.2.45 1315">
<name>responsive</name>
<title>ISE Responsive Layout</title>
<template>
<![CDATA[<!DOCTYPE html>
<html>
<head>
%head%
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { padding: 0 0 20px 0; margin: 0 }
div#s2t-progress { position: absolute; right: 10px; top: 0px; width: 200px }
div#s2t-logo { margin-bottom: 10px }
div.questionary { min-width: 300px; max-width: %width%; margin: 14px auto 0px auto; padding: 0 10px }

/* Center header and footer on smartphone */
@media (max-width: 450px) {
	div#s2t-logo { text-align: center; margin-bottom: 16px }
	div#s2t-controls { text-align: center }
	div#s2t-imprint { text-align: center }
	div#s2t-progress { left: 0; right: 0; margin: 0 auto }
}
</style>
</head>

<body>
<div class="questionary" style="position: relative">
%form.open%
<div style="width: 40%; float: right"><!-- %progress% --></div>
        <div id="s2t-logo">%logo%</div>
        <hr style="margin-top: 12px;">
        %progress%
	<hr style="clear: both; margin-bottom: 32px">
<div id="s2t-content">
<div style="margin-bottom: 32px;"></div>
%questionnaire%
</div>
<hr style="margin-bottom: 14px;">
<div id="s2t-controls">
%button.control%
</div>
%form.close%
<div id="s2t-imprint">
%imprint%
</div>
</div>
</body>
</html>]]>
</template>
<defaultStatus>yes</defaultStatus>
<copyright>(c) 2017 ISE</copyright>
<attributes.specific program="ofb">
<attr id="body.font-family">Lato,'Helvetica Neue',Arial,Helvetica,sans-serif</attr>
<attr id="body.font-size">14px</attr>
<attr id="title.text-color">FFFFFF</attr>
<attr id="explanation.text-color">FFFFFF</attr>
<attr id="item.background.shaded">EEEEEE</attr>
<attr id="item.background.hover">72a5db</attr>
<attr id="item.shade-start">unshaded</attr>
<attr id="item.residual.style">border-left: 2px solid #88BB00</attr>
<attr id="item.trouble.border">2px solid #a41820</attr>
<attr id="anchor.verbal.style">font-size: 12px; padding: 10px 0px 2px 0px;</attr>
<attr id="anchor.numeric.style">font-size: 11px; padding: 2px 0px 1px 0px;</attr>
<attr id="anchor.combine.style">vertical-align: top; padding-bottom: 6px; font-weight: normal</attr>
<attr id="input.font-family">Lato,'Helvetica Neue',Arial,Helvetica,sans-serif</attr>
<attr id="input.scale.vertical-align">middle</attr>
<attr id="progress.text-color">FFFFFF</attr>
<attr id="feedback.style">border: 2px solid #a41820; background-color: #FFEEEE; padding: 0px 8px; margin: 32px 0px</attr>
<attr id="body.background">#f7f9fa</attr>
<attr id="spacing.items">0</attr>
<attr id="spacing.question">50px</attr>
<attr id="title.background">005285</attr>
<attr id="title.font_size">14</attr>
<attr id="title.style">font-weight: bold; padding: 3px 4px 5px 4px</attr>
<attr id="title.trouble">color: #EEFF00</attr>
<attr id="explanation.background">005285</attr>
<attr id="explanation.style">padding: 3px 4px 8px 4px; margin-top: -5px</attr>
<attr id="opener.style">font-weight: bold; vertical-align: top; padding: 10px 4px 2px 0px;</attr>
<attr id="opener.background">EEEEEE</attr>
<attr id="item.trouble">color: #a41820</attr>
<attr id="progress.background">72a5db</attr>
<attr id="progress.foreground">005285</attr>
</attributes.specific>
</surveyLayout>
