::selection {
  color: #EBE8C7;
  background: #4B812F;
}
::-moz-selection {
  color: #EBE8C7;
  background: #4B812F;
}

  /* This CSS file is part of the HTML5 / CSS3 tutorial on http://www.lingulo.com */
  /* GLOBAL */
body {
  font-family:"Arial, Helvetica, sans-serif";
  margin: 0;
  padding: 0;
  color:#333333;
  border-top:5px solid #009245;
  background-color: #EBE8C7;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#fo { font-family:Arial, Helvetica, sans-serif; }

#fo b, #fo strong { font-weight: bold; }

#fo input, #fo select, #fo textarea {
  font-size:14px;
  padding: 5px;
  outline: 0;
  border:0;
  background: #F7F7F7;
  border-radius:5px;
  margin-bottom: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#fo input[type=submit], #footer .formsender {
  width:auto;
  padding: 5px 18px;
  line-height:25px;
  text-shadow:none;
  cursor:pointer;
  box-shadow: none;
  color: #FFF;
}
#fo .green input[type=submit], #footer .green .formsender { background: #4B812F; }
#fo .blue input[type=submit], #footer .blue .formsender { background: #003366; }

#fo input[type="number"] { width:60px; }

#fo a {
  text-decoration:none;
  transition: color .5s ease;
  /* quanto segue aggiunto per gestire i link interni ai testi*/
  color: #4B812F;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 5px;
}
#fo .green a {color: #4B812F;}
#fo .blue a {color: #003366;}

#fo a:hover { text-decoration: underline; }

#fo .green h1, #fo .green h2, #fo .green h3{ color:#4B812F; }
#fo .blue h1, #fo .blue h2, #fo .blue h3{ color:#003366; }
#fo h1 { font-size:22px; }
#fo h2 { font-size: 20px; }
#fo h3 { font-size: 18px; }

#fo hr {
  background-color: #D6D0C1;
  border:0;
  height:1px;
  margin:20px 0;
}

#fo .hide { display: none } /* teoros added */

#fo #pagewrap p, #fo #ww4_printFilter .borderedFrame ul, #fo #ww4_printFilter .borderedFrame ol  {
  margin:5px 0;
  line-height: 130%;
  font: Arial, Helvetica, sans-serif;
}

  /****************** HEADER **********************************************/
#fo header {
  position:relative;
  width:auto;
  margin: 0 auto;
}

#fo header h1 {
  margin:35px 0 0 0;
  font-size:55px;
}

#fo header p {
  font-size:16px;
  margin-left:132px;
}

#fo .headerContainer {
  width:1100px;
  max-width: 100%;
  position:relative;
  margin: 0 auto;
  min-height: 220px;
}

  /****************** LOGO **********************************************/
#fo #logo {
  z-index:-1;
  position: absolute;
  top: 10px;
  margin-left: 30px;
}

#fo #logo a img {
  float:left;
  margin:20px 0 0 0;
  width: 150px;
}

#fo #mobileLogo img {
  margin-top: 20px;
  width: 45%;
}
#fo #mobileLogo {
  top: 0px;
  width: 100%;
  display: none;
}

  /****************** MOBILE MENU **********************************************/
#fo nav ul { list-style:none; }

#fo nav ul li {
  display:block;
  float:left;
  padding:3px 15px;
}

#fo #mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  /*
  quanto segue per ovviare al fixed che inibise lo scorrimento del menu
  SEE http://stackoverflow.com/questions/29752882/cant-scroll-within-mobile-drop-down-nav
  https://www.google.it/search?q=mobile+menu+fixed+do+not+scroll&oq=mobile+menu+fixed+do+not+scroll&aqs=chrome..69i57.11162j0j1&sourceid=chrome&es_sm=122&ie=UTF-8
  */
  height: 100%;
  max-height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; /* mobile safari*/
}

#fo #mobileMenu ul li {
  display:block;
  color: #FFF;
  padding: 12px 0;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid #FDB41D;
}
#fo .green #mobileMenu ul li { background-color: #4B812F;}
#fo .blue #mobileMenu ul li { background-color: #4B812F;}

#fo #mobileMenu ul li a { color: #FDB41D; }
#fo .toggleMobile { display: none; }

  /****************** HORIZONTAL MENU **********************************************/
#fo #horizontalMenu {
  height:50px;
  margin-right: -100px;
  float: left;
  margin-top:25px;
}

#fo #horizontalMenu ul {
  position:absolute;
  z-index: 20;
  list-style:none;
  padding:0px;
  margin-right: 25px; /* da aumentare per far creare la seconda riga */
  left: 200px;     /* regola la distanza dal margine sinistro e dal logo */
}

