/**
 * W3F Web Index Survey - Styles
 *
 * Copyright (C) 2014  Ben Doherty @ Oomph, Inc.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
body {
	font: 13px/1.334 "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, sans-serif;
	padding: 0;
	margin: 0;
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1.25em;
}
h4 {
	margin-bottom: .5em;
}
h5 {
	margin: .5em 0 .25em;
}


textarea {
	border: 1px solid #b8b8b8;
	width: 100%;
	padding: .5em;
	height: 9em;
	margin: .5em 0;
	box-sizing: border-box;
}

.supporting textarea {
	height:4em;	
}
	input[disabled],
	textarea[disabled] {
		cursor: not-allowed;
	}


input[type="text"] {
	border: 1px solid #b8b8b8;
	width: 100%;
	padding: .5em;
	box-sizing: border-box;
}

.button,
button {
	display: inline-block;
	cursor: pointer;
	padding: .5em 1em;
	background-color: #e8e8e8;
	border: 1px solid #dcdcdc;
	background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
	color: #444;
	border-radius: 2px;
}
.button[disabled] {
	cursor: not-allowed;
}
button {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
	.button:hover, button:hover {
		background-image: -webkit-linear-gradient(top, #f8f8f8, #f6f6f6);
	}

	.complete-button {
		background-image: -webkit-linear-gradient(top, #a0f8a0, #9ef69e) !important;
	}
		.complete-button:hover {
			background-image: -webkit-linear-gradient(top, #b0f8b0, #a0f8a0) !important;
		}

/**
 * Previous / Next section buttons
 */
.paging {
	overflow: hidden;
	font-size: 1.5em;
	padding: .5em;
	margin-top: 1.5em;
	float: left;
	width: 100%;
}
.paging button {
	font-size: inherit;
	font-weight: bold;
}
	.paging .next-button {
		float: right;
	}
	.paging .previous-button  {
		float: left;
	}
	.paging .complete-button  {
		float: right;
	}

/**
 * Modal popups
 */
