/* 67a7e3 to 4d7daa */
/* e39e37 to c3882f*/
body {
    padding: 10px;
}
h1 {
    background-color: #4d7daa; 
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 10px;
    font-family: "Trebuchet MS";
    margin: 0 0 20px 0;
    background-image: url(background_header.png);
    background-repeat: repeat-x;
}
    h1 a {
        color: #fff;
        background-color: transparent;
        text-decoration: none;
    }
    h1 a:hover {
        text-decoration: underline;
    }
    
#footer {
    clear: both;
    background-color: #67a7e3;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 10px;
    font-family: "Trebuchet MS";
    font-size: .9em;
    margin: 20px 0 20px 0;
    background-image: url(background_header.png);
    background-repeat: repeat-x;
}
    #footer p {
        margin: 0;
        text-align: right;
    }
    #footer a {
        color: #fff;
        background-color: inherit;
        text-decoration: none;
    }
    #footer a:hover {
        text-decoration: underline;
    }
    #footer a.google_moderator {
        background-image: url(google_moderator.png);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
    }
    #footer a.email {
        background-image: url(email.png);
        background-repeat: no-repeat;
        background-position: left top;
        padding-left: 20px;
    }
    #footer a.neolao {
        background-image: url(neolao.png);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
    }
p.introduction {
    font-size: 1.2em;
    margin: 0 270px 0 0;
    background-image: url(intro_bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    padding:  10px;
    background-color: #fa5c05;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-family: "Trebuchet MS";
}
ul#templates {
    background-image: url(templates_bg.png);
    background-repeat: no-repeat;
    background-position: 30px 0;
    list-style: none;
    padding: 20px 20px 0 0;
    margin: 0 250px 0 0;
    display: block;
}
    ul#templates li {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    ul#templates li:hover {
        /*
        border-right: solid 3px #fff;
        border-bottom: solid 3px #fff;
        margin-left: -8px;
        margin-top: -13px;
        */
    }
        ul#templates li a {
            /*border: solid 5px #67a7e3;*/
            display: block;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            /*
            -webkit-box-shadow: 1px 1px 4px #000;
            -moz-box-shadow: 1px 1px 4px #000;
            box-shadow: 1px 1px 4px #000;
            */
            background-image: url(background_thumb.png);
            background-repeat: repeat-x;
            background-color: #4d7daa;
            color: #fff;
            padding: 5px 5px 0 5px;
        }
        ul#templates li a:hover {
            /**/
            -webkit-box-shadow: 2px 2px 5px #888;
            -moz-box-shadow: 2px 2px 5px #888;
            box-shadow: 2px 2px 5px #888;
            /**/
            background-image: url(background_thumb_hover.png);
            background-repeat: repeat-x;
            padding: 5px 5px 0 5px;
            background-color: #c3882f;
            color: #fff;
        }
            ul#templates li a img {
                border: solid 2px #eee;
				width: 100px;
				height: 100px;
            }
            ul#templates li a:hover img {
                /*
                width: 110px;
                height: 110px;
                */
            }
#sidebar {
    float: right;
    background-color: #4d7daa;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: "Trebuchet MS";
    width: 230px;
    padding: 10px;
    background-image: url(background.png);
    background-repeat: repeat-x;
    background-position: top;
    margin-bottom: 10px;
}
    #sidebar h2 {
        margin: 0 0 10px 0;
        clear: both;
    }
    #sidebar ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
        #sidebar ul li {
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
            #sidebar ul li a {
                display: block;
            }
                #sidebar ul li a img {
                    border: solid 2px #fff;
                }
                #sidebar ul li a:hover img {
                    border: solid 2px #e39e37;
                }
/******************************************************************************/
/* EDITOR                                                                     */
/******************************************************************************/
#editor {
    float: left;
    font-family: Arial;
    margin-bottom: 10px;
}
    #editor table {
        border-collapse: collapse;
        width: 100%;
        background-color: #67a7e3;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
        #editor table thead {
            display: none;
        }
        #editor table tfoot {
            display: none;
        }
        #editor table td {
            vertical-align: top;
            padding: 8px;
            border-bottom: solid 1px #fff;
            font-size: .8em;
        }
        #editor table td.name {
            padding: 10px;
            font-size: 1em;
            text-align: right;
            border-right: solid 1px #fff;
            font-weight: bold;
        }
    
    #editor textarea {
        width: 99%;
        height: 6em;
    }
    #editor input.size {
        width: 3em;
    }
    #editor input.color {
        width: 6em;
    }
    #editor #colorpicker {
        position: absolute;
        background-color: #fff;
        border: solid 1px #000;
    }
    #editor ul {
        list-style: none;
        margin: 0;
        padding: 0;
        clear: both;
    }
        #editor ul li {
            display: block;
        }
        #editor ul li * {
            float: left;
            margin-right: 3px;
        }
        #editor ul li span {
            padding: 3px 2px;
        }
    #editor #link a {
        background-image: url(edit/images/picture_link.png);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
        font-weight: bold;
        font-size: .9em;
        color: #00f;
        background-color: #fff;
    }
        #editor #link a:hover {
            text-decoration: none;
            color: #33f;
            background-color: #fff;
        }
    #editor .tinyurllink {
        background-image: url(edit/images/picture_link.png);
        background-repeat: no-repeat;
        background-position: 2px center;
        padding: 2px 2px 2px 22px;
        font-weight: bold;
        font-size: .9em;
        color: #00f;
        background-color: #fff;
        border: solid 1px #999;
        font-family: Courier, monospace;
        width: 20em;
    }
    #editor #tinyurl-submit {
        margin-right: 5px;
    }
    #editor .feature {
        font-size: .9em;
        color: #333;
        background-color: #a7f7f3;
        padding: 5px;
        margin-top: 50px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
        #editor .feature p {
            margin: 0 0 5px 0;
        }
        #editor .feature pre {
            margin: 0 0 5px 0;
        }
        #editor .feature input {
            display: block;
            width: 90%;
            margin-bottom: 10px;
        }
#preview {
    float: left;
    padding: 10px;
    background-color: #67a7e3;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
}
    #preview a img {
        border: solid 5px #fff;
    }
    #preview a:hover img {
        border: solid 5px #e39e37;
    }
    
    #preview #ui {
        position: absolute;
    }
        #preview #ui .ui-target{
            width: 15px;
            height: 15px;
            cursor: move;
        }


.ui-slider { 
    width: 200px; 
    height: 23px; 
    position: relative; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url(edit/images/slider-bg.png); 
    float: left;
}
.ui-slider-handle { position: absolute; height: 23px; width: 12px; top: 0px; left: 0px; background-image: url(edit/images/slider-handle.gif); }
.ui-slider-handle-active { border: 1px dotted black; }
.ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
.ui-slider-range { position: absolute; background: #50A029; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }

.ui-resizable-se {
    background-image: url(edit/images/resizable-se.png);
    width: 10px;
    height: 10px;
    bottom:0;
    cursor:se-resize;
    position:absolute;
    right:0;
}