#fo #horizontalMenu ul li {
  list-style:none;
  float:left;
  margin-left:7px;
  margin-bottom: 10px;
  width: 100px;
  padding:6px 6px;
  text-align:center;
}
#fo .green #horizontalMenu ul li { background:#4B812F; border: 1px solid #4B812F;}
#fo .blue #horizontalMenu ul li { background:#003366; border: 1px solid #003366;}

#fo #horizontalMenu ul li a {
  text-transform:uppercase;
  text-decoration:none;
  font-size:12px;
  color:#FFF;
  font-weight:bold;
  margin:0px;
}
#fo #horizontalMenu ul li:hover, #fo #horizontalMenu ul li.active {background: #FFF;}
#fo .green #horizontalMenu ul li:hover, #fo .green #horizontalMenu ul li.active {border: 1px solid #4B812F;}
#fo .blue  #horizontalMenu ul li:hover, #fo .blue #horizontalMenu ul li.active {border: 1px solid #003366;}

#fo .green #horizontalMenu ul li:hover, #fo .green #horizontalMenu ul li.active, #fo .green #horizontalMenu ul li a:hover, #fo .green #horizontalMenu ul li a.active {color: #4B812F;}
#fo .blue #horizontalMenu ul li:hover, #fo .blue #horizontalMenu ul li.active, #fo .blue #horizontalMenu ul li a:hover, #fo .blue #horizontalMenu ul li a.active {color: #003366;}

#fo .inline { display: inline; }

/****************** HEADER IMAGES **********************************************/
/*
#fo #headerImages div {float: right;margin-left: 30px;margin-top: 130px;}
#fo #headerImages .right img {width: 100px;position: absolute;right: 70px;z-index: -1;}
#fo #headerImages .left img {width: 120px;position: absolute;right: 240px;z-index: -1;}
*/
  /****************** TOPPER **********************************************/
#fo #topper { z-index: 50; }

  /****************** HOMEPAGE ICONS  **********************************************/
#fo .unborderedFrame { text-align: center; }
#fo .unborderedFrame .col-2 {
  width: 40%;
  display: inline-block;
  margin-left: 30px;
  min-height: 30px;
}
#fo .unborderedFrame .col-2 img {
  width: 90%;
  max-width: 90%;
}


  /****************** CONTENT **********************************************/
#fo #boxcontent {
  padding:0px 0 20px 10px;
  margin-bottom: 10px;
  float:left;
  
  max-width: 100%;
  min-width: 650px;
  min-height: 400px;
}

  /* BUTTONS */
#fo .button, #fo .buttonSelected, #fo .button:hover, #fo .buttonSelected:hover {
  padding:4px 7px;
  margin-left: 10px;
  text-decoration:none;
  border-radius:5px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
#fo .button,#fo .button a, #fo .buttonSelected:hover {
  border: 1px solid #FFF;
  color: #FFF;
  text-shadow:none;
}
#fo .green .button,#fo .green .button a, #fo .green .buttonSelected:hover {background-color: #4B812F;}
#fo .blue .button,#fo .blue .button a, #fo .blue .buttonSelected:hover {background-color: #003366;}
#fo .buttonSelected, #fo .button:hover {background:none #FFF;text-shadow:none;}
#fo .green .buttonSelected, #fo .green .button:hover {border:1px solid #4B812F;color: #4B812F;}
#fo .blue .buttonSelected, #fo .blue .button:hover {border:1px solid #003366;color: #003366;}

/****************** **********************************************/

  /* FOOTER */
#fo footer {height: 90px;/*position:relative;*/clear:both;}
#fo footer.green {border-top:1px solid #4B812F;}
#fo footer.blue {border-top:1px solid #003366;}

#fo #copyright {
  /*height: 55px;
  bottom:0px;*/
  position:absolute;
  width:100%;
}
#fo footer #copyright .wrapper {
  line-height: 16px;
  margin: 0 auto;
  max-width:960px;
  font-size:12px;
}

#fo #copyright .wrapper ul li{padding-left:8px;float:left;list-style: outside none none;}
#fo .green #copyright .wrapper ul li{ color: #4B812F;}
#fo .blue #copyright .wrapper ul li{ color: #003366;}
#fo #copyright .wrapper ul li:last-child{float:right;}
#fo .green #copyright .wrapper ul li:last-child{color:#4B812F;}
#fo .blue #copyright .wrapper ul li:last-child{color:#003366;}

  /* MISC */
#fo .clear  { clear:both; }
#fo .hidden { display: none; }

  /* #########################################################################################################################

  AGGIUNTE TEOROS... con quel che ne consegue

 ######################################################################################################################### */
#fo .absolute { position: absolute; }

  /****************** PAGE WRAPPER **********************************************/
