@charset "UTF-8";


body {
	margin: 0;
	padding: 0;
}

header, section, footer, aside, nav, article, figure {
	display:block;
}
.content ul, .content ol {
	padding:0;
}

a img {
	border:none;
}

#content {
	position:absolute;
	
	background-color:#333;
	color:#FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-bottom-color:#222;
	border-bottom-style:double;
	border-bottom-width:8px;
	margin-bottom:90px;
	z-index:2;
		column-count:2;
	column-width:100px;
	
}

header {
	position:fixed;
	z-index:1;
	background-color:#FFF;
	border-bottom-color:#333;
	border-bottom-style:solid;
	border-bottom-width:42px;
}


nav {
	float:left;
	position:absolute;
	top:140px;
	height:20px;
	background-color:#333;
	z-index:4;
	clip:rect(10px,auto,auto,auto);
	margin:0px;
}

nav a, nav a:visited { 
	margin-top:10px;
	text-decoration:none;
	background:#fff;
	color:#333;
	font-family:"Arial Black", Gadget, sans-serif;
	letter-spacing:1px;	
	margin:0 1% 0 1%;
	padding:0 1% 0 1%;
	
}

nav a:hover, nav a:active, nav a:focus { 
	margin-top:10px;
	text-decoration:none;
	font-family: "Arial Black", Gadget, sans-serif;
	color:#FFF;
	background-color:#7ACC9E;
	letter-spacing:1px;	
	margin:0 1% 0 1%;
	padding:0 1% 0 1%;
}


footer{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:bold;
	letter-spacing:1px;	
	font-size:12px;
	color:#FF6C85;
	text-align: center;
	height:90px;
	padding:0px;
	padding-top:25px;
	position:absolute;
	bottom:-120px;	
	background-image: url(../pics/HTML5_Logo_128.png);
	background-position: right center;
	background-repeat: no-repeat;
	width:90%;
	margin:0;
}

@media screen and (min-width:600px){
}
header {
	top:15px;
	height:87px;
	padding:25px 10px 0 10px;
	}	
nav {
	padding:25px 10px 0 10px;	
	}

#content {
	padding:10px;
	top:200px;
	min-height:500px;
	}

header, nav, #content {
	left:4%;
	width:80%;
	min-width:540px;
	max-width:960px;

}

@media screen and (max-width:600px){
header {
	height:87px;
	top:15px;
	padding:25px 10px 0 10px;
	}	
nav {
	padding:25px 10px 0 10px;
	}
#content {
	padding:10px;
	top:230px;
	min-height:400px;
	display:block;
}
header, nav, #content {
	left:2%;
	width:90%;
	max-width:580px;
	min-width:200px;
}

}



@media screen and (min-width:800px){
header, nav, #content {
	left:10%;
}
}





h1, h2, h3, h4, h5, h6, p {
	margin:0;	
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:15px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
h2{
	font-size:16px;
	font-style:normal;
	padding-left:10px;
	color:#333;
	letter-spacing:4px;	
	font-family:Arial, Helvetica, sans-serif;
}

h3{
	font-size:16px;
	font-style:italic;
	padding-left:20px;
	letter-spacing:2px;	
}
h4{
	font-size:45px;
	font-style:italic;
	color:#FFF;
	letter-spacing:4px;	
		width:75%;
	padding:10%;
	-webkit-transform: rotate(-15deg); 
-moz-transform: rotate(-15deg);
}
h1{
	font-size:76px;
	font-style:italic;
	color:#333;
	letter-spacing:4px;	
}
@media screen and (max-width:600px){
	h1{
	font-size:65px;
	letter-spacing:3px;	
	padding-bottom:0;
}
header {
	height:78px;
	}
h2{
	letter-spacing:3px;	
}	
h4{
	font-size:40px;
	letter-spacing:2px;	
	width:90%;
	padding:5%;
	-webkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg);
}
}
@media screen and (max-width:400px){
	h1{
	font-size:50px;
	letter-spacing:3px;	
	padding-bottom:0;
}
header {
	height:63px;
	}	
h2{
	letter-spacing:2px;	
}	
h4{
	font-size:40px;
	letter-spacing:2px;	
		width:95%;
	padding:2%;
	-webkit-transform: rotate(3deg); 
-moz-transform: rotate(3deg);
}
}



.headside {
	float:left;
	position:absolute;
	width:89px;
	top:-2px;
	height:35px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFF;
	
	-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	border-bottom-right-radius:5px;
	
	padding-top: 35px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	background-color: #333;
	z-index:5;
	right:10%;
	}


