@import url("mobile.css");
@import url("tooltips.css");

/* ===================================== basic ===================================== */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 21px;
	background: url("images/bg.png") repeat top left #2e1a0f;
	margin: 0;
}
.frame {
	width: 1050px;
	background: url("images/frame.png") repeat-y top left;
	margin: auto;
	padding: 0 50px;
}
.clear {
	clear: both;
}
a img {
	border: 0;
}
p {
	margin: 0 0 20px 0;
}
ul, ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ===================================== header ===================================== */
.header {
	height: 110px;
	background: url("images/header.jpg") no-repeat top left;
}

a.logo {
	width: 620px;
	height: 78px;
	display: block;
	float: left;
}
a.logo span {
	display: none;
}
.shoppingcart {
	margin-top: 21px; /* center vertically */
	margin-right: 50px;
	float: right;
}
.shoppingcart a {
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	color: #fff;
	background: url("images/cart.png") no-repeat center left;
	padding-left: 50px;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
}
.shoppingcart a span {
	color: #eed182;
}

.nav a {
	height: 32px;
	background: url("images/nav.png") no-repeat top left;
	float: left;
	display: block;
}
.nav a span {
	display: none;
}
a#m1 { width: 56px; background-position: 0 0; }
a#m2 { width: 96px; background-position: -56px 0; }
a#m3 { width: 204px; background-position: -152px 0; }
a#m4 { width: 94px; background-position: -356px 0; }
a#m5 { width: 111px; background-position: -450px 0; }
a#m6 { width: 150px; background-position: -561px 0; }
a#m7 { width: 107px; background-position: -711px 0; }
a#m8 { width: 61px; background-position: -818px 0; }
a#m9 { width: 71px; background-position: -879px 0; }
a:hover#m1 { background-position: 0 -32px; }
a:hover#m2 { background-position: -56px -32px; }
a:hover#m3 { background-position: -152px -32px; }
a:hover#m4 { background-position: -356px -32px; }
a:hover#m5 { background-position: -450px -32px; }
a:hover#m6 { background-position: -561px -32px; }
a:hover#m7 { background-position: -711px -32px; }
a:hover#m8 { background-position: -818px -32px; }
a:hover#m9 { background-position: -879px -32px; }

/* ===================================== content ===================================== */
.content {
	background-color: #fff5d5;
	padding: 20px;
}
.main {
	min-height: 750px;
	margin: 0 0 20px 0;
}
a {
	color: #900;
	text-decoration: underline;
	font-weight: bold;
}
a:hover {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0 0 5px 0;
}
.line-s { background: url("images/line-s.png") no-repeat bottom center; }
.line-l { background: url("images/line-l.png") no-repeat bottom center; }

/* ===================================== home ===================================== */
.animation {
	width: 910px;
	height: 350px;
	margin: 0 0 20px 0;
	overflow: hidden;
}
.columns {
	margin: 0 0 20px 0;
}
.columns .left {
	width: 50%;
	padding-right: 10px;
	float: left;
}
.columns .right {
	width: 50%;
	padding-left: 10px;
	float: right;
}
.ticks li {
	background: url("images/tick.png") no-repeat left center;
	margin-bottom: 10px;
	padding-left: 30px;
}

a.button {
	width: 321px;
	height: 32px;
	background: url("images/button-l.png") no-repeat top left;
}
a.button-m {
	width: 149px;
	height: 32px;
	background: url("images/button-m.png") no-repeat top left;
}
a.button-s {
	width: 54px;
	height: 32px;
	background: url("images/button-s.png") no-repeat top left;
}