#fo #pagewrap {
  width:auto;
  max-width:960px;
  margin: 0 auto;
}

  /* LIST AND SEARCH RESULTS */
#fo #boxcontent #ww4_list { padding: 10px; }

#fo #boxcontent #ww4_list h2 {
  margin: 15px 0px 15px 0px;
  font-size: 22px;
}

#fo #boxcontent #ww4_list img {
  float:left;
  margin: 0px 10px 5px 10px;
}

#fo #boxcontent #ww4_list img.shadow {
  width: 100%;
  max-width: 100%;
  height: auto;
}

  /* SCHEDA DOCUMENTO */
#fo #ww4_printFilter article img.mainImage {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: -65px;
  right: -35px;
  position: absolute;
}
#fo .green #ww4_printFilter article img.mainImage {border: 4px solid #4B812F;}
#fo .blue #ww4_printFilter article img.mainImage {border: 4px solid #003366;}

  /* SINGLE FILES */
#fo #ww4_printFilter article.editor .filesContainer { margin-top: 20px; }
#fo #ww4_printFilter article.editor .filesContainer .imgThumb {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 80px;
}

  /****************** DOCLIST **********************************************/
#fo #ww4_printFilter p {
  background: none;
  margin: 0px 0 10px 10px;
  padding: 0px;
  font-size: 14px;
  color: #000;
  font-weight: normal;
  line-height: 1.3em;
}

#fo #ww4_printFilter div.summary, #fo #ww4_printFilter div.summary p {
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3em;
}
#fo .green #ww4_printFilter div.summary, #fo .green #ww4_printFilter div.summary p {color: #4B812F;}
#fo .blue #ww4_printFilter div.summary, #fo .blue #ww4_printFilter div.summary p {color: #003366;}

#fo #ww4_printFilter p._code {padding: 10px !important;clear: both;width: 96%;}
#fo .green #ww4_printFilter p._code {background-color: rgba(0, 146, 69, 0.9);}
#fo .blue #ww4_printFilter p._code {background-color: rgba(0, 91, 183, 0.9);}

#fo #ww4_printFilter p._code code.js {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
  color: #FFF;
}

/***************** AUTO RESIZER INPUT *************************/
div.fake_form {
  background: red; /*#eee;*/
  line-height: 15px;
  border: 0;
  border-bottom: 1px dotted #888;
  color: #333;
  /*display: inline-block;*/
  display: none;
  max-width: 400px;
}

form input[type=text].inputted {
  color: #ff0000;
  border-bottom: 0;
  background: transparent;
}

/******************************************/

#fo #pagewrap .listBlock .textWrapper {
  width: 70%;
  float: left;
}

#fo #pagewrap .listBlock {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

#fo #pagewrap .listBlock p {
  float: left;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 0px;
  padding: 0;
  text-align: justify;
}

#fo #pagewrap .listBlock .description p {
  background: none repeat scroll 0 0 #F7F7F7;
  box-shadow: 1px 1px 5px #999;
  float: left;
  font-size: 12px;
  font-weight: normal;
  padding: 7px;
  text-align: justify;
  margin: 15px 0 0 0px;
  width: 97%;
  position: relative;
}

  /* SCHEDA */
#fo #ww4_printFilter h1.ww4 {  margin-top: -10px; }

#fo #ww4_printFilter h1.top-home {top: 40px; width: 900px; text-align: center}
#fo #ww4_printFilter div.top-home { top:100px;  width: 900px; text-align: center}
#fo #ww4_printFilter h1.top-home,#fo #ww4_printFilter div.top-home {position: absolute;}

#fo h1.ww4 {font-weight: normal;font-size: 34px;}
#fo .green h1.ww4 {color: #4B812F;}
#fo .blue h1.ww4 {color: #003366;}
#fo h1.ww4 { padding: 0px; }

  /* description */
#fo #pagewrap .listBlock .description, #fo #ww4_printFilter .description {
  height:auto;
  float:left;
  background:#FFF;
  margin:5px 0 0 0;
  width: 100%;
}

#fo #ww4_printFilter .description {
  background: none repeat scroll 0 0 #F7F7F7;
  box-shadow: 1px 1px 5px #999;
}

#fo #ww4_printFilter span.descriptionImage {
  float: left;
  margin: 10px 20px 10px 10px;
}

#fo .description p, #fo #ww4_printFilter .description p {
  font-size:14px;
  margin:10px;
  padding:5px 0px 5px 0px;
  color:#000;
  line-height:18px;
  overflow:hidden;
}

#fo .description p, #fo #ww4_printFilter .description p {
  float:left;
  text-align:justify;
}