.headside2 {
	position:absolute;
	width:90px;
	top:95px;
	height:65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFF;
	z-index:5;
	padding-top:0px;
	background-color:#333;
	right:10%;
	padding-left: 30px;
}
@media screen and (min-width:400px){
.headside, .headside2 {
	right:5%;
}	
}
@media screen and (min-width:900px){
.headside, .headside2 {
	right:20%;
}	
}
@media screen and (max-width:400px){
.headside {
	float:left;
	position:absolute;
	width:160px;
	top:120px;
	padding:0;
	height:25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFF;
	
	padding:0 5px 0 0;
	z-index:5;
	right:23%;
	}
.headside2 {
	position:absolute;
	width:90px;
	top:120px;
	height:25px;
	font-size:11px;
	color:#FFF;
	z-index:5;
	padding-top:0px;
	right:4%;
	padding-left:5px;
}
.headside2 img{
	width:20px;
	height:15px;
	float:left;
}
}

.contthing {
	position:relative;
	max-width:400px;
	width:45%;
	margin-bottom:10px;
	margin-left:3%;
	background-color:#333;
	padding:4px;
	float:left;
	min-height:300px;
	width:45%;
}
.contthing p {
font-size:10px;
	color:#FFF;
	font-family:Helvetica, sans-serif;
	font-size:6px;
	letter-spacing:1px;
	max-width:280px;
	padding-left:20px;
}
.contthing img{
	margin-bottom:5px;
	border-color:#222;
	border-style:solid;
	border-width:2px;
	width:80%;
	-moz-border-radius:900px;
	border-radius:900px;
	-webkit-border-radius:900px;
	margin:20px;
	
	/*-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;*/
	
}
@media screen and (min-width:700px){


.contthing:hover {
font-size:13px;
	letter-spacing:2px;
background-color:#222;
max-width:300px;
width:50%;
z-index:1;
transition:all 0.2s;
-moz-transition:all 0.2s; /* Firefox 4 */
-webkit-transition:all 0.2s; /* Safari and Chrome */
-o-transition:all 0.2s; 
}
 .contthing img:hover{
	border:#222;
	border-style:solid;
	border-width:2px;
	padding:0;
width:100%;
z-index:1;

border-radius:5px;
-moz-border-radius:5px;

	margin:0px;
transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
}}
@media screen and (max-width:700px){
.contthing {
	float:left;
	position:relative;
	width:90%;
	max-width:470px;
	min-height:90px;
}
.contthing img{
	width:90%;
	margin-bottom:5px;
	float:left;
	border:#222;
	border-style:solid;
	border-width:12px;
}
 .contthing img:hover{
	border:#222;
	border-style:solid;
	border-width:2px;
	padding:0;
width:100%;
z-index:1;
transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
}
}

















.pline1 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:11px;
	width:95%;
	min-width:180px;
	max-width:360px;
	padding-bottom:24px;
	
}

.pline2 {
	font-family:Helvetica, sans-serif;
	font-size:13px;
	width:95%;
	min-width:180px;
	max-width:360px;
	letter-spacing:2px;
}

.gameholder2{
	position:relative;
	left:1%;
	padding:10px;
	padding-top:20px;
	z-index:7;
	background-color:#333;
	float:left;
}
@media screen and (min-width:800px){
.gameholder2{
	left:5%;
	padding:10px;
}
}


.dright{
	position:relative;
	width:40%;
	top:20px;
	width:45%;
	margin-left:60px;
	max-width:340px;
	min-width:100px;
	float:left;
	min-height:30px;
	padding: 0 0 20px 0px;
	margin-bottom:40px;
}

.dleft{
	width:40%;
	top:20px;
	min-height:30px;
	max-width:340px;
	min-width:100px;
	left:2%;
	float:left;
	position:relative;
	padding: 0 0 20px 0px;
}

#gamelinks{
	postion:relative;
	width:100%;
	height:140px;
	}
@media screen and (max-width:600px){
	.dleft{
		width:90%;
		}
	.dright{
	left:2%;
	margin-left:0px;
	margin-top:20px;
	float:left;
	min-height:30px;
	max-width:340px;
	min-width:100px;
	width:90%;
	}	
	#gamelinks{
	height:80px;
	}
}





a { 
	text-decoration:none;
	background:#fff;
	color:#333;
	font-family: "Arial Black", Gadget, sans-serif;
	letter-spacing:1px;	
}

a:visited { 
	text-decoration:none;
	color:#333;
	letter-spacing:1px;	
}
a:hover, a:active, a:focus { 
	text-decoration:none;
	color:#333;
	background-color:#7ACC9E;
	letter-spacing:1px;	
}
a:hover { 
	text-decoration:none;
	color:#111;
	background-color:#7ACC9E;
	padding:3px;
	transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
	}
	
nav a:hover { 
	
	color:#FF6C85;
	background-color:#222;
padding-top:5px;
padding-bottom:15px;
	transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
	}
	
