/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	margin:20px 0 20px 40px;
	line-height:1.5em;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {box-sizing:border-box;}

/* Page */
html{
	background:#eee;
	padding:30px 0.5%;
	font-family:Arial, sans-serif;
	z-index:1;
}
h1,h2,h3, h4 {
	padding:6px 20px;
	border-radius:4px;
	background:#666;
	color:#fff;
	text-align:center;
	margin-bottom:20px;
	line-height:1.4em;
}
h1 {font-size:2.8em;font-weight:bold;margin-bottom:0;}
h2 {font-size:1.5em;font-weight:bold;}
h3, h4 {font-size:1em;font-weight:bold;background:#888;padding:5px 20px;}
h4 {background:#ccc;}
p {margin:10px 5px;}

.framed {
	border-radius:4px;
	box-shadow:0 0 3px 0 #666;
	background:#fff;
	padding:15px 25px;
}
.w1-1, .w1-2, .w1-3, .w1-4, .w1-3, .w2-3 {
	margin:15px 1.5%;
	float:left;
}
.w1-1 {width:97%;}
.w1-2 {width:47%;}
.w1-3 {width:30%;}
.w1-4 {width:22%;}
.w1-3 {width:32%;}
.w2-3 {width:62%;}

.big-input {
	background:#feffec;
	border:2px solid #08b;
	border-radius:4px;
	display:inline-block;
	padding:10px;
}
input[type=button].big-input{
	background:#444;
	border:2px solid #333;
	color:#eee;
}
input[type=button].big-input:hover,
input[type=button].big-input:active {
	background:#08b;
	cursor:pointer;
	border:2px solid #08b;
}


/* POLICIES */
.policies {margin-bottom:20px;font-size:0.8em;}
#holidays {margin:20px 0;}
#holidays td {padding: 5px 20px;border-bottom:1px dashed #666;}
#holidays td:first-child{font-weight:bold;}

/* TIMESHEET */

#dates{
	margin:20px 0 40px;
}

#dates td, #submission td {
	padding:5px 15px 5px 0;
	color:#333;
}
#dates tr td:first-child, #submission tr td:first-child{
	font-weight:bold;
	text-align:right;
}
#dates strong {font-weight:bold;}

.weekly-header {text-align:left;}
.weekly-total {text-align:right;padding:10px 5px;font-size:2em;}

#submission {
	display:inline-block;
	padding:30px 0px;
	border-top:1px dashed #333;
	width:100%;
}

#name{width:250px;}
#notes{width:500px;}


#load-ts {
	padding:15px 25px;
	text-align:right;
}
#load-ts .big-input{
	width:130px;
	text-align:center;
}

/* Timesheet Table */
.week{margin:20px 0;}
.week tr {}
.week tr:hover {	
	background:#ddd;
	color:#333;
}
.week td{padding:4px;}
.week span {
	display:inline-block;
	width:70px;
	padding:6px;
	border-radius:4px;
	text-align:center;
	margin:3px;
	cursor:pointer;
}
.away {
	background:#666;
	color:#eee;
	width:45px !important;
}
.away.selected {
	background:#08b;
	color:#fff;
}
.time-in,.time-out {
	background:#eee;
	color:#333;
}
.week span:hover, .week span:active {
	background:#19c;
	color:#fff;
}
.negative {color:red !important;font-weight:bold;}

/* Timedial */

#timedial {
	position:absolute;
	left:50%;
	margin-left:-200px;
	z-index:100;
	padding:25px;
	box-shadow:0 0 10px 2px #444;
	border-radius:4px;
	background:#eee;
	color:#333;
	top:550px;
}

#timedial div span {
	display:inline-block;
	width:70px;
	padding:10px;
	border-radius:4px;
	text-align:center;
	background:#eee;
	color:#333;
	margin:3px;
	cursor:pointer;
}
#timedial div span.selected {
	font-weight:bold;
}

#hours .am {background:#ffa;}
#hours .pm {background:#08b;}
#minutes span {background:#eee;}

#timedial span:hover,#timedial span:active,#timedial span.selected {background:#333;color:#eee}

@media screen and (max-width:1000px){
	.policies{display:none;}
	.w1-1,.w1-2,.w1-3,.w1-4,.w1-3,.w2-3 {width:96%;margin:2%;}
}


@media print{
	* {
		color:#000 !important;
		background:#fff !important;
		font-size:14px !important;
		padding:2px !important;
	}
	html,body{padding:0;margin:0;}
	#timedial, #policies {display:none;}
	
	.w1-1,.w1-2,.w1-3,.w1-4,.w1-3,.w2-3 {width:100%;margin:0;}
	.framed {box-shadow:0 none; border-bottom:1px solid #000;margin:0;padding:10px;}
	
	h1,h2,h3 {text-align:left;padding:5px;margin:0;font-size:1em; line-height:1em; font-weight:bold;}
	h1,h2{font-size:1.5em !important;margin-top:15px !important;}
	.away.selected {border:1px solid #333 !important;}
	.away {width:auto !important;}
	
	.big-input{padding:0;margin:5px;}
	.week tbody td {border-bottom:1px dashed #555;}
	table{margin-bottom:15px;}
	
}