/* CSS Document */
/*-------------------------------
contact form
targets contact forms located within
section tags with an id of 'contact'. 
We put a standard background color in with 
an image and format the h2:h4 headers as well
as the basic p and label tags
-------------------------------*/
section form#contact {
	padding: 15px;
	background: #A1B849; 
}



section form#contact h2 {
	margin: 0px;
	color: #fff;
	font-family: museo-sans, sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size:24px;
	text-decoration: none;
}



section form#contact p {
	font-family: museo-sans, sans-serif;
	color: rgba(255,255,255,.8);
	font-weight: 100;
	font-style: normal;
	margin: 0px 0px 6px 0px;
	font-size: 1em;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}

section form#contact label {
	font-family: museo-sans, sans-serif;
	color: rgba(255,255,255,.8);
	font-weight: 100;
	font-style: normal;
	margin: 0px 0px 6px 0px;
	font-size: 20px;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}

/*-------------------------------
the 'fieldset' tag applies a border around
specific sections of the form and the
'legend' tag is used to name the area
by placing the text within the fieldset
box border.
-------------------------------*/

section form#contact fieldset {
	border: 1px solid rgba(255,255,255,.4);
	margin: 15px 0px 15px 0px;
	padding: 0px 10px 10px 20px;
  border-radius: 5px;
}

section form#contact legend {
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	font-family: museo-sans, sans-serif;
	font-weight: 100;
	font-style: normal;
}

/*-------------------------------
Styles a text area that is suitable
to be used for users to write comments
in of provide other information that
isn't found in a checkbox or radio
button option. Also brightens the
box when it is either clicked into
or you pass over it with a hover so that
you know it's this box you're focused on.
-------------------------------*/


section form#contact textarea {
	font-size: 0.9em;
	padding: 5px;
	border: none;
	color: #7801b2;
	background-color: rgba(255,255,255,0.8);
	width: 100%;
}

section form#contact textarea:hover {
	background-color: #fff;
}

section form#contact textarea:focus {
	background-color: #fff;
}

/*-------------------------------
We want to 'pretend' that the standard
format all web browsers display radio
buttons and checkboxes with doesn't exist
but we at the same time want to use the
build in browser technology that tells us when
we've selected an option, so we hide the
ugly browser depiction and cover it with
our own graphics over the top. Below
will make this option work in Safari, Mozilla/Firefox,
Edge/IE and Oprah
-------------------------------*/

section form#contact input[type=checkbox] {
	width: 20px;
	margin: 0;
	padding: 0;
	opacity: 0;
}



section form#contact input[type=checkbox] + label {
	display: inline-block;
	margin-left: -20px;
	padding: 5px 0px 5px 35px;
	background: url("../images/forms/icons_check_radioB.svg") no-repeat;
	background-size: 35px 80px;
	line-height: 30px;
	
}


/*-------------------------------
All our checkbox graphics are using a
single svg graphic file. This means that
the ticked and unticked checkbox options
and the checked and unchecked round radio
button options are all on the one graphic
strip so... we have to adjust which part
of the graphic is seen by changing the x and
y values to change the placement of the graphic
depending upon which state each of the boxes
or buttons are in as in.. checked/unchecked.
-------------------------------*/

section form#contact input[type=checkbox] + label {
	background-position: 0px 0px;	
}


section form#contact input:checked + label {
	color: #7801b2;
}

section form#contact input[type=checkbox]:checked + label {
	background-position: 0px -36px;
}



section form#contact input#name {
	font-size: 0.9em;
	background: rgba(255,255,255,0.8);
	background-size: 30px 17px;
	padding: 6px 0px 6px 6px;
	margin: 10px 0px 12px 0px;
	border: none;
	color: #7801b2;
	width: 80%;
}

section form#contact input#name:hover {
	background-color: #fff;
}

section form#contact input#name:focus {
	background-color: #fff;
}



/*-------------------------------
Now we style the email input section by adding
a nice graphic of a letter and creating a much
nicer submit/send button
-------------------------------*/

section form#contact input#email {
	font-size: 0.9em;
	background: rgba(255,255,255,0.8) url("../images/forms/icon_email.svg") no-repeat 7px 6px;
	background-size: 30px 17px;
	padding: 6px 0px 6px 47px;
	margin: 0px 0px 12px 0px;
	border: none;
	color: #7801b2;
	width: 80%;
}

