grow-chart-page.css

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

/* GROW CHART V3 CSS */

/* TESTING ONLY - remove for live */
#grc{
	max-width: 1248px;
	margin: 0 auto;
}
/* END TESTING */


#grc{
	color: #4C2276;
	font-family: 'Open Sans', sans-serif;
}

	/*----------------------------
	GENERIC ITEMS
	----------------------------*/
	.grc-hidden{
		display: none;
	}
	
	.grc-button{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-color: #E1E0E6;
		display: inline-block;
		padding: 7px;
		margin: 0 5px;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}
		.grc-button .grc-button-icon{
			height: 1em;
			width: 1em;
			display: inline-block;
			vertical-align: middle;
			margin-right: 0.5em;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}
	
	/*----------------------------
	SPECIFIC
	----------------------------*/
	#grc-input{
		text-align: center;
		margin-bottom: 15px;
	}
	
		/*------------------------
		BUTTONS
		------------------------*/
		/* ADD TO CHART / REMOVE FROM CHART */
		
			/* ADD TO CHART */
			#grc-chart-button{
				background-color: #64A70A;
			}
			#grc-chart-button:hover{
				background-color: #539609;
			}
				#grc-chart-button .grc-button-icon{
					background-image: url('resources/placeholder.png');
				}
			#grc-chart-button::after{
				display: inline-block;
				content: 'Add to chart';
			}
			/* REMOVE FROM CHART */
			#grc-chart-button.in-chart{
				background-color: red;
			}
			#grc-chart-button.in-chart::after{
				display: inline-block;
				content: 'Remove from chart';
			}
		
		/* BUY */
			#grc-buy-button{
				background-color: #F15B29;
			}
			#grc-buy-button:hover{
				background-color: #E04A18;
			}
				#grc-buy-button .grc-button-icon{
					background-image: url('resources/placeholder.png');
				}
		
		/* SEE ARTICLE */
			#grc-article-button{
				background-color: #554744;
			}
			#grc-article-button:hover{
				background-color: #443633;
			}
				#grc-article-button .grc-button-icon{
					background-image: url('resources/placeholder.png');
				}
		
		/* CLEAR CHART */
			#grc-clear-chart{
				display: table;
				background-color: #DDD;
				margin: 10px auto;
				padding: 20px 60px;
				transition: 1s all ease-in-out;
			}
				#grc-clear-chart:hover{
					background-color: #EEE;
				}
				#grc-clear-chart[data-ask-if-sure]{
					background-color: red;
				}
	
	/*------------------------------------------------------
	SLIDER
	------------------------------------------------------*/
	#grc-scroll{
		position: relative;
		width: 100%;
		margin-bottom: 15px;
		overflow: auto;
	}
		/*------------------------
		CONTROLS
		------------------------*/
		#grc-scroll-controls{
			position: absolute;
			z-index: 100;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}
			#grc-scroll-controls > *{
				pointer-events: initial;
			}
			/* buttons */
			.grc-scroll-button{
				position: absolute;
				top: 50%;
				left: 0;
				-ms-transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				width: 10%;
				height: 100%;
				max-height: 100%;
				cursor: pointer;
				background-color: rgba(255,255,255,1);
			}
				/* add the < for the scroll buttons using CSS */
				.grc-scroll-button:after{
					position: absolute;
					content:"";
					width: 20%;
					padding-top: 20%;
					border-left: 5px solid #4C2776;
					border-bottom: 5px solid #4C2776;
					-ms-transform: rotate(45deg); /* IE 9 */
					-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
					transform: rotate(45deg);
					top: 40%;
					transition: 0.1s all ease-in-out;
				}
				#grc-scroll-right{
					right: 0;
					left: initial;
				}
					#grc-scroll-right:after{
						-ms-transform: rotate(225deg); /* IE 9 */
						-webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
						transform: rotate(225deg);
					}
						#grc-scroll-left:hover:after{
							-ms-transform: rotate(45deg) scale(1.1);
							-webkit-transform: rotate(45deg) scale(1.1);
							transform: rotate(45deg) scale(1.1);
						}
						#grc-scroll-right:hover:after{
							-ms-transform: rotate(225deg) scale(1.1);
							-webkit-transform: rotate(225deg) scale(1.1);
							transform: rotate(225deg) scale(1.1);
						}
			/*scrollbar*/
			#grc-scroll-bar{
				display: none; /* hidden for now as a stretch goal */
				position: absolute;
				bottom: 0;
				left: 10%;
				width: 80%;
				height: 10px;
				background-color: #F0EDF4;
				cursor: pointer;
			}
				#grc-scroll-bar-bobbet{
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					height: 10px;
					width: 10px;
					background-color: #582C83;
				}
		/*------------------------
		ELEMENTS
		------------------------*/
		#grc-plant-title{ /* hidden to fit design. Might want to know what plant is being displayed */
			display: none;
		}
		
		#grc-scroll-element-container{
			position: relative;
			top: 0;
			left: 10%;
			width: 80%;
			padding-top: 20%;
			text-align: left;
			margin-bottom: 10px;
			overflow: hidden;
		}
			.grc-scroll-plant{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 20%;
				height: 100%;
				cursor:pointer;
				font-size: 18px;
				-ms-transition: 0.5s left ease-in-out;
				-webkit-transition: 0.5s left ease-in-out;
				transition: 0.5s left ease-in-out;
			}
			.grc-scroll-plant.active,
			.grc-scroll-plant.active .grc-scroll-plant-img{
				background-color: #D8EBCB;
			}
			.grc-scroll-plant:hover,
			.grc-scroll-plant:hover .grc-scroll-plant-img{
				background-color: #D1C9DE;
			}
			.grc-scroll-plant.selected,
			.grc-scroll-plant.selected .grc-scroll-plant-img{
				background-color: #B0A3C6;
			}

				.grc-scroll-plant-img{
					position: absolute;
					top: 0;
					width: 100%;
					height: calc(100% - 1em);
					background-image: url("http://i1.adis.ws/i/wgc/veg000?w=250");
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
					background-blend-mode: multiply;
				}
				.grc-scroll-plant-title{
					font-family: 'Caveat', cursive;
					position: absolute;
					bottom: 0;
					height: 1em;
					padding-bottom: 0.5em;
					font-size: 1em;
					width: 100%;
					text-align: center;
				}
		
	
	/*----------------------------
	PRINT CHART
	----------------------------*/
	#grc-output{
		border-top: 3px solid #E1E0E6;
	}
		#grc-result-title{
			float: left;
		}
		#grc-print{
			float: right;
		}
		#grc-print:not([href=""]){ /* styles when the link is ready */
			background-color: red;
		}
		
		#grc-key{
			width: 100%;
			background-color: #4C2079;
			padding: 10px;
			box-sizing: border-box;
			float: left;
			clear: both;
			margin-bottom: 10px;
			overflow: auto;
			color: white;
		}
		
		
		#grc-table{
			display: block;
			overflow: auto;
			width: 100%;
		}
		#grc-table.grc-empty{
			display: none;
		}
			.grc-row{
				width: 100%;
				overflow: auto;
				margin-bottom: 2px;
			}
				.grc-row .grc-cell{
					position: relative;
					overflow: hidden;
					width: 7.69%;
					min-height: 40px;
					float: left;
					background-color: #EBE8F1;
					text-align: center;
				}
				.grc-row .grc-cell:nth-of-type(even){
					background-color: #D1C9DE;
				}
					/* CHART SYMBOLS */
					.grc-row .grc-icon{
						padding-top: 20px;
						width: 30%;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						float: left;
						margin: 10px 2.5% 0 2.5%;
					}
					.grc-row .grc-icon-count-1{
						float: none;
						margin: 10px auto 0;
					}
					.grc-row .grc-icon-count-2{
						width: 45%;
					}
					.grc-row .grc-icon-count-3{
						width: 27%;
					}
					/* the grc-icon-count-x is automatically generated, so it could go up to grc-icon-count-102 etc */
					
					
					.grc-row .grc-icon.grc-symbol-NO{ /* an empty chart symbol */
					}
					.grc-row .grc-icon.grc-symbol-SI{ /* sow indoors */
						background-image: url(resources/placeholder.png);
					}
					.grc-row .grc-icon.grc-symbol-SC{ /* sow under cloche */
						background-image: url(resources/placeholder.png);
					}
					.grc-row .grc-icon.grc-symbol-SO{ /* sow outdoors */
						background-image: url(resources/placeholder.png);
					}
					.grc-row .grc-icon.grc-symbol-PI{ /* plant indoors */
						background-image: url(resources/placeholder.png);
					}
					.grc-row .grc-icon.grc-symbol-PO{ /* plant outdoors */
						background-image: url(resources/placeholder.png);
					}
					.grc-row .grc-icon.grc-symbol-HR{ /* harvest */
						background-image: url(resources/placeholder.png);
					}
				
				/* HEADER SPECIFIC */
				#grc-top-row .grc-cell:before{
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					ms-transform: translateX(-50%)translateY(-50%);
					webkit-transform: translateX(-50%)translateY(-50%);
					transform: translateX(-50%)translateY(-50%);
				}