a.button, a.button-m, a.button-s {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 28px; /* (!) */
	color: #000;
	text-align: center;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
a:hover.button, a:hover.button-m, a:hover.button-s  {
	color: #444;
	text-shadow: 0 0 3px #fff;
}

/* ===================================== order ===================================== */
label {
	margin: 0 0 10px 0;
	display: block;
}
label span {
	width: 200px;
	padding-right: 10px;
	text-align: right;
	float: left;
}
label .button-m {
	display: inline-block;
}
.submit {
	margin: 0 0 0 200px;
	clear: both;
}
.forminfo {
	margin: 0 0 10px 200px;
}

input, select, textarea {
	border-top: 1px solid #aaa;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 4px;
}
textarea {
	resize: vertical;
}
input, select, textarea { /* Chrome */
	margin: 0;
}

input[type="file"]::-ms-browse { /* IE 10 */
	border-left: 1px solid #aaa;
	border-right: none;
	border-top: none;
	border-bottom: none;
}
input[type="file"]::-ms-value {
	border: none;
}

label.error { /* validation */
	visibility: hidden;
	position: absolute;
}
input.error, textarea.error, select.error {
	border-color: #F00 !important;
	background-color: #FFE9E9 !important;
}

/* ===================================== checkout ===================================== */
.checkout_same {
	background-color: #FFE388;
	border: 1px solid #000;
	margin: 0 0 20px 0;
	padding: 10px;
}

.checkout label span {
	width: 120px;
}
.checkout label input, .checkout label select {
	width: 280px;
}

/* ===================================== tooltips ===================================== */
.tooltip {
	max-width: 350px;
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	background-color: #000;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px;
	position: absolute;
}

/* ===================================== prices ===================================== */
.table {
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	border-collapse: collapse;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	background-color: #ffdca2;
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	margin: 0 0 20px 0;
}
.table th {
	font-weight: normal;
	text-align: left;
	background-color: #f2efe8;
}
.table td {
	font-weight: bold;
}
.table td, .table th {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	padding: 6px;
}
.table tr:hover {
	background-color: #FFBE54;
}

/* ===================================== FAQ ===================================== */
.faq {
	margin-bottom: 10px;
}
.faq-title {
	font-weight: bold;
	cursor: pointer;
}
.faq-title:hover {
	color: #C00;
}
.faq-content {
	padding-bottom: 10px;
}

/* ===================================== testimonials ===================================== */
.testimonials_video {
	margin: 0 0 20px 0;
}
.testimonials_video li {
	width: 50%;
	margin: 0 0 20px 0;
	float: left;
}
.testimonials_video li span {
	font-size: 12px;
	line-height: 18px;
	margin-top: 10px;
	display: block;
}

.testimonials_photos {
	margin: 0 0 40px 0;
}
.testimonials_photos li {
	width: 290px;
	background-color: #ffdca2;
	border: 1px solid #000;
	margin: 0 10px 10px 0;
	padding: 10px;
	float: left;
}
.testimonials_photos li:hover {
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
}
.testimonials_photos li span {
	font-size: 12px;
	line-height: 18px;
	margin-top: 10px;
	display: block;
}

/* ===================================== portrait painting ===================================== */
.pp_cats {
	margin: 0 0 40px 0;
}
.pp_cats li {
	width: 290px;
	margin: 0 10px 10px 0;
	float: left;
}
.pp_cats a {
	background-color: #ffdca2;
	border: 1px solid #000;
	text-decoration: none;
	padding: 10px;
	display: block;
}
.pp_cats a:hover {
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
}
.pp_cats span {
	text-align: center;
	margin-top: 10px;
	display: block;
}

.list {
	margin: 0 0 20px 0;
}
.list li {
	list-style: disc inside;
}

/* ===================================== samples ===================================== */
.samples {
	margin: 0 0 20px 0;
}

.samples-current {
	height: 350px;
	background: url("images/loading.gif") no-repeat center center;
	text-align: center;
	overflow: hidden;
	margin-bottom: 10px;
}

a.timer {
	width: 24px;
	height: 24px;
	background: url("images/playpause.png") no-repeat bottom left;
	margin: 0 auto 10px auto;
	display: block;
}

.samples-scroll {
	height: 110px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.samples-scroll ul {
	width: 9999px;
}
.samples-scroll li {
	height: 86px; /* (!) 80 + padding + border */
	border: 1px solid #ccc;
	margin-right: 5px;
	padding: 2px;
	float: left;
}
.samples-scroll li:last-child {
	margin: 0;
}
.samples-scroll li:hover, .samples-scroll li.current {
	border-color: #666;
}
.samples-scroll li:hover img, .samples-scroll li.current img {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
.samples-scroll a {
	background-color: #000;
	display: block;
}

.magnifier {
	margin: 0 0 40px 0;
	text-align: center;
}
.magnifier img {
	border: 5px solid #000;
}

/* ===================================== guarantees ===================================== */
.guarantees li {
	background: url("images/tick.png") no-repeat top left;
	margin: 0 0 20px 0;
	padding-left: 30px;
}

/* ===================================== contacts ===================================== */
.contacts label span {
	width: 120px;
}
.contacts input, .contacts textarea {
	width: 320px;
}
.contacts textarea {
	height: 200px;
}
.contacts .button-m {
	margin-left: 120px;
}

.hidden {
	visibility: hidden;
	position: absolute;
}

/* ===================================== cart ===================================== */
.cart table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	background-color: #ffdca2;
	margin: 0 0 10px 0;
}
.cart table th, .cart table td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	padding: 6px;
}
.cart table th {
	font-weight: bold;
	background-color: #FFBE54;
}

.cart .left {
	float: left;
}
.cart .right {
	float: right;
	text-align: right;
}

/* ===================================== reproductions ===================================== */
.search {
	margin: 0 0 20px 0;
}

.reproductions {
	margin: 0 0 20px 0;
}
.reproductions a {
	width: 290px;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	color: #000;
	background-color: #ffdca2;
	border: 1px solid #000;
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	margin: 0 10px 10px 0;
	padding: 20px;
	text-decoration: none;
	display: block;
	float: left;
}
.reproductions a:hover {
	color: #C00;
}
.reproductions span {
	margin-top: 10px;
	display: block;
}

.pages {
	font-size: 18px;
	line-height: 27px;
	text-align: center;
}
.pages a.active {
	color: #000;
	text-decoration: none;
	cursor: default;
}
.pages img {
	vertical-align: text-bottom;
}
.arrow-prev {
	margin-right: 10px;
}
.arrow-next {
	margin-left: 10px;
}

/* ===================================== view reproduction ===================================== */
.reproduction-details {
	width: 290px;
	font-size: 12px;
	line-height: 18px;
	background-color: #ffdca2;
	border: 1px solid #000;
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	margin: 0 20px 0 0;
	padding: 20px;
	float: left;
}
.reproduction-details span {
	margin-top: 10px;
	display: block;
}

.reproduction-order {
	float: left;
}
.reproduction-order label span {
	width: 160px;
	text-align: left;
}
.reproduction-order .forminfo, .reproduction-order .submit {
	margin-left: 160px;
}

/* ===================================== footer ===================================== */
.footer {
	background: url("images/line-l.png") no-repeat top center;
	padding-top: 20px;
}
.copynav {
	
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	/*padding-left: 77px; // (!) balance sitelock size
	float: left;
	width: 793px;*/
}
.sitelock {
	float: right;
}

.cards {
	height: 80px; /* (!) 40px image height + 2x20 padding */
	background: url("images/line-l.png") no-repeat top center;
	padding: 20px 0;
	text-align: center;
}
.cards img {
	margin-right: 15px;
	vertical-align: top;
}
.cards img:last-child {
	margin-right: 0;
}

/* ===================================== wysiwyg generated content ===================================== */
.wysiwyg ul, .wysiwyg ol { margin: 0 0 20px 0; }
.wysiwyg ul li { list-style: disc inside; }
.wysiwyg ol li { list-style: decimal inside; }

.wysiwyg table {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-collapse: collapse;
	background-color: #ffdca2;
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5);
	margin: 0 0 20px 0;
}
.wysiwyg table td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	padding: 6px;
}

/* ===================================== Browse Button Name & no File choosen text Change ==================== */

/*input[type="file"].valid:after {
  content: "";
}
input[type="file"].valid {
  color: #000;
}
input[type="file"] {
  color: transparent;
}
input[type="file"]:after {
  content: "Geen bestand gekozen"; color:#000; padding-left:10px;
}

.form-control{
	content: "Geen bestand gekozen"; color:#000; padding-left:10px;
}

.group-span-filestyle.input-group-btn {
    background: url("images/file-browse.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    color: transparent;
	width: 105px;
	cursor:pointer;
	background-position: 0 0;
	height:22px;
}

.group-span-filestyle.input-group-btn:hover { background-position: 0 -22px; } */


/*.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{color:#333;background-color:#ebebeb;border-color:#adadad}

.input-group-btn>.btn{height:25px;padding:5px 14px;line-height:1;border-radius:3px}*/

/*.bootstrap-filestyle.input-group { float: left; }*/