/*
 *  FONTS
 *
<link href='http://fonts.googleapis.com/css?family=Muli|Philosopher' rel='stylesheet' type='text/css'>

 *
*/


/*
 *  COLORS
 *  ecoPlus cream:   #ebdad5;
 *  ecoPlus brown:   #9e8d85;
 *	background-color: #30A77F;
	#ebdad5;  //#3.  creamy but of pink in cream
	#c1b1a4;  //#2.  good neutral - most like postcard
	#a89281; //slightly darker brown
	#9e8d85; //slightly grayer
	#009966;  //grean color
	#dbd6d2;	//#1.  great light natural - most like binder board
*/

/*
 *  IMAGES
 *
 background-image: url('../images/bkg_eco_weave.jpg');
 *
*/

/* ======== LAYOUT RULES ======== */
#wrapper {
	background: #ffffff ;
	color: #000000;
	max-width: 1300px;
	width: 75%;
	margin: 20px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
	/*background-color: fuchsia;*/
}

.center {
	text-align: center;
}

/* -------------------------------- 

Grid 

-------------------------------- */


.resources {
  grid-area: resources;
}

.r_samples {
  grid-area: r_samples;	
}


.r_magnify_n {
  grid-area: r_magnify_n;
}

.r_magnify_w {
  grid-area: r_magnify_w;
}

.r_examples {
  grid-area: r_examples;
}

.r_commentary {
  grid-area: r_commentary;
}

.r_ttk_instruct {
  grid-area: r_ttk_instruct;
}

.r_mounting_pages {
  grid-area: r_mounting_pages;
}

.r_fabric_colors {
  grid-area: r_fabric_colors;	 
}


.r_missing_sample {
  grid-area: r_missing_sample; 
}

.r_references {
  grid-area: r_references;
}


.r_acknowledgements {
  grid-area: r_acknowledgements;	 
}

.r_links {
  grid-area: r_links;	
}


.home-help {
	grid-area: home-help;
}

.audio {
	grid-area: audio;
}
	

.resources-wrapper {
	/*IE 11 support*/
	display: -ms-grid;  
	  /* IE repeat syntax */
	-ms-grid-columns: 1% 19% 1% 29% 1% 29% 1% 19% 1%; /* 1fr (300px 1fr)[4] 9 columns total with small space before, between and after 4 big columns*/
	-ms-grid-rows: auto auto auto auto auto auto auto auto; 
	/*-ms-grid-rows: auto 1fr; */

	/*Modern browsers*/		
	display: grid;
    
	grid-template-rows: repeat(8, auto);
	grid-template-columns: 20% 30% 30% 20%;
	grid-template-areas: 
		"resources resources resources resources"
		". r_samples r_mounting_pages ."
		". r_magnify_n r_fabric_colors ."
		". r_magnify_w r_missing_sample ."
		". r_examples r_references ."
		". r_commentary r_acknowledgements ."
		". r_ttk_instruct r_links ."
		"home-help home-help audio audio";

	text-align: left;
	background-color:  #dbd6d2;
	background-image: url("../images/transp_texture_natural-paper.png");

	
}

/* -------------------------------- 

Grid INTERNET EXPLORER 11 SUPPORT

-------------------------------- */


.resources {
	-ms-grid-row:1; 
	-ms-grid-column:2; 
	-ms-grid-column-span:9;
}

.r_samples {
	-ms-grid-row:2; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;	
}


.r_magnify_n {
	-ms-grid-row:3; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;	
}

.r_magnify_w {
	-ms-grid-row:4; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;
}

.r_examples {
	-ms-grid-row:5; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;	
}

.r_commentary {
	-ms-grid-row:6; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;
}

.r_ttk_instruct {
	-ms-grid-row:7; 
	-ms-grid-column:3; 
	-ms-grid-column-span:3;	
}

.r_mounting_pages {
	-ms-grid-row:2; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;	
}

.r_fabric_colors {
	-ms-grid-row:3; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;	
}


.r_missing_sample {
	-ms-grid-row:4; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;	 
}

.r_references {
	-ms-grid-row:5; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;	
}


.r_acknowledgements {
	-ms-grid-row:6; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;
}

.r_links {
	-ms-grid-row:7; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;
}


.home-help {
	-ms-grid-row:8; 
	-ms-grid-column:1; 
}

.audio {
	-ms-grid-row:8; 
	-ms-grid-column:8; 
}

/********************************************/
.box-left {
	-ms-grid-row:2; 
	-ms-grid-column:3;
	-ms-grid-column-span:3;
}

.box-right {
	-ms-grid-row:2; 
	-ms-grid-column:6;
	-ms-grid-column-span:3;
}

/************************/
.box-full {
	-ms-grid-row:2; 
	-ms-grid-column:3;
	-ms-grid-column-span:3;
}

