:root {
	--primary-text-color: #1c5087;
	--secondary-text-color: #3f9aba;
	--bg-gray-color: #f8f8f8;
	--bg-blue-light-color: #c2defd;
}
@font-face 
{
        font-family: 'DejaVuSans';
        src: url('../../fonts/dejavusans-webfont.eot');
        src: local('âº'), url('../../fonts/dejavusans-webfont.woff') format('woff'), url('../../fonts/dejavusans-webfont.ttf') format('truetype'), url('../../fonts/dejavusans-webfont.svg#webfont7D8p2GZt') format('svg'), local('DejaVu Sans');
        font-weight: normal;
        font-style: normal;
}
@font-face 
{
        font-family: 'DejaVuSansBold';
        src: url('../../fonts/dejavusans-bold-webfont.eot');
        src: local('âº'), url('../../fonts/dejavusans-bold-webfont.woff') format('woff'), url('../../fonts/dejavusans-bold-webfont.ttf') format('truetype'), url('../../fonts/dejavusans-bold-webfont.svg#webfont7D8p2GZt') format('svg'), local('DejaVu Sans Bold');
        font-weight: bold;
        font-style: normal;
}

* { padding: 0; margin: 0; border-width: 0;}
html { 
	border: 0; overflow: hidden; 
	border: 1px solid var(--secondary-text-color);
}

.hide508 /* this is an attempt to use a style rule that will hide this element from visual rendering
            while still displaying it in screen readers.  Screen readers can be surprisingly varied 
            in how they honour screen media types.  Obviously anyone disabling screen stylesheets
            will not have an issue.  http://www.access-matters.com/screen-reader-test-results/ */
{
    position:absolute; 
    left:0px; 
    top:-500px; 
    width:1px; 
    height:1px; 
    overflow:hidden;
}
.center
{
    display: block;
    margin: auto;
}
h1 { padding-right: 10px; }
body
{
    background: linear-gradient(0deg, #c2defd, #ffffff);
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-family: "DejaVuSans", Arial, sans-serif;
    font-size: 10px;
    width: 168px;
    height: 248px;
    overflow:hidden;
}
h1 { padding-right: 10px; }
h1 a
{
    text-indent: -1000px;
    display: block;
    /* width: 114px; */
    height: 30px;
    margin: auto;
    background: url(../../images/logo-hero.png) scroll no-repeat top left;
    background-size: contain;
    margin-top: 5px;
    margin-bottom: 5px;
}
p 
{ 
    margin-top: 4px; 
    margin-bottom: 5px;
    width: 160px;
}
/* form h3:after, label.colon:after { content: ": "; } */
form h3, label.colon
{
    font-family: DejaVuSansBold, Verdana, sans-serif;
    font-weight: bold;
    font-size: 9px;
    display: inline-block;
}
form li 
{ 
    display: block; 
    margin: 0;
}
fieldset { margin-bottom: 3px; }
input#age_id, button { border: 1px solid #999; }
input
{
    display: inline-block;
    margin-top: 6px;
    vertical-align: bottom;
}
input#age_id 
{ 
    width: 3em; 
    text-align: right;
    background-color: white;
}
#male_label { margin-right: 24px; }
h3.fixed { width: 82px; }
.buttons 
{
    text-align: center; 
    padding-right: 10px;
}
#info
{
    margin: 0; 
    padding: 0;
    position: fixed;
    left: 10px;
    top: 220px;
    text-align: center;
    width: 158px;
}
#info a 
{ 
    text-decoration: none; 
    color: white;
}
#hhs, #ahrq, #uspstf
{
    display: inline-block;
    text-indent: -1000px;
    height: 31px;
    width: 32px;
}
/* these have to be separate images to support IE6 transparency fixes :( */
#hhs { background: transparent url(../../images/widget/hhs-trans.png) scroll no-repeat top left; }
#uspstf { background: transparent url(../../images/widget/uspstf-trans.png) scroll no-repeat top left; }
#ahrq
{
    width: 35px;
    background: transparent url(../../images/widget/ahrq-trans.png) scroll no-repeat top left;
}
#results
{
    margin-left: 13px;
}
#results li 
{ 
    list-style-type: square; 
    margin-bottom: 2px;
}
p { 
    margin-top: 4px; 
    width: 160px;
}
fieldset { margin-bottom: 3px; }
input#age_id,
input#weight_id,
input#height_ft_id,
input#height_in_id,
button { border: 1px solid #999; }
input
{
    display: inline-block;
    margin-top: 6px;
    vertical-align: bottom;
}
input#age_id,
input#weight_id,
input#height_ft_id,
input#height_in_id 
{ 
    width: 3em; 
    text-align: right;
    background-color: white;
}
#male_label { margin-right: 24px; }
h3.fixed { width: 82px; }
.buttons 
{
    text-align: center; 
    padding-right: 10px;
}
button
{
    background-color: #c9e2ab;
    color: black;
    font-size: 9px;
    padding: 1px 5px 1px 5px;
    margin-left: 5px;
    margin-top: 10px;
}
/* Buttons */
.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus {
	cursor: pointer;
    color: #fff;
    font-size: 10px;
    font-weight: 300;
    padding: 5px 10px;
    margin: 5px 0;
    border: 1px solid transparent;
    border-radius: 0;
    outline: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
    user-select: none;
    letter-spacing: 0.05rem;
    width: auto;
    font-weight: 500;
}
.btn.btn-full {
	width: 100%;
}
.primary-btn {
    background: white;
    color: var(--primary-text-color);
    border: 1px solid var(--primary-text-color);
    fill: white;
}
.primary-btn:hover,
.primary-btn:hover:after,
.primary-btn.btn-fillup:after,
.primary-btn:focus {
	background: var(--primary-text-color);
    color: white;
    border: 1px solid var(--primary-text-color);
    fill: var(--primary-text-color);
}
.secondary-btn {
    background: white;
    color: var(--secondary-text-color);
    border: 1px solid var(--secondary-text-color);
    fill: white;
}
.secondary-btn:hover, 
.secondary-btn:hover:after, 
.secondary-btn.btn-fillup:after,
.secondary-btn:focus {
	background: var(--secondary-text-color);
    color: white;
    border: 1px solid var(--secondary-text-color);
    fill: var(--secondary-text-color);
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}