#fo h3.galleryTitle {
  background: none;
  margin: 20px 0 20px ;
  font-size: 30px;
  font-weight: normal;
}

  /****************** LINKS LIST **********************************************/
  /* PHOTO GALLERY */
#fo #imagesGallery {
  
  display: table;
  margin: 0 auto;
}

#fo #imagesGallery .image {
  float: left;
  display: table-cell;
  background-color: #FFF;
  box-shadow: 1px 1px 5px #999;
  float: left;
  margin: 15px 15px 0 0;
  padding: 10px;
}

#fo #imagesGallery .image img { width: 125px; }

  /* DESCRIZIONE DOCUMENTO */
#fo .borderedFrame, #fo .unborderedFrame {
  float:left;
  padding:10px;
  max-width: 960px;
  min-width: 960px;
}
#fo .borderedFrame {
  background-color: white !important;
  box-shadow: 1px 1px 5px #999;
  margin:0px 0 50px 0;
}

#fo .borderedFrame h1, #fo .borderedFrame h2 {
  font-size:18px;
  float:left;
  margin:24px 10px 0 10px;
  padding:0px;
  font-weight:bold;
  width:100%;
}
#fo .green .borderedFrame h1, #fo .green .borderedFrame h2 {color:#4B812F;}
#fo .blue .borderedFrame h1, #fo .blue .borderedFrame h2 {color:#003366;}
#fo .borderedFrame h2 { font-size:14px !important; }

#fo #ww4_printFilter .borderedFrame p, #fo #ww4_printFilter .borderedFrame table {
  font-size:14px;
  color:#000;
  padding:0px;
  margin:10px;
}

#fo #ww4_printFilter .borderedFrame table {
  min-width: 50%;
  margin-right: auto;
  margin-left: auto;
}

#fo #ww4_printFilter .borderedFrame table td {
  border: 1px dotted #999;
  padding: 3px;
}

  /* Terms & Conditions */
#fo #ww4_printFilter .borderedFrame ul {
  clear: both;
  margin:0px 0px 0 10px;
  padding: 0px;
}

#fo #ww4_printFilter .borderedFrame ul li {
  list-style-type:disc;
  font-size:14px;
  margin:10px 10px 0 20px;
}


#fo #ww4_printFilter .filesContainer .singleDoc .borderedFrame img { max-width: 100%; }

  /* error page */
#fo #errorContainer {font-size: 22px;margin: 50px 0px 0px 30px;}
#fo .green #errorContainer {color: #4B812F;}
#fo .blue #errorContainer {color: #003366;}

#fo #boxcontent #ww4_list img.separator, #fo #ww4_printFilter .borderedFrame img.separator,  #fo #ww4_printFilter .borderedFrame img.shadow {
  max-width: 100%;
  width: 100%;
  float: left;
  margin: 0px 0px 10px 0px;;
}
  /****************** BUTTONS **********************************************/
#fo .buttons { clear: both; }

#fo .nextDoc, #fo .previousDoc {
  font-size: 120%;
  margin: 20px 0 40px 0;
  border: 1px solid #FFF;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
  padding: 5px;
}
#fo .green .nextDoc, #fo .green .previousDoc {background-color:#4B812F;}
#fo .blue .nextDoc, #fo .blue .previousDoc {background-color:#003366;}
#fo .nextDoc a, #fo .previousDoc a { color: #FFF;}
#fo .nextDoc { float: right; }
#fo .previousDoc { float: left; }

/* *************************************************************************
 ****************** EXERCISES **********************************************
 ************************************************************************* */
#fo .exerciseWrapper {
  /*overflow: auto;*/
  font-size:14px;
  color:#000;
  float:left;
  padding:0px;
  margin:0px;
  width: 100%;
}

  /* SALVATTORE - la chiamata al js deve essere prima della chiusura del body ==> inclusa in wp_footer */
#fo .exerciseWrapper[data-columns]::before { content: "2 .column.size-1of2"; }
  /* These are the classes that are going to be applied: */
#fo .column { float: left; }
#fo .size-1of2 {
  width: 50%;
  max-width: 650px;
}

#fo .exerciseWrapper .exercise {
  background-color: white;
  box-shadow: 1px 1px 5px #999;
  float: left;
  height: auto;
  margin: 30px 20px 0px 2px;
  min-height: 200px;
  min-width: 430px;
  padding: 10px;
  width: 430px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {
  margin: 0px;
  color: #EBE8C7;
  font-weight: bold;
  padding: 2px;
  text-align: center;
}
#fo .green #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {background-color: #009245;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {background-color: #005BB7;}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile img,
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer img {
  border-radius: 10px;
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8);
}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile { text-align: center; }
#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile img {
  width: 80%;
  margin-top: 10px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer img { margin-top: 5px; }

