/* Forms */

form.prompts {
    padding: 0;
    width: 80%;
    min-width: 300px;
    margin: 25px auto;
}

form.prompts input.prompt {
    width: calc(100% - 22px);
    height: 50px;
    font: normal 1.1rem/40px arial, sans-serif;
    color: #f7f7f7;
    padding: 5px 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
}

form.prompts textarea.prompt {
    width: calc(100% - 22px);
    height: 200px;
    padding: 15px 10px;
    margin: 5px 0;
    font: normal 1.1rem/40px arial, sans-serif;
    color: #666;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fef9f5;
}

form.prompts div.check {
    position: relative;
    width: 30%;
    height: 55px;
    margin: 5px 0;
}

form.prompts div.check label {
    display: block;
    margin-left: 30px;
    margin-top: -15px;
    font: normal 16px/20px arial, sans-serif;
    color: #888;
    cursor: pointer;
}


/*
 * form.prompts div.check label span.yes{color:#080;
}
form.prompts div.check label span.no{color:#f00;display:none;
}
form.prompts div.check label:before{content:"YES\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0NO";display:block;width:100px;height:40px;border-radius:5px;border:5px solid #999;font:bold 12px/40px arial, sans-serif;color:#fef9f5;text-align:center;position:absolute;left:0;top:0;box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
background:linear-gradient(to right, #080 50%, #f00 50%);
} 
form.prompts div.check label:after{content:"";display:block;width:51px;height:40px;background:rgba(0,0,0,0.8);position:absolute;left:54px;top:5px;box-shadow:0 0 10px rgba(0,0,0,0.6);-webkit-transition:0.5s;transition:0.5s;
}
 */

form.prompts div.check #maillist:checked~label:after {
    left: 5px;
}

form.prompts div.check #maillist:checked~label span.yes {
    display: none;
}

form.prompts div.check #maillist:checked~label span.no {
    display: inline;
}

form.prompts #submit {
    width: 50%;
    height: 60px;
    margin: 0;
    background: rgba(255, 130, 0, 1);
    color: #fef9f5;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font: normal 16px/25px arial, sans-serif;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

datalist select option {
    width: 50%;
    height: 50px;
    border: 1px solid #ddd;
}

form.prompts *::-webkit-input-placeholder {
    color: #333 !important;
    text-overflow: ellipsis;
}

form.prompts *:-moz-placeholder {
    color: #333 !important;
    text-overflow: ellipsis;
}

form.prompts *::-moz-placeholder {
    color: #333 !important;
    text-overflow: ellipsis;
}

form.prompts *:-ms-input-placeholder {
    color: #333 !important;
    text-overflow: ellipsis;
}

form.prompts *:input-placeholder {
    color: #333 !important;
    text-overflow: ellipsis;
}

form.prompts *:focus {
    outline: 0;
}

form.prompts *:invalid {
    box-shadow: none;
    border: 0;
    outline: 0;
}

form.prompts *:required:invalid,form.prompts *:focus:invalid {
    background: rgb(102, 93, 102) url(tutorial4/invalid.png) no-repeat right 5px top 5px;
}

form.prompts *:required:valid {
    background: rgb(102, 93, 102)url(tutorial4/valid.png) no-repeat right 5px top 5px;
    color: #f7f7f7 !important;
}

form.prompts *:-moz-ui-invalid {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    background: rgb(102, 93, 102) url(tutorial4/fail.png) no-repeat right 5px top 5px !important;
}

form.prompts #name:valid~#email:valid~#url:valid~#comment:valid~#submit {
    background: #f7f7f7;
}

form.prompts p {
    padding: 10px 0;
    margin: 0;
}

form.prompts p:before {
    content: "All fields are required - form waiting completion";
    font: normal 16px/25px arial, sans-serif;
    color: rgba(255, 130, 0, 1);
}

form.prompts #name:valid~#email:valid~#url:valid~#comment:valid~p:before {
    content: "All fields are required - form complete";
    color: #f7f7f7;
}