@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";
@namespace xml "http://www.w3.org/XML/1998/namespace";
@namespace xsi "http://www.w3.org/2001/XMLSchema-instance";
@namespace xsd "http://www.w3.org/2001/XMLSchema";
@namespace xsl "http://www.w3.org/1999/XSL/Transform";
@namespace xmlns "http://www.w3.org/2000/xmlns/";
@namespace str "https://genelach.network/namespaces/XML/Y-DNA";
/***************************************************************************************************

	Genelach Dáil Cuinn Project™ STR Analyzer Page CSS

	DOCUMENT OID: urn:oid:1.3.6.1.4.1.63231.0.3.2.2.2.1
	DOCUMENT AUTHORED: 2018-11-20T12:00:00Z
	DOCUMENT MODIFIED: 2025-03-29T23:59:00Z

	See https://genelach.network/home.xhtml metadata for rights and licensing information.

***************************************************************************************************/

/**********************************************************

	Reset main element styles.

**********************************************************/

html, body, main
{
	width: 100%;
	height: 100%;
}

main
{
	position: relative;
	border: 0;
}

header#toolbar_shell
{
	z-index: 6;
}

/**********************************************************

	Set the cladogram element styles.

**********************************************************/

str|metadata
{
	display: none;
}

/**********************************************************

	Define the options menu drop-box styles.

**********************************************************/

div.drop-box > article#toolbar_drop_box_options
{
	width: calc( 30vw + 2 * 1em );
}

div.drop-box > article#toolbar_drop_box_options section:not( :last-of-type )
{
	margin-bottom: 1em;
}

div.drop-box > article#toolbar_drop_box_options header
{
	margin-bottom: 0.5em;
}

div.drop-box > article#toolbar_drop_box_options header > h1
{
	font-size: 1.25em;
	text-align: center;
}

div.drop-box > article#toolbar_drop_box_options div.line
{
	text-align: center;
	margin-bottom: 0.5em;
}

div.drop-box > article#toolbar_drop_box_options div.line:last-of-type
{
	margin-bottom: 0;
}

div.drop-box > article#toolbar_drop_box_options div.column
{
	display: inline-block;
	width: 49%;
	margin: 0 2% 1em 0;
	vertical-align: top;
}

div.drop-box > article#toolbar_drop_box_options form div.column + div.column
{
	margin-right: 0;
}

div.drop-box > article#toolbar_drop_box_options form input[type="radio"]
{
	margin-right: 0.5em;
	cursor: pointer;
}

div.drop-box > article#toolbar_drop_box_options form input[type="text"], div.drop-box > article#toolbar_drop_box_options form select
{
	font-family: inherit;
	font-size: inherit;
	border: 2px inset rgba( 176, 128, 16, 1 );
}

div.drop-box > article#toolbar_drop_box_options form input[type="text"]
{
	width: calc( 80% - 4px - 0.5em );
	height: calc( 1.5em - 4px );
	line-height: calc( 1.5em - 4px );
	padding: 0 0.25em 0 0.25em;
}

div.drop-box > article#toolbar_drop_box_options form select
{
	width: 80%;
	height: 1.5em;
	line-height: 1.5em;
	cursor: pointer;
}

div.drop-box > article#toolbar_drop_box_options button
{
	display: inline-block;
	height: 1.5em;
	line-height: 1.5em;
	background-color: rgba( 208, 176, 144, 1 );
	background-image: linear-gradient( to bottom, rgba( 220, 198, 118, 1 ), rgba( 255, 236, 176, 1 ) 10%, rgba( 224, 194, 110, 1 ) 50%, rgba( 194, 166, 102, 1 ) 90%, rgba( 128, 96, 48, 1 ) );
	font-family: inherit;
	font-size: inherit;
	border-radius: 0.3vw;
	padding: 0 1em 0 1em;
	box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );
	cursor: pointer;
}

div.drop-box > article#toolbar_drop_box_options button:hover
{
	color: rgba( 255, 236, 176, 1 );
	background-image: linear-gradient( to bottom, rgba( 16, 16, 16, 1 ), rgba( 32, 32, 32, 1 ) 10%, rgba( 80, 80, 80, 1 ) 50%, rgba( 24, 24, 24, 1 ) 90%, rgba( 4, 4, 4, 1 ) );
}

/**********************************************************

	Define the info menu drop-box styles.

**********************************************************/

div.drop-box > article#toolbar_drop_box_info ul.swatches
{
	list-style: none none outside;
}

div.drop-box > article#toolbar_drop_box_info ul.swatches > li
{
	margin-left: 2em;
	text-indent: -2em;
}

div.drop-box > article#toolbar_drop_box_info ul.swatches > li::before
{
	content: "\200B";
	display: inline-block;
	width: calc( 1.5em - 2px );
	margin-right: 0.5em;
	border: 1px solid rgba( 0, 0, 0, 1 );
}

