/* -------------------------------- */
/* classes                          */
/* -------------------------------- */

.basePanel
{
    background-color: #ffffff;
    position: absolute; 
    width: 255;
    border: 1px solid #bfbfbf;
    font-family: "Arial";
    font-size: 14px;
    /*padding: 10px;*/
}

.textInput
{
    position: absolute; 
    left: 100px;
    width: 90px; 
}


.panelTitle
{
    /*
    color: #000000; 
    font-family: "Arial";
    */
    font-size: 14px;
    position: absolute; 
    left: 16px; 
    top: 5px;   
}


.simpleButton
{
    background-color: #eeece8;

    //position: absolute; 
    width: 90;
    height: 20;
    /*
    left: 205; 
    top: 48;   
    */
    border-radius: 3px;
    border: 1px solid #777777;
}


.tweakLabel
{
    /*background-color: #aaccaa;*/
    
    position: absolute; 
    left:   10px;
    width:  60;
    text-align: right;
}

.leftNavButton
{
    background-color: #eeeeee;
    border: 1px solid #bbbbbb;
    position: absolute; 
    left:   80px;
    width: 20px;
    height: 23px;
}

.rightNavButton
{
    background-color: #eeeeee;
    border: 1px solid #bbbbbb;
    position: absolute; 
    left:   190px;
    width: 20px;
    height: 23px;
}

.modeButton
{
    background-color: #eeebe9;

    position: absolute; 
    width: 110;
    height: 20;
    /*
    left: 205; 
    top: 48;   
    */
    border-radius: 3px;
    border: 1px solid #c0b0a0;
}

.smallText
{
    color: #333333; 
    font-family: "Arial";
    font-size: 12px;
    position: absolute; 
}

.explanatoyText
{
}

/* -------------------------------- */
/* ID's                             */
/* -------------------------------- */

body 
{
    background-color: #f7f5f3;
}

#outerFrame 
{
    width:100%;
}

#innerFrame 
{
    /*background-color: #ddccdd;*/
    top:    30px; 
    width:  1000px; 
    margin: 0 auto;
    position: relative;
}

#bookTextInnerFrame 
{
    /*background-color: #ddccdd;*/
    top:    820px; 
    width:  700px; 
    margin: 0 auto;
    position: relative;
    font-family: "Charter";
    font-size: 18px;
    line-height: 1.6;
    color: #333333; 
}


#numberLine 
{
    position: absolute;
    /*background-color: #888888;*/
    /*border: 2px solid #bbbbbb;*/  
    left:   20px; 
    top:    0px; 
}

#divisorLine 
{
    /*background-color: #888888;*/
    /*border: 2px solid #bbbbbb;*/  
    position: absolute;
    left:   0px; 
    top:    40px; 
}

#canvas
{
    background-color: #000000;
    border: 2px solid #bbbbbb;    
    position: absolute;
    /* experiment */
    left:  15px; 
    top:   15px; 
}

#mainPanelArea
{
    /*background-color: #ccddcc;*/
    position: absolute;
    left:   730; 
    top:    15; 
    width:  260; 
    height: 700;
}

#title
{
    position: absolute;
    font-family: "Arial";
    font-size: 23;
    top:    5; 
    width:  280; 
}

#subtitle
{
    position: absolute;
    font-size: 14;
    top:    30; 
}

/*
#bookText
{
    left: 30; 
    top: 780;   
     
    color: #773333; 
    font-family: "Arial";
    font-size: 14px;
    position: absolute; 
    width: 1000px;     
}
*/

#references
{
    left: 500; 
    top: 820;    
}

#presetsPanel
{
    /*
    background-color: #ddddcc;
    border: 2px solid #bbbbbb;
    */
    
    top: 70; 
    height: 155;
    /*
    position: absolute; 
    width: 255;

    font-family: "Arial";
    font-size: 14;
    */
}



#componentsPanel
{
    font-size: 12;
    top: 233; 
    height: 160;
}


#navigationPanel
{
    /*
    background-color: #ccdddd;
    border: 2px solid #bbbbbb;
    */
    
    top: 400; 
    height: 300;
    font-size: 12;
}


#navControls
{
    /*background-color: #ccdddd;*/
    
    position: absolute; 
    left: 0;
    top: 70;
    width: 255;
    height: 170;
}

#numberNegative
{
    position: absolute; 
    left: 70px;
}


#leftComponents
{
    position: absolute; 
    left: 10;
    top:  40; 
}

#rightComponents
{
    position: absolute; 
    left: 120;
    top: 40; 
}

#introductoryButton     { left: 15;   top:  30; }
#squareRootButton       { left: 130;  top:  30; }
#rootMillionButton      { left: 15;   top:  53; }
#twelveFactorialButton  { left: 130;  top:  53; }
#zippyScrollButton      { left: 15;   top:  76; }
#rootTrillionButton 	{ left: 130;  top:  76; }
#factorialButton        { left: 15;   top:  99; }
#rootScrollButton       { left: 130;  top:  99; }
#cubeScrollButton       { left: 15;   top: 122; }
#p2ScrollButton         { left: 130;  top: 122; }



#scrollingPanel
{
    /*background-color: #ccdddd;*/
    position: absolute; 
    left: 20;
    top: 100;
    width: 220;
    height: 120;
}

#scrollingTitle
{
    position: absolute; 
    left: 23;
    top: 2;
}

#scrollingSlider
{
    position: absolute; 
    width: 180;
    /*
    left: 10; 
    top: 290; 
    */   
}

#scrollingToggle
{
    position: absolute; 
    left: 0;
    top: 0;
}

#setScrollRate
{
    position: absolute; 
    left: -20;
    top: 35;    
}


#radioLinear
{
    position: absolute; 
    left: 10;
}

#radioExponential
{
    position: absolute; 
    left: 10;
}


#archive
{
    position: absolute; 
    left: 540;
    top:  0;
    font-family: "Arial";
    font-size: 12;
}

#buyTheBook
{
    position: absolute; 
    left: 630;
    top:  0;
    font-family: "Arial";
    font-size: 12;
}