/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ########################### END RESET ########################## */

html{font-size:24px;}
body {font-size:1.2rem;}



body {
font-family: 'Open Sans', sans-serif;
color:#444;
background-color: #ddd;
}

h1,h2,h3,h4,h5,h6 {
letter-spacing: -0.05rem;
font-weight:400;
line-height: 2.4rem;
}

h1{
font-size: 2.4rem;
line-height: 3.4rem;
margin-left: -0.2rem;
}

legend,
h1,h2,h3,h4,h5,h6,
a
{
font-family: 'Share Tech Mono', monospace;
}

a {color:#d00;text-decoration:none;}
a:hover {text-decoration:underline;}

p{
font-size:inherit;
margin:2rem 0;
line-height: 2.3rem;
letter-spacing: 0.033rem;
}

h2{font-size: 1.8rem;}

h3{
    color: #222;
    font-style: italic;
    font-size: 1.3rem;
    margin: 0 -0.2rem;
    line-height: 1rem;
}

input{
    line-height: 2rem;
    border-radius: 0.4rem;
    border: none;
    padding: 0 1rem;
    font-size: 1rem;
}

input[type=submit]{
background-color:#09f;
color:#fff;
font-size:1rem;
font-weight:600;
}


#container{
width: 95%;
margin: 0 auto;
max-width: 77rem;
background-color: #eee;
box-shadow: 0.5rem 0rem 1.5rem 1.5rem #ccc;
}

#dnaCont {
width: 95%;
margin: 0 auto;
padding: 0 2rem 4rem;
max-width: 90%;
}

#dnaInputBox {
width:100%;
margin:1rem 0;
border: 1px solid #b4b4b4
}

#dnaSubmit {
opacity:0.6;
}

.initial{
color:#777;
font-style:italic;
}

.errMsg{
    color: #f00;
    font-weight: bold;
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    position: relative;
    top: -0.7rem;
}


.domGene,.domCatt  {
background-color:#ff3;
}

.regGene,.regCatt {
background-color:#fff;
}

.regGene, .domGene {
padding:0.5rem;
font-family: 'Courier New', monospace;
}
.regGene, .domGene, .cattributes {
border-top:0.4rem solid #b8b8b8;
}

.traitGroup {
display:block;
margin:1rem 0;
}


.junkGenes * {
background-color:#f5f;
padding:0;
margin:0;
border-top:none;
}

.junkGenes .traitGroup {
display:inline-block;
margin:0;
text-align:center;
}
.junkGenes.regGene, .junkGenes.domGene{
border:none;
}


.junkGenes {
display:block;
}
.junkGenes {
display:none;
}

.resultsKey {
border:1px solid #ccc;
padding: 1rem 2rem;
border-radius: 0.4rem;
background-color:#ddd;
}

.resultsKey legend {
border:1px solid #ccc;
background-color: #fcfcfc;
border-radius: 0.4rem;
padding: 0.75rem;
}
.resultsKey div {
margin:1rem 0;

}

.resultsKey .regCatt {
padding:0.75rem 0;

}

.traitTitle {
text-transform:capitalize;
display:block;
font-family: 'Share Tech Mono', monospace;
}

.cattributes {
margin:0 1rem;
position:relative;
bottom:-0.2rem;
padding-top:0.4rem;
}

.cattribute {
display:inline-block;
width:12rem;
text-align:center;
position: relative;
}

.regCatt {

}

.domCatt {

}
.recess {
border-bottom:0.2rem solid #0ff;
padding-bottom:0;
}
.unpaired {

padding-top:0;
}

.unknown {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}



.unpaired {
background: 
  /* On "top" */
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    #ddd 10px,
    #dadada 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #f5f5f5,
    #eaeaea
  );
text-shadow: 0.5rem 0.2rem 0.3rem #bbb;
}

.domCatt.unpaired  {
background: 
  /* On "top" */
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    #fd0 10px,
    #fada0a 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #ff0,
    #ee0
  );
text-shadow: 0.5rem 0.2rem 0.3rem #da0;
}

.discont {
background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ddd 10px,
    #dadada 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #f5f5f5,
    #eaeaea
  );
text-shadow: 0.5rem 0.2rem 0.3rem #bbb;
}

.domCatt.discont  {
background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #fd0 10px,
    #fada0a 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #ff0,
    #ee0
  );
text-shadow: 0.5rem 0.2rem 0.3rem #da0;
}

.capped {
opacity:0.6;
}

ol.orderedList{
list-style: ordered;
margin-left: 1.4rem;
}

.orderedList li {
padding:1rem 0;
padding-left:1.22rem;
line-height: 1.6rem;
color:#777;
}

h5.imgCaption {
margin:0;
font-size:1rem;
font-style:italic;
}

.helpImg {
width:100%;
height:auto;
max-width:1024px;

}

.t1, .t2, .t3, .t4, .t5, .t6 {
border-radius: 1rem;
width: 1.5rem;
height: 1.5rem;
display: inline-block;
font-size: 0.75rem;
line-height: 1.5rem;
position: absolute;
left: 0.25rem;
top: 0.25rem;}
.t1 {
background-color:#ddd;
}
.t2 {
background-color:#0082d2;
color:#fff;
}
.t3 {
background-color:#00c3b3;
color:#fff;
}
.t4 {
background-color:#ffe500;
}
.t5 {
background-color:#ff8800;
color:#fff;
}
.t6 {
background-color:#8cdd00;
color:#fff;
}


.newTrait {
background-color:#0ff !important;
}

/* ################################## MEDIA ############################## */
@media only screen and (max-width: 1400px) {

html{font-size:28px;} 

#container{width: 85%;}
#dnaCont{width:80%}

}

@media only screen and (max-width: 800px) {

html{font-size:20px;}

div#dnaCont{ 
padding: 0 0.5rem 2rem;
width:88%;
}
#container{
width:93%;
}


}