@import 'main.css';
@import 'section.css';
@import 'header.css';
@import 'home-section-gallery.css';
@import 'footer.css';
@import 'font-aaargh.css';
@import 'image-viewer.css';

body {
	font-family: Arial;
	/*font-family: aaargh;*/ }

.pos-top {
	width: 100%; 
	z-index: 1bu
	position: absolute; 
	top: 420px; }
.grid-stage {
	width: 900px;
	margin: 0 auto;
}
.crop_stage {
	width: 400px;
	height: 400px;
	position: relative;
	overflow: hidden;
}

.gallery-pos { 
	margin: 0 auto; }

.grid-piece-wrapper {
	padding: 7px;
	float: left;
	text-decoration: none;
}

.grid-piece-wrapper .remove {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 5px;
	width: 25px;
	height: 25px;
	background: #555 url('/session/session/auth/?f=images/close.png') center no-repeat;
}

.grid-piece-wrapper .remove:hover{
	background-color: #777;
}

.grid-piece-link-wrapper {
	
}

.grid-stage .handle {
	height: 35px;
	background: #777;
}

.grid-piece {
	position: relative;
	width: 286px;
	height: 200px;
	background: #000;
	overflow: hidden;
}
.grid-piece_double {
	width: 586px;
	height: 414px;
	background: #000;
	overflow: hidden; }

@media (max-width: 600px){
	.grid-piece_double {
		max-width: 286px;
		height: 414px;
		background: #000;
		overflow: hidden;		
	}
}


.grid-piece-wrapper  a:hover img {
	opacity: .8 }
