/*  IMPORTS  ============================================================================= */
@import url(http://fonts.googleapis.com/css?family=Gochi+Hand);
@import url("miofont.css");
@import url("tip-mio.css");
@import url("datePicker.css");
@import url("jquery.circliful.css");


/*  CSS RESET  ============================================================================= */
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* BASIC PAGE SETUP ============================================================================= */
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
	margin : 0 auto;
	padding : 0;
	font : 13px 'Lato', Arial, sans-serif;
	font-weight: 400;
}

button,
input,
select,
textarea {
	font-family : 'Lato', Arial, sans-serif;}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

/*  HEADINGS  ============================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family:  'Lato', Arial, sans-serif;
	font-weight : normal;
	font-weight: 300;
}

h1 {
	font-family: 'Gochi Hand', Arial, sans-serif;
	font-size : 2.75em; /* 36 / 16 */
	line-height : 1.4;
}


h2 {
	font-size : 2.25em; /* 29,25 / 13 */
	line-height : 1.2;
}
	#maincontentcontainer h2{
		margin-bottom: 30px;
	}

h3 {
font-size : 1.5em; /* 20 / 16 */
line-height : 1.3;
margin-bottom: 5px; }


h4 {
font-size : 1.25em; /* 24 / 16  */
line-height : 1.25; }

h5 {
font-size : 1em; /* 20 / 16 */ }

h6 {
font-size : 0.75em; /* 16 / 16  */ }

/*  TYPOGRAPHY  ============================================================================= */

p, ol, ul, dl, address {
margin-bottom : 1.25em;
font-size : 1em; /* 16 / 16 = 1 */ }

p {
hyphens : auto;  }

p.center {
text-align: center;
}

.text-right{
	text-align: right;
}

ul.list{
	font-weight: 300;
	margin-bottom: 30px;}

li{
	line-height: 2em;}

	li.separator{
		width: 75%;
	}
	li.separator hr{
		margin: 5px 0;
	}

li .label{
	width: 50%;
	display: inline-block;}

li .data{
	width: 25%;
	display: inline-block;
	}

dl,
dd {
	margin-bottom : 1.5em; }

dt {
	font-weight : normal; }

b, strong {
	font-weight : bold; }

hr {
	display : block;
	margin : 0 0 15px 0;
	padding : 0;
	height : 1px;
	border : 0;
	border-top : 1px solid #ebebeb;
}

small {
	font-size : 0.75em; /* 12 / 16  */ }

sub, sup {
	font-size : 75%;
	line-height : 0;
	position : relative;
	vertical-align : baseline; }

sup {
top : -.5em; }

sub {
bottom : -.25em; }


