/* CSS Document */
svg, img#logo {
  /*display:none;*/ }

a {
  text-decoration: none; }

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
width: 150px !important;
}
#skincolor-boxes .checkmark { display: none; }
body {
  margin: 0px;
  padding: 0px;
  text-align: left;
  background: white;
  font-size: 10px;
  color: #777777;
  font-family: 'Comfortaa', cursive !important; }

/* stops blink/flash on iphone on click events*/
body * {
  -webkit-tap-highlight-color: transparent; }

.italic {
  font-style: italic; }

input, textarea, keygen, select, button {
  font-size: 12px;
  font-family: 'Comfortaa', cursive !important; }
/*default canvas size but gets changed later in stylesheet*/
canvas {
	width:150px;
	height: 150px;
}
select {
  height: 35px;
  width: 210px;
  border-radius: 4px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

div#language {
  text-align: center;
  border-top: 1px solid #eeeeee;
  padding-top: 20px; }

div#language img {
  max-width: 60px;
  margin: 5px; }

div#language div {
  display: inline; }

div#language a {
  text-decoration: none;
  padding-left: 10px;
  color: #a877d8; }

div#language a:hover {
  text-decoration: underline; }

select#default-calendar-month {
  color: #ffffff;
  background: #a877d8;
  padding-left: 15px;
  font-size: 14px; }

img.select-arrows {
  width: 20px;
  position: absolute;
  left: 70%;
  top: 38px;
  pointer-events: none; }

::-webkit-input-placeholder {
  color: #ccc;
  font-size: 12px; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #ccc;
  font-size: 12px; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc;
  font-size: 12px; }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
  font-size: 12px; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #ccc;
  font-size: 12px; }

header {
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.6px;
  overflow: hidden;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999; }

div.content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50px;
  font-size: 13px;
  min-height: 600px; }

div.content.thin {
  max-width: 400px;
  padding-left: 5px;
  padding-right: 5px; }

p {
  font-size: 16px;
  line-height: 20px; }

.center {
  text-align: center; }

.left-align {
  text-align: left; }

.text-link {
  text-decoration: none;
  color: #a877d8; }

div.scoring-link {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0; }

.text-link.scoring {
  position: relative;
  top: 10px; }

form.paypal {
  text-align: center; }

input.paypalbutton {
  margin-top: 10px;
  width: 200px;
  cursor: pointer; }

div.cta {
  margin-top: 50px; }

.success {
  color: #777777;
  border: 1px solid #6ec48f;
  background: #f6fcf1;
  text-align: center;
  padding: 10px;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  margin-top: 10px; }

.problem {
  color: #777777;
  border: 1px solid #f76387;
  background: #f4edef;
  text-align: center;
  padding: 10px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  margin-top: 10px; }

.bold {
  font-weight: bold; }

.question {
  font-size: 18px;
  color: #a877d8; }

.category {
  color: #a877d8;
  text-transform: uppercase; }

.indent {
  margin-left: 50px; }

.display {
  display: block !important; }

.displaynone {
  display: none !important; }

.zero-category-error {
  color: red;
  font-size: 11px;
  position: relative;
  top: -10px;
  left: 10px; }

.inline {
  display: inline-block; }

label.error {
  position: absolute !important;
  display: block;
  color: red;
  font-size: 11px !important;
  padding-left: 10px !important;
  padding-top: 0px !important; }

label.huncherror {
  display: none;
  color: red;
  font-size: 11px !important;
  position: relative;
  top: -22px; }

#err {
  display: none; }

div#login {
  width: 350px;
  margin-left: auto;
  margin-right: auto; }

.ui-widget {
  font-family: 'Comfortaa', cursive !important;
  font-size: 13px !important;
  line-height: 25px !important; }

.login-baby-graphic {
  width: 80px; }

img.continue-with-facebook {
  width: 300px; }

.good {
  color: #8ce196;
  font-size: 18px; }

.bad {
  color: red;
  font-size: 18px; }

.poolname {
  font-size: 24px;
  padding: 0px 20px; }

.pooldescription {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px; }

div.hiddenhunchform {
  /*when a password is on the pool*/
  display: none; }

.emailfyi {
  display: none; }

#amazon-baby-registry img {
  margin-left: auto;
  margin-right: auto; }

/****************** HEADER & MENU *****************************/
div#header {
  position: fixed;
  top: 0px;
  right: 0;
  left: 0;
  height: 50px;
  width: auto;
  background: #0e9ae2;
  z-index: 10000000000; }

div#menu {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  height: 50px; }

#top-links {
  position: absolute;
  top: 20px;
  right: 10px; }

#top-links a {
  font-size: 12px;
  text-decoration: none;
  color: #a877d8;
  margin: 0px 10px;
  text-transform: uppercase; }

#main-logo {
  display: inline;
  margin-left: 3px; }

#logo {
  display: inline;
  width: 170px;
  height: 44px; }

ul {
  padding-left: 0px; }
div#termsofuse ul {
  padding-left: 40px; 
}
form ul {
  list-style-type: none; }

h1 {
  font-size: 24px;
  font-weight: normal;
  color: #a877d8;
  text-transform: uppercase;
  text-align: center; }

h2 {
  font-size: 21px;
  font-weight: normal;
  color: #a877d8;
  text-transform: uppercase;
  text-align: center; }

h3 {
  font-size: 21px;
  font-weight: normal;
  color: #a877d8;
  text-transform: uppercase;
  text-align: center; }

p.disclaimer {
  font-family: 'Comfortaa', cursive !important;
  font-size: 14px;
  color: #a877d8;
  position: relative;
  top: -20px; }

