/**/
/*
/* IMPORTANT: Do not make .panel-content the first style, since there's a js that adds modified rule for this style to the beginning this list
/*
/**/
body {
	margin: 0px;
	-webkit-text-size-adjust: none; /* Prevents Safari on the iPHone from attempting to adjust text size. */
	}
.panel {
	position: absolute;
	width: 100%;
	overflow-x: hidden;
	top: 0px;
	}
/*
/*
/* PANEL-HEADERS
/* PANEL-HEADERS
/* PANEL-HEADERS
/*
/**/
.panel-header {
	height: 45px;
	width: 100%;
	background: url(http://www.starrynight.com/widget/iphone/img/toolbar.png) repeat-x;
	position: absolute;
	}
.panel-header h1 {
	overflow: hidden;
	height: 45px;
	margin: 0px;
	padding-top: 10px;
	font-family: Helvetica;
	font-size: 20px;
	font-weight: bold;
	text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #FFFFFF;
	}
/*
/*
/* BUTTONS IN HEADERS
/* BUTTONS IN HEADERS
/* BUTTONS IN HEADERS
/*
/**/
.blue-button-1 {				/* These styles create buttons that can expand horizontally to fit the enclosed text.										*/
	height: 29px;				/* I chose this cruder method over using -webkit-border-image so as to have better control over the iPhone highlight.		*/
	position: absolute;			/* In this way, the highlight will stay within the boundary of round-cornered buttons. The back button is more problematic	*/
	top: 7px;					/* but it looks a little better than the default.																			*/
	right: 6px;
	background: url(http://www.starrynight.com/widget/iphone/img/blueButton-right.png) right no-repeat;
	}
.blue-button-2 {
	position: absolute;
	height: 29px;
	top: 0px;
	right 0px;
	width: 10px;
	background: url(http://www.starrynight.com/widget/iphone/img/blueButton-left.png) left no-repeat;
	}
.back-button-1 {
	height: 29px;
	position: absolute;
	top: 7px;
	left: 6px;
	background: url(http://www.starrynight.com/widget/iphone/img/backButton-right.png) right no-repeat;
	}
.back-button-2 {
	position: absolute;
	height: 29px;
	top: 0px;
	right 0px;
	width: 14px;
	background: url(http://www.starrynight.com/widget/iphone/img/backButton-left.png) left no-repeat;
	}
.button-text {	/* This style is given to the link within the button, because that's what controls the iPhone highlight. */
	display: block;
	max-width: 55px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 6px 9px 7px 9px;
	width: auto;
	line-height: 12px;
	font-family: Helvetica;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
	text-decoration: none;
	margin: 2px;
	-webkit-border-radius: 4px;
	}
.back-button-1 a.button-text { /* This optimizes the highlight for the back button, but it can't be perfect. */
	/* padding-left: 4px; */
	/* margin-left: 12px;    Option 1 keeps the highlight within the left corners, but does not highlight the arrow tip */
	padding-left: 14px;
	margin-left: 2px;	/*   Option 2 extends the highlight to the tip but spills beyond the corners. */
	}
				
/*
/*
/* PANEL-CONTENT
/* PANEL-CONTENT
/* PANEL-CONTENT
/*
/**/
.panel-content {
	width: 100%;
	margin-top: 43px; /* Should be 45px, but that's creating an extra 2px gap. */
	padding-top: 6px;
	padding-bottom: 15px; /* The background needs to be 15px longer because 45+15 is how much it's being scrolled up. */
	background: url(http://www.starrynight.com/widget/iphone/img/pinstripes.png); /* This takes the background, otherwise there will be background behind the header. */
	/*
	/* min-height: 100%;	/* Not enough to push the address bar out of the way */
	/* bottom: 0;			/* Does not allow for the necessary expansion. */
	/* height: 100%;		/* This either */
	/*
	/* min-height: 480px; 	/* This works, but is now set by a Javascript onload and onorientationchange. */ 
	/*						/* so that it is exactly what you need to *just* push the address bar out of the way */
	}

h2 {
	margin: 0 0 8px 14px;
	font-size: 17px;
	font-family: Helvetica;
	font-weight:bold;
	color: #4d4d70;
	text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
	}
	
.search {			/* Creates something that looks like a standard Safari search, but the icon isn't active */
	height: 31px;
	width: 100%;
	-webkit-border-radius: 15px;
	-webkit-border-image: url(http://www.starrynight.com/widget/iphone/img/search.png) 4 15 2 24;
	border-width: 4px 15px 2px 24px;
	padding-left: 5px;
	padding-top: 3px;
	color: gray;
	font-size: 15px;
	font-family: Helvetica;
	margin-bottom: 8px
	}
	
.rounded {	   
	padding: 0px;
	margin-right: 10px;
	margin-left: 10px;		/* Just set the margins and the width will take care of itself. */
	margin-top: 8px;
	margin-bottom: 17px;		  /* Set each list 17 pixels from the top of the button bar (or the top of the next list) */
	font-size: 17px;
	font-family: Helvetica;
	font-weight: bold; 
	color: black;
	line-height: 17px;
	background-color: white;		/* Each list has a white background fill */
	border-width: 1px;				/* Draw a rectangle around the entire list */
	border-style: solid ;
	border-color: rgb(217,217,217);
	-webkit-border-radius: 8px;		/* ...with rounded corners */
	}
	
.rounded li {
	list-style-type: none;	
	border-top-width: 1px;	/* Create lines between cells. Each line is placed above each item */
	border-top-style: solid;
	border-top-color: rgb(217,217,217);
	/* The height and width of the cell is determined by is contents. I did this to force the size of the iPhone highlight. */
	}
	
.rounded li:first-child {
	border-top: 0px;    /* Remove border above the first item of the list */
	}

.rounded-all, .rounded-top, .rounded-middle, .rounded-bottom {
	display: block;   /* Sets the href to be a block rather than inline */
	padding: 11px 10px 10px 10px;
	margin: 1px; /* This margin shinks the iPhone highlight so that it does not extend beyond the boundaries of the link. */
	height: 20px;
	text-decoration: none;
	color: black;
	-webkit-tap-highlight-color: rgba(0,0,256,1.0);
	}

a.rounded-all {
	-webkit-border-top-left-radius: 6px; /* Setting these corners properly shrinks the iPhone highlight. */
	-webkit-border-top-right-radius: 6px;	
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	}

a.rounded-top {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;				
	}

a.rounded-bottom {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;				
	}

.show-arrow {
	/*	Add an arrow button to a link */
	background-image: url(http://www.starrynight.com/widget/iphone/img/chevron.png); 
	background-repeat: no-repeat;
	background-position: right; 
	}

/*
/*
/* TOGGLE SWITCHES
/* TOGGLE SWITCHES
/* TOGGLE SWITCHES
/*
/**/
.toggleSwitch {
	float: right;
	position: relative;
	margin-left: 15px;
	margin-top: -4px;
	margin-right: -3px;
	width: 94px;
	height: 27px;
	-webkit-border-radius: 4px;
	background-image: url(http://www.starrynight.com/widget/iphone/img/on-and-off.png);
	background-position: 0px;
	}
.toggleHighlight {
	position: absolute;
	background: none;
	width: 90px;
	height: 23px;
	margin: 2px;
	-webkit-border-radius: 4px;
	}
.toggleHighlight span {
	display: none;
	}
	
/*
/*
/* DATE STYLES
/*
/**/
.dateTimeDimmer {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	background: rgba(255, 255, 255, 0.75);
}

.secret-pop-up {
	-khtml-appearance: none;
	-webkit-border-radius: 0px;		/* Remove the rounded corners */
	border: none;
	background: none;
	position: absolute;
	height: 41px;		/* 2px short at top and bottom to shrink highlight. */
	top: 0px;			/* To compensate for the shrunk height */
	margin-right: 2px;	/* Also needed to shrink highlight */
	font-size: 17px;
	font-family: Helvetica;
	font-weight: normal; 
	color: black;
	padding-left: 8px;	/* Safari on the iPhone puts padding on the left of this control that can not be overridden.     */
	}					/* So this padding value, forces Safari on the desktop to simulate the appearance on the iPhone. */
#monthPopup {
	right: -2px;
	left: -2px;
	width: auto; /* makes the pop-up span the block */
	border-left: 117px solid transparent; /* Moves the month into place by "padding" the pop-up on the left by a value that depends on the month and the orientation of the interface and which is determined by a function (padding doesn't work on iPhone Safari). Color is transparent, otherwise it obscures the label. */
	background: url(http://www.starrynight.com/widget/iphone/img/date.png) no-repeat 6px right;
	-webkit-border-top-right-radius: 6px;				
	-webkit-border-top-left-radius: 6px;				
	/*background: pink;*/
	}
#dayPopup {
	right: 92px;
	width: 27px;
	}
#yearPopup {
	right: 45px;
	width: 46px;
	}
#hoursPopup {
	right: -2px;
	left: -2px;
	width: auto; /* makes the pop-up span the block */
	border-left: 164px solid transparent; /* Moves the month into place by "padding" the pop-up on the left by a value that depends on the month and the orientation of the interface and which is determined by a function (padding doesn't work on iPhone Safari). Color is transparent, otherwise it obscures the label. */
	background: url(http://www.starrynight.com/widget/iphone/img/time.png) no-repeat 6px right;
	-webkit-border-bottom-right-radius: 6px;				
	-webkit-border-bottom-left-radius: 6px;				
	/*background: pink;*/
	}
#minutesPopup {
	right: 80px;
	width: 27px;
	}
#ampmPopup {
	right: 45px;
	width: 35px;
	}
.secret-pop-up-text { /* Takes the same basic specs as the label text. */
	font-size: 17px;
	line-height: 17px;
	padding: 11px 0 10px 0;
	font-family: Helvetica;
	font-weight: normal; 
	color: black;
	position: absolute;
	height: 20px;
	top: 0px;
	}

.contact-label {
	display: inline-block;
	color: #808080; /* Same colour as chevron */
	font-size: 12px;
	font-family: Helvetica;
	text-align: right;
	width: 66px;
	padding-right: 12px;
	}
.contact-info {
	font-size: 14px;
	font-family: Helvetica;
	width: 158px;
	}
			
#locationContent {
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 8px
}

.descriptiveText {
	font-size: 15px;
	line-height: 17px;
	font-family: Helvetica;
	text-align: center;
	color: #4d4d70;
	text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
}

#appIconDiv {
	position: absolute;
	top: 57px;
	left: 10px;
	height: 70px;
	width: 66px;
	background-image: url(http://www.starrynight.com/widget/iphone/img/sn-icon.png);
} 

#paddingDiv {
	height: 62px;
	width: 62px;
	margin: 14px 20px 3px 10px;
	float: left;
	-webkit-border-radius: 4px;
}
 
#appNameDiv {
	font-size: 17px;
	font-family: Helvetica;
	font-weight:bold;
	margin-top: 20px;
} 

#companyInfoDiv {
	font-size: 13px;
	line-height: 17px;
	font-family: Helvetica;
	font-weight:normal;
	margin-top: 2px;
	color: #4d4d70;
}

/* Controls*/
#snwebview {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px 0px 0px 0px;
}

