/*
Pallette
$dark-gray: #211F20;
$blue: #006CEA;
$dark-blue:#000AFF;
$violet-dark: #D800FF;
$violet:#FC64A9;
$green: #00D59B;
$red: #FC7064;
*/


*, *:before, *:after {
  box-sizing: border-box;
}

html {
	background-color: #f0f0f0;
	color: #211F20;
	font-size: 14pt;
	font-family: 'Barlow Semi Condensed', sans-serif;
	/*
		TODO: Attach Barlow font to project.
		Barlow Semi Condensed
	*/
}

/*SVG styles*/
svg {
    font-family:Lato;
}
svg .dark-blue {
    fill:#000AFF;
}
svg .blue {
    fill:#006CEA;
}

svg .graph-marker-lines {
    stroke:#000AFF;
    stroke-width:2;
    stroke-dasharray:8,8;
}
svg .graph-marker-label-container  {
    stroke:#006CEA;
    fill:#fff;
}
svg .graph-marker-label {
    fill:#000AFF;
    font-weight: 700;
    text-anchor: middle;
    alignment-baseline: hanging;
    dominant-baseline: hanging;
}

svg .graph-grid-lines {
    stroke:rgba(33, 31, 32,.3);
    stroke-width:1px;
}
svg .graph-space-marks {
    stroke:rgba(33, 31, 32,.9);
    stroke-width:1px;
}

svg  .graph-space-label {
    fill:#211F20;
    font-size:11px;    
}

svg .graph-line {
    stroke:#D800FF;
        stroke-width:2;
    fill:none;
}

svg .graph-point {
    fill:#fff;
    stroke:#D800FF;
    stroke-width:2px;
    cursor:pointer;
    transition:all .3s ease;
    r:4px;
}
svg .graph-point:hover {
    r:6px;
}
svg .graph-point:active {
    r:3px;
}
svg .graph-point.current {
    fill:#FC64A9;
    stroke:#fff;
    r:8px;
}

#commentary-box svg  {
    box-shadow:white 2px 2px 100px
}

#commentary-box svg .graph-point,#commentary-box svg .graph-point:hover, #commentary-box svg .graph-point:active {
    r:6px; cursor:default;
}

svg .bracket {
    stroke:#fff;
    stroke-width:1px;
    fill:transparent;
}

svg .bar-graph-outside-label {
    fill:#fff;
    font-size:11px;
    font-weight:500;
    alignment-baseline: bottom;
}
svg .bar-graph-label {
    fill:#fff;
    font-size:10px;
    font-weight:500;
    alignment-baseline: hanging;
    dominant-baseline:hanging;
}

svg .bar-graph-amount {
    fill:#fff;
    font-size:14px;
    font-weight:500;
    alignment-baseline: middle;
    dominant-baseline:middle;
    text-anchor:middle;
}
/*body*/
body {
	width: 960px;
	margin: auto;
} 




/*
	TAB GROUPS
*/

.has-tab-group-focus {
	background-color: rgba(255.0,255.0,0.0,0.25);
	border-radius: 0.25em;
}

.visibleTabCursor .has-tab-focus {
	outline: 2px dotted #000;
	outline-offset: 6px;
	z-index: 1000;
}

.tab-item:not(.active-tab-item) {
	opacity: 0.25;
}


/*
	PRESENTATION OF MAIN CONTENT
*/
#title-small {
    position:absolute;
    top:10px;
    left:10px;
    z-index:0;
    width:90px;
    height:60px;
    padding:2px;
    background-color:#006CEA;
    cursor:pointer;
    transition:all .2s ease;
    transform-origin: 50% 50%;
    border: 3px solid transparent;
}
#title-small:hover, #title-small.has-tab-focus {
    background-color:#105CDA;
    transform:scale(1.05);
    box-shadow: 0 0 50px rgba(255,255,155,1);
}
#title-small:active {
     background-color:#039;
    transform:scale(.95);
}
#title-small.has-tab-focus {
    border: 3px solid #EE0;
    outline-offset: 2px;
}


#sky-background {	/* Background sky image. */
	position: absolute;
	left:0px;
	top:0px;
	width: 960px;
	height: 270px;
}

#soil-background {	/* Background soil image. */
	position: absolute;
	left:0px;
	bottom:0px;
	width: 960px;
	height: 414px;
}

.plant-background, .plant-background-fade {	/* Background plant image. */
	position: absolute;
	top:0px;
	width: 200px;
	height: 222px;
    transition: opacity 1s ease-in;
}

.fade-in {
    animation:fade-in .3s linear;
}
.fade-in2 {
    animation:fade-in2 .3s linear;
}