label.letter, label.boy, label.girl, label.am, label.pm {
  background: #eeeeee !important;
  color: #bbbbbb !important; }

label.letter {
  margin-bottom: 2px; }

label.letter span.letter {
  font-size: 26px !important;
  position: relative;
  top: 11px; }

label span.ampm {
  font-size: 18px !important;
  position: relative;
  top: 11px; }

label.boy, label.girl {
  font-size: 16px !important; }

label.am, label.pm {
  font-size: 16px !important; }

#actual-results-section {
  background: #ffffff;
  font-size: 20px; }

.announcement-sex {
  font-size: 48px;
  text-transform: uppercase;
  font-weight: bold; }

.announcement-babysname {
  font-size: 28px;
  font-weight: bold; }

#actual-results-section p {
  font-size: 16px;
  margin: 5px; }

#actual-results-section .hunch-section {
  border: none; }

#actual-results-section .hunch-heading {
  color: #aaaaaa; }

#winnerinfo {
  background: url("/images/confetti.gif"); }

#winnerinfo.pool-page-section {
  min-height: 170px !important;
  margin-bottom: 0px !important;
  padding-bottom: 20px; }

.hunch-container {
  height: 400px; }

.hunch-section {
  position: relative;
  padding: 10px 0px;
  line-height: 25px; }

.hunch-heading {
  background: #efefef;
  text-transform: uppercase; }

.hunch-score {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 18px; }

.hunch-num {
  font-size: 16px;
  position: absolute;
  left: 5px;
  color: #777777; }

.hunch-name {
  font-size: 20px;
  text-align: left;
  margin-left: 30px;
  text-transform: uppercase; }

.hunch-whoami-and-location {
  font-size: 15px;
  text-align: left;
  margin-left: 30px;
  text-transform: uppercase; }

.hunch-comment {
  font-size: 13px;
  font-style: italic;
  text-align: left;
  margin-left: 30px;
  line-height: 15px;
  padding-top: 5px;
  padding-bottom: 5px; }

.hunch-div {
  display: inline-block;
  width: 12.5%;
  font-size: 12px;
  font-family: arial !important; }

.hunch-div div.score {
  font-size: 10px;
  line-height: 10px;
  color: #bbbbbb; }

.hunch-click {
  border: 1px solid #cccccc;
  width: 80px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  background: #ffffff; }

.hunch-click div {
  position: relative;
  top: 20px; }

#time-display-container {
  top: 0px; }

.hunch-click.disabled {
  cursor: default;
  font-size: 10px;
  background: none;
  border: none;
  text-transform: uppercase; }

.hunch-click.disabled:hover {
  background: none; }

.error-border {
  border: 1px solid red; }

.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 25px; }

ul.doughnut-legend {
  list-style-type: none !important;
  text-align: left;
  position: relative;
  top: -124px;
  left: 8px;
  z-index: -1; }

ul.doughnut-legend li {
  font-size: 11px; }

.chart-legend {
  width: 60px;
  margin-left: auto;
  margin-right: auto; }

#addpool {
  border-top: 1px solid #a877d8;
  border-bottom: 1px solid #a877d8;
  margin-bottom: 20px;
  padding-top: 40px;
  padding-bottom: 40px; }

#addpool a.submit {
  margin-top: 30px; }

div#info-container {
  width: 100%;
  max-width: 400px; }

#dob-hunch-click {
  position: absolute;
  top: 15px;
  left: 15px;
  cursor: pointer; }

#tob-hunch-click {
  position: absolute;
  top: 15px;
  left: 158px; }

#sex-hunch-click {
  position: absolute;
  top: 15px;
  right: 15px; }

#sex-hunch-click #sex-display {
  text-transform: capitalize; }
#sex-hunch-click span#sex-display {
  text-transform: uppercase; }
#eye-hunch-click {
  position: absolute;
  top: 40%;
  left: 15px; }

#hair-hunch-click {
  position: absolute;
  top: 40%;
  right: 15px; }

#letter-hunch-click {
  position: absolute;
  top: 75%;
  right: 15px; }

#weight-hunch-click {
  position: absolute;
  top: 75%;
  left: 15px; }

#length-hunch-click {
  position: absolute;
  top: 75%;
  left: 158px; }

.ui-dialog {
  width: 325px !important; }

p.dialog-title {
  position: relative;
  text-align: center;
  font-family: 'Comfortaa', cursive !important;
  margin: 0;
  font-size: 14px; }

.ui-dialog-titlebar {
  background: #ffffff !important;
  border: none !important; }

.ui-button.ui-dialog-titlebar-close {
  background: url("/images/close.svg") no-repeat !important;
  border: none !important;
  z-index: 1000; }

.ui-widget-overlay {
  opacity: .50 !important;
  /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;
  background-color: #323232 !important;
  /* This will make it darker */ }

div#banner {
  height: 30px;
  background: #a877d8;
  color: #ffffff; }

div#banner a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  top: 8px; }

div#hero {
  background-image: url("/images/hero-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 250px;
  position: relative;
  top: -15px;
  padding-top: 40px;
  border-bottom: 1px solid #cccccc; }

div#hero h1 {
  max-width: 350px;
  margin-left: auto;
  margin-right: auto; }

div#hero div.inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }

div#hero h2 {
  color: #777777; }

div#hero p {
  margin: 0;
  position: relative;
  top: -14px; }

img.large-logo {
  max-width: 460px;
  position: relative;
  top: -20px; }

div#features {
  height: auto;
  padding-top: 10px;
  padding-bottom: 60px; }

div#features div.column {
  display: inline-block;
  width: 400px;
  height: auto; }

div#features div.full-width {
  display: block;
  width: 100%; }

div#features div.full-width div, div#babynames p {
  position: relative;
  top: -20px; }

div#features div.bullets {
  position: relative;
  top: 50px;
  width: 280px;
  font-size: 13px;
  vertical-align: top;
  z-index: 1; }

div#features ul {
  text-align: left;
  line-height: 25px;
  padding-left: 20px; }