@media screen and (max-width:400px){
	nav a, nav a:visited { 
	font-size:12px;
	margin:0 1% 0 1%;
	padding:0 1% 0 1%;
	}
	nav a:hover, nav a:active, nav a:focus { 
	font-size:13px;
	margin:0 1% 0 1%;
	padding:0 1% 0 1%;
	}
	}	




.twtr-widget a, .twtr-widget a:hover, .twtr-widget a:visited {
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	color:#000;
	background-color:#332c33;
	letter-spacing:1px;
	font-style: normal;
	text-decoration: none;
	 }
	.twtr-widget h1, .twtr-widget h2, .twtr-widget h3 { text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	color:#232;
	background-color:#000;
	 letter-spacing:1px;
	 font-style:normal;
	 -webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg);
	text-decoration: none;
	
	 } 
	 
	 
	.twtr-widget h4 { 
	 -webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg);
	
	 }  
	 
	 
.twtr-widget {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	
	border-radius: 3px;
	font-style: normal;
	text-decoration: none;
}

.twtr-widget .twtr-bd .twtr-tweet { 
}
.twtr-tweet:before {
	padding:20px;
	
}

	body#gamespage a#gamesnav,
	body#gamespage1 a#gamesnav,
	body#gamespage2 a#gamesnav,
	body#gamespage3 a#gamesnav,
   	body#indexpage a#indexnav,
   	body#cvpage a#cvnav,
	body#stuffpage a#stuffnav,
	body#contactpage a#contactnav{
	background-color:#333;
	color:#FFF;
}


#gamelink1 {
background-image:url(pics/huklink_mv.jpg);
}
#gamelink2 {
background-image:url(pics/stwblink_mv.jpg);
}
#gamelink3 {
background-image: url(pics/link_pill_c.jpg);
}
#gamelink1:hover {
background-image:url(pics/huklink.jpg);
}
#gamelink2:hover {
background-image:url(pics/stwblink.jpg);
}
#gamelink3:hover {
background-image: url(pics/link_pill.jpg);
}
#gamelink1, #gamelink2, #gamelink3 {
	float:left;
	font-size:10px;
	padding:5px;
	background-color:#FFF;
	height:90px;
	width:90px;
	height:120px;
	list-style:none;
	display;inline;
		 margin:10px;
	-moz-border-radius:900px;
	border-radius:900px;
	-webkit-border-radius:900px;
	
	-webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg);


}

#gamelink1 p, #gamelink2 p, #gamelink3 p{
	background-color:#FFF;
	text-decoration:none;
	color:#333;
	font-family: "Arial Black", Gadget, sans-serif;
	letter-spacing:1px;	
	padding:2px;
		
}

#gamelink1:hover, #gamelink2:hover, #gamelink3:hover{
 height:120px;
 width:120px;
 margin:1px;

-webkit-transform: rotate(20deg); 
-moz-transform: rotate(20deg);
	transition:all 2s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
z-index:1;
}
@media screen and (min-width:600px){
#gamelink1, #gamelink2, #gamelink3 {
	padding:5px;
	height:90px;
	width:90px;
	 margin:10px;
}
}

@media screen and (max-width:600px){
#gamelink1, #gamelink2, #gamelink3 {
	padding:2px;
	height:70px;
	width:70px;
	margin-left:2px;
}

#gamelink1:hover, #gamelink2:hover, #gamelink3:hover{
 height:70px;
 width:100px;
	transition:all 2s;
	
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 

z-index:1;
}
	}


body#gamespage #gamelink1, {
	background-color:#333;
	color:#FFF;
}



	
#headline{
	position:absolute;
	top:-18px;
	left:0px;
	padding:0;
	margin:0;
	height:20px;
	font-size:20px;
	color:#333;
	z-index:1;
	text-align:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	font-style:italic;
}

@media screen and (min-width:600px){
#headline{
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);	
position:absolute;
	top:410px;
	left:-432px;
	width:820px;
	font-size:36px;
	text-align:right;
}
}


		
	::selection {
	 /* Safari 
	*/
	 background:#FF6C85;
	 color:#FFF;
	}
::-moz-selection {
	 /* Firefox */
	background:#448B49
	 color:#FFF;
}
 header ::selection, nav ::selection, #navid ::selection, a ::selection  {
	 /* Safari */
	 color:#FFF;
	 background:#333;
	}
	
	header a:hover { 
	text-decoration:none;
	padding:0px;
	}
	
	header h2:hover { 
	text-decoration:none;
	color:#FF6C85;
	padding:0px;
	transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; 
	}


.counter {

	height:40px;
	position:absolute;
	bottom:40%;
	left:20%;
	z-index:1;
}

.counter a,.counter a:visited, .counter a:hover,.counter a:active,.counter a:focus {
	background:#fff;
	
}