@charset "UTF-8";
/*TO CHANGE THE THEME COLOR OF THIS STYLE SHEET, SCROLL DOWN TO :ROOT ON LINE 53 AND CHANGE THE VARIABLE COLORS*/
/*-------------------------------------------------------------
FONT DEFINITIONS*/
@font-face {
font-family: 'nauman-extrabold';
src: url('../fonts/nauman-extrabold-webfont.woff2') format('woff2'),
url('../fonts/nauman-extrabold-webfont.woff') format('woff'),
url('../fonts/nauman-extrabold-webfont.ttf') format('truetype'),
url('../fonts/nauman-extrabold-webfont.svg#naumanextrabold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'nauman-italic';
src: url('../fonts/nauman-italic-webfont.woff2') format('woff2'),
url('../fonts/nauman-italic-webfont.woff') format('woff'),
url('../fonts/nauman-italic-webfont.ttf') format('truetype'),
url('../fonts/nauman-italic-webfont.svg#naumanitalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'nauman-medium';
src: url('../fonts/nauman-medium-webfont.woff2') format('woff2'),
url('../fonts/nauman-medium-webfont.woff') format('woff'),
url('../fonts/nauman-medium-webfont.ttf') format('truetype'),
url('../fonts/nauman-medium-webfont.svg#naumanmedium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'nauman-regular';
src: url('../fonts/nauman-regular-webfont.woff2') format('woff2'),
url('../fonts/nauman-regular-webfont.woff') format('woff'),
url('../fonts/nauman-regular-webfont.ttf') format('truetype'),
url('../fonts/nauman-regular-webfont.svg#naumanregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'nauman-bold';
src: url('../fonts/nauman-bold-webfont.woff2') format('woff2'),
url('../fonts/nauman-bold-webfont.woff') format('woff'),
url('../fonts/nauman-bold-webfont.ttf') format('truetype'),
url('../fonts/nauman-bold-webfont.svg#naumanbold') format('svg');
font-weight: bold;
font-style: normal;
}
/* END FONT VALUES ---------------------------------------------------*/
/*------------------------------------------------------------
GENERAL CSS DEFINITIONS
these generally apply my styles to normal html tags*/
html {/*prevents mobile safari and android from resizing text*/
-webkit-text-size-adjust: none;
-android-text-size-adjust: none;
}
:root{ /*HERE WE DEFINE COLORS AND IMAGES FOR THE WHOLE PAGE*/
--background-color: #03003E;
--main-color: #2E3191;
--headline-color: #F00;
--h1-color:#FFF;
--body-font-color: #000;
--background-image: url("../images/moon-shot-background.jpg");
--hero-image: url("../images/moon-shot-hero.png");
}
/*/////////////////////////////////////////////////////////////////////*/
body {/*applies my styles to the standard tag*/
background-color: var(--background-color)!important;
background-image:none; /*on iphone, there's no image here, but on desktop and tablet media queries, there is a background image*/
vertical-align: 0%;
margin: 0px;
padding: 0px;
color: var(--headline-color);
}
.background{ /* if you want to replace the slideshow background with a static image, this is what to use */
background-image: var(--background-image);
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
margin: 0px;
display: block;
padding-top: 0px;
padding-bottom: 0px;
float: left;
position: fixed;
top: 0px;
left: 0px;
}
.hero-image {/* this div is the static, non-scrolling background image that runs behind the entire page*/
width: 100vw;
height: 100vh;
background-size: cover;
background-position:center;
background-repeat:no-repeat;
position: fixed;
z-index:-2;
}
.line {/*defines the style of all horizontal rules
*/
width: 99%;
height: 2px;
border-color: #D3D3D3;
border-width: 0;
background-color: #D3D3D3;
margin-bottom: 2px;
margin-top: 7px;
}
.top {/*enclosed in top anchor, forces iOS7 to handle top anchor correctly*/
height: 1px;
width: 100%;
}
h1 {
font-family: nauman-extrabold;
line-height:1;
font-size: 29px;
font-weight: normal;
text-align:center;
text-transform: lowercase;
color: var(--h1-color);
margin:0px;
}
h2 {
font-family: nauman-extrabold;
line-height:1;
font-size: 29px;
font-weight: normal;
text-align:center;
text-transform: lowercase;
color: var(--h1-color);
margin:0px;
}
h3 {
font-family: nauman-extrabold;
font-weight: normal;
font-size: 21px;
color: var(--headline-color);
margin-bottom: 0px;
margin-left: 5px;
margin-right: 45px;
margin-top: 4px;
padding: 0px;
line-height: 1.4;
}
h4 {
font-family: nauman-medium;
font-weight: normal;
font-size: 15px;
text-transform: lowercase;
color: var(--headline-color);
margin-top: 0px;
margin-right: 40px;
margin-bottom: 4px;
margin-left: 5px;
line-height: 1.0;
}
h5 {
font-family: nauman-extrabold;
font-weight: normal;
font-size: 21px;
text-transform: lowercase;
color: var(--headline-color);
margin-bottom: 0px;
margin-left: 0px;
margin-right: 45px;
margin-top: 4px;
padding: 0px;
line-height: 1.1;
}
h6 {
font-family: nauman-extrabold;
font-weight: normal;
font-size: 21px;
text-transform: lowercase;
text-align:left;
color: #FFF;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 15px;
margin-top: 4px;
padding: 0px;
line-height: 1.1;
}
ol, ul, li{
font-family:nauman-medium;
font-size:1.05em;
color: #000;
margin: 10px;
}
p {
font-family:nauman-medium;
font-size:1.1em !important;
color: #000;
margin: 10px;
}
.notransform{
text-transform: none;
}
.emphasis {
font-family:nauman-bold;
color: var(--headline-color);
}
/*Table of contents styles ///////////////*/
.section{
border: var(--headline-color) 2px solid;
border-radius: 6px;
background-color: var(--headline-color);
margin:3px;
}
.sec-title{
font-family:nauman-bold;
background-color:#fff;
color:var(--headline-color);
font-size:1.2em;
margin:0px 0px 0px 38px;
padding:3px 8px 3px 10px;
border-radius: 0px 4px 4px 0px;
min-height:1.6em;
line-height:1.4em;
}
.sec-number{
font-family:nauman-bold;
color:#fff;
font-size:1.5em;
line-height:1.2em;
text-align:center;
width:36px;
float:left;
}
.contents-container{
height:auto;
}
.contents-listing{
font-family:nauman-medium;
font-size:1.1em;
color:#000;
background-image:url("../images/bug-right.svg");
background-size:30px;
background-position: right 0px;
background-repeat:no-repeat;
margin:5px 5px 10px 0px;
padding-right:35px;
display:flex;
}
.contents-location{
font-family: nauman-medium;
height:1.9em;
color:rgba(135, 135, 135, 0.6);
float:left;
margin:0px 0px 3px 12px;
text-align:left;
}
.contents-item{
font-size:1.0em;
color:#000;
text-align:left;
width:auto;
height:1.6em;
margin:0px 12px 3px 0px;
}
/*end table of contents styles*/
.anchor{
background-color:var(--headline-color);
font-family:nauman-bold;
color:#fff;
font-size:01em;
line-height:2.3em;
width: 2.3em;
border-radius: 20px;
text-align:center;
margin:20px 0px 20px 0px;
border: solid #fff 2px;
}
/* MODAL FOR ADDING SITE TO HOME SCREEN -----------------------------------------------------*/
.modal {
position: fixed; /* Stay in place */
top: 0;
left: 0;
bottom:0;
right:0;
box-sizing:border-box;
z-index: 99; /* Sit on top */
padding: 15px 15px 15px 15px;
width: 100%; /* Full width */
height: 100%; /* Full height */
display:none;
overflow:hidden;
-webkit-overflow-scrolling:touch;
outline:0
}
.modal.fade .modal-dialog{
\r-webkit-transition:-webkit-transform
.3s ease-out;
-o-transition:-o-transform
.3s ease-out;
transition:transform
.3s ease-out;
-webkit-transform:translate(0,-25%);
-ms-transform:translate(0,-25%);
-o-transform:translate(0,-25%);
transform:translate(0,-25%)
}
.modal.in .modal-dialog{
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0)
}
.modal-open .modal{
overflow-x:hidden;
overflow-y:auto
}
/*The modal content*/
.modal-content{
position:relative;
background-color: rgba(35, 31, 32, 0.8);
-webkit-background-clip:padding-box;
background-clip:padding-box;
border: 3px solid #FFF;
border-radius:12px;
margin:auto;
padding: 20px 20px 20px 15px;
box-sizing:border-box;
outline:0;
width: 100%;
height: 100%;
overflow-y:auto;
-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
box-shadow:0 3px 9px rgba(0,0,0,.5)
}
.modal-backdrop{
display:none;
/* this is supposed to grey out the background to focus the modaL, but for some reason, it sits on top of everything else, blacking out the screen and covering any links so you can't click them, so we're making it display:none*/
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
background-color:#000;
}
.modal-backdrop.fade{
filter:alpha(opacity=0);
opacity:0
}
.modal-backdrop.in{
filter:alpha(opacity=50);
opacity:.5
}
.modal-open{
overflow:hidden
}
/* The Close Button */
button {
background-color:transparent;
border:none;
cursor:pointer;
z-index:4;
}
.close {
color: #fff;
float: right;
position:fixed;
top:20px;
right:0px;
margin: 0px 10px 0px 0px;
font-size: 45px;
line-height: 0.6;
font-weight: bold;
z-index:4;
opacity:0.5;
}
.icon-and-intro {/*holds app icon and intro text*/
min-height:160px
}
.icon-image{
margin: 5px 15px 10px 5px;
border-radius: 20px;
width:120px;
height:120px;
background-image:url("../icons/vbs-icon-120px.png");
background-size: cover;
background-repeat:no-repeat;
float:left;
}
p.modalh2 {
font-family:nauman-extrabold;
color: #fff;
background-color:transparent;
border: none;
font-size:1.5em;
line-height:1.1em;
text-transform: none;
margin-bottom: 0px;
margin-top:10px;
text-indent:0;
}
img.share-icons{
content:url(../images/share-icons.svg);
width:100%;
}
p.modaldirections {
font-family:nauman-extrabold;
color: #fff;
background-color:transparent;
border: none;
font-size:1.2em;
background-image: url(../images/info.svg);
background-size: 47px;
text-transform: none;
margin:0px 15px 0px 0px;
padding:0px 13px 0px 8px;
text-insent:0;
}
p.modalp {
background-color:transparent;
border: none;
color:#fff;
font-size:16px;
margin-bottom:0px;
padding-bottom: 0px;
padding-left:13px;
text-indent:0px;
}
p.modalshare {
font-family:nauman-regular;
font-size:16px;
background-color:transparent;
border: none;
color:#fff;
margin: 0px 0px 0px 8px;
padding: 8px 0px 0px 38px;
text-indent:0px;
position: relative;
}
p.modalbullet {
font-family:nauman-regular;
font-size:16px;
background-color:transparent;
border: none;
color:#fff;
margin: 0px 0px 0px 8px;
padding: 8px 0px 0px 38px;
text-indent:0px;
position: relative;
}
p.modalbullet:before{
content:"• ";
font-family:nauman-extrabold;
padding-left:0px;
position:absolute;
left:10px;
}
/*END My MODAL STYLES-------------*/
@media (min-width:768px){/*landscape tablets*/
.modal-dialog{
width:600px;
margin:30px auto
}
.modal-content{
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5)
}
.modal-sm{
width:300px}
}
@media (min-width:992px){/*desktops & laptops*/
.modal-lg{
width:900px
}
}
/*End Bootstrap's Modal Styles /////////////////////////*/
.seriesdivider{
background-color: rgba(135, 135, 135, 1);
border-radius:20px;
font-family: Antique-Olive-Bold;
font-size: 22px;
font-weight: normal;
text-align:center;
text-transform: none;
margin-right:5px;
margin-top:25px;
color: #FFF;}
.noindent {/*removes margins and indents from other tags*/
margin-left: 0px;
margin-bottom: 0px;
}
.bullet {
display: list-item;
list-style-type: disc;
list-style-position:outside;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 135%;
}
.bulletfirst {
display: list-item;
list-style-type: disc;
list-style-position:outside;
margin-left: 20px;
margin-top: 8px;
margin-bottom: 0px;
line-height: 135%;
}
.spacebefore {
margin-left: 0px;
margin-top: 5px;
}
.intro {/*Introductory text*/
font-family: nauman-medium;
font-weight: normal;
font-size: 14px;
text-transform: none;
text-align:center;
color: rgba(135, 135, 135, 1);
padding-bottom: 5px;
margin-left: 8px;
margin-right: 8px;
margin-top: -10px;
line-height: 1.3;
}
/*LINK STYLES---------------------------------------------------
applies my styles to all links in their regular, visited, hover, and clicked states. Generally, we won't want these to change.*/
a:link {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
a:active {
color: inherit;
text-decoration: none;
}
/*END LINK STYLES
------------------------------------------------------------*/
/*THIS SECTION DEFINES THE ATTRIBUTES OF THE MAIN CONTENT DIV (changing the width of this div will change the width of all the elements on our html pages)*/
#content {
width:100%;
position: absolute;
right: 0px;
margin:0px;
padding-top: 4px;
padding-left: 2.5%;
padding-right: 2.5%;
padding-bottom: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*END CONTENT DIV----------------------------------------------*/
/*CROSSFADE STYLES CAN BE PULLED FROM LIFE*/
.crossfade > figure {/*THIS IS THE CROSS-FADING SLIDESHOW. FULL DEFINITION IS EARLIER IN DOCUMENT*/
width: 40%;
min-height: 50px;
background-size: 50vw;
background-repeat: no-repeat;
background-position:center center;
margin-bottom: 15px;
display: block;
padding-top: 0px;
padding-bottom: 0px;
float: left;
position: fixed;
top: 0px;
left: 0px;
}
/*---------------------------------------------------------
LOGO and HEADER STYLES*/
.logo-and-headline {
height: 90vh;
position:relative;
cursor:pointer;
}
.header-container {/*contains .headerbox, .headerbox-placeholder, and .headerbox-splash. The width and left-right padding should match the #content div*/
width: 100%;
height: 100vh;
position: inline;
right: 0px;
margin-top: 0px;
margin-bottom: 0px;
display: block;
visibility:visible;
padding-top: 0px;
padding-left: 2.5%;
padding-right: 2.5%;
padding-bottom: 0px;
float: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: var(--hero-image);
background-size:100% auto;
background-position:center 150px;
background-repeat:no-repeat;
overflow:hidden;
}
.logodiv {/*contains the TruthQuest logo*/
height: 110px;
width: 100%;
text-align: center;
cursor: pointer;
background-image:url(../images/truthquestheaderlogo.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-top: 5px;
margin-bottom: -90px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.headline-and-borders {
width:100%;
height: auto;
margin-top:15px;
box-sizing:border-box;
display: none;/*this setting causes the logo to begin invisible so it can fade in on page load*/
}
.left-border{
height: 40px;
width: 13%;
border: solid #fff 3px;
border-radius:8px 0px 0px 0px;
border-right:none;
border-bottom:none;
box-sizing:border-box;
float:left;
}
.right-border{
height: 40px;
width: 13%;
border: solid #fff 3px;
border-radius:0px 8px 0px 0px;
border-left:none;
border-bottom:none;
box-sizing:border-box;
float:right;
}
.headerdiv {/*contains the page headline*/
cursor: pointer;
text-align: center;
width: 100%;
position: relative;
margin-top: 0px;
padding:40px 5px 10px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid #fff 3px;
border-radius:8px 8px 8px 8px;
border-top: none;
}
/*---------------------------------------------------------
END LOGO HEADER STYLES*/
/*----------------------------------------------------------
IMAGE CLASS DIVS*/
.right-bug {/*the right-pointing arrow on the right part of its enclosing div*/
position: absolute;
height:42px;/*change this to alter the bug size*/
width: 42px;/*change this to alter the bug size*/
top: 1px;
right: 0px;
border: none;
background-image: url(../images/bug-right.svg);
background-size: contain;
background-position: right;
background-repeat: no-repeat;
}
.image-catalog {/*the full-width image that runs along the entire bottom of its enclosing div*/
height: auto;
max-width: 100%;/*this allows the image to scale based on device*/
border: none;
margin-top: 5px;
margin-bottom: -4px;
}
.image-craft-snack {/*designed for craft and snack images in vbs pages*/
max-width: 100%;
}
.image-float {
max-width: 28%;
float: right;
margin-left: 10px;
margin-bottom: 5px;
}
/*--------------------------------------------------------------
HTML CONTENT CLASSES
all information and images on the website will be contained in the following div classes*/
.sectionbox {/*box with white border for section titles*/
height: auto;
width: auto;
background-color: var(--main-color);
-moz-border-radius: 8px;
border-radius: 8px;
border: solid #FFF 3px;
padding: 4px 5px 12px 5px;
margin-bottom: 20px;
text-align:center;
display:block;
box-sizing:border-box;
}
.sectionbox-transparent {/*box with white border for section titles*/
height: auto;
width: auto;
background-color: transparent;
-moz-border-radius: 8px;
border-radius: 8px;
border: solid #FFF 3px;
padding: 4px 5px 12px 5px;
margin-bottom: 20px;
text-align:center;
display:block;
box-sizing:border-box;
}
.container-round {/*provides the rounded corner effect. Other divs which contain content can be enclosed in this div*/
width:100%;
overflow: hidden;
background-color: #FFF;
position: relative;
-moz-border-radius: 8px 8px 8px 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-color: #FFF;
border-width: 3px;
border-style: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 0px;
padding-bottom: 4px;
margin-bottom: 18px;
}
.contentbox {/*this class:----------------------------------
1. is always enclosed in in a .container-round div
2. is used for containing any text or images displayed on the site
3. can also be used with the collapsible panel script. To do so, you must:
A. Give the div an id like "cp-1" so the script can address it
B. Enclose the .expandable-panel-heading, .expandable-panel-content, and items inside this div*/
background-color: #FFF;
overflow: hidden;
width: 100%;
min-height: 48px;
-moz-border-radius: 6px;
border-radius: 6px;
position: relative;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 0px;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0px;
}
/* -----------------------------------
COLLAPSIBLE PANEL CLASSES ----------*/
.expandable-panel-heading {/*the header which gives a clue about what the expandable panel contains*/
width:100%;
cursor:pointer;
min-height:43px;
clear:both;
background-color:#FFF;
position:relative;
padding-right: 0px;
padding-left: 0px;
padding-top: 1px;
padding-bottom: 0px;
-moz-border-radius: 6px 6px 6px 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.expandable-panel-heading:active {
color:#666;
}
.expandable-panel-content { /*the div which contains the content*/
background-color: #FFF;
padding:0 8px 0 8px;
margin-top:-3500px;
font-family: Antique-Olive;
font-weight: normal;
font-size: 15px;
line-height: 1.3;
color: rgba (175,175,175,1);
-moz-border-radius: 0px 0px 6px 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.expandable-panel-content p {
background-color: #FFF;
padding:2px 0 3px 0;
font-family: Antique-Olive;
font-weight: normal;
font-size: 15px;
line-height: 1.3;
color: rgba(135, 135, 135, 1);
}
.regularp {
background-color: #FFF;
padding:2px 0 3px 0;
font-family: Antique-Olive;
font-weight: normal;
font-size: 15px;
line-height: 1.3;
color: rgba(135, 135, 135, 1);
}
.expandable-panel-content p:first-child {
padding-top:5px;
}
.expandable-panel-content p:last-child {
padding-bottom:4px;
}
.icon-close-open {/*the up/down arrow bug*/
position: absolute;
height:42px;/*change this to alter the bug size*/
width: 42px;/*change this to alter the bug size*/
top: 5px;
right: 0px;
border: none;
background-image:url(../images/bug-down.svg);
background-size: contain;
background-position: right;
background-repeat: no-repeat;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform: rotate(0deg);
}
/*----------------------------------------------------------
END COLLAPSIBLE PANEL DEFINITIONS*/
.bottom-container {/*the footer and occasional product actions live in this container*/
width: 100%;
height: auto;
padding-left: 2.5%;
padding-right: 2.5%;
position: fixed;
bottom: 0px;
right: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index:1;
}
/*---------------------------------------------------------
TRANSLUCENT FLOATING CONTAINER*/
.product-actions {
width:100%;
height: 100px;
overflow: hidden;
position: relative;
bottom: -40px;
background: rgba(35, 31, 32, 0.6);
-moz-border-radius: 8px 8px 0x 0px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-color: #FFF;
border-width: 3px;
border-style: solid;
border-bottom-width: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 2px;
padding-bottom: 4px;
}
/*--------------------------------------------------------
PRODUCT ACTIONS CLASSES
These three classes define the 1/3 column options available for products, including the option to print a pdf sample, the option to do a 30-day trial, and the option to buy*/
.sample {/*the "print sample" div*/
width: 33%;
height: 58px;
-moz-border-radius: 0px 0px 0px 6px;
border-radius: 0px 0px 0px 6px;
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px rgba(185, 185, 185, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(185, 185, 185, 1),
1px -1px 0 rgba(185, 185, 185, 1),
-1px 1px 0 rgba(185, 185, 185, 1),
1px 1px 0 rgba(185, 185, 185, 1);
text-align: center;
position: relative;
background-image: url(../images/bug-sample.png);
background-repeat: no-repeat;
background-position: center;
line-height: 1.7;
float: left;
}
.sample-white {/*the "print sample" div*/
width: 33%;
height: 55px;/*change this to alter the bug size*/
-moz-border-radius: 0px 0px 0px 6px;
border-radius: 0px 0px 0px 6px;
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px rgba(185, 185, 185, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(185, 185, 185, 1),
1px -1px 0 rgba(185, 185, 185, 1),
-1px 1px 0 rgba(185, 185, 185, 1),
1px 1px 0 rgba(185, 185, 185, 1);
text-align: center;
position: relative;
background-image: url(../images/bug-sample-white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
float: left;
line-height: 1.7;
}
.trial {/*the "free trial" div*/
width: 49%;
height: 94px;
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px rgba(185, 185, 185, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(185, 185, 185, 1),
1px -1px 0 rgba(185, 185, 185, 1),
-1px 1px 0 rgba(185, 185, 185, 1),
1px 1px 0 rgba(185, 185, 185, 1);
text-align: center;
position: relative;
background-image: url(../images/bug-freetrial.svg);
background-repeat: no-repeat;
background-position: center;
background-size:contain;
float: left;
line-height: 1.7;
border-right-style:solid;
border-right-width:2px;
border-right-color:rgba(185,185,185,1);
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.trial-white {/*the "free trial" div*/
width: 34%;
height: 55px;/*change this to alter the bug size*/
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px rgba(185, 185, 185, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(185, 185, 185, 1),
1px -1px 0 rgba(185, 185, 185, 1),
-1px 1px 0 rgba(185, 185, 185, 1),
1px 1px 0 rgba(185, 185, 185, 1);
text-align: center;
position: relative;
background-image: url(../images/bug-freetrial-white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
float: left;
line-height: 1.7;
}
.buy {/*the "buy it" div*/
width: 50%;
height: 94px;
-moz-border-radius: 0px 0px 6px 0px;
border-radius: 0px 0px 6px 0px;
font-family: Antique-Olive-Bold;
font-size: 45px;
font-weight: normal;
webkit-text-stroke: 1px rgba(180, 180, 180, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(180, 180, 180, 1),
1px -1px 0 rgba(180, 180, 180, 1),
-1px 1px 0 rgba(180, 180, 180, 1),
1px 1px 0 rgba(180, 180, 180, 1);
text-align: center;
color: #FFF;
position: relative;
background-image: url(../images/bug-buyit.svg);
background-repeat: no-repeat;
background-position: center;
background-size:contain;
float: left;
line-height: 1.6;
display: block;
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.buy-white {/*the "buy it" div*/
width: 33%;
height: 55px;/*change this to alter the bug size*/
-moz-border-radius: 0px 0px 6px 0px;
border-radius: 0px 0px 6px 0px;
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px #FFF;
color: #666;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
text-align: center;
position: relative;
background-image: url(../images/bug-buyit-white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
float: left;
display: block;
line-height: 1.7;
}
.go-to-trial {/*the "buy it" div*/
width: 50%;
height: 94px;
-moz-border-radius: 0px 0px 6px 0px;
border-radius: 0px 0px 6px 0px;
font-family: Antique-Olive-Bold;
font-size: 45px;
font-weight: normal;
webkit-text-stroke: 1px rgba(180, 180, 180, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(180, 180, 180, 1),
1px -1px 0 rgba(180, 180, 180, 1),
-1px 1px 0 rgba(180, 180, 180, 1),
1px 1px 0 rgba(180, 180, 180, 1);
text-align: center;
color: #FFF;
position: relative;
background-image: url(../images/bug-go-to-trial.svg);
background-repeat: no-repeat;
background-position: center;
background-size:contain;
float: left;
line-height: 1.6;
display: block;
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
sup {/*for the superscript dollar sign*/
font-family: Antique-Olive-Bold;
font-weight: normal;
font-size: 13px;
line-height: 0;
color: #666;
webkit-text-stroke: 1px #FFF;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
}
.eyeit {/*appears on "Free VBS Trial" pages*/
width: 49%;
height: 94px;
font-family: Antique-Olive-Bold;
font-size: 25px;
font-weight: normal;
webkit-text-stroke: 1px rgba(185, 185, 185, 1);
color: white;
text-shadow:
-1px -1px 0 rgba(185, 185, 185, 1),
1px -1px 0 rgba(185, 185, 185, 1),
-1px 1px 0 rgba(185, 185, 185, 1),
1px 1px 0 rgba(185, 185, 185, 1);
text-align: center;
position: relative;
background-image: url(../images/bug-eyeit.svg);
background-repeat: no-repeat;
background-position: center;
background-size:contain;
float: left;
line-height: 1.7;
border-right-style:solid;
border-right-width:2px;
border-right-color:rgba(185,185,185,1);
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*END DEFINITIONS FOR PRODUCT ACTION DIVS
------------------------------------------------------------------*/
/*-------------------------------------------------------------
DIVLINK CLASSES
these classes cause an entire div to behave as a link when is applied in the html*/
.divlink {/*defines the normal divlink*/
position: relative;
width: 100%;
height:100%;
top: 0px;
right: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
/* edit: added z-index */
z-index: 0;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url(../images/empty.png);
background-repeat: repeat;
display: block;
}
.divlink: link {/*defines what color the div will become when clicked*/
color: rgba(0, 0, 0, 0.1);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
height: 100%;
width: 100%;
}
/*END DIVLINK CLASSES
-----------------------------------------------------------------*/
/*-------------------------------------------------------------
BOTTOM OF PAGE SPACEHOLDER*/
.spaceholder {
width: 100%;
height: 48px;
}
/*---------------------------------------------------------------
HIGHLIGHT DEFINITIONS
these define div highlight colors when clicked in a desktop browser. There should be a definition here for every class of div that will be clickable. These do not affect mobile browsers.
*/
.contentbox:active {
background-color: #CCC;
}
.expandable-panel-heading:active {
background-color: #CCC;
}
.sample:active {
background-color: #CCC;
}
.trial:active {
background-color: #CCC;
}
.buy:active {
background-color: #CCC;
}
.pricediv:active {
background-color: #CCC;
}
.sample-white:active {
background-color: #CCC;
}
.trial-white:active {
background-color: #CCC;
}
.buy-white:active {
background-color: #CCC;
}
.pricediv:active {
background-color: #CCC;
}
/*END HIGHLIGHT DEFINITIONS*/
/*-----------------------------------------------------------
BEGIN TABLE CLASSES*/
.table-standard {/*for standard tables*/
background-color:#FFFFFF;
width: 100%;
font-family:nauman-medium;
}
.table-standard td {/*for standard tables*/
padding: 3px;
vertical-align: top;
}
.table-bible-versions {/*for bible version tables*/
background-color:#FFFFFF;
width: 100%;
}
.table-bible-versions td {/*for bible version tables*/
padding-top: 8px;
padding-bottom: 4px;
padding-left: 3px;
padding-right: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
}
.data {/*for standard tables*/
font-family: Antique-Olive;
font-size: 15px;
color: rgba(135, 135, 135, 1);
text-align: left;
vertical-align: top;
}
.data-bible {/*for bible version tables*/
font-family: nauman-bold;
font-size: 19px;
color: #FFF;
background-color: rgba(180, 180, 180, 1);
text-align: center;
}
.toprow {
font-family: nauman-bold;
font-size: 15px;
color: #FFF;
text-align: center;
background-color: var(--main-color);;
}
.toprow-bible {
font-family: nauman-bold;
font-size: 19px;
color: #FFF;
text-align: center;
background-color: var(--main-color);
}
.colorrow {
font-family: nauman-regular;
text-align: left;
background-color: #DBDBDB;
vertical-align: top;
}
.leftcol {
font-family: nauman-bold;
font-size: 15px;
color: var(--headline-color);;
text-align: left;
width: 30%;
vertical-align: top;
}
.spacer {
width: 100%;
height: 8px;
}
/*-------------------------------------------------------------
BEGIN FOOTER*/
.footer {
background: rgba(35, 31, 32, 0.6);
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
width: 100%;
height: 40px;/*changing this automatically changes icon sizes*/
overflow: hidden;
padding-top: 4px;
padding-bottom: 2px;
position: relative;
bottom: 0px;
text-align:center;
display: block;
border-top-width: 3px;
border-bottom-width: 0px;
border-left-width: 3px;
border-right-width: 3px;
border-top-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: none;
border-left-color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col1 {
width: 25%;
height: 100%;
position: relative;
float: left;
background-image:url(../images/bug-left.svg);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.col2 {
width: 25%;
height: 100%;
position: relative;
float: left;
background-image:url(../images/bug-top.svg);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.col3 {
width: 25%;
height: 100%;
position: relative;
float: left;
background-image:url(../images/bug-home.svg);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.col4 {
width: 25%;
height: 100%;
position: relative;
float: left;
background-image:url(../images/bug-print.svg);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.footer-spacer {
background: rgba(35, 31, 32, 0.6);
width: 100%;
height: 10px;/*changing this automatically changes icon sizes*/
display: block;
border-color:#fff;
border-style:solid;
border-width: 0px 3px 0px 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-device-width: 320px) and (orientation: portrait) {
/*for iphone 5 and earlier in portait orientation*/
h1 {
font-size: 22px!important;
margin-top: 3px!important;
}
}
@media screen and (min-width: 768px) and (max-width: 950px) and (orientation: portrait) {
/*for ipads & tablets in portait orientation*/
#content {
padding-top: 6px;
}
body{
background-image: var(--background-image);
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
/*everything up-sized by 150%*/
h1 {
font-size: 44px!important;
}
h2 {/*applies my styles to the standard tag*/
font-size: 32px;
}
h3 {/*applies my styles to the standard tag*/
font-size: 27px;
}
h4, p {/*applies my styles to all these tags*/
font-size: 20px;
}
h5 {/*applies my styles to the standard tag*/
font-size: 32px;
}
h6 {/*applies my styles to the standard tag*/
font-size: 32px;
}
.intro {
font-size: 22px;
}
/*begin LOGO and HEADER STUFF*/
.header-container {
background-position: center 175px;
}
.logodiv {
height: 132px;
margin-top: 5px;
}
.left-border{
width:28%;
}
.right-border{
width:28%;
}
/*end logo and header*/
.line {/*defines the style of all horizontal rules
*/
margin-bottom: 3px;
margin-top: 10px;
}
.right-bug {/*the right-pointing arrow on the right part of its enclosing div*/
height:63px;/*change this to alter the bug size*/
width: 63px;/*change this to alter the bug size*/
top: 2px;
}
.image-catalog {/*the full-width image that runs along the entire bottom of its enclosing div*/
margin-bottom: -6px;
}
.sectionbox {/*box with white border for section titles*/
height: 55px;
margin-bottom: 23px;
}
.container-round {/*provides the rounded corner effect. Other divs which contain content can be enclosed in this div*/
padding-bottom: 6px;
margin-bottom: 25px;
}
.contentbox {
min-height: 75px;
}
.sectionbox-transparent {/*box with white border for section titles*/
height: 60px;
}
.expandable-panel-content {
font-size: 23px;
padding:0 12px 0 12px;
margin-top:-3500px; /*this value sets the collapsible panel 3000 pixels above the div in which it appears */
}
.expandable-panel-content p {
padding:3px 0 5px 0;
font-size: 23px;
margin-top: -1200; /*not sure why this works, but as of 10-2016, it does. */
}
.expandable-panel-heading {
min-height:75px;
}
.icon-close-open {
width:63px;
height:63px;
top: 5px;
}
.product-actions {
height: 132px;
padding-top: 3px;
padding-bottom: 6px;
}
.sample-white {/*the "print sample" div*/
height: 83px;/*change this to alter the bug size*/
font-size: 38px;
}
.trial-white {/*the "print sample" div*/
height: 83px;/*change this to alter the bug size*/
font-size: 38px;
}
.buy-white {/*the "print sample" div*/
height: 83px;/*change this to alter the bug size*/
font-size: 38px;
}
sup {/*for the superscript dollar sign*/
font-size: 20px;
}
.spaceholder {
height: 75px;
}
.data {/*for standard tables*/
font-size: 23px;
}
.data-bible {/*for bible version tables*/
font-size: 29px;
}
.toprow {
font-size: 23px;
}
.toprow-bible {
font-size: 30px;
}
.leftcol {
font-family: Antique-Olive;
font-size: 23px;
}
}
@media (min-width: 768px) /*and (max-width: 1024px)*/ and (orientation: landscape){
/* @media screen and (min-device-width: 768px) and (orientation: landscape) {
/*for ipads in landscape orientation, and for desktop browsers*/
#content {
width:60%;
margin-top: 42px;
}
body{
background-image: var(--background-image);
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
.logo-and-headline {/*THIS CONTAINS THE LIFE LOGO AND HEADLINES WITH SERVICE TIMES */
height: 90vh;
float: left;
position: fixed;
bottom: 10px;
}
.header-container {/*contains .headerbox, .headerbox-placeholder, and .headerbox-splash. The width and left-right padding should match the #content div*/
width: 40%;
height: 100vh;
margin-bottom: 15px;
display: block;
padding-top: 28px;
padding-bottom: 0px;
float: left;
position: fixed;
top: 0px;
left: 0px;
background-position: center 150px;
}
.headerbox {/*box with white border*/
min-height: 515px;
}
.splash-spacer {
display:none;
}
.collapse-arrow {
visibility:hidden;
}
.logohead-container {/*contains logo, boxbreaks, logodiv, and headerdiv*/
width: 35%;
min-height: 53px;
position: fixed;
top: 25px;
margin-top:20px;
}
.logodiv {/*contains the TruthQuest logo*/
height: 118px;
margin-top:-25px;
}
.left-border{
width:13%;
}
.right-border{
width:13%;
}
.center-border{
width:100%;
height:60px;
}
.bottom-container {
width: 40%;
float: left;
left: 0px;
}
.contentbox {
min-height: 48px;
}
.modal{
display:none !important;
}
.modal-backdrop.in{
display:none;
}
.expandable-panel-heading {
min-height:48px;
}
.expandable-panel-content {
margin-top:-3000px;
}
.product-actions {
height: 100px;
}
#footer {
height: 40px;/*changing this automatically changes icon sizes*/
}
.icon-close-open {/*the up/down arrow bug*/
width:42px;/*change this to alter the bug size*/
height:42px;/*change this to alter the bug size*/
position:absolute;
background-image:url(../images/bug-down.svg);
background-repeat: no-repeat;
background-size: cover;
right:0px;
top: 5px;
}
}
@media print {
@page {
size: auto;
margin: 0mm;
}
@page :footer {
display: none
}
@page :header {
display: none
}
body {
padding-top: 72px;
padding-bottom: 72px ;
background-color:#fff;
}
.bottom-container {
display:none !important;
}
}