/* center the content on big screens */
.ui-content{
    max-width: 1000px;
    
    position: relative;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

/* This is because if not, the pictures are taken as thumbnails. */
.ui-li-thumb {
	max-width: 500px;
	max-height: 500px;
	position: relative;
	float: none;
}

/* Same reason */
.ui-li-static.ui-li-has-thumb {
	padding-left: 15px;
}

/* Additional Stuff */
.ui-header{
        background-image: -webkit-gradient(linear, left top, left bottom, from( #87afc9 ), to( #678fa9 )); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient( #87afc9, #678fa9 ); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient( #87afc9, #678fa9 ); /* FF3.6 */
        background-image:     -ms-linear-gradient( #87afc9, #678fa9 ); /* IE10 */
        background-image:      -o-linear-gradient( #87afc9, #678fa9 ); /* Opera 11.10+ */
        background-image:         linear-gradient( #87afc9, #678fa9 );
}

.ui-btn{
        background-image: -webkit-gradient(linear, left top, left bottom, from( #e6e6e6 ), to( #c6c6c6 )); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient( #e6e6e6, #c6c6c6 ); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient( #e6e6e6, #c6c6c6 ); /* FF3.6 */
        background-image:     -ms-linear-gradient( #e6e6e6, #c6c6c6 ); /* IE10 */
        background-image:      -o-linear-gradient( #e6e6e6, #c6c6c6 ); /* Opera 11.10+ */
        background-image:         linear-gradient( #e6e6e6, #c6c6c6 );
}

.ui-btn:hover{
        background-image: -webkit-gradient(linear, left top, left bottom, from( #b6b6b6 ), to( #969696 )); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient( #b6b6b6, #969696 ); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient( #b6b6b6, #969696 ); /* FF3.6 */
        background-image:     -ms-linear-gradient( #b6b6b6, #969696 ); /* IE10 */
        background-image:      -o-linear-gradient( #b6b6b6, #969696 ); /* Opera 11.10+ */
        background-image:         linear-gradient( #b6b6b6, #969696 );
}

.ui-footer{
        font-size: 0.8em;
        font-weight:normal;
        
        text-align: center;
        background-color: #666;
        
        padding: 2px 2px 2px 2px;
}

/* Make Choice Questions as broad as the screen*/
.ui-field-contain
.ui-controlgroup-controls{
    width: 100%;
}

.question img {
    max-height: 300px;
    max-width: 400px;
}

/* Rendered text for questions and answers */
.ui-listview li .question-text {
	overflow: auto;
    white-space: normal;
    font-size: 1.0em;
    font-weight: normal;
    margin: 0 0;
}

label.ui-btn {
    font-weight: normal;
}

.text-choice-textarea {
	min-height: 100px;
}

/* -- Slider -------------------------------------------------------------- */
input[type=number] {
    width: 90px;
}
.ui-slider-track {
    margin-left: 120px;
}



/* -- Result Page ----------------------------------------------------------*/
.optional-information-header {
	text-decoration: underline;
	color: #777777;
	font-size: 0.9em;
}


.optional-information-text {	
	margin: 5px;
	padding: 5px;
	border: 1px solid #999999;
	border-radius: 4px;
	background-color: #FAFAD2;
	display: none;
	
	overflow: auto;
    white-space: normal;
}

.optional-information-text a{
	font-weight: normal;
}

.button-optional {
	margin: 4px;
	padding: 5px;
	
	font-size: 12.5px;
	font-family: "Open Sans",sans-serif !important;
	text-decoration: none !important;
	font-weight: normal !important;
    color: #3eb249 !important;  
      
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: 2px;;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;   
}

.result-textfield {
	margin: 5px;
	padding: 5px;
	padding-left: 10px;
	border: 1px solid #999999;
	border-radius: 4px;
	background-color: #FDFDFD;
	
	overflow: auto;
    white-space: normal;
    
    font-size: 0.9em;
}
.solution-textfield {
	font-size: 0.8em;
	background-color: #FAFAD2;
	color: #3eb249;
}
.answer-correct {
	color: #3eb249;
}
.answer-wrong {
	color: #FF3333;
}


/* -- HOME ------------------------------- */
.home-error-message {
	background-color: #fcf8e3 !important;
	text-align: center !important;
}