body {margin:0; padding:0; border:0; height:100%; width:100%; background-color:#4d1d11; background-image:url(../image/bg.png); background-repeat:repeat; background-size:100px auto; overflow:auto; text-align:center; font-family:'Roboto', Open Sans, sans-serif; color:#cccccc; font-size:14px; font-weight:lighter; cursor:default;}
p, form {margin:0; padding:0;}
input:focus, select:focus, textarea:focus, a:focus {outline:0;}
img {border:none; border:0;}
.clear {clear:both;}

table {position:relative; border-spacing:0}
table td {position:relative; padding:0; border-spacing:0}
ul, li {margin:0;}

#waiting {position:fixed; top:0; left:0; width:100%; height:100%; background:url(../image/transp.png) repeat; z-index:999999; display:none}
#waiting img {position:fixed; width:250px; height:250px; top:50%; left:50%; margin: -125px 0 0 -125px;}


#bgTr, .bgTr {position:fixed; top:0; left:0; width:100%; height:100%; background:url(../image/transp.png) repeat; z-index:888888; display:none}

/* .schermoMobile {position:fixed; top:0; left:50%; margin-left:-176px; width:350px; height:100%; border-right:solid 1px #aaaaaa; border-left:solid 1px #aaaaaa;} /* DA ELIMINARE sulla versione ufficiale */
.schermoMobile {position:fixed; top:0; left:0; margin:0; width:1px; height:1px; border:none; background:none; display:none; z-index:-999999} /* DA AGGIUNGERE sulla versione ufficiale */



.button {position:relative; width:250px; height:40px; line-height:40px; overflow:hidden; border-radius:20px; margin:0 auto 0 auto; color:#ffffff; background-image:linear-gradient(to top,#8e2713,#ff602f); font-weight:900; font-size:18px; text-align:center; letter-spacing:1px;}
.button:hover, .button:focus {cursor:pointer; background-image:linear-gradient(to bottom,#8e2713,#ff602f);}


h1 {position:relative; margin:20px auto 10px auto; color:#000000; font-weight:bold; font-size:30px;}
h2 {position:relative; margin:0 auto 20px auto; color:#454545; font-weight:normal; font-style:italic; font-size:20px;}
h3 {position:relative; margin:30px auto 10px auto; color:#454545; font-weight:normal; font-size:18px;}
h4 {position:relative; margin:20px auto 5px auto; color:#454545; font-weight:normal; font-size:15px;}

.guiltyH {position:absolute; width:315px; height:298px; top:150px; left:50%; margin:0 0 0 -157.5px; background-image:url(../image/guilty.png); background-repeat:no-repeat; background-size:cover; background-position:center center;}
.titleH {position:absolute; width:233px; height:113px; top:-100px; left:50%; margin:0 0 0 -116.5px; background-image:url(../image/title.png); background-repeat:no-repeat; background-size:cover; background-position:center center;}
.but1H {position:absolute; bottom:200px; width:200px; height:50px; left:50%; margin-left:-100px; background-image:linear-gradient(to top,#8e2713,#ff602f); border:solid 2px #ffffff; border-radius:25px; color:#ffffff; line-height:50px; font-size:35px; font-weight:900; letter-spacing:1px; text-shadow:#000000 -1px -1px 1px; display:flex; align-items:center; justify-content:center;}
.but1H:hover, .but1H:focus {background-image:linear-gradient(to top,#ff602f,#8e2713); text-shadow:#333333 2px 2px 7px; box-shadow:#ffffff 0px 0px 20px; cursor:pointer}


.but2H {position:absolute; bottom:100px; width:300px; left:50%; margin-left:-150px; color:#ffffff; font-size:16px; line-height:25px; font-weight:400; letter-spacing:1px;}
.but2H a:link, .but2H a:active, .but2H a:visited {color:#ffffff; text-decoration:none; text-shadow:#000000 1px 1px 1px;}
.but2H a:hover, .but2H a:focus {color:#ffffff; text-decoration:underline; text-shadow:none;}


.privLink:link, .privLink:active, .privLink:visited {color:#4d1d11; text-decoration:none; border-bottom:dotted 1px #4d1d11}
.privLink:hover, .privLink:focus {color:#4d1d11; text-decoration:none; border-bottom:solid 1px #4d1d11}


.overBox, .overBox2 {position:fixed; top:150px; left:50%; width:280px; height:auto; padding:35px 5px 5px 5px; margin:0 0 0 -146px; background-image:linear-gradient(to top,#8e2713,#db3c1d); border:solid 2px #ffffff; border-radius:10px; box-shadow:#454545 3px 3px 15px; z-index:898989; text-align:center; color:#ffffff; font-weight:300; font-size:14px; line-height:20px; display:none}
.overBox .topper, .overBox2 .topper {position:absolute; width:310px; height:40px; background-image:linear-gradient(to top,#ff602f,#ff9a7b); border:solid 2px #ffffff; border-radius:20px; top:-20px; left:-10px; box-shadow:#454545 3px 3px 15px; font-weight:500; color:#ffffff; font-size:18px; line-height:40px; text-shadow:#000000 1px 1px 0px; text-align:center; display:flex; align-items:center; justify-content:center;}
.overBox .topper .close, .overBox2 .topper .close {position:absolute; top:-10px; right:-10px; width:28px; height:28px; border-radius:15px; background-image:linear-gradient(to top,#3a3a3a,#aaaaaa); border:solid 2px #ffffff; box-shadow:#454545 -3px 3px 15px; font-weight:900; font-size:30px; line-height:28px; text-align:center; color:#ffffff; text-shadow:#000000 -1px -1px 1px; display:flex; align-items:center; justify-content:center;}
.overBox .topper .close:hover, .overBox .topper .close:focus,
.overBox2 .topper .close:hover, .overBox2 .topper .close:focus
{cursor:pointer; background-image:linear-gradient(to top,#aaaaaa,#3a3a3a);}
.overBox .overBut, .overBox2 .overBut, .overButDisabled,
.overBox .overBut2, .overBox2 .overBut2
   {position:relative; display:block; width:90%; height:auto; background-image:linear-gradient(to top,#681d0e,#8e2713); margin:10px auto 10px auto; padding:10px 0 10px 0; border-radius:5px; border:solid 1px #dddddd; color:#ffffff; font-weight:500;}

.overButDisabled {background-image:linear-gradient(to top,#333333,#808080); }

.overBox .overBut:hover, .overBox .overBut:focus,
.overBox2 .overBut:hover, .overBox2 .overBut:focus {background-image:linear-gradient(to top,#8e2713,#681d0e); cursor:pointer}
.overForm {position:relative; width:252px; margin:10px auto 10px auto; text-align:left; font-size:13px;}
.overForm input {position:relative; background:#ffffff; border:none; width:242px; height:30px; border-radius:5px; margin:0px 0 10px 0; text-align:left; padding:0 5px 0 5px; font-size:15px;}
.overForm .submit {background-image:linear-gradient(to top,#681d0e,#8e2713); border:solid 1px #dddddd; color:#ffffff; width:252px; height:40px; font-weight:500; line-height:40px; text-align:center; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.overForm .submit:hover, .overForm .submit:focus {background-image:linear-gradient(to top,#8e2713,#681d0e); cursor:pointer}
.overErrBox {position:relative; width:240px; margin:10px auto 10px auto; text-align:center; font-size:13px; border:solid 1px #ffffff; border-radius:5px; padding:5px; background-image:linear-gradient(to bottom,#8e2713,#db3c1d); line-height:normal; box-shadow:#454545 3px 3px 10px; color:#ffffff}
.overDescr {position:absolute; top:0; left:0; padding:0 2% 0 2%; top:35px; width:96%; overflow:auto;}
.cnt1 {position:fixed; top:70px; left:0; width:98%; padding:0 1% 0 1%; background:none; overflow:auto; color:#ffffff;}
.delListTab {position:relative; width:330px; margin:20px auto 20px auto; color:#ffffff; cursor:pointer;}
.delListTabDisabled {position:relative; width:330px; margin:20px auto 20px auto; color:#ffffff; cursor:default; opacity:0.7}
.delListImg {position:absolute; top:50%; left:50%; width:60px; margin:-30px 0 0 -30px; border-radius:100%; }
.delListImgDisabled {position:absolute; top:50%; left:50%; width:60px; margin:-30px 0 0 -30px; border-radius:100%; filter:grayscale(100%);}
.delListTab:hover .delListImg, .delListTab:focus .delListImg {width:70px; margin:-35px 0 0 -35px;}
.delListSep {position:relative; width:290px; height:1px; background:#ffffff; margin:20px auto 20px auto;}
.pagCnt {position:relative; width:330px; margin:0 auto 50px auto; height:40px;}
.pagButLeft, .pagButRight {position:absolute; top:0; width:30px; height:40px; line-height:40px; background-image:linear-gradient(to top,#9e8329,#e6c263); border-radius:100%; color:#ffffff; font-size:20px; text-shadow:#000000 -1px -1px 0px}
.pagButLeft {left:0; text-align:left; padding-left:10px}
.pagButRight {right:0; text-align:right; padding-right:10px}
.pagButLeft:hover, .pagButRight:hover, .pagButLeft:focus, .pagButRight:focus {background-image:linear-gradient(to bottom,#9e8329,#e6c263); cursor:pointer;}
.headerPage, .footerPage {position:fixed; left:0; width:98%; padding:0 1% 0 1%; overflow:hidden; z-index:777777}
.headerPage {top:0; height:50px; background-image:linear-gradient(to top,#1e1e2f,#47476f); border-radius:0 0 15px 15px; border-bottom:solid 2px #d4af37;}
.footerPage {bottom:0; height:50px; background-image:linear-gradient(to bottom,#2a201b,#503d34); border-radius:15px 15px 0 0; border-top:solid 2px #d4af37;}
.headerPage .score, .headerPage .score2 {width:130px; height:30px; line-height:30px; background:#1e1e2f; border-radius:15px; border-bottom:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; box-shadow:#000000 -1px -1px 0px; color:#ffffff; font-weight:300; text-align:center; font-size:13px; display:flex; align-items:center; justify-content:center;}
.headerPage .score {position:absolute; left:20px; bottom:10px;}
.headerPage .score2 {position:relative; top:10px; margin:0 auto 0 auto;}
.headerPage .backBut {position:absolute; bottom:5px; left:20px; width:31px; padding-left:9px; height:40px; line-height:40px; border-radius:40px; background-image:linear-gradient(to top,#a67c00,#cc9900); box-shadow:#000000 2px 2px 5px; color:#ffffff; font-weight:900; font-size:20px; text-shadow:#000000 1px 1px 3px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left;}
.headerPage .backBut:hover, .headerPage .backBut:focus {background-image:linear-gradient(to bottom,#a67c00,#cc9900); cursor:pointer}
.headerPage .menuBut {position:absolute; bottom:5px; right:20px; width:40px; height:40px; line-height:40px; border-radius:100%; background-image:linear-gradient(to top,#a67c00,#cc9900); box-shadow:#000000 2px 2px 5px; color:#ffffff; font-weight:900; font-size:40px; text-shadow:#000000 1px 1px 3px; align-items:center; justify-content:center;}
.headerPage .menuBut:hover, .headerPage .menuBut:focus {background-image:linear-gradient(to bottom,#a67c00,#cc9900); cursor:pointer}
.headerPage .menuBut .bar {position:relative; height:4px; margin:0 auto 4px auto; width:20px; background-color:#ffffff; border-radius:4px; box-shadow:#000000 1px 1px 3px;}
#menu {position:fixed; top:52px; right:20px; border-radius:0 0 10px 10px; border:solid 2px #d4af37; border-top:none; width:210px; background:#4d1d11; box-shadow:#000000 3px 3px 15px; display:none; z-index:777777}
#menu p {position:relative; width:200px; padding:20px 5px 20px 5px; margin:0; border-bottom:solid 1px #d4af37; text-align:right; font-weight:500; color:#dddddd}
#menu p:hover, #menu p:focus {color:#ffffff; font-weight:700; cursor:pointer}
.footer-icon {position:relative; background-image:linear-gradient(to top,#a67c00,#cc9900); width:40px; height:40px; border-radius:100%; margin:5px; display:inline-block;}
.footer-icon img {position:absolute; width:26px; height:26px; top:7px; left:7px;}
.footer-icon:hover, .footer-icon:focus {background-image:linear-gradient(to bottom,#a67c00,#cc9900); cursor:pointer}
.tit {position:relative; margin:0 auto 0 auto; color:#ff5026; font-size:20px; font-weight:700;}
.subTit {position:relative; margin:50px auto 50px auto; width:200px; height:60px; line-height:60px; padding:0 10px 0 80px; background-image:linear-gradient(to bottom right,#a67c00,#ffd200);  color:#ffffff; font-size:14px; font-weight:500; border-radius:70px 20px 20px 70px; box-shadow:#000000 0px 0px 15px; display:flex; align-items:center; justify-content:center; text-align:right;}
.subTit .icon {position:absolute; top:-5px; left:-5px; width:70px; height:70px; border-radius:70px; background-position:center center; background-repeat:no-repeat; background-size:cover; border:solid 2px #ffffff; box-shadow:#000000 0px 0px 15px}
.subTit:hover .icon, .subTit:focus .icon {top:-10px; left:-10px; width:80px; height:80px;}
.subTit:hover, .subTit:focus {text-shadow:#ffffff 0px 0px 5px; color:#ff5026; cursor:pointer;}
.subTitDisabled {position:relative; margin:50px auto 50px auto; width:200px; height:60px; line-height:60px; padding:0 10px 0 80px; background-image:linear-gradient(to bottom right,#848484,#d8d8d8); color:#ffffff; font-size:14px; font-weight:500; border-radius:70px 20px 20px 70px; box-shadow:#000000 0px 0px 15px; display:flex; align-items:center; justify-content:center; text-align:right;}
.subTitDisabled .icon {position:absolute; top:-5px; left:-5px; width:70px; height:70px; border-radius:70px; background-position:center center; background-repeat:no-repeat; background-size:cover; border:solid 2px #ffffff; box-shadow:#000000 0px 0px 15px}
.butQuest {position:relative; width:26px; height:26px; line-height:26px; font-weight:400; background-image:linear-gradient(to top,#1e1e2f,#47476f); border-radius:100%; text-align:center; border:solid 2px #ffffff; display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);}
.butQuest:hover, .butQuest:focus {background-image:linear-gradient(to bottom,#1e1e2f,#47476f); cursor:pointer}
.butAnswer, .butAnswerDisabled {position:relative; width:96%; padding:5px 2% 5px 2%; border-radius:5px; font-style:italic; text-shadow:#000000 -1px -1px 0px}
.butAnswer {background-image:linear-gradient(to top,#1d6b3c,#3cdb8a);}
.butAnswerDisabled {background-image:linear-gradient(to top,#5e5e5e,#c1c1c1); text-align:center;}
.butAnswerDisabled:hover, .butAnswerDisabled:focus {background-image:linear-gradient(to top,#1d6b3c,#3cdb8a); cursor:pointer}

.selezioneColpevole {position:relative; width:98%; padding-right:2%; margin:10px auto 10px auto; height:34px; line-height:34px; overflow:hidden; text-align:right; box-shadow:#000000 -1px -1px 0px; border-radius:5px; background-color:#ffffff; color:#000000; background-repeat:no-repeat; background-size:28px 28px; background-position:5px center; cursor:pointer;}

.tastieraCnt {position:absolute; left:0; bottom:0; width:100%; height:135px; background-image:linear-gradient(to left top,#a85c3a,#e67e4f,#a85c3a); border-top:solid 2px #d4af37; text-align:center; padding:5px 0 5px 0;}
.tastieraCnt .tasto, .tastieraCnt .tasto2 {position:relative; width:24px; height:35px; line-height:35px; margin:5px 2px 5px 2px; display:inline-flex; border-radius:5px; box-shadow:#000000 1px 1px 3px; text-align:center; font-weight:900; color:#303030; flex-direction:row; align-items:center; justify-content:center; }
.tastieraCnt .tasto {background:#fdf7f3; font-size:16px;}
.tastieraCnt .tasto2 {background-image:linear-gradient(to top,#aa0000,#ff0000);  color:#ffffff; font-size:90%}
.tastieraCnt .tasto:active {background:#303030; color:#fdf7f3; box-shadow:#ffffff 0px 0px 15px; cursor:pointer}
.tastieraCnt .tasto2:active {background-image:linear-gradient(to bottom,#aa0000,#ff0000);box-shadow:#ffffff 0px 0px 15px; cursor:pointer}
.definizioniCnt {position:absolute; left:0; bottom:147px; background-image:linear-gradient(to top,#5c3220,#a85c3a,#5c3220); width:100%; height:60px; padding:5px 0 5px 0; border-top:solid 2px #d4af37; color:#ffffff; font-size:15px; overflow:hidden; font-weight:normal; display:flex; align-items:center}
.definizioniTxt {position:relative; margin:0 auto 0 auto; text-align:center; width:250px}






.definizioniCnt .prevDef, .definizioniCnt .nextDef {position:absolute; top:0; width:48%; height:100%; cursor:pointer}
.definizioniCnt .prevDef {left:0;}
.definizioniCnt .nextDef {right:0;}
.definizioniCnt .prevDefBut, .definizioniCnt .nextDefBut {position:absolute; top:22px; width:21px; height:26px; line-height:26px; background-image:linear-gradient(to top right,#00aa00,#00ff00); border-radius:100%; color:#ffffff; text-shadow:#000000 -1px -1px 1px; box-shadow:#505050 1px 1px 1px; display:flex; flex-direction:row; align-items:center;}
.definizioniCnt .prevDefBut {left:5px; padding-left:5px; text-align:left; justify-content:center;}
.definizioniCnt .nextDefBut {right:5px; padding-right:5px; text-align:right; justify-content:center;}
.definizioniCnt .prevDef:hover .prevDefBut, .definizioniCnt .nextDef:hover .nextDefBut,
.definizioniCnt .prevDef:focus .prevDefBut, .definizioniCnt .nextDef:focus .nextDefBut
   {background-image:linear-gradient(to bottom left,#00aa00,#00ff00); cursor:pointer}




.tastoH {position:fixed; top:52px; width:70px; height:35px; background-image:linear-gradient(to top left,#1e1e2f,#47476f); border-radius:0 0 70px 70px; left:50%; margin:0 0 0 -35px; border:solid 2px #d4af37; border-top:none; box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);}
.tastoH:hover, .tastoH:focus {background-image:linear-gradient(to bottom right,#1e1e2f,#47476f); cursor:pointer; width:80px; height:40px; border-radius:0 0 80px 80px; margin:0 0 0 -40px; box-shadow: 0 0 8px 3px rgba(255, 255, 0, 0.8);}
.tastoH img {position:absolute; top:50%; left:50%; width:26px; margin:-13px 0 0 -13px;}










.grigliaCnt {position:absolute; top:62px; left:50%; width:320px; margin-left:-160px; overflow:auto; padding:5px 0 5px 0;}
.grigliaCnt .selected {position:relative; margin:10px 0 10px 0; padding:3px 0 3px 0; border-top:solid 2px #d4af37; border-bottom:solid 2px #d4af37; border-radius:10px;}
.grigliaCnt .cella {position:relative; display:inline-flex; font-weight:900; background:#fff5e6; border-radius:5px; margin:5px 1px 5px 1px; vertical-align:middle; align-items:center; justify-content:center; color:#000000; font-size:20px}
.grigliaCnt .celSel {box-shadow:#d4af37 0px 0px 0px 3px;}
.grigliaCnt .celSol {box-shadow:#ffffff 0px 0px 3px 3px;}
.grigliaCnt .writing {color:#808080; background:#cbe4f9}
.grigliaCnt .evid {background:#7dacd3; color:#ffffff}
.grigliaCnt .cellErr {background-image:linear-gradient(to top,#dd0000,#ff0000);}
.grigliaCnt .cellTransp {opacity:.6;}
.grigliaCnt .lampHelp {animation:lampeggia 0.5s infinite alternate;}
@keyframes lampeggia {
  from {
    box-shadow: 0 0 8px 3px rgba(255, 255, 0, 0.8); /* giallo trasparente */
  }
  to {
    box-shadow: 0 0 0 0 rgba(255, 255, 0, 0); /* invisibile */
  }
}