button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
/* Global CSS Specifically for this project */
body { font-family: Verdana, Helvetica, sans-serif; }
html, body { font-size: 100%; background-color: #f6f6f6; color: #222222; }

.clear { clear: both; }

.questions_left { text-align: right; font-size: 100%; font-style: italic; }

.content {
	margin: 10px auto 0;
	width: 100%;
	background: #F2F2F2;
}
.inner { padding: 5px; }
.header {
	text-align: center;
	font-size: 120%;
	color: blue;
	font-weight: bold;
}
.divider {
	border-bottom: 1px solid #ccc;
	margin: 10px 0px;
	height: 0px;
}
.question { font-weight: bold; color: black; font-size: 90%; margin-bottom: 10px; min-height: 50px; }
.answers {
	list-style-type: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 80%;
}
.answers li {
	margin: 0 0 3px;
	padding: 0;
	border: 1px solid #ccc;
	padding: 3px 5px;
	background: lightblue;
	cursor: pointer;
	font-size: 60%;
}
.answers li:hover {
	background: #ccc;
}

.user_id {
	text-align: right;
	font-size: 80%;
	padding: 0 10px;
}
.user_id span {
	font-weight: bold;
}

.abilities {
	width: 100%;
}
.abilities .answers {
	width: 100%;
}
.ability {
	margin-bottom: 10px;
	background: #fff;
}

.ability_tips {
	font-size: 75%;
	color: #999;
	/*margin-bottom: 10px;*/
	clear: both;
}

.attr_float {
	float: left;
	width: 200px;
	border: 1px solid pink;
}

.font_smaller { font-size: 90%; }
.font_smallest { font-size: 80%; }

.skill_header {
	padding: 2px 4px;
}

.details_attributes {
	float: left;
	width: 100%;
}

.details_gestalt {
	float: left;
	width: 100%;
}

/* Larger than mobile */
@media (min-width: 400px) {
	.header { font-size: 120%; color: orange; }
	.content { width: 100%; }
	.inner { padding: 10px; }
	.question { font-size: 100%; }
	.answers { font-size: 90%; }
	.ability .answers { font-size: 90%; }
	.details_attributes { width: 100%; font-size: 90%; }
	.details_gestalt { width: 100%; font-size: 90%; }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.header { font-size: 150%; color: green;  }
	.content { width: 95%; border: 1px solid #ccc; }
	.inner { padding: 20px; }
	.divider { margin: 20px 0; }
	.question { font-size: 110%; }
	.answers { font-size: 100%; }
	.ability .answers { font-size: 90%; }
	.details_attributes { width: 100%; font-size: 90%; }
	.details_gestalt { width: 100%; font-size: 90%; }
}

/* Larger than tablet */
@media (min-width: 750px) {
	.header { font-size: 160%; color: purple;  }
	.content { width: 90%; }
	.inner { padding: 20px; }
	.divider { margin: 20px 0; }
	.question { font-size: 120%; }
	.answers { font-size: 110%; }
	.abilities { float: left; width: 70%; }
	.ability .answers { float: left; width: 29%; font-size: 90%; }
	/*.ability_tips { float: left; width: 29%; }*/
	.details_attributes { width: 100%; font-size: 95%; }
	.details_gestalt { width: 100%; font-size: 95%; }
}

/* Larger than desktop */
@media (min-width: 1000px) {
	.header { font-size: 170%; color: brown;  }
	.content { width: 85%; }
	.inner { padding: 30px; }
	.divider { margin: 30px 0; }
	.question { font-size: 120%; }
	.answers { font-size: 110%; }
	.abilities { float: left; width: 70%; }
	.ability .answers { float: left; width: 29%; font-size: 90%; }
	.details_attributes { width: 49%; margin-right: 10px; }
	.details_gestalt { width: 49%; }

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	.header { font-size: 180%; color: gray;  }
	.content { width: 85%; }
	.inner { padding: 40px; }
	.divider { margin: 40px 0; }
	.question { font-size: 130%; }
	.answers { font-size: 130%; }
	.abilities { float: left; width: 70%; }
	.ability .answers { float: left; width: 29%; font-size: 90%; }

}


.ability span.attribute { font-size: 80%; color: pink; }

.abilities {
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	margin-bottom: 10px;
	width: 100%;
}
.abilities td, .abilities th {
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	padding: 3px 5px;
	width: 1%;
}
.abilities th {
	text-align: left;
}

.ability_tbl, .skill_tbl {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.ability_tbl tbody tr, .skill_tbl tbody tr {
	height: 50px;
	vertical-align: top;
}
.ability_tbl th, .ability_tbl td, .skill_tbl th, .skill_tbl td {
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	padding: 3px 5px;
	text-align: center;
	width: 1%;
}
.ability_tbl .left, .skill_tbl .left {
	text-align: left;
	width: 100%;
	cursor: pointer;
}

.ability_tbl .left span, .skill_tbl .left span {
	font-size: 90%;
	color:red;
}
.ability_tbl .tips {
	font-size: 85%;
	color: #999;
}
.ability_tbl td input, .skill_tbl td input {
	cursor: pointer;
}

.skill_tbl td input {
	width: 50px;
}

.ability_tbl tr.details {
	background: #d9efff;
}

.ability_tbl tr.details td {
	width: 1%;
	font-size: 80%;
	text-align: left;
}
.ability_tbl tr.details td pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/*.ability_tbl tr:nth-child(odd) {
    background: ;
}
*/
.ability_tbl tbody tr:nth-child(4n+1) {
	background: #fff;
}

.skill_tbl input:disabled {
	background: #ddd;
}

.skill_tbl tbody tr:nth-child(2n+1) {
	background: #fff;
}


.desc {
	font-size: 70%;
	color: rgb(8, 140, 180);
}

/* Style the tab */
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 20px 0;
}