/* http://www.responsivegridsystem.com/calculator/ */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 800px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}



/* buttons, input */
input[type=text], textarea {padding:5px; border:2px solid #ccc; -webkit-border-radius: 5px; border-radius: 5px; }
input[type=text]:focus {border-color:#333; }
input[type=submit], button {padding:5px 15px; background:peru; border:0 none; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; }
	
	
	
	
body {font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif; margin: 0px;}
.center {text-align: center;}
header {padding: 5px 10px;}
footer {clear: both; padding-top: 40px; text-align:center;}


fieldset {border: 1px solid #ccc; padding: 5px;}
fieldset fieldset {margin-bottom: 10px; border-style: dashed;}


.action {cursor: pointer; color: #88bb00;}
.invalid {cursor: default; color: #999;}
a {color: #88bb00;}
.info {cursor: help;}

dl { margin: 0; }
dt { background-color: #e3e8dc; border-left: 5px solid #e3e8dc; padding: 10px 10px; list-style-type: none; margin: 2px 0; }
dt:hover {opacity: 0.7;}
dd { background-color: #f7f7f7; border-left: 5px solid #e3e8dc; padding: 5px 10px; list-style-type: none; margin: 2px 0; }
#selectedItems dt {border-left: 10px solid #e3e8dc;  }
dd:hover {opacity: 0.7;}
dt.selected { background-color: #88bb00; color: #fff; }
dt.selected .action { color: #455b00; }

i.fa.right { color: #88bb00; float:right; cursor: pointer; }
i.fa-globe {color: #bfcda9;}

#availableItems dd, #selectedItems dd {font-size: 95%; }
#availableItems dd{ border-bottom: 1px solid #e3e8dc; padding-bottom: 10px;}
#availableOptions dd {font-size: 95%; text-align: left;}
#availableOptions dd span.description, #selectedItems dd span.description {font-size: 0.8em; display:block; text-align:left; padding-top: 5px; color: #666;}
#availableOptions dd.selected {background-color: #e8f2da;}
#availableItems dd span.name,  #availableItems dt span.name, #selectedItems dt span.name, #availableOptions dt span.name {font-weight: bold; color: #455b00;}
#availableItems dd span.name {font-size: 1.1em;}

span.action.right {float: right; padding-left: 5px;}
#selectedItems span.action {font-size: 95%;}
#availableItems span.action.right {padding-left: 10px;}
.optionType {font-weight: bold; color: #455b00; size: 1.1em; padding: 10px 10px; background-color: #bfcda9; margin-bottom: 2px;}
.optionType i.fa{color: #455b00; }


#availableItems .selected_item_properties {display:block; padding-top: 5px; padding-left: 5px; font-size: 95%; color: #787878;}
#selectedItems .selected_item_properties {display:block; padding: 5px; border-left: 10px solid #e3e8dc;}
#selectedItems .selected_item_properties span {line-height: 1.4em;}

#availableItems .prop_name, #selectedItems .prop_name { font-size: 0.8em; font-style: normal; font-variant: inherit; font-variant-caps: inherit; text-transform: uppercase; }
#selectedItems .prop_name { font-size: 0.9em; text-transform: uppercase; }
#availableItems .prop_value, #selectedItems .prop_value { border: 0px solid #999; padding: 1px 1px; font-size: 1.1em; font-weight: bold; margin-right: 12px;}

.sectionSaveLoad {margin-top: 20px; text-align: right;}
.sectionSaveLoad .saveData {padding: 5px; background-color: #eddfaf;}
.sectionSaveLoad button.disabled {opacity: 0.5; filter: alpha(opacity=50); zoom: 1; cursor: no-drop;}
.sectionSaveLoad .loadData {padding: 5px; background-color: #e5d599;}


@media only screen and (max-width: 800px) {
}

dl.itemContainer {
	margin: 0;
    border: 1px solid #bfcda9;
    margin-bottom: 5px;
}
dl.itemContainer dt {margin-top: 0px}