/*
-----------------------------------------------------
CSS
By: 		James Hutson
URL:		sonofhut.com & jameshutson.net
Date: 		19 Sep 2017
------------------------------------------------------ */

/* -- basic html elements -- */
body {padding: 0; margin: 0; margin-top: 20px; 
font-family: "Quicksand", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size:62.5%; color:#000; text-align:left; background: transparent;
}

h1 {margin: 0.5em; color: #000; font-size: 3.0em; font-weight:normal; line-height: 1em; letter-spacing:0px; text-align:left;}
h1 a {color: #000;}


h2 {margin: 0.5em; color: #000; font-size: 2.25em; font-weight:normal; line-height: 1em; letter-spacing:0px; text-align:left;}
h2 a {color: #000;}


h3 {margin: 1em 0.5em; color: #000; font-size: 2em; font-weight:normal; line-height: 1em; letter-spacing:0px; text-align:left;}
h3 a {color: #000;}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* ---- grid ---- */



/* center container with CSS */
.container {
  background-color: #fff;
  width: 95%;
  height: auto;
  margin: 0 auto;
  position: relative;
}


.footer {
  background-color: #fff;
  width: 95%;
  height: auto;
  margin: 0 auto;
  position: relative;
  clear:both;
}

div#menuspacer {
	height:60px;
}

img {
width: 280px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .25);

}




div.intro {
padding-bottom: 12px;	
}

img.sixteennine {
width: 500px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 0px 0px 0px white;
}

iframe {
width: 500px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 0px 0px 0px white;
}

img.threeone {
width: 580px;
height: 193px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 0px 0px 0px white;
}


img.small169 {
width: 498px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 0px 0px 0px white;
}

p.cantembed {
color:#fff;
text-decoration: none;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);	
}

div.textsq  {
display:inline-block;
display: -moz-inline-block;
vertical-align:top;
width: 280px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
/*position: relative;*/
}	

div.textsq h3 {
display:inline-block;
display: -moz-inline-block;
vertical-align:top;
font-style: normal;
line-height: normal;
font-weight: 500;
margin: 0.5em 0.5em;
/*position: relative;*/
}	

div.textsq h2 {
display:inline-block;
display: -moz-inline-block;
vertical-align:top;
font-size: 2em;
font-style: normal;
line-height: normal;
font-weight: 400;
margin: 0.5em 0.5em;
/*position: relative;*/
}

h1.nameheader {
font-size: 4em; margin: 0.5em; color: #000;  font-weight:normal; line-height: 1em; letter-spacing:0px; text-align:left;}

h3.footnote {
	margin: 1em 0.5em; color: #000; font-size: 1.5em; font-weight:lighter; line-height: 1em; letter-spacing:2px; text-align:left;}

div.projectinfoblock  {
display:inline-block;
display: -moz-inline-block;
vertical-align:top;
width: 580px;
height: 326px;	
margin-left:20px;
margin-bottom: 20px;
position: relative;
}	

div.projectinfoblock h1 {
font-style: italic;
font-weight: 700;
font-size: 2.75em;
margin: 0 0 0.5em 0;
}

div.projectinfoblock h3 {
font-style: normal;
line-height: normal;
font-weight: 500;
margin: 0 0 0.5em 0;
}

div.projectinfoblock p {
font-weight: 300;
font-size: 2em;
font-style: normal;
line-height: normal;
margin: 0 0 0.5em 0;
color: #707070;
}

div.projectinfoblock p.cantembed {
color:#fff;
text-decoration: none;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);	
}

div.projectinfoblock p.cantembed a{
color:#fff;
}

.button:active{
    -webkit-transform:scale(0.99); 
    -moz-transform:scale(0.99); 
    -ms-transform:scale(0.99); 
    -o-transform:scale(0.99); 
    transform:scale(0.99); 
    -webkit-box-shadow:2px 2px 2px #ddd; 
    -moz-box-shadow:2px 2px 2px #ddd; 
    -o-box-shadow:2px 2px 2px #ddd; 
    box-shadow:2px 2px 2px #ddd; 
}

#menu_header {
position: fixed;
top: 0px;
width: 100%;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .25);
z-index: 1;
background-color: white;
}

#menu_header a {
text-decoration: none
}

div.shorter {
	height:280px;
}


div.evenshorter {
height: 193px;	
}


.big{
width: 580px;
height: 580px;	
}

div.wide{
width:100%;
height: auto;	
 }
 

div.footer {
	clear:both;
	}

div.contactblock h1 {
	font-style: normal;
	font-size: 3.25em; 
	font-weight:normal;
margin: 0.5em 0.5em;

}

img.noshade{
-webkit-box-shadow:0px 0px 0px 0px #eee;
-moz-box-shadow:0px 0px 0px 0px #eee;
-o-box-shadow:0px 0px 0px 0px #eee;    
box-shadow:0px 0px 0px 0px #eee;
border: 1px solid #eee;
}

div.long {
	height:580px;
}


.tall {
width: 280px;
height: 648px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 0px 0px 0px white;
}

div.small169{
width: 498px;
height: 280px;
}

/* -- clickable text boxes for phone email... looked meh -- 
.textbox {
display:inline-block;
display: -moz-inline-block;
vertical-align:top;
width: 280px;
height: 280px;	
margin-left:20px;
margin-bottom: 20px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .25);
position: relative;
border: 1px solid #9f9f9f;
}	


 
.textbox h1 {
	text-align: center;
	font-size: 4em;
	color:#9f9f9f
	;
}


#email{
	
		background-color: #fff;

	} 
	
#email a {
	color:#333;
text-decoration: none;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	}
	
#phone{	

				background-color: #fff;
}

#phone a {
	color:#333;
text-decoration: none;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	}
	
	*/

/* -- old bg -- 
body {padding: 0; margin: 0; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:62.5%; color:#000; text-align:center; background: transparent url("../img/soh_dnastrand.gif") repeat-x -13em 19.8em;
}
*/


/* -- old jan13 css -- 

a {color: #000; text-decoration: underline;}
a:visited {color: #000; underline; color: #000;}
a:hover {text-decoration: underline; color: #000;}
h1 {margin: 0.3em 0 0 0; color: #000; font-size: 3.5em; font-weight:normal; line-height: 1em; letter-spacing:0px; }
h1 a {color: #000;}
h2 {font-size: 4.1em; line-height: 0.4em; margin: -0.25em 0 0 0; color: #000; font-weight:normal; }
h3 {margin: 0; padding: 0; font-weight:700; text-transform: lowercase; color: #000; font-size:2em; }
h4, h5, {font-size: 1em; display: block; font-weight: bold; margin: 0.8em 0 0 0; padding-bottom: 0; text-transform: uppercase; }
h4 a, h5 a {font-weight: bold;}
h5 {color: #000;}
h6 {font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px;}
p {margin: 0; font-size:2em;}
img, form {border:0; margin: 0;}
hr {height: 0px; width: 100%; background-color:#000; color:#000; }
strong{ font-weight:700; }



/* -- layout -- */
/* -- old jan13 css -- 
.hidden {
display:none;
}

#content {width: 63em; height: auto; margin: 0em auto; text-align: left; background: transparent;  border: 0;  } 

.project_title{

}


#dnastrand {
height: 29em;
}
p#timestamp, p#copyright {
margin: 0 0 0 0.5em; text-align: left; background: transparent; border: 0; color:#000; font-size: 9px;
}

p#copyright {
margin: 3em 0 0 0; color:#fff;
}
  
h1#logotopright {  
text-align: right; background: transparent; border: 0;
position: relative;
color:#000;
right: -0.8em;
top: -0.1em;
}
  
#slides, #footer {
  padding-left:0;
 margin: 0 0 1em 0;
	display: block;
	float:left;
	 text-align: left;
	}
	
#slides{	
	background: transparent url("../img/soh_scientists.gif") no-repeat 0em 17em; background-size: 60em;
	}
	
.slidecol {
float:left;
display: block;
margin:0;
padding:0;
 text-align: left; 
}


h3.project_title {
color: #000;
}


a.overlay, a.overlay span.slidetext h3.project_title{
color: transparent;
}

  
span.slidetext {
 margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  border: 0;
  margin-top: 5em;
padding: 0 0 0 1em;
display:block;
  }

a.overlay:hover, a.overlay:hover span.slidetext, a.overlay:hover span.slidetext h3.project_title{
color: #000;
visibility: visible;
text-decoration: none;
}

a.overlay:hover span.slidetext{
width:63em;
height:5em;
background-color: #000;
}

.textbox{
	border: solid 1px transparent;
	 text-align: left; 
}

.textbox{
  margin:0;
  padding: 0;
	
	border: solid 1px transparent;
	text-align: left;}

ul.slide {
  margin: 0;
  padding: 0;
	
	line-height: 1.4em;
	display: inline;
	border: solid 1px transparent;
}


li.slide, li.textbox {
  padding: 0;
  margin-bottom: 2.5em;
  margin-right: 1em;
  clear: left;
  text-align: left;
  display: block;
  width: 60em;
}

li.slide h3, li.slide p {
text-align: left;}

li.slide img{
  float: left;
  margin-right:1em;
  border: solid 1px #000;
  display: block;
  height: 10em;
  width: 10em;
 
}



.vcard {
margin-left: 120px;
padding: 40px 10px 40px 15px;
text-align:left;
font-weight: normal;
line-height: 1.2em;
color:#666;
background: #fff;
}


.given-name {
font-size:120%;
font-weight:bold;
color:#000;
}

.family-name {
text-transform:uppercase;
font-weight:bold;
font-size: 120%;
color:#000;
}
.title {
font-size:100%;
font-weight:bold;
margin: 2px 0 2px 0;
color:#000;
}

h3#description, h3.contact, a#contact {
font-size: 2em;
color:#000;
margin: 0; padding: 0; text-transform: lowercase;
}

h3#description {
font-weight:normal;
}
	
a#contact, p#copyright {
font-size: 1.5em;}

.footer {
background: #000;
color:#fff;
width:100%;
height: auto; margin: 0em auto; text-align: left; 
padding: 2em 0 2em 0em;
}


.footer h3.contact, .footer h3.contact a {
color:#fff;
}

.title {

}

a img {
border-bottom:1px #000; 
border-left:1px #000; 
}


p.project_feat{
margin-top:0.2em;
font-size:1.6em;
}

-- */