@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

body{
margin: 0;
background-color: #333;   
}
.wrap{
text-align: center;    
}



.title{
position: relative;
font-family: 'Playfair Display', sans-serif ;
color: #393939;
line-height: 90%;
font-size: 2.373em;
margin: .93em 0 0.5em 0;
letter-spacing: 0.39em;    
text-shadow: 0px -1px 1px rgba(255,255,255,0.47);
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#ffffff,offx=0,offy=-1)"; /* IE8 */
display:block; /* IE */
}

.title a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.version{
font-style: italic;
text-align: center;
font-family: 'Droid Sans Mono', sans-serif ;
color:#666;
font-size:0.7em;
margin-bottom: 1em;
}

.footer{
clear: both;
font-family: 'Droid Sans Mono', sans-serif ;
color:#777;
font-size:0.75em;
line-height: 1.4em;
margin-bottom: 60px;
}
.twitter-share-button{
margin-top: 5px;   
}

a:link { color: #EEE; text-decoration: none; }
a:visited { color: #EEE; }
a:hover { color: #00ffff; }
a:active { color: #0080ff; }

.editor_wrap{
text-align: left;
}

.sampler{
float: right;
font-family: 'Droid Sans Mono', sans-serif ;
color:#999;
font-size:0.8em; 
margin:0px 0px 10px 0px;
}

#idStrlength{
font: bold 34px Arial, sans-serif;
color: #777;
font-size: 1.73em;
margin: 0 0 0.8em 0;
letter-spacing: -1px;
}

#canvas0{
margin-bottom: 30px;    
}

.canvas_wrap{
clear: both;
}

.editor_wrap{
width: 720px;
margin: 0 auto;
}

.editor_textarea{clear: both;}
.editor_tools{}
.editor_remain{
float: right;
}
.editor_btn{
float: left;
}
#gif_image{
margin-bottom: 25px;
}
textarea#inputtitle{
border:0;
padding:0px 5px;
font-size:1em;
font-family: 'Droid Sans Mono', sans-serif ;
color:#FFF;
background-color: #232323;
border:solid 0px #ccc;
margin:0 0 10px;
width:720px;   
height:2em;
line-height:1.6em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
resize: none; 
}

textarea::-webkit-input-placeholder {
    color: #999;
}
textarea:-moz-placeholder {
    color: #999;
}
textarea::-moz-placeholder {
    color: #999;
}
textarea:-ms-input-placeholder {
    color: #999;
}

#editor{
border:0;
padding:0px 5px;
font-size:1em;
font-family: 'Droid Sans Mono', sans-serif ;
color:#FFF;
background-color: #232323;
border:solid 0px #ccc;
margin:0 0 10px;
width:710px;   
height:10em;
line-height:1.7em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
overflow: scroll;
overflow-x:hidden;
resize: vertical;
}

button{
border:solid 0px #ccc;
background-color: #999;
padding:0px 15px;
margin:0 0 0px;
font-family:Arial, sans-serif;
font-size:1em;
color:#333;
cursor:pointer;
height:40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
button:hover {
background-color: #00ffff;
color: #000;
}

#tweet{
margin-left: 6px;
}
#savefile{
margin-left: 6px;
}

.file {
float: left;
display: inline-block;
overflow: hidden;
position: relative;
border:solid 0px #ccc;
background-color: #999;
padding:5px 5px;
margin:0px;
margin-bottom: 10px;
font-family:Arial, sans-serif;
font-size:1em;
font-weight:bold;
color:#333;
cursor:pointer;
vertical-align:middle;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
/*height:40px;*/
}
.file:hover {
background-color: #00ffff;
color: #000;
}

.file input[type="file"] {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
position: absolute;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
font-size: 100px;
z-index: 999;
height: 300px;
cursor: pointer;
}

.list_btn {
	margin-bottom: 10px;
}

#result{
width:720px;
margin: 0 auto;
display:none;
}
@media screen and (min-width: 1024px) {
	#result{
		display:block;
	}
	.list_btn {
		display:none;
	}
}
@media screen and (max-width: 1024px) {
	#result{
		display:none;
	}
	.list_btn {
		display:block;
	}
}
#result img{
margin-bottom: 8px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#list_one{
text-align: center;
/*background-color: #111;*/
font-size:0.7em;
font-family:Arial, sans-serif;
letter-spacing: 0.189em;   
color:#999;
margin-bottom: 20px;
padding-bottom: 0px;
}
#list_one_name{
background-color: #232323;
padding: 4px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}