/*
 *= require shoppe/reset
 *= require shoppe/elements
 *= require shoppe/chosen
 *= require nifty/dialog
 *= require shoppe/dialog
 *= require_self
 */

@import 'variables';

html { font-family:$font; font-size:12px; color:#000; -webkit-font-smoothing:antialiased; background-color:#f7f9fc;}

nav.sidebar {
	width:200px;
	background:#40454D;
	position:fixed;
	top:0;
	bottom:0;
	header.logo {
		height:57px;
		background:image-url('shoppe/logo.svg') #9AC835 no-repeat 22px 25px;
		background-size:45px;
		padding-left:80px;
		padding-top:28px;
		h1 a {
			display:block;
			width:72px;
			height:16px;
			background:image-url('shoppe/shoppe.svg') no-repeat;
			background-size:72px 16px;
			text-indent:-40000px;
		}
		p { color:#fff; font-size:0.9em; margin-top:4px; }
	}
	
	p.logged {
		background:#5B6270;
		padding:12px 20px;
		color:#fff;
		font-size:0.9em;
	}
	
	ul {
		li {
			span.pending { float:right; font-size:0.9em;  font-weight:bold;background:#5B6270; color:#fff; padding:2px 10px; border-radius:16px; margin-top:9px; margin-right:10px;}
			a {
				display:block;
				border-bottom:1px solid rgba(255,255,255,0.05);
				color:rgba(255,255,255,0.7);
				text-decoration:none;
				padding:10px 20px;
				font-size:1.1em;
				&:hover {
					background:rgba(0,0,0,0.05);
				}
				&.active {
					font-weight:bold;
					color:#fff;
					background:rgba(0,0,0,0.08);
				}
			}
		}
	}
}

header.main {
	position:fixed;
	left:200px;
	right:0;
	height:85px;
	background:#fff;
	box-shadow: 0 0px 15px -2px rgba(0,0,0,0.2);
	p.buttons { float:right; margin-top:27px; margin-right:35px;}
	p.buttons a { margin-left:10px;}
	h2 { margin-top:28px; margin-left:35px; font-size:2.0em; font-weight:300; color:#333; background-repeat:no-repeat; background-size:22px; background-position:0 5px; padding-left:32px;}
	h2 span { font-size:0.4em; font-weight:normal; color:#999; margin-left:10px;}
	h2 b { font-weight:500;}
	h2.products { background-image:image-url('shoppe/icons/tags.svg')}
	h2.orders { background-image:image-url('shoppe/icons/bag.svg'); background-position: 0 3px;}
	h2.delivery_services { background-image:image-url('shoppe/icons/box.svg'); background-position: 0 3px; background-size:20px;}
	h2.tax_rates { background-image:image-url('shoppe/icons/currency.svg'); background-position: 0 2px; background-size:22px;}
	h2.users { background-image:image-url('shoppe/icons/id.svg'); background-position: 0 2px; background-size:22px;}
	h2.settings { background-image:image-url('shoppe/icons/toolbox.svg'); background-position: 0 2px; background-size:22px;}

}

#content {
	padding-left:200px;
	padding-top:85px;
	
	section.main {
		padding:35px;
	}
	
	//
	// flashes
	//
	#flash-notice { background:#21a3e0; padding:15px 35px; color:#fff; font-size:1.2em; font-weight:bold;}
	#flash-alert { background:#e04e21; padding:15px 35px; color:#fff; font-size:1.2em; font-weight:bold;}
	
	//
	// sub title
	//
	.subtitle {
		background:#fff;
		border:1px solid #CFD4DD;
		margin-bottom:25px;
		padding:15px;
		h3 { font-size:2.0em; font-weight:500;}
	}
		
	
	//
	// Status tags
	//
	span.status-tag {
		font-weight:600;
		font-size:11px;
		text-transform:uppercase;
		background-size:16px;
		background-repeat:no-repeat;
		padding-left:20px;
		min-height:16px;
		display:inline-block;
		&.shipped { color:#E32479; background-image:image-url('shoppe/statuses/shipped.svg'); }
		&.accepted { color:#89BD2F; background-image:image-url('shoppe/statuses/accepted.svg'); }
		&.rejected { color:#E33127; background-image:image-url('shoppe/statuses/rejected.svg'); }
		&.received { color:#909091; background-image:image-url('shoppe/statuses/received.svg'); }
	}
	
	//
	// forms
	//
	form {
		fieldset {
			border:1px solid #dce2eb;
			background:#fff;
			padding-top:15px;
			padding-bottom:25px;
			margin-bottom:15px;
			legend {color:#5B6270; margin:0 25px; font-weight:300; font-size:1.5em;}

			.splitContainer { margin:0 25px; margin-bottom:15px; height:50px;}
			.splitContainer:last-child { margin-bottom:0;}
			
			dl { 
				margin:0 25px;
				margin-bottom:15px;
				&:last-child { margin-bottom:0;}
				dt { margin-bottom:10px;  font-size:1.2em;}
				dt label { font-weight:500;}
				dd {  }
				dd input[type=text], dd input[type=password], textarea {
				}
				dd select { width:100%;}
				dd textarea { height:80px;	}
				dd p.help { margin-top:15px; color:#333; background:image-url('shoppe/icons/support.svg') no-repeat 0 3px; line-height:1.5; background-size:13px; padding-left:18px; opacity:0.7;}
				dd.checkbox { margin-top:14px; font-size:1.1em; color:#999;}
				dd.checkbox input { float:left; margin-right:10px; margin-top:2px; }
				dd div.radios {
					padding-top:4px;
					input,label { margin-right:10px;}
				}
				&.half {
					width:49%;
					margin:0;
					float:left;
					&:last-child { float:right;}
				}
				
				&.third {
					width:31%;
					margin:0;
					float:left;
					&:nth-child(2) { margin-left:2%; width:32%;}
					&:last-child { float:right; width:33%;}
				}
			}
			
			dl.sided {
				clear:both;
				dt { float:left; width:25%; text-align:right; padding-top:4px;}
				dd { margin-left:30%; }
				dd p.help { margin-top:10px;}
				dd div.checkbox { padding-top:5px;}
			}
			
			
			//
			// margined container
			//
			div.margin { margin: 0 25px;}
			
			//
			// attributes table
			//
			table.productAttributes {
				width:100%;
				margin-bottom:10px;
				line-height:1.0;
				thead td { background:#f7f7f7; color:#999; font-size:0.9em;}
				td {
					border:1px solid #ccc;
					padding:10px;
					vertical-align:middle;
					width:40%;
					input[type=text] { width:100%; border:0; padding:0; margin:0; font-size:1.2em;}
					&.remove { width:8%; text-align:center; background:#ffeff5;}
					&.searchable {  width:8%; text-align:center; }
					&.handle { width:4%; background:image-url('shoppe/move.svg') no-repeat center; background-size:16px;}
				}
			}
		}
		p.submit {margin:0; background:#fff; border:1px solid #dce2eb; padding:25px; }
		p.submit .button { margin-right:5px;}
		p.submit .right .button {margin-left:5px; margin-right:0;}
		p.submit span.right { float:right;}
		p.submit.sided { padding-left:30%;}
		.errorExplanation {
	    margin-bottom:25px;
	    border:1px solid #EB2732;
			background:#fff;
	    padding:25px;
	    line-height:1.5;
	    h2 { font-size:1.5em !important; font-weight:300; color:#de1818;  margin-bottom:10px;}
	    p { display:none;}
	    ul li { list-style:disc; margin-left:25px; font-size:1.2em;}
	  }
	}
	
	//
	// attachment preview
	//
	div.attachmentPreview {
		overflow:hidden;
		border:1px solid #ccc;
		background:#f7f7f7;
		padding:10px;
		margin-bottom:15px;
		div.imgContainer {  float:left;padding:4px;	 border:1px solid #ccc; background:#fff;}
		div.imgContainer div.img { background-image:image-url('shoppe/document.svg'); width:40px; height:40px; display:block;background-size:contain; background-repeat:no-repeat; background-position: center center;}
		div.imgContainer div.img.none { background-image:none;}
		div.desc {margin-left:60px; padding-top:5px;}
		div.desc span { display:block}
		div.desc span.filename { font-size:1.1em; margin-bottom:5px;}
		div.desc span.filename a { text-decoration:none; font-weight:bold;}
		div.desc span.delete a  { color:#FF9781; font-size:0.9em; }
		div.desc a { color:#000;}
		div.desc.none { color:#999; font-style:italic;}
	}
	
	//
	// order summary page
	//
	#order {
		.details {
			overflow:hidden;
			.left {
				width:55%;
				float:left
			}
			.right {
				width:45%;
				float:left;
				p.acceptreject { text-align:center; margin-top:22px; }
				p.acceptreject a { margin: 0 5px;}
				p.ship { text-align:center; margin-top:22px;}
				p.ship input[type=text] {  }
			}
			
			dl {
				dt { float:left; width:30%; text-align:right; color:#888;white-space:nowrap}
				dd { font-weight:bold; margin-left:35%; margin-bottom:6px; white-space:nowrap}
				dt.padding { padding-top:6px;}
			}
			
			dl.form {
				margin-top:15px;
				input.text { width:70%;}
				a.button { margin-right:5px;}
			}
			
		}
		
		.status-bar {
			background:image-url('shoppe/square.svg') repeat-x 0 15px;
			background-size:8px;
			margin:45px 0;
			overflow:hidden;
			ul {
				li { width:25%;float:left; text-align:center; background:image-url('shoppe/statuses/shipped.svg') no-repeat center 0; background-size:36px; padding-top:42px;z-index:10;}
				h4 { color:#E32479;}
				li p { margin-top:5px; font-size:0.9em; color:#999;}
				li a { color:inherit;}
				li.payment { background-image:image-url('shoppe/statuses/paid.svg')}
				li.payment h4 { color:#3DB3E2;}
				li.received { background-image:image-url('shoppe/statuses/received.svg')}
				li.received h4 { color:#909091;}
				li.accepted { background-image:image-url('shoppe/statuses/accepted.svg')}
				li.accepted h4 { color:#89BD2F;}
				li.rejected { background-image:image-url('shoppe/statuses/rejected.svg')}
				li.rejected h4 { color: #E33127}
			}
		}
		
		.notes {
			background:#fff;
			border:1px solid #CED2D8;
			p { padding:15px;}
			p textarea { border:0; padding:0; width:100%; resize:none; height:100px; font-family:$font; font-size:1.1em}
			h4 { background:#F7F9FC; padding:10px 15px; font-weight:500;}
			h4 input { float:right; margin-top:-3px;}
		}
		
		.order_items {
			margin:25px 0;
			table.data {
 				.money { text-align:right; width:8%}
				.product { width:42%;}
				.sku { width:18%;}
				.qty {text-align:center; width:5%;}
				tfoot td { background:#5B6270; color:#fff; border:1px solid #5B6270; font-weight:bold; font-size:1.1em;}
			}
		}
	}
	
	//
	// orer search
	//
	div.orderSearch {
		overflow:hidden;
		display:none;
		dl.left, dl.right {
			float:left; 
			width:50%;
			dt { float:left; width:40%; text-align:right; padding-top:3px; color:#888;}
			dd { margin-left:44%; margin-bottom:15px;}
			dd input.small { width:40%;}
		}
		p.submit {
			float:right;
		}
	}

	
	
	
}

footer {
	position:fixed;
	bottom:0;
	width:200px;
	background:rgba(0,0,0,0.05);
	
	p.store {
		a {
			display:block;
			background:#4B515C;
			color:rgba(255,255,255,0.7);
			padding:12px 20px;
			font-size:1.1em;
			text-decoration:none;
		}
	}
}

span.boolean span.true { color:#38BA4F}
span.boolean span.false { color:#c04a4a}

.float-right { float:right;}

div.field_with_errors { display:inline;}

//
// standard text input box
//
input.text, textarea.text {
	width:100%; padding:5px; border:1px solid #ccc;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
	font-size:1.1em;
	font-family:$font;
	&:focus { border-color:#9AC835; }
	&.short { width:100px;}
}

//
// data table
//
div.table {
	p.info {
		overflow:hidden;
		margin-bottom:10px;
		color:#40454D;
	}
	table.data {
		width:100%;
		th, td { padding:10px; vertical-align:middle;}
		thead th { border:1px solid #40454D; background:#40454D; text-align:left; font-weight:normal; font-size:0.9em; color:#fff; }
		tbody td { border:1px solid #cfd4dd; background:#fff;}
		a { color:inherit;}
		tbody th { text-align:left; background:#5B6270; border:1px solid #5B6270;font-size:1.2em; color:#fff;}
		tbody tr.empty td { padding:50px 0; text-align:center; color:#999; font-style:italic;}
		tfoot td.right { text-align:right; }
		tfoot td.bold { font-weight:bold;}
		tfoot td { border-top:0 solid #ccc; background:#fafafa;}
		tfoot tr:first-child td { border-top-width:3px;}
		tbody td a.edit { background:image-url('shoppe/icons/edit.svg') no-repeat; margin-top:3px;width:16px; width:16px; background-size:13px; display:inline-block; text-indent:-40000px; opacity:0.3}
		tbody td a.edit:hover { opacity:0.5}
		tbody td.table {
			padding:0;
			table.data {
				td { padding:10px; border-width:0; border-right-width:1px; border-bottom-width:1px;}
				td:last-child { border-right-width:0;}
				tr:last-child td { border-bottom-width:0;}
			}
		} 
		tbody tr.form {
			td { background:#f2f6fb;}
			input[type=text] { border:1px solid #CFD4DD; padding:5px;}
			input[type=text]:focus { border-color:#9AC835;}
			td.desc input[type=text] { width:95%;}
			td.adjustment input[type=text] { width:50px; margin-right:5px;}
		}
	}
}

//
// pagination
//
nav.pagination {
	display:block;
	margin:25px 0;
	overflow:hidden;
	text-align:center;
	span {
		display:inline-block;
		border:1px solid #ccc;
		margin-right:3px;
		color:#333;
		background:#fff;
		&.current { background:#9AC835; border-color:#7B9F26; color:#fff; font-weight:600; padding:5px 10px;}
		a {
			padding:5px 10px;
			display:inline-block;
			color:inherit;
			text-decoration:none;
		}
	}
}