html{
font-family: "Myriad Web Pro", verdana;
background: url(images/stripe2.png) center center;
}

h1{
padding: 0px;
margin: 0px;
font-size: 20px;
text-align: center;
}

body{
margin: 0px auto;
width: 1000px;
height: 100%;
}

#tatelogo{
position: absolute;
top: -4px;
right: 10px;
max-width: 200px;
}

img{
margin: 0px auto;
}

#startcontent{
margin: 0px auto;
margin-top:20px;
width:380px;
background: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 10px;
padding: 40px;
padding-bottom: 80px;
border: 1px solid #DDD;

}

.arrowbox{
margin: 0px auto;
display: block;
background: url(images/arrowbox.gif);
width: 295px;
height: 51px;
border: none;
font-size: 20px;
text-align: center;
line-height: 50px;	
color: white;
text-decoration: none;
-webkit-border-radius: 4px;

}

.smallarrowbox{
display: block;
background: url(images/arrowbox.gif) right bottom;
width: 51px;
height: 50px;
border: none;
float: left;

}

.arrowbox:hover{
opacity:0.8;
color: black;
}

/*CONTENT*/
.starttext{
display: block;
margin: 0px auto;
width: 295px;
}

#welcometext{
margin-top: 20px;
}

#questionmark{
font-size: 300px;
text-align: center;
width: 100%;
color: gray;
}

#tatename{
border:gray solid 1px;;
width: 242px;
padding: 0px;
margin: 0px;
display: inline-block;
font-size: 40px;
float: left;
text-transform: capitalize;

}

.character{
float: left;
width: 120px;
margin: 1px;
margin-top: 16px;
}

#leftcorner{
background-color: white;
width: 240px;
height: 240px;
position: absolute;
top:40px;
margin-left: 0px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
-webkit-border-radius: 30px;
text-align: center;
overflow: hidden;
}

#lefttatename{
display: block;
padding-top: 190px;
font-size: 40px;
width: 240px;
font-weight: bold;
height: 80px;
padding-right: 100px;
z-index: 300000;
text-align: center;
}

#arrowdown{
background: url(images/arrowdown.png) no-repeat;
width: 178px;
height: 300px;
background-position: 0px 0px;
position: absolute;
top:170px;
margin-left: 30px;
}


/*HOORAY FOR CLICK-TROUGH-FLASH IN SAFARI......*/
#fakeinfo{
cursor:pointer;
display:block; 
width: 240px; 
height:240px; 
position:absolute; 
margin-left:0px; 
top:0px;
z-index:13000; 
}

#fakearrowdown{
cursor:pointer;
display:block; 
width: 200px; 
height:150px; 
position:absolute; 
margin-left:0px; 
top:260px;
z-index:13000; 
}


/*HOORAY FOR CLICK-THROUGH-FLASH IN SAFARI...... the end*/

#plusleft{
background: url(images/plusleft.png) no-repeat;
width: 300px;
height: 178px;
background-position: 0px 0px;
position: absolute;
top:80px;
margin-left: 130px;
}

#frontpagecontent{
margin-left: 280px;
width:500px;
margin-top: 300px;
background: rgba(255, 255, 255, 0.95);
padding: 40px;
padding-bottom: 80px;
border: 1px solid #DDD;
-webkit-border-radius: 10px;
}

/*SHOP*/


#shop{
position: absolute;
margin-top: -280px;
margin-left: 255px;
width:0px;
height: 90%;
background: #D5622A;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
-webkit-border-radius: 10px;
}

#shop a{
color: white;
text-decoration: none;
}

#flashshop{
position: absolute;
top:0px;
margin-top: 55px;
margin-left: 0px;
width: 240px;
height: 240px;
overflow: hidden;
text-align: center;
background: url(images/filterensearc.png) no-repeat;
background-position: 260px 0px;
padding-top: 25px;
}

#shop-tabs{
width: 100%;
}

#tabshop{
display: block;
width: 40%;
height: 30px;
float: left;
text-align: center;
margin-left: 20px;
overflow: hidden;
line-height:30px;
background: rgba(255, 255, 255, 0.2);

}




#tabcreate{
display: block;
width: 40%;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
overflow: hidden;
}

#tabcreate:hover{
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}



.shoprow{
margin: 0 auto;
display: block;
width: 90%;
height: 60px;
background:rgba(255, 255, 255, 0.5);
margin-top: 10px;
-webkit-border-radius: 10px;
}

.first{
margin-top: 75px;
}

.shop-buttons{
text-align: center;
overflow: hidden;
padding: 1px;
float: left;
margin: 4px;
width: 10%;
height: 16px;
background:rgba(1, 1, 1, 0.5);
-webkit-border-radius: 5px;

}

#create{
display: block;
position: absolute;
top:30px;
right:0px;
background: #D5622A url(images/create-gui.png) no-repeat;
background-position: 4px 0px;
height: 650px;
width: 0px;
}

/*EINDE SHOP*/

#timeline{
position: absolute;
margin-left: 0px;
margin-top: 0px;
width:900px;
height: 0;
background: #0095DA;
overflow-x: hidden;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
-webkit-border-radius: 10px;
}

#timeline img{
position: absolute;
top: 0px;
left: 0px;
}

#timelinepart1{
opacity:1;
}

#timelinepart2{
opacity:0;
}

.close{
display: block;
background: url(images/close.png) no-repeat top right;
width: 10%;
height: 39px;
margin: 10px;
position: absolute;
right:0px;
z-index: 13000;
overflow: hidden;
opacity: 1;
}

.leftclose{
margin-top: 400px;
background: url(images/close_black.png) no-repeat top right;

}

#more1{
position: absolute;
top: 175px;
left:400px;
color: white;
}

#tate-preview{
width: 240px;
height: 240px;
background: url(offlineinterface/images/mutated-tate.png) no-repeat center center;
}

#tate-preview:hover{
-webkit-background-size: 200px 185px;
}

#tate-information{
position: absolute;
left:260px;
width: 500px;
margin-top:-240px;
text-align: left;
}

#tate-information h3{
border-bottom: 1px solid black;
margin-bottom: 4px;}

#tate-information ul, #tate-information ul il{
margin-top: 0px;
padding-top: 0px;
}

#purchasebox{
border: #DDD 1px solid;
margin-top: 0px;
padding: 10px;

}

#personalmessage{
border: #DDD 1px solid;
margin-top: 0px;
height: 100px;
padding: 10px;
font-size: 14px;
font-style: italic;
}

.tool-tip {
	color: white;
	background: #111;
	width: 340px;
	z-index: 13000;
	opacity:0.95;
	padding: 12px;
	border-left: #222 3 solid;
	border-top: #222 3px solid;
	border-bottom: #000 3px solid;
	border-right: #000 3px solid
	-webkit-border-radius: 10px;

}

.tool-title {
	font-weight: bold;
	margin: 0;
}