/* base font-size corresponds to 10px and is adapted to rem unit */
html {
    font-size: 62.5%;
}
body {
    color: #000;
    font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
    font-size: 1.4em; /* equiv 14px */
}

/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea {
    font-size: 1em; /* equiv 14px */
    line-height: 1.5em;
    margin: 21px 0;
}

/* soft reset */
html,
body,
label {
    margin: 0;
    padding: 0;
}

body {
    max-width: 960px;
    margin: auto;
}
@media screen and (max-width: 400px) {
    h1{
        font-size: 1em;
    }
}

.main {
    position: relative;
    width: 101%;
}

#likertForm {
    overflow-x:hidden;
    overflow-y:hidden;
    width: 940px;
    height: 500px;
    margin-bottom: 20px;
}
#likertForm>div {
    width: 9800px;
}
@media screen and (min-width: 400px) {
    div.mask {
        position: absolute;
        display: block;
        width: 8%;
        height: 95%;
        right: -2%;
        z-index: 100;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,1) 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,100%,0)), color-stop(100%,hsla(0,0%,100%,1)));
        background: -webkit-linear-gradient(left, hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,1) 100%);
        background: -o-linear-gradient(left, hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,1) 100%);
        background: -ms-linear-gradient(left, hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,1) 100%);
        background: linear-gradient(to right, hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
    }
}
#form>div, #likertForm>div>div:last-child {
    float: left;
    width: 282px;
    display:block;
    border-radius:8px;
    background:#ccc;
    padding:5px;
    margin:4px;
}
#likertForm>div:last-child:after {
    content: "";
    display: inline-block;
    margin-right:800px;
}
#form>div>label {
  padding: 1.4em;
  display: block;
  font-size: 1.15em;
  position: relative;
}
#form>div.none>label {
    cursor: pointer;
    font-size: 1em;
    padding-bottom: 8em;
}
#form>div.likert.none:hover>label:after {
    color: #999;
}
#form>div.likert.none>label:after {
    bottom: 0;
    color: #BBB;
    content: "→";
    font-size: 16em;
    line-height: 0.6em;
    position: absolute;
    right: 0;
}
.choiceItem {
  overflow: hidden;
  position: relative;
  display: block;
}
.choiceItem > label {
  background:#fff;
  border-radius:4px;
  border:3px #fff solid;
  padding:3px;
  margin:3px;
  display:block;
  text-align: center;
}
.choiceItem > input {
    visibility: hidden;
    position:absolute;
    top:1px;
}
.choiceItem > input:checked + label {
    background: #afa;
}
select {
    max-width:100%;
}
/*
form { max-width: 100%; }
#form>div { clear: both; display: table-row; }

form label {
    display: table-cell;
}
#form>div.none.likert>label{
    display: block;
    font-size: 1.2em;
}
form label+div label{
    float:none;
    min-width: auto;
}

#form>.likert{
    margin-top: 50px;
}

.likert .choiceItem{
    display: table-cell;
    text-align: center;
}
.likert .choiceItem label{
    display: block;
    padding: 0 6px;
}

#form>div:hover {
    background-color: #ddd;
}
*/


body:before{
    z-index: -12;
    content: " ";
    display: block;
    height: 33%;
    max-height: 260px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #0A396B;
    background-image: linear-gradient(bottom, #18305E 0%, #0D305A 37%, #0259A5 100%);
    background-image: -o-linear-gradient(bottom, #18305E 0%, #0D305A 37%, #0259A5 100%);
    background-image: -moz-linear-gradient(bottom, #18305E 0%, #0D305A 37%, #0259A5 100%);
    background-image: -webkit-linear-gradient(bottom, #18305E 0%, #0D305A 37%, #0259A5 100%);
    background-image: -ms-linear-gradient(bottom, #18305E 0%, #0D305A 37%, #0259A5 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #18305E),
        color-stop(0.37, #0D305A),
        color-stop(1, #0259A5)
        );
}

.title{
    font-size: 1,6em;
    color: #fff;
}

body>div.content {
    clear: both;
    overflow: hidden;
    background: #fff;
    border-radius: 1.6em;
    border: 1px solid #0F305A;
}
@media screen and (min-width: 400px) {
    body>div.content {
        padding: 0 12px;
/*        width: 100%; */
    }
}

.right {
    float: right;
    margin-left: 14px;
}

.clear,
.line,
.row {
    clear: both;
}

body>header>img+img {
    float: right;
}
body>header>img {
    margin: 3%;
    max-width: 24%;
}



body>footer {
    text-align: center;
    font-size: .8em;
    color: #333;
}

body {
    background: #eee;
}

.item {
    padding:0 3em;
}

a.button {
    padding: .7em 2em;
}
input.button {
    padding: .35em 2em;
}
.button {
    display: inline-block;
    font-size: 1.4em;
    line-height: 14px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#form>div, #likertForm>div>div:last-child, .button, .choiceItem > label {
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: #D8D8D8;
    /*background-image: linear-gradient(to bottom, #EFEFEF, #D8D8D8);*/
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top,  hsla(0,0%,94%,1) 0%, hsla(0,0%,85%,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,94%,1)), color-stop(100%,hsla(0,0%,85%,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  hsla(0,0%,94%,1) 0%,hsla(0,0%,85%,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  hsla(0,0%,94%,1) 0%,hsla(0,0%,85%,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  hsla(0,0%,94%,1) 0%,hsla(0,0%,85%,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  hsla(0,0%,94%,1) 0%,hsla(0,0%,85%,1) 100%); /* W3C */
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */

}
.button-primary, .choiceItem > input:checked + label {
    background-color: #0074CC;
    background: #0258a3;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyNThhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNzMwNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #0258a3 0%, #17305d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0258a3), color-stop(100%,#17305d));
    background: -webkit-linear-gradient(top,  #0258a3 0%,#17305d 100%);
    background: -o-linear-gradient(top,  #0258a3 0%,#17305d 100%);
    background: -ms-linear-gradient(top,  #0258a3 0%,#17305d 100%);
    background: linear-gradient(to bottom,  #0258a3 0%,#17305d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0258a3', endColorstr='#17305d',GradientType=0 );
    color: #FFFFFF;
}
.choiceItem label:hover {
    background: #F5F5F5;
}
.steps{
    float: right;
    font-size: .9em;
    margin-right: 0.6em;
}
.steps .item{
    display: inline-block;
    padding: .5em .25em;
    margin: 0 .1em;
    vertical-align: middle;
    text-align: center;
    color: #777;
}
.steps .done{
    color: #000;
}
.steps .active{
    background: #0F305A;
    border-radius: .8em;
    color: #fff;
}
@media screen and (max-width: 400px) {
    h1{
        font-size: 1em;
    }
    h2.steps{
        font-size: .8em;
        color: #666;
    }
}

/*.nav{
    display: inline-block;
    position: absolute;
    top: -1em;
    left: 0;
}
*/.nav a{
    padding: .2em .9em;
    font-size: 1.6em;
    color: #777;
}
.nav a.last {
    letter-spacing: -.2em;
}
.nav a.last span {
    display: inline-block;
    font-size: 60%;
    position: relative;
    top: -0.2em;
}
#form .needed{
    border-color:#F00;
}
#form div div div{
    display: inline-block;
}