#controlsDiv {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

.controlsRow {
	position: absolute;
	height: 44px;
	width: 100%;
	left: 0px;
}

.snButton {
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	height: 44px;
	width: 44px;
	cursor: pointer;
}

#userInterface {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	}

#topRow { top: 0px; }

.action {	/* This hidden text in the button divs shows up when button is held. */
	display: none;
	}

#homeViewButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/home.png);
	background-position: 8px 7px;
	background-repeat: no-repeat;
	position: absolute;
	height: 36px;
	width: 40px;
	left: 0px;
	top: 0px;
	cursor: pointer;
}

#zoomInButton { 
	background-image: url(http://www.starrynight.com/widget/iphone/img/zoom-in.png);
	/* background-color: pink; */
	background-position: 6px 17px;
	background-repeat: no-repeat;
	position: absolute;
	height: 44px;
	width: 33px;
	right: 0px;
	bottom: 0px;
	cursor: pointer;
}

#zoomOutButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/zoom-out.png);
	/*background-color: pink;*/
	background-position: 6px 17px;
	background-repeat: no-repeat;
	position: absolute;
	height: 44px;
	width: 33px;
	right: 33px;
	bottom: 0px;
	cursor: pointer;
}

#gazeUpButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/arrow-up.png);
	/*background-color: yellow;*/
	background-position: center 7px;
	background-repeat: no-repeat;
	position: absolute;
	height: 44px;
	left: 44px;
	right: 44px;
	top: 0px;
	cursor: pointer;
}

#gazeLeftButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/arrow-left.png);
	/*background-color: yellow;*/
	background-position: 6px center;
	background-repeat: no-repeat;
	position: absolute;
	width: 44px;
	top: 44px;
	bottom: 44px;
	left: 0px;
	cursor: pointer;
}

#gazeRightButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/arrow-right.png);
	/*background-color: yellow;*/
	background-position: 17px center;
	background-repeat: no-repeat;
	position: absolute;
	width: 44px;
	top: 44px;
	bottom: 44px;
	right: 0px;
	cursor: pointer;
}

#bottomRow { bottom: 0px; }

#toggleButton { left: 0px; }

#gazeDownButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/arrow-down.png);
	/*background-color: yellow;*/
	background-position: center 20px;
	background-repeat: no-repeat;
	position: absolute;
	height: 44px;
	left: 44px;
	right: 44px;
	bottom: 0px;
	cursor: pointer;
	}
	
#settingsButton {
	background-image: url(http://www.starrynight.com/widget/iphone/img/info.png);
	background-position: 14px 9px;
	background-repeat: no-repeat;
	position: absolute;
	height: 36px;
	width: 40px;
	right: 0px;
	top: 0px;
	cursor: pointer;
	}

/* Status Panel */
.statusPanel{
	position: absolute;
	left: 0px;
	font-family: Helvetica;
	font-size: 12px;
	line-height: auto;
	font-weight: bold;
	color: white;
	background: url(http://www.starrynight.com/widget/iphone/img/status-bar.png);
	text-overflow: ellipsis;
}

.statusTextFrame {   /* This frame makes room for the buttons */
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	left: 40px;
	}

.statusText {
	overflow: hidden;
	text-align: left;
}

#currentLocation {
	position: absolute;
}

#currentDateTime {	position: absolute; }