img.hand-phone-gif {
  max-width: 400px;
  position: relative;
  top: 10px;
  left: 0px;
  z-index: 0;
  margin-bottom: 20px; }

div#howitworks {
  border-top: 1px solid #a877d8;
  padding-top: 20px;
  padding-bottom: 60px; }

div#howitworks div {
  display: inline-block;
  width: 300px;
  text-align: center;
  vertical-align: top; }

div#howitworks div p {
  font-size: 1rem;
  line-height: 18px;
  width: 290px;
  margin-left: auto;
  margin-right: auto; }

div#howitworks img.step-number {
  width: 60px; }

div#howitworks img.icon {
  width: 140px;
  margin-top: -8px;
  margin-bottom: 20px; }

div#categories {
  padding-top: 20px;
  padding-bottom: 60px;
  border-top: 1px solid #a877d8; }

div#categories div.column {
  display: inline-block;
  width: 175px;
  text-align: center;
  vertical-align: top;
  /*opacity: 0;*/ }

div#categories div.icon {
  position: relative;
  width: 175px;
  padding-top: 20px; }

div#categories div.icon p {
  font-size: 15px;
  text-transform: uppercase;
  color: #a877d8;
  margin-top: 0px; }

div#categories div.icon div.icon-sub-text {
  width: 175px;
  position: absolute;
  top: 100px;
  font-size: 12px;
  color: #bbbbbb; }

div#categories img {
  width: 60px; }

div#testimonials {
  padding-top: 20px;
  padding-bottom: 60px;
  border-top: 1px solid #a877d8; }

div#stats-homepage {
  padding-top: 20px;
  padding-bottom: 60px;
  border-top: 1px solid #a877d8; }

div.purplestats {
  margin-bottom: 20px; }

div.purplestats div {
  display: inline-block;
  width: 200px;
  font-size: 13px;
  color: #a877d8; }

div.purplestats div.icon-sub-text {
  display: block;
  width: 200px;
  font-size: 12px; }

div.sexstats {
  margin-bottom: 20px; }

div.sexstats div {
  display: inline-block;
  width: 200px;
  font-size: 12px; }

div.sexstats div.icon-sub-text {
  display: block;
  width: 200px; }

.big {
  font-size: 30px !important;
  margin-top: 20px; }

div.recentbirths {
  width: 250px;
  margin-left: auto;
  margin-right: auto; }

div.recentbirths div {
  padding: 3px; }

div.recentbirths span.location {
  display: inline-block;
  text-align: left;
  padding-left: 5px;
  width: 70%; }

div.recentbirths span.date {
  display: inline-block;
  text-align: left;
  padding-left: 5px;
  width: 20%; }

div.recentbirths div.headline {
  font-size: 16px;
  text-transform: uppercase; }

div#babynames {
  padding-top: 20px;
  padding-bottom: 60px;
  border-top: 1px solid #a877d8; }

div#video {
  padding: 20px 10px 30px;
  border-top: 1px solid #a877d8; }

div#video-container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 30px; }

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.lowercase {
  text-transform: none; }

div#ads-info {
  padding-bottom: 40px; }

div#ads-info p {
  margin-bottom: 25px; }

.price {
  font-size: 28px;
  font-weight: bold; }

.smaller {
  font-size: 11px; }

div#categorycontainer {
  position: relative;
  height: 450px;
  background: #ffffff;
  padding-top: 15px; }

li {
  font-size: 1rem; }



div.chart-container {
  position: relative;
  width: 32%;
  top: -10px;
    display: inline-block;
    text-align: center;
    vertical-align: top;}

div.chart-container canvas {
    display: block;
    margin: 0 auto;
}

span.chartheader {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  display: block;
  position: relative;
  top: 0px;
  font-size: 12px;
  text-transform: uppercase; }


/* code to account for header bar when jumping to certain part of FAQs page
a.anchor {
display: block;
position: relative;
top: 50px;
visibility: hidden;
}
*/
div#scoring-breakdown input {
  width: 25px;
  border: none;
  background: none; }

div#faqs, div.cordblood {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }

div#faqs p, div.cordblood p {
  padding-left: 7px;
  padding-right: 5px;
  margin-top: -10px; }

div#faqs p.question {
  margin-top: 0px; }

div#faqs li {
  line-height: 18px; }

div.cordblood h2.question {
  text-align: left;
  margin-top: 50px; }

.q-mark-svg {
  width: 50px;
  position: relative;
  top: -15px; }


#scoring-info-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


div#doughnutChart { /*add pool and edit pool page*/
  position: absolute;
  top: 10px;
  right: 10%;}

#doughnutChart.poolpage {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	top: 0px;
	right:0px;
}

div#scoring-breakdown { /*add pool and edit pool page*/
  position: absolute;
  top: 210px;
  left: 190px; }

#scoring-breakdown.poolpage {
	position:relative;
    width: 50%;
    text-align: left;
	top:0;
	left:0;
}

#scoring-breakdown label {
  width: 120px;
  display: inline-block;
  color: white;
  padding: 5px 2px;
  margin-bottom: 2px;
  font-size: 12px;
  text-align: center; }

#scoring-breakdown input {
  font-size: 1rem;
  font-family: 'Comfortaa', cursive !important; }


div.pointsheadline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    pointer-events: none;
}
span.hundred {
  font-size: 45px; }

span.pointstext {
  position: relative;
  top: -10px;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase; }


input#files {
  height: 150px;
  border: 1px solid gray; }


td.score {
  position: relative; }

td.score.after {
  cursor: pointer; }

td.score span.scoreinchart {
  position: absolute;
  top: 10px;
  left: 20px; }

img.workingImage {
  display: none; }

.edit-hunch-link {
  font-size: 12px;
  color: #bbbbbb;
  text-decoration: none;
  text-transform: uppercase; }

div#termsofuse ol {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }

