body, html, input, select, span {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
}

.clear {
    clear: both;
}

.container {
    position: relative;
    border: 1px black solid;
    width: 500px;
    margin: 10px;
    padding: 2em;
    border-radius: 5px;
    -moz-box-shadow:    2px 2px 3px 1px #999;
    -webkit-box-shadow: 2px 2px 3px 1px #999;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.container .sectionLabel {
    display: block;
    float: left;
    clear: left;
    width: 6em;
}

.container .section {
    display: block;
    float: left;
    width: 38.25em;
}


.container .title {
    margin: 2px 4px;
    float: right;
    font-weight: bold;
    text-transform: uppercase;
}
.container.debug {
    border-color: black;
    background-color: #ccc;
    filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc'); /* for IE */
    background:       -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); /* for webkit browsers */
    background:       -moz-linear-gradient(top,  #eeeeee,  #cccccc); /* for firefox 3.6+ */
}
.container.links {
    border-color: green;
    background-color: #cfc;
    filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeffee', endColorstr='#ddffdd'); /* for IE */
    background:       -webkit-gradient(linear, left top, left bottom, from(#eeffee), to(#ddffdd)); /* for webkit browsers */
    background:       -moz-linear-gradient(top,  #eeffee,  #ddffdd); /* for firefox 3.6+ */
}
.container.submit {
    background: #f5f5f5;
    border: 1px solid #ccc;
}
.output-row {
    position: relative;
}
.output-row .label {
    text-align: right;
    width: 70px;
}
.output-row .output {
    font-weight: bold;
    position: absolute;
    left: 80px;
    top: 0;
}
.indicator {
    display: inline-block;
    padding: 5px;
    position: absolute;
    top: 2px;
    right: 2px;
    border: #f99 1px solid;
    font-weight: bold;
    z-index: 9999;
    background-color: #fee;
}
.suggested-item {
    display: inline-block;
    text-align: center;
    font-weight: normal;
    margin: .25em;
    border: 1px solid #fed1a7;
    border-radius: 3px;
    padding: 4px;
    background: #fff4ed;
    color: #e46238;
    cursor: default;
}


.search-match {
    font-weight: bold;
}

/* Section Labels */

.sectionLabel {
    font-weight: 400;
    font-size: 1.2em;
}

/* Title Area Styles */
.titleContain {
    background: none;
    border: none;
    font-weight: 400;
    color: #333;
    font-size: 1.2em;
    cursor: default;
}

/* User Shared Area Styles */
.userContain {
    background: none;
    border: none;
    border-radius: 0;
    color: #333;
}

.userContain:hover {
    background: #e0e0e0;
}

.suggested-item img {
    height: 2em;
    width: auto;
    padding-top: .25em;
}

.suggested-item .name {
    position: relative;
    top: -.5em;
    margin: 0 .5em;
}

/* Grasp As Buttons */
.graspAsRadios {
    width: 100%;
}
.graspAsRadios label {
    width: 33.25%;
    padding: .45em 0;
    display: inline-block;
}


/* Grasp It Button */

button.graspIt {
    top: 0em;
    position: relative;
    margin: 1.5em 0 0;
    border: none;
    box-shadow: 0 1px 4px #E49886 inset, 0 1px 2px #aaa;
    border-radius: 4px;
    color: #fff;
    padding: .65em 1em;
    float: right;
    background: #6cab26;;
    background: -webkit-gradient(linear, left top, left bottom, from(#F16238), to(#D34532)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #F16238, #D34532); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #F16238, #D34532); /* FF3.6+ */
    background: -ms-linear-gradient(top, #F16238, #D34532); /* IE10 */
    background: -o-linear-gradient(top, #F16238, #D34532); /* Opera 11.10+ */
    background: linear-gradient(top, #F16238, #D34532); /* W3C */
}

button.graspIt:active {
    box-shadow: 0 .2em .25em #444 inset;
    background: #F16238;
}

/* Undo Deleted Button (Forget Exclusions)*/
.forgetExclusions {
    margin: 2.25em 0 0;
    position: relative;
    color: #F16238;
    font-weight: 400;
    background: none;
    border: 0;
    cursor: pointer;
    float: right;
}

/* Delete X */

.removeX {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    opacity: .2;
    filter:alpha(opacity=20);
    text-indent: -9999px;
    background: url('../img/icons/x.png') no-repeat;
    background-size: .7em .75em;
    width: .75em;
    height: .75em;
    cursor: pointer;
}

.userContain:hover > span.removeX {
    opacity: 1;
    filter:alpha(opacity=100)
}

.removeX2 {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    opacity: .2;
    filter:alpha(opacity=20);
    text-indent: -9999px;
    background: url('../img/icons/x.png') no-repeat;
    background-size: .7em .75em;
    background-position: center .35em;
    width: 1.5em;
    height: 1.3em;
    cursor: pointer;
}

.suggested-item:hover > .removeX2 {
    opacity: 1;
    filter:alpha(opacity=100)
}