.modal-overlay {
	position: fixed;
	z-index: 30;
	background-color: rgba(0,0,0,.5);
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
	.modal {
		position: absolute;
		padding: 1em;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		background: #fff;
		border: 1px solid #ddd;
		max-width: 500px;
		box-shadow: 1px 1px 2px rgba(0,0,0,.2);
	}
	.modal h2 {
		margin-top: 0;
	}


.wis-progress {
	background: #ddd;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px solid #ccc;
	height: 1.5em;
	list-style: none;
	font-size: .8em;
	margin: 0;
	z-index: 1;
	padding: 0;
}
	.wis-progress li {
		display: block;
		height: 100%;
		margin: 0;
		overflow: hidden;
		line-height: 1.5em;
		float: left;
	}
		.wis-progress a {
			display: block;
			height: 100%;
			margin: 0 2px;
			position: relative;
			padding: 0 2px;
			white-space: nowrap;
		}
		.wis-progress a span.progress-bar-container {
			display: block;
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
		}
		.wis-progress a span.progress-bar {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			background-color: #8f8;
		}
.section {
	margin: 1.5em 1.5em 5em 2.5em;
	clear: both;
}
	.section:after {
		content: ' ';
		display: block;
		clear: both;
	}

.question {
	float: left;
	width: 100%;
	clear: both;
	position: relative;
	margin-top: 5em;
}
.question-title {
	margin-bottom: .5em;
}
	.question-title h3 {
		margin: 0;
	}
	/* Allow notes to position themselves relative to these */
	.question .confidence,
	.question .justification,
	.question .supporting,
	.question .guidance-container,
	.question .examples,
	.question .private-notes {
		position: relative;
	}
	.question .question {
		margin-top: 2em;
		margin-left: 1.5em;
	}
	.question .supporting {
		margin: .5em 0 .5em 1em;
	}
	.question .question-title {
		line-height: 24px;

	}
	.question .level-select {
		position: absolute;
		right: 0;
		top: .75em;
		font-size: 20px;
	}

	.question .confidence {
		font-size: 1.0em;
		float:right;
		margin-left:1em;
	}

	.question .private-notes,
	.question .examples {
		clear: both;
	}

	.question .helplink a {
		cursor: pointer;
		text-decoration: underline;
		color: #00e;
	}

	.question-Scale .scale-response,
	.question-Scale .confidence {
		margin-top: 1em;
		margin-bottom: 1em;
		font-size: 1.25em;
		text-align: center;
	}

	.question-Scale .scale-response {
		float: left;
		/* width: 50%; */
	}
		.question-Scale .scale-response .score-container {
			position: relative;
		}
	.question-Scale .confidence {
		float: right;
		/* width: 50%; */
	}

	.question-Option .response {
		float: right;
		position: relative;
		margin-left: 3em;
	}
		.question-Option .response .open-notes {
			top: 0;
		}
		.question-Option .response .notes {
			left: auto;
			right: 0;
		}

	.question-Option .fancy-select-options {
		left: auto !important;
		right: 0;
	}
	.answer-sum {
		float: right;
		padding-left: 3em;
		color: white;
		font-size: 2em;
		background: #494;
		padding: .2em .5em;
		border-radius: .75em;
	}

.justification-response {
	padding: 10px;
	border: 1px solid #b8b8b8;
}

.question .examples {
	padding-top: 1em;
}

.options {
	list-style: none;
	margin: 0;
	padding: 0;
}
	.options li {
		padding: .5em;
	}

.guidance-container {
	float: left;
	clear: both;
	width: 100%;
}
	.guidance-container h4 {
		clear: both;
	}
	.guidance {
		color: #777;
		min-width: 130px;
		float: left;
		box-sizing: border-box;
	}
	@media (max-width: 900px) {
		.guidance {
			min-width: 100%;
		}
	}
	.guidance p {
		margin: 0 .5em .5em;
	}

/**
 * Notes
 */
.open-notes {
	float:right;
	clear:none;
	display:inline;
	/* position: absolute;
	left: -3.25em;
	top: -.25em; */
	height: 24px;
	text-indent: 0;
	color: #fff;
	font-size: .9em;
	text-align: center;
	width: 3em;
	cursor: pointer;
}
	.open-notes .icon-bubble {
		color: #ddd;
		top: 0;
		left: 0;
		z-index: -1;
		font-size: 2em;
	}
		.open-notes:hover .icon-bubble {
			color: #66f;
		}
	.open-notes .comment-count {
		position: absolute;
		left: 0;
		top: 0;
		line-height: 2em;
		width: 100%;
		height: 100%;
	}
	.open-notes.with-notes .icon-bubble {
		color: #6c6;
	}
	.open-notes.with-unresolved-notes .icon-bubble {
		color: #66c;
	}
	.notes {
		position: absolute;
		left: 0;
		top: 100%;
		margin-left: .5em;
		margin-top: .75em;
		width: 250px;
		z-index: 25;
		text-indent: 0;
		background-color: #fcfac6;
		border: 1px solid #feef9c;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		font-size: 12px;
		text-align: left;
	}
		.notes .notes-header {
			background-color: #f8f8a8;
			padding: 2px;
			position: relative;
		}
			.notes .note-count {
			}
			.notes .close-notes {
				float: right;
				cursor: pointer;
				padding-top: 2px;
				color: #666;
			}
			.notes .close-notes:hover {
				color: red;
			}
		.notes .thread {
			border-bottom: 2px solid #feef9c;
		}
		.notes .note {
			border-bottom: 1px solid #feef9c;
			padding: .5em .25em .25em;
			box-sizing: border-box;
			overflow: hidden;
		}
			.thread .note {
				border-bottom-color: #eee;
			}
			.notes .note p {
				margin: 0 0 .25em;
			}
			.notes .note-resolved {
				background-color: #f8f8f8;
				color: #888;
			}
			.notes .resolved-note {
				display: block;
				height: 17px;
				line-height: 17px;
				background-color: #f5f5f5;
				padding: .25em;
				font-size: .9em;
				font-weight: bold;
				background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
				color: #aaa;
			}
			.notes .expanded-note {
				height: auto;
			}
		.notes .note .note-actions {
			float: right;
			color: #666;
			margin-right: .25em;
			padding-left: 1em;
		}
			.notes .note .note-actions a:hover {
				color: #4c4;
				cursor: pointer;
			}
		.notes .note-resolve {
			font-size: 1.5em;
			padding: .25em;
			color: #0c0;
			float: right;
		}
		.notes .save-note,
		.notes .add-note {
			background-color: #4d90fe;
			background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
			color: white;
			border-color: #3079ed;
		}

.branding {
	float: left;
	width: 100%;
	clear: both;
}

	.branding h1 {
		padding-left: 50px;
		white-space: nowrap;
		background-repeat: no-repeat;
	}
	.branding h2 {
		line-height: 49px;
		vertical-align: middle;
		float: right;
		color: #444;
	}

#sign-in {
	clear: both;
	font-size: 1.25em;
}