#fo .exerciseWrapper .exercise table { padding: 10px; }
#fo .exerciseWrapper .exercise .mbMiniPlayerBig table { padding: 0px; }  /* inline player */
#fo .exerciseWrapper .exercise .mbMiniPlayerBig table img { width: 30px; }  /* inline player */
#fo .exerciseWrapper .exercise table tr.alternateTrue, #fo .exerciseWrapper .exercise table tr.alternateFalse { height: 45px; }
#fo .exerciseWrapper .exercise table tr.alternateTrue { background-color: #ebebeb; }
#fo .exerciseWrapper .exercise table td { vertical-align: top; }
#fo #ww4_printFilter .exerciseWrapper .exercise p { margin-top: 2px; }
#fo .exerciseWrapper .exercise input[type="text"] {
  background-color: white;
  padding: 4px;
  border: 1px solid #CCCCCC;
  font-size: 10pt;
  width: 100px;
  max-width: 380px;
}

#fo .exerciseWrapper .exercise .ok {
  color: #53C21A;
  font-weight: bold;
}

#fo .exerciseWrapper .exercise .ko {
  color: #C20000;
  font-weight: bold;
}

#fo .exerciseWrapper .exercise .background-ok { background-color: #53C21A; }
#fo .exerciseWrapper .exercise .background-ko { background-color: #C20000; }

#fo .exerciseWrapper .exercise td.imageRecognition input { width: 100%; }

/* OPT_SENTENCE_COMPLETION starts */
  /* Main content area */
#fo #ww4_printFilter .exerciseWrapper .exercise .generalContainer {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

#fo .exerciseWrapper .exercise img.draggableImage { width: 50%; }
/*#fo .exerciseWrapper .exercise table tr td span:not(.button),*/
/*#fo .exerciseWrapper .exercise table tr td span:not(.buttonSelected) { font-size: 90%; font-style: italic; }*/
#fo .exerciseWrapper .exercise table tr td span:not(.button):not(.buttonSelected) { font-size: 90%; font-style: italic; }




#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer,
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer {
  padding: 5px;
  /* display: inline-table; */  
  display: inline-block;        
  vertical-align: bottom;
  margin-top: 10px;
}

  /* Individual cards and slots */
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer div,
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div {
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 10px 0px;
  background: #fff;
  /*width: 115px; *//*  todo responsive */
  position: relative;
  height: 100px;
  /*max-height: 100px;*/
  /*overflow: auto;*/
  text-align: center;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer div p,
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div p ,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div p {
  font-size: 12px;
  width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

  /* Slots for final card positions */
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
#fo .green #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {background: #009245;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {background: #005BB7;}

#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div.hovered { background: #aaa; }
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div { border-style: dashed; }

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div { background: #666; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer .ui-draggable p {
  color: #fff;
  text-shadow: 0 0 3px #000;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.ui-draggable{ cursor: pointer; }
#fo .exerciseWrapper .exercise .draggableContainer div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.correct { background: #DAF28C; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.correct p {
  color: #000000;
  text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.uncorrect { background: #EF8B8B; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.uncorrect p {
  color: #FFF;
  text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.incorrect {
  background: #FFD4CC;
  color: #000000;
  text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {font-size: 80%;}
#fo .green #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {color: #009245;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {color: #005BB7;}
/* OPT_SENTENCE_COMPLETION end */

#fo #quizzesList { padding-top: 10px; clear: both;}
#fo #quizzesList h2 { padding-top: 20px; }

  /* controlla le innerlabel in mozilla */
*::-moz-placeholder {
  color: #000;
  font-weight: 300;
}

  /* hidden text */
#fo .hiddentext {
  width: 100%;
  height: 100%;
}

#fo .hiddentext h1 {
  padding: 0px 0 20px 0;
  text-align: center;
}

#fo .monospace {
  font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;
  /*font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;*/
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px !important;
}

#fo .right { float: right; }
#fo .buttonhide {cursor: pointer;border-radius: 10px;padding: 8px;}
#fo .green .buttonhide {border: 1px solid #4B812F;}
#fo .blue .buttonhide {border: 1px solid #003366;}

  /* FIELDS */
#fo .userCell {
  width: 45%;
  display: table-cell;
  padding: 0 30px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}

#fo .left { text-align: left; }

#fo .userMiddleCell {
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#fo .userMiddleCell span {
  background-image: url("/applications/webwork/site_cimbri/media/arrowRight.png");
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  width: 40px;
}

#fo .exerciseWrapper  textarea.userInput {
  /*height: 100px !important;*/
  min-height: 100px;
  border: 1px solid #8E8E8E;
  border-radius: 10px;
  font-size: 18px;
  padding: 10px 12px;
  width: 100%;
  -moz-box-sizing: border-box;
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
  color: #3C3C3C;
  display: block;
  vertical-align: top;
}

