/************************************/
/*             GLOBALS              */
/************************************/

html, body {

	margin: 0;
	padding: 0;
	height: 100%;
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Roboto Mono';*/
	/*font-family: 'Roboto Condensed', sans-serif;*/
	font-family: Avenir,helvetica neue,Helvetica,Arial,sans-serif;
	color: #111;
	text-align: center;
	min-width: 1200px;
	min-height: 800px;

}

hr {

    border: solid #666666 1px;
    height:1px;
}


.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.left {

	float: left;

}

.right {

	float: right;

}

.transparent {

    opacity: 0.75;

}

.bold {

    font-weight: bold;
    color: crimson;

}

.italic {

    font-style: italic;

}

.gray {
	
	background-color: #f3f7fb;
	
}


/************************************/
/*             HEADER               */
/************************************/

#header {

    position: absolute;
	font-family: 'Source Sans Pro';
    top: 0px;
    right: 0px;
    left: 0px;
    height: 40px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    color: black;
    background-color: #f3f7fb;
    border-bottom: 1px solid #111;

}

#icon {

	position: absolute;
	top: 0px;
	right: 0px;
	left: 15px;
	padding-top: 5px;
	height: 40px;
	width: 40px;
	float: left;

}

#divider {

    position: absolute;
	top: 13px;
	left: 70px;
    width: 1px;
    height: 25px;
    background-color: #888;

}

#logo {

	position: absolute;
	top: 0px;
	left: 90px;
	height: 34px;
	padding-top: 13px;
	float: left;
	font-size: 20px;
	color: #333;

}

#description {

	position: absolute;
	top: 0px;
	right: 60px;
	height: 34px;
	padding-top: 11px;
	float: right;
	font-size: 18px;

}

#clo_logo {

	position: absolute;
	top: 0px;
	right: 15px;
	height: 36px;
	padding-top: 4px;
	float: right;

}

#klyccb {

	position: absolute;
	top: 0px;
	right: 15px;
	height: 34px;
	padding-top: 17px;
	float: right;
	font-size: 15px;
	color: #333;

}

/************************************/
/*              INPUT               */
/************************************/
#top-form {

	position: absolute;
    top: 51px;
	left: 0px;
    height: 80px;
    width: 100%;
    background-color: white;
	border-bottom: 1px solid #aaa;

}

#input-hint {

	position: absolute;
    top: 3px;
    left: 50%;
    width: 500px;
    margin-left: -245px;
    text-align: left;
	font-size: 10px;
	font-weight: bold;
	display: none;

}

#input-holder {

	position: absolute;
	margin-top: 15px;
	margin-left: -250px;
	height: 50px;
	width: 500px;
	left: 50%

}

#input-filename {

	position: absolute;
	top: 5px;
	left: 0px;
	height: 40px;
	width: 400px;
	padding-left: 5px;
	color: #aaa;

}

/************************************/
/*            CONTENT               */
/************************************/

#content {

	position: absolute;
    top: 132px;
    bottom: 31px;
    width: 100%;
    background-color: #fefefe;
	overflow: hidden;

}

.message {

	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 50px;
	margin-top: -25px;

}

#spec-container {

	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 138px;
	padding-top: 10px;
	background-color: white;
	border-bottom: 1px solid #aaa;

}

#spec {

	width: 95%;
	height: 128px;

}

audio {

	position: absolute;
	top: 149px;
	left: 0px;
	right: 0px;
	width: 100%;
	background-color: #f1f3f4;
	border-bottom: 1px solid #aaa;
}

#playerMarker {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 3px;
	height: 128px;
	background-color: deepskyblue;

}

.intervalMarker {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 3px;
	height: 128px;
	background-color: white;
	opacity: 0.75;

}

.intervalMarkerDashed {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 3px;
	height: 128px;
	border-right: 3px dashed limegreen;
	opacity: 0.75;

}

#bbox {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 3px;
	height: 128px;
	background-color: deepskyblue;
	opacity: 0.5;

}

#chart-headline {

	position: absolute;
	top: 183px;
	left: 0px;
	right: 0px;
	height: 25px;
	padding-top: 15px;
	font-size: 16px;
	color: #111;
	background-color: white;

}

#chart-container {

	position: absolute;
	top: 223px;
	left: 0px;
	right: 0px;
	bottom: 45px;
	min-height: 300px;
	background-color: white;
	border-bottom: 1px solid #aaa;

}

#analysis-chart {

	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: white;

}

#statistics {

	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 30px;
	background-color: white;
	color: #333;
	font-size: 15px;
	padding-top: 15px;
	padding-left: 20px;
	text-align: left;

}

/************************************/
/*             FOOTER               */
/************************************/

#footer {

	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 30px;
	width: 100%;
	font-size: 13px;
    color: #333;
	background-color: #f3f7fb;
    border-top: 1px solid #111;

}

#footer_right {

	margin-right: 20px;
	padding-top: 7px;

}

#footer_left {

	margin-left: 20px;
	padding-top: 7px;

}


/************************************/
/*             BUTTONS              */
/************************************/

.button {

	min-width: 80px;
    height: 25px;
    padding: 3px;
	padding-top: 11px;
    font-size: 14px;
    color: white;
    background-color: #111;
	border-radius: 5px;

}

.button:hover {

    background-color: deepskyblue;
    color: white;
    cursor: pointer;

}

.right {

	float:right;

}

.left {

	float: left;

}

#uploadButton {

	position: absolute;
	top: 5px;
	right: 0px;

}