/* CSS KamikazeMusic.com sample HTMl5 CSS


-- Import CSS
-- Misc
	-- positioning
	-- clearing breaks
	-- HTML5 inline fix
	-- sticky footer code - http://www.cssstickyfooter.com/
	-- generic styles
-- main areas
-- header
-- menu
-- main content
-- footer
-- accessibility 
	-- positioning

*/


/* import CSS */
@import url(reset.css);
@import url(typography.css);
@import url(text_replace.css);

 

/*clear breaks*/
.clearright{ clear:right; line-height:0;}
.clearleft{ clear:left; line-height:0;}
.clearboth{ clear:both; line-height:0;}
/**HTML5 inline fix thingie**/
header, footer, nav, section, article {
 display:block;
}



/**generic styles**/
p{
	margin:8px 2px 8px 2px;
}
p.center{
	text-align:center;
}
.fLeft{ float:left; }
.fRight{ float:right;}


/**body/HTML styles**/
body{
	background:url('../images/bg.jpg');
}



/**header**/
header{
	width:100%;
	background:url('../images/header.jpg');
	border-bottom:1px solid #ccc;
	height:70px;
	margin-bottom:50px;
}
#inner{
	width:960px;
	margin:0 auto;
}
	#logo{
		float:left;
		margin-top:6px;
		margin-left:10px;
		background:url('../images/pielogo.png') no-repeat top left;
		height:89px;
		width:280px;
		padding-left:5px;
		padding-top:18px;
		text-align:right;
	}
		

	
	header .socialmedia{
		width:960px;
		margin:0 auto;
		text-align:right;
		padding:0 10px;
	}
	
	header nav{
		float:right;
		margin-top:20px;
		margin-right:10px;
	}
	
	header nav a{
		padding:10px 30px;
	}
	




	
/**main content**/
#mainContent{
	margin:0 auto;
	width:960px;
}

	#mainContent > div{
		float:left;
		padding:10px;
		width:290px;
	}
	
	#mainContent > div.update{
		width:900px;
		margin:0 auto;
		background:#ccc;
		padding:10px;
	}
	

	#mainContent > div.errors{
		border:1px solid #ccc;
		background:#a92a09;
		color:#fff;
		padding:10px;
		margin:10px;
		width:914px;
	}
	form#interest{
		padding:10px;
		border:1px solid #fff;
		-moz-border-radius:3px;
		-khtml-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		background:#ccc;
		margin:10px;
	}
	
		input, select{
			padding:3px;
			margin:3px;
		}
		input[type="submit"]{
			padding:4px;
			border:1px solid #fff;
			background:#900;
			color:#fff;
		}
	
	div.info{
		float:left;
		width:290px;
		margin:10px;
		text-align:left;
	}
	
	
	
	form#login{
		padding:10px;
		border:1px solid #fff;
		-moz-border-radius:3px;
		-khtml-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		background:#ccc;
		margin:10px;
		width:500px;
		margin:0 auto;
	}
	form#login aside{
		float:right;
		width:200px;
	}
	form#login > div{
		float:left;
	}
	
		input, select{
			padding:3px;
			margin:3px;
		}
		input[type="submit"]{
			padding:4px;
			border:1px solid #fff;
			background:#900;
			color:#fff;
			cursor:pointer;
		}
		input[type="submit"]:hover{ background:#800;}
	
	form#userDetails input[type="password"], form#userDetails input[type="email"]{
		width:250px;
	}
	
table#sites{
	margin:10px auto;
	padding:10px;
	background:#fff;
	border:1px solid #999;
}
	table#sites th{
		padding:5px;
	}
	table#sites td{
		padding:5px;
		border:1px solid #999;
	}
	table#sites input[type="checkbox"]{
		margin:0 auto;
	}
	table#sites tr:hover{
		background:#DDD;
	}
	table#sites tr td:nth-child(2){
		text-align:center;
	}



