*{
    margin:0;
    padding:0;
}
body {
    background-color: #fff;
}
#header{
    margin:1em;
    margin-bottom:2.5em;
}
h1 {
    font-size:2em;
}
#header h2 {
    font-style : italic;
}
#editor fieldset {
    margin: auto;
    padding: 1em;
    width: 60%;
}
#editor label {
    display : block;
    width : 30%;
    text-align : right;
    float : left;
    clear : left;
}
#editor input {
    display : block;
    float : left;
    margin-left : 1em;
    margin-bottom : .3em;
}
#original-image-field{
    width : 65%;
}
#timeline-size-field{
    width : 3em;
}
#font-size-field{
    width : 3em;
}
#editor small{
    display:block;
    float:left;
    line-height:2em;
    margin-left:.5em;
}
#editor input.done-button{
    float : right;
    clear : left;
}
.keyframe-container {
    float: left;
    margin: 2em;
}
.keyframe, 
.frame{
    width : 400px;
    height : 300px;
    overflow:hidden;
    position : relative;
}
.keyframe{
    border : 1px solid #ccc;
}
.frame {
    border : none;
}
.image-container{
    width : 394px;
    height : 294px;
    position : absolute;
    overflow : hidden;
    margin: 1px;
    background-image : url(/images/ajax-loader.gif);
    background-repeat : no-repeat;
    background-position : center center;
}
.image-container img{
    cursor : move;
    visibility : hidden;
    position : absolute;
}
.frame .image-container img{
    visibility : visible;
    cursor : auto;
}
.image-container img.dragging{
    cursor : -moz-grabbing;
}
.lol-text-label {
    position: absolute;
    cursor : move;
}
.frame .lol-text-label {
    cursor : auto;
}

.lol-text-label p{
    position : absolute;
    text-transform : uppercase;
    font-family: "Impact", "Arial Black", Arial, sans-serif;
    color: #fff;
    font-size : 100px;
    line-height : 1em;
}
.lol-text-label p.outline{
    color: #000;
}

.outline-n  { margin-top  : -5px; }
.outline-ne { margin-top  : -5px; 
              margin-left :  5px; }
.outline-e  { margin-left :  5px; }
.outline-se { margin-left :  5px; 
              margin-top  :  5px; }
.outline-s  { margin-top  :  5px; }
.outline-sw { margin-top  :  5px; 
              margin-left : -5px; }
.outline-w  { margin-left : -5px; }
.outline-nw { margin-top  : -5px; 
              margin-left : -5px; }
              
.corner-resize-handler{
    background-color: #ccc;
    position : relative;
    top : 100%;
    left : 100%;
    margin-left: -16px;
    margin-top: -16px;
    width : 16px;
    height :16px;
    cursor : nwse-resize;
    visibility : hidden;
    background-image : url(/images/resize-canvas-handler.gif);
}
.zoom-label{
    float : left;
    line-height : 2.5em;
    margin-right : 1em;
}
.slider{
    float:left;
    width:295px;
    border-bottom: 2px solid #ccc;
    visibility : hidden;
}
.slider-handle{
    position:relative;
    cursor:ew-resize;
    left:50%;
    width:10px;
    height:18px;
    top:10px;
    background-color : #ccc;
    background-image : url(/images/zoom-slider-handler.gif);
    visibility : hidden;
}

#back-to-editor-text{
    margin-left : 2em;
    background-color : #666;
    color : #fff;
    padding : 0.3em;
    cursor : pointer;
}
#preview {
    display:none;
}
#previa{
    width: 100%;
}
#tenso-preview{
    margin:auto;
}
#preview fieldset{
    width:100%;
    margin-top:2em;
    text-align:center;
    border:none;
}
#canvastest{
    border : 1px solid #f00;
    width : 100%;
}

#final-image{
    display : none;
}
/*------ FOOTER -------*/

.footer{
    clear:left;
    font-size:x-small;
    text-align:center;
    margin-top:8em;
}
.footer em,
.footer em a{
    color:#777;
}
.footer p{
    margin-bottom:1em;
}
.validator-button img{
    border:none;
}