/*
** Copyright © 2018 Mike Voisin. Some rights reserved.
**
** DNA Cousin Quest is licensed by Mike Voisin under a Creative Commons
** Attribution-NonCommercial-ShareAlike 4.0 International License
** (http://creativecommons.org/licenses/by-nc-sa/4.0/).
*/

body
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

.title
{
   font-size:20pt;
   font-weight:bold;
   text-shadow:2px 2px lightgray;
   margin-top:1ex;
   margin-bottom:0px;
}

.icon
{
   vertical-align: middle;
   padding-right:10px;
   float:left;
}

.minor
{
   font-size:10pt;
}

.gray
{
   color:gray;
}

.green
{
   font-weight:bold;
   color:white;
   background:green;
   padding:1px 1ex;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.red
{
   font-weight:bold;
   color:white;
   background:red;
   padding:1px 1ex;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.center
{
   text-align:center;
}

.bold
{
   font-weight:bold;
}

.btnTree
{
   font-size:12pt;
   width:50px;
   height:25px;
   text-align:center;
   font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.btnInput
{
   font-size:12pt;
   width:60px;
   height:30px;
   text-align:center;
   font-weight: normal;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.tagContainer
{
   margin:1em 1em;
   position:relative;
}

.conRanges
{
   margin:0px auto;
   width:550px;
   position:relative;
}

.conResult
{
   margin:0px auto;
   text-align:center;
   position:relative;
   width:550px;
}

.conTree
{
   margin:0px auto;
   text-align:center;
   width:550px;  /* Prevent nodes wrapping */
}

.circle
{
   border:2px solid gray;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
   border-radius:15px;
}

.square
{
   border:2px solid gray;
}

.square.left
{
   border-left:0px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-top-right-radius: 15px;
   border-top-right-radius:15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-bottom-right-radius: 15px;
   border-bottom-right-radius:15px;
}

.square.right
{
   border-right:0px;
	-webkit-border-top-left-radius: 15px;
	-moz-border-top-left-radius: 15px;
   border-top-left-radius:15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
   border-bottom-left-radius:15px;
}

.tagRanges
{
   padding:0px;
   margin:0px auto;
   border-collapse:collapse;
}

.tagRanges table
{
   margin:0px auto;
}

.min
{
   width:90px;
   text-align:center;
}

.avg
{
   width:160px;
   text-align:center;
}

.max
{
   width:90px;
   text-align:center;
}

.tagRanges h1
{
   font-size:14pt;
   margin:0px;
   padding:0px 0px 4px;
}

.tagRanges h2
{
   font-size:12pt;
   margin:0px;
   padding:4px 0px 4px;
}

.tagRanges h3
{
   font-size:12pt;
   margin:0px;
   padding:0px 0px 4px;
}

.tagRanges h4
{
   font-size:10pt;
   margin:0px;
   padding:4px 0px 4px;
}

.tagRanges .bump
{
   margin:4px 0px;
}

.tagRanges .full
{
   display:inline-block;
   padding:4px 0px;
}

.tagRanges .half
{
   display:inline-block;
   padding:2px 0px;
}

.tagRanges small
{
   font-weight:bold;
   color:gray;
   margin-top:0px;
   padding-top:0px;
}

.tagResult
{
   margin:1em 0px 0px;
   padding:0px;
   font-weight:bold;
   font-size:12pt;
}

.resultTree span
{
   color:white;
   background:gray;
   padding:1px 1ex;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.resultDNA
{
   margin-top:0.5em;
}

.tagTree
{
   margin:0px auto;
   display:inline-block;
}

.step1
{
   margin-left:2ex;
   padding-top:1ex;   
}

.step2
{
   float:right;
   margin:2em 0px 0px -3ex;
   display:inline-block;
   text-align:center;
   font-size:8pt;
   font-weight:bold;
   display:none;
   position:absolute;
}

.inpShared
{
   width:4.5em;
   height:25px;
   font-weight:bold;
   font-size:12pt;
   border:thin solid gray;
   text-align:center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.tagNotes
{
   font-size:10pt;
}

.setleft
{
   float:left;
   display:inline;
   margin-left:3ex;
   margin-top:1ex;
}

.setright
{
   float:right;
   display:inline;
   margin-right:3ex;
   margin-top:1ex;
}

.help
{
   font-size:11pt;
   max-width:650px;
}

.credits
{
   border-top:thin solid gray;
   padding-top:1ex;
}

.rev
{
   font-size:10pt;
   margin-top:0.5ex;
   margin-bottom:0px;
}

.copy
{
   font-size:10pt;
   margin-top:0px;
   margin-bottom:0px;
}

.save
{
   width:400px;
   margin-top:1ex;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.save input
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.warn
{
   font-size:11pt;
   vertical-align: middle;
   padding:3px;
}
.warn img
{
   vertical-align: middle;
   margin-right:1ex;
}

.clickable
{
   cursor:pointer;
   color:blue;
   font-size:10pt;
   text-decoration:underline;
}

.grayHide
{
   display:none;
   cursor:pointer;
}

.grayShow
{
   display:inline;
   cursor:pointer;
}

@media print
{
   .noprint
   {
      display:none;
      visibility:hidden;
   }

   .title
   {
      margin-top:0.5ex;
   }
   
   .tagInput
   {
      display:none;
   }
   
   .tagContainer
   {
      margin:0px auto;
   }
   
   .conRanges
   {
      margin:1em auto;
   }
   
   .conResult
   {
      margin:2em auto 1em;
   }
   
   .conTree
   {
      margin:1em auto;
   }
   
   .resultTree span
   {
      color:gray;
      background:white;
   }
   
   .green
   {
      color:green;
      background:white;
   }
   
   .red
   {
      color:red;
      background:white;
   }
}