/* -------------------------------- 

  --  END  --  Grid INTERNET EXPLORER SUPPORT

-------------------------------- */


.box {
	/*background-color: #444;*/
	width:100%;
	text-align: left;
	vertical-align: middle;
	align-self: center;
	justify-self: center;
	margin: 5px 5px 5px 5px;

}
/*
.box {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	padding: 20px;
	font-size: 100%;
	width: 90%;
	height: 90%;

}
*/

.home-help {			

	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	/*background-color: gray;*/
	
}


.audio {

	text-align: right;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	/*background-color: gray;*/
	
}

/*For: 
    instructions.php
    fabric_colors.php	
*/
.box-full {
	grid-column: 2/4 ; /* SECOND Column - THIRD Column (col-span 2) */
	grid-row:  2/3 ;  /*TOP ROW:   row line 1 - row line 2*/
	text-align: left;
}

/*For: 
    fabric_colors.php	
*/
.box-left {
	grid-column: 2/3 ; /* SECOND Column - THIRD Column (col-span 2) */
	grid-row:  2/3 ;  /*TOP ROW:   row line 1 - row line 2*/
	text-align: right;
}
.box-right {
	grid-column: 3/4 ; /* SECOND Column - THIRD Column (col-span 2) */
	grid-row:  2/3 ;  /*TOP ROW:   row line 1 - row line 2*/
	text-align: left;
}

/* ======== IMAGE SIZING ======== */
.image img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}


/* ======== BUTTONS ======== */


.button {

	background: #ffffff;
	color: #30A77F;
	text-decoration: none;
	font-weight: bold;
	font-size:2em;
	
	padding: 30px;
	margin:10px;
	

 	height:12rem;
	width: 16rem; 
/*  
	height:1fr;
	width: 1fr;
	height: 100%;
	width: 100%;
	height: auto;
		max-height: 100%;
	min-height: 100%;
	
	display:inline-block;
	display:inline;
	display:block;
		display:table-cell;
		
			max-width: 100%;
	min-width: 100%;
	height: 100%;
	 	height:4rem;  --  rem = root of document, em is based on font of actual thing
	width: 4rem; */
	
	text-align: center;
	vertical-align: middle;
	align-self: center;
	justify-self: center;
	box-sizing: border-box;
	
	display: block;

	line-height:normal;
	text-align:center;
	
	border:  thick #30A77F solid;
	box-shadow: 0 2px 3px #000;
	border-radius: 50px;
}


.button:hover {
	color: #000000;
	background: #efefef;
	border:  thick #000000 solid;

}



/* ================================================================================================================== */

/* ====================== MEDIA QUERIES ===================== */
/* ========================================================== */
/* ====================== PHONE/PORTRAIT ==================== */
/* ==================         PURPLE         ================ */
/* ========================================================== */
@media screen and (max-width: 660px) {

#wrapper {
	background: #ffffff ;
	color: #000000;
	width: 100%;
	margin: 10px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
}
	
.resources-wrapper {
	/*IE 11 support*/
	/*display: -ms-grid; */ 
	  /* IE repeat syntax */
	/*-ms-grid-columns: 1fr (300px 1fr)[4]; /*9 columns total with small space before, between and after 4 big columns*/
	-ms-grid-rows: auto auto auto auto auto auto; */
	/*-ms-grid-rows: auto 1fr; */
    
	grid-template-rows: repeat(16, auto);
	grid-template-columns: 98%;
	grid-template-areas: 
		"resources"
		"r_samples" 
		"r_magnify_n"
		"r_magnify_w" 
		"r_examples" 
		"r_commentary "
		"r_ttk_instruct" 		
		"r_mounting_pages"
		"r_fabric_colors"
		"r_missing_sample"
		"r_references"
		"r_acknowledgements"
		"r_links"
		"home-help"
		"audio";

	text-align: center;
	/*background-color: purple;*/	
}

.title {
	width:100%;
	margin: 1px;
	padding-top: 5px;
	/*background-color: #444;*/
}

.image img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}
		
.box {
	/*background-color: #444;*/
	width:95%;
	text-align: left;
	vertical-align: middle;
	align-self: center;
	justify-self: center;
	margin: 2px 5px;

}

.home-help {			
	text-align: center;
}

.audio {
	text-align: center;
}

/*For: 
    instructions.php
    fabric_colors.php	
*/
.box-full {
	grid-column: 1/2 ; 
	grid-row:  2/3 ;  /*TOP ROW:   row line 1 - row line 2*/
	text-align: left;
}

/*For: 
    fabric_colors.php	
*/
.box-left {
	grid-column: 1/2 ; 
	grid-row:  2/3 ;  
	text-align: center;
}
.box-right {
	grid-column: 1/2 ; 
	grid-row:  3/4 ;  
	text-align: center;
}

}