/*

* CSS Table of Contents

* 

* 1. Regular Reset Styles

* 2. HTML5 Reset Styles

etc



*/



/* 1. Reset */



html, body, div, span, object, h1, h2, h3, h4, h5, h6, p,  pre,a,  code, del, em, img, strike, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0;padding: 0; border: 0; font-size: 100%; font: inherit;	vertical-align: baseline;}





/* 2. HTML5 display-role reset for older browsers */



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;}

ol, ul {list-style: none;}

strong {font-weight: bold;}

em {font-style: italic;}

html, body, div, ul {	margin: 0;	padding: 0;}

.clear{clear:both}

a {outline: 0;}





/* 3. Global Styles */

html{

	overflow-y: scroll;

}

body { 

	margin:0 0 10px 0; 

	font-size: 100%;  

	font-family:Helvetica, Arial, sans-serif; 

}

	

.socialbar{ 

	display: block; 

	float:left; 

	background:  rgba(255, 255, 255, .9);

	padding: 10px 0 ; 

	height:50px;  

	width:100%;	 

}



.logo{

	display: block;  

	width:144px;

	margin:10px 0 0 30px;

}



.socialbar p{

	font-size: 13px;

	color: #be3a00;

	padding:20px 0 0 40px;

}

	

.twitter-share-button{

	margin:-30px 20px 0 30px;

	float: right;

	

}





.wrapper{

	margin:0 auto; 

	position: relative; 

}



.preloading{

display:none;

background-image: 

url(../images/chara/32.jpg),

url(../images/chara/33.jpg),

url(../images/chara/34.jpg),

url(../images/chara/35.jpg),

url(../images/chara/36.jpg),

url(../images/chara/37.jpg),

url(../images/chara/40.jpg),

url(../images/chara/41.jpg),

url(../images/chara/42.jpg),

url(../images/chara/45.jpg),

url(../images/chara/46.jpg),

url(../images/chara/47.jpg),

url(../images/chara/48.jpg),

url(../images/chara/49.jpg),

url(../images/chara/50.jpg),

url(../images/chara/51.jpg),

url(../images/chara/52.jpg),

url(../images/chara/53.jpg),

url(../images/chara/54.jpg),

url(../images/chara/55.jpg),

url(../images/chara/56.jpg),

url(../images/chara/57.jpg),

url(../images/chara/58.jpg),

url(../images/chara/59.jpg),

url(../images/chara/60.jpg),

url(../images/chara/62.jpg),

url(../images/chara/63.jpg),

url(../images/chara/64.jpg),

url(../images/chara/65.jpg),

url(../images/chara/66.jpg),

url(../images/chara/67.jpg),

url(../images/chara/68.jpg),

url(../images/chara/69.jpg),

url(../images/chara/70.jpg),

url(../images/chara/71.jpg),

url(../images/chara/72.jpg),

url(../images/chara/73.jpg),

url(../images/chara/74.jpg),

url(../images/chara/75.jpg),

url(../images/chara/76.jpg),

url(../images/chara/77.jpg),

url(../images/chara/78.jpg),

url(../images/chara/79.jpg),

url(../images/chara/80.jpg),

url(../images/chara/81.jpg),

url(../images/chara/82.jpg),

url(../images/chara/83.jpg),

url(../images/chara/84.jpg),

url(../images/chara/85.jpg),

url(../images/chara/86.jpg),

url(../images/chara/87.jpg),

url(../images/chara/88.jpg),

url(../images/chara/89.jpg),

url(../images/chara/90.jpg),

url(../images/chara/95.jpg);



}

/** 

#container { display: block; margin:0; }

.content{display: block; }

  **/

  

  /*styling the input to pretty much be invisible*/

.spaz

{

    color:#fff;

 

     display: block; float:left;

    border:none;

    outline:none;

    margin:0 0 0 -900px;



}

.spaz:hover

{

    cursor:default;

}



/* char container*/

#keys 

{    

    color:#000;

    position: relative;

    z-index: 200;

    display:block;

    height:500px;

    max-width:1600px;

    padding:10px 0;

    margin:50px 0;

}





.typesomething{ 

	position:fixed; 

	top:300px; 

	left: 120px;  

	display: block; 

	z-index: 1;

	width:100%;



	/**  background: rgba(255, 255, 255, .8); **/

}



.typesomething p{

	color: rgba(76, 0, 14, .7); 

/**  	background: rgba(255, 255, 255, .4); **/

	font-size: 70px; 

	padding: 10px 0 15px 10px;

	font-weight: bold; 

	/**   text-shadow: 1px 1px 2px rgba(130, 44, 58, .4); **/

}



#keys:hover

{

    cursor:text;

}



/*simulated caret*/

#caret, #caret_placeholder{

    width:90px;

    height:350px; 

    margin:0 0 0 0;

    background:#fe8344;

    display:inline-block;

    float:left;

}









​/* footer*/



.footerbar { 

	

	float: left; 

	display: block;

	height:50px; 

	background:  rgba(255, 255, 255, .9);

	width:100%;   

}

.footerbar p{

	font-size: 13px;

	width:70%; 

	position: fixed;

	bottom:0;

	right:0;

	line-height: 150%;

	padding: 5px 10px 15px 10px;



	 color: rgba(76, 0, 14, .7);

	

	text-align: right;

}



.footerbar p a{color: rgba(76, 0, 14, .7);}

/*animations*/

.letterblock{ 

	display:inline-block;

    float:left;

    padding:10px 0;

    height:330px;

    width:236px;

}



.letterblock.animation32{

	width: 100px;

}