div.cat-button-container {
  margin-bottom: 5px;
  width: 250px; }

div.cat-button {
  width: 200px;
  height: 40px;
  background: #eeeeee;
  color: gray;
  border-radius: 5px;
  display: inline-block;
  position: relative; }

div.cat-button:hover {
  cursor: pointer;
  background: #cccccc; }

.hide-cat-input {
  width: 200px;
  height: 40px;
  position: absolute;
  left: 0px;
  opacity: 0;
  cursor: pointer; }

.cat-info {
  font-style: italic; }

#timepicker-desktop {
  display: none;
  position: absolute;
  background: gray;
  z-index: 100000;
  height: 40px; }

.text-display {
  position: absolute;
  right: 5px; }

.submit {
  width: 200px;
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  background: #a877d8;
  border: 1px solid #a877d8;
  border-radius: 30px;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-appearance: none;
  position: relative;
  padding: 10px 25px;
  margin-top: 0px;
  margin-bottom: 10px; }

.button {
  display: inline-block;
  text-decoration: none;
  width: auto;
  color: #a877d8;
  font-size: 14px;
  border: 1px solid #a877d8;
  background: #ffffff;
  border-radius: 22px;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-appearance: none;
  padding: 7px 20px;
  margin-top: 10px;
  margin-bottom: 0px; }

div#years {
	margin-top: 20px;
}
div#years label {
  height: 25px; }

input.submit:disabled,
input[disabled] {
  opacity: 0.2;
  cursor: default; }

div#poollist .button {
  width: 180px; }

form.delete, div.delete {
  text-align: center; }

input.delete, a.delete {
  cursor: pointer;
  background: #ffffff;
  color: red;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  margin-top: 25px;
  text-decoration: none;
  -webkit-appearance: none; }

.fa-trash-o {
  color: red; }

a.goback {
  color: #bbb; }

input {
  font-family: 'Comfortaa', cursive !important; }

.inputfield {
  width: 95%;
  height: 30px;
  border-radius: 0px;
  border: 1px solid #cccccc;
  padding-left: 10px;
  color: #777777;
  -webkit-appearance: none;
  font-size: 13px; }

.inputfield.error {
  border: 1px solid red; }

textarea.inputfield {
  font-family: 'Comfortaa', cursive !important;
  padding-top: 7px;
  height: 100px !important; }

div#tour {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }

div#tour img {
  max-width: 300px;
  border: 1px solid #777777; }

div#tour h2 {
  margin-top: 50px; }

.sub-label {
  font-size: 13px;
  margin-bottom: 10px;
  display: block;
  padding: 0px 10px; }

.hint {
  font-style: italic;
  font-size: 12px;
  position: relative;
  top: -7px;
  color: #bbbbbb;
  line-height: 10px;
  display: block; }

form#addhunch span.hint, form#addresults span.hint {
  top: 0px; }

.example {
  font-style: italic;
  font-size: 12px;
  display: inline-block; }

form li.section {
  max-width: 400px;
  background: #eeeeee;
  margin-bottom: 20px;
  position: relative;
  padding: 15px;
  padding-bottom: 15px;
  border-radius: 4px;
  text-align: center; }

.nobg {
  background: none !important; }

.caption {
  display: block;
  margin-bottom: 0px;
  font-size: 12px;
  color: #a877d8;
  text-transform: uppercase; }

.sub-title {
  font-size: 14px;
  color: #333;
  text-transform: uppercase; }

/*
#pooldetails .ui-state-default, #pooldetails .ui-widget-content .ui-state-default, #pooldetails .ui-widget-header .ui-state-default, #pooldetails .ui-button, html #pooldetails .ui-button.ui-state-disabled:hover, html #pooldetails .ui-button.ui-state-disabled:active {
width: 70px !important;	
}

div#skin-color-boxes .ui-state-active {
3px solid green !important;
}
div#skin-color-boxes .ui-state-active {
3px solid green !important;
}*/
div#skincolor {
  position: relative; }

.ui-button {
  padding: 0px 0px !important; }

#skincolor-baby-graphic {
  width: 200px;
  margin-left: auto;
  margin-right: auto; }

#poolpage-baby-graphic {
  width: 150px;
  position: absolute;
  left: 450px;
  top: -80px; }

li#onesie {
  display: none; }

li.last-radio {
  margin-bottom: 40px; }

input[type=checkbox]:checked {
  border: 3px solid purple; }

.fa-lock {
  position: relative;
  top: 5px;
  left: 40px;
  z-index: 1000; }

.close.fa-times {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  color: #777777 !important; }

.popup {
  display: none;
  position: absolute;
  font-size: 12px;
  background: white;
  z-index: 100000;
  border: 1px solid #eeeeee;
  padding: 10px; }

.pos-relative {
  position: relative; }

.cursor-pointer {
  cursor: pointer; }

.hidden-date-time-locked {
  width: 150px;
  top: 70px;
  left: 10px; }

.hidden-scoring-explanation {
  width: 300px;
  height: 300px;
  top: 10px;
  left: -170px; }

.hidden-why-password {
  width: 300px;
  top: 20px;
  left: -130px; }

.hidden-why-show-hunches {
  width: 300px;
  top: 20px;
  left: -130px; }

.pool-page-section {
  margin-bottom: 25px; }

.pool-page-section-header {
  position: relative;
  color: #ffffff;
  background-size: 100%;
  font-size: 16px;
  text-transform: uppercase;
  padding: 5px;
  margin-bottom: 25px;
  border-radius: 2px; }

div#stats {
  height: 210px; }

img.photo-border {
  border: 10px solid #ffffff;
  border-bottom: 25px solid #ffffff;
  -webkit-box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.25); }

div#testimonials blockquote {
  font-size: 1rem;
  line-height: 18px !important;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding: 0px 7px; }

