/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
    margin: 0;
    padding: 0;
}

html {
   width: 100%;
   height: 100%;
}

body {
	background: #212121;
	color: black;
	word-wrap:break-word !important;
   font-family: 'Open Sans', sans-serif;
   background: url("/common/bicycle-pattern_12percent_sepia.jpg") repeat fixed center;
   /* background: url("/common/3920_25percent_50light.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; */
   width: 100%;
   height: 100%;
	}

article {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

main{
   flex-grow: 1;
}



a {
	color: black;
}

h1 {
	font-size:24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
	}

p {
	text-align: left;
}

nav {

	background-color:#212121;
}

nav ul {
	padding: 0;
   margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #212121;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:18px;
	line-height: 35px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 35px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:125px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-35px; 
	left:125px;
}

	
/* Change this in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }


.logo {
    padding: 5px;
    border: 3px solid black;
    color:black;
    background: repeating-radial-gradient(
      circle,
      lightblue,
      lightblue 10px,
      skyblue 10px,
      skyblue 20px
    );
}

.logo a {
    color:black;
    text-decoration: none;
    font-weight: bold;
    font-size:24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.intro {
    margin: 30px 15px;
    overflow: auto;
    padding: 0 10px;
    padding-bottom: 10px;
    background-color: rgba(245, 222, 179, 0.97);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}
 
.intro h1 {
    margin-top: 15px;
    margin-bottom: 5px;
}
 
.intro hr {
   margin-bottom: 15px;
}
 
.intro p {
    line-height: 1.5;
}




 .product-cards {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 330px));
    /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); */
  }

  .product-card {
     display: inline-block;
     background-color: rgba(245, 222, 179, 0.95);
     padding: 15px;
     margin: 10px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     border-radius: 5px;
  }
  
  .product-card a {
     color: black;
     text-decoration: none;
  }
  
  .product-card h2 {
     margin: 30px 0 15px;
  }
  
  .product-card p {
     line-height: 1.5;
  }
  


.product-card img {
  width: 100%;
}
  
  .short-description {
     color: black;
  }
  
  .categorization {
     color: black;
     font-family: monospace;
  }        

  .javascriptdisabled p {
     padding-left: 10px;
     background-color: #212121;
	  color:#FFF;
	  font-size:18px;
  }

  .javascriptdisabled a {
     background-color: #212121;
	  color:orangered;
	  font-size:18px;
  }


footer {
   background: rgba(245, 222, 179, 0.8);
}

footer p {
  padding: 0 10px;
}

header, main, footer {
   flex-shrink: 0;
}


.accordion > input[type="checkbox"] {
   position: absolute;
   left: -100vw;
 }
 
 .accordion .content {
   overflow-y: hidden;
   height: 0;
   transition: height 0.3s ease;
 }
 
 .accordion > input[type="checkbox"]:checked ~ .content {
   height: auto;
   overflow: visible;
 }
 

 





 .accordion {
   margin: 30px 15px;
   overflow: auto;
   padding: 0 10px;
   background-color: rgba(245, 222, 179, 0.97);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px;  
 }
 
 .accordion p {
   line-height: 1.5;
}

 .accordion > input[type="checkbox"]:checked ~ .content {
   padding: 0px;
 }
 
 .accordion .handle {
   margin: 0;

 }
 
 .accordion label {
   cursor: pointer;
 }
 

 
 .accordion .handle label:before {
   content: "[+]";
   display: inline-block;
   margin-right: 10px;
}
 
 .accordion > input[type="checkbox"]:checked ~ .handle label:before {
   content: "[–]";
 }
 














/* ================================================================================= */
/* Whatever's in here is specific to when the screen orientation is Portrait */
@media only screen and (orientation: portrait){
 
   .logo {
      padding-bottom: 10px;
   }

   .logo a {
      font-size:16px;
   }

   nav a {
      font-size:14px;
      padding:0 5px;
   }

}


/* =========================================================================================== */
/* Whatever's in here is specific to devices that are NOT touchscreen (ex: mouse is available) */
@media (hover:hover) {
   /* Primary Input responds to hover fully, such as a mouse or a Nintendo Wii controller */

  .product-card:hover {
    background-color: rgba(210, 180, 140, 0.95);
  }

  .accordion .handle label:hover,
  .accordion .handle label:focus {
    background-color: rgba(210, 180, 140, 0.97);
  }

}



/* ================================================================================= */
/* Whatever's in here is specific to when printing the page (to printer , PDF, etc.) */
@media only print {
   nav {
      display: none;
   }
}