@import url("grid_640.css");

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; /*overflow: hidden;*/ }
html { font-size: 100%; }
body { font-size: 100%; }

p, ul, ol, li { font-size: 100%; }
table { border-spacing: 0px; border-collapse: separate; }
table, tr, td { border: none; margin: 0px; padding: 0px; }

ol.actions-list { margin: 10px; padding-left: 30px; }

header { margin-bottom: 10px; }
footer { margin-top: 10px; font-size: 75%; }

section { margin-top: 10px; }

#page {
	border: solid 2px #4488cc;
	border-radius: 6px;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20px;
	width: 620px;
}

.h1 { font-size: 2.0em; font-weight: bold; }
.h2 { font-size: 1.7em; font-weight: bold; }
.h3 { font-size: 1.5em; font-weight: bold; }
.h4 { font-size: 1.2em; }
.h5 { font-size: 1.1em; }
.h6 { font-size: 1em; }

a, a:visited { color: #4488cc; }
a:hover, a:active { color: #dd2222; }

span.acronym { cursor: help; }

/* FORMS - BEGIN */

/* GENERAL - BEGIN */
form { display: inline; }
input, select, textarea { margin: 0; outline: 0; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }
input, select { vertical-align: middle; }
textarea { overflow: auto; }
select { cursor: pointer; }
option { padding-right: 1em; }

input, button, textarea, select, select option { border-radius: 6px; }
input { padding: 5px; margin: 2px; vertical-align: middle; }
button { padding: 5px 10px 5px 10px; margin: 2px 10px 2px 10px; vertical-align: middle; }
textarea { padding: 5px; }
select { padding: 5px; }
select option { padding: 5px; vertical-align: middle; }
/* GENERAL - END */

/* COLORS - BEGIN */
label { color: #333333; }
label:hover { color: #666666; }
* html input, * html textarea, * html select, input, textarea, select { color: #333333; }
* html input, * html textarea, * html select, input, textarea, select { background-color: #f8f8f8; border: 1px solid #ddd8ee; }
input:hover, textarea:hover, select:hover { background-color: #eeeeee; border: solid 1px #dd2222; color: #dd2222; }
input:focus, textarea:focus, select:focus { background-color: #f4f4f4; border: solid 1px #ff5500; color: #000000; }
select optgroup { background-color: #f8f8f8; color: #000000; font-weight: normal; font-style: normal; }
select option { background-color: #f4f8fb; color: #333333; }
/* COLORS - END */

/* GRADIENT BUTTON - BEGIN */
button {
	-moz-box-shadow: 0px 1px 0px 0px rgba(202,227,252,.8) inset;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(202,227,252,.8) inset;
	box-shadow: 0px 1px 0px 0px rgba(202,227,252,.8) inset;

	background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
	background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf3fc', endColorstr='#dce9f9');
	background-image: linear-gradient(top, #ebf3fc, #dce9f9);

	background-color: #ebf3fc;
	border: 1px solid #ddd8ee;
	color: #333333;
	font-weight: bold;
	text-shadow: 0px 1px 0px 0px rgba(40,122,206,.5);
	outline: none;
}

button:hover {
	background-image: -moz-linear-gradient(top, #eef8ff, #e8eeff);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eef8ff), to(#e8eeff));
	background-image: -webkit-linear-gradient(top, #eef8ff, #e8eeff);
	background-image: -ms-linear-gradient(top, #eef8ff, #e8eeff);
	background-image: -o-linear-gradient(top, #eef8ff, #e8eeff);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eef8ff', endColorstr='#e8eeff');
	background-image: linear-gradient(top, #eef8ff, #e8eeff);

	background-color: #eef8ff;
	border: 1px solid #dd2222;
	color: #dd2222;
	font-weight: bold;
}

button:active {
	position: relative;
	top: 1px;
}
/* GRADIENT BUTTON - END */

/* TRANSITIONS - BEGIN */
* html input, * html button, * html textarea, * html select, input, button, textarea, select {
	-webkit-transition-property: border-color, background-color, color;
	-webkit-transition-duration: 0.5s;
	-o-transition-property: border-color, background-color, color;
	-o-transition-duration: 0.5s;
	-moz-transition-property: border-color, background-color, color;
	-moz-transition-duration: 0.5s;
	transition-property: border-color, background-color, color;
	transition-duration: 0.5s;
}
/* TRANSITIONS - END */

/* FORMS - END */

/* ROUNDED BOXES - BEGIN */
/* rmbox => rounded message box */
div.rmbox { border-radius: 6px; border-style: solid; border-width: 2px; margin: 5px; padding: 5px; }
div.rmbox p { /*font-size: 12px;*/ line-height: 125%; margin: 0.5em 0; padding: 2px; }
div.rmbox p.rmb-center { font-weight: bold; text-align: center !important; vertical-align: middle; }

div.rmb-blue { background-color: #e8eeff; border-color: #0000cc; }
div.rmb-blue:hover { background-color: #dde8f8; border-color: #0000c8; }
div.rmb-gray { background-color: #eeeeee; border-color: #999999; }
div.rmb-gray:hover { background-color: #e8e8e8; border-color: #909090; }
div.rmb-green { background-color: #e8ffee; border-color: #00cc00; }
div.rmb-green:hover { background-color: #ddf8e8; border-color: #00c800; }
div.rmb-orange { background-color: #ffaa55; border-color: #ff5500; }
div.rmb-orange:hover { background-color: #f8a850; border-color: #f85000; }
div.rmb-red { background-color: #ffeee8; border-color: #cc0000; }
div.rmb-red:hover { background-color: #f8e8dd; border-color: #c80000; }
div.rmb-yellow { background-color: #ffffdd; border-color: #ffdd22; }
div.rmb-yellow:hover { background-color: #f8f8d8; border-color: #f8d818; }
/* ROUNDED BOXES - END */

/* SPECIFIC - BEGIN */
button.tight { margin: 1px; }

.align-l { text-align: left; }
.align-c { text-align: center; margin: 0 auto; }
.align-r { text-align: right; }

.w120px { width: 120px; }
.w180px { width: 180px; }
.w240px { width: 240px; }
/* SPECIFIC - END */

/* TABLES - BEGIN */
table.gt { width: 100%; border: solid 1px #4488cc; border-radius: 6px; }

table.gt th {
	background-color: #dce9f9;
	background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
	background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: linear-gradient(top, #ebf3fc, #dce9f9);
	/*
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	*/
	border-top: none;
	padding: 5px;
}

/* Header */
table.gt th:first-child, table.gt thead:first-child tr:first-child th:first-child, table.gt tbody:first-child tr:first-child td:first-child { border-radius: 6px 0 0 0; }
table.gt th:last-child, table.gt thead:first-child tr:first-child th:last-child, table.gt tbody:first-child tr:first-child td:last-child { border-radius: 0 6px 0 0; }
table.gt tr:first-child th:only-child { border-radius: 6px 6px 0 0; }

/* Footer */
table.gt tr:last-child td:last-child, table.gt tbody:last-child tr:last-child td:last-child { border-radius: 0 0 6px 0; }
table.gt tr:last-child td:first-child, table.gt tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 6px; }
table.gt tr:last-child ts:only-child { border-radius: 0 0 6px 6px; }

table.gt tr:nth-child(even) { background-color: #f2f4f8; }
table.gt tr:nth-child(odd) { background-color: #fafcff; }
table.gt tr:hover { background-color: #ffffaa; }
table.gt tr:active { background-color: #ffdd99; }
/*
table.gt tr:hover { background-color: #ffffaa; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
table.gt tr:active { background-color: #ffdd99; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
*/
table.gt tr td { padding: 5px !important; }
/* TABLES - END */

/* SUN MAP - BEGIN */
.fs62 { font-size: 62.5%; }

#welcome { margin: 0; }

#header { height: 160px; width: 100%; position: absolute; }
#header h1 { float: left; height: 40px; margin: 10px; display: none; }
/*
#header h1 { font: bold 3.2em Georgia, serif; float: left; height: 60px; margin: 9px 0 0 10px; display: inline; }
#header h1 a { text-decoration: none; color: black; padding-top: 47px; height: 0; width: 143px; overflow: hidden; display: block; background: url("./images/logo.png") no-repeat; }
*/

#footer { position: absolute; top: 1400px; right: auto; bottom: 0px; left: 0px; height: 25px; line-height: 25px; padding-left: 20px; font-size: 1.1em; color: #777777; }
#footer a, .ui-widget-content a, a { color: #0088cc; }

.ui-widget-content { background: #ffffff; }
.ui-widget-header { color: #000000; }
.ui-dialog-content p { font-size: 1.2em; margin: 1em 0; }

.time-span, #welcome .sunrise, #welcome .sun, #welcome .sunset { padding: 0px 4px 0px; border-radius: 5px; }
.date-scale { background-color: #ff5500; }
.dark { background-color: #aabbdd; }
.sun { background-color: #ffeeaa; }
.twilight-astro { background-color: #aaccf8; }
.twilight-nau { background-color: #bbddff; }
.twilight { background-color: #cceeff; }
.sunrise { background-color: #ffccdd; }
.sunset { background-color: #ffcc88; }
.golden { background-color: #ffe844; }
.transit { background-color: #fff8bb; }
.moon { background-color: #fff899; }
.elevation { background-color: #ffdddd; }

#lat, #lng { width: 80px; }
#elv, #zoom { width: 40px; }

.less-details { display: inline; }
.more-details { display: none; }
#more-details { margin: 0; }
#less-details { display: none; }

#settings { font-size: 1.4em; float: right; margin: 5px; }
#date-container, #location-container { display: block; /*clear: both;*/ }

#location { width: 270px; }
#location-container { margin-right: 7px; }
/*#location-container button { display: none; }*/
#location-container.extended { background: #ffffff; z-index: 2000; position: relative; text-align: center; white-space: normal; padding: 0 10px 0; margin-top: -1px; }
#location-container.extended button button { display: inline; }

#date { width: 140px; }

#date-container { margin-right: 7px; }

#legend { position: absolute; top: 860px; right: auto; bottom: 25; left: auto; height: auto; }
/*#legend { display: inline; top: 860px; }*/
#legend-month { top: 640px; left: 10px; }

#date-slider-container { position: absolute; top: 100px; width: 100%; }
#date-slider-2 { margin: 0px 15px 0; background: #66aadd; }
#date-slider-2 .ui-slider-handle { width: 16px; height: 16px; margin-left: -10px; margin-top: -2px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 10px; background: #dd2222; border-color: #ffcc99; z-index: 1; }
#date-slider-2 .ui-slider-handle:hover, #date-slider-2 .ui-slider-handle:focus { background: #ff5500; border-color: #ffffff; }
#date-scale-container { margin: 0 15px 0 15px; font-size: 0.9em; }
#date-scale { width: 100%; border-collapse: collapse; }
#date-scale td { width: 8.3333333%; padding-left: 5px; height: 20px; border-left: 1px solid #cccccc; }
#date-scale td span { color: #999999; }

#time-slider-container { position: absolute; top: 135px; width: 100%; }
#time-slider-2 { margin: 0px 15px 0; background: #8899bb; }
#time-slider-2 .ui-slider-handle { width: 16px; height: 16px; margin-left: -10px; margin-top: -2px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 10px; background: #ffaa55; border-color: #ffcc99; z-index: 1; }
#time-slider-2 .ui-slider-handle:hover, #time-slider-2 .ui-slider-handle:focus { background: #ffcc33; border-color: #ffffff; }
#time-scale-container { margin: 0 15px 0 15px; font-size: 0.9em; }
#time-scale { width: 100%; border-collapse: collapse; }
#time-scale td { width: 4.1666666666%; padding-left: 5px; height: 20px; border-left: 1px solid #cccccc; }
#time-scale td span { color: #999999; }
#time-scale-sunlight-gh, #time-scale-sunlight-gh-2, #time-scale-sunlight, #time-scale-sunlight-2, #time-scale-twilight, #time-scale-twilight-2, #time-scale-twilight-n, #time-scale-twilight-n-2, #time-scale-twilight-a, #time-scale-twilight-a-2 { height: 100%; position: absolute; }
#time-scale-sunlight-gh, #time-scale-sunlight-gh-2 { background-color: #ffe844; }
#time-scale-sunlight, #time-scale-sunlight-2 { background-color: #ffeeaa; }
#time-scale-twilight, #time-scale-twilight-2 { background-color: #cceeff; }
#time-scale-twilight-n, #time-scale-twilight-n-2 { background-color: #bbddff; }
#time-scale-twilight-a, #time-scale-twilight-a-2 { background-color: #aaccf8; }

#timezone-slider-container { position: absolute; top: 170px; width: 100%; }
#timezone-slider-2 { margin: 0px 15px 0; background: #fff8bb; }
#timezone-slider-2 .ui-slider-handle { width: 16px; height: 16px; margin-left: -10px; margin-top: -2px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 10px; background: #88aabb; border-color: #ffcc99; z-index: 1; }
#timezone-slider-2 .ui-slider-handle:hover, #timezone-slider-2 .ui-slider-handle:focus { background: #dd2222; border-color: #ffffff; }
#timezone-scale-container { margin: 0 15px 0 15px; font-size: 0.9em; }
#timezone-scale { width: 100%; border-collapse: collapse; }
#timezone-scale td { width: 4%; padding-left: 5px; height: 20px; border-left: 1px solid #cccccc; }
#timezone-scale td span { color: #999999; }

#map { position: absolute; top: 210px; left: 0px; right: 0px; height: 640px; overflow: hidden; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }

.map-content { position: absolute; z-index: 1000; padding: 8px; line-height: 1.6; font-size: 1.2em; background-color: #f4f8ff; border-radius: 6px; border-color: #4488cc; border-style: solid; border-width: 2px; }
.map-content:hover { background-color: #fff4f8; border-color: #dd2222; }
/* SUN MAP - END */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
}

/* Minimum width of 1280 pixels. */
@media screen and (min-width: 1280px) {
	#header h1 { display: inline; }
	#date-container, #location-container { float: left; display: inline; }
	#date-slider-container { position: absolute; top: 50px; width: 100%; }
	#time-slider-container { position: absolute; top: 85px; width: 100%; }
	#timezone-slider-container { position: absolute; top: 120px; width: 100%; }
	#map { position: absolute; top: 160px; bottom: 22px; left: 0px; right: 0px; height: auto; }
	#legend { display: inline; top: 210px; right: 10px; bottom: auto; left: auto; }
	#footer { position: absolute; top: auto; right: auto; bottom: 0px; left: 0px; }
}