/* by JonWarner.Net */

body
{
    margin: 0;
    font-family: Arial;
    width: 100%;
    height: 100%;
    background-color: PaleGoldenRod;
}

#header
{
    height: 30px;
    position: absolute;
    width: 100%;
    z-index: 100;
    border-bottom: 2px ridge BlanchedAlmond;
    background: lightblue url(gfx/criss-cross.png) repeat;
}

#headerTitle
{
    color: White;
    font-size: 24px;
    margin-left: 10px;
    text-shadow: 1px 1px 2px black;
}

#headerTitle .titleSub
{
    margin: 10px 0 0 10px;
    font-size: 14px;
}

#content
{
    width: 100%;
    height: 100%;
    min-width: 700px;
    min-height: 600px;
    overflow: hidden;
    position: absolute;
}

#sidebar
{
    width: 198px;
    height: 100%;
    float: left;
    position: absolute;
    border-right: 2px ridge BlanchedAlmond;
    background: gray url(gfx/background.png) repeat;
}

#properties
{
    top: 30px;
    position: relative;
}

#footer
{
    bottom: 14px;
    color: #444444;
    font-size: 12px;
    left: 4px;
    position: absolute;
}

#footer a
{
    color: #444444;
}

#animationBar
{
    left: 200px;
    bottom: 0;
    height: 60px;
    width: 100%;
    z-index: 100;
    position: absolute;
    border-top: 2px ridge BlanchedAlmond;
    background: gray url(gfx/background.png) repeat;
}

#workspace
{
    left: 200px;
    width: 100%;
    height: 100%;
    float: right;
    position: absolute;
    background-color: blue;
    background: gray url(gfx/grid.png) repeat;
}

#transformProperties
{
    margin: 10px;
    width: 180px;
    font-family: Arial;
    border-collapse: collapse;
}

.property-title
{
    padding: 2px;
    font-size: 14px;
    vertical-align: top;
    border-top: 2px groove white;
}

.property-title + .property-value
{
    border-top: 2px groove white;
}

.property-value
{
    padding: 2px;
    font-size: 14px;
    vertical-align: top;
}

.property-input
{
    width: 65px;
    padding: 0 2px;
    border: 1px solid lightgray;
    border-radius: 4px 4px 4px 4px;
    font-family: Arial;
    font-size: 16px;
    box-shadow: 1px 1px 1px gray;
}

.property-block fieldset
{
    padding: 5px;
    border: 2px ridge white;
    border-radius: 5px;
}

.property-button
{
    padding: 0 2px;
    border: 2px groove white;
    border-radius: 3px;
}

.lightbox-fade
{
    background: transparent url(gfx/blur.png) repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2000;
}

.lightbox
{
    top: 10%;
    position: relative;
    background: gray url(gfx/background.png) repeat;
    width: 600px;
    height: 400px;
    box-shadow: 3px 3px 10px #444444;
    z-index: 2001;
    padding: 5px;
    margin: 0 auto;
    border-radius: 5px;
}

.lightbox-close
{
    top: 5px;
    right: 5px;
    padding: 4px;
    position: absolute;
    border-radius: 5px;
}
img.lightbox-close:hover
{
    cursor: pointer;
    box-shadow: 1px 1px 2px black;
}

.lightbox-title
{
    margin: 0;
}

.welcome-project-type-icon
{
    float: left;
    width: 60px;
    height: 60px;
    margin: 0 5px 0 0;
}

img.welcome-project-type-icon:hover
{
    cursor: pointer;
    transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}

#welcomeMenu
{
}

#welcomeMenu td
{
    width: 33%;
    vertical-align: top;
}

#welcomeMenu fieldset
{
    border: 2px ridge white;
    border-radius: 5px;
}

#welcomeMenu legend
{
    font-size: 0.8em;
}

#welcomeMenu fieldset p
{
    font-size: 0.8em;
    margin: 0 0 1em;
}

.welcome-popular-projects
{
    margin: 0;
    padding: 0 0 0 20px;
    list-style-image: url("gfx/list-icon.png");
}

.welcome-popular-projects li
{
    -moz-transition: background-color 0.2s ease-out;
}

.welcome-popular-projects li:hover
{
    background-color: lightblue;
}

.welcome-popular-projects li > a
{
    color: #404040;
    display: block;
}

#skeletonProperties .property-input, #boneProperties .property-input
{
    width: 88px;
}


.transform-property-angle .property-value
{
    padding-left: 19px;
}


.jBone-Designer-Skeleton
{
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -150px;
    width: 98px;
    height: 98px;
    position: relative;
    border: 2px ridge white;
    border-radius: 3px;
}



/* jBone */
.jbone-bone
{
    height: 1px;
    display: inline-block;
    position: relative;
    border-width: 16px 20px;
    border-image: url('gfx/bone.png') 16 20 16 20 repeat;
    -moz-border-image: url('gfx/bone.png') 16 20 16 20 repeat;
    -webkit-border-image: url('gfx/bone.png') 16 20 16 20 repeat;
}

.jbone-bone-start-wrapper
{
    top: -13px;
    left: -22px;
    float: left;
    padding: 10px;
    position: absolute;
}

.jbone-bone-end-wrapper
{
    top: -13px;
    right: -22px;
    float: right;
    padding: 10px;
    position: absolute;
}

.jbone-bone-endpoint
{
    width: 5px;
    height: 5px;
    border: 1px solid gray;
    display: inline-block;
    border-radius: 3px;
}
.jbone-bone-start-wrapper:hover .jbone-bone-endpoint, .jbone-bone-end-wrapper:hover .jbone-bone-endpoint
{
    border-color: Red;
}

/* Designer */
.jbone-designer img
{
    border: 1px solid gray;
}

.jbone-designer img.selected
{
    border: 1px solid red;
}

.jbone-gizmo
{
    z-index: -100;
    left: 2px;
    top: 2px;
    position: absolute;
}