/** Add css rules here for your application. */


/** Example rules used by the template application (remove for your app) */
.sendButton {
  display: block;
  font-size: 16pt;
}

body {
	font-family: sans-serif;
}

/**
	Style Settings for search mask
*/

.controlTable {
	position: relative;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.controlTable table {
	margin-left: auto;
	margin-right: auto;
}

.controlTable td {
	vertical-align: middle;
	text-align: center;
}


/**
	Style Settings for main elements (map, timeplot) of sti 
*/

.mainWindow {
	margin-left: auto;	
	margin-right: auto;
	margin-top: 50px;
	z-index: 1;
}

.mapWindow {
	border-bottom: 1px solid white;	
	border-left: 1px solid white;	
	border-top: 1px solid white;	
}

.vCenter {
	vertical-align: middle;	
}

.logo {
	z-index: -1;
}

.olMap {
	position: absolute;
}

.mapCanvas {
	position: absolute;
	z-index: -1;
}

.plotCanvas {
	position: absolute;
}

.borders1 {
	border: 1px solid red;	
}

.cellStyle {
	border:	1px solid rgb(174,174,174);
}

.cellStyleLeft {
	background-image: url(images/bg-left.png);
	background-repeat: repeat-y;
}

table {
	border-spacing: 0px;	
}

.cellStyleTop {
	background-image: url(images/bg-top.png);
	background-repeat: repeat-x;
}

.activated {
	background: rgb(136,136,136);
}

.activatedTab {
	background: rgb(136,136,136);
	border:	2px solid black;
}

.deactivatedTab {
	background: rgb(68,68,68);		
	border:	2px solid black;
}

.pointClickDiv {
	position: absolute;
	border: 1px solid #2a4056;
	visibility: hidden;
	z-index: 4;
}

.pointClickDivBackground {
	width: 100%;
	height: 100%;
	background-color: #5f88b2;
	opacity: 0.5;
	z-index: 4;
}

.activatedMap {
	background: url(images/activatedMap.png) repeat-x;
}

.activatedPlot {
	background-color: rgb(68,68,68);	
	background-image: url('images/activatedPlot.png');
	background-repeat: repeat-x;
}

/**
	Style Settings for elements (images/buttons, popup) in the map window
*/

.zHigh {
	z-index: 10;
}

.center td {
	margin-left: auto;
	margin-right: auto;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.mapControls {
	position: absolute;
	right: 25px;
	top: 5px;
	z-index: 1008;
}

.mapControls td {
	vertical-align: top;
}

.mapAddControl {
	position: absolute;
	left: 55px;
	top: 5px;
	z-index: 1008;
}

.addCross {
	position: absolute;
	z-index: 1006;
}

.connectionLabel {
	position: absolute;
	right: 10px;
	top: 65px;
	z-index: 1008;
}

.polygonDrilldown {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1009;
}

.circleDrilldown {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1008;
}

.countryDrilldown {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1008;
}


/**
	Style Settings for slider element
*/

.sliderStyle {
	width: 20px;
	height: 100px;
}

.dynamic-slider-control {
	width: 20px;
	position: relative;
}

.vertical {
	height:	80px;
}

.horizontal {
	width:	60px;
}

.dynamic-slider-control input {
	display:	none;
}

.dynamic-slider-control .handle {
	position:			absolute;
	font-size:			1px;
	overflow:			hidden;
}

.dynamic-slider-control.vertical .handle {
	width:				20px;
	height:				30px;
	background-image:	url("images/sliderDot.png");
}

.dynamic-slider-control.horizontal .handle {
	width:				30px;
	height:				20px;
	background-image:	url("images/sliderDot-horizontal.png");
}

.dynamic-slider-control .line {
	position:			absolute;
	font-size:			0.01mm;
	overflow:			hidden;
	border:				1px solid rgb(90,97,90);
}

.dynamic-slider-control.vertical .line {
	width:				3px;
}

.dynamic-slider-control .line div {
	width:		1px;
	height:		1px;
	
	border:		1px solid;
	border-color:	rgb(230,230,230) rgb(189,190,189)
			rgb(189,190,189) rgb(230,230,230);
}


/**
	Style Settings for elements in timeplot div
*/

#plotWindow {
	position: relative;
}

#plot {
	position: absolute;
	top: 12px;
	left: 0px;
	z-index: 1;	
}

