* {
	margin: 0;
	padding: 0;
	}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	}


body {
	margin: 0;
	padding: 44px 0 64px;
	font: 24px/29px Helvetica, Arial, sans-serif;
	color: #333;
	background: #739f73 url(../img/body-bg.png) repeat 0 0;
	}

h1, h2, h3, h4, p, ul, ol, blockquote {
	padding-bottom: 1em;
	}

p {
	font: 24px/29px Arial, sans-serif;
	color: #333;
	}

ul, ol, blockquote {
	margin-left: 32px;
	line-height: 1.3em;
	}

h1 {
	font: bold 46px/51px Helvetica, Arial, sans-serif;
	color: #333;
	padding-bottom: 38px;
	}

h2 {
	font: normal 21px/26px Helvetica, Arial, sans-serif;
	color: #333;
	}

h3 {
	font: bold 17px/22px Helvetica, Arial, sans-serif;
	color: #333;
	padding-top: 1em;
	}

hr {
	border: 0;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	margin: .5em 0 1em;
	/* box-shadow */
	-webkit-box-shadow: 0 1px 0 #f4f4f4;
	-moz-box-shadow: 0 1px 0 #f4f4f4;
	box-shadow: 0 1px 0 #f4f4f4;
	}

a,
a:visited {
	color: #369;
	text-decoration: underline;
	}

a, a:active {
	outline: none;
	}

a:hover,
a:visited:hover {
	color: #812a22;
	text-decoration: none;
	}

img {
	border: 0;
	}


/* misc */


/* Structure Tags */


#site-header {
	text-align: center;
        padding: 0 12px;
	}

#site-header a {
	color: #fff;
	line-height: .95;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	margin: 0 auto;
	padding: 14px 0 8px 2.8em;
	background: transparent url(../img/dh-mark.svg) no-repeat;
        background-size: contain;
	}
@media (max-width: 540px) {
	#site-header a {
		font-size: 28px;
	}
}

#site-header a:hover {
	
	}

#site-header .description {
  padding-bottom: 60px;
  }	
#site-header .description p {
  color: #314a31;
  font-size: 23px;
  font-weight: bold;
  text-shadow: 0 1px 0 #86ae86;
  padding-bottom: 0;
  }
	
#site-footer h3,
#site-footer p {
	text-align: center;
	color: #fff;
	}
	
#site-footer h3 {
  font-size: 24px;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #456e45;
  padding-top: 35px;
  }
  
#site-footer p {
  font-size: 14px;
  line-height: 19px;
  text-shadow: 0 -1px 0 #4b7a4b;
  }
  
#site-footer p.branding {
  color: #c3dcc3;
  font-size: 12px;
  line-height: 17px;
  }
  
#site-footer p.branding.logo a {
  display: block;
  text-indent: -1000000px;
  width: 158px;
  height: 56px;
  margin: 0 auto;
  background: transparent url(../img/designhammer-logo.png) no-repeat 0 0;
  }

#site-footer a, 
#site-footer a:visited {
	color: #fff;
	}

#site-footer a:hover, 
#site-footer a:visited:hover {
	text-decoration: none;
	}
	
#site-footer hr {
  max-width: 670px;
	color: #ccc;
	background-color: #5d875d;
	margin: .5em auto 1em;
	/* box-shadow */
	-webkit-box-shadow: 0 1px 0 #7da87d;
	-moz-box-shadow: 0 1px 0 #7da87d;
	box-shadow: 0 1px 0 #7da87d;
	}
	
/* */

.send-dh {
  padding: 20px 0;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  }
.send-dh.bottom {
  border-top: 1px solid #ddd;
  border-bottom: none;
  }

.send-dh label {
  font-size: 32px;
  font-weight: bold;
  }
  
.send-dh input {
  width: 146px;
  height: 48px;
  padding-right: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  font-size: 30px;
  line-height: 34px;
  border: none;
  background: transparent url(../img/send-btn.png) no-repeat -146px 0;
  cursor: pointer;
  }
.send-dh input:hover {
  background-position: 0 0;
  }
  
/* */

#content {
  background: #f0f0f0 url(../img/content-bg.png) repeat 0 0;
  }
  
#content #content-wrap {
  max-width: 450px;
  margin: 0 auto;
  padding: 1em 12px;
  }
  
#content.page {
	border-top: 20px solid #fff;
	border-bottom: 20px solid #fff;
	}
  
#content.page #content-wrap {
	width: 100%;
	padding: 120px 0 130px;
	text-align: center;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}
  
#content p {
  font-weight: bold;
  padding: 0;
  }
  
#content p span {
  color: #696;
  }
#content p span.disabled {
  color: #cc2320;
  }
#content p .var--warning {
  color: #d39e00;
  }
  
#content p.javascipt-instructions {
  padding-top: 4px;
  font-size: 12px;
  line-height: 17px;
  }
  
#content hr {
  margin: 0;
  }
  
#content .test#comments {
  padding: 40px 0;
  }
  
#content label {
  background: #739f73 url(../img/body-bg.png) repeat 0 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  color: #fff;
  display: block;
  text-shadow: 0 -1px 0 #366036;
  padding: 14px 14px 10px 14px;
  }
  
#content textarea {
  font: 19px/24px Helvetica, Arial, sans-serif;
  color: #333;
  border: 2px solid #6d986d;
  box-sizing: border-box;
  padding: 6px;
  width: 100%;
  height: 260px;
  /* box-inner-shadow */
    -webkit-box-shadow: inset 0 2px 6px #e0e0e0;
    -moz-box-shadow: inset 0 2px 6px #e0e0e0;
    box-shadow: inset 0 2px 6px #e0e0e0;
  }
  
#content .test {
  padding: 40px 0 40px 70px;
  background: transparent no-repeat left center;
  }
  
#content .test#javascript-test {
  background-image: url(../img/icon-script.png); }
#content .test#browser-test {
  background-image: url(../img/icon-browser.png); }
#content .test#os-test {
  background-image: url(../img/icon-os.svg); }
#content .test#screen-test {
  background-image: url(../img/icon-screen.svg); }
#content .test#viewport-test {
  background-image: url(../img/icon-viewport.svg); }
#content .test#dpi-test {
  background-image: url(../img/icon-dpi.svg);
  background-position: 2px center;
  background-size: 42px;
}
#content .test#flash-test {
  background-image: url(../img/icon-flash.png); }
#content .test#cookie-test {
  background-image: url(../img/icon-cookies.png); }
#content .test#canvas-test {
  background-image: url(../img/icon-canvas.png); }
#content .test#video-test {
  background-image: url(../img/icon-video5.png); }
#content .test#ad-blocking-test {
  background-image: url(../img/icon-shield.svg);
  background-position: 10px center;
  background-size: 29px;
}