/* COLORS =============================================================================  */
.red{
	color: #d52b2b}

.grey{
	color: #666666;
}

/* LINKS =============================================================================  */
a {
	color : rgb(102,102,102);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	text-decoration: none;
}

a:visited {
	color : rgb(102,102,102); }

a:focus {
	outline : thin dotted;
	color : rgb(0,0,0); }

a:hover,
a:active {
	outline : 0;
	color :  #d52b2b;
}


/* TABLES ============================================================================= */

table {
	border-collapse : collapse;
	border-spacing: 0;
	margin-bottom : 15px;
	width : 100%;
	font-weight: 300; }

th, td, caption {
	padding : .25em 5px .25em 5px;
	vertical-align: bottom}

	.nowrap{
		white-space: nowrap;
	}

thead {
	height: 2em;
	color: #666666;
	border-bottom: 1px #ebebeb solid;}
thead tr{
	height: 28px;}
thead .table-buttons{
	display: none;
}
tbody{
	border-bottom: 1px #ebebeb solid;}

	tbody tr{
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	/* border-bottom: 1px #ebebeb solid; */
	}

	tbody tr.today{
		border: 1px #ebebeb solid;
	}

	tbody tr.holiday{
		background-color: #f8da78;
	}

	tbody tr.personal-holiday{
		background-color: #f9e194;
	}

	tbody tr.cancled{
		border-left: 1px #ee8176 solid;
		color: #999;
	}

	tbody tr.done{
		border-left: 1px #5dccb2 solid;
	}

	tbody.list tr:hover{
		background-color: #f2f2f2;
	}

	tbody td {
		height: 35px;
		vertical-align: middle
	}

	tbody tr.selected{
		background-color: #f2f2f2;
	}

	tbody.condensed td {
		height: 24px;
		vertical-align: middle
	}

	tbody.selectable tr{
		cursor: pointer;
	}

	tbody td.hours{
		cursor: pointer;
	}
	tbody td.hours:hover {
		background-color: #f2f2f2;
	}
	tbody td.hours-charged {
		background-color: #f2f2f2;
	}
	tbody td.today{
		background-color: #f2f2f2;
	}

	.my-drag{
		background-color: #f9e194;
	}

	.graph{
		background-color: #f2f2f2;
		float: left;
		margin: 1px 2px 1px 0;
		padding: 3px;
	}

tfoot {
font-style : italic; }

caption {
background-color : transparent; }

/* FORMS ============================================================================= */
form {
	width: 100%;
 	max-width: 300px;
	margin: 0 auto; }

	form p{
		margin-bottom: 15px; }

form.inline {
	max-width: none;
}

	form.inline p{
		display: inline-block;
		min-width: 200px;
		margin-right: 15px;
	}

	form.inline .button,
	form .button{
		min-width: 50%;
	}

fieldset {
	margin-bottom : 1.5em;
	padding : 0;
	border-width : 0; }

legend {
	margin-left : -7px;
	padding : 0;
	border-width : 0; }

label{
	font-weight : normal;
	cursor : pointer;
	display: block;
	margin: 0;
}

	label.inline{
	display:inline;
	margin:0;
	}

	label span{
	color:#666;
	font-size:0.9em;
	}

	label span.right{
		float: right;
		text-align: right;
	}

	label.disabled{
	color:#ccc;
	}


button,
search,
input,
select,
textarea {
	font-size : 100%;
	margin : 0;
	vertical-align : baseline;
	vertical-align : middle;
}

button, input {
	line-height : normal;
	overflow : visible;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	margin: 0;
	cursor : pointer;
	border: none;
	-webkit-appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing : border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input[type="search"] {
	box-sizing : content-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input[type="text"],
input[type="password"],
textarea {
	-webkit-appearance: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #b9b9b9;
	font-size: 1em;
	padding: 0.5em 0.3125em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 100%;
}

textarea{
	min-height: 200px;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding : 0;
	border : 0;  }

	input::-webkit-input-placeholder,
	input:-moz-placeholder,
	.placeholder{
		color:#bbb;
	}

	input::-moz-focus-inner {border:0;}

	input[disabled="disabled"], input.disabled{
	color:#999;
	background:#f5f5f5;
	}

	input[readonly="readonly"], input.readonly{
	color:#999;
	}

	input.date-pick{
		cursor: pointer;
	}
select{
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/*  BUTTONS  ============================================================================= */

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	color: #fff;
	padding: .5em 1em;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	background: #d52b2b;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-size : 1.0em;
	width: auto;
}
.button.grey {
	background: #888888;
}
.button:hover {
	background: #dd5555;
	color: #fff;
	text-decoration: none;
}
.button:active {
	background: #d52b2b;
	color: #fff;
}
.button:visited {
	color : #fff;
}
.button.small {
	padding: .25em 0.5em;
}

/*  MAIN LAYOUT	============================================================================= */

.center{
	text-align: center;}

#headcontainer{
	margin-top: 15px;
	margin-bottom: 25px;}

#maincontentcontainer {
		width: 100%;
	}

	.calendar-container{
		width: 50%;
		float: left;
	}
	.calendar-inner{
		padding: 10px;
	}

	.pull-left{
		float: left !important
	}
	.pull-right{
		float: right !important
	}

	.margin-right{
		margin-right: 1em;
	}

	.margin-right-half{
		margin-right: 0.5em;
	}

	.filter-form-container{
		background-color: #f2f2f2;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
		padding: 25px 10px 10px 10px;
		margin-bottom: 25px;
	}

	.section-container{
		border-bottom: 1px #ebebeb solid;
	}

	.section-head{
		margin-bottom: 10px;
		cursor: pointer;
	}
	.section-head.paid:hover{
		background-color: rgba(95,208,186,0.8);
	}
	.section-head.unpaid:hover{
		background-color: rgba(249,225,148,0.8);
	}

	.section-head h3{
		margin-bottom: 0;
	}
	.section-head h4{
		margin-bottom: 0;
		line-height : 25px;
	}
	.section-head .button-icon{
		margin-left: 5px;
		line-height : 25px;
		padding: 0 5px;
	}
	.section-head.paid .button-icon{
		color: white;
	}
	.section-head.unpaid .button-icon{
		color: black;
	}
	.section-head .button-icon:before{
		font-size: 16px;
		vertical-align: -2px;
	}
	.section-content{
		margin-bottom: 20px;
	}
	.paid{
		background-color: #5dccb2;
		color: white;
		padding: 5px;
	}
	.unpaid{
		background-color: #f9e194;
		padding: 5px;
	}

	.table-container{
		margin-top: 3px;
	}
	.hide{
		display: none;
	}
	.links-horizontal a{
		margin-right: 10px;
	}

	.charts-container{
		margin-bottom: 20px;
	}

	.charts-container.full{
		width: 100%;
	}
	.charts-container.four{
		max-width: 570px;
		margin-left: auto;
		margin-right: auto;
	}

	.charts-container-inner div{
		float: left;
	}

#footercontainer {
		width: 100%;
	}

		footer {
			clear: both;
			font-size: 0.8125em; /* 13 / 16 */
			margin: 0 auto;
			padding: 30px 0px 10px 0px;
			color: #999;
		}


/* NAVIGATION ============================================================================= */

nav{
	margin: 5px 0;}

nav ul{
	}

nav li{
	display: inline-block;
	float: left;
	margin-right: 2em;}

nav li:last-child{
	margin-right: 0;}

nav ul.sub-menu{
	display: none;
	position: absolute;
	z-index: 1;
	background-color: white;
	padding: 5px;
	margin: -5px 0 0 -5px;
}


nav ul.sub-menu li{
	float: none;}

nav li:hover .sub-menu{
	display: block;
}

nav li:hover{
}

nav li:hover a{
	color: #d52b2b;
}

nav li:hover .sub-menu a{
	color: rgb(102,102,102);
}

nav li:hover .sub-menu a:hover{
	color: #d52b2b;
}

/* TABS ============================================================================= */

.tabs-container{
	margin-bottom: 30px;
}

.tabs-container .align-right{
	position: relative;
	right: 0px;
}

.tabs-container ul.top-menu{
	border-bottom: 1px #ebebeb solid;
	margin-bottom: 5px;}

.tabs-container .top-menu li{
	float: left;
	position: relative;
	display: inline-block;
	margin: 0 0 -1px 0;
	padding: auto;}

.tabs-container .top-menu li a{
	padding: 0.5em 1.5em;
	display: inline-block;
	line-height: 20px;
}

.tabs-container ul.sub-menu{
	border: 1px #ebebeb solid;
	display: none;
	position: absolute;
	z-index: 1;
	background-color: white;}

.tabs-container li:hover .sub-menu{
	display: block;
	width: 200px;
	margin-top: -1px
}

.tabs-container ul.sub-menu li{
	float: none;
	display: inline-block;
	font-weight: 300}

.tabs-container ul.sub-menu li:hover{
	border: none;}

.tabs-container li.selected{
	border-bottom: 2px #dd5555 solid;
}

.tabs-container li.selected a{
	color: #dd5555;
}

.tabs-container li:hover{
	border-bottom: 2px #d52b2b solid;
}

.tabs-container li.tabs-button a:before{
	font-size: 1.3em;
}

.tabs-container li.tabs-button:hover{
	border: none;
}

.tabs-container li:hover a{
	color: #d52b2b;
}

.tabs-container li:hover .sub-menu a{
	color: rgb(102,102,102);
}

.tabs-container li:hover .sub-menu a:hover{
	color: #d52b2b;
}


/* POPUP ============================================================================= */
.popup-head{
	border-bottom: 1px #ebebeb solid;
	text-align: center;
}

	.popup-head h2{
		font-size : 1.75em;
		line-height: 35px;
		max-width: 300px;
		margin: 0 auto;
		padding: 20px 0;
	}

.popup-body{
	padding: 15px 0;
	min-width: 360px;
}


/* SYSTEM MSG ============================================================================= */
.system-msg{
	padding: 5px;
	background-color: #f9e194;
	margin-bottom: 15px;
}
	.system-msg p{
		color: #d52b2b;
	}
	.system-msg.form p{
		display: block;
		width: 100%;
	 	max-width: 300px;
		margin: 0 auto 5px auto;
	}
	.system-msg p:last-child{
		margin-bottom: 0
	}
	.system-msg.success{
		background-color: #5dccb2;
	}
	.system-msg.success p{
		color: white;
	}
	.system-msg.info{
		background-color: white;
		padding: 0;
	}
	.system-msg.info p{
		color: black;
		font-style: italic;
		font-weight: 300;
	}



/* MEDIA QUERIES ============================================================================= */
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.svg#Lato') format('svg');
    font-weight: 300;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.svg#Lato') format('svg');
    font-weight: 300;
  }


  	body {
		margin : 0 auto;
		padding : 0;
		font : 13px Arial, sans-serif;
		font-weight: normal;
	}

}

/* iPhone */
@media only screen and (max-width: 320px) {
	.iphone-hide{
		display:none; visibility:hidden;
	}

	.calendar-container{
		width: 100%;
	}

	.popup-head h2{
		max-width: 250px;
	}

	.popup-body{
		padding: 15px;
		min-width: 250px;
	}

	.system-msg.form p{
		display: block;
		width: 100%;
	 	max-width: 250px;
		margin: 0 auto 5px auto;
	}

	form.inline {
		max-width: 100%;
	}

	form.inline p{
		display: inline-block;
		min-width: 100%;
		margin-right: 0;
	}

	li.separator{
		width: 100%;
		display: inline-block;
		margin-top: -5px;
		margin-bottom: 0em;
	}

	li .label{
		width: 60%;
		display: inline-block;}

	li .data{
		width: 40%;
		display: inline-block;
		}
}