/* 
 * Bookbinders Design Stylesheet
 */

body {
	margin: 0px;
	padding: 0px;
	background-color: none;
	border: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.hide {
	display: none;
	transition: all 0.2s ease-in-out;
	opacity: 0;
}
body.show {
	opacity: 1;
	transition: all 0.2s ease-in-out;
	display: block;
}
@font-face {
	font-family: Bodoni Antiqua;
	src: 
	url('../fonts/Bodoni Antiqua URW Regular.woff2') format('woff2'),
    url('../fonts/Bodoni Antiqua URW Regular.woff') format('woff'),
    url('../fonts/Bodoni Antiqua URW Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}

/* Page fonts */
.font_normal {
	font-family: Arial, sans-serif;
    font-size: 14px;
	font-weight: normal;
	font-color: #333333;
}
.font_head {
	font-family: Arial, sans-serif;
    font-size: 16px;
	font-weight: bold;
	font-color: #333333;
}
.font_small {
	font-family: Arial, sans-serif;
    font-size: 12px;
	font-weight: normal;
	font-color: #333333;
}
.font_white {
	font-color: #eeeeee;
}


/* Layout divs */
div.heading {
	display: block; /* Initially visible, mobile version hidden */
	width: 70%;
	height: auto;
	padding-left: 15%;
	padding-right: 15%;
	margin-bottom: 35px;
}
img.logo {
	padding-top: 10px;
}
span.head_text {
	display: block;
	min-height: 30px;
	height: auto;
	width: 100%;
	margin: 0px;
	margin-top: 5px;
	padding-top: 10px;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}
button.close_iframe {
	display: none;
	border: none;
	float: right;
	color: #cccccc;
	background-color: #ffffff;
	width: 32px;
	height: 32px;
	padding: 0px;
	margin-top: 10px;
}
button.close_iframe:focus {outline:0;}


/* Mobile styles */

div.heading_mobile {
	display: none; /* Initially hidden, non-mobile is default */ 
	width: 100%;
}
div.heading_mobile_fixed {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	background-color: #ffffff;
}
div.head_space {
	display: block;
	width: 100%;
	height: 90px;
}
div.head_line {
	display: block;
	width: 96%;
	background-color: #000;
    color: #fff;
    padding: 2%;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
    height: auto;
}
button.logo_mobile {
	border: none;
	float: left;
	color: #cccccc;
	background-color: #ffffff;
	width: auto;
	height: auto;
	padding-top: 10px;
	padding-left: 10px;
	margin: none;
	cursor: pointer;
}
button.logo_mobile img {
	width: 100px;
}
button.close_iframe_mobile {
	border: none;
	float: right;
	background-color: #ffffff;
	width: 18px;
	height: 18px;
	padding: 0px;
	margin-top: 15px;
	margin-right: 20px;
	cursor: pointer;
}
button.close_iframe_mobile img {
	border: none;
	width: 18px;
}

/* In store styles */
div.heading_instore {
	display: none; /* Initially hidden, non-in-store is default */ 
	width: 100%;
}
div.instore_head_space {
	display: block;
	width: 100%;
	height: 150px;
}
div.heading_instore_fixed {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 85%;
	heigth: 170px;
	background-color: #ffffff;
	margin: 0;
	margin-top: 10px;
	margin-left: 10%;
	margin-right: 5%;
}
img.instore_logo {
	width: 150px;
}
div.instore_heading {
	display: block;
	width: 95%;
	height: 30px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 0;
	padding-top: 14px;
	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	font-family: arial, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    font-size: 12px;
}
button.back_to_select {
	border: none;
	float: right;
	background-color: #ffffff;
	width: 18px;
	height: 18px;
	padding: 0px;
	margin-top: 15px;
	margin-right: 5%;
	cursor: pointer;
}
button.back_to_select img {
	border: none;
	width: 18px;
}



div.designer_control {
	display: block;
	float: left;
	width: 33%;
	height: auto;
	margin-left: 15%;
	/* border: solid 1px blue; */
}
div.designer_display {
	display: block;
	float: left;
	width: 35%;
	min-width: 100px;
	height: auto;
	padding: 0px;
	/* border: solid 1px red; */
}
div.designer_display_handle {
	display: none;
}
@keyframes text_flash {
    0% {color: #333333;}
    10% {color: #ffffff;}
}
@-webkit-keyframes text_flash {
    0% {color: #333333;}
    10% {color: #ffffff;}
}
div.design_changed {
	animation-name: text_flash;
	animation-duration: 1.8s;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
	-webkit-animation-name: text_flash;
	-webkit-animation-duration: 1.8s;
	-webkit-animation-timing-function: steps(1);
	-webkit-animation-iteration-count: infinite;
	
	font-weight: bold;

}
span.prompt_1 {
	display: inline-block;
	width: 80px;
	margin-right: 10px;
	}
span.prompt_2 {
	display: inline-block;
	width: 80px;
	margin-right: 10px;
	}
span.prompt_3 {
	display: inline-block;
	width: 30px;
	margin-right: 10px;
	margin-top: 7px;
}
input.text_input {
	width: 273px;
	}
input.number_input {
	display: inline-block;
	width: 40px;
	margin-top: 5px;
	margin-right: 20px;
}
select.select_input {
	width: 90px;
	margin-left: 0px;
	margin-top: 5px;
	cursor: pointer;
	}
button.action_button { /* Button */
	margin:0;
	padding-left: 15px;
	padding-right: 15px;
	border: solid 1px #333333;
	color: #333333;
	background-color: #ffffff;
	width: auto;
	height: 32px;
	text-align: center;
	font-size: 16px;
	margin-right: 16px;
	cursor: pointer;
}
button.action_button:focus {outline:0;}

div.separator_line {
	display: block;
	width: 100%;
	height: 10px;
	margin-bottom: 10px;
	border-bottom: solid 1px #666666;
}
div.menu_button {
	display: block;
	float: right;
	width: auto;
	height: 36px;
}
/* Design tool */
div.design_box {
   display: block;
   position: relative;
   padding: 0px;
   left: 0px;
   top: 0px;
   height: 600px; /* Will be set dynamically */
   width: 460px; /* Will be set dynamically */
   background-image: none; /* Will be set dynamically */
   background-size: 300px 300px; /* Will be set dynamically */
   background-repeat: no-repeat;
   background-position: top left;
   }
div.emboss_area {
   position: relative;
   display: block;
   top: 40px;
   left: 40px;
   height: 480px;
   width: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: rgba(0,0,0,0.0);
   overflow: hidden;
}
.gridline {
   border-style: dashed !important;
   border-width: 1px !important;
   border-color: #999999 !important;
}
div.row {
   display: block;
   height: auto;
   width: 100%;
   padding-bottom: 5px;
   border-bottom: solid 1px #cccccc;
}
div.text_row {
   display: block;
   height: auto;
   width: auto;
   margin: 0;
   white-space:nowrap;
}
input.text_entry {
   background: none;
   width: 100%;
   border:none;
   outline: none;
   overflow: hidden;
   white-space:nowrap;
}
/* Placeholder style */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aaaaaa;
    font-size: 20px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #aaaaaa;
    font-size: 20px;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #aaaaaa;
    font-size: 20px;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #aaaaaa;
    font-size: 20px;
}


input.text_entry:focus {
   background: rgba(0,0,0,0.15);
   width: 100%;
   border: solid 0px #999999;
   color: #eeeeee;
}
.font_arial {
	font-family: arial, sans-serif;
 	color: rgba(0,0,0,0.0);
 	text-shadow: 0px 0px 0 rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
 	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(0,0,0,0.15);
 	-moz-text-stroke-width: 1px;
    -moz-text-stroke-color: rgba(0,0,0,0.15);
    font-weight: normal;
	letter-spacing: 0px;
	font-size: 60px;
	text-decoration: none;
	font-style: normal;
	white-space: nowrap;
   }
.font_times {
	font-family: "Times New Roman", serif;
 	color: rgba(0,0,0,0.0);
 	text-shadow: 0px 0px 0 rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
 	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(0,0,0,0.15);
 	-moz-text-stroke-width: 1px;
    -moz-text-stroke-color: rgba(0,0,0,0.15);
    font-weight: normal;
	letter-spacing: 0px;
	font-size: 60px;
	text-decoration: none;
	font-style: normal;
	white-space: nowrap;
}
.font_bodoni {
	font-family: 'Bodoni Antiqua', Garamond, 'Times New Roman', serif;
 	color: rgba(0,0,0,0.15);
 	text-shadow: 1px 1px 0 rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
 	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(0,0,0,0.20);
 	-moz-text-stroke-width: 1px;
    -moz-text-stroke-color: rgba(0,0,0,0.20);
 	text-stroke-width: 1px;
    text-stroke-color: rgba(0,0,0,0.20);
    font-weight: normal;
	letter-spacing: 0px;
	font-size: 60px;
	text-decoration: none;
	font-style: normal;
	white-space: nowrap;
}
.font_bold {
    font-weight: bold;
	}
.font_italic {
    font-style: italic;
	}
.font_white {
 	color: rgba(255,255,255,1.0);
 	text-shadow: 0px 0px 0px rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
	}
.font_black {
 	color: rgba(0,0,0,1.0);
 	text-shadow: 0px 0px 0px rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
	}
.font_gold {
 	color: rgba(255,215,0,1.0);
 	text-shadow: 0px 0px 0px rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
	}
.font_silver {
 	color: rgba(192,192,192,1.0);
 	text-shadow: 0px 0px 0px rgba(0,0,0,0.2),1px 1px 1px rgba(255,255,255,0.25);
	}
/* Gold #FFD700 rgb(255,215,0) */
/* Silver #C0C0C0 rgb(192,192,192) */

/* Info table */
table.info {
   width:100%;
   }
td.info {
	border-bottom: solid 1px #999999;
	width: 25%;
	font-weight: normal;
   }
td.info_value {
	border-bottom: solid 1px #999999;
	width: 25%;
	font-weight: bold;
   }
table.emboss {
   width:100%;
}
td.head {
	border-bottom: solid 1px #999999;
	border-top: solid 1px #999999;
	background-color: #eeeeee;
    color: rgb(30,30,30);
    height: 30px;
}
td.emboss {
   border-bottom: solid 1px #999999;
   color: rgb(30,30,30);
   height: 25px;
}
span.folie {
   color: rgb(30,30,30);
}
span.product_info {
   padding-left: 60px;
}
/* Design controler */
div.prompt_cntrl {
	display: block;
	float: left;
	width: 28%;
	height: auto;
	padding-top: 8px;
	padding-right: 10px;
	text-align: right;
	/* border: solid 1px red; */
   }
div.input_cntrl {
	display: block;
	float: left;
	width: 69%;
	height: auto;
	/* border: solid 1px red; */
}
/* Order inifo */
div.order_info {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	/* border: solid 1px red; */
   }
div.order_btn {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	/* border: solid 1px blue; */
}
button.order_btn { /* Button */
	margin-top: 10px;
	border: solid 1px #333333;
	color: #333333;
	background-color: #ffffff;
	width: auto;
	height: 32px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	padding-left: 15px;
	padding-right: 15px;
}
table.order_info {
   width:80%;
   }
tr.order_info {
	height: 15px;
}
td.order_info_1 {
	width: 75%;
	text-align: left;
   }
td.order_info_2 {
	width: 25%;
	text-align: right;
   }
tr.order_info_line {
	height: 5px;
}
td.order_info_line {
	width: 100%;
	border-bottom: solid 1px #999999;
	margin-top: 5px; 
   }


div.line_sep {
	display: block;
	float: left;
	height: 20px;
	width: 100%;
   }
button.sqr {
	border: solid 1px #cccccc;
	color: #333333;
	background-color: #ffffff;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 13px;
	margin-right: 16px;
	padding: 0px;
	cursor: pointer;
}
button.sqr:focus {outline:0;}
button.rect {
	border: solid 1px #cccccc;
	color: #333333;
	background-color: #ffffff;
	width: auto;
	height: 32px;
	text-align: center;
	font-size: 13px;
	margin-right: 16px;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
}
button.rect:focus {outline:0;}
button.colsqr {
	border: solid 1px #cccccc;
	color: #cccccc;
	background-color: #ffffff;
	width: 28px;
	height: 28px;
	margin-right: 14px;
	padding: 0px;
	cursor: pointer;
}
div.colsqr {
	display: inline-block;
	color: #333333;
	width: 28px;
	height: 18px;
	font-size: 10px;
	font-weight: bold;
	margin-right: 14px;
	padding: 0px;
	cursor: pointer;
}
button.colsqr:focus {outline:0;}
.button_select {
	border: solid 1px #333333 !important;
}
input.cntrl {
	height: 28px;
	width: 208px;
	padding: 1px;
	padding-left: 5px;
	border: solid 1px #333333;
	color: #333333;
}
textarea.cntrl {
	height: 60px;
	width: 208px;
	padding-left: 5px;
	border: solid 1px #333333;
	color: #333333;
}
select.cntrl {
	height: 32px;
	width: 215px;
	padding: 1px;
	padding-left: 5px;
	border: solid 1px #333333;
	color: #333333;
	cursor: pointer;
}
/* SVG */
line.line {
	stroke: #990000;
	stroke-width: 1px;
}
svg.diag {
	width: 100%;
	height: 100%;
}
div.error_msg {
	display: none;
	position: absolute;
	z-index: 10;
	top: 100px;
	left: 100px;
	width: 210px;
	height: 20px;
	background-color: #990000;
	color: #ffffff;
	border: solid 1px #333333;
	padding-top: 5px;
	padding-left: 5px;
}

/* Backoffice */
div.list_area {
	height: 280px;
	width: 100%;
}
div.page_button_area {
	float: right;
}

/* Emboss imgaes */
img.emboss_img {
	position: relative;
	left: -60px;
	max-width: 140px;
	-webkit-filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.5));
	filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.5));
}

/* Logo manipulation */
div.logo_drop {
	float: left;
	width: 210px;
	height: 210px;
	margin-top: 20px;
	margin-left: 20px;
	border: solid 1px #333333;
	border-radius: 8px;
	background-color: #eeeeee;
	color: #333333;
	text-align: center;
	line-height: 210px;
}
/* Logo manipulation */
div.logo_orig {
	float: left;
	width: 210px;
	height: 210px;
	margin-top: 20px;
	margin-left: 20px;
	border: solid 1px #333333;
	border-radius: 8px;
	background-color: #ffffff;
	color: #333333;
	text-align: center;
}
div.logo_orig img {
	padding-top: 10px;
	max-width: 80%;
	max-height: 80%;
}

div.logo_proc {
	float: left;
	width: 210px;
	height: 210px;
	margin-top: 20px;
	margin-left: 20px;
	border: solid 1px #333333;
	border-radius: 8px;
	background-color: #ffffff;
	color: #333333;
	text-align: center;
	/* background-image: url("../local/book_bg.jpg"); */
}
div.logo_proc img {
	padding-top: 10px;
	max-width: 80%;
	max-height: 80%;
	/*
	-webkit-filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
	filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
	*/
}
/* Show logo on product */
div.img_row {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
}
div.img_row>img {
	padding: 0px;
	max-width: 100%;
	max-height: 100%;
}
/* Just for demo */
div.emboss_area {
	overflow: visible;
}
button.logo_mobile img {
    width: 180px;
}
#img_tools {
    position: absolute;
    top: 55px;
    left: 49%;
    height: 50px;
    z-index: 100;
}
#img_tools>button {
	outline: 0;
	border: none;
	width: 20px;
	height: 20px;
	background-color: #eeeeee;
	color: #333333;
	font-size: 12px;
}