section form#contact input#email:hover {
	background-color: #fff;
}

section form#contact input#email:focus {
	background-color: #fff;
}


section form#contact input[type=submit] {
	font-size: 1em;
	color: #fff;
	border: none;
	background-color: #7801b2;
	margin: 10px 0px 5px 0px;
	padding: 10px 25px;
	border-radius: 5px;
	cursor: pointer;
	/* the webkit below is to make the form look the same on IOS (apple) devices, otherwise it will apply a gradient to the submit button*/
	-webkit-appearance: none;
}

section form#contact input[type=submit]:hover {
	color: #c4ff00;
}


@media screen and (max-width: 600px){
	
	section form#contact p {
	font-size: large !important;
}
	
	
}


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

/* Forms */
/* dl stands for data list*/
dl {
  clear: both;
  overflow: hidden;
  margin: 0.5em 0;
}
/*dt stands for data term*/
dt {
  float: left;
  width: 30%;
  font-family: museo-sans, sans-serif;
	color: #fff ;
	font-weight: 300;
	font-style: normal;
	margin: 0px 0px 6px 0px;
	font-size: 20px;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}
/*dd stands for data definition*/
dd {
  float: left;
  width: 65%;
  font-family: museo-sans, sans-serif;
	color: #000 ;
	font-weight: 300;
	font-style: normal;
	margin: 0;
	font-size: 20px;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}

#operations {
  clear: both;
  margin: 1em 0 1em 75px;
}

/*table.list a {
  color:#D30F77;
}*/



/*===========================================
craft caclulator forms
==========================================*/

section form#craft_calc label {
  font-family: museo-sans, sans-serif;
  font-size: 1em;
  font-style: normal;
  display: inline-block;
  width: 60px;  
}

section form#craft_calc input[type="text"] {
  width: 80px;
  font-family: museo-sans, sans-serif;
  font-size: 1em;
  font-style: normal;
}

section form#craft_calc select {
  margin: 1em 0;
  color: rgba(222,231,165,1.00) /*#DEE7A5*/;
  font-family: museo-sans, sans-serif;
  font-size: 1em;
  font-style: normal;
}

section form#craft_calc input[type="submit"] {
  font-size: 1em;
  text-decoration: none;
  color: black;
  display: block;
  background: white;
  margin: 2em 0 2em 25px;
  padding: 6px 12px;
  border: 1px solid black;
}

section form#craft_calc input[type="submit"]:hover {
  color: white;
  background: #FDB912;
}

/*=========================Craft Calculator Forms Testing===
==========================*/
/*-------------------------------
craft_calc_a form
targets contact forms located within
section tags with an id of 'contact'. 
We put a standard background color in with 
an image and format the h2:h4 headers as well
as the basic p and label tags
-------------------------------*/
section form#craft_calc_a {
	padding: 15px;
  background: rgba(31,197,194,1.00);
 /* background: rgba(222,231,165,1.00);*/
 /* background: rgba(194,213,76,1.00);*/
  /*background: rgba(70,10,156,1.00);*/
}



section form#craft_calc_a h2 {
	margin: 0px;
	color: rgba(70,10,156,1.00);
	font-family: museo-sans, sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size:24px;
	text-decoration: none;
}



section form#craft_calc_a p {
	font-family: museo-sans, sans-serif;
	color: rgba(70,10,156,0.80);
	font-weight: 100;
	font-style: normal;
	margin: 0px 0px 6px 0px;
	font-size: 1em;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}

section form#craft_calc_a label {
	font-family: museo-sans, sans-serif;
	color: #fff;
	font-weight: 100;
	font-style: normal;
	margin: 0px 0px 6px 0px;
	font-size: 20px;
	text-align: left;
	line-height: 1;
	text-decoration: none;
}

/*-------------------------------
the 'fieldset' tag applies a border around
specific sections of the form and the
'legend' tag is used to name the area
by placing the text within the fieldset
box border.
-------------------------------*/

section form#craft_calc_a fieldset {
	border: 1px solid rgba(255,255,255,.4);
	margin: 15px 0px 15px 0px;
	padding: 0px 10px 10px 20px;
  border-radius: 5px;
}