.timeplot-container {
    padding: 0px 0px;
	border: none;
	height: 100px;
}

.timeplot-copyright {
    visibility: hidden;
}

.timeplot-timeflag {
    font-size: 0.8em;
    font-weight: normal;
}

.timeplot-valueflag {
    font-size: 0.8em;
}

.timeplot-dayflag-pole {
    display: none;
    border-left: 1px solid #2a4056;
    z-index: 999;
}

.stampflag-pole {
    display: none;
    border-left: 1px solid #2a4056;
    z-index: 999;
}

.stampflag {
    display: none;
    border: 1px solid #2a4056;
    padding: 2px 4px;
    text-align: center;
    background-color: #5f88b2;
    z-index: 1000;
}

.timeplot-dayflag {
    display: none;
    border: 1px solid #FF0000;
    padding: 1px;
    text-align: center;
    background-color: #FFCCCC;
    z-index: 1000;
}

.range-box {
    display: none;
    background-color: #5f88b2;
    background-repeat: repeat;
    opacity: 0.6;
    z-index: -1;
}

.left-feather {
    display: none;
    z-index: -1;
}

.right-feather {
    display: none;
    z-index: -1;
}

.timeplot-background {
    display: none;
    z-index: -2;
}

.range-dragger {
    display: none;
    height: 11px;
    width: 17px;
    background-image: url(images/dragger.png);
    background-repeat: no-repeat;
    z-index: 1002;
}

.plotHandle {
	position: absolute;
	background-color: #5f88b2;
	border: 1px solid #2a4056;
	visibility: hidden;
	cursor: pointer;
    z-index: 1002;
    padding: 2px 5px;
    font-size: 0.8em;
}

.plotToolbar {
	position: absolute;
	background-color: #5f88b2;
	border: 1px solid #2a4056;
	visibility: hidden;
	z-index: 1;
}

.absoluteToolbar {
	position: relative;
	width: 124px;
	height: 20px; 		
}

.dragRange {
	position: absolute;
	height: 11px;
    width: 17px;
    top: 4px;
    right: 47px;
    background-image: url(images/dragger.png);
    background-repeat: no-repeat;
	cursor: pointer;
}

.zoomRange {
    position: absolute;
	height: 16px;
    width: 16px;
    top: 2px;
    right: 26px;
    background-image: url(images/zoom.png);
    background-repeat: no-repeat;
	cursor: pointer;
}

.cancelRange {
    position: absolute;
	height: 16px;
    width: 16px;
    top: 2px;
    right: 5px;
    background-image: url(images/cancel.png);
    background-repeat: no-repeat;
	cursor: pointer;
}

.tagCloudDiv {
    position: absolute;
    visibility: hidden;
}

.featherSlider {
    position: absolute;
    top: 9px;
    right: 64px;		
}

.mapToolbar {
	position: absolute;
	width: 69px;
	height: 20px; 		
	background-color: #5f88b2;
	border: 1px solid #2a4056;
	visibility: hidden;
	z-index: 1009;
	opacity: 0.8;
}

.tagCloudItem {
	position: absolute;
	z-index: 1009;
	cursor: pointer;
}

.timeOverview {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 12px;
	z-index: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0.5;
	border-bottom: 1px solid rgb(100,100,100);
}

.plotLabels {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 12px;
	z-index: 0;
	overflow: hidden;
}

.plotLabel {
	position: absolute;
	font-size: 9px;
	height: 10px;
	padding: 1px 2px;
	border-left: solid 1px rgb(214,214,214);	
}

.overviewRange {
	position: absolute;
	top: 0px;
	height: 12px;
	background: white;
}

.overviewLabel {
	position: absolute;
	font-size: 9px;
	height: 10px;
	padding: 1px 2px;
	border-left: solid 1px black;	
}

