.b-credits{
    position: relative !important;
}

.alert-box.badge_received {
  background: #FFB3DE;
  border-color: #9F537E;
}

.activity-info{
    color:#777; 
    /*border-top: 1px solid #777;*/
}

.activity-info h3{
    color:#e71c77;
}

.activity-info ul{
    list-style-type: none;
}

.activity-box{
    /*border-top: 1px solid #777;*/
}

.activity-box a, .activity-box select{
    width: 200px !important;
}

table.jobs tr td{
    text-align: center;
}

.current-occupation-info{    
    color:#65b22e;
}

.location-description{
    padding:5px;
    font-size:14px;
    margin-bottom:20px;
}

.location-image{
    border:none !important; 
}

.location-block{
    border: 1px solid #ccc !important;
}


.location-block .b-block-title{
    border-right:none !important;
}

.location-block .b-item{
    border:none !important;
}

hr.styled {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(133, 133, 133, 0.5), rgba(255, 255, 255, 0));
  margin: 5px 0 20px 0;
}

.occupation-row{
    margin:20px 0 10px 0;
    line-height:100%;
}

.pink-title{
    color:#e71c77;
}

.green-title{
    color:#65b22e;
}

.requirements-not-met-for-job{
    color:#777;
    font-size:10px;
}

.occupation-earnings{
    color:#777;
    font-size:10px;
}

.sex-appeal-earnings{
    color:#c41a66;
    font-size:10px;
    font-weight: bold;
}



/* progress bar */

.progress {
  margin-top: 10px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  position: relative;
  height: 16px;
  background-color: #e71c77;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  background: url("../img/stripes.png") 0 0 repeat;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

#five:checked ~ .progress > .progress-bar {

  background-color: #f63a0f;
}

#twentyfive:checked ~ .progress > .progress-bar {

  background-color: #f27011;
}

#fifty:checked ~ .progress > .progress-bar {

  background-color: #f2b01e;
}

#seventyfive:checked ~ .progress > .progress-bar {

  background-color: #f2d31b;
}

#onehundred:checked ~ .progress > .progress-bar {

  background-color: #86e01e;
}

.badge-image{
    width:200px;
    height:200px;
    display:block;
    margin:0 auto;
    background-image: url(../img/badges-all3.png);
}

.badge-image-mini{
    width:100px;
    height:100px;
    display:block;
    background-repeat: no-repeat;
    background-image: url(../img/badges-all-small3.png);
    float: left;
    margin:0px 0px 20px 10px;
    
}



.mobile-br{
    display:block;
}

@media only screen and (max-width: 40em){
    .b-block .b-block-content span.prefix_public {
      border-right: 0px !important;
      border-bottom: 1px solid #ccc !important;
    }
    
    .mobile-br{
        display:none;
    }
}

@media only screen and (min-width: 64.063em){
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 0.65rem;
    }
}

@media only screen and (min-width: 90.063em){
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 1rem;
    }
}

.occupation-row div.columns{
    margin: 5px auto;
}

area {
  display: block;
  cursor: pointer;
}

.main-bottom-links a{
    color: #fff !important;
}

.reveal-modal{
    max-width: 100%;
}

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

.state-info .state-description{
    margin-left:10px;
}

.state-info h2{
    color: #e71c77;
    margin-bottom: 10px;
}

.errorMessage{
    text-align: left;
    color: #f00;
    font-size: 14px;
    margin-bottom: 10px;
}

.debate-bg{
    background-image:url(../img/backgrounds/debate-room.png) !important;
    background-position: 50% 50% !important;
    background-repeat:   no-repeat !important;
    background-size:     cover !important;
    padding: 0 14px !important;
}


.debate-bg .row{
    color:  #ddd;
    background:  rgba(0,0,0,0.4);
    padding:1.25rem !important;
}

.debate-bg .row h3{
    color:  #eee;
}

#organize-board{
    /*width:490px;*/
    width:605px;
    /*height:490px;*/
    height:640px;
    border:0;
    margin:0 auto;
}

.organize-tile{
    border:1px #000 solid;
    width:100px;
    height:100px;
    display:block;
    float:left;
    background-color: #fff;
}

/* ----------------------------- flippin jimmy ---------------------- */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	-webkit-perspective: 1000;
}

/* flip the pane when hovered */
.flip-container.hover .flipper {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
	height: 100px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	-webkit-transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
        background-image: url('/img/minigames/organize-tiles-100.jpg');
        background-position: -1800px 0;
        /*background-size: 100px 100px; */
}

/* front pane, placed above back */
.flipper .front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg); 
}

/* back, initially hidden pane */
.flipper .back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}


@media (max-width:700px) {

    #organize-board{
        width:364px;
        height:384px;
    }

    .organize-tile{
        width:60px;
        height:60px;
    }
    
    .flipper .front, .flipper .back {
        zoom:0.60;
        -moz-transform:scale(0.60);
        -moz-transform-origin: 0 0;
    }
}

@media (max-width:460px) {

    #organize-board{
        width:243px;
        height:256px;
    }

    .organize-tile{
        width:40px;
        height:40px;
    }
    
    .flipper .front, .flipper .back {
        zoom:0.40;
        -moz-transform:scale(0.40);
        -moz-transform-origin: 0 0;
    }
}

#organize-board #tries-counter{
    float:left;
    width:100px;
}

#organize-board #time-counter{
    float:right;
    width:120px;
    margin-right:2px;
    text-align: right;
}