/*
  ***************************
  * S T A N D A R D   C S S 
  ****************************
 */


/* null margins and padding to give good cross-browser baseline */
/* i removed ul from this list */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,li,ol,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
	text-decoration:none;
	font-family: pp-sans-big-regular,Helvetica Neue,Arial,sans-serif;
    font-variant:  normal;
    font-weight: 400;
}


img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

ul {
    list-style: round;
}


label {
	cursor:pointer;
}

html, body {
	background-color: #000000;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5 "open sans",sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	border: 0.188em solid #ffffff;
	border-radius: 1.62em; 
	margin: 1.25em;
	padding: 1.25em;
	min-height: 100vh;
}

a {
    text-decoration: none;
    color: #ffffff;
}


/* =================   All custom css goes under here =======================*/


.greenthumb {
    color: #278e15; /* bright green */
}

.mission,
.motto {
    color: #278e15; /* bright green */
}


/* for green background */

.regsym {
    color: #000000; 
    font-size: small;
    vertical-align: super;
}


/* for black background */

.regsym_light {
    color: #1dbf4e; /* lighter green */
    font-size: small;
    vertical-align: super;
}

.mailer img {
    height: 1.5em;
    width: 1.5em;
    vertical-align: top;
}

.light {
    color: #ffffff;
}

.light a {
    color: #32d32c;
}

fieldset {
    padding-bottom: 2em;
}

legend {
    margin-bottom: 2em;
}

header {
    display: flex;
}

.logo_wrapper {
    width: 50%;
    height: 5em;
}

.logo {
    display: block;
    border: 0;
}

.gbtex img {
    position: absolute;
    height: 70px;
    width: 70px;
    right: 0;
    margin-right: 3em;
}


.nodots {
    list-style: none;
}

.tinytxt {
    font-size: 0.625em;
}

.sm_txt {
    font-size: small;
}

.inside {
    list-style-position: inside;
}

.text_border {
   border: 2px solid #ffffff;
   width: fit-content;
   text-align: center;
   padding: 0.625em;
}

.tiny_notes {
    font-size: small;
}

.heavy {
    font-weight: bold;
}


.intro_text {
    display: inline-block;
    
}

img.codeimg {
    height: 20%;
    width: 20%;
    border: none;
    float: left;
    margin-right: 2em;
}


/*
  *********************
  * M A I N   M E N U  
  *********************
 */
 

label[for="toggle_mainMenu"] {
    display:none;
}

/* the check box will be left side above nav bar hidden */
input#toggle_mainMenu {
    display: none;
    position: absolute;
} 
 
.main_menu {
    position: relative;
    margin-bottom: 2em;
    background-color: #278e15; /* bright green */
}
 
.sameline {
    display: flex;
    padding: 0.625em;
    width: 80%;
    margin: auto;
}

.main_menu_item {
    margin-left: auto;
}

li.main_menu_item {
    display: block;
    width: 10%;
    text-align: center;
}

li.main_menu_item a:hover {
    font-style: italic;
    font-weight: bold;
}

.current {
    font-style: italic;
    font-weight: bold;
    color: #000000; 
}



/*
  *******************
  *  C O N T E N T  
  *******************
 */

.content_wrapper {
    display: block;
    height: fit-content;
    margin: 1em;
    margin-bottom: 3em;
}

.content_wrapper ul li {
    margin-bottom: 1em;
    list-style-type: disc;
}



/*
 *****************
 * P R O D U C T S
 *****************
 */


.product_wrapper  {
    display: flex;
    min-height: 19em;
    border: 0;
    padding: 1em 2em 1em 1em;
    margin-bottom: 1em;
    background-color: #1b7b09; /* med dark green */
    border-radius: 0.625em;
}

.left_side {
    flex-grow: 2;
}


.left_side,
.right_side {
    padding: 1.25em;
}


.product_button_wrapper {
    display: flex;
    float: right;
    margin-right: 3em;
    width: 10em;
    text-align: center;
    text-decoration: none;
}

.product_button_wrapper span {
    display: block;
}


label.sm_txt {
    display: inline;
    white-space: nowrap;
}

input#pp_submit {
    cursor: not-allowed;
    opacity: 0.20;
}

div.samples,
p.instr {
    display: block;
    max-width: 90%;  /* almost all half page */
}

div.samples img {
    margin-right: 0.625em;
}


/*
  ****************
  * F O O T E R  
  ****************
 */
 
 
 .trustlogo {
     margin-top: 1em;
 }
 

.validated {
    display: block;
    position: relative;
}

.validated p{
    float: right;
    margin-right: 2em;
    font-size: small;
    color: #ffffff;
}
 
footer {
    display: block;
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    height: 6em;
    max-height: 6em;
    font-size: small;
    text-align: center;
    padding-top: 2em;
    margin-top: auto;
}



/*
  *********************
  * M O B I L E  C S S   
  *********************
 */
 
 
@media(max-width:55em) {
    html, body {
        width: 97%;
    }
    body {
        margin: 1em;
    }
    .logo {
    height: 70%;
    width: 70%;
    }
    .gbtex img {
    position: absolute;
    height: 35px;
    width: 35px;
    }
    .validated {
        margin-top: 0.75em;
    }
    .main_menu {
        display: none;
    }
    .sameline {
        display: block;
    }
    #toggle_mainMenu:checked ~ .main_menu {
		display: block;
		width: 10%;
		text-align: left;
		background-color: #000000;
	}
	#toggle_mainMenu:checked ~ .main_menu a{
	    display: block;
        border: 0;
        margin: 0;
	}
	label[for=toggle_mainMenu] {
	   display:block;
       cursor:pointer;
       margin-left: 9em;
	   font-size: 2em;
	   top: 4em;
	   color: #ffffff;
    }
    .current  {
        color: #278e15; /* bright green */
    }
    pre.light {
        font-size: 0.425em;
    }
    .product_wrapper {
        flex-direction: column;
    }
    div.samples img {
        height: 75%;
        width: 75%;
    }
    .left_side,
    .right_side {
    display: flex;
    flex-grow: unset;
    flex-direction: column;
    }
    .instr{
        font-size: small;
    }
    
}/* close media */