.shiftLeft {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 12px;
	width: 12px;
	opacity: 0.8;
	background-image: url(images/shiftLeft.png);
	visibility: hidden;
}	

.shiftLeft:hover {
	cursor: pointer;
	background-image: url(images/shiftLeftOver.png);
}	

.shiftRight {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 12px;
	width: 12px;
	opacity: 0.8;
    background-image: url(images/shiftRight.png);
	visibility: hidden;
}

.shiftRight:hover {
	cursor: pointer;
	background-image: url(images/shiftRightOver.png);
}	

/**
	Style Settings for data tables
*/

#tableWindow {
	text-align: center;
	width: 100%;
}

.unselectedCellInner {
    width: 200px;
    padding: 5px;
}

.unselectedCellOuter {
	    border: 2px solid #BBBBBB;
	    text-align: left;
}

.resultsLabel {
	font-size: 85%;
	color:#999999;
}

.pageLabel {
	color:#666;		
	font-size: 85%;
	font-weight: bold;
	margin-right: 5px;	
}

.page {
	font-size: 85%;
	color:#999999;
	margin-right: 5px;
	cursor: pointer;
}

.selectedPage {
	font-size: 85%;
	margin-right: 5px;
	cursor: pointer;
	color: black;
	text-decoration: underline;
}

.page:hover {
	color: black;
	text-decoration: underline;
}

.nameLabel {
	font-size: 85%;
	font-weight: bold;
}

.dataLabel {
	font-size: 85%;
}

.baseTable {
	margin-left: auto;
	margin-right: auto;
}

.baseTableEntry {
	vertical-align: top;	
}

.tableControls {
	border-top: dotted 1px #777777;
	border-bottom: dotted 1px #777777;
	width: 100%;
}

.matchLabel {
	font-weight: bold;
}

.termLabel {
	font-weight: bold;
	color:#999999;
}

.arrow {
	cursor: pointer;	
}

.delete {
	cursor: pointer;
}

.tabLabel {
	padding-right: 30px;	
}

.view {
	cursor: pointer;		
}

.selectedView {
	padding: 2px;
	border: 2px solid #BBBBBB;
}

.description {
	border-top: dotted 1px #777777;
	font-size: 85%;
	padding-top: 5px;
}

.controlLock {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1008;
	visibility: hidden; 	
}

.addPanel {
	background: #c9c9cb;
	border:	2px solid rgb(136,136,136);
}

.addTitle {
	font-weight: bold;
	text-decoration: underline;
}

.addItem {
	font-size: 85%;
	font-weight: bold;	
}

.addActualTime {
	font-size: 85%;	
}

.addButton {
	height: 85%;	
}

.cursor {
	cursor: pointer;		
}

.lockScreenContainer {
	display:block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 100000;
	visibility: hidden;	
}

.lockScreen {
	display:block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: grey;
	opacity: 0.9;
}

.tutorialLinkDiv {
	position: absolute;
	top: 10px;
	right: 10px;		
}

.tutorialLink {
	cursor: pointer;	
}

.tutorialDiv {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	width: 50%;	
	background-color: white;
	border: 5px solid #666666;
	padding: 20px;	
}

h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 20px 0px 20px;
  text-align: center;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  color: #000000;
  margin: 20px 0px 20px;
  text-align: center;
}

.video {
	width:600px;
	height:450px;
	margin:auto;	
}

.tutorialButtons {
	width: 100%;
	text-align: center;
	margin-top:20px;
}

.closeTutorial {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

.link {
	cursor: pointer;
	margin-top: 5px;
}

.headerLink {
	padding-top: 12px;
	margin-bottom:	2px;
	margin-left:	13px;
	font-family:	arial,helvetica,clean,sans-serif;
	font-size:	13px;
	border-bottom: 1px solid #CCCCCC;
	cursor: pointer;
	width: 94px;
}

.headerLink:hover {
	background-color: #f0f0f0;
}

.blockDiv {
	position: absolute;
	top: 0px;
	left: 0px;
}

.blockDivOverlay {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #555555;
	opacity: 0.7;
}