/* Page structure */
html, body { padding: 0; margin: 0; height:100%; overflow: hidden; }
body { background: #DD8822 url(main-background.jpg) no-repeat; }
.clear { clear: both }
.centerContainer { 	float: left; position: absolute; left: 50%; }
.rightAbsolute { float: right; }
.leftAbsolute { float: left; }
.centerAbsolute { text-align:center; }
.hidden { display: none }

/* Header */
#topPane { height: 70px; position: relative; }
    #topPaneLinks { float: right; line-height: 70px; font-size: 125%; padding-right: 1em; }
        #topPaneLinks a { padding: 0.2em 1em; color: White; text-shadow: rgba(0,0,0,0.75) 0px 1px 3px; border-radius: 0.5em; -moz-border-radius: 0.5em; }
            #topPaneLinks a:hover { color: Yellow; background-color: rgb(81, 29, 0); }
    #mainTitle { float: left; line-height: 70px; padding-left: 1em; font-size: 160%; font-weight: bold; color: #400; text-shadow: rgba(230,230,230,0.6) 0 1px 0 }
    #topPane #tutorialPickerDropdown {    
        float: left; position: relative; left: -50%;
        height: 2em; margin-top: 1.2em;
        line-height: 2em;
        font-weight: normal;
        font-size: 100%;
        color: Black;
        padding: 0 3em 0 1em; font-weight: normal; cursor: pointer;
    }   
        #topPane #tutorialPickerDropdown .tutorialName { font-weight: bold; }     
        #topPane #tutorialPickerDropdown .downArrow {
            position: absolute; right: 0; top: 0;
            width: 40px; height: 40px;
            background: url(arrowdown.png) no-repeat right top;
        }
        

