/*
	(c)2012 - visuallizard.com
	
	General styles. Template, view, plugin specific, etc.
*/

.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

.h1 { height: 1em; }
.h2 { height: 2em; }
.h3 { height: 3em; }
.h4 { height: 4em; }
.h5 { height: 5em; }
.h6 { height: 6em; }
.h7 { height: 7em; }
.h8 { height: 8em; }
.h9 { height: 9em; }
.h10 { height: 10em; }
.h11 { height: 11em; }
.h12 { height: 12em; }
.h13 { height: 13em; }
.h14 { height: 14em; }
.h15 { height: 15em; }
.h16 { height: 16em; }
.h17 { height: 17em; }
.h18 { height: 18em; }
.h19 { height: 19em; }
.h20 { height: 20em; }

.o10 { opacity: 0.1; filter: alpha(opacity=10); }
.o20 { opacity: 0.2; filter: alpha(opacity=20); }
.o30 { opacity: 0.3; filter: alpha(opacity=30); }
.o40 { opacity: 0.4; filter: alpha(opacity=40); }
.o50 { opacity: 0.5; filter: alpha(opacity=50); }
.o60 { opacity: 0.6; filter: alpha(opacity=60); }
.o70 { opacity: 0.7; filter: alpha(opacity=70); }
.o80 { opacity: 0.8; filter: alpha(opacity=80); }
.o90 { opacity: 0.9; filter: alpha(opacity=90); }
.o100 { opacity: 1.0; filter: alpha(opacity=100); }

.back {
	clear: both;
	padding-top: 2em;
	border-top: 1px solid #b1d6f0;
	margin-top: 2em;
}

.case {
	/* For demonstrations only. Remove on production */
	margin: 0 0 20px 0;
}

img {
	max-width: 100%;
}

del {
	opacity: 0.3;
}

/* FORMS */

form {
	margin-bottom: 2em;
}

	form .group {
		background-color: #eee;
		border-radius: 10px;
		padding: 10px 30px;
		margin: 1em 0;
	}
	
	table form {
		margin-bottom: 0;
	}

label {
	font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
}

form p.label {
	margin-bottom: 0;
	color: #666;
	font-size: 16px;
	margin-top: -5px;;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
	width: 70%;
	padding: 0.25em 0.5em;
	border: 1px solid #999;
	border-radius: 5px;
	
	font-family: 'Ubuntu Mono', sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.5em;
}

	form .error-message {
		color: #e00;
		font-style: italic;
	}

	.error input[type="text"],
	.error input[type="password"],
	.error input[type="email"],
	.error textarea,
	.error select {
		border-color: red;
	}

	textarea {
		width: 95%;
	}

.button {
	font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5em;
}

	del.button {
		cursor: default;
	}

input.button[disabled="disabled"] {
	opacity: 0.35;
}
	
	.button.right {
		float: right;
	}
	
		.button .fa {
			margin-right: 0.5em;
		}

/* BIOBANK table listing */

	.bank-status,
	.bank-status-indicator {
		position: relative;
		clear: both;
	}
	
	.bank-status-indicator {
		padding-top: 40px;
		padding-left: 130px;
		border-top: 1px solid #b1d6f0;
		margin-top: 40px;
	}
		
		.bank-status:after,
		.bank-status-indicator:after {
			display: block;
			content: " ";
			clear: both;
		}
	
		.bank-status-indicator .icon {
			position: absolute;
			display: block;
			left: 0;
			top: 40px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			
			font-size: 70px;
			line-height: 100px;
			text-align: center;
			background: #D1F0B1;
			color: white;
		}
			
			.bank-status-indicator.attention .icon {
				background: #F9F1AE;
				color: rgba(200,0,0,0.3);
				font-size: 60px;
			}
			
			.bank-status-indicator.wait .icon {
				background: #b1d6f0;
			}
			
			.bank-status-indicator.locked .icon {
				background: #eee;
				color: #ddd;
			}
			
			.bank-status-indicator.unlocked .icon {
				background: #f9f9f9;
				color: #D1F0B1;
				line-height: 105px;
			}
	
		.bank-status-indicator.locked h3,
		.bank-status-indicator.locked p {
			color: #ddd;
		}
	
	table.summary {
		border: 0;
		margin-bottom: 1em;
		background-color: #eee;
	}
			
			table.summary td,
			table.summary td p {
				border: 0;
				margin-bottom: 0.25em;
				vertical-align: top;
			}
		
		.bank-status-indicator .button {
			margin-right: 1em;
		}

