/* Override browser defaults by setting to zero */
* {
    margin: 0;
    padding: 0;
    border: 0; 
    box-sizing: border-box;
}

/* Set some initial values */
html, body, header, p, h1,h2 {
    padding: 0;   
}

p {
    font-family: arial, tahoma, sans-serif;
    color:#444;
    margin: 5px 20px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: times new roman, times, serif;
    color:darkblue;
    margin: 5px 20px;
}

/*To make a bigger gap between the intro text and the select button*/
.intro {
  margin-bottom: 20px;
}

.red {
    color: red;
}


/* the container */
.picture {
 /* background-color: #E2FFFF;*/
  border: 1px solid lightblue;
  border-radius: 4px;    
  display: inline-grid;
  vertical-align: top;
  padding: 10px;
  margin: 20px;
  /* height: 100%; */
  width: 20vw; 
  box-shadow:  8px 8px 4px grey; 
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 100%;
}

/* Used for trouble shooting - change the border from 0px to 1px to see the outline of the classes .item-text and .item-picture */
[class^="item"] {
  border: 0px solid green;
}

/*To stop the text going under the input buttom*/
p.item-text{
  display:flex;
  align-items: flex-start; /*removing this line makes the radio box vertically align center to the text to it's right*/
  margin: 5px;
}
p.item-text input{
  margin-right:.5rem;
  margin-top: .2rem;
}

.item-picture{
  width: 100%; 
  
  
  /*align-self: center;*/
  justify-self: center; 
}

.outOfStock {
  opacity: 0.3;        
}

/* Set style for div class .bigbutton - in the setup.php */
.bigbutton {
  font-family: arial, tahoma, sans-serif;
  margin: 5px 20px;	
  border: 2px red;
  border-radius: 8px; 
  padding: 15px;
  background-color: lightblue;
  border-style: outset;		
  display: block;
  color:red;	
  text-decoration: none; 
  box-shadow: 5px 5px 4px grey;
}