/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden]:not(embed) {
  display: none;
}
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.231;
  background: #cbdaee;
}
body,
button,
input,
select,
textarea {
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  color: #222;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection {
  background: #96C674;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #96C674;
  color: #fff;
  text-shadow: none;
}
/* =============================================================================
Links
========================================================================== */
a {
  text-decoration: none;
  color: #2c86da;
}
a:hover {
  color: #0759a5;
}
a:focus {
  outline: thin dotted;
}
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover,
a:active {
  outline: 0;
}
/* ==== Detail Links ================================ */
#header a {
  color: #2780CD;
}
#header a:hover {
  color: #fff;
}
/* =============================================================================
Typography
========================================================================== */
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-family: 'PTSansNarrowBold', Arial, sans-serif;
  font-weight: normal;
}
blockquote {
  margin: 1em 40px;
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
}
dfn {
  font-style: italic;
}
hr {
  display: block;
  height: 2px;
  border: 0;
  border-width: 0;
  margin-top: 30px;
  background-color: #2989d8;
  width: 920px;
  padding: 0;
  clear: both;
}
ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-family: 'PTSansNarrowBold', Arial, sans-serif;
}
/* Redeclare monospace font family: h5bp.com/j */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
/* Improve readability of pre-formatted text in all browsers */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
small {
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  font-weight: normal;
  font-size: 85%;
  color: black;
}
.small2 {
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  font-weight: normal;
  font-size: 65%;
  color: black;
}
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub,
sup {
  font-size: 30%;
  line-height: 0;
  position: relative;
  vertical-align: middle;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* =============================================================================
Lists
========================================================================== */
ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}
dd {
  margin: 0 0 0 40px;
}
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) {
  overflow: hidden;
}
/* =============================================================================
Figures
========================================================================== */
figure {
  margin: 0;
}
/* =============================================================================
Forms
========================================================================== */
form {
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer;
}
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
}
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button,
input,
select {
  font-size: 100%;
  margin: 0;
  vertical-align: top;
  *vertical-align: middle;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button,
input {
  line-height: normal;
  *overflow: visible;
}
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
table button,
table input {
  *overflow: auto;
}
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea {
  overflow: auto;
  resize: vertical;
  background: #fff;
  padding: 5px 10px 5px 10px;
  margin: 0 0 10px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
textarea {
  font-size: 16px;
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
}
/* Colors for form validity */
input:invalid,
textarea:invalid {
  background-color: #c2d7ea;
}
/* =============================================================================
Tables
========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  vertical-align: top;
}
/* =============================================================================
Miscellaneous classes
========================================================================== */
.clearboth {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.crutchguy {
  float: left;
}
.indent1 {
  width: 250px;
  margin-left: 400px;
}
.indent2 {
  width: 250px;
  margin-left: 300px;
}
.indent3 {
  width: 250px;
  margin-left: 430px;
}
.margindropdown1 {
  margin-top: 8px;
}
.margindropdown2 {
  margin-top: 16px;
}
.black {
  color: black;
}
.red {
  color: #e00707;
}
.blue {
  color: #0568c4;
}
.hidethat {
  opacity: 0;
}
/* =============================================================================
Structure
========================================================================== */
#content {
  position: relative;
  margin: 0px auto 0 auto;
  background: #ffffff url(../images/hc2_bg.jpg) no-repeat;
  width: 960px;
  height: 870px;
  overflow: hidden;
}
#header {
  position: relative;
  z-index: 1000;
  height: 150px;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
}
#header img {
  position: absolute;
  left: 580px;
}
#guide1 {
  position: absolute;
  top: 45px;
  left: 45px;
  z-index: 1100;
  opacity: 1;
}
#minibubble {
  position: absolute;
  top: 78px;
  left: 145px;
  z-index: 1110;
}
#bubbletalk {
  position: absolute;
  top: 98px;
  left: 193px;
  width: 525px;
  z-index: 1150;
}
#guide1start {
  position: absolute;
  top: 45px;
  left: 45px;
  z-index: 1100;
  display: none;
}
#minibubblestart {
  position: absolute;
  top: 78px;
  left: 145px;
  z-index: 1110;
  display: none;
}
#bubbletalkstart {
  position: absolute;
  top: 98px;
  left: 193px;
  width: 525px;
  z-index: 1150;
  display: none;
}
#bubbletalk h3,
#bubbletalkstart h3 {
  text-align: center;
}
#pageheader {
  position: absolute;
  top: 24px;
  left: 198px;
  width: 480px;
  z-index: 1010;
}
#pageheader h1 {
  text-align: left;
  font-size: 38px;
  color: black;
}
#pauser {
  position: absolute;
  top: 100px;
  left: 9398px;
  height: 5px;
  width: 5px;
}
#progressbarcontainer {
  position: absolute;
  top: 790px;
  left: 85px;
}
#progress,
#progressbody,
#progressmood,
#progresshygiene,
#progresssummary {
  position: absolute;
  top: 2px;
  left: 9px;
  z-index: 1100;
  display: block;
  height: 15px;
  margin: 0;
  /*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#91cfff', endColorstr = '#1a56b0');*/

  /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/

  -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#91cfff', endColorstr = '#1a56b0')";
  /*Element must have a height (not auto)*/

  /*All filters must be placed together*/

  background-image: -moz-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -ms-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -o-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#41b4e7), to(#1274a8));
  background-image: -webkit-linear-gradient(top, #41b4e7, #11274a 8);
  background-image: linear-gradient(top, #41b4e7, #11274a 8);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/

  /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

}
#progress {
  width: 5px;
}
#progressbody {
  width: 280px;
}
#progressmood {
  width: 400px;
}
#progresshygiene {
  width: 520px;
}
#progresssummary {
  width: 760px;
}
/* =============================================================================
Intro pages
========================================================================== */
#guide {
  position: relative;
  top: 20px;
  width: 960px;
  margin: 0 auto;
}
#signin {
  position: relative;
  top: 20px;
  left: 80px;
  width: 800px;
  margin: 0 auto;
}
#guidechoice {
  position: absolute;
  top: 130px;
  left: 150px;
  width: 200px;
  height: 200px;
  z-index: 1000;
}
#summary #guidechoice {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 269px;
  height: 315px;
  z-index: 1000;
}
#summaryheader {
  margin: 0 0 0 300px;
}
#guide h3,
#signin h3 {
  text-align: center !important;
}
#guide p,
#signin p {
  text-align: center !important;
}
#guide img {
  float: left;
  padding: 10px 30px;
}
#guidechoices {
  margin-left: 90px;
}
#signinarea {
  position: absolute;
  top: 120px;
  left: 270px;
  width: 400px;
}
#signinarea h5 {
  text-align: right;
}
#signinarea label {
  width: 150px;
  margin-right: 5px;
}
#signinarea h5 input {
  width: 250px;
  text-align: left;
}
#submitsignin {
  float: right;
}
.margindrop1 {
  margin-top: 10px;
}
#questions {
  position: relative;
  top: 150px;
  left: 0px;
  width: 960px;
  height: 1100px;
}
#welcome {
  position: absolute;
  z-index: 1050;
  width: 500px;
  height: 150px;
  top: 175px;
  left: 357px;
}
#start {
  position: absolute;
  z-index: 1200;
  top: 300px;
  left: 630px;
}
#summary #startfinish {
  position: absolute;
  z-index: 1200;
  top: 178px;
  left: 530px;
}
#choosesummary {
  position: absolute;
  z-index: 1200;
  top: 300px;
  left: 1530px;
  width: 500px;
}
#summaryholder {
  position: absolute;
  z-index: 1200;
  top: 180px !important;
  left: 1320px;
  width: 950px;
  height: 500px;
}
#summaryholder img {
  float: left;
  padding: 10px 30px;
}
#summaryholder p {
  font-size: 18px !important;
  line-height: 20px;
}
#summarytoprow,
#summarymidrow,
#summarybottomrow {
  float: left;
  width: 650px;
}
#summarymidrow,
#summarybottomrow {
  margin-top: 20px;
}
#thesummary,
#thesummary2,
#thesummary4,
#thesummary3,
#thesummary5 {
  float: left;
  width: 300px;
  margin: 0px 0 0 20px;
}
#breathe {
  position: absolute;
  z-index: 1050;
  width: 500px;
  height: 150px;
  top: 300px;
  left: 1200px;
}
#shiftbreathe {
  position: absolute;
  left: 110px;
  top: 50px;
}
#guide {
  position: absolute;
  top: 115px;
  left: 90px;
  z-index: 1100;
}
#guide img {
  float: left;
}
#inhale {
  position: absolute;
  width: 300px;
  height: 100px;
  top: 0px;
  left: 100px;
}
#exhale,
#goodjob {
  position: absolute;
  width: 300px;
  height: 100px;
  top: 0px;
  left: 100px;
}
.happyguide {
  float: left;
  margin: -10px 0px 0 0px;
}
.happyyesno {
  margin: 130px 0 0 0;
}
#thingstodo {
  position: absolute;
  width: 180px;
  height: 200px;
  top: -250px;
  left: 1100px;
  z-index: 1110;
}
#monkee {
  position: absolute;
  top: 700px;
  left: 50px;
  z-index: 1150;
}
#treasurechest {
  position: absolute;
  top: 690px;
  left: 795px;
  z-index: 1130;
}
#clouds {
  position: absolute;
  top: 755px;
  left: 30px;
  z-index: 1000;
}
/* =============================================================================
Things to do today
========================================================================== */
#do1wrapper,
#do2wrapper,
#do3wrapper,
#do4wrapper,
#do5wrapper {
  float: left;
  padding-right: 25px;
  width: 150px;
}
#dochoices {
  position: absolute;
  top: 70px;
  left: -215px;
  width: 880px;
  height: 160px;
  padding: 10px 0px 10px 25px;
}
#dochoices h5 {
  text-align: center;
  margin-top: 7px;
}
/* =============================================================================
Body pages
========================================================================== */
#genderchoice {
  position: absolute;
  top: 370px;
  left: 1425px;
  width: 850px;
  z-index: 1100;
}
#malechoice {
  position: absolute;
  top: 45px;
  left: -10px;
  z-index: 1005;
}
#femalechoice {
  position: absolute;
  top: 45px;
  left: 155px;
  z-index: 1005;
}
.maletype {
  position: absolute;
  top: 120px;
  left: 63px;
  width: 120px;
  text-align: center;
  z-index: 1010;
}
.femaletype {
  position: absolute;
  top: 120px;
  left: 52px;
  width: 120px;
  text-align: center;
  z-index: 1010;
}
#frontbodyholder {
  position: absolute;
  top: 185px;
  left: 1170px;
  z-index: 1050;
}
#backbodyholder {
  position: absolute;
  top: 185px;
  left: 1130px;
  z-index: 1050;
}
#bodypain {
  position: absolute;
  top: 195px;
  left: 1180px;
  z-index: 2000;
  width: 300px;
  height: 330px;
  margin: 0;
  padding: 10px;
  overflow: hidden;
}
#painlistholder img {
  clear: left;
  float: left;
  padding: 3px 10px;
}
#bodypain h4 {
  text-align: left;
}
#bodypain p {
  float: left;
  padding: 20px 0 0 0;
}
.bodydiv {
  height: 50px;
}
#painlistholder {
  height: 285px;
  padding: 5px 5px 5px 5px;
  overflow: scroll;
  overflow-x: hidden;
  border: 2px solid black;
}
#painfinish {
  position: absolute;
  top: 565px;
  left: 1180px;
  z-index: 1050;
  width: 250px;
  margin: 0;
  padding: 10px;
}
#moodnext {
  position: absolute;
  top: 130px;
  left: 390px;
}
#paincancel {
  position: absolute;
  top: 625px;
  left: 640px;
  z-index: 9050;
  width: 250px;
  margin: 0;
  padding: 10px;
}
#paincancelpage {
  position: absolute;
  top: 632px;
  left: 810px;
  z-index: 1050;
}
#painstrip {
  position: absolute;
  top: 280px;
  left: 1650px;
  z-index: 9300;
  width: 284px;
  height: 130px;
  padding: 10px;
  background: white;
  border: 5px solid red;
}
#cancelpainstrip {
  position: absolute;
  top: 120px;
  left: 9650px;
  z-index: 1050;
}
#paintransition {
  position: absolute;
  top: 200px;
  left: 1200px;
  width: 900px;
  z-index: 1050;
}
.doctor {
  margin: 0;
}
#painstrip img {
  float: left;
  padding: 0 3px;
}
#painstrip p {
  text-align: center !important;
  padding: 10px 0 0 0 !important;
}
#painstripmydiv {
  margin: -15px 0 0 0;
}
.painlist {
  padding-top: 10px;
}
#frontbody {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1060;
}
/* --- male body ------ */
#fronthead {
  position: absolute;
  top: -1px;
  left: 78px;
  z-index: 1060;
}
#frontheadhidden {
  position: absolute;
  top: -1px;
  left: 1078px;
  z-index: 1060;
}
#frontheadholder {
  display: none;
  position: absolute;
  top: 210px;
  left: 220px;
  z-index: 8050;
  width: 381px;
  height: 357px;
  background: white;
  border: 2px solid black;
}
#frontbighead {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 8055;
}
#forehead {
  position: absolute;
  top: 86px;
  left: 113px;
  z-index: 8270;
}
#rightear {
  position: absolute;
  top: 162px;
  left: 67px;
  z-index: 8260;
}
#righteye {
  position: absolute;
  top: 152px;
  left: 114px;
  z-index: 8365;
}
#nose {
  position: absolute;
  top: 152px;
  left: 169px;
  z-index: 8360;
}
#lefteye {
  position: absolute;
  top: 152px;
  left: 213px;
  z-index: 8365;
}
#leftear {
  position: absolute;
  top: 162px;
  left: 269px;
  z-index: 8365;
}
#mouth {
  position: absolute;
  top: 245px;
  left: 154px;
  z-index: 8365;
}
#jaw {
  position: absolute;
  top: 280px;
  left: 97px;
  z-index: 8365;
}
#throat {
  position: absolute;
  top: 324px;
  left: 22px;
  z-index: 8365;
}
#donehead {
  position: absolute;
  bottom: 20px;
  right: 5px;
  z-index: 8365;
}
#frontleftarm {
  position: absolute;
  top: 83px;
  left: 150px;
  z-index: 1060;
}
#frontlefthand {
  position: absolute;
  top: 232px;
  left: 183px;
  z-index: 1060;
}
#frontchest {
  position: absolute;
  top: 83px;
  left: 67px;
  z-index: 1060;
}
#frontchesthidden,
#frontpelvishidden,
#frontgroinhidden,
#frontstomachhidden,
#frontrightarmhidden,
#frontrighthandhidden,
#frontrightleghidden,
#frontrightfoothidden,
#frontleftarmhidden,
#frontlefthandhidden,
#frontleftleghidden,
#frontleftfoothidden {
  opacity: 0;
}
#frontheadtophidden,
#frontleftheadhidden,
#frontrightheadhidden,
#foreheadhidden,
#rightearhidden,
#righteyehidden,
#leftearhidden,
#lefteyehidden,
#jawhidden,
#throathidden,
#rightcheekhidden,
#leftcheekhidden,
#nosehidden,
#mouthhidden {
  opacity: 0;
}
#frontstomach {
  position: absolute;
  top: 186px;
  left: 66px;
  z-index: 1060;
}
#frontpelvis {
  position: absolute;
  top: 227px;
  left: 59px;
  z-index: 1060;
}
#frontgroin {
  position: absolute;
  top: 256px;
  left: 98px;
  z-index: 1060;
}
#frontrightarm {
  position: absolute;
  top: 84px;
  left: 22px;
  z-index: 1060;
}
#frontrighthand {
  position: absolute;
  top: 238px;
  left: -1px;
  z-index: 1061;
}
#frontleftleg {
  position: absolute;
  top: 271px;
  left: 112px;
  z-index: 1060;
}
#frontleftfoot {
  position: absolute;
  top: 485px;
  left: 133px;
  z-index: 1060;
}
#frontrightleg {
  position: absolute;
  top: 271px;
  left: 59px;
  z-index: 1060;
}
#frontrightfoot {
  position: absolute;
  top: 485px;
  left: 55px;
  z-index: 1060;
}
#frontfullhead {
  position: absolute;
  top: 291px;
  left: 1200px;
  width: 34px;
  height: 41px;
  z-index: 1060;
}
#backheadhidden,
#neckhidden,
#backlefthandhidden,
#backleftarmhidden,
#backleftbackhidden,
#spinehidden,
#backrightbackhidden,
#backrightarmhidden,
#backrighthandhidden,
#backleftleghidden,
#backleftfoothidden,
#backrightleghidden,
#backrightfoothidden,
#butthidden {
  opacity: 0;
}
#backhead {
  position: absolute;
  top: 3px;
  left: 85px;
  z-index: 1060;
}
#neck {
  position: absolute;
  top: 69px;
  left: 69px;
  z-index: 1060;
}
#backlefthand {
  position: absolute;
  top: 240px;
  left: 0px;
  z-index: 1060;
}
#backleftarm {
  position: absolute;
  top: 87px;
  left: 22px;
  z-index: 1060;
}
#backleftback {
  position: absolute;
  top: 90px;
  left: 73px;
  z-index: 1060;
}
#spine {
  position: absolute;
  top: 90px;
  left: 106px;
  z-index: 1060;
}
#backrightback {
  position: absolute;
  top: 90px;
  left: 123px;
  z-index: 1060;
}
#backrightarm {
  position: absolute;
  top: 88px;
  left: 156px;
  z-index: 1060;
}
#backrighthand {
  position: absolute;
  top: 242px;
  left: 184px;
  z-index: 1061;
}
#butt {
  position: absolute;
  top: 244px;
  left: 64px;
  z-index: 1060;
}
#backleftleg {
  position: absolute;
  top: 289px;
  left: 64px;
  z-index: 1060;
}
#backleftfoot {
  position: absolute;
  top: 495px;
  left: 62px;
  z-index: 1060;
}
#backrightleg {
  position: absolute;
  top: 289px;
  left: 115px;
  z-index: 1060;
}
#backrightfoot {
  position: absolute;
  top: 495px;
  left: 135px;
  z-index: 1060;
}
/* ---- female body  ----*/
#f-fronthead {
  position: absolute;
  top: 0px;
  left: 73px;
  z-index: 1060;
}
#f-frontheadhidden {
  position: absolute;
  top: 0px;
  left: 1078px;
  z-index: 1060;
}
#f-frontheadholder {
  display: none;
  position: absolute;
  top: 210px;
  left: 220px;
  z-index: 8050;
  width: 381px;
  height: 357px;
  background: white;
  border: 2px solid black;
}
#f-frontbighead {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 8055;
}
#f-forehead {
  position: absolute;
  top: 76px;
  left: 117px;
  z-index: 8270;
}
#f-rightear {
  position: absolute;
  top: 146px;
  left: 73px;
  z-index: 8260;
}
#f-righteye {
  position: absolute;
  top: 128px;
  left: 118px;
  z-index: 8365;
}
#f-nose {
  position: absolute;
  top: 128px;
  left: 169px;
  z-index: 8367;
}
#f-lefteye {
  position: absolute;
  top: 128px;
  left: 215px;
  z-index: 8369;
}
#f-leftear {
  position: absolute;
  top: 148px;
  left: 264px;
  z-index: 8365;
}
#f-mouth {
  position: absolute;
  top: 216px;
  left: 151px;
  z-index: 8365;
}
#f-jaw {
  position: absolute;
  top: 264px;
  left: 120px;
  z-index: 8365;
}
#f-throat {
  position: absolute;
  top: 301px;
  left: 1px;
  z-index: 8365;
}
#f-donehead {
  position: absolute;
  bottom: 20px;
  right: 5px;
  z-index: 8365;
}
#f-frontleftarm {
  position: absolute;
  top: 86px;
  left: 147px;
  z-index: 1060;
}
#f-frontlefthand {
  position: absolute;
  top: 244px;
  left: 182px;
  z-index: 1060;
}
#f-frontrightbreast {
  position: absolute;
  top: 88px;
  left: 70px;
  z-index: 1060;
}
#f-frontleftbreast {
  position: absolute;
  top: 88px;
  left: 110px;
  z-index: 1060;
}
#frontrightbreasthidden,
#frontleftbreasthidden,
#frontpelvishidden,
#frontgroinhidden,
#frontstomachhidden,
#frontrightarmhidden,
#frontrighthandhidden,
#frontrightleghidden,
#frontrightfoothidden,
#frontleftarmhidden,
#frontlefthandhidden,
#frontleftleghidden,
#frontleftfoothidden {
  opacity: 0;
}
#frontheadtophidden,
#frontleftheadhidden,
#frontrightheadhidden,
#foreheadhidden,
#rightearhidden,
#righteyehidden,
#leftearhidden,
#lefteyehidden,
#jawhidden,
#throathidden,
#rightcheekhidden,
#leftcheekhidden,
#nosehidden,
#mouthhidden {
  opacity: 0;
}
#f-frontstomach {
  position: absolute;
  top: 186px;
  left: 62px;
  z-index: 1060;
}
#f-frontpelvis {
  position: absolute;
  top: 229px;
  left: 53px;
  z-index: 1070;
}
#f-frontgroin {
  position: absolute;
  top: 256px;
  left: 96px;
  z-index: 1080;
}
#f-frontrightarm {
  position: absolute;
  top: 84px;
  left: 22px;
  z-index: 1060;
}
#f-frontrighthand {
  position: absolute;
  top: 239px;
  left: 0px;
  z-index: 1061;
}
#f-frontleftleg {
  position: absolute;
  top: 271px;
  left: 111px;
  z-index: 1083;
}
#f-frontleftfoot {
  position: absolute;
  top: 486px;
  left: 129px;
  z-index: 1085;
}
#f-frontrightleg {
  position: absolute;
  top: 274px;
  left: 53px;
  z-index: 1083;
}
#f-frontrightfoot {
  position: absolute;
  top: 486px;
  left: 53px;
  z-index: 1085;
}
#f-frontfullhead {
  position: absolute;
  top: 291px;
  left: 1200px;
  width: 34px;
  height: 41px;
  z-index: 1060;
}
#backheadhidden,
#neckhidden,
#backlefthandhidden,
#backleftarmhidden,
#backleftbackhidden,
#spinehidden,
#backrightbackhidden,
#backrightarmhidden,
#backrighthandhidden,
#backleftleghidden,
#backleftfoothidden,
#backrightleghidden,
#backrightfoothidden,
#butthidden {
  opacity: 0;
}
#f-backhead {
  position: absolute;
  top: 0px;
  left: 75px;
  z-index: 1060;
}
#f-neck {
  position: absolute;
  top: 66px;
  left: 67px;
  z-index: 1060;
}
#f-backlefthand {
  position: absolute;
  top: 251px;
  left: 4px;
  z-index: 1060;
}
#f-backleftarm {
  position: absolute;
  top: 85px;
  left: 23px;
  z-index: 1060;
}
#f-backleftback {
  position: absolute;
  top: 88px;
  left: 59px;
  z-index: 1060;
}
#f-spine {
  position: absolute;
  top: 88px;
  left: 104px;
  z-index: 1060;
}
#f-backrightback {
  position: absolute;
  top: 88px;
  left: 121px;
  z-index: 1060;
}
#f-backrightarm {
  position: absolute;
  top: 86px;
  left: 151px;
  z-index: 1060;
}
#f-backrighthand {
  position: absolute;
  top: 247px;
  left: 182px;
  z-index: 1061;
}
#f-butt {
  position: absolute;
  top: 242px;
  left: 52px;
  z-index: 1060;
}
#f-backleftleg {
  position: absolute;
  top: 288px;
  left: 53px;
  z-index: 1060;
}
#f-backleftfoot {
  position: absolute;
  top: 496px;
  left: 55px;
  z-index: 1060;
}
#f-backrightleg {
  position: absolute;
  top: 288px;
  left: 111px;
  z-index: 1060;
}
#f-backrightfoot {
  position: absolute;
  top: 496px;
  left: 131px;
  z-index: 1060;
}
#headclick {
  position: absolute;
  top: 11px;
  left: 89px;
  width: 34px;
  height: 41px;
  z-index: 1065;
}
#modalhide {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 4200;
  width: 1px;
  height: 1px;
  margin: 0;
  background: white;
  display: hidden;
  zoom: 1;
  opacity: 0.42;
}
#headmodalhide {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 7400;
  width: 1px;
  height: 1px;
  margin: 0;
  background: white;
  display: hidden;
  zoom: 1;
  opacity: 0.42;
}
/* =============================================================================
Intro Questions
========================================================================== */
#one,
#two,
#six,
#oneresponse,
#tworesponse,
#threeresponse {
  position: absolute;
  top: 0px;
  left: 1100px;
  width: 800px;
  z-index: 1100;
}
#four {
  position: absolute;
  top: 0px;
  left: 1100px;
  width: 500px;
  z-index: 1100;
}
#five {
  position: absolute;
  top: -110px;
  left: 1240px;
  width: 900px;
  z-index: 1100;
}
#three {
  position: absolute;
  top: 0px;
  left: 1600px;
  z-index: 1100;
  width: 820px;
  padding: 10px;
}
#oneansyes,
#oneansno,
#twoansyes,
#twoansno {
  position: absolute;
  z-index: 1110;
  opacity: 0;
  filter: alpha(opacity=0);
}
#onenext,
#twonext,
#threenext,
#sixnext,
#moodnext {
  position: absolute;
  z-index: 1112;
}
#onenext,
#twonext {
  top: 87px;
  left: 150px;
}
#threenext {
  top: 18px;
  left: 268px;
}
#fourans {
  width: 250px;
  margin: 120px 0px 0 200px;
}
#medicineans {
  width: 250px;
  margin: 20px 0px 0 120px;
}
#fiveans {
  clear: right;
  float: right;
  width: 250px;
  margin: 20px -90px 0 0;
}
#sixnext {
  top: 151px;
  left: 282px;
}
#todoA,
#todoB {
  float: left;
  width: 185px;
  margin: 0 10px;
}
.checkboxes {
  vertical-align: middle;
}
/* =============================================================================
Hygiene, Mood, and Summary pages
========================================================================== */
#hygienequestions,
#moodquestions,
#goodbye {
  position: relative;
  width: 900px;
  margin: 20px auto;
}
#summary {
  position: absolute;
  top: 200px;
  left: 1100px;
  width: 900px;
  z-index: 1100;
}
#congratsnext {
  position: absolute;
  top: 210px;
  left: 570px;
}
#hygienequestions .mainheader {
  margin: -10px 0 0 170px;
}
#hygienequestions h3,
#summary h3 {
  text-align: left !important;
}
#hygienequestions img {
  float: left;
  padding-right: 50px;
  margin-top: -30px;
}
#summary img {
  float: left;
  padding-right: 20px;
  margin-top: -30px;
}
#hy2next,
#hy3next,
#hy4next,
#hy5next {
  position: absolute;
  top: 0px;
  left: 1100px;
  z-index: 1100;
}
#sleep,
#shower,
#teeth,
#poop,
#medicine,
#moodthree,
#hygiene2 {
  position: absolute;
  top: 0px;
  left: 1100px;
  width: 850px;
  z-index: 1100;
}
#moodfour {
  position: absolute;
  top: -10px !important;
  left: 1100px;
  width: 850px;
  z-index: 1100;
}
#medicine2 {
  position: absolute;
  top: 80px;
  left: 1100px;
  width: 850px;
  z-index: 1100;
}
.checkline {
  width: 200px;
  margin: 30px 0 0 0;
}
.checkline img {
  padding-right: 0px !important;
}
#medicine .indent4,
#medicine2 .indent4 {
  float: left;
  padding: 0;
  margin: 0 0 0 95px;
}
#medicine .indent4 img,
#medicine2 .indent4 img {
  float: left;
  padding: 0;
  margin: 0 0 0 10px;
}
#summarystart,
#summaryhealth,
#summarymood {
  width: 600px;
  margin: 0 0 30px 30px;
}
#moodquestions h3,
#moodquestions h4,
#moodquestions h5 {
  text-align: center;
}
#moodquestions h4 {
  color: black;
}
#moodcontainer {
  position: absolute;
  top: -170px;
  left: 1380px;
  width: 900px;
  z-index: 1000;
}
.moodbutton {
  position: absolute;
  top: 30px;
  left: 0px;
  z-index: 1010;
}
.moodimage {
  position: absolute;
  top: 0px;
  left: 45px;
  z-index: 1010;
}
.moodtype {
  position: absolute;
  top: 100px;
  left: 40px;
  width: 120px;
  text-align: center;
  z-index: 1010;
}
#moodone {
  width: 900px;
  height: 350px;
}
#moodtwo {
  width: 900px;
  height: 350px;
}
#moodsad,
#moodworried,
#moodfine,
#moodhappy,
#moodconfused,
#moodstressed,
#moodangry,
#moodscared {
  width: 100px;
}
#moodsad {
  position: absolute;
  top: 45px;
  left: 70px;
  z-index: 1005;
}
#moodworried {
  position: absolute;
  top: 45px;
  left: 270px;
  z-index: 1005;
}
#moodfine {
  position: absolute;
  top: 45px;
  left: 470px;
  z-index: 1005;
}
#moodhappy {
  position: absolute;
  top: 45px;
  left: 670px;
  z-index: 1005;
}
#moodconfused {
  position: absolute;
  top: 210px;
  left: 70px;
  z-index: 1005;
}
#moodstressed {
  position: absolute;
  top: 210px;
  left: 270px;
  z-index: 1005;
}
#moodangry {
  position: absolute;
  top: 210px;
  left: 470px;
  z-index: 1005;
}
#moodscared {
  position: absolute;
  top: 210px;
  left: 670px;
  z-index: 1005;
}
#moodonenextcontainer {
  position: absolute;
  top: 370px;
  left: 480px;
}
#moodtwonextcontainer {
  position: absolute;
  top: 276px;
  left: 395px;
}
#moodfournextcontainer {
  position: absolute;
  top: 420px;
  left: 460px;
}
#moodsuggest,
#moodfournext {
  margin: -40px 0 0 300px;
}
#moodthreeans {
  float: right;
  margin: 10px 330px 0 0;
}
.teasingguy {
  margin: -10px 0px 0 150px;
}
.bullyguy {
  margin: -10px 0px 0 220px;
}
.trustdad {
  margin: 0;
}
.trustbench {
  margin: -20px 0 0 0;
}
.trustdad2 {
  margin: 0px 0 0 290px;
}
.creepyguy {
  margin: -10px 0px 0 170px;
}
.secretguy {
  margin: -10px 0px 0 200px;
}
#moodonenext {
  margin: -43px 0 0 240px;
}
#moodtwonext {
  margin: -43px 0 0 240px;
}
#moodfournext {
  margin: -43px 0 0 240px;
}
#safetrustnext {
  float: right;
  margin: 100px 255px 0 0;
}
#fiveuhoh h4 {
  width: 400px;
}
#fiveuhohnext {
  float: right;
  margin: 120px 150px 0 0;
}
#sixuhohnext {
  float: right;
  margin: 120px 350px 0 0;
}
#sevenuhohnext {
  float: right;
  margin: 120px 270px 0 0;
}
/* =============================================================================
Moodchoices
========================================================================== */
#fiveuhoh {
  position: absolute;
  top: -70px;
  left: 1500px;
  width: 700px;
  z-index: 1100;
}
#sixuhoh,
#sevenuhoh {
  position: absolute;
  top: 0px;
  left: 1500px;
  width: 700px;
  z-index: 1100;
}
#safefive,
#safesix,
#safeseven,
#safeeight,
#safetrust {
  position: absolute;
  top: 0px;
  left: 1500px;
  width: 850px;
  z-index: 1100;
}
#mood1wrapper,
#mood2wrapper,
#mood3wrapper,
#mood4wrapper,
#mood5wrapper,
#mood6wrapper,
#mood7wrapper,
#mood8wrapper {
  float: left;
  padding-right: 25px;
  margin: 0 35px 20px 0;
  width: 150px;
}
#moodchoices {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 880px;
  height: 160px;
  padding: 10px 0px 10px 25px;
}
#moodfour h3,
#moodfour h5 {
  text-align: center;
  margin-top: 7px;
}
#moodfour h5 {
  color: black;
}
#safefiveans {
  margin: 120px 170px 0 0;
}
#safesixans {
  margin: 120px 220px 0 0;
}
#safesevenans {
  margin: 130px 160px 0 0;
}
#safeeightans {
  margin: 130px 185px 0 0;
}
/* =============================================================================
Typography
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'PTSansNarrowBold', Arial, sans-serif;
  color: #0568c4;
  font-weight: normal;
  margin: 0 0 8px 0;
  text-align: left;
}
h1 {
  font-size: 40px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 18px;
}
.headerreduce {
  font-size: 33px !important;
  margin-left: -48px !important;
}
h3.reduce {
  position: relative;
  font-size: 25px;
  top: 2px;
}
#inhale h3 {
  padding-top: 10px;
  text-align: center;
  font-size: 60px;
}
#exhale h3 {
  color: #1a82d2;
  padding-top: 10px;
  text-align: center;
  font-size: 60px;
}
#goodjob {
  position: absolute;
  top: -110px;
  left: 1240px;
}
#goodjob h3 {
  color: #029006;
  padding-top: 10px;
  font-size: 70px;
  text-align: center;
}
p {
  font-size: 16px;
  padding: 0;
}
#content p {
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  color: #000;
  font-weight: normal;
  font-size: 20px;
  margin: 0px 0 4px 0;
  text-align: left;
}
.fadeblue {
  color: #7199be;
  margin-top: 15px;
}
/* =============================================================================
Buttons
========================================================================== */
.next,
.yes,
.no {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: none;
  height: 39px;
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  cursor: pointer;
}
.yes,
.no {
  width: 78px;
}
.next {
  width: 91px;
}
.done,
.cancel {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: none;
  height: 22px;
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  cursor: pointer;
}
.shiftlabel {
  position: relative;
  top: 3px;
}
.shiftlabel2 {
  position: relative;
  top: 5px;
}
.shiftnextlabel {
  position: relative;
  top: 3px;
  margin-right: 17px;
}
.number0extra {
  margin-left: 38px;
}
#weight {
  position: absolute;
  top: -50px;
  left: 1100px;
  z-index: 1100;
  width: 840px;
}
#weightanswer {
  float: left;
  height: 50px;
  width: 107px;
  margin-left: 50px;
  background: white;
  border: 3px solid #FDD337;
}
#lbs {
  margin: 20px 0 0 390px;
}
#weightcolumn1,
#weightcolumn2,
#weightcolumn3 {
  float: left;
  width: 30px;
  height: 40px;
  padding: 10px 3px 0 0;
}
#weightcolumn1 h2,
#weightcolumn2 h2,
#weightcolumn3 h2 {
  font-size: 50px;
  font-family: 'PTSansNarrowBold', Arial, sans-serif;
  font-weight: normal;
  color: black;
  text-align: center;
  margin: -10px 0 0 0;
}
#weightcolumn1 h2 {
  padding-left: 15px;
}
#weightcolumn2 h2 {
  padding-left: 8px;
}
#keypad {
  position: relative;
  top: -165px;
  left: 269px;
  z-index: 1250;
  width: 250px;
}
#keypad h3 {
  font-size: 24px;
  font-family: 'PTSansNarrowBold', Arial, sans-serif;
  font-weight: normal;
}
#keypad a.widerbutton {
  width: 70px;
  height: 25px;
  font-size: 16px;
  font-family: 'PTSansNarrowRegular', Arial, sans-serif;
  font-weight: normal;
}
#keypad a {
  float: left;
  display: block;
  height: 35px;
  width: 35px;
  margin: 3px 3px 0 0;
  color: white;
  text-align: center;
  text-decoration: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/

  /*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#91cfff', endColorstr = '#1a56b0');*/

  /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/

  -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#91cfff', endColorstr = '#1a56b0')";
  /*Element must have a height (not auto)*/

  /*All filters must be placed together*/

  background-image: -moz-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -ms-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -o-linear-gradient(top, #41b4e7, #1274a8);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#41b4e7), to(#1274a8));
  background-image: -webkit-linear-gradient(top, #41b4e7, #11274a 8);
  background-image: linear-gradient(top, #41b4e7, #11274a 8);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/

  /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

}
#keypad a:hover {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/

  /*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#2b80ff', endColorstr = '#082975');*/

  /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/

  -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#2b80ff', endColorstr = '#082975')";
  /*Element must have a height (not auto)*/

  /*All filters must be placed together*/

  background-image: -moz-linear-gradient(top, #2b80ff, #082975);
  background-image: -ms-linear-gradient(top, #2b80ff, #082975);
  background-image: -o-linear-gradient(top, #2b80ff, #082975);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#2b80ff), to(#082975));
  background-image: -webkit-linear-gradient(top, #2b80ff, #082975);
  background-image: linear-gradient(top, #2b80ff, #082975);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/

  /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

}
#number1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
#number2 {
  position: absolute;
  top: 0px;
  left: 38px;
}
#number3 {
  position: absolute;
  top: 0px;
  left: 76px;
}
#clearnumbers {
  position: absolute;
  top: 0px;
  left: 114px;
}
#number4 {
  position: absolute;
  top: 38px;
  left: 0px;
}
#number5 {
  position: absolute;
  top: 38px;
  left: 38px;
}
#number6 {
  position: absolute;
  top: 38px;
  left: 76px;
}
#number7 {
  position: absolute;
  top: 76px;
  left: 0px;
}
#number8 {
  position: absolute;
  top: 76px;
  left: 38px;
}
#number9 {
  position: absolute;
  top: 76px;
  left: 76px;
}
#number0 {
  position: absolute;
  top: 114px;
  left: 38px;
}
/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
}
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
}
.ir br {
  display: none;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}
/* Contain floats: h5bp.com/q */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  /* Black prints faster: h5bp.com/s */
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  /* Don't show links for images, or javascript/internal links */
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  /* h5bp.com/t */
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}