div#testimonials p {
  margin-right: auto;
  margin-left: auto;
  max-width: 800px; }

img.quotation {
  width: 32px;
  position: relative;
  top: 5px;
  margin-right: 10px; }

div.attribute {
  font-size: 16px;
  color: #a877d8;
  text-align: right;
  padding-right: 50px; }

/* NOTE:  Pink and blue are indicated in colors.php file and pulled in on pages where it's needed*/
/*
.darkblue {
background:#6b90ca !important;
}
.orange {
background:#f08763 !important;
}
.darkgreen {
background:#57bb8a !important;
}
.yellow {
background:#f5bf30!important;
}
.purple {
background:$main-color!important;
background-size:100%;
}
.red {
background:#e16054 !important;
}
.green {
background:#9bcb64 !important;
} 
.gray {
background:#aaaaaa !important;
}
*/
div.winner-info {
  padding-top: 1px;
  padding-bottom: 2px;
  background: #ffffff;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  border-radius: 5px; }

div.winner-name {
  font-size: 20px;
  margin-bottom: 10px;
  text-transform: uppercase; }

.ui-visual-focus {
  box-shadow: none !important; }

div.circular label.ui-button {
  width: 44px !important;
  height: 44px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px; }

/*
form#addhunch label.ui-button {
background: #ffffff !important;	
}
*/
form#addhunch label.ui-state-active {
  color: #ffffff; }

/*
form#addhunch .girl.ui-state-active {
background: #ec6292 !important;	
}
form#addhunch .boy.ui-state-active {
background: #57c2ef !important;	
}

form#addhunch .am.ui-state-active {
background: #bababa !important;	
}
form#addhunch .pm.ui-state-active {
background: #bababa !important;	
}


form#addhunch .eyes-blue.ui-state-active {
background: #6091d8 !important;	
}
form#addhunch .eyes-brown.ui-state-active {
background: #75572c !important;	
}
form#addhunch .eyes-gray.ui-state-active {
background: #bababa !important;	
}
form#addhunch .eyes-green.ui-state-active {
background: #4e9b57 !important;	
}
form#addhunch .eyes-hazel.ui-state-active {
background: #a8a862 !important;	
}

form#addhunch .hair-bald.ui-state-active {
background: # !important;	
}
form#addhunch .hair-black.ui-state-active {
background: #000000 !important;	
}
form#addhunch .hair-blonde.ui-state-active {
background: #f4e38c !important;	
}
form#addhunch .hair-brown.ui-state-active {
background: #75572c !important;	
}
form#addhunch .hair-red.ui-state-active {
background: #f27a51 !important;	
}
*/
.uppercase {
  text-transform: uppercase; }

#tob-ampm-dialog-display, #tob-ampm-display {
  text-transform: uppercase; }

#tob-noon-display {
  font-size: 10px; }

div#sex-boxes label {
  width: 100px !important;
  height: 100px !important; }

span.sex-caption {
  position: relative;
  font-size: 18px;
  top: 10px;
  text-transform: uppercase; }

div#poolcolor-boxes label, div#skincolor-boxes label, div#eyecolor-boxes label, div#haircolor-boxes label, div#ampm label {
  color: #ffffff;
  font-size: 11px; }

div#poolcolor-boxes label i, div#skincolor-boxes label i, div#eyecolor-boxes label i, div#haircolor-boxes label i {
  font-size: 34px; }

span.my-pools-title {
  font-size: 18px;
  color: #a877d8; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  /*border: 1px solid gray !important;*/
  width: 75px;
  height: 35px;
  border-radius: 0px;
  margin-right: 0px !important; }

.hunch-dialog .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  margin-right: -10px; }

.ui-button .ui-icon {
  display: none; }

div.pool-section {
  border-top: 1px solid #cccccc;
  padding-top: 20px;
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto; }

div#message {
  margin-top: 20px;
  margin-bottom: 20px; }

/******************* animation stuff **********************/
.fadein {
  -webkit-animation: fadein 3s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 3s;
  /* Firefox < 16 */
  -ms-animation: fadein 3s;
  /* Internet Explorer */
  -o-animation: fadein 3s;
  /* Opera < 12.1 */
  animation: fadein 3s; }

.fadeinfast.triggeredCSS3 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.fadeinfast.fadein1.triggeredCSS3 {
  animation-delay: 0s; }

.fadeinfast.fadein2.triggeredCSS3 {
  animation-delay: 1s; }

.fadeinfast.fadein3.triggeredCSS3 {
  animation-delay: 2s; }

.fadeinfast.fadein4.triggeredCSS3 {
  animation-delay: 3s; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.bounce {
  animation: bounce 2s .1s;
  transform: scale(1); }

@keyframes bounce {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); }
  100% {
    transform: scale(1); } }
/********** end animaton stuff ******/
/*********** date picker / time picker /etc **************/
.ui-datepicker th {
  padding: 0 0 !important; }

input.dobpicker {
  visibility: hidden; }

span#timepicker select {
  width: 60px;
  height: 40px;
  border-radius: 5px;
  margin-right: 5px;
  padding-left: 10px;
  -webkit-appearance: none; }

.time-picker-label {
  text-transform: uppercase; }
div#triplets {
	margin-top: 40px;
}
select#tobhour {
  position: absolute;
  top: 30px;
  left: 100px;
width: 50px;}

select#tobminute {
  position: absolute;
  top: 30px;
  left: 140px;
width: 50px;}

#slider-tobhour, #slider-tobminute, #slider-length, #slider-weight {
	max-width: 290px;
}
select#weightpicker, select#lengthpicker {
  padding-left: 25px; }

select option {
  overflow: visible; }

#tob-colon-dialog-display {
  position: absolute;
  top: 40px;
  left: 140px; }

#tob-ampm-dialog-display {
  position: absolute;
  top: 40px;
  left: 185px; }

