body {
    -webkit-user-select:  none;
    -moz-user-select: none;
	/*background-image:url('http://ipipet.teamerlich.org/static/gray.jpg');*/
}

/*this is for the live splash screen*/
div.splash-center {
	/* Default settings (for all screen sizes):
	 * Center horizontally, but not verticall (top of the splash, with
	 * the title and "learn more" button - always visible) */
	position: fixed;
	top: 0;
	left: 50%;
	width:672px;
	height:900px;
	margin-top: 0px;
	margin-left: -336px;
}

/* Additional options for tall screens (heigher than 870 pixels) -
 * Center the splash image vertically, as well */
@media all and (min-height: 870px) {
div.splash-center {
	position: fixed;
	top: 50%;
	margin-top: -450px;
}
}

div.splash-title {
	position:absolute;
	top:20px;
	left:40px;
}

div.splash-title-text {
	background-color:rgba(255,255,255,0.5); 
	padding: 0px 10px;
	-webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 10px;
    border-radius: 5px;
    border-top-right-radius: 10px;

}

div.splash-title-text-main {
	font-weight: bold;
	font-size:76px;
	text-shadow: 3px 3px #000000;
	color:#653A71;
	display: inline;
}

div.splash-title-text-sub {
	font-size:34px;
	/*text-shadow: 2px 2px #653A71;*/
	color:#000000;
	display: inline;
}

div.splash-title-button {
    width: 200px;
}

a.btn-splash{
/*	padding: 15px 30px;*/
/*	font-size:22px;*/
    margin: 30px auto;
	width: 167px;
	height: 39px;
	display: block;
	background-image: url('/static/img/learn_more_button_up.png');
}

a.btn-splash:hover {
	/* Stuff in here, applies when the mouse cursor is over the button */
	background-image: url('/static/img/learn_more_button_down.png');

}

a.btn-old-splash3 {
	display: block;
	width:250px;
	height:90px;
	padding-top: 24px;
	font-size:30px;
}

/*this is for splash2.html; found at http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/*/
div.col-center-block {
  	position: fixed;
	top: 50%;
	left: 50%; 
	width:900px;
	height:520px;
	margin-top: -260px;
	margin-left: -450px;
}

div.header-text {
	text-shadow: 2px 2px gray;
	font-size:48px;
	color:#653A71;
	display:inline;
}

span#twitter_text {
	position: relative;
	top: -5px;
	left: -20px;
	font-size: 16px;
}

/*******************************************
 * Run-page related elements.
 *
 * NOTE: the final position (pixel-wise) of many of the elements
 *       is calculated in runtime, in the recalc_sidebar_width()
 *       function in 'run.html' (which is why their position is "absolute").
 *
 *       While this is not a recommended or web-friendly method,
 *       The rendering of the elements is done on a known device (e.g. iPad),
 *       and the position must be accurate.
 *
 *       Positioning guidelines:
 *       1. Do not set left/right position.
 *       1.1. All items will be (horizontally) aligned relative to their
 *            parent element (with the 'plates_bar' or 'buttons_bar').
 *       2. Set "top: NNpx" (pixels) for items at the top of the screen,
 *            with low NN values (e.g. 10px or 20px).
 *       3. Set "bottom: NNpx" (pixels) for items at the bottom of the screen.
 *            these will be positioned NN pixels from the bottom.
 *       4. For items in the middle/center of the screen (e.g. Next/Start buttons),
 *            prefer using "top: 40%" (percent), and experiment until a good position
 *            is found.
 *******************************************/

/*about page list items*/
div.list_items {
	font-size:22px;
	font-weight:bold;
}


body#runbody {
	background-color: black;
}

/* buttons_bar and plates_bar are the only top-level elements on the page */

/* buttons_bar contains all the buttons and other
 * displayable information on the page */
div#buttons_bar {
	font-size:150%;
	color:#944DFF;


	position: absolute;
	top: 0px;
/*	DO NOT SET 'left' item. final left/right position will be set dynamically */
	padding: 2px;
}

/* plates_bar contains the two plates */
div#plates_bar {
	position: absolute;
	top: 0px;
/*	DO NOT SET 'left' item. final left/right position will be set dynamically */
}

/*space between plates for 96 well plates*/
div#plate_vertical_space96 {
	height:83px;
}

/*space between plates for 384 well plates*/
div#plate_vertical_space384 {
	height:58px;
}

/* "Start" button appear first when the page loads */
div#run_start_button {
	display: none;
	position:absolute;
	top:35%;
	font-size:22px;
}

#start_button {
	height:100px;
	width:90px;
}

div#replace_plate_message {
	display: none;
	position: absolute;
	top: 40%;
	font-size: 22px;
	width:90px;
	height:120px;
}

/* "Replace Source" and "Replace Destination" elements
 * are displayed when the user needs to change plates */
div#run_replace_src_plate {
	display: none;
	color:red;
	position: absolute;
	top: 0px;
	height:100%;
}

div#run_replace_dest_plate {
	display: none;
	color:red;
	position: absolute;
	bottom: 20px;
}

/* Previous/Next/Jump buttons.
 * The 'run_prev_next_buttons' contains all buttons+jump+volume info.
 */
div#run_prev_next_buttons {
	display: none;
	position: absolute;
	top: 0px;
	height: 100%;
}

/* Next button (big, middle of screen) */
#run_next_button {
	position: absolute;
	background-color:green;
	height: 100px;
	width: 100px;
	top: 47%;
}

/* Previous button, small, on top */
#run_prev_button {
	position: absolute;
	background-color:orange;
	top: 12px;
}

/* "Jump" div, containing the jump button and the input box */
#run_jump_div {
	position: absolute;
	bottom:0%;
}

/* div showing the volume to pipet */
div#volume_info {
	display: none;
	font-size:22px;
	position: absolute;
	top: 35%;
}




/* Shown after the last step */
div#last_step_warning {
	display: none;
	font-size:250%;
	color:#944DFF;
	position:absolute;
	top: 10%;
}


.label-grey {
	background: grey;
}