.fade-out {
    animation:fade-in .3s linear; animation-direction: reverse;animation-fill-mode: forwards;
}
.fade-out2 {
    animation:fade-in2 .3s linear; animation-direction: reverse; animation-fill-mode: forwards;
}
#left-plant-background, #left-plant-background-fade {	/* Left plant image. */
	left: 50px;
}

#right-plant-background, #right-plant-background-fade {	/* Right plant image. */
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	-ms-filter: fliph; /*IE*/
	filter: fliph; /*IE*/
	right:50px;
}


#field-display {	/* A transparent target for the field */
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	height: 160px;
	background-color: rgba(0,0,0,0);
}


#field-display.has-tab-focus {
	background-color: rgba(255,255,0,0.5);
	border-radius: 1em;
	border: 4px solid #ff0;
	outline: none !important;
	z-index: auto;
}

#mockup {	/* Temporary mockup for design purposes. */
	position: absolute;
	left: 0px;
	top: 0px;
}

#soil-type-title-box { /* Title box for displaying soil type name. */
	position: absolute;
    width: 404px;
	height: 110px;
	left: calc(50% - 202px);
	top: 8px;
	margin: auto;
	display: flex;
    border-radius: 2px;
    flex-direction: row;
    flex-flow:row;
/*    overflow: hidden;*/
}


.soil-type-button  { /* soil type decrement/increment buttons */
	display:inline-flex;
    padding:0;
    align-content: center;
    align-items: center;
    justify-content: center;
    height:100%;
    width:26px;
    border:1px solid transparent;
    background:#006CEA;
    transition:background .4s ease;
    cursor:pointer;
}

.soil-type-button:hover { /* Hover state for soil type buttons. */
	color: rgba(255,255,255,.5);
	background-color: #104CCA;
}
.soil-type-button.has-tab-focus {
    border-color:#ff0;
    outline-offset: 4px;        
	background-color: #104CCA;
}

.soil-type-button:active {
	background-color: #039;
}

.soil-type-button svg {
    width:60%;
} 
.soil-type-button svg path {
    fill:#fff;
} 

.soil-type-button:hover path { 
    fill: rgba(255,255,255,.9);
}
.soil-type-button:active path { 
    fill: rgba(255,255,255,.8);
}
#soil-type-title { /* Soil name in the soil type box. */
	background-color: white;
    width:20%;
    margin:auto;
    padding:0;
    display:flex;
	font-style: italic;
	color: #211F20;
	font-size: 21px;
	font-weight: 800;
    letter-spacing:.5px;
	justify-content: center;
    text-align: center;
	align-items: center;
    letter-spacing: .03em;
}

#soil-type-box { 	/* Round rect box where soil type description goes. */
	height: auto;
	top: 48px;
    width:calc(100% - 48px);
	margin: 0px;
	display: flex;
    flex-flow:row;
	justify-items: center;
	align-items: top;
	background-color: white;
	border-radius: 2px;
    padding: 5px;
}

#soil-type-description {	/* The actual description of the soil type (inside the box). */
	height: auto;
	display: flex;
    width:80%;
	align-items: center;
	text-align: left;
	font-size: 14px;
    line-height:16px;
    font-weight:400;
    color:#211F20;
    padding: 5px;
}

#commentary-box {	/* The commentary box. */
	width: 300px;
	height: 74px;
	position: absolute;
	left: calc(50% - 150px);
	top: 124px;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
    flex-flow: column;
	background-color: white;
	color: #333;
	border: 1px solid #211F20;
	border-radius: 2px;
	text-align: center;
	font-size: 14.5px;
    line-height:18px;
	padding: 4px;
}
/*
.slide-down #soil-type-description {
    
    animation: fade-in .4s;
    animation-timing-function: cubic-bezier(0.31, -0.11, 0.57, 1.18);
    animation-iteration-count: 1;
}

.slide-down2 #soil-type-description {
    
    animation: fade-in2 .4s;
    animation-timing-function: cubic-bezier(0.31, -0.11, 0.57, 1.18);
    animation-iteration-count: 1;
}
*/
@keyframes slide-down {
    0% {
        transform:translateY(-30px) scaleY(.9);
    }
    100% {
        transform:translateY(0) scaleY(1);
    }
}

@keyframes slide-down2 {
    0% {
        transform:translateY(-30px) scaleY(.9);
    }
    100% {
        transform:translateY(0) scaleY(1);
    }
}

.pop-up{
    
    animation: pop-up .4s cubic-bezier(.31,-0.11,.57,1.6);
    animation-iteration-count: 1;
}