div.img_func {
	float: left;
	width: 150px;
	height: 210px;
	margin-top: 20px;
	margin-left: 20px;
	padding: 5px;
	background-color: #ffffff;
}
div.color_sample {
	display: inline-block;
	width: 30px;
	height: 15px;
	border: solid 1px #333333;
}
select.color_select {
	
}
div.img_text {
	position: relative;
	float: left;
	top: -18px;
	left: 0px;
}

/* media specific */
.large_screen_only {}

/* Media queries */
@media screen and (max-width: 1200px){ /* Works for iPad laying with 90% width IFrame */

	div.prompt_cntrl {
	float: none;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	}
	div.input_cntrl {
	float: none;
	width: 100%;
	}
	div.line_sep {
	display: block;
	float: none;
	height: 5px;
	width: 100%;
	}
	.large_screen_only {
	display: none !important;
	}
}

@media screen and (max-width: 900px){ /* iPad standing, and smaller */
	div.designer_control {
	float: none;
	width: 80%;
	height: auto;
	margin-left: 15%;
	}
	div.designer_display {
		position: fixed;
		right: -80%;
		top: -80px;
		width: 80%;
		z-index: 50;
		-webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: all 0.4s ease-in-out;

	}
	div.designer_display_show {
		right: 10%;
	}
	
	div.designer_display_handle {
		display: block;
		position: fixed;
		float: right;
		right: 0;
		top: 140px;
		width: 50px;
		height: 30px;
		z-index: 50;

        border-top: solid 1px #666666;
        border-left: solid 1px #666666;
        border-bottom: solid 1px #666666;
        background-color: #333333;
        padding: 10px;
        cursor: pointer;
	}
	div.designer_display_handle img {
		max-height: 36px;
	}
	div.designer_display_handle div {
		padding-bottom: 4px;
	}

	div.design_box {
	position: static;
	margin-top: 210px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}
	span.product_info {
    padding-left: 0px;
    padding-top: 20px;
    }
}