.grid-piece-wrapper a:hover .title {
	color: #1795ff; }
.grid-piece-wrapper .title-wrap {
	width: 286px; }
	
.grid-piece-wrapper .title {
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 20px;
	padding: 10px; }

.info-wrapper {
	background: rgba(0,0,0,.33);
	padding: 7px 7px 33px 7px;
}	

.info-wrapper .price {
	padding: 0; }
	.info-wrapper .price span.label {
		font-weight: 500;
		padding: 0 12px 0 0;
		position: relative;
		top: 0.045em;
	}
	.info-wrapper .price span.cost {
		color: #ffa616;
		font-weight: 1000;
		font-size: 19px;
		position: relative;
		top: 0.045em;
	}

.button.white.remove {
	line-height: normal; }
.button.white.click, .button.white.click:hover {
	background: #efefef; }
.button.white {
	font-size: 10px;
	display: inline-block;
	cursor: pointer;
	color: #000;
	background: #fff;
	border: 1px solid #b3b3b3;
	padding: 4px 7px; }
	.button.white:hover {
		color: #000;
		background: #f8f8f8;
		border: 1px solid #258bf4; }
	.button.white.remove:hover {
		border: 1px solid #b58989; }
	.button.white span {
		position: relative;
		top: 0.095em; }

.button.blue.click {
	background: #64e0ff; }
.button.blue.click:hover{
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #64e0ff; }
.button.blue.click, .button.blue.click:hover {
	background: #3e96c8; }
.button.blue {
	display: inline-block;
	cursor: pointer;
	color: #fff;
	background-color: #0e7fbf;
	background: linear-gradient(#359fdc, #0e7fbf);
	border: 1px solid #26a4ed; }
	.button.blue:hover {
		color: #fff;
		background-color: #359fdc;
		background: linear-gradient(#6eb7e0, #108bd2);
		border: 1px solid #acdefb; }
	.button.blue span {
		position: relative; }

.button.orange.click:hover{
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #f1b33b; }
.button.orange.click, .button.orange.click:hover {
	background: #f1b33b; }
.button.orange {
	display: inline-block;
	cursor: pointer;
	color: #fff;
	background-color: #bf610e;
	background: linear-gradient(#dca335, #bf610e);
	border: 1px solid #26a4ed; }
	.button.orange:hover {
		color: #fff;
		background-color: #d26b10;
		background: linear-gradient(#f1b33b, #d26b10);
		border: 1px solid #acdefb; }
	.button.orange span {
		position: relative; }

.button.update {
	padding: 6px; }

.button.green.click, .button.green.click:hover { 
	background: #3c933a; }
.button.green {
	display: inline-block;
	cursor: pointer;
	color: #fff;
	background-color: #20701e;
	background: linear-gradient(#3c933a, #20701e);
	border: 1px solid #077100;
	padding: 12px; }
	.button.green:hover {
		color: #fff;
		background-color: #44ab41;
		background: linear-gradient(#3c933a, #1f681d);
		border: 1px solid #55d420;
	}
		.button.green span {
			position: relative;
			top: 0.095em;
		}

.button.red.click, .button.red.click:hover { 
	background: #d52020;
	background: linear-gradient(#a93333, #931818); }
.button.red {
	display: inline-block;
	cursor: pointer;
	color: #fff;
	background-color: #931313;
	background: linear-gradient(#931818, #821414);
	border: 1px solid #000;
	padding: 7px 0 7px 15px; }
	.button.red:hover {
		color: #fff;
		background-color: #931818;
		background: linear-gradient(#a01a1a, #931818);
		border: 1px solid #ff0000;
	}
		.button.red span {
			position: relative;
			top: 0.095em;
		}
.submit.click {
	background: #4dd972; }
.submit.click:hover {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #4dd972; }
.submit.click.delete {
	background: #ff8c8c;
}
.submit.click.delete:hover {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #ff8c8c;
}

.modaloverlay { position: fixed; display: none; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity .5s; opacity: 0; overflow-x: auto }
.modaloverlay > a { width: 100%; height: 100%; position: absolute; }
.modaloverlay:target { display: flex; opacity: 1; }
.modaloverlay:target > .modal { opacity: 1; }

.modal a.close { text-decoration: none; outline: none; border: none; color: #fff; display: inline-block; font-size: 18px; background: #868e96; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: .25s; }
.modal a.close:hover { background-color: tomato; color: white; }
.modal a.close:focus { box-shadow: 0 0 0 3px #ffafa1; }

#modal .modal { max-width: 500px; }
.modal {
	position: relative;
	margin: auto;
	background: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	transition: .5s; 
	opacity: 0;
	flex-grow: .2;
	font-size: 15px;
    font-family: Helvetica;
	box-shadow: 0 0 10px 1px deepskyblue; }
.modal .nav { border-bottom: 1px solid #ddd; font-size: 25px; line-height: 55px; position: relative; }
.modal .prev { height: 55px; float: left; }
.modal .next { height: 55px; float: right; }
.modal .prev button { margin: 0 0 0 10px; }
.modal .next button { margin: 0 10px 0 0; }
.modal .next a { margin: 0 10px 0 0; display: inline; padding: 1px 6px; font-weight: bold; font-size: 25px; vertical-align: middle; background: transparent; color: #868e96; }
.modal .next a:hover { color: #fff; background-color: tomato; }
.modal .nav span { text-align: center; display: block; }

.modal .content { padding: 10px; }

.info-wrapper .details {
	padding: 12px 12px 0 12px;
}
	.info-wrapper .title { 
		border-bottom: 1px solid black;
		color: #54ff5e;}
	.info-wrapper .title span { 
		padding: 0 0 0 7px;
		font-size: 35px; }
	.info-wrapper .details p { }

.piece_info {
	overflow: hidden;
	position: relative;
	max-width: 586px;
	height: 414px;
	padding: 14px 0 0 0;
}

@media (max-width: 600px){
	.piece_info {
		overflow: hidden;
		position: relative;
		max-width: 300px;
		height: 475px;
		padding: 14px 0 0 0;
	}
}

.piece_info .title {
	max-width: 570px;
	white-space: nowrap;
	overflow: hidden;
	padding: 7px;
	font-size: 40px;
	user-select: text;
}

.piece_info .description {
	max-height: 275px;
	max-width: 570px;
	overflow: hidden;
	overflow-y: auto;
	padding: 7px;
	font-size: 20px;
	font-weight: thin;
	user-select: text;
	box-sizing: border-box;
}

.piece_info.todd .description {
	max-height: 350px;
}

.piece_info .description p {
	text-indent: 5em;
}

.piece_info .inquiry {
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
}

.piece_info .inquiry .price, .piece_info .inquiry .inquire { }
}
.piece_info .inquiry .price { }
}
.piece_info .inquiry .inquire {
	color: #8f7530;
	cursor: pointer;
	background: #ece357;
	transition: 100ms ease-out 200ms;
}
.piece_info .inquiry .inquire:hover {
	color: #765e1d;
	background: #f8f28a;
}

.piece_info .inquiry .price span {
	line-height: 43px; }

/*html, body, .content, .section, .site-footer, .site-header { min-width: 614px; }*/
.content, .site-footer .wrapper, .site-header .wrapper { max-width: 1280px; }

.submit.dash {
	background: #298c43; }
.submit.dash span {
	color: #fff }
.submit.dash:hover {
	background: #34bf58 }
.submit.delete {
	background: #d91313; }
	.submit.delete:hover{
		background: #ff5555; }
	.submit.delete.disabled{
		background: #272727; }
.submit {
	padding: 0 0 0 15px;
	display: block;
	float: left;
	background: #ddd; }
	.submit:hover {
		background: #ccc; }
	.submit.dash.disabled:hover, .submit.disabled {
		background: #272727;
		cursor: default; }
		.submit.disabled span {
			color: #555555; }
	.submit span {
		color: #000;
		padding: 0 15px 0 0;
		display: block;
		font-size: 18px;
		line-height: 43px;
		letter-spacing: -1px; }
.submit.click {
	background: #4dd972; }
.submit.click:hover {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #4dd972; }
.submit.click.delete {
	background: #ff8c8c;
}
.submit.click.delete:hover {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #ff8c8c;
}

.submit.right {
	float: right; }
.button, .submit {
	cursor: pointer;
}

.button.disabled,.submit.disabled {
	background: #1f1f1f;
	color: #eee;
}
.button.disabled:hover,.submit.dash.disabled,.submit.dash.disabled:hover {
	background: #1f1f1f;
}

.button {
	padding: 0 0 0 15px;
	display: block;
	float: left;
	background: #3299b3; }
	.button:hover {
		background: #2fc5ea; }
	.button.disabled {
		background: #272727;
		cursor: default; }
		.button.disabled span {
			color: #555555; }
	.button span {
		padding: 0 15px 0 0;
		display: block;
		font-size: 18px;
		line-height: 43px;
		letter-spacing: -1px;
		color: white; }
.button.right {
	float: right; }
.button.click {
	background: #64e0ff; }
.button.click:hover{
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	background: #64e0ff; }
.button.green {
	background: #298c43; }
.button.green:hover {
	background: #34bf58; }
.button.green.click {
	background: #4dd972; }
.button.green.click:hover {
	background: #4dd972; }