/*
Theme Name: Boilerplate
Theme URI: http://marksalvadore.com/
Author: Mark Salvadore
Author URI: http://marksalvadore.com/
Description: Default boilerplate theme
*/

/* MAIN CSS */
@import url("./css/main.css");

/* INVOICES */
body, span, div, table, tr, tbody, tfoot, td, hr {
    -webkit-print-color-adjust: exact;
}

/* HOME */
body.home{
	background: #000;
}

body.home #logo{
    height: 201px;
    left: 50%;
    margin-left: -150px;
    margin-top: -89px;
    position: fixed;
    top: 50%;
    width: 300px;
}


/* INVOICE */
.invoice{
	background: #CBCBCB;
}

.invoice #main{
	padding-top: 20px !important;
}

.invoice #invoice-options{
	margin-bottom: 20px;
}

.invoice #invoice-options .button-group{
	float: right;
}

.invoice article{
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.13);
    padding: 60px 40px 10px !important;
}

.invoice article header{
	margin-bottom: 4em;
}

.invoice .button.pdf i{
	margin-right: 2px;
}

.invoice .button.print i{
	margin-right: 2px;
}

.invoice .button.pay i{
	margin-right: 1px;
}

#project{
	float: left;
}

#project #logo img{
	height: 100px;
	width: auto;
}

#project #logo{
	margin-bottom: 20px;
}

#company{
	text-align: right;
}

#project #project-name .grey{
	color: #a6a6a6;
}

table th.description,
table td.description{
	width: 68%;
}

table th.hours,
table td.hours{
	text-align: center;
	width: 9%;
}

table th.rate,
table td.rate{
	text-align: center;
	width: 9%;
}

table th.total,
table td.total{
	text-align: right;
	width: 14%;
}

table#invoice-items tr.item.last td,
table#invoice-totals tr.totals td{
	border: none;
}

table#invoice-items.sub tr.item.last td{
	border: none;
}

table#invoice-items th,
table#invoice-items td{
	border-color: #CCC;
}

table#invoice-items tr.item td.hours,
table#invoice-items tr.item td.total{
	background: #EEE;
}

table#invoice-items tr.header th{
	padding-bottom: 1em;
}

table#invoice-items tr.item td,
table#invoice-expenses tr.item td{
	padding: 1em 8px;
}

table#invoice-totals tr.totals td{
	padding-top: 1em;
}

table#invoice-items tr.header th.hours,
table#invoice-items tr.header th.rate,
table#invoice-items tr.item td.hours,
table#invoice-items tr.item td.rate,
table#invoice-totals tr.totals td.hours{
	text-align: center;
}

table#invoice-items tr.header th.total,
table#invoice-items tr.item td.total{
	direction: rtl;
	text-align: justify;
}

table#invoice-totals tr.totals td.hours{
	width: auto;
}

table#invoice-totals tr.totals td.total{
	text-align: right;
}

#company div#name,
table#invoice-totals tr.totals{
	font-size: 24px;
	line-height: 24px;
}

table#invoice-totals tr.totals{
	text-transform: uppercase;
}

table#invoice-totals tr.sub small{
	font-size: 80%;
}

table#invoice-totals tr.totals.sub{
	font-size: 18px;
}

table#invoice-totals tr.totals.sub td{
	padding-top: 0;
}

table#invoice-totals tr.totals td.hours span.suffix{
	font-size: 18px !important;
}

table#invoice-totals tr.totals.sub td.hours span.suffix{
	font-size: 16px !important;
}

#company,
#project,
table#invoice-items tr.header th,
table#invoice-items tr.item td,
table#invoice-expenses tr.header th,
table#invoice-expenses tr.item td{
	font-size: 16px;
}

table#invoice-items tr.item td.description div.task{
	font-size: 90%;
}

#company div#name strong,
table#invoice-totals tr.totals strong{
	font-weight: 600;
}

table#invoice-totals tr.totals.sub strong{
	font-weight: normal !important;
}

#fixed-rate{
	font-size: 16px;
	text-align: right;
	margin-bottom: 30px;
}

#fixed-rate .label{
	margin-right: 10px;
}

table#invoice-expenses{
}

table#invoice-expenses th{
	padding-top: 20px;
}

table#invoice-expenses th{
	border-bottom: 1px solid #ccc;
}

table#invoice-expenses td{
	border-bottom: 1px dotted #ccc;
}

@media only screen and (max-width: 767px) {
	.drop{
		display: block
	}
	.no-mobile{
		display: none;
	}
	.invoice article{
		background: none repeat scroll 0 0 #FFFFFF;
		box-shadow: 0 5px 11px rgba(0, 0, 0, 0.13);
		padding: 40px 20px 0px !important;
	}
	
	.invoice article header {	
		margin-bottom: 20px;
	}
	
	#company{
		position: absolute;
		text-align: center;
		top: 155px;
		float: none;
		left: 0px;
		margin: 0 auto;
		width: 100%;
	}
	
	#project{
		margin-top: 160px;
	}
	
	#project #logo img{
		position: absolute;
		margin-left: -74.5px;
		top: 40px;
		left: 50%;
	}
	
}