body {
	margin:0 0 0 0; /*squish slide into mturk window*/
}

table {
	/* center all tables by default */
	margin: auto;
}

/*the experiment happens in "slides"*/
.slide {
	/*pad the inside of the slide*/
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;

    /*center slide within the window*/
	margin: auto auto;
	margin-top: 0px;

	/*all elements in a slide will be centered by default*/
    text-align: center;

    border: 1px solid #04abe3;
    width: 800px;
    height: 600px;

    /*could explicitly set the following, but these are the defaults for me (chrome, linux)*/
    font-size: 20px;
    background-color: rgb(255,255,255);
}

/* start slide */

#cocolab {
	font-weight: bold;
}

#legal {
	font-size: 0.8em;
}

/*make the subj_info slide prettier*/

.subj_info_title {
	color:#036;
	background:transparent;
	font-size:25;
	font-weight:bold;
}

div.long_form {
	font-size: 15px;
}

fieldset {
	border: none;
	border-top: solid 1px #ccc;
}

div.long_form p {
    color:#036;
    margin: 20px 0 0 0;
}

div.long_form p.info {
    margin:0 0 40px 0;
    padding:0;
    color:black;
}

div.long_form label {
	padding: .5em .5em;
}

textarea {
	border: 2px inset;
}

/* sliders */


/*align the left and right labels for the sliders properly*/
.slider_table .left {
	display: inline;
	text-align: left;
	float: left;
}

.slider_table .right {
	display: inline;
	text-align: right;
	float: right;
}

.thin {
	height: 50px;
}

.top {
	top: 0%;
	position: relative;
}
.bottom {
	top: 100%;
	position: relative;
	transform: translateY(-200%);
}

.slider_target {
	text-align: right;
}

.ui-slider-range {
	/* you could have a "range" which makes the slider to the left of the handle a different color from the background */
	background: transparent;
}

#cocologo {
    width: 200px;
    margin: 10px;
}

.slider {
	width: 400;
	margin: 10px;
}

.vertical_slider {
	width: 10px;
	height: 300px;
	margin: 10px auto;
}

#slider_endpoint_labels {
	height: 300px;
}

.bin_label{
	text-align: center;
}

/* Progress Bar */
.progress{
  position: absolute;
  right: 10px;
  top: 10px;
}
.progress span{
  position:relative;
  top: -6px;
}

.bar-wrapper{
    height:20px;
    width:200px;
    border:1px solid #000000;
    display:inline-block;
}

.bar{
    position:relative;
    height:100%;
    width:0px;
    background-color:#000000
}