/*-----------------------
MEDIA QUERIES 
-----------------------*/
@media (min-width: 601px){
	#grc-top-row .grc-cell:nth-of-type(2):before{content:"Jan";}
	#grc-top-row .grc-cell:nth-of-type(3):before{content:"Feb";}
	#grc-top-row .grc-cell:nth-of-type(4):before{content:"Mar";}
	#grc-top-row .grc-cell:nth-of-type(5):before{content:"Apr";}
	#grc-top-row .grc-cell:nth-of-type(6):before{content:"May";}
	#grc-top-row .grc-cell:nth-of-type(7):before{content:"Jun";}
	#grc-top-row .grc-cell:nth-of-type(8):before{content:"Jul";}
	#grc-top-row .grc-cell:nth-of-type(9):before{content:"Aug";}
	#grc-top-row .grc-cell:nth-of-type(10):before{content:"Sep";}
	#grc-top-row .grc-cell:nth-of-type(11):before{content:"Oct";}
	#grc-top-row .grc-cell:nth-of-type(12):before{content:"Nov";}
	#grc-top-row .grc-cell:nth-of-type(13):before{content:"Dec";}
}
@media (max-width: 600px){
	#grc-top-row .grc-cell:nth-of-type(2):before{content:"J";}
	#grc-top-row .grc-cell:nth-of-type(3):before{content:"F";}
	#grc-top-row .grc-cell:nth-of-type(4):before{content:"M";}
	#grc-top-row .grc-cell:nth-of-type(5):before{content:"A";}
	#grc-top-row .grc-cell:nth-of-type(6):before{content:"M";}
	#grc-top-row .grc-cell:nth-of-type(7):before{content:"J";}
	#grc-top-row .grc-cell:nth-of-type(8):before{content:"J";}
	#grc-top-row .grc-cell:nth-of-type(9):before{content:"A";}
	#grc-top-row .grc-cell:nth-of-type(10):before{content:"S";}
	#grc-top-row .grc-cell:nth-of-type(11):before{content:"O";}
	#grc-top-row .grc-cell:nth-of-type(12):before{content:"N";}
	#grc-top-row .grc-cell:nth-of-type(13):before{content:"D";}
}

@media(max-width: 748px){
	#grc-scroll-element-container{
		padding-top: 60%;
	}
		.grc-scroll-plant{
			width: 50%;
		}
}