@charset 'utf-8';
/* CSS Document */


/************* Sort Statments **************/


/*****************************************/
ul#selectableStatements {
  height: 25%;
  padding-top: 1% 0;
}

/*draggable image and text*/
.sortableItem
{
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    cursor: pointer;

    display: inline-block;

    width: 175px;
    min-height: 75px;
    margin: 1% 1% 1% 1%;
    padding: 5px;
    padding-bottom: 6px;

    text-align: center;
    text-decoration: none;
    text-indent: 0;

    color: #fff;
    border: 1px solid #1e90ff;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
            border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
            border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
            border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
            border-bottom-left-radius: 0;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.05, #fff), color-stop(1, #1e90ff) );
    background: -moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );
    background-color: #1e90ff;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
}

.sortableItem img
{
    width: 100%;
}
/*headers*/

h4.demand {
    height: 3%;
}

h4.demandcy {
    height: 6%;
}

/*first DragArea area*/
#limited
{
    margin-left: 3%;
}


/*all DragArea areas*/
#dragareaHolder
{
    position: relative;

    width: 100%;
    height: 60%;
    min-height: 20em;
}

.dragarea
{
    display: inline-block;
    float: left;

    width: 18%;
    height: 100%;
    margin: 1% auto;
    margin-right: .45%;
    text-align: center;

    
    background-color: #FFFFFF;
}

#selectableStatements
{
    text-align: center;
}



/* demand arrows start---------- */

.demand
{
    font-size: .6em;

    position: relative;

    display: inline-block;

    width: 16%;
    margin-top: 2%;
    margin-right: 0;
    padding: 1%;

    cursor: pointer;
    transition: background-color 1s;
    text-decoration: none;
    text-transform: uppercase;

    color: white;
    border: none;
    background: skyblue;
}

.demandcy
{
    font-size: .7em;

    position: relative;

    display: inline-block;

    width: 16%;
    margin-top: 2%;
    margin-right: 0;
    padding: 1%;

    cursor: pointer;
    transition: background-color 1s;
    text-decoration: none;
    text-transform: uppercase;

    color: white;
    border: none;
    background: skyblue;
}
.leftArrow
{
    margin-left: 3%;
}

.rightArrow:before,
.rightArrow:after
{
    position: absolute;
    right: -4%;

    width: 5%;
    height: 50%;

    content: '';

    background: inherit;
    box-shadow: -.2em 0 0 white;
}
.rightArrow:before
{
    top: 0;

    transform: skewX(30deg);
}
.rightArrow:after
{
    bottom: 0;

    transform: skewX(-30deg);
}

.leftArrow:before,
.leftArrow:after
{
    position: absolute;
    left: -4%;

    width: 5%;
    height: 50%;

    content: '';

    background: inherit;
    box-shadow: .2em 0 0 white;
}
.leftArrow:before
{
    top: 0;

    transform: skewX(-30deg);
}
.leftArrow:after
{
    bottom: 0;

    transform: skewX(30deg);
}


/*MEDIA QUERIES*/
@media only screen and (max-height: 650px) {
	ul#selectableStatements {
  height: 150px;
  
}
}