section form#craft_calc_a legend {
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	font-family: museo-sans, sans-serif;
	font-weight: 100;
	font-style: normal;
}

/*-------------------------------
Styles a text area that is suitable
to be used for users to write comments
in of provide other information that
isn't found in a checkbox or radio
button option. Also brightens the
box when it is either clicked into
or you pass over it with a hover so that
you know it's this box you're focused on.
-------------------------------*/


section form#craft_calc_a textarea {
	font-size: 0.9em;
	padding: 5px;
	border: none;
	color: rgba(70,10,156,1.00);
	background-color: rgba(255,255,255,0.8);
	width: 100%;
}

section form#craft_calc_a textarea:hover {
	background-color: #fff;
}

section form#craft_calc_a textarea:focus {
	background-color: #fff;
}

/*-------------------------------
We want to 'pretend' that the standard
format all web browsers display radio
buttons and checkboxes with doesn't exist
but we at the same time want to use the
build in browser technology that tells us when
we've selected an option, so we hide the
ugly browser depiction and cover it with
our own graphics over the top. Below
will make this option work in Safari, Mozilla/Firefox,
Edge/IE and Oprah
-------------------------------*/

section form#craft_calc_a input[type=checkbox] {
	width: 20px;
	margin: 0;
	padding: 0;
	opacity: 0;
}



section form#craft_calc_a input[type=checkbox] + label {
	display: inline-block;
	margin-left: -20px;
	padding: 5px 0px 5px 35px;
	background: url("../images/forms/icons_check_radioC.svg") no-repeat;
	background-size: 35px 80px;
	line-height: 30px;
	
}


/*-------------------------------
All our checkbox graphics are using a
single svg graphic file. This means that
the ticked and unticked checkbox options
and the checked and unchecked round radio
button options are all on the one graphic
strip so... we have to adjust which part
of the graphic is seen by changing the x and
y values to change the placement of the graphic
depending upon which state each of the boxes
or buttons are in as in.. checked/unchecked.
-------------------------------*/

section form#craft_calc_a input[type=checkbox] + label {
	background-position: 0px 0px;	
}


section form#craft_calc_a input:checked + label {
	color: rgba(70,10,156,1.00);
}

section form#craft_calc_a input[type=checkbox]:checked + label {
	background-position: 0px -36px;
}



section form#craft_calc_a input#name {
	font-size: 0.9em;
	background: rgba(255,255,255,0.8);
	background-size: 30px 17px;
	padding: 6px 0px 6px 6px;
	margin: 10px 0px 12px 0px;
	border: none;
	color: rgba(70,10,156,1.00);
	width: 80%;
}

section form#craft_calc_a input#name:hover {
	background-color: #fff;
}

section form#craft_calc_a input#name:focus {
	background-color: #fff;
}



/*-------------------------------
Now we style the email input section by adding
a nice graphic of a letter and creating a much
nicer submit/send button
-------------------------------*/

section form#craft_calc_a input#email {
	font-size: 0.9em;
	background: rgba(255,255,255,0.8) url("../images/forms/icon_email.svg") no-repeat 7px 6px;
	background-size: 30px 17px;
	padding: 6px 0px 6px 47px;
	margin: 0px 0px 12px 0px;
	border: none;
	color: rgba(70,10,156,1.00);
	width: 80%;
}

section form#craft_calc_a input#email:hover {
	background-color: #fff;
}

section form#craft_calc_a input#email:focus {
	background-color: #fff;
}


section form#craft_calc_a input[type=submit] {
	font-size: 1em;
	color: #fff;
	border: none;
	background-color: rgba(70,10,156,1.00);
	margin: 10px 0px 5px 0px;
	padding: 10px 25px;
	border-radius: 5px;
	cursor: pointer;
	/* the webkit below is to make the form look the same on IOS (apple) devices, otherwise it will apply a gradient to the submit button*/
	-webkit-appearance: none;
}

section form#craft_calc_a input[type=submit]:hover {
	color: rgba(31,197,194,1.00);
  background-color: rgba(255,255,255,0.80);
}


@media screen and (max-width: 600px){
	
	section form#craft_calc_a p {
	font-size: large !important;
}
	
	
}