body {
	background:			#48565d url("../images/background.png") repeat-x;
	color:				#ddd;
	text-shadow:		#000 0 1px 0;
}
#page {
	position:			relative;
	width:				520px;
	margin:				0 auto;
	padding:			60px 60px 30px 60px;
}
#header {
	position:			relative;
	height:				114px;
	margin:				0 0 20px -6px;
}

a {
	color:				#90d8e3;
}

h1 {
	margin:				0;
}
h1 a, h1 b {
	background:			url("../images/junecloud-sync.png") no-repeat;
	display:			block;
	position:			absolute;
	top:				19px;
	left:				255px;
	width:				278px;
	height:				41px;
	margin:				0;
	text-indent:		-9999px;
	overflow:			hidden;
	z-index:			1;
}
h2 {
	clear:				left;
}
h1, h2, h3, h4, p.help, .services li b {
	color:				#fff;
}
h1, h2, h3 {
	text-shadow:		#000 0 1px 3px;
}
#view h4 {
	overflow:			hidden;
	text-overflow:		ellipsis;
}
img.icon {
	position:			absolute;
	top:				3px;
	left:				0;
}
.clear {
	clear:				left;
}

/* nav \*/

#nav {
	position:			absolute;
	top:				0;
	left:				0;
	width:				534px;
	height:				114px;
	text-align:			left;
	z-index:			1;
	overflow:			hidden;
}
#nav ul {
	position:			relative;
	margin:				0;
	padding:			0;
	list-style-type:	none;
}
#nav li {
	display:			block;
	width:				1px;
	height:				1px;
	margin:				0;
	padding:			0;
	line-height:		100%;
}
#nav a, #nav span {
	display:			block;
	position:			absolute;
	background-repeat: 	no-repeat;
	background-position:0 0;
	top:				64px;
	height:				37px;
	margin:				0;
	padding:			0;
	text-indent:		-9999px;
	overflow:			hidden;
}

#nav a.deliveries {
	background-image:	url("../images/deliveries-icon.png");
	top:				0;
	left:				0;
	width:				114px;
	height:				114px;
	opacity:			0.7;
}
#nav a.notefile {
	background-image:	url("../images/notefile-icon.png");
	top:				0;
	left:				125px;
	width:				114px;
	height:				114px;
	opacity:			0.7;
}
#nav a.settings {
	background-image:	url("../images/nav-settings.png");
	left:				261px;
	width:				94px;
}
#nav a.help {
	background-image:	url("../images/nav-help.png");
	left:				366px;
	width:				94px;
}
#nav a.log-out {
	background-image:	url("../images/nav-log-out.png");
	left:				467px;
	width:				66px;
}

#nav a:hover {
	text-decoration:	none;
	background-position:0 -37px;
}
#nav a:active, #page.settings #nav a.settings, #page.sync-help #nav a.help, #page.sync-contact #nav a.help {
	text-decoration:	none;
	background-position:0 -74px;
}
#nav a.deliveries:hover, #nav a.notefile:hover,
#nav a.deliveries:active, #nav a.notefile:active, #page.deliveries #nav a.deliveries, #page.notefile #nav a.notefile {
	background-position:0 0;
	opacity:			1.0;
}

/* other \*/