#fo .exerciseWrapper  input.userInput  {
  min-height: 25px;
  border: 1px solid #8E8E8E;
  border-radius: 2px;
  font-size: 14px;
  width: 100%;
  -moz-box-sizing: border-box;
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
  color: #3C3C3C;
  display: block;
}

#fo .green .exerciseWrapper textarea.userInput:focus, #fo .green input.userInput:focus { border: 2px solid #4B812F; }
#fo .blue .exerciseWrapper textarea.userInput:focus, #fo .blue input.userInput:focus { border: 2px solid #003366; }

#fo #questionButtons {
  margin: 10px;
  float: right;
}

#fo .inlineExercise .button {
  border: medium none;
  border-radius: 10px;
  color: #FFF;
  cursor: pointer;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 3px;
  float: right;
  margin: 7px 5px;
}
#fo .green .inlineExercise .button {background: none repeat scroll 0 0 #4B812F;}
#fo .blue .inlineExercise .button {background: none repeat scroll 0 0 #003366;}

  /* MULTIPLE CHOICE start */
#fo .multichoiceContainer { width: 100%; }
/*#fo .singlechoiceContainer { font-size: 80%; }*/

#fo .singlechoiceContainer {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  padding: 5px 0 5px 0;
  border: 1px dotted #AAA;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#fo .singlechoiceContainer .multiquestion {
  width: 50%;
  vertical-align: top;
  padding: 0 5px 0 10px;
  display: inline-block;
}

#fo .singlechoiceContainer .multianswer {
  width: 40%;
  padding-right: 10px;
  display: inline-block;
}

#fo .singlechoiceContainer .multianswer .singleanswer div {
  text-align: right;
  right: 0px;
}

#fo .singleanswer { font-style: italic; }
/* MULTIPLE CHOICE end */

  /****************** TINY IMAGES **********************************************/
#fo .floatRight {
  float: right;
  margin:0px 0px 0px 10px;
  width: 200px;
  max-width: 200px;
}
#fo .floatLeft {
  float: left;
  margin:0px 10px 0px 0px;
  width: 200px;
  max-width: 200px;
}
#fo .centered {
  float: none;
  display: block;
  margin:10px auto;
  width: 460px;
  max-width: 460px;
}
  /****************** DIVAS COOKIES **********************************************/
  /*main container*/
#fo .divascookies {  padding: 2px;}
#fo .green .divascookies {background: #4B812F none repeat scroll 0 0;}
#fo .blue .divascookies {background: #003366 none repeat scroll 0 0;}
  /*banner container*/
#fo .divascookies > .divascookies-banner-container { padding: 0px; }
  /*banner text*/
#fo .divascookies p.divascookies-banner-text { font-size: 12px; }
  /*link to the extended policy page*/
#fo span.divascookies-policy-link a {font-weight: bold;}
#fo .green span.divascookies-policy-link a {color: #009245;}
#fo .blue span.divascookies-policy-link a {color: #005BB7;}
  /*container of the accept button*/
#fo .divascookies-banner-container > .divascookies-accept-button-container {  }
  /*container of the accept button img*/
#fo .divascookies-accept-button-container > .divascookies-accept-button-img { }
  /*accept button text*/
#fo .divascookies-accept-button-container > .divascookies-accept-button-text {
  padding: 5px 7px;
  font-size: 12px;
}

  /* #########################################################################################################################

  MEDIA QUERIES FOR A RESPONSIVE LAYOUT

 ######################################################################################################################### */
  /**********************	iPads (portrait and landscape) *********************/
  /*
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  questo identifica solo dispositivi mobile min-device-width

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)  questo identifica solo dispositivi mobile in mode landscape
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  questo identifica solo dispositivi mobile in mode portrait
  */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

  #fo #logo a img { width: 50%; }

/****************** HORIZONTAL MENU **********************************************/
  #fo #horizontalMenu ul {
    margin-right: 15px; /* da aumentare per far creare la seconda riga */
    left: 220px;     /* regola la distanza dal margine sinistro e dal logo */
  }
  #fo #horizontalMenu ul li a { font-size:11px; }

  /* DESCRIZIONE DOCUMENTO */
  #fo .borderedFrame, #fo .unborderedFrame {
    max-width: none;
    min-width: 80%;
    width: 900px;  /* TODO fare meglio */
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  #fo #logo {
    margin-top: 0px;
    margin-left: 10%;
  }
}

  /**********************	Mobile Layout: 915px *********************
  * iPad modalità portrait
  */
