表单的冻结行与冻结列防止行和列在表单的视图区域滚动, 并使用冻结线加以区分。表单的视图区域也因冻结线被划分多个行和列的视图区域。
你在一个表单中最多可以设置四种不同的冻结线。如此, 当前的视图区域将被分割为三个行区域和三个列区域。如下代码演示在一个表单中设置四种冻结线:
对于冻结行和列，SpreadJS提供了一个参数来控制 frozenRows 从顶部行开始显示，而不是默认从第0行开始显示，以及 frozenColumns 从左侧列开始显示，而不是默认从第0列开始显示。
针对冻结的尾行和尾列，spreadJS提供了一个参数来控制被冻结的尾行是否始终位于视图的底部，以及被冻结的尾列是否始终位于视图的右侧。当stickToEdge参数是false时，被冻结的尾行将随着视图滚动除非被冻结的数据有部分行不能被完全展示。另外，默认情况下, 尾行总是在视图的底部。 针对尾列也和上面一样。用法如以下代码所示：
你可以定制冻结线的颜色, 例如:
SpreadJS 提供了获取每一个视图区域信息的方法, 例如宽度, 高度, 顶行索引等等。
假设你在表单中设置了一个行冻结线与一个列冻结线。那么原先的视图将被分割为三个行视图, 这三个视图区域的索引分别是 0 , 1, 2。 然后你可以通过如下示例代码获取第二个行区域的相关信息:
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
spread.suspendPaint();
spread.fromJSON(data[0]);
var sheet = spread.getActiveSheet();
sheet.setRowCount(100);
sheet.frozenRowCount(4);
sheet.frozenColumnCount(3);
sheet.frozenTrailingRowCount(1, false);
sheet.frozenTrailingColumnCount(1, false);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.options.frozenlineColor = 'rgb(247, 167, 17)';
spread.resumePaint();
_getElementById('btnSetFrozenLine').addEventListener('click', function() {
if (_getElementById('rowCount').value) {
var rowCount = parseInt(_getElementById('rowCount').value), topRow = parseInt(_getElementById('topRow').value);
sheet.frozenRowCount(rowCount, topRow);
}
if (_getElementById('trailingRowCount').value) {
var trailingRowCount = parseInt(_getElementById('trailingRowCount').value);
var rowStickToEdge = _getElementById('rowStickToEdge').checked;
sheet.frozenTrailingRowCount(trailingRowCount, rowStickToEdge);
}
if (_getElementById('columnCount').value) {
var columnCount = parseInt(_getElementById('columnCount').value), leftColumn = parseInt(_getElementById('leftColumn').value);
sheet.frozenColumnCount(columnCount, leftColumn);
}
if (_getElementById('trailingColumnCount').value) {
var trailingColumnCount = parseInt(_getElementById('trailingColumnCount').value);
var columnStickToEdge = _getElementById('columnStickToEdge').checked;
sheet.frozenTrailingColumnCount(trailingColumnCount, columnStickToEdge);
}
});
};
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label class="option-label" for="rowCount">FrozenRowCount:</label>
<input type="text" id="rowCount" value="4" />
<label class="option-label" for="topRow">FrozenTopRow:</label>
<input type="text" id="topRow" value="0" />
</div>
<div class="option-row">
<label class="option-label" for="columnCount">FrozenColumnCount:</label>
<input type="text" id="columnCount" value="3" />
<label class="option-label" for="leftColumn">FrozenLeftColumn:</label>
<input type="text" id="leftColumn" value="0" />
</div>
<div class="option-row">
<label class="option-label" for="trailingRowCount">FrozenTrailingRowCount:</label>
<input type="text" id="trailingRowCount" value="1" />
<div>
<input type="checkbox" id="rowStickToEdge" />
<label for="rowStickToEdge">Stick to Edge</label>
</div>
</div>
<div class="option-row">
<label class="option-label" for="trailingColumnCount">FrozenTrailingColumnCount:</label>
<input type="text" id="trailingColumnCount" value="0" />
<div>
<input type="checkbox" id="columnStickToEdge" checked />
<label for="columnStickToEdge">Stick to Edge</label>
</div>
</div>
<div class="option-row">
<input type="button" value="Set" id="btnSetFrozenLine" />
</div>
</div>
</div>
</body>
</html>
var data = [{
"version": "14.0.5",
"sheetCount": 1,
"tabStripRatio": 0.6,
"customList": [],
"activeSheetIndex": 0,
"sheets": {
"Sheet1": {
"name": "Sheet1",
"isSelected": true,
"rowCount": 33,
"columnCount": 11,
"activeRow": 5,
"activeCol": 3,
"theme": {
"name": "Office",
"themeColor": {
"name": "Office",
"background1": {
"a": 255,
"r": 255,
"g": 255,
"b": 255
},
"background2": {
"a": 255,
"r": 231,
"g": 230,
"b": 230
},
"text1": {
"a": 255,
"r": 0,
"g": 0,
"b": 0
},
"text2": {
"a": 255,
"r": 68,
"g": 84,
"b": 106
},
"accent1": {
"a": 255,
"r": 68,
"g": 114,
"b": 196
},
"accent2": {
"a": 255,
"r": 237,
"g": 125,
"b": 49
},
"accent3": {
"a": 255,
"r": 165,
"g": 165,
"b": 165
},
"accent4": {
"a": 255,
"r": 255,
"g": 192,
"b": 0
},
"accent5": {
"a": 255,
"r": 91,
"g": 155,
"b": 213
},
"accent6": {
"a": 255,
"r": 112,
"g": 173,
"b": 71
},
"hyperlink": {
"a": 255,
"r": 5,
"g": 99,
"b": 193
},
"followedHyperlink": {
"a": 255,
"r": 149,
"g": 79,
"b": 114
}
},
"headingFont": "Calibri Light",
"bodyFont": "Calibri"
},
"data": {
"dataTable": {
"2": {
"2": {
"value": "Weather Card",
"style": "__builtInStyle17"
},
"3": {
"style": "__builtInStyle17"
},
"4": {
"style": "__builtInStyle17"
},
"5": {
"style": "__builtInStyle17"
},
"6": {
"style": "__builtInStyle17"
},
"7": {
"style": "__builtInStyle17"
},
"8": {
"style": "__builtInStyle17"
},
"9": {
"style": "__builtInStyle17"
},
"10": {
"style": "__builtInStyle17"
}
},
"3": {
"2": {
"value": "Date",
"style": "__builtInStyle5"
},
"3": {
"value": "Max Temperature (F)",
"style": "__builtInStyle10"
},
"4": {
"value": "Min Temperature (F)",
"style": "__builtInStyle2"
},
"5": {
"value": "Precipitation",
"style": "__builtInStyle2"
},
"6": {
"value": "Cloud Cover",
"style": "__builtInStyle2"
},
"7": {
"value": "Visiblity (miles)",
"style": "__builtInStyle2"
},
"8": {
"value": "Wind (mph)",
"style": "__builtInStyle2"
},
"9": {
"value": "Humidity",
"style": "__builtInStyle2"
},
"10": {
"value": "Forecast",
"style": "__builtInStyle2"
}
},
"4": {
"2": {
"value": "/OADate(44228)/",
"style": "__builtInStyle6"
},
"3": {
"value": 19,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.8,
"style": "__builtInStyle14"
},
"6": {
"value": 1,
"style": "__builtInStyle16"
},
"7": {
"value": 10,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.76,
"style": "__builtInStyle14"
},
"10": {
"value": "Rainy",
"style": "__builtInStyle3"
}
},
"5": {
"2": {
"value": "/OADate(44229)/",
"style": "__builtInStyle6"
},
"3": {
"value": 23,
"style": "__builtInStyle12"
},
"4": {
"value": 15,
"style": "__builtInStyle12"
},
"5": {
"value": 0.2,
"style": "__builtInStyle14"
},
"6": {
"value": 0.98,
"style": "__builtInStyle16"
},
"7": {
"value": 13,
"style": "__builtInStyle8"
},
"8": {
"value": 19,
"style": "__builtInStyle8"
},
"9": {
"value": 0.62,
"style": "__builtInStyle14"
},
"10": {
"value": "Mostly Cloudy",
"style": "__builtInStyle3"
}
},
"6": {
"2": {
"value": "/OADate(44230)/",
"style": "__builtInStyle6"
},
"3": {
"value": 24,
"style": "__builtInStyle12"
},
"4": {
"value": 14,
"style": "__builtInStyle12"
},
"5": {
"value": 0.9,
"style": "__builtInStyle14"
},
"6": {
"value": 0.99,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 14,
"style": "__builtInStyle8"
},
"9": {
"value": 0.77,
"style": "__builtInStyle14"
},
"10": {
"value": "Thunderstorm",
"style": "__builtInStyle3"
}
},
"7": {
"2": {
"value": "/OADate(44231)/",
"style": "__builtInStyle6"
},
"3": {
"value": 24,
"style": "__builtInStyle12"
},
"4": {
"value": 14,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.74,
"style": "__builtInStyle16"
},
"7": {
"value": 14,
"style": "__builtInStyle8"
},
"8": {
"value": 26,
"style": "__builtInStyle8"
},
"9": {
"value": 0.56,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"8": {
"2": {
"value": "/OADate(44232)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.82,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.57,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"9": {
"2": {
"value": "/OADate(44233)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.2,
"style": "__builtInStyle14"
},
"6": {
"value": 0.88,
"style": "__builtInStyle16"
},
"7": {
"value": 9,
"style": "__builtInStyle8"
},
"8": {
"value": 16,
"style": "__builtInStyle8"
},
"9": {
"value": 0.71,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"10": {
"2": {
"value": "/OADate(44234)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.82,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.57,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"11": {
"2": {
"value": "/OADate(44235)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0.01,
"style": "__builtInStyle16"
},
"7": {
"value": 18,
"style": "__builtInStyle8"
},
"8": {
"value": 19,
"style": "__builtInStyle8"
},
"9": {
"value": 0.53,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"12": {
"2": {
"value": "/OADate(44236)/",
"style": "__builtInStyle6"
},
"3": {
"value": 29,
"style": "__builtInStyle12"
},
"4": {
"value": 21,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0.01,
"style": "__builtInStyle16"
},
"7": {
"value": 19,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.59,
"style": "__builtInStyle14"
},
"10": {
"value": "Sunny",
"style": "__builtInStyle3"
}
},
"13": {
"2": {
"value": "/OADate(44237)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0.01,
"style": "__builtInStyle16"
},
"7": {
"value": 18,
"style": "__builtInStyle8"
},
"8": {
"value": 19,
"style": "__builtInStyle8"
},
"9": {
"value": 0.53,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"14": {
"2": {
"value": "/OADate(44238)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.63,
"style": "__builtInStyle16"
},
"7": {
"value": 13,
"style": "__builtInStyle8"
},
"8": {
"value": 15,
"style": "__builtInStyle8"
},
"9": {
"value": 0.6,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"15": {
"2": {
"value": "/OADate(44239)/",
"style": "__builtInStyle6"
},
"3": {
"value": 24,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.4,
"style": "__builtInStyle14"
},
"6": {
"value": 0.79,
"style": "__builtInStyle16"
},
"7": {
"value": 15,
"style": "__builtInStyle8"
},
"8": {
"value": 17,
"style": "__builtInStyle8"
},
"9": {
"value": 0.66,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"16": {
"2": {
"value": "/OADate(44240)/",
"style": "__builtInStyle6"
},
"3": {
"value": 25,
"style": "__builtInStyle12"
},
"4": {
"value": 16,
"style": "__builtInStyle12"
},
"5": {
"value": 0.7,
"style": "__builtInStyle14"
},
"6": {
"value": 0.99,
"style": "__builtInStyle16"
},
"7": {
"value": 13,
"style": "__builtInStyle8"
},
"8": {
"value": 14,
"style": "__builtInStyle8"
},
"9": {
"value": 0.72,
"style": "__builtInStyle14"
},
"10": {
"value": "Rainy",
"style": "__builtInStyle3"
}
},
"17": {
"2": {
"value": "/OADate(44241)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.93,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.57,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"18": {
"2": {
"value": "/OADate(44242)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.2,
"style": "__builtInStyle14"
},
"6": {
"value": 0.69,
"style": "__builtInStyle16"
},
"7": {
"value": 14,
"style": "__builtInStyle8"
},
"8": {
"value": 16,
"style": "__builtInStyle8"
},
"9": {
"value": 0.71,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"19": {
"2": {
"value": "/OADate(44243)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.04,
"style": "__builtInStyle16"
},
"7": {
"value": 20,
"style": "__builtInStyle8"
},
"8": {
"value": 18,
"style": "__builtInStyle8"
},
"9": {
"value": 0.6,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"20": {
"2": {
"value": "/OADate(44244)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0.05,
"style": "__builtInStyle16"
},
"7": {
"value": 20,
"style": "__builtInStyle8"
},
"8": {
"value": 19,
"style": "__builtInStyle8"
},
"9": {
"value": 0.53,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"21": {
"2": {
"value": "/OADate(44245)/",
"style": "__builtInStyle6"
},
"3": {
"value": 29,
"style": "__builtInStyle12"
},
"4": {
"value": 21,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0,
"style": "__builtInStyle16"
},
"7": {
"value": 21,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.59,
"style": "__builtInStyle14"
},
"10": {
"value": "Sunny",
"style": "__builtInStyle3"
}
},
"22": {
"2": {
"value": "/OADate(44246)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.56,
"style": "__builtInStyle16"
},
"7": {
"value": 10,
"style": "__builtInStyle8"
},
"8": {
"value": 15,
"style": "__builtInStyle8"
},
"9": {
"value": 0.6,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"23": {
"2": {
"value": "/OADate(44247)/",
"style": "__builtInStyle6"
},
"3": {
"value": 24,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.4,
"style": "__builtInStyle14"
},
"6": {
"value": 0.78,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 17,
"style": "__builtInStyle8"
},
"9": {
"value": 0.66,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"24": {
"2": {
"value": "/OADate(44248)/",
"style": "__builtInStyle6"
},
"3": {
"value": 25,
"style": "__builtInStyle12"
},
"4": {
"value": 16,
"style": "__builtInStyle12"
},
"5": {
"value": 0.7,
"style": "__builtInStyle14"
},
"6": {
"value": 0.99,
"style": "__builtInStyle16"
},
"7": {
"value": 13,
"style": "__builtInStyle8"
},
"8": {
"value": 14,
"style": "__builtInStyle8"
},
"9": {
"value": 0.72,
"style": "__builtInStyle14"
},
"10": {
"value": "Rainy",
"style": "__builtInStyle3"
}
},
"25": {
"2": {
"value": "/OADate(44249)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.93,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.57,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"26": {
"2": {
"value": "/OADate(44250)/",
"style": "__builtInStyle6"
},
"3": {
"value": 27,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.2,
"style": "__builtInStyle14"
},
"6": {
"value": 0.69,
"style": "__builtInStyle16"
},
"7": {
"value": 14,
"style": "__builtInStyle8"
},
"8": {
"value": 16,
"style": "__builtInStyle8"
},
"9": {
"value": 0.71,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"27": {
"2": {
"value": "/OADate(44251)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.04,
"style": "__builtInStyle16"
},
"7": {
"value": 20,
"style": "__builtInStyle8"
},
"8": {
"value": 18,
"style": "__builtInStyle8"
},
"9": {
"value": 0.6,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"28": {
"2": {
"value": "/OADate(44252)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 17,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0.05,
"style": "__builtInStyle16"
},
"7": {
"value": 20,
"style": "__builtInStyle8"
},
"8": {
"value": 19,
"style": "__builtInStyle8"
},
"9": {
"value": 0.53,
"style": "__builtInStyle14"
},
"10": {
"value": "Most Sunny",
"style": "__builtInStyle3"
}
},
"29": {
"2": {
"value": "/OADate(44253)/",
"style": "__builtInStyle6"
},
"3": {
"value": 29,
"style": "__builtInStyle12"
},
"4": {
"value": 21,
"style": "__builtInStyle12"
},
"5": {
"value": 0,
"style": "__builtInStyle14"
},
"6": {
"value": 0,
"style": "__builtInStyle16"
},
"7": {
"value": 21,
"style": "__builtInStyle8"
},
"8": {
"value": 11,
"style": "__builtInStyle8"
},
"9": {
"value": 0.59,
"style": "__builtInStyle14"
},
"10": {
"value": "Sunny",
"style": "__builtInStyle3"
}
},
"30": {
"2": {
"value": "/OADate(44254)/",
"style": "__builtInStyle6"
},
"3": {
"value": 28,
"style": "__builtInStyle12"
},
"4": {
"value": 19,
"style": "__builtInStyle12"
},
"5": {
"value": 0.1,
"style": "__builtInStyle14"
},
"6": {
"value": 0.56,
"style": "__builtInStyle16"
},
"7": {
"value": 10,
"style": "__builtInStyle8"
},
"8": {
"value": 15,
"style": "__builtInStyle8"
},
"9": {
"value": 0.6,
"style": "__builtInStyle14"
},
"10": {
"value": "Cloudy",
"style": "__builtInStyle3"
}
},
"31": {
"2": {
"value": "/OADate(44255)/",
"style": "__builtInStyle6"
},
"3": {
"value": 24,
"style": "__builtInStyle12"
},
"4": {
"value": 18,
"style": "__builtInStyle12"
},
"5": {
"value": 0.4,
"style": "__builtInStyle14"
},
"6": {
"value": 0.78,
"style": "__builtInStyle16"
},
"7": {
"value": 12,
"style": "__builtInStyle8"
},
"8": {
"value": 17,
"style": "__builtInStyle8"
},
"9": {
"value": 0.66,
"style": "__builtInStyle14"
},
"10": {
"value": "Partly Cloudy",
"style": "__builtInStyle3"
}
},
"32": {
"2": {
"value": "Average",
"style": "__builtInStyle5"
},
"3": {
"value": 26.4642857142857,
"style": "__builtInStyle13",
"formula": "AVERAGE(D5:D32)"
},
"4": {
"value": 17.7857142857143,
"style": "__builtInStyle13",
"formula": "AVERAGE(E5:E32)"
},
"5": {
"value": 0.217857142857143,
"style": "__builtInStyle15",
"formula": "AVERAGE(F5:F32)"
},
"6": {
"value": 0.562857142857143,
"style": "__builtInStyle15",
"formula": "AVERAGE(G5:G32)"
},
"7": {
"value": 14.6071428571429,
"style": "__builtInStyle9",
"formula": "AVERAGE(H5:H32)"
},
"8": {
"value": 15.3928571428571,
"style": "__builtInStyle9",
"formula": "AVERAGE(I5:I32)"
},
"9": {
"value": 0.6225,
"style": "__builtInStyle15",
"formula": "AVERAGE(J5:J32)"
},
"10": {
"style": "__builtInStyle4"
}
}
},
"columnDataArray": [null, null, {
"style": "__builtInStyle7"
}, {
"style": "__builtInStyle11"
}],
"defaultDataNode": {
"style": {
"backColor": null,
"foreColor": "Text 1 0",
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"diagonalDown": null,
"diagonalUp": null
}
}
},
"rowHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"colHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"rows": [null, null, {
"size": 35
}, {
"size": 21
}, {
"size": 21
}, {
"size": 26
}, {
"size": 23
}, {
"size": 21
}, {
"size": 22
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 17
}, {
"size": 21
}, {
"size": 22
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}, {
"size": 21
}],
"columns": [null, null, {
"size": 132
}, {
"size": 133
}, {
"size": 126
}, {
"size": 122
}, {
"size": 111
}, {
"size": 126
}, {
"size": 141
}, {
"size": 116
}, {
"size": 184
}],
"leftCellIndex": 0,
"topCellIndex": 0,
"spans": [{
"row": 2,
"rowCount": 1,
"col": 2,
"colCount": 9
}],
"selections": {
"0": {
"row": 5,
"rowCount": 1,
"col": 3,
"colCount": 1
},
"length": 1
},
"defaults": {
"colHeaderRowHeight": 20,
"colWidth": 20,
"rowHeaderColWidth": 40,
"rowHeight": 20.8,
"_isExcelDefaultColumnWidth": true
},
"rowOutlines": {
"items": []
},
"columnOutlines": {
"items": []
},
"cellStates": {},
"outlineColumnOptions": {},
"autoMergeRangeInfos": [],
"index": 0
}
},
"namedStyles": [{
"backColor": "Accent 1 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent1"
}, {
"backColor": "Accent 2 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent2"
}, {
"backColor": "Accent 3 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent3"
}, {
"backColor": "Accent 4 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent4"
}, {
"backColor": "Accent 5 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent5"
}, {
"backColor": "Accent 6 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent6"
}, {
"backColor": "Accent 1 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent1"
}, {
"backColor": "Accent 2 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent2"
}, {
"backColor": "Accent 3 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent3"
}, {
"backColor": "Accent 4 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent4"
}, {
"backColor": "Accent 5 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent5"
}, {
"backColor": "Accent 6 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent6"
}, {
"backColor": "Accent 1 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent1"
}, {
"backColor": "Accent 2 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent2"
}, {
"backColor": "Accent 3 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent3"
}, {
"backColor": "Accent 4 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent4"
}, {
"backColor": "Accent 5 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent5"
}, {
"backColor": "Accent 6 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent6"
}, {
"backColor": "Accent 1 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent1"
}, {
"backColor": "Accent 2 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent2"
}, {
"backColor": "Accent 3 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent3"
}, {
"backColor": "Accent 4 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent4"
}, {
"backColor": "Accent 5 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent5"
}, {
"backColor": "Accent 6 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent6"
}, {
"backColor": "#ffc7ce",
"foreColor": "#9c0006",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Bad"
}, {
"backColor": "#f2f2f2",
"foreColor": "#fa7d00",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Calculation",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#a5a5a5",
"foreColor": "Background 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 6
},
"borderTop": {
"color": "#3f3f3f",
"style": 6
},
"borderRight": {
"color": "#3f3f3f",
"style": 6
},
"borderBottom": {
"color": "#3f3f3f",
"style": 6
},
"name": "Check Cell",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name": "Comma"
}, {
"backColor": null,
"formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name": "Comma [0]"
}, {
"backColor": null,
"formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name": "Currency"
}, {
"backColor": null,
"formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name": "Currency [0]"
}, {
"backColor": null,
"foreColor": "#7f7f7f",
"font": "italic normal 14.7px Calibri",
"themeFont": "Body",
"name": "Explanatory Text"
}, {
"backColor": "#c6efce",
"foreColor": "#006100",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Good"
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 20px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 5
},
"name": "Heading 1",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 17.3px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 50",
"style": 5
},
"name": "Heading 2",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 40",
"style": 2
},
"name": "Heading 3",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"name": "Heading 4"
}, {
"backColor": "#ffcc99",
"foreColor": "#3f3f76",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Input",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#fa7d00",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "#ff8001",
"style": 6
},
"name": "Linked Cell",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#ffeb9c",
"foreColor": "#9c6500",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Neutral"
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "Normal",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#ffffcc",
"borderLeft": {
"color": "#b2b2b2",
"style": 1
},
"borderTop": {
"color": "#b2b2b2",
"style": 1
},
"borderRight": {
"color": "#b2b2b2",
"style": 1
},
"borderBottom": {
"color": "#b2b2b2",
"style": 1
},
"name": "Note",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#f2f2f2",
"foreColor": "#3f3f3f",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 1
},
"borderTop": {
"color": "#3f3f3f",
"style": 1
},
"borderRight": {
"color": "#3f3f3f",
"style": 1
},
"borderBottom": {
"color": "#3f3f3f",
"style": 1
},
"name": "Output",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"formatter": "0%",
"name": "Percent"
}, {
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 24px Calibri Light",
"themeFont": "Headings",
"name": "Title"
}, {
"backColor": null,
"foreColor": "Text 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": {
"color": "Accent 1 0",
"style": 1
},
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 6
},
"name": "Total",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#ff0000",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Warning Text"
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle1",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri Light",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle2",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -5",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle3",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle4",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri",
"formatter": "yyyy\\-mm\\-dd;@",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle5",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -5",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "yyyy\\-mm\\-dd;@",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle6",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"formatter": "yyyy\\-mm\\-dd;@",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle7",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "0",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle8",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri",
"formatter": "0",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle9",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri Light",
"formatter": "0",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle10",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 16px Calibri",
"themeFont": "Body",
"formatter": "0",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle11",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "0\\ \\F",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle12",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri",
"formatter": "0\\ \\F",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle13",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"formatter": "0\\ %",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle14",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "Background 1 -15",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 12px Calibri",
"formatter": "0\\ %",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle15",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 1,
"vAlign": 1,
"font": "normal normal 12px Calibri",
"themeFont": "Body",
"formatter": "0\\ %",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle16",
"diagonalDown": null,
"diagonalUp": null
}, {
"backColor": "#82bc00",
"foreColor": "#ffffff",
"hAlign": 1,
"vAlign": 1,
"font": "normal bold 21.3px Calibri",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": true,
"name": "__builtInStyle17",
"diagonalDown": null,
"diagonalUp": null
}]
}];
input[type="text"] {
width: 200px;
box-sizing: border-box;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:200px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