/**footer**/
footer{
	background:#fff;
	padding-top:10px;
	margin-top:20px;
}	
	#footeraction{
		width:960px;
		padding:0 10px;
		margin:10px auto;
		position:relative;
	}
		#footeraction > div{
			width:50%;
			float:left;
		}
		#footeraction #signup a{
			text-decoration:none;
			background:#a92a09;
			color:#fff;
			padding:5px;
			font-weight:bold;
			-moz-border-radius:2px;
			border-radius:2px;
		}
			#footeraction #signup a:hover, #footeraction #signup a:focus, #footeraction #signup a:active{
				color:#dbc84f;
			}
		
		
	#footerContent{
		width:960px;
		padding:0 10px;
		margin:10px auto;
		background:url('../images/dot.png') repeat-x;
		overflow:hidden;
		position:relative;
	}
	
	#footerContent a.footercredit{
		float:right;
		margin-top:100px;
		color:#333;
	}
	
	#footerContent img.emptyCirc{
		position:relative;
		left:0;
		top:0;
		z-index:2;
	}
	
	#pacman{
		position:absolute;
		top:15px;
		left:28px;
		width:72px;
		height:72px;
		z-index:3;
	}
	#footerContent:hover #pacman{
		-webkit-animation-name: move;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 10s;
		-webkit-animation-delay:1s;
		
	}
	
	#pacman .topjaw{
		position:absolute;
		top:0;
		left:0;
	}

	#pacman .bottomjaw{
		position:absolute;
		top:0;
		left:0;
	}
	
	#footerContent:hover #pacman .topjaw{
	-webkit-transition:-webkit-transform 1s linear;
	-webkit-transform:rotate(45deg);
	-webkit-animation-name: topchomp;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: alternate;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay:1s;
	}
	#footerContent:hover #pacman .bottomjaw{
	-webkit-transition:-webkit-transform 1s linear;
	-webkit-transform:rotate(45deg);
	-webkit-animation-name: bottomchomp;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: alternate;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay:1s;
	}
	
	#dotscover{
		position:absolute;
		background:#fff;
		z-index:1;
		top:15px; 
		left:25px;
		width:42px;
		height:72px;
	}
	#footerContent:hover #dotscover{
		-webkit-animation-name: removeBg;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 10s;
		-webkit-animation-delay:1s;
	}


	@-webkit-keyframes topchomp{
		0% {-webkit-transform: rotate(45deg);}
		50% {-webkit-transform: rotate(95deg);	}
		100% {	-webkit-transform: rotate(45deg);}
	}

	@-webkit-keyframes bottomchomp{
		0% {-webkit-transform: rotate(45deg);}
		50% {-webkit-transform: rotate(-5deg);}
		100% {-webkit-transform: rotate(45deg);}
	}
	@-webkit-keyframes move {
		from {	left:28px;	}
		to {	left:1000px	}
	}
	@-webkit-keyframes removeBg {
		from {	width:	42px;	}
		to {	width:980px	}
	}
	
	
	



/**accessibility**/
a.accessibility:active, a.accessibility:focus {
	left: 0em;
	width:10em;
	border: 3px solid #FF0000;
	background-color: #fff;
	text-align:center;
	height:3em;
	line-height: 3em;
	font:1em bold Verdana, Geneva, sans-serif;
	color:#03F;
	z-index:10;
}
a.footerAccessibility {
	position: absolute;
	bottom:0;
    left: -999em;
    width: 990em;
}
a.footerAccessibility:active, a.footerAccessibility:focus {
	left: 0em;
	bottom:0em;
	width:10em;
	border: 3px solid #FF0000;
	background-color: #fff;
	text-align:center;
	height:20px;
	line-height: 20px;
	font:14px bold Verdana, Geneva, sans-serif;
	color:#03F;
}

/* positioning */
.accessibility {
	   position: absolute;
       left: -999em;
       width: 990em;
   }
#skipLink {
	display: block;
	position: absolute;
	top:0;
	left: -999px;
	height: 20px;
	padding: 10px 20px;
	z-index:999;
}
#topLink {
	display: block;
	position: absolute;
	bottom:0;
	left: -999px;
	height: 20px;
	padding: 10px 20px;
	z-index:999;
}
#skipLink:focus, #topLink:focus {
	left: 0;
}