@media (max-width: 915px) {
  /* gestione menu */
  #fo #mobileMenu { display: block; }
  #fo #mobileMenu ul {
    padding: 0px;
    margin: 0px;
  }

  #fo .toggleMobile {
    position: fixed;
    top: 10px;
    left: 10px;
    display: block;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 999;
  }
  #fo .toggleMobile span.menu1, #fo .toggleMobile span.menu2, #fo .toggleMobile span.menu3 {
    display: block;
    position: absolute;
    width: 40px;
    height: 8px;
    left: 0;
    background: #FDB41D;
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
  }
  #fo .toggleMobile span.menu1 { top: 0; }
  #fo .toggleMobile span.menu2 { top: 14px; }
  #fo .toggleMobile span.menu3 { top: 28px; }

  #fo .toggleMobile.active span.menu1 {
    top: 14px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
  }
  #fo .toggleMobile.active span.menu2 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
  }
  #fo .toggleMobile.active span.menu3 {
    opacity: 0;
    -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
  }

  #fo .headerContainer { z-index: -1; }
/*  #fo #headerImages div { margin-top: 30px; }
  #fo #headerImages .left img { right: 210px; }*/

  #fo #horizontalMenu { display:none; }
  /* fine gestione menu */

  #fo #ww4_printFilter h1.top-home, #fo #ww4_printFilter div.top-home { width: 700px; }

  #fo #boxcontent {
    /*width:100%;*/
    padding:10px 0 25px 0;
    margin:20px 10px 0px 50px;
    display:block;
  }

  #fo .borderedFrame, #fo .unborderedFrame {
    width: 95%; /* TODO fare meglio */
    margin: 0 0 10px;
  }
  /* PHOTO GALLERY */
  #fo #imagesGallery { width:100%; }
  #fo #imagesGallery .image { margin: 15px 5px 0 10px; }
  #fo #imagesGallery .image img { width: 130px; }

  #fo #quizzesList { clear: both; }
  #fo .exerciseWrapper .exercise { width: 100%; } /* TODO fare meglio */

  #fo .editor h1 { font-size: 30px; }

  #fo #ww4_printFilter article.editor h2 { font-size: 18px; }
  #fo #ww4_printFilter article img.mainImage {
    width: 200px;
    border: none;
    border-radius: 50%;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
  }

  #fo input { padding:4px;font-size:14px;}
  #fo input[type="submit"] { padding: 1px 14px; }
  #fo #copyright .wrapper ul li:last-child{ margin-right: 20px; }

  #fo .hideable { display: none }
  #fo .line-break { display: block; }

  /* exercises */
  #fo .exerciseWrapper .exercise { min-width: 580px; }

  /* SALVATTORE - la chiamata al js deve essere prima della chiusura del body ==> inclusa in wp_footer */
  #fo .exerciseWrapper[data-columns]::before { content: "1 .column.size-1of1"; }
  /* These are the classes that are going to be applied: */
  #fo .column { float: left; }
  #fo .size-1of1 {
    max-width: 650px;
    width: 100%;
    margin-left: 10px;
  }

  #fo .nextDoc { margin-right: 20px; }
}

  /**********************	Mobile Layout: 765px (landscape) **********************/
@media (max-width: 765px) {
  #fo #logo {
    top: 10px;
    margin-left: 60px;
    text-align: center;
  }
  #fo #logo a img {
    width: 150px;
    margin:0px;
  }

  /* #fo #headerImages div { margin-top: 20px; }
  #fo #headerImages .right img {position: relative;right: 50px;}
  #fo #headerImages .left img {position: relative;right: 50px;} */
  #fo br.clear  { display: none; } /* teoros added */
  #fo #topper img{
    width: 80%;
    float: right;
  }

  #fo .desktopContainer {
    height:1px;
    top: -1500px;
  }
  #fo header { height:180px; }

  #fo #horizontalMenu {
    right: auto;
    bottom: auto;
    left: 50%;
    top:100px;
    margin-left: -184px;
  }

  #fo #ww4_printFilter h1.top-home, #fo #ww4_printFilter div.top-home { width: 400px;}

  #fo #boxcontent {
    margin:0px 10px 0px 10px;
    width: auto;
    min-width: 0;
  }
  #fo #ww4_printFilter h1.top-home {left: 240px;}
  #fo #ww4_printFilter div.top-home { left:240px; }

  /* PHOTO GALLERY */
  #fo #imagesGallery .image img { max-width: 90px; }
  #fo #imagesGallery .image { margin: 15px 10px 0 0; }

  /* CONTENT */
  #fo #pagewrap .listBlock .textWrapper{ width: 60%; }
  #fo .borderedFrame, #fo .unborderedFrame {
    max-width: 95%;
    min-width: 95%;
  }

  #fo #ww4_printFilter p._code { width: 94%; }

  #fo .size-1of1 { margin-left: 0px; }
  #fo .exerciseWrapper .exercise { width: 95%; } /* TODO fare meglio */

  /* FOOTER */
  #fo footer {
    height: 70px;
    position:relative;
    clear:both;
  }

  #fo footer .wrapper { margin: 0 auto; }

  #fo #copyright { height: 80%; }

  #fo footer #copyright .wrapper {
    font-size: 12px;
    line-height: 14px;
    padding-left: 10px;
    margin: 0 auto;
  }

  #fo #copyright .wrapper ul li:last-child{ float:left; }
  #fo .nextDoc { margin-right:5px; }
}

  /**********************	Mobile Layout: 525px **********************/
  /*@media (min-width: 500px) and (max-width: 525px) { } */

  /**********************	Mobile Layout: 500px (portrait) **********************/
