/*resets the browser settings so that padding and margin is set to 0 which is required to allow the header banner to have no margins on the side***/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

hr {
	color: rgb(228,230,232);
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
  html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height*/
* {
  box-sizing: border-box;
}

/*the asteric is a selector that selects all elements.  So, all "col-" classes are set to float and 15px padding*******/
[class*="col-"] {
  float: left;
  padding: 15px;
}

/* Ariel font and 16px is a standard size for text that works well with all screen sizes. ****************************/
html {
  font-family: "Ariel", sans-serif;
  font-size: 16px;
}

/* text properties for hyperliinks ***********************************************************************************/
/* unvisited link */
a:link {
  color: black;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: black;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: black;
  text-decoration: none;
}

/* selected link */
a:active {
  color: black;
  text-decoration: none;
}

/* text properties for center div hyperliinks ***********************************************************************************/
/* unvisited link */
#centerid a:link {
  color: blue;
  text-decoration: none;
}

/* visited link */
#centerid a:visited {
  color: purple;
  text-decoration: none;
}

/* mouse over link */
#centerid a:hover {
  color: black;
  text-decoration: none;
}

/* selected link */
#centerid a:active {
  color: red;
  text-decoration: none;
}


/* text properties for body div hyperliinks ***********************************************************************************/
/* unvisited link */
#body a:link {
  color: blue;
  text-decoration: none;
}

/* visited link */
#body a:visited {
  color: purple;
  text-decoration: none;
}

/* mouse over link */
#body a:hover {
  color: black;
  text-decoration: underline;
}

/* selected link */
#body a:active {
  color: red;
  text-decoration: underline;
}

/* text properties for body div hyperliinks ************************************************/
#centerid a:link {
  
  color: blue;
  text-decoration: none;
}

/* visited link */
#bodyid a:visited {
  color: purple;
  text-decoration: none;
}

/* mouse over link */
#bodyid a:hover {
  color: black;
  text-decoration: underline;
}

/* selected link */
#centerid a:active {
  color: red;
  text-decoration: underline;
}

/* text properties for footer div hyperliinks ***********************************************************************************/
/* unvisited link */
#footerid a:link {
  color: black;
  text-decoration: none;
}

/* visited link */
#footerid a:visited {
  color: purple;
  text-decoration: none;
}

/* mouse over link */
#footerid a:hover {
  color: black;
  text-decoration: underline;
}

/* selected link */
#footerid a:active {
  color: red;
  text-decoration: underline;
}

#footerid .center {
  margin-left: auto;
  margin-right: auto;
}

/*header-nav-bar settings for graphic buttons at top of the page **************************************************/
.header-nav-bar {
  text-align: center;
  font-size: 16px;
  background-color: rgb(54,63,156);
  padding: 2px;  
}

.header-nav-bar img {
	 transform: translate(0px,1px);
}

.header-nav-bar img:hover {
  transform: translate(0px,2px);
}

.header-nav-bar img:active {
  transform: translate(3px,3px);
}

.header-nav-bar img{width: 20%;}

	
/*header is set 100% so header image will streatch with screen size.**************************************************/
.header img {
    width: 100%;
	
}

.header {
  padding: 0px;
}

/*menu is a class for the list of license links*/
.menu ul {
  
  list-style-type: none;
  margin: 0;
  padding: 15px;
  
}
/*this is a translucent menu to make the colum long enough where the books images do not float to the left under the main menu shown*/

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  background-color: rgb(236,236,236);
}

.menuspacing ul {
  
  list-style-type: none;
  margin: 0;
  padding: 15px;
  background-color: rgb(20,22,20); 
}

.menu li:hover {
background-color: rgb(211,211,211);	
}

.menu li:active {
	transform: translate(3px,3px);
	}
/*
.menu li:nth-child(8n+7) {
  margin-top:40px
}
*/

/*.aside is a class for the text to the right of the page   */

.aside {
  padding: 7px;
  text-align: left;
  font-size: 16px;
 /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
  
}

.asidetop {
  padding: 7px;
  text-align: center;
  font-size: 16px;
}

.asidetop img {
    width: 100%;
	padding:15px;
}

.asidetop img:hover {
	transform: translate(1px,1px);
	}
	
.asidetop img:active {
	transform: translate(3px,3px);
	}
	
.asidetop2 img {
    width: 100%;
	padding:15px;
}
	
/*.center is for the center body of the page*/

.center {
  padding: 15px;
  text-align: left;
  font-size: 16px;
}

.center img {
	 width: 90%;
	 padding:30px
}

