html { height:100%; }

body { height:100%; 

		font-family:Arial; 

		font-size:12pt;

		margin:0;

		text-align:center;

padding:5px;

}

		

#pageholder	{

		position: relative;

		text-align:left;

		width: 100%;

}



#map_canvas { width:100%; padding-top:60%; border: 1px solid #333; }

		

table {text-align:center; font-size: 9pt; }

th,td {border:1px solid #ccc; width:120px; margin:0; }

th { background-color:#eee; }



.title {color:#fff; background-color:#930; font-weight:bold; padding:3px; margin:10px 0 5px 0; text-align: left;}



.typebutton {

	display: inline-block;

	text-align:center;

	width:140px;

	height: 30px;

	padding: 10px 0 0 0 ;

	background: #ccc;

	corner-radius: 10px;

	color:#fff;

	font-weight: bold;

	margin-bottom: 5px;

	cursor: pointer;

}

#showplot {

	background: #930;

}



#results {

	height:500px; width:100%;  

	overflow-y:scroll; 

	margin: 0 auto; 

	display: none;

} 



#positionresults {

	text-align:center;

}



#footer {  color:#fff; background-color:#930; font-size:8pt; padding:3px;margin-top:10px; text-align:center;}



#canvas { border: 1px solid #333; width:100%; padding-top:100%;position:relative; background:#fff url('compass500.png') top left no-repeat; background-size: contain;  margin:0 auto;}



.hourbox {background: transparent url('sun.png') top left no-repeat; position:absolute; width:30px; height:30px; font-weight:bold; text-align:center; color:#000; padding-top:6px;}

#rise {background: transparent url('rise.png') top left no-repeat; position:absolute; width:51px; height:30px; }

#set {background: transparent url('set.png') top left no-repeat; position:absolute; width:51px; height:30px; }



#datepicker { margin:0 auto; width:300px;}

.button { font-weight:bold; color:#fff; background-color:#e00; display:inline; padding:10px; cursor:pointer }



#slider { margin:10px ; }

#timeselector { font-size:12pt; font-weight: bold; }



#scenecanvas {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    outline: none;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  border: 1px solid grey;

  background: none;

  cursor:pointer;

	width: 100%;

	height: 500px;

	position:absolute;

	top:0; left:0;

  }

  #backgroundimagediv {

	  background: #fff url('bg_grid.png') top left repeat;

	width: 100%;

	height: 500px;

	position:absolute;

	top:0; left:0;

  }

  

  #location_date_time_box {

	position: absolute;

	top:10px ; left: 10px;	

	width: 180px;

	height:60px;

	font-size: 9pt;

	color: #930;

  }

  

  #shadowcanvas {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    outline: none;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  border: none;

  background: none;

	width: 100%;

	height: 500px;

	position:absolute;

	top:0; left:0;

	opacity: 0.5;

  }

  

    #dayshadowcanvas {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    outline: none;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  border: none;

  background: none;

	width: 100%;

	height: 500px;

	position:absolute;

	top:0; left:0;

	opacity: 0.5;

  }

  

  .clicky { cursor:pointer; background:#930; color:#fff; padding:3px; margin-left:5px;}

  

  #ghostcanvas {

	width: 100%;

	height: 500px;

	display:none;

  }

  .vtop {

	vertical-align: top;

  }

  

  #adcolumn {

	position: absolute;

	right: 0;

	top: 90px;

	width:300px;

	  display: none;

  }

  

    .sidebarads{

		display:none;

	}

	.inlineads {

		display: block;

	}





 @media (min-width: 500px) {

	#canvas { width:500px; height:500px; padding: 0; }

 }

 

 @media (min-width: 800px) {

	 #pageholder	{

		width: 800px;

		margin: 0 auto;

	}

	#location {

		width: 470px;

		float:left;

	}

	#map_canvas {

		padding:0;

		height:350px;

	}

	#dateselection {

		float: right;

		width:300px;

	}

	#results {

		width: 500px;

		margin: 0 auto;

	}



	#canvas { width:500px; height:500px; padding: 0; }



 }

 

 @media (min-width:1000px) {

	#adcolumn {

		display: block;

	}

	#pageholder	{

		padding-right:320px;

	}

	.sidebarads{

		display:inline-block;

		width:300px;

		height:600px

	}

	.inlineads {

		display: none;

	}

 }