@media (max-width: 500px) {
  #fo header { text-align: center; }

  /****************** HEADER IMAGES **********************************************/
  #fo .headerContainer {
    top:0px;
    position: absolute;
    width: 100%;
  }

  /* #fo #headerImages div {float: none;margin-left: 0px;margin-top: 60px;}
  #fo #headerImages .right {float: right;margin-right: 10px;}
  #fo #headerImages .right img {width: 70px;right: 0px;}
  #fo #headerImages .left {float: left;margin-left: 10px;}
  #fo #headerImages .left img {width:80px;right: 0px;} */
  /****************** fine HEADER IMAGES **********************************************/
  #fo #ww4_printFilter h1.ww4 {font-size: 32px;}
  #fo #ww4_printFilter h1.top-home {left: 0px;top:0px;position:inherit;}
  #fo #ww4_printFilter div.top-home { left: 15px;top: 250px; margin-bottom: 50px; position:inherit;}
  #fo #ww4_printFilter h1.top-home, #fo #ww4_printFilter div.top-home { width: 100%;}

  #fo #boxcontent { width: 90%; }
  #fo .unborderedFrame { max-width: 95%;min-width: 95%;}
  #fo .unborderedFrame .col-2 {display: block;width: 90%;}

  #fo input { width:auto; }

  #fo header {margin: 0 auto 20px auto;}
  #fo header h1 { font-size:40px; }
  #fo header p {
    margin-left: 60px;
    font-size:14px;
  }

  /* aggiunte teoros */
  #fo #logo { display:none; }
  #fo #mobileLogo { display:inline; }

  /*#fo #pagewrap { margin-bottom: 70px; }*/
  #fo .breakline { display: block !important; }

  #fo #boxcontent { margin: 0px 10px 0px 10px; }

  /* CONTENT */
  #fo #ww4_printFilter article img.mainImage {
    width: 100px;
    height: 100px;
    top: 0px;
    float: left;
    position: relative;
  }

  #fo #ww4_printFilter p._code { width: 88%; }

  /* lista in homepage */
  #fo #boxcontent #ww4_list div.homeMainImg{ text-align: center }
  #fo #boxcontent #ww4_list div.homeMainImg img { float: none; }

  #fo #pagewrap .hiddenMobile { display: none; }
  #fo #pagewrap .hidden {
    display: block;
    visibility: visible;
  }

  #fo #pagewrap .listBlock .textWrapper{ width: 100%; }

  /* PHOTO GALLERY */
  #fo #imagesGallery .image {margin: 15px 5px 0 0;}
  #fo #imagesGallery .image img { max-width: 125px; }

  /*#fo #ww4_printFilter article.editor h1, #fo #ww4_printFilter article.editor h2 { margin-right: 0px; }*/
  #fo .editor h1, #fo .editor h2 { margin-right: 0px; }

  #fo footer { height: 110px; }
  #fo footer .wrapper { width:auto; }
  #fo #copyright { height: 90%; }

  /**/
  #fo #divloaded { display: none; }

  /* ***************** EXERCISES **********************************************/
  #fo .exerciseWrapper {
    overflow: visible;
    margin: 0px;
  }
  #fo .exerciseWrapper .exercise {
    margin: 10px 0px 0px 0px;
    width:94%;
    min-width:94%;
    max-width:94%;
  }
  #fo .exerciseWrapper .exercise input[type="text"] {
    width: 70px;
    max-width: 250px;
  }

  #fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer div,
  #fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div,
  #fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div { width: 80px; }

  #fo .singlechoiceContainer .multiquestion { width: 45%; }
  #fo .singlechoiceContainer .multianswer { width: 40%; }

  #fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help { font-size: 60%; }
  #fo .nextDoc { margin-right:0px; }
}