@charset "UTF-8";
/* CSS Document */

div.survey { background: url(images/scienze.jpg) no-repeat top left;}
div.survey div.header { position: absolute; top: 0; left: 0;}
div.survey div.headline { position: absolute; top: 80px; left: 0;}

div.inventory-container { width: 960px; position: absolute; top: 506px;}
div.inventory-container ul { width: 552px;}

div.spot { width: 184px; height: 184px; background-color: transparent; position: absolute;}

div.question-box {display: block; width: 438px; height: 200px; position: absolute; left: 496px; top: 260px; background: url(images/cornice_testo.png) no-repeat top left;}
div.question-box p {margin-top: 48px; color: #0078BE; font-family: Arial, Helvetica, sans-serif; font-size: 30px; line-height: 32px; font-weight: bold; text-align: center;}

div.risposta { position: absolute; top: 460px; left: 520px;}

button.text-btn { display: block; width: 184px; height: 60px; background: url(images/azzurro.png) no-repeat top left; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #0078BE; padding: 0 8px;}
button.text-btn.selected { background: url(images/verde.png) no-repeat top left;}

button.verifica-btn { display: block; width: 136px; height: 34px; background: url(images/verifica.png) no-repeat top left; position: absolute; left: 70px; top: 532px;}

div.popup { display: none; position: absolute; top: 0;}

div.results { display: block; width: 438px; position: absolute; left: 522px; top: 166px;}
div.results ul { color: #0078BE; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; font-weight: bold;}
div.results ul li { margin-bottom: 16px;}
div.results ul li span { text-decoration: underline;}

.sbagliata { display: block; position: absolute; width: 182px; height: 182px; background: url(images/sbagliata.png) no-repeat top left; left: 0; top: 0;}
.corretta { display: block; position: absolute; width: 182px; height: 182px; background: url(images/corretta.png) no-repeat top left; left: 0; top: 0;}

div.survey div.controls { position: absolute; top: 520px; left: 780px; width: 104px;}

div.survey #slideshowNextBtn { background: url(images/next_btn.png) no-repeat top left; width: 52px; height: 52px; float: right;}
div.survey #slideshowPreviousBtn { background: url(images/previous_btn.png) no-repeat top left; width: 52px; height: 52px; float:left;}

div.survey.slider { position: relative; overflow: hidden; width: 960px; height: 600px;}
div.survey .content { width: 100000px; position: absolute;}
div.survey .step { position: relative; float: left; width: 960px; height: 600px;}

.inline-box { width: 210px; height: 36px; display: block; font-family: MyriadBold; font-size: 18px; line-height: 36px; text-align: center;}
.inline-box.blue { background: url(images/04/azzurro.png) no-repeat top left; color: #0078be;}
.inline-box.green { background: url(images/04/verde.png) no-repeat top left; color: #009034;}

.multiline-box { width: 140px; height: 100px; display: block; font-family: MyriadBold; font-size: 18px; line-height: 24px; text-align: center;}
.multiline-box.blue { background: url(images/08_tassello_azzurro.png) no-repeat top left; color: #0078be;}
.multiline-box.green { background: url(images/08_tassello_verde.png) no-repeat top left; color: #009034;}


.arancione,
.blu,
.rosso,
.verde {transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); -o-transform: scale(0.8,0.8); -moz-transform: scale(0.8,0.8);}

.arancione:hover,
.blu:hover,
.rosso:hover,
.verde:hover {transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1);}

.arancione.selected,
.blu.selected,
.rosso.selected,
.verde.selected {transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1);}

.spot-box  { display: block; width:140px; height:160px; background-color: transparent;}

.combobox { display: block; width: 316px; height: 36px; overflow: hidden;}
.combobox div.list { float: left; position:relative; background-color:#f7f1bb;}
.combobox div.list ul { position: relative; width: 100%; top:36px;}
.combobox div.list ul li {}
.combobox span.arrow { background: url(images/combobox_arrow.png) no-repeat top left; display: inline-block; width: 36px; height: 36px; float: left; cursor: pointer;}

.combobox2 { display: block; width: 252px; height: 36px; overflow: hidden;}
.combobox2 div.list { float: left; position:relative; background-color:#f7f1bb;}
.combobox2 div.list ul { position: relative; width: 100%; top:36px;}
.combobox2 div.list ul li {}
.combobox2 span.arrow { background: url(images/combobox_arrow.png) no-repeat top left; display: inline-block; width: 36px; height: 36px; float: left; cursor: pointer;}