#wrapper {
	max-width: 1024px;
	min-width: 600px;
	margin: 1.75em 1em;
}

#status {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);

	background-color: #fcfac6;
	border: 1px solid #feef9c;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-align: center;

	z-index: 28;
}
	#status p {
		margin: .5em;
	}
	#status.status-error {
		border-color: #fab3b7;
		background-color: #fadbdd;
	}

#loading {
	margin: 1em;
	padding: 2em;
	clear: both;
}

#sections {
	position: fixed;
	left: 0;
	bottom: 0;
	top: 1.2em;
	border-top: 2px solid transparent;
	padding: 0;
	transition: width 0.4s;
	width: 0;
	z-index: 20;
}
#sections ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 2.5em;
	bottom: 0;
	overflow: auto;
	right: 0;
}
#sections li {
	list-style: none;
	border-top: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	white-space: nowrap;

	background: #e2e2e2; /* Old browsers */
}
	#sections li .note-count {
		float: right;
		margin-right: -4em;
	}
		#sections li .note-count .icon-bubble {
			color: #66c;
		}
	#sections li:hover {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	}
	#sections li.active {
background: #b2e1ff; /* Old browsers */
background: -moz-linear-gradient(top,  #b2e1ff 0%, #66b6fc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b2e1ff 0%,#66b6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */
}
	#sections li a {
		cursor: pointer;
		display: block;
		padding: .5em;
		padding-right: 4.5em;
	}
	#sections .complete-button {
		width: 100%;
		box-sizing: border-box;
	}

#user-role-container {
	background: #f8fdf8;
	padding: .5em;
	border: 1px solid #d8d8d8;
	position: absolute;
	right: 0;
	box-sizing: border-box;
	width: 100%;
}
	#user-role-container .user-role {
		display: inline-block;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

		#user-role-container p {
			margin: .75em 1em;
		}
		#user-role-container .user-role-popup {
			display: none;
			left: 100%;
			top: -1px;
			width: 300px;
			position: absolute;
			background-color: #f8f8f8;
			border: 1px solid #d8d8d8;
			z-index: 0;
			box-shadow: 1px 1px 2px rgba(0,0,0,.1);
		}
			#user-role-container .user-role-popup:before {
				content: " ";
				display: block;
				position: absolute;
				left: -7px;
				background-color: #f8f8f8;
				width: 12px;
				height: 12px;
				top: .5em;
				border-left: 1px solid #d8d8d8;
				border-bottom: 1px solid #d8d8d8;
				 -webkit-transform: rotate(45deg);  /* Saf3.1+ */
				-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
				-ms-transform: rotate(45deg);  /* IE 9+ */
				-o-transform: rotate(45deg);  /* Opera 10.5 */
				transform: rotate(45deg);  /* Newer browsers (incl IE9) */
			}
		#user-role-container:hover .user-role-popup {
			display: block;
		}

/**
 * "Complete" modal
 */
#complete-popup {
}
	#complete-popup button {
		font-size: 1em;
	}
	#complete-popup .complete-primary-actions {
		float: left;
		width: 100%;
		clear: both;
		margin-bottom: 1em;
	}
	#complete-popup .cancel-button {
		float: left;
	}
	#complete-popup .complete-button {
		float: right;
	}
	#complete-popup .secondary-button {
		font-size: .8em;
		float: right;
		margin: .25em;
	}

/**
 * Angular fancy dropdown
 */
.fancy-select {
	display: inline-block;
	position: relative;
}
.fancy-select select {
	display: none;
}
	.fancy-select .fancy-select-selected {
		display: block;
		border: 1px solid #dcdcdc;
		text-align: center;
		background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
		background: #f8f8f8;
		cursor: pointer;
		width: 100%;
		box-sizing: border-box;
	}
		.fancy-select .fancy-select-disabled {
			cursor: not-allowed;
		}
	.fancy-select .fancy-select-selected,
	.fancy-select .fancy-select-option {
		padding: .25em .5em;
		white-space: nowrap;
	}
		.fancy-select .fancy-select-options {
			margin: 0;
			padding: 0;
			text-align: left;
			display: none;
			position: absolute;
			left: 0;
			top: 100%;
			list-style: none;
			background: #fff;
			border: 1px solid rgba(0,0,0,.2);
			background-color: #fff;
			z-index: 10;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			transition: opacity 0.218s;
		}
		.fancy-select .fancy-select-open .fancy-select-options {
			display: block;
		}
			.fancy-select .fancy-select-open .fancy-select-option {
				cursor: pointer;
			}
			.fancy-select .fancy-select-open .fancy-select-option:hover {
				background-color: #eee;
			}