/*sets atttrubtes for close spacing and no bullets by making it into a list instead of a paragraph***/
.tightlistnobullets ul {
  
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

.footer {
  text-align: center;
  font-size: 16px;
  background-color: rgb(225,225,225);
  padding: 15px;   
}

.leftmargin {
  float:left;
  width: 10%;
}
.rightmargin {
  float:left;
  width: 10%;
}

.leftfoot {
  float:left;
  width: 39%;
}

.rightfoot {
	float:left;
  width:39%;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
.call {width: 100%;}

.hidemenu {
   display: none;
}

.alwaystwocol{
  float:left;
  width: 50%;
  padding: 0px;
}

.alwaystwocolleft img{
	width: 90%
}

.alwaystwocolleft{
  text-align: center;
  float:left;
  width: 100%;
  padding: 0px;
  
}

.alwaystwocolright{
  float:left;
  width: 100%;
  padding: 0px;
 
}

.alwaystwocol100percent{
  float:left;
  width: 100%;
  padding: 0px;
}

.paypalbutton{
  float:left;
  width: 50%;
  padding: 0px;
  transform: translate(25px,27px);
/*  background-color: rgb(240,240,240);    background-color: rgb(100,100,100)  */
}

.paypalCartButtonProductsPg{
  float:right;
  width: 50%;
  padding: 0px;
  
  display: flex;
    justify-content: flex-end;
	transform: translate(-18px,15px);
	}
	
	.paypalBuyButtonProductsPg{
		
  width: 75%;               /* Keeps it at 75% column width */
  margin: 0 auto;           /* Safely centers it without flexbox squeezing */
  text-align: center;       /* Centers the actual text inside the 75% block */
  
  /* The Magic Fixes */
  min-width: max-content;   /* Prevents the container from shrinking smaller than the words */
  white-space: nowrap;      /* Forces the headline to stay on a single horizontal line */
  min-width: 0;         /* Crucial for flex/grid bug fixes */
    overflow-wrap: break-word; /* Ensures long words don't overflow */
    word-break: break-word;
    white-space: normal;  /* Overrides any 'nowrap' set by PayPal */
	
  }
  
  	
/*  background-color: rgb(240,240,240);    background-color: rgb(100,100,100)  */
}
/*.center is for the center body of the page*/

/*these classes are for the flashdrive sales pages.****************************/



.centerflashsalespage {
  padding: 0px;
  text-align: left;
  font-size: 16px;
  
}

.centerflashsalespage img {
	 width: 100%;
	 padding:00px
	
}

.addtocartbuttonsonsoftwarepages{
  float:left;
  width: 75%;
  padding: 15px;
  margin: 0px;
  
}

.viewcartbuttonsonsoftwarepages{
  
  
  float:right;
  width: 20%;
  padding: 0px;
  margin: 0px;
 
  
}
/*Splits the view cart div into two so i can move it over to the far right of the page***********************/
.viewcartbuttonsonsoftwarepagesleft{
  float:left;
  width: 0%;
  padding: 0px;
  margin: 0px;
 display: none;
 
}

.viewcartbuttonsonsoftwarepagesright{
	
   float:right;
  width: 50%;
  padding: 0px;
  
  display: flex;
    justify-content: flex-end;
	transform: translate(-15px,20px);
	
	text-align: right;
}

.flashdrivegraphic{
  float:left;
  padding:15px;
  width: 100%; 
  height: auto;
  display: none;
  transform: translate(0px,20px);
}

.flashdrivegraphic img {
	width: 100%;
	transform: translate(0px,10px);
}

.paypalsecure{
  float:left;
  width: 100%;
  padding: 0px;
  margin: 0px;
  } 
   
.paypalsecure img{width: 65%;}

/*this section is for tables *********************************************/

table {border-collapse: collapse;
	border-spacing: 2px 2px;
}

th {
	padding: 7px 10px 10px 10px;
	/*border:1px solid black;*/	
}

td {
	padding: 7px 10px 10px 10px;
	/*border:1px solid black;*/	
}

tr.heading {
	background-color: rgb(142,170,219);
}

tr:nth-child(even) {
	background-color: #f2f2f2;
	}
	
.bookcontainer	{
  text-align: left;
  float:left;
  padding:15px;
  width: 100%;
  /*margin: 15px;*/
  
}
	
.books {
  text-align: center;
  float:left;
  padding: 10px;
  width: 50%;
  margin: 0px;
  
}

.books img {
	width:50%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
   .header-nav-bar img {width: 15%;}
   .alwaystwocolleft {width: 33%;}
   .alwaystwocolright {width: 66%;}
  .flashdrivegraphic {display:block;}
   .viewcartbuttonsonsoftwarepagesleft{display:block;}
  .addtocartbuttonsonsoftwarepages {width: 50%;}
  .viewcartbuttonsonsoftwarepages {width: 50%;}
  .viewcartbuttonsonsoftwarepagesright{text-align: right;}
  .paypalCartButtonProductsPg{text-align: right;}
  .books {width: 25%;}
  
  
 /*
  .viewcartbuttonsonsoftwarepagesleft {width: 70%;}
  .viewcartbuttonsonsoftwarepagesright {width: 30%;}
  
  .viewcartbuttonsonsoftwarepagesright {transform: translate(-15px,25px);}*/
  
}
@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .hidemenu-s {display:block;}
  .header-nav-bar img{width: 12%;}
  /*.viewcartbuttonsonsoftwarepagesright{text-align: right;} */
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-family: "Ariel", sans-serif;

}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}