/**********************************************************

	Define the #str_article styles.

**********************************************************/

article#str_article
{
	position: absolute;
	left: 3vh;
	top: 3vh;
	right: 3vh;
	bottom: 3vh;
	border: 0;
}

article#str_article > header
{
	height: 12vh;
	margin: 0;
}

section#str_section
{
	position: absolute;
	left: 0px;
	top: 12vh;
	right: 0px;
	bottom: 0px;
	font-family: "Trebuchet MS", Tahoma, Calibri, Helvetica, Verdana, Arial, sans-serif;
	font-size: 0.9vw;
	border: 1px solid rgba( 0, 0, 0, 1 );
	overflow: scroll;
}

section#str_section > header
{
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	margin: 0;
	z-index: 2;
}

/**********************************************************

	Define the wait icon styles.

**********************************************************/

div#wait_icon
{
	position: absolute;
	left: calc( 50% - 150px );
	top: calc( 50% - 32px );
	width: 300px;
	height: 64px;
	line-height: 64px;
	color: rgba( 0, 0, 0, 1 );
	background-image: url( "media/css-bg-wait.png" );
	background-attachment: scroll;
	background-position: center center;
	background-repeat: no-repeat;
	font-size: 16px;
	text-align: center;
	white-space: nowrap;
	z-index: 5;
}

div#wait_icon.hidden
{
	display: none;
}

div#wait_icon > span
{
	color: rgba( 255, 255, 255, 1 );
	background-color: rgba( 0, 0, 0, 0.5 );
	padding: 0 0.5em 0 0.5em;
}

/**********************************************************

	Define the STR table class styles.

**********************************************************/

section#str_section table
{
	border: 1px solid rgba( 202, 150, 54, 1 );
	border-collapse: collapse;
	table-layout: fixed;
	white-space: nowrap;
}

section#str_section table > * > tr > *.w02
{
	width: 2vw;
	min-width: 2vw;
	max-width: 2vw;
}

section#str_section table > * > tr > *.w03
{
	width: 3vw;
	min-width: 3vw;
	max-width: 3vw;
}

section#str_section table > * > tr > *.w05
{
	width: 5vw;
	min-width: 5vw;
	max-width: 5vw;
}

section#str_section table > * > tr > *.w10
{
	width: 10vw;
	min-width: 10vw;
	max-width: 10vw;
}

section#str_section table > * > tr > *.w15
{
	width: 15vw;
	min-width: 15vw;
	max-width: 15vw;
}

section#str_section table > * > tr > *
{
	height: 1.5em;
	font-weight: normal;
	border: 1px solid rgba( 202, 150, 54, 1 );
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

/**********************************************************
	Define table body specific styles.
**********************************************************/

section#str_section table > tbody > tr > td > button
{
	display: block;
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	background-image: linear-gradient( to bottom, rgba( 220, 198, 118, 1 ), rgba( 255, 236, 176, 1 ) 10%, rgba( 224, 194, 110, 1 ) 50%, rgba( 194, 166, 102, 1 ) 90%, rgba( 128, 96, 48, 1 ) );
	font-size: 0.9vw;
	text-align: center;
	cursor: pointer;
}

section#str_section table > tbody > tr > td > button:hover
{
	color: rgba( 255, 236, 176, 1 );
	background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ), rgba( 80, 80, 80, 1 ) 50%, rgba( 24, 24, 24, 1 ) );
}

section#str_section > table > tbody > tr > td > button
{
	text-align: right;
}

section#str_section > table > tbody > tr > td > button::after
{
	content: "\A0";
}

section#str_section table > tbody > tr > td > div
{
	max-width: 15vw;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
}

section#str_section table > tbody > tr > td.miss, div.drop-box > article#toolbar_drop_box_info ul.swatches > li.miss::before
{
	background-color: rgba( 255, 192, 255, 1 );
}

section#str_section table > tbody > tr > td.frng, div.drop-box > article#toolbar_drop_box_info ul.swatches > li.frng::before
{
	background-color: rgba( 255, 255, 128, 1 );
}

section#str_section table > tbody > tr > td.fail, div.drop-box > article#toolbar_drop_box_info ul.swatches > li.fail::before
{
	color: rgba( 255, 255, 255, 1 );
	background-color: rgba( 255, 0, 0, 1 );
}

/**********************************************************
	Define table head specific styles.
**********************************************************/

section#str_section > header > table
{
	background-color: rgba( 240, 220, 180, 1 );
	background-image: url( "media/css-bg-paper_tile.png" );
	background-attachment: scroll;
	background-position: left top;
	background-repeat: repeat;
}

section#str_section table > thead > tr > th
{
	height: 12.5em;
	font-weight: bold;
}

section#str_section table > thead > tr > th.info
{
	background-image: url( "media/css-bn-info.png" );
	background-attachment: scroll;
	background-position: center 0.5em;
	background-repeat: no-repeat;
	background-size: 1.2em auto;
	cursor: help;
}