/* TABLES and AVAILABLE MATERIALS */

table {
	margin: 1em 0 2em 0;
	border-bottom: 1px solid #b1d6f0;
}
table th {
	padding: 0.5em 1em;
	background: #b1d6f0;
	color: #000;
	text-transform: uppercase;
}
table.documents th.catcode,
table.documents th.eng,
table.documents th.fra {
	width: 90px;
}
table td {
	border-top: 1px solid #b1d6f0;
	padding: 0.5em 1em;
	vertical-align: middle;
}

table#available_samples {
	margin-top: 0;
	border-top: 3px solid #cb4a30;
}
	
	table#available_samples th.none,
	table#available_samples td.none {
		display: none;
	}

div#wrapper div#content div#col2 table#available_samples tbody tr td.site { width: 40%; }

dl dt {
	float: left;
}
	
	dl dt:after {
		content:": ";
		margin-right: 0.25em;
	}

dl dd {
	display: block;
}

#available_samples_toggles {
	list-style: none;
	margin: 1em 0.5em 0 0;
	padding: 0;
	text-align: right;
}

	#available_samples_toggles li {
		display: inline-block;
		margin: 0 5px 0 0;
	}
	
		#available_samples_toggles li.link {
			float: left;
		}
	
	#available_samples_toggles li a {
		display: block;
		padding: 5px 10px 2px 10px;
		background: #fff;
		text-decoration: none;
		border-bottom: 0;
		cursor: pointer;
	}
	
	#available_samples_toggles li a:hover {
		background: #e1eff9;
		color: #6688A3;
		font-weight: normal;
	}
		
		#available_samples_toggles li.link a:hover {
			background: inherit;
			color: inherit;
			font-weight: normal;
			text-decoration: underline;
		}
	
	#available_samples_toggles li.at a,
	#available_samples_toggles li.at a:hover {
		background: #cb4a30;
		color: #fff;
	}
	
#filter_available_materials {
	padding: 1em 1em 1em 1em;
	background-color: #eee;
	border-radius: 1em;
}
	
	#filter_available_materials input,
	#filter_available_materials select {
		display: inline;
		margin-bottom: 0;
		width: 95%;
	}

/* flash message behaviors */
	
#flashMessage.message {
	position: absolute;
	top: 300px;
	
	border: 0;
	border-radius: 0;
	padding: 4em 0;
	width: 100%;
	z-index: 1000;
	opacity: 1;
	
	text-transform: uppercase;
	text-align: center;
	font-weight: 800;
	font-size: 1.3em;
	
	background-image: none;
	text-shadow: none;
	box-shadow: 0 0 0 2038px rgba(255,255,255,0.8); /* The semi-transparent bg. Something weird about Safari and numbers bigger than this */
}

	#flashMessage.message.error {
		background-color: #d33;
		box-shadow: 0 0 0 2038px rgba(255,235,235,0.8);
	}

	#flashMessage.message.success {
		background-color: #3b3;
		box-shadow: 0 0 0 2038px rgba(235,255,235,0.8);
	}
	
