@charset "utf-8";
/* CSS Document 
Why the hell are you reading this?

#A32424 R=163 G=036 B=036 is that red color i like and now red of ignis
#ffe900 R=255 G=233 B=000 is the yellow of ignis
#21232B R=033 G=035 B=043 muh gray and the gray of ignis when needed
*/
	body{
		background-color:#21232B;
		font-family:tahoma;
		margin:0px;
	}
	#OC	{
		width:100%;	  
		max-width:950px;
		margin:0 auto;
    }
	#nav {
		border-radius: 10px;
		background:#7D282B;
		width:100%;
		float:left;
		margin-bottom:10px;
		text-align: center
	}
	#navhold {
		height:100%;
		display: inline-block
	}
	#navbutton	{
		font-size:18px;
		float:left;
		text-decoration:none;
		color:#000;
		padding:9px;
		width:90px;
		text-align:center;
		background-image:url(/resources/button.png);
	}
	#navbutton:hover {
		background-image:url(/resources/buttonuse.png);
    }
	#navsecret  {
		float:left;
		text-decoration:none;
		color:#000;
		padding:8px;
		width:59px;
		height:100%;
		text-align:center;
	}
	#header	{
		float:left;
		width:100%;
		color:#A32424;
		margin-top:20px;
	}
	#header img {
		width:80%;
		max-width:300px;
	}
	#post {	
		margin:0 auto;
		border-radius: 7px;
		background-color:#E1E1E1;
		padding:10px;
		width:85%;
		border-style:solid;
		border-width:1px;
	}
	#textbody {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		float:left;
		width:100%;
		padding-top:10px;
		padding-bottom:10px;
		background-color:#B2B2B2;
		margin-bottom:10px;
    }
	#textbody.toptext {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	#break {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		float:left;
		width:100%;
		max-width:100%;
		background:#7D282B;
		font-size:20px;
		height:30px;
	}
	#breaktext {
		padding:3px 3px 3px 6px;
	}
	table {
		width:790px;
		border: solid;
		border-width: 1px;
		background:url(http://www.datsmore.com/resources/Inactive.png);
		background-size:auto 100%;
	}
	tr td {
		border: solid;
		border-width: 1px;
		background:#E1E1E1;
	}
	tr td:nth-child(1) {
		width:120px;
	}
	tr td:nth-child(2) {
		width:150px;
		width:150px;
	}
	#colors	{
		width:660px;
		height:320px;
		border:solid;
		border-color:#000;
		border-width:1px;
		background-color:#E1E1E1;
	}
	#colors a {
		width:56px;
		height:56px;
		margin:8px;
		/*border:solid;*/
		border-color:#000;
		border-width:1px;
		float:left;
		line-height:56px;
	}
	#display {
		padding:15px;
		width:88%;
		height:30px;
		background-color:#ffffff;
		border:solid;
		border-color:#000;
		border-width:1px;
		vertical-align:middle;
		float:left;
		font-weight:bold;
		font-size:24px;
	}
	video {
		max-width:90%;
	}
	.troll {
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
		-webkit-animation: 1s ease-in-out;
		-moz-animation: 1s ease-in-out;
		-o-animation: 1s ease-in-out;
		animation: 1s ease-in-out;
	}
	.troll:hover {
		animation-name: rotate; 
		animation-duration: 2s; 
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}
	@keyframes rotate {
    from {transform: rotate(180deg);}
    to {transform: rotate(540deg);}
	}