#tob-noon-dialog-display {
  position: absolute;
  top: 40px;
  left: 210px; }

.hunch-dialog {
  display: none;
  text-align: center;
  position: relative;
  top: -25px; }

.dialog {
  display: none; }

.hunch-dialog label.ui-checkboxradio-radio-label {
  width: 44px !important;
  height: 44px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px; }

#dob-dialog {
  height: 400px !important; }

#ui-datepicker-div {
  top: 80px !important;
  left: 0 !important; }

#tob-dialog p.dialog-title {
  margin-bottom: 45px !important; }

div#ampm {
  display: block;
  margin-left: 100px;
  margin-top: 10px; }

div#ampm label.ui-button {
  margin-right: 3px !important; }

.color-choose-heading {
  color: #bbbbbb;
  display: flex;
  justify-content: space-between;
  font-family: 'Comfortaa', cursive !important; }

.color-choose-heading span {
  text-align: center;
  width: 44px;
  font-size: 12px; }

.dob-close-button {
  position: relative;
  top: 235px; }

#slider {
  margin-top: 8px;
  width: 280px;
  margin-left: auto;
  margin-right: auto; }

.ui-slider-horizontal .ui-slider-handle {
  top: -.7em !important; }

.ui-slider .ui-slider-handle {
  width: 1.8em !important;
  height: 1.8em !important; }

/******************* Toggles on add baby pool page ***************/
.toggle {
  width: 80px;
  /*border-bottom: 1px solid #eeeeee;*/
  text-align: right; }

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden; }

.cmn-toggle + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  text-align: left; }

input.cmn-toggle-round + label {
  padding: 2px;
  width: 50px;
  /*half*/
  height: 25px;
  /*half*/
  background-color: #dddddd;
  border-radius: 25px;
  /*half*/
  margin-left: 83px;
  font-size: 11px; }

.no-margin-left {
  margin-left: 0px !important; }

input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: ""; }

input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 30px;
  transition: background 0.4s;
  padding-left: 33px;
  padding-top: 6px;
  content: "No";
  color: #bbbbbb; }

input.cmn-toggle-round + label:after {
  width: 25px;
  /*half*/
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s; }

input.cmn-toggle-round:checked + label:before {
  background-color: #a877d8;
  padding-left: 4px;
  padding-top: 6px;
  content: "Yes";
  color: white; }

input.cmn-toggle-round:checked + label:after {
  margin-left: 27px;
  /*little more than half---half plus 2*/ }

.toggle-caption {
  position: relative;
  top: 21px;
  font-size: 13px;
  text-transform: uppercase; }

.horiz-buttons {
  text-align: center; }

/************* END TOGGLE **************/
/****************  stylized radio buttons **********
.stylized-radio .horiz-buttons {
	text-align: center;
}

.stylized-radio ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 35px;
}

.stylized-radio ul li input[type=radio]{
position: absolute;
visibility: hidden;
}

.stylized-radio ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 14px;
padding-left: 30px;
margin: 0px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}

.stylized-radio ul li:hover label{

}

.stylized-radio ul li .check{
display: block;
position: absolute;
border: 3px solid #AAAAAA;
border-radius: 100%;
height: 18px;
width: 18px;
top: 0px;
left: 0px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}

.stylized-radio ul li:hover .check {

}

.stylized-radio ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 14px;
width: 14px;
top: 2.25px;
left: 2px;
margin: auto;
transition: background 0.25s linear; 
-webkit-transition: background 0.25s linear;
}

.stylized-radio input[type=radio]:checked ~ .check {
border: 3px solid #8ce196;
}

.stylized-radio input[type=radio]:checked ~ .check::before{
background: #8ce196;
}

.stylized-radio input[type=radio]:checked ~ label{
color: #8ce196;
}
/*************** END stylized radio buttons ***************/
.fa-times {
  color: #eeeeee; }

.ui-button {
  color: #ffffff !important; }

/*
div#skincolor-boxes .fa-check, div#poolcolor-boxes .fa-check {
color: #ffffff;	
}
label i.fa-check {
display: none;
}
label.ui-state-active i.fa-check {
display: block;
}
*/
label img.checkmark {
  display: none; }

label.ui-state-active img.checkmark {
  width: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 10px; }

.horiz-buttons {
  margin-bottom: 5px; }

.horiz-buttons label.ui-button {
  background: #ffffff !important;
  color: #a877d8 !important; }

.horiz-buttons label.ui-state-active {
  background: #a877d8 !important;
  color: white !important; }

.two-buttons {
  width: 130px !important; }

.three-buttons {
  width: 80px !important; }

.seven-buttons {
  width: 40px !important; }

.two-buttons.ui-button, .three-buttons.ui-button, .seven-buttons.ui-button {
  border: 1px solid #a877d8 !important;
  height: 25px; }

.names {
  width: 150px;
  display: inline-block;
  text-align: left;
  border-radius: 5px;
  padding-bottom: 25px; }

.names div {
  padding-left: 25px; }

.names h2 {
  text-transform: uppercase;
  font-weight: normal; }

div#baby-graphic {
  width: 200px;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto; }

div#letter-display-on-baby {
  position: absolute;
  top: 220px;
  width: 200px;
  font-size: 50px;
  color: #eeeeee;
  font-family: 'Comfortaa', cursive !important;
  z-index: 10; }

/*hiding the question mark from the graphic for now.  Should remove it from SVG once I know we aren't going to have it show*/
.st96 {
  display: none; }

#dobscoringcontainer label {
  background: #6b90ca; }

#tobscoringcontainer label {
  background: #57c2ef; }

#sexscoringcontainer label {
  background: #f08763; }

#weightscoringcontainer label {
  background: #57bb8a; }

#lengthscoringcontainer label {
  background: #f5bf30; }

#eyescoringcontainer label {
  background: #a877d8; }

#hairscoringcontainer label {
  background: #e16054; }

#letterscoringcontainer label {
  background: #9bcb64; }

#freepointsscoringcontainer {
  /*simply to hide the Free Points when page first loads, since all categories are selected*/
  display: none; }