/* members area, biobank registration and certification forms *//

	#progress_bar {
	}
		
		#progress_bar ul {
			margin: 0;
			
			list-style-type: none;
		}
	
		#progress_bar li {
			position: relative;
			display:inline-block;
			box-sizing: border-box;
			
			width: 16.6%;
			border-right: 4px solid white;
			border-bottom: 3px solid #fff;
			padding-left: 0.4em;
			background: #eee;
			
			font-size: 40px;
			font-weight: bold;
			text-align: center;
			vertical-align:middle;
		}
			
			#progress_bar li:before {
				position: absolute;
				content: " ";
				display: block;
				
				top: 0; right: -24px;
				width: 0; height: 0;
				border-top: 30px solid transparent;
				border-left: 20px solid white;
				border-bottom: 30px solid transparent;
				
				z-index: 8;
			}
			
			#progress_bar li:after {
				position: absolute;
				content: " ";
				display: block;
				
				top: 0; right: -20px;
				width: 0; height: 0;
				border-top: 30px solid transparent;
				border-left: 20px solid #eee;
				border-bottom: 30px solid transparent;
				
				z-index: 10;
			}
			
			#progress_bar li a {
				display: block;
				line-height: 60px;
				width: 100%;
			}
		
			#progress_bar li.at {
				background: #c54835;
				/* border-bottom-color: #c54835; */
			}
			
				#progress_bar li.at:after {
					border-left: 20px solid #c54835;
				}
			
				#progress_bar li.at a {
					color: white;
				}
		
			#progress_bar li.errors {
				background: #fee;
				/* border-bottom-color: #c54835; */
			}
			
				#progress_bar li.errors:after {
					border-left: 20px solid #fee;
				}
			
				#progress_bar li.errors a {
					color: #e00;
				}
				
			#progress_bar li.step1,
			#progress_bar li.step7 {
				width: 15.66%;
				border-top-left-radius: 20px;
			}
				
			#progress_bar li.step6,
			#progress_bar li.step12 {
				width: 17.9%;
				border-right: 0;
				border-top-right-radius: 20px;
			}
					
				#progress_bar li.step6:before,
				#progress_bar li.step6:after,
				#progress_bar li.step12:before,
				#progress_bar li.step12:after {
					display: none;
				}
		
			#progress_bar li:hover,
			#progress_bar li.done:hover,
			#progress_bar li.at:hover {
				background-color: #c54835;
			}
			
				#progress_bar li:hover:after,
				#progress_bar li.done:hover:after,
				#progress_bar li.at:hover:after {
					border-left: 20px solid #c54835;
				}
			
				#progress_bar li:hover a,
				#progress_bar li.done:hover a,
				#progress_bar li.at:hover a {
					color: white;
					text-decoration: none;
				}
			
	#progress_bar h3 {
		border-top: 2px solid #c54835;
		border-left: 1px solid #fdd;
		border-right: 1px solid #fdd;
		padding: 20px 10px 10px;
		margin: 0;
		background-color: #fff3e6;
	}
	
	#progress_bar div.errors {
		padding: 20px;
		margin-bottom: 3px;
		background-color: #fee;

		color: #e00;
		font-style: italic;
	}
	
	form.biobank {
		margin: 0 0 20px 0;
		padding: 20px 10px 10px;
		background-color: #f9f9f9;
		border-left: 1px solid #fdd;
		border-right: 1px solid #fdd;
		border-bottom: 1px solid #fdd;
	}
	
		form.biobank p {
			margin: -5px 0 5px 0;
		}
	
		form.biobank div.submit {
			padding: 20px 10px 10px;
			margin: 40px -10px -10px -10px;
			background-color: #fff3e6;
		}
	
		form.biobank div.checkboxes {
			margin: 1em 0;
		}
		
			form.biobank div.checkboxes div.input.text label {
				display: inline;
				margin-left: 1em;
			}
		
			form.biobank div.checkboxes div.input.text input {
				display: inline;
				margin-left: 0.5em;
			}
	
		form.biobank fieldset {
			margin-left: 10px;
		}
		
		form.biobank fieldset label,
		form.biobank div.checkboxes div.input label {
			font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		}
		
	.required > label::after,
	.required-field > label::after {
		color: #c54835;
	}
	
	form.biobank .error {
		background-color: #fee;
		padding: 20px 10px 10px;
		margin: 20px -10px;
	}
	
	form.biobank .checkboxes div.error {
		padding: 5px 20px;
		margin: 0 -10px 0 -20px;
	}
			
		form.biobank .error fieldset label {
			color: red;
		}