/**
 * Flexible List
 */
.flexible-list {
	list-style: none;
	padding: 0;
}
	.flexible-list [class^="icon-"], .flexible-list [class*=" icon-"] {
		padding-right: .5em;
		color: #3079ed;
	}
	.flexible-list .flexible-list-delete {
		padding: 5px;
	}
	.flexible-list .flexible-list-item * {
		font-size: 1em;
	}
	.flexible-list .flexible-list-item {
		padding-left: 1.5em;
		min-width: 200px;
		margin: .75em 0 .5em;
		position: relative;
	}
	.flexible-list .flexible-list-delete {
		display: block;
		color: #777;
		position: absolute;
		left: 0;
		padding: 0;
		margin-top: .5em;
	}
		.flexible-list .flexible-list-delete:hover {
			color: #f08888;
		}

	.flexible-list .flexible-list-add {
		color: #3079ed;
		cursor: pointer;
	}
		.flexible-list .flexible-list-add:hover {
			text-decoration: underline;
		}

/**
 * Uploadable URL
 */
.uploadable-url {
}
	.uploadable-url input[type="text"] {
		width: 90%;
		margin-bottom: .5em;
	}
	.uploadable-url input[type="text"],
	.uploadable-url .button {
		box-sizing: border-box;
		line-height: 1.5em;
		height: 2em;
		padding: .25em;
	}
	.uploadable-url-preview-url {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	span.uploadable-url-preview-url {
		color: #777;
		font-size: .9em;
	}
	.uploadable-url-url {
		position: relative;
	}
	.uploadable-url-upload input {
		display: none;
	}
	.uploadable-url-upload .button {
		padding: .25em 1em;
	}

/**
 * Further question guidance frame
 */
#helplink-content {
	position: fixed;
	margin: 0px;
	bottom: 0px;
	height: 90%;
	left: 100%;
	margin-left:-50%;
	width:50%;
	display: none;
	background: #fff;
}
#helplink-content.open {
	display: block;
	z-index:2;
}
	#helplink-content iframe {
		width: 100%;
		height: 100%;
	}

	#helplink-content .close {
		position: absolute;
		top: 2px;
		right: 14px;
		padding: 15px;
		background: white;
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
	}

/*
* Customisations for OpenOwnership
*/
div.radio {
	margin-left:1.5em;
}

label.radio-label {
	display:inline-block;
	width:20%;
}

.radio-list label.radio-label {
	display:block;
	width:100%;
}

.question .supporting {
		clear: both;
		border-top: 1px solid lightgrey;
}

.answer-sum {
	font-size:1em;
}

div.Legal, div.Systems, div.Data {
    max-width: 30%;
    float: left;
    clear: right;
}

div.Legal label, div.Systems label, div.Data label {
    display: block;
    width: 100%;
}

.justification {
	clear:both;
}


.justification {
    width: 100%;
    float: left;
    clear: none;
    display: inline-block;
    margin: 1em;
}

.justification.examples-Yes {
	width:48%;
}

.justification.examples-Yes textarea {
	height:16em;
}

.examples.justification-Yes {
	width:48%;
	clear:none;
	float:right;
}

.resource-manager.showing-true {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 5;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(255,255,255,.95);
	padding: 3rem;
	text-align: center;
}

.resource-manager.showing-true .panel {
	width: 600px;
	max-width: 95%;
	margin: 0px auto;
	text-align: left;
	background: white;
	border: aliceblue;
	padding: 3rem;
	margin-top: 2rem;
	border: 5px solid aliceblue;
}

.edit-button {
	display: block;
}


.question-group {
	border-top:2px solid grey;
}

.question.question-sum {
	background-color: #F4F4F4
}

.collapsible-item .question:first-of-type {
	margin-top:0em;
}

.collapsible-item.open > .body {
  overflow: scroll;
}

.pilot .private-notes {
    padding: 5px;
    border: black solid;
    background: lightgrey;
}