body{
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
  background-color:#385B4F;
}
#footer{
  height:30px;
  vertical-align:middle;
  text-align:right;
  clear:both;
  padding-right:3px;
  background-color:#317082;
  margin-top:2px;
  width:790px;
}
#footer form{
  margin:0px;
  margin-top:2px;
}
#dhtmlgoodies_dragDropContainer{	/* Main container for this script */
  width:1000px;
  height:670px;
  border:1px solid #317082;
  background-color:#FFF;
  -moz-user-select: none;
  align-content: center;
  border-radius: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */
  margin-top:0px;
  margin-left:0px;
  margin-bottom:0px;
  padding:2px;
}

#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
  list-style-type:none;
  height:15px;
  background-color:#F9AF36;
  border:1px solid #000;
  padding:2px;
  margin-bottom:2px;
  cursor:pointer;
  font-size:13px;
  line-height:15px;
}

li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
  border:1px dotted #600;	
  background-color:#FFF;
}
  
#dhtmlgoodies_dragDropContainer ul li.correctAnswer{	/* Correctly moved item */
  background-color:green;
  color:#FFF;
}
#dhtmlgoodies_dragDropContainer ul li.wrongAnswer{	/* Item moved to wrong box */
  background-color:red;
  color:#FFF;
}


/* LEFT COLUMN CSS */
div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */
  
  float:left;
  padding-left:10px;
  padding-right:10px;
  
  /* CSS HACK */
  width: 180px;	/* IE 5.x */
  width/* */:/**/160px;	/* Other browsers */
  width: /**/160px;
      
}
#dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */
  height:520px;	

}
  
div#dhtmlgoodies_listOfItems div{
  border:1px solid #999;		
}
div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */
  margin-left:10px;	/* Space at the left of list - the arrow will be positioned there */
}
#dhtmlgoodies_listOfItems div p{	/* Heading above left column */
  margin:0px;	
  font-weight:bold;
  padding-left:12px;
  background-color:#4D6F7B;	
  color:#FFF;
  margin-bottom:5px;
}
/* END LEFT COLUMN CSS */

#dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
  background-color:#E2EBED;
  border:1px solid #385B4F;
}

/* Start main container CSS */

div#dhtmlgoodies_mainContainer{	/* Right column DIV */
  width:790px;
  float:left;	
}
#dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */
  float:left;
  margin-right:10px;
  margin-bottom:10px;
  margin-top:0px;
  border:1px solid #999;

  /* CSS HACK */
  width: 172px;	/* IE 5.x */
  width/* */:/**/170px;	/* Other browsers */
  width: /**/170px;
      
}
#dhtmlgoodies_mainContainer div ul{
  margin-left:10px;
}

#dhtmlgoodies_mainContainer div p{	/* Heading above small boxes */
  margin:0px;
  padding:0px;
  padding-left:12px;
  font-weight:bold;
  background-color:#4D6F7B;	
  color:#FFF;	
  margin-bottom:5px;
}

#dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */
  width:152px;
  height:80px;	
  border:0px;	
  margin-bottom:0px;
  overflow:hidden;
  
}

#dragContent{	/* Drag container */
  position:absolute;
  width:150px;
  height:15px;
  display:none;
  margin:0px;
  padding:0px;
  z-index:2000;
}

#dragDropIndicator{	/* DIV for the small arrow */
  position:absolute;
  width:7px;
  height:10px;
  display:none;
  z-index:1000;
  margin:0px;
  padding:0px;
}

#dhtmlgoodies_dragDropContainer{
  padding: 20px;
}
.items p {
  padding: 15px;
}
#allItems li{
  padding: 5px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin: 5px;
}

#dhtmlgoodies_dragDropContainer ul{
  margin-left: auto !important;
  margin-right: auto !important;
}
#dhtmlgoodies_mainContainer .Blockone p{
  padding: 15px;
}
#dhtmlgoodies_mainContainer .Blocktwo p{
  padding: 15px;
}
#dhtmlgoodies_mainContainer .Blockthree p{
  padding: 15px;
}
#dhtmlgoodies_mainContainer .Blockfour p{
  padding: 15px;
}
/*
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  width: 300px;
  height: 200px;
  text-align: center;
  
}
  */

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}
h1{
  font-size: 50px;
  margin-top: 70px;
  color: #D9D9D9;
}
/* Rounded border */
hr.round {
  border-top: 8px solid #F8B13A;
  border-radius: 5px;
  width: 40%;
}
.style1 {color: #FF0000}