/* Page Design -------------------*/
body {background-color:#ccc; background-image:url(https://www.transparenttextures.com/patterns/light-wool.png);}
html, body {margin:0px; padding:0px;}

/* Font Styles ------------------*/
body {font-family:'Source Sans Pro', Arial; color:#222; line-height:1.4; font-size:16px;}
h1, h2, h3, h4, h5 {margin:0px; line-height:1.4; color:#222;}
h1 {font-size:26px; font-weight:300;}
h2 {font-size:20px; font-weight:bold;}
h3 {font-size:14px; font-weight:normal;}

a {text-decoration:none;}

.white h1, .white h2, .white h3, .white {color:white;}
.link, .textfield a {color:#444; text-decoration:none; border-bottom:1px dashed #444;}
.link:hover, .textfield a:hover {border-bottom:1px solid #444;}
.whitelink {color:white; text-decoration:none; border-bottom:1px dashed white;}
.whitelink:hover {border-bottom:1px solid white;}

.white {color:white;}

/* Layout DIVs ------------------ */
.container {position:relative; width:960px; margin:0px auto;}
.header {position:relative; background-color:#009245; width:100%; padding:50px 0px 100px;
    -moz-box-shadow:0px 0px 3px #000; -webkit-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000;}
.header h1 {font-size:36px; font-weight:300; color:white; line-height:1; display:inline;}
.header h1:hover i {color:#7bbe31;}
.content {width:100%; margin-top:-80px; background:#f9f9f9;
    -moz-box-shadow:0px 0px 3px #444; -webkit-box-shadow:0px 0px 3px #444; box-shadow:0px 0px 3px #444;}
.inside {padding:30px;}
.footer {margin:20px 0px;}
.footer img {height:38px;}

/* REUSABLES */
.status span, .buttons span {font-size:12px; text-transform:uppercase; padding:2px 5px; color:white;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.buttons span {background:#333;}
.status span {background:#7bbe31;}
.status span.unpaid {background:#009245;}
.status span.waived {background:#999;}

.intro {background:#7bbe31; padding:50px 30px 20px;}
.intro h1, .intro h2 {color:white; font-weight:300;}

.invoiceinfo {background:#333; color:white; padding:10px 30px;}

/* TABLES */
table a {color:#222;}
table a:hover {border-bottom:1px solid #222;}
table {width:100%; font-size:18px; margin-top:10px; padding:0px; border-spacing:0; font-weight:300;}
th {text-align:left; font-weight:400; padding-bottom:8px; border-bottom:1px solid #ddd;}
td, th {padding:8px 0px; border-bottom:1px solid #ddd;}
td.first, th.first {padding-left:30px;}
td.last, th.last {padding-right:30px;}
td.right, th.right {text-align:right;}

/* ADMIN */
.navigation {position:absolute; right:0px; top:-31px; text-align:right;}
.navigation a {position:inline-block; padding-top:20px; margin-left:20px;
	font-size:18px; font-weight:300; color:white;}
.navigation a:hover, .navigation a.active {padding-top:15px; border-top:5px solid white;}

.admin .container {width:auto; margin:0px 30px;}
.admin table {font-size:16px; padding:10px 0px 30px;}
.admin td, th {padding:6px 4px;}
.admin td.first, .admin th.first {padding-left:20px;}
.admin td.last, .admin th.last {padding-right:20px;}
.admin tr:hover {background:#f1f1f1;}
.admin tr.nohover:hover {background:none;}

.login.admin {display:none;}
.largenav {padding:60px 30px; background:#f1f1f1; text-align:center;
	font-family:Helvetica, Arial; font-size:48px; font-weight:bold; line-height:1; color:#666;}
.largenav .slash {display:inline-block; margin:0px 15px; color:#ddd;}
.largenav a {color:#7bbe31;}
.largenav a:hover {color:#009245;}

.invoicelist td.items, .clientlist td.projects {max-width:300px; cursor:pointer;}
td.checkbox {line-height:18px;}
td.checkbox input[type=checkbox] {margin-left:0px; float:right;}

.showtext {color:#aaa;}
.fulltext {display:none; font-weight:300;}

.error {background:#7bbe31; padding:60px 0px; text-align:center;}
.error h1 {color:white;}

/* FORMS */

/* HOME */
.login {padding:50px 0px 70px; text-align:center; font-size:26px;}
.login input.field {padding:10px; margin-top:20px; font-size:18px; font-weight:700; text-align:center;}
.login .submit {padding:11px; font-size:18px; border:0px; margin-left:10px; cursor:pointer;
    background:#009245; color:white; font-family:'Source Sans Pro';}
.adminbutton {position:absolute; top:0px; right:15px; padding:4px 7px; background:#7bbe31;
	text-transform:uppercase; font-size:14px; color:white;}

/*CLIENT*/
.client .intro {margin-bottom:30px;}
.quotes {padding-bottom:30px;}
.quotes .date {padding-right:10px;}
.quotes .price, .quotes .view {text-align:right; padding-left:10px;}

.quotes .items {max-width:400px; font-size:16px;}
.client .projects {padding-bottom:30px;}
.client .projects .domain {line-height:1.2;}
.client .projects .domain span {font-size:14px;}
.client .projects .renew, .projects .host, .projects .reg {text-align:right;}
.invoices {padding-bottom:30px;}
.invoices .view {text-align:right;}

.projects h1, .invoices h1, .quotes h1
	{display:inline-block; background:#ddd; color:#222; font-weight:300; padding:4px 30px;}

/*QUOTE*/
.quoteitems {padding:30px 0px;}
.quoteitem {position:relative; padding:0px 30px 15px; border-bottom:1px #ddd solid; margin-bottom:15px;}
.quoteitem .info {padding-right:200px;}
.quoteitem .cost {position:absolute; top:0px; right:30px; text-align:right; font-size:22px; font-weight:bold;}
.quoteitems .total {padding:0px 30px; font-size:24px;}

/*INVOICE*/
.viewpanel {padding:15px 30px; background:#7bbe31}
.viewpanel a {float:right; padding:3px 6px; background:#222; color:white; text-decoration:none; 
    margin-left:10px;}
.business {float:left; margin-left:30px; background:#ddd; padding:20px;}
.business img {width:220px;}
.details {float:right; padding:30px; padding-bottom:15px; text-align:right;}
.details .extra {font-size:54px; font-weight:700; line-height:1;}
.details .invhead {margin-top:80px; padding-bottom:20px;}
.items {margin:0px -30px;}
.items .qty, .items .rate, .items .price {text-align:right; padding-left:10px;}
.total {padding-top:8px;}
.payment {text-align:center; background:#eee;}
.hours {background:#eee; padding:15px; text-align:center; line-height:40px; font-size:22px; color:#222;
	margin:0px 30px 30px;}
.hours:hover {background:#ddd;}
.hours img {float:left; height:40px; margin-right:15px;}

.printcontain {width:850px;}
.printcontain .menu {background:#333; color:white; padding:10px; margin-bottom:30px;}
.printcontain .menu span {font-size:12px;}
.printcontain .menu a {color:white; background:#7bbe31; padding:4px 6px; margin-right:10px; line-height:36px;} 
#print {font-family:'Helvetica', Arial, sans-serif; font-size:18px;}
#print .details .extra {font-size:54px;}
#print .business {margin-left:0px; padding-bottom:30px;}
#print .details {padding:0px; margin-bottom:100px;}
#print .items {margin:0px; margin-top:0px; width:100%;}
#print .items .prod {padding-left:0px;}
#print .items .price {padding-right:0px;}
#print .items .price, #print .items .qty, #print .items .rate {padding-left:10px;}
#print .inside {padding:0px;}

/* Universal Settings --------------*/
.third {float:left; width:calc(33.33% - 13.33px); margin-right:20px;}
.half {float:left; width:calc(50% - 10px); margin-right:20px;}
.halfleft {float:left; width:50%; text-align:left;}
.halfright {float:right; width:50%; text-align:right;}

.end {margin-right:0px;}
img {border:0;}
.clear {clear:both;}

#processwire {position:fixed; right:0px; bottom:20px; text-align:right; font-size:16px; line-height:26px;}
#processwire a {color:white; text-decoration:none; padding:4px 6px; background:#333; border-right:3px solid #111;}
#processwire a:hover {background:#111;}

/*Responsive --------------------------*/
@media screen and (max-width: 1000px) {
    .container {width:700px;}
    .inside {padding:20px;}
    .intro {padding:40px 20px 20px;}
    
    .items {margin:0px -20px}
    .items .prod {padding-left:19px;}
    .items .price {padding-right:19px;} 
}

@media screen and (max-width: 700px) {
    .container {width:100%;}
    .header h1 {font-size:24px;}
    .header .container {text-align:center;}
    
    .items .desc {display:none;}
    .payment .halfleft {margin-bottom:20px;}
    
    h1 {font-size:22px;}
    
    /* Universal Settings --------------*/
    .third, .half {float:none; width:100%; margin-right:0px; margin-bottom:20px;}  
    .third.end, .half.end {margin-bottom:0px;}
    .halfleft {float:none; margin-bottom:0px; text-align:center; width:100%;}
    .halfright {float:none; text-align:center; width:100%;}
}