.pop-up2 {
    
    animation: pop-up2 .4s cubic-bezier(.31,-0.11,.57,1.6);
    animation-iteration-count: 1;
}
@keyframes pop-up {
    0% {
        transform:translateY(10px) scale(.9);
    }
    100% {
        transform:translateY(0) scale(1);
    }
}

@keyframes pop-up2 {
    0% {
        transform:translateY(10px) scale(.9);
    }
    100% {
        transform:translateY(0) scale(1);
    }
}

.commentary-heading {
    display:flex;
    font-weight:bold;
    margin:0;
    line-height:28px;
    font-size:18px;
    letter-spacing: .03em;
}

.commentary-icon {
    width:28px;
    margin-right:4px;
}

.warning.commentary-icon {
    fill: #FC7064;
}
.check.commentary-icon {
    fill: #00b59B;
}




.soil-detail-layer { 
	/*
		This class handles displaying a layer of the
		soil display.  It puts a box on the screen in the
		given place and vertical ly and horizontally centers
		the content in it.  This is necessary because
		the metrics of the stuff we put in this box can
		change slightly (such as the stroke width of the
		water). You should only have one item per detail
		layer.
	*/
	position: absolute;
	top: 200px;
	left: 351px;
	width: 257px;
	height: 257px;
	border: 2px solid #211F20;
	display: grid;
	align-items: center;
	justify-items: center;
}

.soil-detail-layer > * {
	width: 253px;
	height: 253px;
}

#soil-detail-layer-backdrop {
	background-color: #211F20;
	position: absolute;
}

#soil-ratio-display {
	position: absolute;
	zbottom: 7px;
	zleft: 345px;
	zborder: 1px solid green;
	zbackground-color: #222;
}

.graph-box {	/* The two graphs */
	position: absolute;
	top: 200px;
	border: 2px solid #211F20;
}

.visibleTabCursor .graph-box.has-tab-focus {
	outline-color: #FF0;outline-offset: 2px;           
	z-index: 1000;
	border: 2px solid #FF0;
}

#left-graph {	/* The left of the two graphs. */
	left: 10px;
}

#right-graph {	/* The right of the two graphs. */
	right: 10px;
}

#left-domain-label { 	/* The SVG for the right domain label. */
	position: absolute;
	left: 10px;
	bottom: 7px;
	width: 300px;
	height: 20px;
}

#left-range-label { 	/* The SVG for the right domain label. */
	position: absolute;
	left: 315px;
	top: 200px;
	width: 20px;
	height: 300px;
}

#right-domain-label { 	/* The SVG for the right domain label. */
	position: absolute;
	right: 10px;
	bottom: 7px;
	width: 300px;
	height: 20px;
}

#right-range-label { 	/* The SVG for the right domain label. */
	position: absolute;
	right: 315px;
	top: 200px;
	width: 20px;
	height: 300px;
}

#soil-detail-overlay.has-tab-focus {
	z-index: auto;
	outline: 2px dotted #FF0;
	outline-offset: 6px;
	border: 2px solid #FF0;
}
#soil-ratio-display.has-tab-focus {
	outline: none;
	outline-offset: 6px;
	border: none;
}

#credits-button {
    display:flex;
    position:absolute;
    right:10px;
    bottom:10px;
    color:#fff;
    text-decoration:none;
    padding:5px;
    border:2px solid #fff;
    border-radius:2px;
    font-size:18px;
    letter-spacing:1px;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-color:rgba(0,0,0,.0);
    transition:all .3s ease-out;
}
#credits-button:hover, #credits-button.has-tab-focus { 
    transform:scale(1.05);
    background-color:rgba(0,0,0,.2);
    border-color:yellow;
    box-shadow: 0 0 5px rgba(255,255,155,1);
    
}
#credits-button:active{ 
    transform:scale(.95);
    background-color:rgba(0,0,0,.5);
}
#welcome-window {	/* The window on intro screen. */
	width: 48%;
	position: absolute;
	left: 26%;
	top: 200px;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	color: #fff;
	border: 1px solid transparent;
	border-radius: 1px;
	text-align: center;
	padding: 5px;
	font-size: 18px;
}

.credits-container {
    position:relative;
    height:540px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background:url('images/sky-bg.png');
    background-size:cover;
    color:#211F20;
}
.credits {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap: 2em;
}

.credits-container h1 {
    font-style:italic;
    letter-spacing: .1em;
    margin:5px 0;
}
.credits dt {
    margin:18px 0 2px 0;
    letter-spacing: .01em;
    font-size:15px
}
.credits dd {
    margin:2px 0;
    font-family:Lato, sans-serif;
    font-size:16px;
    line-height:18px;
}

