body {margin: 0; padding: 0; background-color: #1c1c1c; font-family: Oswald, sans-serif; color: #2d2d2d; background: url(images/bg.jpg) repeat;}
form {margin: 0; padding: 0;}
hr {margin: 0; height: 1px; border: none; background-color: #999999; color: #999999;}
a {outline: none;}
img {border: none;}

/*------  Buttons  ---------------------------------------------------------------------------*/
	
.button {
	padding: 8px 40px;
	border: 1px solid #255282;
	border-radius: 10px;
	display: inline-block;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #193354;
	text-decoration: none;
	cursor: pointer;
	background-color: #255282;
}

	
/*------  Layout  ---------------------------------------------------------------------------*/
.page {
	margin: 0 auto;
	padding: 10px;
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 5px;
}
	@media screen and (max-width: 600px) {.page {}}
.content {
	width: 900px;
	margin: 0 auto;
	padding: 20px 25px;
}
	@media screen and (max-width: 600px) {.content{width: auto; padding: 20px 15px;}}
	
	h1 {margin: 0; color: #909090; text-align: center; text-shadow: 0 0 10px #000000}
		@media screen and (max-width: 600px) {h1 {font-size: 18px;}}
	h2 {color: #2D3E7C;}
	.content a {color: #2d2d2d;}
	@media screen and (max-width: 600px) {.content img {width: 100%;}}

.header {height: 60px; padding: 10px 0;}
	@media screen and (max-width: 600px) {.header {height: 35px;}}
.white_bg {background-color: #FFFFFF;}


/*------  Links  ---------------------------------------------------------------------------*/
.links {
	padding-left: 15px;
	font-size: 20px;
}
	@media screen and (max-width: 600px) {.links {width: 100%;}}
	.links td {padding: 5px;}
	.links tr:nth-child(odd) {background-color: #f2f2f2;}
	.small_shape {text-align: right;}

/*------  Shapes  ---------------------------------------------------------------------------*/
.square_small {
	display: inline-block;
	margin: 0 5px;
	width: 25px;
	height: 25px;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}
	.square_big {
		display: inline-block;
		margin: 0 5px;
		width: 125px;
		height: 125px;
		background-color: #FFFFFF;
		border: 1px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}
.rectangle_small {
	display: inline-block;
	margin: 0 5px;
	width: 25px;
	height: 15px;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}
	.rectangle_big {
		display: inline-block;
		margin: 0 5px;
		width: 145px;
		height: 85px;
		background-color: #FFFFFF;
		border: 1px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}
.circle_small {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}
	.circle_big {
		display: inline-block;
		width: 125px;
		height: 125px;
		border-radius: 50%;
		background-color: #FFFFFF;
		border: 1px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}
.oval_small {
	display: inline-block;
	width: 25px;
	height: 15px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}
	.oval_big {
		display: inline-block;
		width: 145px;
		height: 85px;
		border-radius: 50%;
		background-color: #FFFFFF;
		border: 1px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}
.triangle_small {
	display: inline-block;
	width: 0;
	height: 0;
	border-bottom: 20px solid #000000;
    border-right: 20px solid transparent;
}
	.triangle_big {
		display: inline-block;
		width: 0;
		height: 0;
		border-bottom: 120px solid #000000;
		border-right: 120px solid transparent;
	}
.trapezoid_small {
	display: inline-block;
	border-bottom: 20px solid #000000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    height: 0;
    width: 20px;
}
	.trapezoid_big {
		display: inline-block;
		border-bottom: 85px solid #000000;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		height: 0;
		width: 120px;
	}
.parallelogram_small {
	display: inline-block;
	width: 20px;
    height: 15px;
    transform: skew(20deg);
    background: #000000;
}
	.parallelogram_big {
		display: inline-block;
		width: 120px;
		height: 85px;
		transform: skew(20deg);
		background: #000000;
	}
.circle_border_small {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 6px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}	
	.circle_border_big {
		display: inline-block;
		width: 105px;
		height: 105px;
		border-radius: 50%;
		background-color: #FFFFFF;
		border: 25px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}
.rectangle_border_small {
	display: inline-block;
	margin: 0 5px;
	width: 25px;
	height: 15px;
	background-color: #FFFFFF;
	border: 10px solid #000000;
	box-shadow: 1px 1px 1px #2d2d2d;
}	
	.rectangle_border_big {
		display: inline-block;
		margin: 0;
		width: 105px;
		height: 50px;
		background-color: #FFFFFF;
		border: 20px solid #000000;
		box-shadow: 1px 1px 1px #2d2d2d;
	}


/*------  Calculator  ----------------------------------------------------------------------------*/
.calculator {margin: 0 auto; white-space: nowrap;}
.label {margin-top: 10px; font-size: 16px;}
.input {border: none; border-bottom: 1px solid #2d2d2d; font-size: 24px; font-family: Oswald, sans-serif;}
	@media screen and (max-width: 600px) {.input {width: 150px;}}
	.calculator select {font-family: Oswald, sans-serif; font-size: 18px;}
.calculate_button {padding: 20px 0; text-align: center;}
.answer {display: none; font-size: 24px; margin: 10px 0; padding: 10px 15px; background-color: #2DAD44; text-shadow: 0 1px 2px #154C1F; color: #FFFFFF; font-weight: bold;}

.explanation {margin: 20px auto 10px auto;}
	.explanation td {padding: 5px; text-align: center;}
.formula {text-align: center;}
.vertical_line {display: inline-block; width: 1px; height: 100%; border-right: 1px dashed #2d2d2d; margin: auto;}
.horizontal_line {display: inline-block; height: 1px; width: 100%; border-top: 1px dashed #2d2d2d; margin: auto;}
.radii {display: inline-block; width: 50%; height: 50%; margin-left: -50%; border-right: 1px dashed #2d2d2d; border-bottom: 1px dashed #2d2d2d;}

.calculator_link {text-align: center; font-size: 20px;}

/*------  Footer  ----------------------------------------------------------------------------*/
.footer {margin: 20px 0; text-align: center; color: #e1e1e1; font-size: 14px;}
.footer_menu a {margin: 0 10px; color: #f5f5f5;}
.copyright {margin: 10px 0 0 0;}
.copyright, .copyright a {color: #cacaca;}