#freepointsscoringcontainer label {
  background: #bbbbbb; }

div#scoring-breakdown input {
  color: #777777; }

input[type="file"] {
  display: none; }

#custom-file-upload {
  background: #428442;
  border-radius: 5px;
  border: none;
  color: white;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  top: 5px; }

input[type="button"] {
  background: #8ce196;
  border-radius: 5px;
  border: none;
  color: white;
  padding: 10px;
  font-size: 14px;
  cursor: pointer; }

#remove-image {
  background: #bf5668;
  -webkit-appearance: none;
  padding: 4px 10px; }

.webkit {
  -webkit-appearance: none; }

.ui-widget select {
  font-size: 24px !important;
  font-family: 'Comfortaa', cursive !important;
  border: none;
  -webkit-appearance: none;
  color: #333333; }

.close-dialog-button {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  background: #8ce196;
  color: white;
  padding: 5px 5px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Comfortaa', cursive !important;
  border-radius: 30px;
  background: #a877d8; }

.tiny {
  font-size: 10px; }

.white {
  background: #ffffff !important; }

div#poolinfo div.add-hunch-button {
  margin-top: 40px;
  margin-bottom: 40px; }

/****************** Datepicker ******************/
#dob-text-display-in-dialog {
  position: relative;
  height: 30px;
  font-size: 24px;
  text-align: center;
  top: 5px;
  color: #333333;
  font-family: 'Comfortaa', cursive !important; }

div#ui-datepicker-div .ui-state-default, div#ui-datepicker-div .ui-widget-content .ui-state-default {
  width: 85% !important;
  height: 25px !important;
  border: none !important;
  text-align: center; }

.ll-skin-melon {
  font-size: 90%; }

.ll-skin-melon {
  font-family: 'Comfortaa', cursive !important;
  background: #2e3641 !important;
  border: none !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0; }

.ui-datepicker {
  width: 290px !important;
  padding: 0px 0px !important;
  margin-left: 16.5px !important; }

.ui-datepicker-header {
  border: none !important;
  background: #2e3641 !important;
  font-weight: normal !important;
  font-size: 15px !important; }

.ll-skin-melon .ui-datepicker-header .ui-state-hover {
  background: transparent;
  border-color: transparent;
  cursor: pointer;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0; }

.ui-datepicker .ui-datepicker-title {
  margin-top: .4em;
  margin-bottom: .3em;
  color: #e9f0f4; }

.ui-datepicker .ui-datepicker-prev span {
  background-image: url(/images/chevron-left.png) !important;
  background-position: 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  position: relative;
  top: 20px;
  left: 20px; }

.ui-datepicker .ui-datepicker-next span {
  background-image: url(/images/chevron-right.png) !important;
  background-position: 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  position: relative;
  top: 20px;
  left: 0px;
  margin-left: -10px !important; }

.ui-datepicker table {
  margin: 0; }

.ui-datepicker th {
  padding: 5px 0;
  color: #ccc;
  font-size: 13px;
  font-weight: normal;
  border: none;
  border-top: 1px solid #3a414d; }

.ui-datepicker td {
  border: none;
  padding: 0;
  padding-top: 3px; }

td .ui-state-default {
  background: transparent !important;
  border: none !important;
  text-align: center;
  padding: .5em;
  margin: 0;
  font-weight: normal;
  color: #efefef !important;
  font-size: 16px; }

.ui-state-disabled span.ui-icon {
  display: none !important; }

.ll-skin-melon .ui-state-disabled {
  opacity: 1; }

.ll-skin-melon .ui-state-disabled .ui-state-default {
  color: #ffffff !important;
  opacity: 0.2 !important;
  background: none !important; }

.ll-skin-melon td .ui-state-active,
.ll-skin-melon td .ui-state-hover {
  background: #2e3641 !important; }

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: 1 !important; }

/* END DATEPICKER */
.ui-slider-handle {
  border-radius: 50px !important; }

.explanation {
  font-size: 10px;
  font-style: italic;
  position: relative;
  width: 80px;
  display: block; }

.hunch-div .smaller {
  font-size: 10px; }

.standout {
  color: #ffffff;
  padding: 5px 10px;
  text-align: center;
  background: #a877d8;
  background: -webkit-linear-gradient(#c38fff, #a877d8);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#c38fff, #a877d8);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#c38fff, #a877d8);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#c38fff, #a877d8);
  /* Standard syntax (must be last) */ }

.not-upper {
  text-transform: capitalize; }

.whyads {
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 7px;
  cursor: pointer; }

/********************** AD STUFF ***************/
.ad {
  margin-bottom: 5px; }

.ad-desktop {
  display: block; }

.ad-mobile {
  display: none; }

/******************** Sticky footer bar *************/
div#sticky-footer-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  width: 100%;
  z-index: 10000;
  background: #ffffff;
  border-top: 1px solid #a877d8; }

/******************* FOOTER ******************/
footer {
  position: relative;
  top: 100px;
  font-size: 12px; }

div#footer {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  background: #a877d8;
  background: -webkit-linear-gradient(#a877d8, #c38fff);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#a877d8, #c38fff);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#a877d8, #c38fff);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#a877d8, #c38fff);
  /* Standard syntax (must be last) */
  color: white;
  margin-top: 30px;
  padding: 40px 0px; }

div#footer a {
  color: white;
  text-decoration: none; }

div#footer img {
  max-width: 250px; }

/*************** END FOOTER *******************/
div#socialmedia {
  display: block;
  margin-bottom: 20px; }

div#social-container img {
  max-width: 200px; }

