@page { margin: 0px 0px; }
html {
margin: 0;
padding: 0;
}
body {
position: relative;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", "Trebuchet", Arial, Helvetica, sans-serif;
font-size: 100%; /* !! IMPORTANT FOR TEMPLATING */
}
/* ------------------
NOTE:
the class ".generate" is applied to when the content is meant to be shown in its final state.
this class removes all the field labels, etc.
variations on this class also exist, that change the size of the final output.
------------------ */
/********************************************************************************/
/*************** PRODUCT TEMPLATES ********************/
.prod-tpl {
position: relative;
/* width and height are set by template values */
background: #eee;
border: 1px solid #ddd;
margin: 35px;
padding: 0;
font-size: 200%; /* IMPORTANT: this sets the em-based sizing in all these fields */
cursor: pointer;
float: left;
}
.view-x2 .prod-tpl {
font-size: 400%; /* IMPORTANT: this sets the em-based sizing in all these fields */
}
.generate .prod-tpl {
font-size: 500%; /* IMPORTANT: this sets the em-based sizing in all these fields */
margin: 0 auto;
cursor: inherit;
border: 0;
}
.generate.generate-thumb .prod-tpl {
font-size: 150%;
}
.generate.generate-small .prod-tpl {
font-size: 200%;
}
.generate.generate-medium .prod-tpl {
font-size: 300%;
}
.generate.generate-large .prod-tpl {
font-size: 400%;
}
.generate.display-inline .prod-tpl {
border: 8px solid #fff;
border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
float: none;
margin: 0px auto;
}
.prod-tpl a {
color: inherit;
text-decoration: inherit;
}
#tpl-edit .prod-tpl {
/* THIS div id also engages TinyMCE for editing */
font-size: 580%; /* IMPORTANT: this sets the em-based sizing in all these fields */
cursor: inherit;
}
#tpl-edit.view-x2 .prod-tpl {
font-size: 1160%; /* IMPORTANT: this sets the em-based sizing in all these fields */
}
.prod-tpl input.select-template-item {
position: absolute;
top: -25px;
left: 5px;
}
.prod-tpl .prod-tpl-label {
position: absolute;
top: -28px;
right: -1px;
padding: 8px 20px;
text-align: right;
color: #666;
background: #ddd;
font-size: 12px;
line-height: 12px;
}
.generate .prod-tpl .prod-tpl-label {
display: none;
}
.prod-tpl .prod-tpl-field {
position: absolute;
/* width and height are set by template values */
border: 1px dashed #aaa;
z-index: 100;
}
.generate .prod-tpl .prod-tpl-field {
border: none;
padding: 1px;
}
#tpl-edit .prod-tpl .prod-tpl-field:hover {
border: 1px solid #0C0;
}
.prod-tpl .prod-tpl-field-label {
position: absolute;
bottom: 100%;
right: -1px;
padding: 1px 3px;
text-align: right;
color: #fff;
background: #aaa;
font-size: 8px;
line-height: 8px;
z-index: 200;
}
#tpl-edit .prod-tpl .prod-tpl-field:hover .prod-tpl-field-label {
background: #0C0;
}
.generate .prod-tpl .prod-tpl-field-label {
display: none;
}
.prod-tpl .prod-tpl-field-content-wrapper {
color: #000;
overflow: hidden;
width: 100%;
height: 100%;
/*
font-size: 12.5%;
*/
font-size: 16%;
padding: 0;
margin: 0;
position:relative;
background: url('../imgD/blank_x32.png') top left repeat;
}
.prod-tpl .prod-tpl-field-content {
width: 100%;
height: 100%;
top: 0;
position:relative;
z-index: 100;
}
.prod-tpl img.prod-tpl-bkg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
/*
min-width: 200px;
*/
width: 100%;
height: auto;
}
.generate .prod-tpl img.prod-tpl-bkg {
min-width: 50px;
}
.prod-tpl .prod-tpl-field.field-image {
cursor: pointer;
}
.generate .prod-tpl .prod-tpl-field.field-image {
cursor: inherit;
}
.prod-tpl .prod-tpl-field.field-image img,
.prod-tpl .prod-tpl-field.field-branch-logo img,
.prod-tpl .prod-tpl-field.field-branch-logo-white img,
.prod-tpl .prod-tpl-field.field-branch-logo-black img,
.prod-tpl .prod-tpl-field.field-branch-qr-code img {
height: 100%;
width: auto;
margin: 0px auto;
}
.prod-tpl .prod-tpl-field.field-image img.horiz,
.prod-tpl .prod-tpl-field.field-branch-logo img.horiz {
width: 100%;
height: auto;
margin: 0;
}
.prod-tpl .prod-tpl-field.field-image .field-image-remove {
display: block;
position: absolute;
bottom: -5px;
right: -5px;
background: #d00;
color: #fff;
font-size: 8px;
padding: 2px;
z-index: 5000;
text-decoration: none;
}
/* for images inline in WYSIWYG boxes */
#tpl-edit .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 1.00;
zoom: 100%;
-moz-transform: scale(1);
}
.prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.30;
zoom: 30%;
-moz-transform: scale(0.30);
}
.generate .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.80;
zoom: 80%;
-moz-transform: scale(0.80);
}
.generate.generate-thumb .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.25;
zoom: 25%;
-moz-transform: scale(0.25);
}
.generate.generate-small .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.35;
zoom: 35%;
-moz-transform: scale(0.35);
}
.generate.generate-medium .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.53;
zoom: 53%;
-moz-transform: scale(0.53);
}
.generate.generate-large .prod-tpl .prod-tpl-field.field-body-text img {
zoom: 0.70;
zoom: 70%;
-moz-transform: scale(0.70);
}
.template-side-label {
clear: both;
}
.display-inline .template-side-label {
display: none;
}
/********************************************************************************/
/*************** PRODUCT TEMPLATES : FIELD CONTENT ITEMS ********************/
.prod-tpl img {
border: none;
}
.prod-tpl p {
margin: 0 0 0 0;
}
.prod-tpl ul,
.prod-tpl ol {
margin: 0.3em 0 0.3em 0;
}
.prod-tpl blockquote {
margin: 0 0 0 2.5em;
}