@font-face {
    font-family: 'MyFont'; /*a name to be used later*/
    src: url('CalvinScript.ttf'); /*URL to font*/
}

#HeaderFrame{
	width: 100%; 
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	background-repeat:repeat;
	display:block;
}

#MainFrame{
	width: 100%; 
	background-repeat:repeat;
	display:block;
	overflow:auto;
}

#MainFrame{
}

body{
	background-image:url('images/header_background.jpg');
	margin: 0;
	padding: 0;
	border: 0;
	overflow: scroll;
	font-family: "MyFont";
}

img {
    max-width: 100%;
    max-height: 100%;
}
h1 {
    text-decoration: underline;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
h2 {
    text-decoration: underline;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}
h3 {text-decoration: underline;}

a {color: #5cc0ff;text-decoration: underline;}
a:link {color: #5cc0ff;}                                    /* unvisited link */
a:visited {color: #903fff;}                                 /* visited link */
a:hover {color: #0083d6; text-shadow: 0 0 3px #5cc0ff;}     /* mouse over link */
a:active {color: #0083d6;}                                  /* selected link */

/* ------------------------------- Post stuff  -------------------------------*/
.post{
	border: 20px solid black;
	border-image: url("images/lines/line_box300px.png") 20 20 20 20 repeat stretch;
	background: #fff;
    padding: 10px;
    margin: 10px;
    overflow:auto;
	font-size: 130%;
}
.cartoon{
	height:auto;
	float:left;
    margin: 10px;
}
.cartoontext{
}
.invisible {
    display: none;
    visibility: hidden;
}
form p label {
	display:block;
	float:left;
	width:200px;
}
form p input {
    width:250px;
}
.clearspacer{
    clear:both;
}
.shoplist{
    display: inline-block;
    width: 400px;
    vertical-align: middle;
}
/*--------------------------------- Game ------------------------------------*/
.box{    
	border: 20px solid black;
	border-image: url("images/lines/line_box300px.png") 20 20 20 20 repeat stretch;
	background: #fff;      
    margin: 10px;
}
.gamebox{
	width: 650px;
    left: 50%;
}
.textbox{
	width: 590px;
    left: 50%;
}
.gameimage{
    margin: 10px;
    display: flex;
    justify-content: center;
    cursor: url(gameimages/pointer.png), auto;
}
.gameclickable{
    margin: 10px;
    cursor: url(gameimages/pointer_hand.png), auto;
}
.gametext{
    margin-left: 20px;
	font-size: 130%;
    vertical-align: middle;
}
.gtext{
    
}
.gannounce{
    color: #160090;
    font-weight: bold;
}

.convwrapper{
	width: auto;
    margin: 0 auto;
    text-align: center;
}
.gconverse_0{
    color: #000000;
    width: auto;
    display: inline-block;
}
.gconverse_1{
    color: #045895;
    width: auto;
    display: inline-block;
}
.gconverse_2{
    color: #428400;
    width: auto;
    display: inline-block;
}
.gconverse_3{
    color: #b90682;
    width: auto;
    display: inline-block;
}
.optionbutton{
    display: inline-block; 
    vertical-align: middle;   
}

.nodebox{
    display: inline-block; 
	font-size: 80%;
    color: #5d5d5d;
    margin-right: 10px;
}
.gametime{
    float: right;
	font-size: 80%;
}

.gamedevtree{
    position: absolute;
}
.gamedevnode{
    position: absolute;
}
.relativecontainer{
    position: relative;
}

.scorebox{
    position: absolute;
    top: 0;
    right: 0;
}
.scorechange{
    position: absolute;
    z-index: 99;
    top: 10px;
    right: 10px;
    font-size: 25px;
    font-weight: bold;
    width: 50px;
    height: 50px; 
    border-radius: 50px;
    padding: 20px; 
}
.scoreup{
    color: forestgreen;
    background: lightgreen;
    border: 2px solid forestgreen;
}
.scoredown{
    color: red;
    background: pink;
    border: 2px solid red;
}

/* ------------------------------- UL stuff  -------------------------------*/

.clear {
    content: '';
    display: block;
    clear: both;
}
ul#header_menu {
height: 80px;
margin: 0px;
list-style: none;
}
ul#header_menu li a { 
display: block;
float: left; 
height: 80px;
margin-right: 30px;
background-image:url('images/header_buttons.png');
text-indent: -9999px
}

	ul#header_menu li a.home	{width: 150px; background-position: 0 0;}
	ul#header_menu li a.about	{width: 190px; background-position: -150px 0;}
	ul#header_menu li a.search	{width: 160px; background-position: -340px 0;}
	ul#header_menu li a.game	{width: 160px; background-position: -500px 0;}	
	ul#header_menu li a.shop	{width: 150px; background-position: -660px 0;}
		ul#header_menu li a.home:hover		{width: 150px; background-position: 0 -80px;}
		ul#header_menu li a.about:hover		{width: 190px; background-position: -150px -80px;}
		ul#header_menu li a.search:hover	{width: 160px; background-position: -340px -80px;}
		ul#header_menu li a.game:hover		{width: 160px; background-position: -500px -80px;}	
		ul#header_menu li a.shop:hover		{width: 150px; background-position: -660px -80px;}


ul#search_tags{
height: 50px;
margin: 0px;
list-style: none;
}
ul#search_tags li a { 
display: block;
float: left; 
height: 50px;
margin: 10px;
margin-bottom: 30px;
background-image:url('images/searchtags.png');
text-indent: -9999px;
}

	ul#search_tags li a.europe		    {width: 130px; background-position: 0 0;}
	ul#search_tags li a.scotland	    {width: 135px; background-position: -130px 0;}
	ul#search_tags li a.france		    {width: 130px; background-position: -265px 0;}	
	ul#search_tags li a.germany		    {width: 130px; background-position: -395px 0;}	
	ul#search_tags li a.spaincatalonia  {width: 130px; background-position: -525px 0;}	
	ul#search_tags li a.ireland	        {width: 110px; background-position: -655px 0;}
	ul#search_tags li a.asia		    {width: 110px; background-position: -765px 0;}	
	ul#search_tags li a.middleeast    	{width: 165px; background-position: -875px 0;}	
	ul#search_tags li a.russia		    {width: 100px; background-position: -1040px 0;}	
	ul#search_tags li a.london         	{width: 100px; background-position: -1140px 0;}	

	ul#search_tags li a.trump		    {width: 145px; background-position: 0 -100px;}
	ul#search_tags li a.theresamay	    {width: 190px; background-position: -145px -100px;}	
	ul#search_tags li a.corbyn		    {width: 140px; background-position: -335px -100px;}
	ul#search_tags li a.boris		    {width: 120px; background-position: -475px -100px;}
	ul#search_tags li a.dianeabbott     {width: 175px; background-position: -595px -100px;}
	ul#search_tags li a.biden           {width: 130px; background-position: -770px -100px;}

	ul#search_tags li a.election	    {width: 130px; background-position: 0 -200px;}
	ul#search_tags li a.monarchy	    {width: 120px; background-position: -130px -200px;}
	ul#search_tags li a.tax			    {width: 90px; background-position: -250px -200px;}
	ul#search_tags li a.terrorism	    {width: 125px; background-position: -340px -200px;}
	ul#search_tags li a.environment	    {width: 135px; background-position: -465px -200px;}
	ul#search_tags li a.military	    {width: 120px; background-position: -600px -200px;}
	ul#search_tags li a.ukip		    {width: 100px; background-position: -720px -200px;}
	ul#search_tags li a.finance    	    {width: 100px; background-position: -820px -200px;}
	ul#search_tags li a.scandal		    {width: 100px; background-position: -920px -200px;}
	ul#search_tags li a.covid19		    {width: 100px; background-position: -1020px -200px;}

    
        ul#search_tags li a.europe:hover		    {width: 130px; background-position: 0 -50px;}
        ul#search_tags li a.scotland:hover	        {width: 135px; background-position: -130px -50px;}
        ul#search_tags li a.france:hover		    {width: 130px; background-position: -265px -50px;}	
        ul#search_tags li a.germany:hover		    {width: 130px; background-position: -395px -50px;}	
        ul#search_tags li a.spaincatalonia:hover    {width: 130px; background-position: -525px -50px;}	
        ul#search_tags li a.ireland:hover	        {width: 110px; background-position: -655px -50px;}
        ul#search_tags li a.asia:hover		        {width: 110px; background-position: -765px -50px;}	
        ul#search_tags li a.middleeast:hover    	{width: 165px; background-position: -875px -50px;}	
        ul#search_tags li a.russia:hover		    {width: 100px; background-position: -1040px -50px;}	
	    ul#search_tags li a.london:hover         	{width: 100px; background-position: -1140px -50px;}	

        ul#search_tags li a.trump:hover		    {width: 145px; background-position: 0 -150px;}
        ul#search_tags li a.theresamay:hover	{width: 190px; background-position: -145px -150px;}	
        ul#search_tags li a.corbyn:hover		{width: 140px; background-position: -335px -150px;}
        ul#search_tags li a.boris:hover		    {width: 120px; background-position: -475px -150px;}
        ul#search_tags li a.dianeabbott:hover   {width: 175px; background-position: -595px -150px;}
        ul#search_tags li a.biden:hover         {width: 130px; background-position: -770px -150px;}

        ul#search_tags li a.election:hover	    {width: 130px; background-position: 0 -250px;}
        ul#search_tags li a.monarchy:hover	    {width: 120px; background-position: -130px -250px;}
        ul#search_tags li a.tax:hover			{width: 90px; background-position: -250px -250px;}
        ul#search_tags li a.terrorism:hover	    {width: 125px; background-position: -340px -250px;}
        ul#search_tags li a.environment:hover	{width: 135px; background-position: -465px -250px;}
        ul#search_tags li a.military:hover	    {width: 120px; background-position: -600px -250px;}
        ul#search_tags li a.ukip:hover		    {width: 100px; background-position: -720px -250px;}
        ul#search_tags li a.finance:hover	    {width: 100px; background-position: -820px -250px;}
        ul#search_tags li a.scandal:hover	    {width: 100px; background-position: -920px -250px;}
        ul#search_tags li a.covid19:hover	    {width: 100px; background-position: -1020px -250px;}



/* ------------------------------- Sharelinks stuff  -------------------------------*/

.sharelinkbox {
    font-size: 28px;
	max-height: 30px;
	max-width: 120px;
	overflow: hidden;
	transition: max-height 0.8s;
    padding: 0px;
    margin: 0 auto;
    text-align: center;
}
.sharelinkboxclicked{
	/* On hover, set the max-height to something large. In this case there's an obvious limit. */
	max-height: 400px;
	max-width: 600px;
}
.sharelinkbox a{
    font-size: 18px;
}

ul.sharebar{
margin: 0px;
margin-left: 70px;
list-style: none;
height: 48px;
}

ul.sharebar li a { 
display: block;
float: left; 
height: 48px;
margin: 10px;
margin-bottom: 30px;
background-image:url('images/sharebar.png');
text-indent: -9999px		
}
	ul.sharebar li a.twitter   {width: 50px; background-position: 0px 0px;}
	ul.sharebar li a.facebook  {width: 53px; background-position: -50px 0px;}
	ul.sharebar li a.google    {width: 54px; background-position: -103px 0px;}
	ul.sharebar li a.reddit    {width: 50px; background-position: -157px 0px;}
	ul.sharebar li a.pinterest {width: 50px; background-position: -207px 0px;}
	ul.sharebar li a.instagram {width: 50px; background-position: -257px 0px;}
		ul.sharebar li a.twitter:hover		{width: 50px; background-position: 0px -50px;}
		ul.sharebar li a.facebook:hover		{width: 53px; background-position: -50px -50px;}
		ul.sharebar li a.google:hover		{width: 54px; background-position: -103px -50px;}
		ul.sharebar li a.reddit:hover		{width: 50px; background-position: -157px -50px;}
		ul.sharebar li a.pinterest:hover	{width: 50px; background-position: -207px -50px;}
		ul.sharebar li a.instagram:hover	{width: 50px; background-position: -257px -50px;}