div#social-container-icons img {
  width: 50px; }

.fb_iframe_widget {
  top: 8px; }

/************* MOBILE / RESPONSIVE ******************/
@media (min-width: 10px) and (max-width: 1023px) {
  div#header {
    height: 35px; }

  div#logo {
    left: 40px;
    top: 3px; }

  div#features div.bullets.third {
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px; }

  div#howitworks div.third {
    width: 100%; } }
@media (min-width: 10px) and (max-width: 700px) {
  div#features div.column {
    width: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px; }

  div.larger-screens {
    display: none !important; }

  div.smaller-screens {
    display: block !important; }

  img.hand-phone-gif {
    max-width: 300px;
    position: relative;
    top: 0px; }

  div.purplestats div {
    width: 140px !important; }

  div.sexstats div {
    width: 175px !important; }

  p, div#tour {
    padding: 0 10px 0 10px; }

  div#hero {
    background-image: url("/images/hero-bg-mobile.jpg");
    background-repeat: no-repeat;
    background-position: bottom; }

  div#features h3 {
    margin: 0px; }

  div#features div.full-width div {
    top: 0px;
    margin-bottom: 20px; } }
@media (min-width: 10px) and (max-width: 400px) {
  p {
    font-size: 12px; }

  .ad-mobile {
    display: block; }

  .ad-desktop {
    display: none; }

  div#hero h2 {
    font-size: 18px; }

  div#hero div.inner {
    text-align: center; }


  div#scoring-breakdown {
    top: 160px;
    left: 180px; }

  span.hundred {
    font-size: 40px; }

  span.pointstext {
    font-size: 11px;
    top: -5px; }

  form#pooldetails ul {
    padding-left: 5px; }

  div#baby-graphic {
    margin-top: 100px;
    left: 150px;
    width: 175px; }

  #skincolor-baby-graphic {
    left: 350px;
    width: 175px; }

  /*div#skincolor-boxes {
  width: 80%;	
  }
  div#skincolor-boxes label {
  width: 20%;	
  }*/
  /*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  	width: 50px !important;	
  	}*/
  #tob-hunch-click {
    position: absolute;
    top: 15px;
    left: 146px; }

  #length-hunch-click {
    position: absolute;
    top: 75%;
    left: 146px; }

  #scoring-breakdown label {
    width: 100px;
    font-size: 11px;
    display: inline-block;
    color: white;
    padding: 5px 2px; }

  div#letter-display-on-baby {
    width: 175px;
    top: 210px; }

  .poolname {
    font-size: 18px; }

  canvas#sexbreakdown, canvas#hairbreakdown, canvas#eyebreakdown {
    width: 100px !important;
    height: 100px !important; }

  .announcement-babysname {
    font-size: 24px; }

  .hunch-div .smaller {
    font-size: 9px; }

  .big {
    font-size: 26px !important; }

  .hunch-heading {
    font-size: 9px; }

  div.purplestats div {
    width: 100px !important; }

  div.sexstats div {
    width: 150px !important; }

  ul.doughnut-legend li {
    font-size: 9px; }

  .chart-legend li span {
    width: 8px;
    height: 8px; }

  div#stats {
    height: 150px; }

  ul.doughnut-legend {
    top: -90px;
    left: 11px; }

  div#hero {
    height: 200px;
    position: relative;
    top: -15px;
    padding-top: 15px; }

  div#hero h2 {
    position: relative;
    top: -5px;
    margin-bottom: 4px; }

  div#hero img.large-logo {
    width: 300px;
    position: relative;
    top: -15px; } }
@media (min-width: 10px) and (max-width: 375px) {
  div {
    max-width: 375px; }

  div.cat-button-container {
    margin-bottom: 2px; }

  div.cat-button {
    width: 100px;
    height: 30px; }


  /*	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  	width: 60px !important;	
  	}*/
  #scoring-breakdown label {
    width: 80px;
    font-size: 11px;
    display: inline-block;
    color: white;
    padding: 5px 2px; }

  div#scoring-breakdown {
    left: 180px; }

  #scoring-breakdown input {
    font-size: 11px; }

  div#scoring-breakdown.old {
    font-size: 10px; }

  .inputfield {
    width: 300px; }

  form li.section {
    margin-bottom: 10px; }

  div#info-container {
    width: 100%; }

  .hunch-num {
    font-size: 14px; }

  .hunch-name {
    font-size: 14px; }

  .hunch-whoami-and-location {
    font-size: 11px; }

  .hunch-comment {
    font-size: 11px;
    line-height: 11px; }

  .hunch-div {
    font-size: 10px; }

  .hunch-section {
    line-height: 20px; }

  .edit-hunch-link {
    font-size: 11px; }

  .hunch-score {
    font-size: 13px; } }
@media (min-width: 10px) and (max-width: 349px) {
  div#scoring-breakdown {
    left: 150px; } }
@media (min-width: 10px) and (max-width: 320px) {
  #logo {
    width: 135px; } }
/********************** PRINTABLE CALENDAR ******************/
div#printablecalendar {
  margin-left: 25px; }

div#printablecalendar table {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  border: 1px solid gray; }

div#printablecalendar table th {
  text-align: center; }

div#printablecalendar table td {
  vertical-align: top;
  width: 14%;
  border: 1px solid gray !important; }

div#printablecalendar table td div#parent {
  position: relative;
  min-height: 90px; }

div#printablecalendar table td div#parent span.day {
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: center !important;
  border: 1px solid gray;
  width: 15px;
  height: 15px;
  font-size: 12px;
  font-weight: bold;
  text-align: right; }

div#printablecalendar table td div#parent span.hunchinfo {
  position: relative;
  top: 0px;
  left: 1px;
  font-size: 9px;
  color: gray; }

.calendar-month {
  font-size: 20px;
  font-weight: bold; }