/* Stylesheet for the Lively cloud browser */

body {
    background: steelblue;
/*    background-image: -webkit-linear-gradient(1deg, skyblue, navy);
    background-image: -moz-linear-gradient(1deg, skyblue, navy); */
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

input {
    vertical-align:middle;
    font-weight:bold;
}

.window {
    overflow:hidden;
    display:block;
    position:absolute;
    background-color:#EEE;
    border-radius:16px 16px 0px 0px;
    -webkit-transform-origin:0 0;
}

.toolbar {
    position:absolute;
    top:0px;
    left:0px;
    height:60px;
    width:100%;
    padding:0px;
    margin:0px;
    /* background: blue url('images/ToolbarBg.png') repeat-x; */
    background: -webkit-gradient(linear, left top, left bottom, from(skyblue), to(navy), color-stop(0.05, navy), color-stop(0.95, skyblue));
    opacity:0.9;
}

.toolbarpuller {
    position:absolute;
    top:60px;
    left:6px;
    opacity:0.6;
}

.toolbarbutton {
    margin:10px 10px 10px 10px;
    height:40px;
    border-style:inset;
    border-color:#AAA;
    border-width:2px;
    border-radius:8px;
    -webkit-transition: -webkit-transform 0.5s;
}

.toolbarinputbutton {
    float:right;
    margin:10px 10px 10px 10px;
    height:40px;
    background-color:#FFF;
    border-style:inset;
    border-color:#AAA;
    border-width:2px;
    border-radius:8px;
    -webkit-transition: -webkit-transform 0.5s;
}

.toolbarfield {
    position:absolute;
    overflow:hidden;
    top:0px;
    margin:25px 10px 10px 10px;
    width:410px;
    height:60px;
    line-height:60px;
    color:#EEE;
    font:24px arial bold, sans-serif;
    text-align:center;
    vertical-align:middle;
}

.header {
    height:60px;
    background: #AAA url('images/HeaderBg.png') repeat-x;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#EEE), color-stop(0.1, #EEE), color-stop(0.95, #888)); */
    border-style:inset;
    border-color:#AAA;
    border-width:4px;
    border-radius:16px 16px 0px 0px;
}

.headertitle {
    position:absolute;
    margin-left:10px;
    margin-top:15px;
    /* width:680px; */
    width:80%;
    height:32px;
    overflow:hidden;
    font:24px arial bold, sans-serif;
}

.minimizebutton {
    float:right;
    margin-right:8px;
    margin-top:14px;
    -webkit-transition: -webkit-transform 0.5s;
}

.closebutton {
    float:right;
    margin-right:8px;
    margin-top:10px;
    -webkit-transition: -webkit-transform 0.5s;
}

.navibutton {
    margin-left:6px;
    margin-top:6px;
    width:40px;
    -webkit-transition: -webkit-transform 0.5s;
}

.urlbar {
    position:absolute;
    top:-68px;
    /* width:804px; */
    width:100%;
    height:60px;
    background: #AAA url('images/HeaderBg.png') repeat-x;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#EEE), color-stop(0.1, #EEE), color-stop(0.95, #888)); */
    border-style:inset;
    border-color:#AAA;
    border-width:4px;
    border-radius:16px 16px 0px 0px;
}

.urlbarpuller {
    position:absolute;
    top:68px;
    left:380px;
    opacity:0.6;
}

.urlfield {
    margin-left:2px;
    margin-top:8px;
    /* width:600px; Should be 616px, but does not fit on iPad */
    width:72%;
    height:40px;
    border-radius:6px;
    font:24px arial bold, sans-serif;
    vertical-align:middle;
}

.loadbutton {
    width:76px;
    height:46px;
    float: right;
    /* margin-right:6px; */
    margin-right:12px;
    margin-top:8px;
    font:20px arial bold, sans-serif;
}

.content {
    /* width:804px; */
    /* width:100%; */
    overflow:hidden;
    background-color:#EEE;
    border-style:inset;
    border-color:#AAA;
    border-width:4px;
}

.footer {
    height:20px;
    background: #777 url('images/FooterBg.png') repeat-x;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#EEE), color-stop(0.1, #EEE), color-stop(0.99, #777)); */
    /* text-align:center; */
    /* clear:both; */
}

.resizehandle {
    float:right;
    margin-top:3px;
    margin-right:1px;
}

/* WebKit animations */
@-webkit-keyframes scalesmaller {
    to {
        -webkit-transform: scale(0.25);
        -webkit-timing-function: ease-out;
    }
    from {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes scalelarger {
    to {
        -webkit-transform: scale(1);
        -webkit-timing-function: ease-in;
    }
    from {
        -webkit-transform: scale(0.25);
    }
}

@-webkit-keyframes rotateright {
    to {
        -webkit-transform: rotate(90deg);
        -webkit-timing-function: ease-out;
    }
    from {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotateback {
    to {
        -webkit-transform: rotate(0deg);
        -webkit-timing-function: ease-in;
    }
    from {
        -webkit-transform: rotate(90deg);
    }
}

@-webkit-keyframes fadein {
    to {
        opacity:1.0;
        -webkit-timing-function: ease-in;
    }
    from {
        opacity:0.1;
    }
}

@-webkit-keyframes fadeout {
    to {
        opacity:0.1;
        -webkit-timing-function: ease-in;
    }
    from {
        opacity:1.0;
    }
}

@-webkit-keyframes hidetoolbar {
    to {
        -webkit-transform: translateY(-60px);
        -webkit-timing-function: ease-out;
    }
    from {
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes showtoolbar {
    to {
        -webkit-transform: translateY(0px);
        -webkit-timing-function: ease-in;
    }
    from {
        -webkit-transform: translateY(-60px);
    }
}

@-webkit-keyframes hideurlbar {
    to {
        -webkit-transform: translateY(0px);
        -webkit-timing-function: ease-out;
    }
    from {
        -webkit-transform: translateY(68px);
    }
}

@-webkit-keyframes showurlbar {
    to {
        -webkit-transform: translateY(68px);
        -webkit-timing-function: ease-in;
    }
    from {
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes shakeIt {
    0% {
        -webkit-transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(-10deg);
    }
    40% {
        -webkit-transform: rotate(10deg);
    }
    60% {
        -webkit-transform: rotate(-10deg);
    }
    80% {
        -webkit-transform: rotate(10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}