section#str_section table > thead > tr > th > label
{
	display: block;
	line-height: 1;
	white-space: nowrap;
}

section#str_section table > thead > tr > th > label.r270
{
	text-align: left;
	transform-origin: left top;
}

section#str_section table > thead > tr > th > label.noro
{
	font-size: 110%;
}

section#str_section table > thead > tr > th > label.r270.w02
{
	width: 2vw;
	transform: rotate( 270deg ) translate( -6.25em, 0.5vw );
}

section#str_section table > thead > tr > th > label.r270.w03
{
	width: 3vw;
	transform: rotate( 270deg ) translate( -6.25em, 1vw );
}

section#str_section table > thead > tr > th > label.r270.w05
{
	width: 5vw;
	transform: rotate( 270deg ) translate( -6.25em, 2vw );
}

section#str_section table > thead > tr > th > label.r270.w10
{
	width: 10vw;
	transform: rotate( 270deg ) translate( -6.25em, 4.5vw );
}

section#str_section table > thead > tr > th > label.r270.w15
{
	width: 15vw;
	transform: rotate( 270deg ) translate( -6.25em, 7vw );
}

/**********************************************************

	Define the input form styles.

**********************************************************/

section#str_section > header > form
{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background-color: rgba( 240, 220, 180, 1 );
	background-image: url( "media/css-bg-paper_tile.png" );
	background-attachment: scroll;
	background-position: left top;
	background-repeat: repeat;
	text-align: left;
	white-space: nowrap;
}

section#str_section > header > form.shut
{
	z-index: -10;
}

section#str_section > header > form > button
{
	position: absolute;
	left: 0px;
	top: -1vw;
	width: 1vw;
	height: 1vw;
	background-color: transparent;
	background-image: url( "media/css-bn-close.png" );
	background-attachment: scroll;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1vw 1vw;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

section#str_section > header > form input, section#str_section > header > form label
{
	margin-left: 1px;
}

section#str_section > header > form input[type="submit"]
{
	display: inline-block;
	width: 3vw;
	height: calc( 1.5em + 4px );
	line-height: calc( 1.5em + 4px );
	background-image: linear-gradient( to bottom, rgba( 220, 198, 118, 1 ), rgba( 255, 236, 176, 1 ) 10%, rgba( 224, 194, 110, 1 ) 50%, rgba( 194, 166, 102, 1 ) 90%, rgba( 128, 96, 48, 1 ) );
	font-size: 0.9vw;
	text-align: center;
	cursor: pointer;
}

section#str_section > header > form input[type="submit"]:hover
{
	color: rgba( 255, 236, 176, 1 );
	background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ), rgba( 80, 80, 80, 1 ) 50%, rgba( 24, 24, 24, 1 ) );
}

section#str_section > header > form input[type="text"]
{
	display: inline-block;
	height: 1.5em;
	line-height: 1.5em;
	background-color: rgba( 232, 232, 232, 1 );
	font-family: inherit;
	font-size: 0.9vw;
	text-align: center;
	border: 1px inset rgba( 0, 0, 0, 1 );
}

section#str_section > header > form input[type="text"].w02
{
	width: calc( 2vw - 2px );
}

section#str_section > header > form input[type="text"].w03
{
	width: calc( 3vw - 2px );
}

section#str_section > header > form input[type="text"].w05
{
	width: calc( 5vw - 2px );
}

section#str_section > header > form input[type="text"].w10
{
	width: calc( 10vw - 2px );
}

section#str_section > header > form input[type="text"].w15
{
	width: calc( 15vw - 2px );
}

section#str_section > header > form input[type="text"].w210
{
	width: calc( 210vw - 2px - 0.25em );
	text-align: left;
	padding-left: 0.25em;
}

section#str_section > header > form label
{
	display: inline-block;
	width: 5vw;
	height: 1.5em;
	line-height: 1.5em;
	background-image: url( "media/css-bn-info.png" );
	background-attachment: scroll;
	background-position: 0.2em center;
	background-repeat: no-repeat;
	background-size: 1.2em auto;
	cursor: help;
	text-align: right;
}

section#str_section > header > form input[type="text"]:not( :placeholder-shown):invalid
{
	color: rgba( 255, 255, 255, 1 );
	background-color: rgba( 255, 0, 0, 1 );
}

section#str_section > form > table > tbody > tr > td > input[type="text"]:disabled
{
	cursor: not-allowed;
}

section#str_section > form > table > tbody > tr > td > input[type="text"]:disabled:readonly
{
	color: inherit;
	background-color: transparent;
	border-color: transparent;
	cursor: auto;
}

section#str_section > form > table > tbody > tr > td > input[type="text"]:readonly
{
	color: inherit;
	background-color: transparent;
	border-color: transparent;
}

cladogram
{
	height: 0px;
	opacity: 0;
}