* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.itemcontainer { display: inline-block; }
.item {
  position: relative;
  margin: 10px;
  box-shadow: 5px 5px 8px 0px #cccccc; border: 2px solid #888888;
  overflow: hidden;
  width: 170px;
  height: 220px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(5);
  -webkit-transform: scale(5);
  transform: scale(5);
}

#graphcontent {
	/* min-width: 650px;
	max-width: 800px; */
}

#graphheader {
	font: bold 20px verdana, arial, helvetica, sans-serif;
	font-variant: small-caps;
	text-shadow: #AAA 3px 3px 2px;
	text-align: center;
}

/* thumbnail image and caption on the right side */
#thumbnail {
}

#thumbnail p {
	font: 30px 'Roboto Condensed', sans-serif;
}

#graphform {
		font-family: 'Raleway', sans-serif;
		border: 1px solid #aaaaaa;
		border-radius: 40px;
		padding: 10px;
		margin-top: 60px;
		margin-bottom: 60px;
		max-width: 680px;
		background-color: #f4f4f4;
}

#graphform form {
}

#download-pdf {
	margin-left: 25%;
	box-shadow: 3px 6px 8px rgba(0, 0, 0, .2);
	width: 50%;
	padding-left: 10px;
	padding-right: 10px;
	font-family: 'Raleway', sans-serif;
	padding: 0px;
	color: #000;
	background:#FF0; height: 40px; font-size: 24px; font-weight: bold; 
        border-radius: 5px; border: 2px outset buttonface;
}

#imagepreview {
	box-shadow: 3px 6px 8px rgba(0, 0, 0, .2);
}

input[type=text] {
	width: 50px;
	padding: 3px 6px;
	font: 18px 'Roboto Condensed', sans-serif;
	border: 1px solid #aaaaaa;
	border-radius: 4px;
	margin: 3px 0;
	box-sizing: border-box;
	color: #000;
}

input[type=button], input[type=submit], input[type=reset] {
	font: bold 28px 'Roboto Condensed', sans-serif;
/*    background-color: #;*/
	border-radius: 12px;
	border: 3px solid #2196F3;
    color: #2196F3;
    padding: 12px 18px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

.colorhex {
	width: auto;
	font: 13px 'Roboto Condensed', sans-serif;
	background-color: #f4f4f4;
	border: 1px solid #aaa;
	color: #555555;
	width: auto;
}


select {
    width: 150px;
    padding: 6px 6px;
	font: 18px 'Roboto Condensed', sans-serif;
    margin: 3px 0;
    box-sizing: border-box;
}

.pdfhilite {
	padding: 10px 0px 10px 0px;
	text-align: center;
	clear: left;
}

h2 {
font: 30px 'Roboto Condensed', sans-serif;
	padding: 5px;
}

.paper-promo {
	font: 20px 'Roboto Condensed', sans-serif;
}

.pdfline {
	display: flex;
	align-items: flex-start;
	padding: 0px;
}


form div {
	margin-bottom: 0px; 
}


.pdflabel {
	font: 18px 'Raleway Bold', sans-serif;
	float: left;
	width: 30%;
	clear: left;
	text-align: right;
	padding-top: 10px;
}

.pdfform {
	font: 14px 'Raleway', sans-serif;
	float: left;
	width: 70%;
	padding: 0px 0px 0px 16px
}

.swatch {
	width: 65px;
	float: left;
}

.swatchbox {
	width: 60px;
	height: 60px;
	border: none;
	cursor: pointer;
	cursor: hand;
}

.swatchlabel {
/*	text-align: center
*/
}

.swatchlabel input {
	display: inline;
	/*font: 14px 'Raleway', sans-serif;*/
	margin-top: 3px;
	width: auto;
	color: #808080;
}

#gridswatch {
	width: 60px;
	height: 50px;
	padding: 0px;
}

#mgridswatch {
	width: 60px;
	height: 50px;
	padding: 0px;
}

#sgridswatch {
	width: 60px;
	height: 50px;
	padding: 0px;
}


.suboption {
	display: flex;
	align-items: baseline;
}

.subitem {
	text-align: right;
	width: 20%;
	padding-right: 5px;
}

#size_custom {
	visibility: hidden;

}

/* Used for inch<->cm buttons */
.unitsButton {
	background-color: #fff;
	border: 1px solid #000;
	padding: 4px;
	font-family: 'Raleway', sans-serif;
	font: 14px;
	color: #c00;
	cursor: pointer;
}

.unitsButton:hover {
	color: #C00;
	background-color: #F99;
}

/* Used for basic color picking buttons */
.colorButton {
	display: inline;
	text-decoration:none;
	background-color:#fff;
	border:1px solid #ccc; 
	font-family:"Arial", "sans serif";
	font-weight:bold;
	font-size:3px;
	padding: 10px;
	margin: 2px;
	cursor: pointer;
}

.colorButton:hover {
	color: #C00; background-color: #F99;
}

.colorButton.Black {
	color: #000;
	background:#000;
}

.colorButton.Grey {
	color: #B3B3B3;
	background: #B3B3B3;
}

.colorButton.Ltblue {
	color: #B3B3FF;
	background: #B3B3FF;
}

.colorButton.Red {
	color: #B30000;
	background: #B30000;
}

.colorButton.Cream {
	color: #FFF4DE;
	background: #FFF4DE;
}

.colorButton.Green {
	color: #00B300;
	background: #00B300;
}

.colorButton.Blue {
	color: #0000B3;
	background: #0000B3;
}


.plainButton {
	text-decoration:none;
	background-color:#fff;
	border:1px solid #888;
	padding: 4px;
	font-family:"Arial", "sans serif";
	font-weight:bold;
	font-size:14px;
	color:#000;
	margin: 2px;
	cursor: pointer;
}

.plainButton:hover {
	color: #C00; background-color: #F99;
}


.container {
    display: block;
    position: relative;
    padding-left: 95px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #888;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}