#bookmarklet a, #result a, input.button {
	font-weight:		bold;
	color:				#346a73;
	text-shadow:		#d8faff 0 1px;
	padding:			9px 13px 8px 13px;
	border:				none;
	border-radius:		8px;
	-webkit-appearance: none;
	background-color:	#7fc7d2;
	background:			-webkit-gradient(linear, left top, left bottom, from(#d8faff), to(#66aeb9), color-stop(0.05,#9ee6f1), color-stop(0.95,#5da5b0));
	background:			-moz-linear-gradient(#d8faff,#9ee6f1 5%,#5da5b0 95%,#66aeb9);
	-webkit-box-shadow:	rgba(0,0,0,0.4) 0 1px 1px;
	box-shadow:			rgba(0,0,0,0.4) 0 1px 1px;
	min-width:			94px;
}
#bookmarklet a:active, #result a:active, div.button a:active {
	background-color:	#333;
}
input.button {
	margin-top:			15px;
	clear:				left;
	float:				left;
}
a.small-button {
	display:			inline-block;
	font-weight:		bold;
	color:				#346a73;
	text-shadow:		#d8faff 0 1px;
	margin:				5px 5px 0 0;
	padding:			2px 10px;
	border:				none;
	border-radius:		5px;
	-webkit-appearance: none;
	background-color:	#7fc7d2;
	background:			-webkit-gradient(linear, left top, left bottom, from(#d8faff), to(#66aeb9), color-stop(0.05,#9ee6f1), color-stop(0.95,#5da5b0));
	background:			-moz-linear-gradient(#d8faff,#9ee6f1 5%,#5da5b0 95%,#66aeb9);
	-webkit-box-shadow:	rgba(0,0,0,0.4) 0 1px 1px;
	box-shadow:			rgba(0,0,0,0.4) 0 1px 1px;
}
#tip, #ietip {
	color:				#777;
}

#help, div.section {
	margin-top:			20px;
	background:			url("../images/line.png") repeat-x;
	padding-top:		22px;
	clear:				both;
}
div#message, div#emailmessage, #javascript {
	color:				#f5e197;
}

div.video video {
	border:				1px solid #000;
}
div.video-right {
	float:				right;
	margin:				10px 0 20px 20px;
}

input.field, #addemail input.field, input#name, input#email, input#subject, textarea#message, textarea#text {
	padding:			6px 7px;
	border:				none;
	border-radius:		4px;
	-webkit-box-shadow:	inset rgba(0,0,0,0.4) 0 1px 2px;
	box-shadow:			inset rgba(0,0,0,0.4) 0 1px 2px;
}
select {
	text-shadow:		#c2c8cc 0 1px 0;
	padding:			6px 20px 6px 8px;
	border:				none;
	border-radius:		4px;
	-webkit-appearance: none;
	background-color:	#afb5b8;
	background:			url("../images/select-arrows.png") no-repeat top right, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#99a1a6), color-stop(0.05,#cfd3d6), color-stop(0.95,#8c9397));
	background:			-moz-linear-gradient(#fff,#cfd3d6 5%,#8c9397 95%,#99a1a6);
	-webkit-background-size: auto 100%, auto;
	-webkit-box-shadow:	rgba(0,0,0,0.4) 0 1px 1px;
	box-shadow:			rgba(0,0,0,0.4) 0 1px 1px;
}
select option {
	background-color:	#afb5b8;
	width:				239px;
}

div.checkbox input, div.option input {
	margin:				1px 6px 5px 0;
	float:				left;
}
div.checkbox label, div.option label {
	display:			block;
	margin:				0 0 2px 0;
	float:				left;
}

#view {
	width:				235px;
	margin-right:		20px;
	float:				left;
	clear:				none;
}
#add {
	width:				265px;
	float:				right;
	clear:				none;
}
#settings {
	width:				235px;
	float:				left;
	clear:				none;
}
#addemail {
	width:				235px;
	float:				right;
	clear:				none;
}
#add .button {
	margin-bottom:		20px;
}
#add #cancel-update {
	padding:			26px 0 0 10px;
	float:				left;
}

#new {
	color:				#000;
	text-shadow:		#fff7d9 0 1px;
	background-color:	#f5e197;
	padding:			12px 16px;
	margin:				0 0 15px 0;
	clear:				left;
	border-radius:		10px;
	-webkit-border-radius:10px;
	-moz-border-radius:	10px;
}
#new a {
	color:				#5c9970;
}

div.delivery.old, div.note.old {
	opacity:			0.6;
	-moz-opacity:		0.6;
	filter:				alpha(opacity=60);
}

span.info-button, span.plus-button, span.item-button, span.gear-button {
	display:			inline-block;
	width:				13px;
	height:				13px;
	margin:				0 2px 0 1px;
	text-indent:		-9999px;
	overflow:			hidden;
	z-index:			1;
}
span.info-button {
	background:			url("/images/software/buttons/info-white.png") no-repeat;
}
span.plus-button {
	background:			url("/images/software/buttons/plus-white.png") no-repeat;
}
span.item-button {
	background:			url("/images/software/buttons/item-white.png") no-repeat;
}
span.gear-button {
	background:			url("/images/software/buttons/gear-white.png") no-repeat;
}

#delivery-status-tips {
	background:			url("/images/software/delivery-status-touch/tips.jpg") no-repeat;
	width:				480px;
	height:				480px;
	border:				2px solid #000;
	margin:				0 0 15px 0;
}

div.address b {
	color:				#fff;
}

/* tables */

table {
	padding:			0;
	border:				none;
}
tr {
	background-color:	rgba(0,0,0,0.1);
}
td {
	padding:			8px 12px;
}
td:first-child, td:first-child {
	border-top-left-radius:		5px;
	border-bottom-left-radius:	5px;
}
td:last-child {
	border-top-right-radius:	5px;
	border-bottom-right-radius:	5px;
}
table.keyboard-shortcuts td.keys {
	font-weight:		bold;
	padding-right:		0;
}

/* help pages */

#filter {
	margin:				0 0 10px 0;
}
#filter input {
	font-size:			0.85em;
	width:				50%;
	margin:				0;
}