@charset "UTF-8";

body {
	font-family: 'Satisfy', cursive;
	color: #444;
	background: #eef2f3;
}

.scrolloff {
        pointer-events: none;
    }

h2 {
	margin-top: 65px;
	font-size: 2.5em;
	font-weight:bold;
}

h3 {
	margin-top: 50px;
	font-size: 2em;
	font-weight:normal;
}

a {
color:black;
}


#spiel {
	font-family: 'Slabo 27px', serif;
	font-size: 1.3em;
}

#container {
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background: #D2E7F8; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#D2E7F8, #eef2f3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#D2E7F8, #eef2f3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#D2E7F8, #eef2f3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#D2E7F8, #eef2f3); /* Standard syntax */
}

.yes {
color:#66BD54;
font-size:1em;
}

.no {
color:red;
font-size:1em;
}

.survey_name {
	font-size:1.9em;
}

.centered {
  margin: 0 auto;
  padding-top:30px;
  max-width:500px;
}

#textarea {
	font-size:2.3em;
	text-shadow:0 0 5px #FFF;
	text-align:center;
}

.bigger {
	font-size: 2.3em;
	font-weight:bold;
	text-shadow:0 0 5px #CECECE;
}

label { 
    margin:20px;
    width:420px;
    overflow:auto;
    font-size:1.8em;
    color:#444;
    text-shadow:0 0 2px #ddd;
}

.blurb {
	font-size: 2em;
}

.formel {
	font-size:3em;
	color:BABEBF;
	text-shadow:0 0 2px #D2E7F8;
	font-family: 'Satisfy', cursive;
	text-align:center;
}

.formitem {
	height:120px;
	position:relative;
	padding-top:20px;
}

.center-align {
	text-align:center;
}

button {
	border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
	text-align:center;
	padding:18px;
	margin-top:20px;
}

button:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

input {
	background-color: white;
    float:right;
    width:500px;
	height:70px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;
	margin-bottom:30px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;	
}

.drinkresult {
	line-height: 40px;
	font-size: 1em;
}

select, .dietotherinput {
	background-color: white;
	text-align:center;
    width:148px;
	height:50px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;	
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}


			/*
			 * Special CSS classes
			 * for jQuery - Valida
			 */

			.at-error {
				/* placed on a error labels */
				color: #FF8383;
				font-size:1.1em;
				text-align:right;
				width:500px;
				line-height:1px;
				margin:0;
			}

			.at-warning {
				/* placed on a warning (invalid) labels */
				color: #FF8400;
				font-size:1.1em;
				text-align:right;
				width:500px;
				line-height:1px;
				margin:0;
			}

			.at-invalid {
				/* placed on a invalid fields (which do not match with their filters or masks) */
			}

			.at-required {
				/* placed on a required fields (which are not filled) */
			}

			.at-description {
				/* placed on description paragrapher, right after TEXTAREA fields. */
			}

			.at-description > span {
				/* into description paragrapher, right after TEXTAREA fields there are 2 span TAGs. */
			}

            .at-required-highlight {
                /* highlight required form fields */
                color: red;
            }