#title {
    position:absolute;
    height:150px;
    width:250px;
    top:25px;
    left:calc(50% - 125px);
    padding:0;
    margin:0;
}

#TITLE-ENG {
    height:100%;
    width:100%;
    padding:0;
    margin:auto;
    line-height:0;
    text-indent:-10000px;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('../SVG/MatricFullTitle.svg');
}
#TITLE-ENG-SMALL {
    height:100%;
    width:100%;
    padding:0;
    margin:auto;
    line-height:0;
    text-indent:-10000px;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('../SVG/MatricTitleLarge.svg');
}
#welcome-message {
	padding:0;margin:0;
}
#welcome-message p {
    margin:2px 0;
    padding:0;
}

#menu-window {
    position:absolute;
    top:240px;
    width:48%;
    left:26%;
}

#menu-window > .soil-button,
#menu-window > button.soil-button {
    position:relative;
    display:flex;
    border-radius:2px;
    align-items: center;
    justify-content: center;
	height:80px;
	border: 3px solid rgba(255,255,255,1);
	background-position: center; 
    overflow:hidden;
    margin:5px 0;
    transition:all .3s ease-out;
    cursor: pointer;
    width: 100%;
}

#menu-window > .soil-button:hover,
#menu-window > .soil-button.has-tab-focus,
#menu-window > .soil-button:focus {
	border: 3px solid yellow;
	outline: none;
    box-shadow: 0 0 10px rgba(255,255,155,1);
    transform:scale(1.02);
}

#menu-window > .soil-button:active {
    transform:scale(.95);
}
#menu-window > .soil-button .soil-button-text {
    position:relative;
    display:inline-block;
    width:auto;
    height:34px;
    padding:0 12px;
    background:#fff;
    font-size:24px;
    line-height:34px;
    margin:0 auto;
    font-weight:bold;
    color:#333;
}
#menu-window > .soil-button:before {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:100%;
	background-position: center; 
    z-index:0;
}

#clay-button {
	background-image: url(images/clay-soil-bg.png);
}
#clay-button:before {
    background-image:url(images/clay-particles.png);
}
#loam-button {
	background-image: url(images/loam-soil-bg.png);
}
#loam-button:before {
    background-image:url(images/loam-particles.png);
}
#sand-button {
	background-image: url(images/sand-soil-bg.png);
}
#sand-button:before {
    background-image:url(images/sand-particles.png);
}

@keyframes fade-in {
    0%{
      opacity:0;  
    }
    100%{
        opacity:1;
    }
    
}
@keyframes fade-in2 {
    0%{
      opacity:0;  
    }
    100%{
        opacity:1;
    }
    
}

.debug-links, #FULLSCREEN {
    font-family: Lato, sans-serif;
    font-size:16px; 
    display:inline-flex;
    align-items: center;
    width:auto;
}

#FULLSCREEN-BUTTON, .debug-links a, .debug-links button {
    display:block;
    text-decoration:none;
    padding:4px 8px;
    border-radius:4px;
    border:0;
    font-size:16px;
    color:#fff;
    background:#211F20;
    margin:4px 5px;
}
/*
	Soil particle water animation
*/

path.st0 {
	transition: stroke-width 1s cubic-bezier(.39,-0.16,.58,1.55);
    animation-name:stroke_anim;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 100s;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@keyframes stroke_anim {
    
    
    
}



.click-receiver * {
	pointer-events: none;
}

.click-receiver .graph-point {
	pointer-events: auto;
	
}

/* ------------------------------GLOSSARY BUTTON ---*/
#glossary-button {
    display:flex;
    position:absolute;
    padding:5px;
    border-radius:2px;
    font-size:18px;
    letter-spacing:1px;
    justify-content: center;
    cursor:pointer;
    transition:all .3s ease-out;
    z-index:1;
    background-color:#006CEA;
    color: #fff;
    margin: 0px;
    align-items: center;
    cursor: pointer;
    right:10px;
    top:10px;
    left:auto;
    bottom:auto;
    height: 50px;
    border: 3px solid rgba(0,0,0,0);
} 

#glossary-button:hover, #glossary-button.has-tab-focus { 
    transform:scale(1.05);
    background-color: #10508A;
    box-shadow: 0 0 50px rgba(255,255,155,1);
}
#glossary-button.has-tab-focus {
    outline-offset: 2px;
    box-shadow: 0 0 50px rgba(255,255,155,1);
    
    border: 3px solid #EE0;
}
#glossary-button:active{ 
    transform:scale(.95);
    background-color: #10407A;
}