/*
    CSS for PaperJS Sketch

    by rdp 2018-06-14
    
*/


#header_bar {
    position: absolute;
    top: 0px;
    left: 12px;
    width: 1848px;
    height: 40px;
    background-color: white;
}

#my_title {
    text-align: center;
    position: relative; top: 14px;
    font-family: "Calibri";
}

#sq_ft_label {
    text-align: center;
    position: absolute; top: 12px; width: 400px; left: 1430px;
    font-family: "Calibri";
    border-style: groove;
}

#pe_det_label {
    text-align: left;
    position: absolute; top: 12px; width: 800px; left: 180px;
    font-family: "Calibri";
    border-style: groove;
}

#PS_Logo {
    position: absolute;
    top: 0px;
    left: 7px;
    width: 155px;
    height: 40px;
    background-color: white;
}

#container {
    position: absolute;
    top: 40px;
    left: 180px;
    background-color: #ffffe6;
}

#rdp_msg_box {
    position: absolute;
    top: 940px;
    left: 180px;
    width: 1520px;
    height: 20px;
    background-color: #e6f9ff;
    font-family: "Verdana", Verdana, sans-serif;
    font-size: 12px;
    color: black;
}

#right_bar {
    position: absolute;
    top: 40px;
    left: 1700px;
    width: 160px;
    height: 920px;
    background-color: #F0F0F0;
}

#draw_001 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#draw_003 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#draw_004 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shapes_1 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }

#shape_001 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_002 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_003 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_004 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_005 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_006 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_007 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_008 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_009 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_010 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_011 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_012 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#shape_013 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }

#prim_001 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_002 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_003 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_004 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_005 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_006 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_007 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }
#prim_008 { position: relative; top: 3px; left: 5px; width: 150px; height: 60px; }


#left_bar {
    position: absolute;
    top: 40px;
    left: 12px;
    width: 160px;
    height: 920px;
    background-color: #F0F0F0;
}

#menu_012_Orange_Line     { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_001_Rotate_CW       { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_002_Rotate_CCW      { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_003_Flip_Horz       { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_004_Flip_Vert       { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_005_Clone           { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_006_Merge           { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_011_Subtract        { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_007_Delete_Selected { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#menu_008_Delete_All      { position: relative; top: 3px; left: 5px; width: 158px; height: 50px; }
#container_sm             { position: relative; top: 3px; left: 5px; width: 158px; height: 99px; background-color: #ffffe6; visibility: visible; }
#menu_009_Load            { position: relative; top: 9px; left: 5px; width: 158px; height: 50px; }
#menu_010_Save            { position: relative; top: 9px; left: 5px; width: 158px; height: 50px; }
#menu_010_Save_d          { position: relative; top: 9px; left: 5px; width: 158px; height: 50px; display: none; }


#numLabel01 {
    position: relative;
    top: 6px;
    left: 10px;
    font-family: "Calibri";
    color: black;
    display: none;
}
#editNum01 { 
    position: relative; 
    top: 6px; 
    left: 5px; 
    width: 152px; 
    display: none;    
}
#numLabel02 {
    position: relative;
    top: 6px;
    left: 10px;
    font-family: "Calibri";
    color: black;
    display: none;
}
#editNum02 { 
    position: relative; 
    top: 6px; 
    left: 5px; 
    width: 152px; 
    display: none;    
}

/* #container_sm             { position: relative; top: 3px; left: 5px; width: 158px; height: 99px; background-color: #ffffe6; visibility: hidden; } */

body {
    margin: 0px;
    padding: 0px;
    background-color: #F8F8F8 ;
}