/*********************************
@large-font: 18px;
@medium-large-font: 16px;
@medium-font: 14px;
@medium-small-font: 13px;
@small-font: 11px;

// COLORS
@cream: #FFFBCF; 
@light-coffee: #DCD8CC;
@charcoal: #555;
@cobalt-blue: #00aeef;
***********************************/

.main-body {
  padding: 15px;
  margin: 5px 15px 0 15px;
  background: #ffffff;
}
.panel .header {
  font-weight: bold;
  font-size: 120%;
  color: #06afef;
  padding:5px 5px 5px 0px;
  /* padding:5px 5px 5px -3px; */
  margin: 0 0 5px 0;
}
.small { font-size: 11px; }
.submission-table th {
  padding: 10px;
  background: #06afef;
  color: #000000;
  font-size: 14pt;
  font-weight: bold;
}
.submission-table th.tips {
  background: #555555;
  color: #ffffff;
}
.submission-table td {
  font-size: 11px;
  padding: 10px;
  border: solid 1px #dfdfdf;
}
.submission-table td.tips { background: #fff281; }
.message-box {
  margin: 5px 0;
  padding: 15px 5px;
  font-size: 13px;
  line-height: 17px;
  background: #ffffff;
}
.warning {
  border: solid 1px #e80909;
  color: #e80909;
}
.positive {
  border: solid 1px #008005;
  color: #008005;
}
.alert {
  border: solid 1px #d0860b;
  color: #904600;
}
.info-message {
  border: solid 1px #fc7c34;
  color: #dc5c14;
}
.icon {
  margin: -10px 10px 0 0;
  float: left;
}
#beta {
  position: absolute;
  top: 25px;
  left: 300px;
}
.terms-of-service {
  position: relative;
  overflow: scroll;
  width: 750px;
  height: 100px;
  background-color: #f2fcff;
  font-size: 11px;
  padding: 1px;
  border: solid 1px #dddddd;
}
.test-mode {
  background: #eeeeee;
  color: #990000;
  font-weight: bold;
  font-size: 13px;
  position: absolute;
  top: -1px;
  left: 400px;
  z-index: 10;
  padding: 5px;
  border: solid 1px #999999;
  width: 550px;
}
.test-mode-content-wrapper {
  background: #ffffff;
  position: absolute;
  top: 18px;
  left: 410px;
  z-index: 5;
  width: 530px;
}
#test-mode-content {
  border: solid 1px #aaaaaa;
  width: 530px;
}
.display-box-format {
  font-size: 13px;
  width: 600px;
  overflow: auto;
  padding: 3px 10px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-bottom: solid 2px #888888;
  border-right: solid 2px #888888;
  white-space-collapse: preserve;
  white-space: pre-wrap;
}
.paper-body {
  background: #ffffff;
  height: 450px;
  line-height: 18px;
  font-size: 13px;
  width: 600px;
  overflow: auto;
  padding: 3px 10px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-bottom: solid 2px #888888;
  border-right: solid 2px #888888;
  white-space-collapse: preserve;
  white-space: pre-wrap;
}
.paper-body .highlight {
  background: #f0e39f;
  color: #333333;
}
#works-cited, .works-cited {
  background: #ffffff;
  height: 60px;
  font-size: 13px;
  width: 600px;
  overflow: auto;
  padding: 3px 10px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-bottom: solid 2px #888888;
  border-right: solid 2px #888888;
  white-space-collapse: preserve;
  white-space: pre-wrap;
}
.category-list, .results-300x250 {
  text-align: left;
  padding: 10px;
  margin: 20px;
  width: 300px;
  border-left: solid 1px #555555;
  border-right: solid 1px #555555;
}
.category-list .category {
  color: #555555;
  text-decoration: none;
  padding: 5px 10px;
  line-height: 25px;
}
.category-list .category a {
  color: #555555;
  text-decoration: none;
  padding: 5px 10px;
  line-height: 25px;
}
.category-list .sub a {
  color: #555555;
  text-decoration: none;
  padding: 5px 10px;
  line-height: 25px;
}
.category-list .category {
  border-bottom: solid 1px #aaaaaa;
  background: #ede9dd;
}
.category-list .category img { vertical-align: middle; }
.category-list .sub {
  margin-left: 15px;
  font-size: 13px;
}
.category-list .category:hover {
  color: #ff4200;
  border-top: solid 1px #999999;
  border-bottom: solid 1px #999999;
  background: #dcd8cc;
  font-weight: bold;
}
.category-list .sub:hover {
  color: #ff4200;
  border-top: solid 1px #999999;
  border-bottom: solid 1px #999999;
  background: #dcd8cc;
  font-weight: bold;
}
.header-message {
  margin: 0px 5px 0px 10px;
  width: 380px;
  line-height: 25px;
}
.header-message td { padding: 3px; }
.title-label, .works-cited-label {
  letter-spacing: 3px;
  display: inline;
  padding: 3px 15px 3px 35px;
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
  background: #555555;
  color: #fffbcf;
  border-left: solid 4px #00aeef;
}
.notes-bubble {
  border: 1px solid #666666;
  box-shadow: 0 0 50px #000000;
  visibility: hidden;
  position: absolute;
  top: 50px;
  right: -10px;
  padding: 5px 10px;
  width: 410px;
  height: 400px;
  background: #fefaee url(http://d23zq3229oqsac.cloudfront.net/images/notes-bubble-gradient.png);
}
.notes-bubble .close {
  background-image: url(http://d23zq3229oqsac.cloudfront.net/images/icons/close_x.png);
  position: absolute;
  right: 405px;
  top: -15px;
  cursor: pointer;
  height: 35px;
  width: 35px;
  z-index: 30;
}
.notes-bubble .close img { vertical-align: middle; }
.notes-bubble .prev-next {
  float: right;
  margin: 10px 30px 0 0;
  color: #555555;
  font-size: 14px;
  font-weight: bold;
}
.notes-bubble .prev-next a { color: #555555; }
.notes-bubble .prev-next a:hover {
  color: #555555;
  text-decoration: underline;
}
.notes-bubble .close a {
  text-decoration: none;
  color: #555555;
  font-size: 13px;
  font-weight: bold;
}
.notes-bubble .text { width: 390px; }
.notes-bubble .text .category {
  text-align: right;
  color: #009dde;
  font-weight: bold;
  font-size: 18px;
  margin: 8px 0 10px 0;
  padding: 0;
}
.notes-bubble .text .title {
  color: #777777;
  font-weight: bold;
  font-size: 14px;
  padding-bottom: 5px;
  margin: 10px 0 5px 0;
  border-bottom: solid 1px #aaaaaa;
}
.notes-bubble .text .message {
  font-size: 13px;
  height: 280px;
  overflow: auto;
}
.paper-body-col {
  float: left;
  line-height: 18px;
}
.paper-fields-col {
  float: left;
  padding-left: 25px;
  line-height: 25px;
}
.submit-page-logo {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ffffff;
  padding: 3px 25px 3px 3px;
  border: 2px solid #bab6aa;
}
.vocab-sentences {
  margin: 20px 0 10px 0;
  padding: 5px 0;
  border-top: solid 1px #aaaaaa;
}
.vocab-sentences h2 {
  font-weight: bold;
  color: #555555;
  font-size: 12px;
}
.vocab-sentences .sentence {
  padding: 10px 5px;
  border-bottom: solid 1px #dddddd;
}
.vocab-sentences .sentence .highlight {
  padding: 2px;
  background: #d1e8ef;
}
.validate-error { border: solid 2px #ff3333; }
.required { color: #ff5555; }
div.faq-list {
  line-height: 20px;
  border-bottom: solid 1px #999999;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.faq-list li a {
  color: #555555;
  text-decoration: underline;
}
.faq-entry {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.faq-entry .question { font-weight: bold; }
.faq-entry a {
  color: #555555;
  text-decoration: underline;
}


/****************************************************************** NEW LAYOUT *****************************************************/
/* ======================================== Generic elements =================================================================  */


body{ margin:0px; padding:0px;font-family:"Segoe UI",Arial,Verdana,Helvetica,sans-serif; font-size:13px; color:#4a4a4b; background:#fff }

h1, h2, h3, h4, h5, h6, h7, p, form, input, ul.no-bullet, ul.no-bullet li{padding:0px; margin:0px; font-weight:normal}
p{line-height:17px}
ul.no-bullet,ol.no-bullet { list-style: none; }
input, select, textarea{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#726051}
a{color:#00a7e2; text-decoration:none; outline:none}
a:hover{color:#856150; text-decoration:none}
a img{border:0}

.clear{ clear:both;}


#wrapper:after,#header:after,#middle:after, #footer:after, .content:after, .data:after{ content: "."; display: block; height:0; font-size:0px; clear: both; visibility: hidden; }


/* \*/ * html #header{height:1px} /* */
/* \*/ * html #middle{height:1px} /* */
/* \*/ * html #footer{height:1px} /* */
/* \*/ * html .content{height:1px} /* */
/* \*/ * html .data{height:1px} /* */


.colleft{float:left; width:auto }
.colright{float:right;width:auto}

.right{text-align:right}
.center{text-align:center}

.content{ width:960px; padding:5px; margin:0px auto; }
.data{width:auto}

/* h1{font-size:22px; color:#856150; font-weight:bold; padding:0px; margin:12px 0 12px; } */
h1{font-size:22px; color:#555; font-weight:bold; padding:0px; margin:12px 0 12px; }
h1.heading{ font-size: 25px; color: #fff; font-weight:bold; 
  padding:20px 0 15px 0; 
  /* padding:20px 0 15px -2px; */
  margin: 20px 0 35px 0;
}

h2{font-size:20px; padding:0 0 8px;}

h3{font-size:18px; }
h3.heading{ background:url(http://d23zq3229oqsac.cloudfront.net/images/heading-icon.gif) no-repeat 6px 8px; padding:3px 0 0 22px}

h4{font-size:13px; font-weight:bold }

h5{font-size:12px; font-weight:bold;}
p{padding:0 0 8px}

a.more{ background:url(http://d23zq3229oqsac.cloudfront.net/images/list-bullet.gif) no-repeat 0 3px; padding:0 0 0 12px; font-weight:bold }

/* ======================================== Wrapper ========================================================  */

#wrapper{ width:100%; height:auto; margin:0 auto; padding-bottom: 25px;}
.home-back { background: url(http://d23zq3229oqsac.cloudfront.net/images/background.gif) repeat-x left top; }
.main-back { background: url(http://d23zq3229oqsac.cloudfront.net/images/background_main.gif) repeat-x left top; }
.ui-back { background: #DCD8CC; }  /** light coffee **/
/* ======================================== Header ==========================================================  */

#header-container{ width:100%;height:auto; }
#header{ width:960px; padding:0px; margin:0 auto; height:100px!important }

/* ---------------- Header Logo -------------- */

#logo{ float:left;width:290px;margin:22px 0 0 0px; position:relative;}
#logo .plusone { position:absolute; top:12px;     right: -149px; width: 125px;}

/* ---------------- menubar -------------- */

#menubar{width:650px; float:right; margin-top:35px;}
.menutabs ul{float:right; width:auto}
.menutabs li{display:block;float:left;margin:0;padding:0; width:auto}
.menutabs li:after{font-size:0px; line-height:0px; height:0px; content:'.'; visibility:hidden; display:block; clear:both}
/* \*/ * html .menutabs li{height:1px} /* */

.menutabs a{float:left;background:url(http://d23zq3229oqsac.cloudfront.net/images/menu-left.gif) no-repeat 0 0;
margin:0;margin-right:2px; color:#856150; padding:0 0 0 19px;white-space:nowrap;text-decoration:none;width:auto}

.menutabs a span{float:left;display:block;background:url(http://d23zq3229oqsac.cloudfront.net/images/menu-right.gif) no-repeat 100% 0;
padding: 6px 22px 10px 3px;font-size:15px;color:#333;font-weight:bold;cursor:pointer;width:auto}


.menutabs a.current, .menutabs a:hover{ background-position:0 -37px!important; }
.menutabs a.current span, .menutabs a:hover span{background-position:100% -37px; color:#fff;}



/* =================================== Middle Container Structure ===============================================  */

#middle-container{ width:100%; height:auto; padding:0px; }
#middle{ width:960px; padding:0; margin:0px auto; }


/* ===================================  banner  ===========================================================  */

#main-banner{ height:290px!important;}
#main-banner .screen{ position:absolute; margin:15px 0 0 580px; width:295px; height:273px;}

#main-banner ul.points{padding:20px 0px 5px 60px; width:500px;}
#main-banner ul.points li{ list-style:none; background:url(http://d23zq3229oqsac.cloudfront.net/images/banner-bullet.gif) no-repeat 0 0; color:#fff; font-size:28px; margin-bottom:5px; padding:0 0 0 38px;line-height:40px;}


.feature-section{padding:10px 0px 10px 20px; width:570px;}
.feature-section h1{color:#fff; font-size:37px; letter-spacing:-1px; padding:0px; margin:0px}
.feature-section h2{color:#fff; font-size:26px; font-weight:bold;  padding:0px; line-height: 45px;}

.feature-section ul.feature-list{padding:10px 0 0; margin:0}
.feature-section ul.feature-list li{ list-style:none; color:#fff; font-weight:bold; font-size:15px; background:url(http://d23zq3229oqsac.cloudfront.net/images/tick.gif) no-repeat 0 0; margin-bottom:5px; padding:0 0 0 28px;
  line-height: 25px;}


#main-banner p{ padding:0 0 0 210px;}
#main-banner p .btn-usenow{ display:block;background:url(http://d23zq3229oqsac.cloudfront.net/images/btn-usenowfree.gif) no-repeat 0 0; width:236px; height:50px; font-size:0px; text-indent:-9999px}
#main-banner p .btn-getstarted{ display:block; margin-left:100px;background:url(http://d23zq3229oqsac.cloudfront.net/images/btn-getstarted.gif) no-repeat 0 0; width:247px; height:47px; font-size:0px; text-indent:-9999px}
/* == use now button for non-blue backgrounds == */
p .btn-usenow2{ display:block;background:url(/images/btn-usenowfree2.png) no-repeat 0 0; width:236px; height:50px; font-size:0px; text-indent:-9999px}

/* ===================================  banner  ===========================================================  */

.widget{ width:285px; padding:0px 15px 15px; float:left; background:url(http://d23zq3229oqsac.cloudfront.net/images/widget-bg.gif) no-repeat left top;}
.widget .img-thumb{ float:left; width:122px; height:111px; background:url(http://d23zq3229oqsac.cloudfront.net/images/thumb-shadow.gif) no-repeat left bottom; margin:0 12px 10px 0}
.widget h1{color:#4a4a4b;}
.widget h1.icon1{ background:url(http://d23zq3229oqsac.cloudfront.net/images/icon1.gif) no-repeat 0 0; padding:0 0 10px 55px;}
.widget h1.icon2{ background:url(http://d23zq3229oqsac.cloudfront.net/images/icon2.gif) no-repeat 0 0; padding:0 0 10px 55px;}
.widget h1.icon3{ background:url(http://d23zq3229oqsac.cloudfront.net/images/icon3.gif) no-repeat 0 0; padding:0 0 10px 55px;}
.widget .enlarge{position:absolute!important; width:24px; margin:-5px 0 0 102px; display:block;z-index:2;}

/* ===================================  banner  ===========================================================  */

.page-widget{ width:910px; padding:0px 20px 15px; margin:0 auto; background:url(http://d23zq3229oqsac.cloudfront.net/images/page-widget-bg.gif) no-repeat left top;}
.page-widget h1.page-heading{color:#4a4a4b; font-size:28px; border-bottom:1px solid #82c4e4; padding:10px 0px 3px; margin-bottom:10px; }
.page-widget h1.page-heading span{color:#00a7e2;}

.grader-form{ padding-top:10px}
.grader-form label{font-weight:bold; margin-right:30px}
.grader-form .inbox{ border:1px solid #ccc; padding:3px; width:830px}
.grader-form .textareabox{ border:1px solid #ccc; padding:3px; width:900px}
.grader-form p span{ font-size:11px; color:#777}

/* .terms-of-service{width:900px!important; height:90px!important; padding:5px!important;} */
.btn-getreport{ border:0; cursor:pointer; margin-top:20px; display:block; background:url(http://d23zq3229oqsac.cloudfront.net/images/btn-getreport.gif) no-repeat 0 0; width:184px; height:41px; font-size:0px; text-indent:-9999px}


.list{padding:0; margin:0}
.list li{ list-style:none;padding:0 0 0 10px; margin:0 0 5px; background:url(http://d23zq3229oqsac.cloudfront.net/images/list-bullet.gif) no-repeat 0 8px}




/* ==============================================  Footer   ===========================================================  */

#footer-container{width:100%;height:auto;padding:0px; margin:0;background:#555 url(http://d23zq3229oqsac.cloudfront.net/images/footer-bg.gif) repeat-x left top;}
#footer{ width:960px; padding:20px 0px; margin:0 auto; font-size:12px;color:#acacac; text-align:center}
#footer ul {margin-top:-25px; }
#footer ul li{display:inline; }
#footer ul li a{padding:0px 6px; }
#footer .copyright{padding:10px 0px 0px 0px;}
#footer table { width: 800px; margin: 20px auto; }
#footer table td { text-align:left; padding: 10px; line-height:20px; }
#footer a { color:#999; }
#footer a:hover { color:#ddd; text-decoration:underline; }
.firefox-img { float:right;background:url(http://d23zq3229oqsac.cloudfront.net/images/firefox-dark.gif) no-repeat 0 0; }
div#footer div.teachers { background:#feff8c; padding:5px 2px; border-radius: 5px; margin:0; text-align:center; box-shadow:0 0 12px #333;}
div#footer div.teachers a { color:#000; text-decoration:none; }
div#footer div.teachers a:hover { color: #555; text-decoration:underline; }

/* ==============================================  Javascript Disabled ============================================ */
#javascript-disabled-container{ position:absolute; width:100%; z-index: 50; top:0; left:0; }
#javascript-disabled{ margin:0 auto; background: url(http://d23zq3229oqsac.cloudfront.net/images/post_it_note.gif) no-repeat; width:600px; height:550px; }
#javascript-disabled div { padding: 175px 75px 0 70px;  width:350px;height:550px; font-size:16px;line-height:25px; margin: 0 0 0 25px}

/* ============================================= Preloading ==================================== */
.preload {display:none}

#floating-message {  position:absolute;  z-index: 5000;  left: 25%;  top: 25%;  width: 50%; }
#floating-message .close {  color: #999; }
#floating-message .close a {  text-decoration:underline; color: #999; }
#floating-message .close a:hover {  text-decoration:none; color: #555; }

.user-nav { position:absolute;top:-2px;right:-2px;width:300px; border: solid 1px #555; padding: 3px; background:#FFEC8B; text-align:center; }

.overlay {
  padding: 20px;display:none;z-index:10000;background-color:#fff;width:675px;min-height:200px;border:1px solid #666;
  box-shadow: 0 0 50px #000; 
  position:relative;
}
.overlay .close {
  background-image:url(http://static.123teachme.com/images/overlay/close.png);position:absolute;right:-15px;top:-15px;cursor:pointer;height:35px;width:35px;
}



.home-bottom-row { text-align:center;  }
.home-bottom-row div {  float:left; }

.pricing-fb-like { float:right; width:500px; padding:5px; margin:5px 10px; background:#FAFFC4; }
.pricing-fb-like div { margin:5px 10px; }
.pricing-fb-like .fb-like { float:left; width:100px; }
.pricing-fb-like .fb-message { width: 350px; float:right; font-size:14px; font-weight:bold; font-family:Georgia; font-style:italic; padding-top:15px; text-align:center;}
.fb-iframe { border:0; overflow:hidden; width: 300px;}
.survey-form-iframe { border:0; overflow:hidden; width: 100%; height: 275px;}
.print-message {  width:300px; margin:10px auto; }
.print-message img { vertical-align:middle; padding:5px 5px;}
.print-message a { text-decoration:none; color:#958A6F; background:#F7F5EF; padding:5px; }
.print-message a:hover { color:#453A1F; }

article.page { padding:5px 25px; background:#fff; border-radius:25px; margin:15px; }
article.page h1 { color: #555; }
.atf-leaderboard-show-sub { padding:0 5px 5px 5px; }

/*Social Media*/
.social_media{
  float: right;
  margin: 0 5px 0 25px;
  width:  320px;
  text-align: left;
  padding-bottom: 5px;
  border: 1px solid #333333;
}
.social_media .title {
  padding: 5px 10px;
  background-color: #333;
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 5px;
}

.social_media hr{
  background-color: #333333; height: 1px; border: 0;
}
.social_media iframe{
  margin: 0 10px !important;
}

/* Grammar exercises: Confused words quizzes*/
.single_sentence{
  display: block;
  padding: 15px 0;
  border-bottom: solid 1px #aaa;
  position: relative;
  line-height: 30px;
}
.single_sentence .result{
  float: right;
  position: absolute;
  left: -30px;
  top: -5px;
}

.result.correct-answer{
  background: url(/images/icons/correct.png) no-repeat;
  width: 24px;
  height: 24px;
}

.result.wrong-answer{
  background: url(/images/icons/wrong.png) no-repeat;
  width: 24px;
  height: 24px;
}

.translator_wrapper .form_area #sentence{
  height:150px;
  width: 700px;
}

/*lightbox*/

#lightbox-content {
  -moz-border-radius: 6px;
  background: #eef2f7;
  -webkit-border-radius: 6px;
  border: 1px solid #536376;
  -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
  -moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
  padding: 14px 22px;
  width: 500px;
  height: 300px;
  position: relative;
  display: none;
}
h3#see_id{
  font-size: 28px;
  text-align: center;
  margin-top: 15px;
}

/* Ginger */
.ginger_btn_sprite{ background:url("/images/ginger_btn_sprite.png") top left no-repeat; }
.ginger_btn_up{ width:238px; height:28px; background-position:0 0; }
.ginger_btn_sprite:hover{ width:238px; height:28px; background-position:0 -28px; }
.ginger_attr{width:245px; float:right;}
.ginger_attr_1{ margin:5px 0; width:245px; font-family: Arial,Helvetica,'san-serif'; font-size:12px; color:rgb(134,134,134); text-align:left; }

.error-captcha{
  color: red;
}


/*Css for top bar*/
:root .acidjs-hellobar,
.acidjs-hellobar label,
.acidjs-hellobar label span
{
    display: block;
}
 
.acidjs-hellobar,
.acidjs-hellobar *
{
    margin: 0;
    padding: 0;
}
 
.acidjs-hellobar > div,
.acidjs-hellobar label span
{
    line-height: 30px;
    text-align: center;
    color: #fff;
    background: #666;
    transition: margin 300ms ease-in-out;
    box-shadow: 0 0 2px 2px rgba(58, 58, 58, .50);
}
 
.acidjs-hellobar,
.acidjs-hellobar input
{
    display: none;
}
 
.acidjs-hellobar
{
    position: fixed;
    z-index: 250;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    color: #000;
    cursor: default;
     
    /* these properties are required only by the demo page at http://experiments.wemakesites.net/css3-hello-bar.html */
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}
 
/* these rules are required only by the demo page at http://experiments.wemakesites.net/css3-hello-bar.html */
.acidjs-hellobar > div,
.acidjs-hellobar label
{
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    pointer-events: all;
}
 
.acidjs-hellobar > div
{
    margin-top: -37px;
    padding: 0 64px;
    border-bottom: solid 3px #fff;
    font-size: 12px;
}
 
.acidjs-hellobar > div > div
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
 
.acidjs-hellobar label
{
    float: right;
    margin: 0 16px 0 0;
}
 
.acidjs-hellobar label span
{
    width: 30px;
    height: 30px;
    font-size: 27px;
    text-shadow: 0px 1px rgba(0, 0, 0, .75);
    border: solid 3px #fff;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
}
 
.acidjs-hellobar input ~ label span:first-child
{
    border-color: transparent;
    box-shadow: none;
    background: none;
}
 
.acidjs-hellobar input:not(:checked) ~ label span:first-child
{
    opacity: 0;
}
 
.acidjs-hellobar input:checked ~ label span:first-child
{
    opacity: 1;
    transition: opacity 300ms 300ms ease-in-out;
}
 
.acidjs-hellobar input:not(:checked) ~ label span:last-child
{
    margin-top: -33px;
}
 
.acidjs-hellobar input:checked ~ label span:last-child
{
    /*margin-top: -70px;*/
}
 
.acidjs-hellobar input:checked ~  div
{
    margin-top: 0;
}
 
/* Colors */
.acidjs-hellobar.acidjs-hellobar-e34c26 > div,
.acidjs-hellobar.acidjs-hellobar-e34c26 label span
{
    background: #EB593C;
}
 
.acidjs-hellobar.acidjs-hellobar-78ba00 > div,
.acidjs-hellobar.acidjs-hellobar-78ba00 label span
{
    background: #78ba00;
}
 
.acidjs-hellobar.acidjs-hellobar-1b58b8 > div,
.acidjs-hellobar.acidjs-hellobar-1b58b8 label span
{
    background: #1b58b8;
}
 
.acidjs-hellobar.acidjs-hellobar-ff2e12 > div,
.acidjs-hellobar.acidjs-hellobar-ff2e12 label span
{
    background: #ff2e12;
}
 
.acidjs-hellobar.acidjs-hellobar-aa40ff > div,
.acidjs-hellobar.acidjs-hellobar-aa40ff label span
{
    background: #aa40ff;
}
.acidjs-hellobar a{
  /*text-decoration: none;*/
  background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1) inset;
    color: #FFFFFF;
    margin: 0 0 0 10px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 30px;
}
.acidjs-hellobar a:hover{
  /*text-decoration: none;*/
  color:#3D4C4C;
}
.percentile_image{
  margin-bottom: -30px;
}
.hidden{
  display: none;
}