/* This is the main styling for each repeated 
 * element on the site.
 */

*
{
	padding: 0;
	margin: 0;
}

body
{
	font-family: Arial, Helvetica, sans-serif;
}

.main_input
{
	width: 220px;
	height: 22px;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid rgba(233, 23, 23, 0.6);
	margin-bottom: 10px;
	font-size: 16px;
}

.main_input:focus
{
	outline: none;
	box-shadow: 1px 1px 1px 1px rgba(244, 24, 24, 0.3);
	background: rgba(233, 233, 21, 0.2);
}

.my_main_button
{
	width: 75px;
	height: 30px;
	border-radius: 4px;
	border: 1px solid rgba(233, 23, 23, 0.7);
	background: #747579;
	color: white;
	text-shadow: -1px 1px -1px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.my_main_button:hover
{
	background: rgba(50, 50, 50, 0.6);
}

.my_main_button:active
{
	background: rgba(80, 80, 80, 0.5);
	color: red;
}

.my_main_button:disabled
{
	background: rgba(100, 100, 100, 0.6);
	color: black;
}

.error_banner
{
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid rgba(244, 21, 21, 0.5);
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 500px;
	position: absolute;
	top: 0;
	left: 400px;
	color: red;
	font-size: 20px;
	z-index: 1000;
	margin-top: 270px;
	
}

.error_close, .complete_close
{
	float: right;
	padding-right: 5px;
}

.error_close:hover, .complete_close:hover
{
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
	cursor: pointer;
}

.error_errors, .complete_messages
{
	text-align: center;
	padding: 5px;
	margin-top: 5px;
}

.error_errors
{
	color: red;
}

.complete_messages
{
	color: green;
}

.complete_banner
{
	background: rgba(23, 233, 23, 0.9);
	border: 2px solid rgba(21, 244, 21, 0.5);
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 500px;
	position: absolute;
	top: 0;
	margin-top: 270px;
	left: 400px;
	color: black;
	font-size: 20px;
	z-index: 1000;
}

.myfit_bold
{
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	color: #465EAB;
	letter-spacing: -0.5px;
	font-weight: bold;
}

.error
{
	color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	float: right;
	width: 250px;
	padding: 5px;
}

.complete
{
	color: green;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	position: absolute;
	padding: 5px;
}

.main_label
{
	font-size: 16px;
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	padding-right: 5px;
	padding-left: 5px;
}

textarea
{
	width: 230px;
	height: 70px;
	resize: none;
	outline: none;
	border: 1px solid rgba(233, 23, 23, 0.5);
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	font-size: 16px;
	margin-top: 10px;
}

textarea:focus
{
	outline: none;
	box-shadow: 1px 1px 1px 1px rgba(233, 23, 23, 0.4);
}

label
{
	margin-right: 10px;
	font-weight: bold;
	font-family: "Fjalla One", Arial, Helvetica, sans-serif;
}

select
{
	background: #747579;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: white;
}

/* quick tips styling */

#my_tips
{
	position: relative;
	float: right;
	margin-right: 15px;
	margin-top: 10px;
	border: 2px solid #747579;
	background: rgba(233, 23, 23, 0.9);
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: white;
	padding: 5px;
	cursor: pointer;
}

#my_tips:hover
{
	background: #FACA10;
	color: #747579;
}

.tip_box
{
	background: rgba(233, 233, 175, 0.9);
	position: absolute;
	border: 1px solid black;
	padding: 5px;
	margin-top: 20px;
	z-index: 1000;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 40%;
}

.tip_box p
{
	margin-bottom: 10px;
	margin-top: 10px;
	
}

.tip_close
{
	position: relative;
	float: right;
	color: red;
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	font-size: 18px;
	cursor: pointer;
}

.tip_close:hover
{
	text-shadow: 1px 1px 1px rgba(233, 23, 23, 0.6);
}

.display
{
	background: white;
	z-index: 1000;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}

.display_close
{
	float: right;
	padding: 10px;
	margin-right: 5px;
	font-size: 24px;
	font-weight: bold;
	color: red;
	font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
}

.display_close:hover
{
	text-shadow: 1px 1px 1px rgba(233, 23, 23, 0.4);
	cursor: pointer;
}