@font-face
{
	font-family: "iSingWorship";
	src: url(font.ttf) format("truetype");
	font-weight: 100 900;
	font-style: normal;
}

html
{
	font-family: iSingWorship;
	font-weight:300;
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 0);
	font-size: max(1.2em, 18px);
}

body
{
	margin: 0;
	padding-top: 240px;
	overflow: auto;
}

header
{
	color: rgb(255, 255, 255);
	background-image: linear-gradient(rgb(71, 152, 242), rgb(45, 116, 198));
	top: 0px;
    height: 220px;
	position: fixed;
	width: calc(100% - 20px);
	z-index: 1;
	padding: 10px;
	border-bottom: thin solid rgb(92,92,92);
}

@media screen and (max-width: 640px)
{
	body
	{
		padding-top: 0px;
	}
	header
	{
		position: static;
	}

	.dropdown
	{
		display:inline-block;
	}

	.nondropdown
	{
		display:none;
	}

	a.anchor
	{
		display: block;
		position: relative;
		top: -20px;
		visibility: hidden;
	}
}

@media screen and (min-width: 641px)
{
	.dropdown
	{
		display:none;
	}

	.nondropdown
	{
		display:inline-block;
	}

	a.anchor
	{
		display: block;
		position: relative;
		top: -120px;
		visibility: hidden;
	}
}

@media screen and (max-height: 480px)
{
	body
	{
		padding-top: 0px;
	}
	header
	{
		position: static;
	}

	a.anchor
	{
		display: block;
		position: relative;
		top: -20px;
		visibility: hidden;
	}
}

header a
{
	font-family: Helvetica;
	font-weight:300;
	font-size: max(0.8em, 14px);
	white-space: nowrap;
	margin: 0px;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 6px;
}

.second
{
	font-weight:200;
	font-size: max(0.7em, 12px);
	margin: 2px;
}

header a:link
{
	color: rgb(255, 255, 255);
	padding: 5px 5px 1px 5px;
}
header a:visited
{
	color: rgb(255, 255, 255);
	padding: 5px 5px 1px 5px;
}
header a:active
{
	color: rgb(255, 255, 255);
	padding: 5px 5px 1px 5px;
}
header a:hover
{
	transition: 0.3s;
	background-color: rgb(255, 255, 255, 0.25);
	padding: 5px 5px 1px 5px;
	text-decoration:none;
}

nav
{
	background-color: rgb(39, 38, 34);
	padding: 5px;
}

nav.side
{
	background-color: rgb(48, 48, 48);
	padding: 5px;
}

footer
{
	background-image: linear-gradient(rgb(71, 152, 242), rgb(45, 116, 198));
	color: white;
	font-size: 70%;
	clear: both;
	padding: 10px 30px 5px 30px;
}

detail
{
	background-color: rgb(39, 38, 34);
	padding: 5px;
}

section
{
	padding: 10px;
}

h1
{
	font-weight: bold;
	font-size: 50px;
	margin-bottom: 10px;
}

label
{
	display: inline-block;
	padding: 5px;
}

hr
{
	border: 1px solid rgb(25, 32, 35);
}

button
{
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    border: none;
	color: white;
	background-color: rgb(71, 152, 242);
    padding: 5px 25px 5px 25px;
    font-size: 18px;
	font-weight: 300;
    cursor: pointer;
}

button:hover
{
	background-color: rgb(71, 152, 242);
	transition: 1.2s;
}

button:disabled
{
	background:rgba(71, 71, 71,0.7);
    cursor: default;
}

button.selected
{
    border: thin solid rgb(71, 152, 242);
}

button.selected:hover
{
	background-color: rgb(71, 152, 242);
	transition: 1.2s;
}

button.unselected
{
    color: rgb(71, 152, 242);
	background-color: rgb(32, 32, 32);
    border: thin solid rgb(71, 152, 242);
}

button.unselected:hover
{
    background-color:rgba(71, 152, 242,0.3);
    border: thin solid rgb(71, 152, 242,0.3);
}

button.green
{
    background-color:rgb(134,194,73);
}

button.green:hover
{
    background-color:rgb(153,204,102);
}

button.red
{
    background-color:rgb(204,77,77);
}

button.red:hover
{
    background-color:rgba(204,77,77,0.7);
}

button.grey
{
    background-color:rgb(127,127,127);
    cursor: default;
}

table
{
	border-collapse: collapse;
}

table.distinquish
{
	border:1px solid #404040;
}

th.distinquish
{
	background-color:rgb(59, 58, 54);
	border:1px solid #404040;
}

tr.distinquish
{
	background-color:rgb(59, 58, 54);
}

td.distinquish
{
	border:1px solid #404040;
}

div.distinquish
{
	background-color:rgb(54, 54, 52);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}

a
{
	text-decoration:none;
}
a:link
{
	color: rgb(71, 152, 242);
}
a:visited
{
	color: rgb(71, 152, 242);
}
a:active
{
	color: rgb(71, 152, 242);
}
a:hover
{
	color: rgb(177, 177, 177);
	text-decoration:underline;
}

fieldset
{
	border: thin solid rgb(92,92,92);
}

fieldset input
{
	border: thin solid rgb(92,92,92);
}

fieldset textarea
{
	border: thin solid rgb(92,92,92);
}

@font-face
{
	font-family: "faticons";
	src: url(faticons_normal.ttf) format("truetype");
}

.dropbtn
{
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border-radius:0px;

	font-family: faticons;
    font-size: 20px;
}

.dropbtn:hover, .dropbtn:focus
{
    background-color:rgba(71, 152, 242,0.7);
}

.dropdown
{
	position: relative;
}

.dropdown-content
{
	display: none;
	position: absolute;
	background-color: #313131;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	right: 0;
	z-index: 1;
}

.dropdown-content a
{
	color: white;
	padding: 8px 12px;
	text-decoration: none;
	display: block;
}
.dropdown-content a:link
{
	color: white;
}
.dropdown-content a:visited
{
	color: white;
}
.dropdown-content a:active
{
	color: white;
}
.dropdown-content a:hover
{
	color: white;
}


.dropdown-content a:hover
{
	background-color: #555
}

.show
{
	display:block;
}

.highlight
{
	background-color:darkgoldenrod;
}

input
{
    font-size: max(1em, 16px);
}

input.transparent
{
	color: white;
	border: none;
	border-color: transparent;
	background-color:rgba(0, 0, 0, 0);
}

textarea
{
    font-size: max(1em, 16px);
}

.speech_box
{
	width: 90%;
	margin: 50px auto;
	color:rgb(39, 38, 34);
	background-color:rgb(195, 195, 193);
	padding: 20px;
	position:relative;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.speech_boxl:before
{
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 10px solid rgb(195, 195, 193);
	border-right: 10px solid transparent;
	border-top: 10px solid rgb(195, 195, 193);
	border-bottom: 10px solid transparent;
	left: 29px;
	bottom: -19px;
}

.speech_box2:before
{
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid rgb(195, 195, 193);
  border-top: 10px solid rgb(195, 195, 193);
  border-bottom: 10px solid transparent;
  right: 29px;
  bottom: -19px;
}

img.invertDark
{
	-webkit-filter: invert(1);
	filter: invert(1);
}