
div[id^="position-"] {
    position: absolute;
    width: 240px;
    height: 115px;
    font-weight: normal;
}

#position-1 {
    top: 0px;
    left: 50%;
    margin: 0px 0px 0px -120px;
}

#position-2 {
    top: 130px;
    left: 49%;
    margin: 0px 0px 0px -240px;
}

#position-3 {
    top: 130px;
    right: 49%;
    margin: 0px -240px 0px 0px;
}

#position-4 {
    top: 265px;
    left: 0;
    margin: 0px 0px 0px 5px;
}

#position-5 {
    top: 265px;
    left: 50%;
    margin: 0px 0px 0px -120px;
}

#position-6 {
    top: 265px;
    right: 0%;
    margin: 0px 5px 0px 0px;
}

#position-7 {
    top: 400px;
    left: 49%;
    margin: 0px 0px 0px -240px;
}

#position-8 {
    top: 400px;
    right: 49%;
    margin: 0px -240px 0px 0px;
}

#position-9 {
    top: 532px;
     left: 50%;
    margin: 0px 0px 0px -120px;
}

#order div, #sortingSortable div {
    height: 110px;
    box-sizing: border-box;
}

#sortingSortable {
    margin: 20px auto 0px auto;
    max-width: 768px;
    position: relative;
}

#sortingSortable div {
	font-family: 'Open Sans', sans-serif;
    font-weight: normal;
	cursor: pointer;
    border: 1px solid #E87E04;
	color: #fff;
}
#sortingSortable div span {
     box-sizing: border-box;
	font-weight: normal;
	position: absolute;
    padding: 10px 17px 0px 17px;
	left: 0;
	top: 0;
	width: 100%;
	color: #000;
	text-align: center;
	z-index: 5;
    font-size: 18px;
    font-weight: bold;
    background-color: #E87E04;
    color: #FFF;
    height: 108px;
}
#sortingSortable div {
	list-style: none;
	
}
#sortingSortable div.drop-hover .element {
	opacity: .7;
}
.element.being-dragged {
	background: #D35400;
    color: #FFF !important;
	z-index: 6;
	-webkit-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
	-moz-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
	box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
}
#order div {
	font-weight: bold;
	background-color: #935347;
	color: #fff;
	border-bottom: 1px dashed #ffffff!important;
}
.ui-sortable-handle {
/* border: 1px dashed #309091;*/
}
.ui-sortable-helper {
}
#activityButtons button {
	margin: 0 .5% 0 .5%;
	float: right;
}
#totalCorrectHolder {
	
}

#definition h2, #keyTerms h2{line-height:42px}
#endMsg{display:none}

@media only screen and (max-width: 560px) {
#activity {
	margin-left: 5%;
}
#order {
	width: 100%;
}
#sortingSortable {
	width: 100%;
}
#sortingSortable div, #order div {
	font-size: 0.9em;
}
}

/* ----------- Large Display ----------- */

@media screen and (max-width: 1920px) and (max-height: 1080px) {
/* Styles */
}

/* ----------- Laptop HiDPI screen ----------- */

@media screen and (max-width: 1440px) and (max-height: 900px) {
/* Styles */
}

/* ----------- Laptop ----------- */

@media screen and (max-width: 1366px) and (max-height: 768px) {
/* Styles */
#order div, #sortingSortable div, #sortingSortable div span {
	
}
#order div, #sortingSortable div {
	
}
#sortingSortable div span {
	
}
}

/* ----------- Laptop MDPI screen ----------- */

@media screen and (max-width: 1280px) and (max-height: 800px) {
/* Styles */
#order div, #sortingSortable div, #sortingSortable div span {
	
}
#order div, #sortingSortable div {
	
}
#sortingSortable div span {
	
}
}

/* ----------- iPad ----------- */

@media only screen and (max-device-width: 1024px) and (max-device-height: 768px) {
/* Styles */
h1 {
	font-size: 1.7em !important;
}
}

/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
/* Styles */
}