#dragShield { width:100%; height:100%; z-index: 1000; position: absolute; display: none; cursor: move; }
#bodyPane { }
    .handle.horizontal { cursor: s-resize; }
    .handle.vertical { cursor: e-resize; }
    .leftCol { padding-right: 4px; padding-top: 6px; height: 100%; overflow: hidden; position: relative; }
        .leftColTop { border-left: 0; border-top: 0; }
        .leftColBottom { border-left: 0; border-bottom: 0 }
        .pane {  }
    .rightCol { padding-left: 4px; padding-top: 6px; height: 100%; overflow: hidden; position: relative; }
        .rightColTop { border-right: 0; border-top: 0; position: relative; overflow-x: hidden; }
        .rightColBottom { border-right: 0; border-bottom: 0; position: relative; overflow-x: hidden; }
    .centralSplitter { height: 100%; }
    .pane { border: 1px solid gray; background-color: White; }
        .pane.leftColTop, .pane.leftColBottom { margin-left: 0.3em; }
        .pane.leftColTop { background-color: #fcede5; border-radius: 1em; border-width: 0; }
        .showShadows .pane {
            -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
            -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
            box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
        }
    

/* Buttons */
.smoothButton {
    background: #e3d5c3; /* Old browsers, before background img is loaded */
    background-image: url(dropdown-background.jpg);
    background-repeat: repeat-x;
    background: -moz-linear-gradient(top, #e3d5c3 0%, #fff3e5 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3d5c3), color-stop(60%,#fff3e5)); /* Chrome, Safari4+ */
    background: -ms-linear-gradient(top, #e3d5c3 0%,#fff3e5 60%); /* IE10+ */
    background: linear-gradient(top, #e3d5c3 0%,#fff3e5 60%); /* W3C */
    border: none;
    border-top: 1px solid rgba(255,255,255,0.65);
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    -webkit-box-shadow: 0px 2px 6px rgba(40,20,0,0.6);
    -moz-box-shadow: 0px 2px 6px rgba(40,20,0,0.6);
    box-shadow: 0px 2px 6px rgba(40,20,0,0.6);
    white-space: nowrap;
    color: #333;
}
.smoothButton:hover { background-color: White; color: Black; background-image: none; cursor: pointer; box-shadow: 0px 2px 4px rgba(40,20,0,0.7) !important; }
.smoothButton:disabled, .smoothButton:disabled:hover { color: #aaa; background-color: #e3d5c3; background-image: none; cursor: default; box-shadow: 0px 2px 4px rgba(40,20,0,0.2) !important; }

.wideButton {
    display:block; cursor: pointer;
    padding: 0.7em 0 0.6em 0; text-align: center; 
    border-top: 1px solid white;
    background-color: #FCF9F7; 
    background: #fefcfa url(button-normal-background.jpg) repeat-x left bottom; /* Old browsers */
    background: -moz-linear-gradient(top, #fefcfa 20%, #ece9e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#fefcfa), color-stop(100%,#ece9e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefcfa 20%,#ece9e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefcfa 20%,#ece9e7 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fefcfa 20%,#ece9e7 100%); /* IE10+ */
    background: linear-gradient(top, #fefcfa 20%,#ece9e7 100%); /* W3C */        
    -webkit-box-shadow: 0px 1px 4px rgba(40,20,0,0.4);
    -moz-box-shadow: 0px 1px 4px rgba(40,20,0,0.4);
    box-shadow: 0px 1px 4px rgba(40,20,0,0.4);
    color: #5A4D43 !important; font-weight: bold; text-shadow: white 0 1px 0;
}
    .wideButton.weak { font-weight: normal }
    .wideButton.top { border-top-left-radius: 0.75em; border-top-right-radius: 0.75em; -moz-border-radius-topleft: 0.75em; -moz-border-radius-topright: 0.75em; }
    .wideButton.bottom { border-bottom-left-radius: 0.75em; border-bottom-right-radius: 0.75em; -moz-border-radius-bottomleft: 0.75em; -moz-border-radius-bottomright: 0.75em; }
    .wideButton.left { border-top-left-radius: 0.75em; border-bottom-left-radius: 0.75em; -moz-border-radius-topleft: 0.75em; -moz-border-radius-bottomleft: 0.75em; }
    .wideButton.right { border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em; -moz-border-radius-topright: 0.75em; -moz-border-radius-bottomright: 0.75em; }
    .horizontalButtonSet50 { height: 3em; }
    .horizontalButtonSet50 .wideButton { width: 50%; float:left; margin: 0 !important; }
    .wideButton:hover {
        text-decoration: none !important;
        background-color: #ddd;
        background: #eeecea; /* Old browsers */
        background: -moz-linear-gradient(top, #eeecea 20%, #d0ccca 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#eeecea), color-stop(100%,#d0ccca)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #eeecea 20%,#d0ccca 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #eeecea 20%,#d0ccca 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #eeecea 20%,#d0ccca 100%); /* IE10+ */
        background: linear-gradient(top, #eeecea 20%,#d0ccca 100%); /* W3C */
    }
    .wideButton.primary 
    {
        color: #333 !important;
        text-shadow: rgba(255,255,255,0.7) 0 1px 1px;
        background: rgb(241,231,103) url(button-primary-background.jpg) repeat-x left bottom; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
        background: linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */        
    }
    .wideButton.primary:hover 
    {
        background: rgb(255,249,196); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,249,196,1) 0%, rgba(255,231,147,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,249,196,1)), color-stop(100%,rgba(255,231,147,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,249,196,1) 0%,rgba(255,231,147,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,249,196,1) 0%,rgba(255,231,147,1) 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, rgba(255,249,196,1) 0%,rgba(255,231,147,1) 100%); /* IE10+ */
        background: linear-gradient(top, rgba(255,249,196,1) 0%,rgba(255,231,147,1) 100%); /* W3C */        
    }
    .wideButton .moveRight {
        float:right; margin: -1px 11px 0 0;
        width: 22px; height: 22px; background-image: url(arrowright.png);
    }
    .overlay .wideButton {
        margin: 1.1em 0 0.2em 0; padding: 0.5em 0 0.4em 0;
    }

/* Code runner pane */
.codeRunnerFrame { height: 100%; width: 100%; }
.codeRunnerControls .leftAbsolute { padding-left: 0.5em; }
.codeRunnerControls .rightAbsolute { margin-top: -1px; }
    .codeRunnerControls .runCode { height: 26px; padding: 0; line-height:25px; padding: 0; }
        .codeRunnerControls .runCode div { width: 9.3em; text-align: right; padding-right:1em; position: relative; }
        .codeRunnerControls .runCode .play { background: url(play.png); width: 16px; height: 16px; position: absolute; left: 0.8em; top: 50%; margin-top: -8px; }
            .codeRunnerControls .runCode:disabled .play { opacity:0.4; filter:alpha(opacity=40) }
            .codeRunnerControls .runCode .play.spinner { background: url(spinner.gif); }
        .codeRunnerControls .runCode small { color: Gray; }
        
/* Address bar */
.addressBar { color: #444; overflow: hidden; white-space: nowrap; }
.addressBar input { width: 15em; vertical-align: middle; padding-left: 0.4em; height: 1.4em; margin-top: -2px; }
    .addressBar label { margin-right: 0.25em; }
    
/* Overlays captions*/
.overlayCaption 
{
    position: absolute;
    right: 0;
    z-index: 100;
    background-color: #ddd;
    color: #778;    
    width: 6em;
    padding: 0.5em 0.4em 0.5em 0.7em;
    text-align: center;
    border: 1px solid #ccc;
    border-top: none;
    -moz-border-radius-bottomleft: 0.75em;
    border-bottom-left-radius: 0.75em;       
    -moz-box-shadow: 2px 1px 6px #aaa !important;
    -webkit-box-shadow: 2px 1px 8px #aaa !important;
    box-shadow: 2px 1px 9px #aaa; 
    text-shadow: #f7f7f7 0 1px 0;   
    font-weight: normal;
}

/* Tutorial wizard */
.paneHeader { background-color: #e5cdc1; padding: 0 0.25em; height: 33px; line-height: 34px; color: #A71500; font-size: 0.9em; font-weight: bold; }
.tutorial .tutorialStep  { padding: 1em 1em 2em 1em; font-size: 0.95em; line-height: 1.5em; }
    .tutorial .tutorialStep pre { line-height: 1em; }
.tutorial .tutorialStep li { margin-bottom: 1em; }
.tutorial .tutorialStep li li { margin-bottom: 0; }
.tutorial .tutorialNavigation { line-height: 34px; }
    .tutorial .tutorialNavigation button { margin: 0 0.1em; cursor: pointer; height: 26px; padding: 0; line-height: 26px; border: 2px solid transparent; background-color: transparent; margin-top: 4px; border-radius: 0.5em; -moz-border-radius: 0.5em; padding: 0 0.3em; }
    .tutorial .tutorialNavigation button:hover { border-color: #cba; background-color: #fcede5; }
    .tutorial .tutorialNavigation button:disabled { opacity:0.4; filter:alpha(opacity=40) }
    .tutorial .tutorialNavigation button:disabled:hover { cursor: default; background-color: transparent; border-color: transparent }
    .tutorial .tutorialNavigation button .arrowLeft, .tutorial .tutorialNavigation button .arrowRight { background-image: url(arrows.png); width: 16px; height: 16px; }
    .tutorial .tutorialNavigation button .arrowLeft { background-position: 0px 0px }
        .tutorial .tutorialNavigation button:active .arrowLeft { background-position: 1px 1px}
    .tutorial .tutorialNavigation button .arrowRight { background-position: -19px 0px }
        .tutorial .tutorialNavigation button:active .arrowRight { background-position: -18px 1px; }
    .tutorial p > code, .tutorial li > code, .tutorial em > code { font-weight: bold; font-family: Consolas, Monaco, Courier; color: #d61; font-size: 105%; }
    
/* Overlays */
.overlay { display: none; }
    .overlay .overlayTitle { color: #eee; padding: 0.5em 0 0.4em; font-weight: bold; text-align: center; }
    .overlay .overlayBody {
        padding: 1em; 
        background-color: rgb(230,230,225);
        -moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px;
        border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
    }
    .overlay .overlayBody ul.optionsList { list-style-type: none; margin: 0 0 0.8em 0; padding: 0; border-bottom: 1px solid silver; max-height: 15em; overflow:auto; box-shadow: 0px 1px 4px rgba(0,0,0,0.2);  }
    .overlay .overlayBody ul.optionsList li {
        border: 1px solid #d0d0d0; border-bottom-width: 0; padding: 0.6em 0.8em; background-color: White; color: #444;
    }
    .overlay .overlayBody ul.optionsList li:hover, .overlay .overlayBody ul.optionsList li.selected:hover  {
        background-color: #43577B; color: White; cursor: pointer; 
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(27,47,83)), color-stop(0.2, rgb(47,67,103)), color-stop(1, rgb(67,87,123)));
        background-image: -moz-linear-gradient(center bottom, rgb(27,47,83) 0%, rgb(47,67,103) 20%, rgb(67,87,123) 100% )    
    }
    .overlay .overlayBody ul.optionsList li .title { font-weight: bold; }
    .overlay .overlayBody ul.optionsList li .description { font-size: 0.8em; color: #c72; margin-top: 0.2em; }
    .overlay .overlayBody ul.optionsList li:hover .description { color: #ddd; }
    .overlay .overlayBody ul.optionsList li.selected {
        background-color: rgb(255,255,215);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(239,239,189)), color-stop(0.2, rgb(244,244,204)), color-stop(1, rgb(255,255,215)));
        background-image: -moz-linear-gradient(center bottom, rgb(239,239,189) 0%, rgb(244,244,204) 20%, rgb(255,255,215) 100% )
    }
    .overlay a, .overlay a:visited { color: #A40; }
    .overlay a:hover { text-decoration: underline }    
    .overlay .textWithIcon { clear: both; padding-bottom: 0.25em; }
    .overlay .textWithIcon p { padding-right: 0.5em }
    .overlay .textWithIcon img + p { padding-top: 0.25em; }
    .overlay .textWithIcon img { float: left; margin-right: 0.9em; }
    
/* Help captions */
.helpCaption {
    position: absolute; font-size: 120%; z-index: 1000;
    width: 100%; text-align: center; margin-top: -0.5em;
    text-shadow: rgba(0,0,0,0.5) 0 1px 1px; color: White;
}
    .helpCaption.top { top: 16%; }
    .helpCaption.bottom { top: 84%; }
    .helpCaption label { background-color: #444; background-color: rgba(30, 30, 30, 0.6); padding: 1em; color: White; font-weight: bold; border-radius: 0.7em; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; }

/* Code */
pre code { overflow: auto; overflow-y: hidden; }
pre ::-webkit-scrollbar { width: 16px; height: 16px; }
pre ::-webkit-scrollbar-track, pre ::-webkit-scrollbar-thumb { -webkit-border-image: url(scrollbar.png) 7/7px stretch repeat; }

/* Flash message */
.flashMessage {
    position: absolute; top: 50%; left: 50%; z-index: 10000;
    width: 24em; height: 8em;
    margin: -4em 0 0 -12em; 
    line-height: 8em; text-align: center;
    background-color: gray;
    background-color: rgba(0,0,0,0.75); border-radius: 2em;
    color: white; font-weight: bold; text-shadow: black 1px 1px 3px;
    font-size: 1.25em;
}