grid_style.css

/*
Copyright (c) 2014, Intel Corporation

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright notice,
      this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright
      notice, this list of conditions and the following disclaimer in the
      documentation and/or other materials provided with the distribution.
    * Neither the name of Intel Corporation nor the names of its contributors
      may be used to endorse or promote products derived from this software
      without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/


/* ***********************************************
Purpose: Main Style Sheet
Author : Ruchira Sasanka
Date   : Nov 1, 2013	
************************************************** */


/* ------- For Testing Purposes Only ------------- */

h1.testHead {
  	color:#af3311;	
  	font-family: verdana,arial,sans-serif;
}



/* --------- Main Menu Offerred To Pick Out/In Grid ------- */

table.menuTable {
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    float:left;
    margin:40px;	
}

table.menuTable td {

    font-family: verdana,arial,sans-serif;  /* for Icon label */
    font-size:14px; 
    /* color:#333333;  */
    text-align:center; 

    border-width: 1px;
    padding: 8px 8px 8px 8px;
    border-style: dotted;
    border-color: #a9c6c9;
}

table.menuTable td.caption {       /* for the caption cell at the bottom */
                                     /* overrides default 'menuTable td' */
    font-style:italic;
    font-weight:bold;
    color:brown;
    border-style:none;
}

table.menuTable td.clickText {     /* large text for clicking in a cell */
    font-style:italic;
    font-weight:bold;
    color:brown;
}



/* ----------------- NewGrid Menu ----------------------------------------- */

table.newGridMenu {
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    float:left;
    margin:40px;	
}

table.newGridMenu td {

    font-family: verdana,arial,sans-serif;  /* for Icon label */
    font-size:11pt; 
    /* color:#333333;  */
    text-align:center; 

    border-width: 1px;
    padding: 12px;
    border-style: dotted;
    border-color: #a9c6c9;
}

table.newGridMenu td.caption {       /* for the caption cell at the bottom */
                                     /* overrides default 'menuTable td' */
    font-style:italic;
    font-weight:bold;
    color:brown;
    border-style:none;
}



/* -------------------------- gridTable (main Grid) ------------------------ */
table.gridTable {
    
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    float:none;
    margin:0px;
    padding:0px;

}

table.gridTable td {

    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9; 
    min-width:10px;
    text-align:center;

    font-family: verdana,arial,sans-serif;
    font-size:11px;
}

/* MPI: for extended dimensions' cells */
table.gridTable td.extended {                /* Even Content Rows */
    background-color:#336699;
    font-size:11px;
    height:12px;                         /* min default height */
    border-style: dotted;
}

table.gridTable td.even {                /* Even Content Rows */
    background-color:#c3dde0;
    font-size:11px;
    height:12px;                         /* min default height */
    border-style: solid;
}

table.gridTable td.odd {                 /* Odd Content Rows */
    background-color:#d4e3e5;
    font-size:11px;
    height:12px;                         /* min default height */
    border-style: solid;
}


table.gridTable td.select {                 /* Seleleted cell */
    background-color:#dcffed;
    font-size:11px;
    height:12px;                         /* min default height */
    border-style: solid;
}

table.gridTable td.colindex {          
    font-style:italic;
    border-style: none;
    text-align:center;
    font-size:11px;
}

table.gridTable td.colindexhigh {       /* highlighted col index */
    font-style:italic;
    text-align:center;
    font-size:11px;
    border-style:none; /* dotted;*/
    background-color:#dcffed;            /* TODO: change color */
}

table.gridTable td.rowindex {
    font-style:italic;
    border-style: none;
    text-align:right;
    font-size:11px;
}

table.gridTable td.rowindexhigh {       /* highlighted row index */
    font-style:italic;
    text-align:right;
    font-size:11px;
    border-style:none; /* dotted; */
    background-color:#dcffed;            /* TODO: change color */
}




table.gridTable td.coltitle {

    font-family: verdana,arial,sans-serif;
    font-size:12px;
    border-style:dotted;
    padding:4px;
}

table.gridTable td.rowtitle {
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    text-align:left;
    border-style:dotted;
    padding:4px;
}

table.gridTable td.topLeft {
    border-style:none;
    text-align:right;
    margin:0px;
    padding:0px;
}

table.gridTable td.arrow {
    border-style:none;

}

table.gridTable td.botLeft {
    border-style:none;
}

table.gridTable td.insrow {
    
    margin:0px;
    padding:0px;
    /*cursor:e-resize; */
    /*cursor:url(images/cursor_rins.png) 10 10, auto;*/
    cursor:url(images/cursor_row_point.png) 10 10, auto;
}


div.gridBotSep {           /* for having a vertical space after grid */

    /* height:50px; */     /* height must be set by setVSpaceAfterGrid */
    width:20px;
    clear:both;

    border-width: 1px;
    border-style: none;

}

/* for displaying grid buttons as config, delete etc */

div.gridButDiv {
    clear:none;
    float:right;  /* left */
  }


    




/* ----------------- Grid Configuration Options -------------------------- */

table.gridconfig {
    clear:both;
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    border-collapse:collapse;
    /*margin:20px;*/             /* has no effect ??? */


}

table.gridconfig th {
    
    border-style:solid;
    border-width:1px;
    padding: 4px;
    margin: 2px;
    background-color:#f5f5f0;

    box-shadow: 0px -2px 2px #888888;   /* horiz vert */    
}

table.gridconfig td {

    border-style:dotted;
    border-width:1px;
    padding: 4px;
    text-align:center;

}

table.gridconfig td.rbutton {

    border-style:none;
    text-align:right;
    padding: 4px;

}

table.gridconfig td.lbutton {

    border-style:none;
    text-align:left;
    padding: 4px;

}

/* checkbox at the bottom */

table.gridconfig td.botcheck {     

    border-style:none;
    text-align:left;
    padding: 4px;

}


table.gridconfig td.caption {

    font-style:italic;
    font-weight:bold;
    color:brown;
    border-style:none;
    font-size:14px;
    text-align:center;

}


span.indexName {   /* For definining index names in the grid caption */

    font-family: "Courier New", Courier, monospace;
    font-size:11pt;
    font-style:normal;
    font-weight:bold;
    color:brown;
    border-style:none;
    text-align:center;

 }

span.indexStr {   /* For index str in caption --- e.g., for [ , ]  */

    font-family: "Courier New", Courier, monospace;
    font-size:10pt;
    font-style:normal;
    font-weight:normal;
    color:black;
    border-style:none;
    text-align:center;

}



span.indexNames {   /* For definining index names in the grid caption */

    font-family: "Courier New", Courier, monospace;
    font-size:10pt;
    font-style:normal;
    font-weight:bold;
    color:black;
    border-style:none;
    text-align:center;
}




/* ----------------- Code Window Options -------------------------- */

table.codeWin {
    /*clear:left;*/
    float:left;
    font-size:12px;
    border-collapse:collapse;
    border-style:none;

}

table.codeWin td {
    font-family:verdana,arial,sans-serif;
    border-style:none;
    border-width:1px;
    padding: 0px, 0px, 0px, 4px; /* top,right, bottom, left separation */
    min-width: 10px;             /* for indentation of the input box */
    text-align:left;
}


table.codeWin td.formula {

    border-style:solid;
    border-width:1px;
    padding:2px;
    border-color:#dcdcdc;

    font-family: "Courier New", Courier, monospace;
    font-size:10pt;
    text-align:left;
    border-collapse:none;
    margin:2px;
    min-width:500px;     /* sets formula td min-width */
}


.opbutton {             /* operator button in code window */
    margin:1px;
}


.monoReg {               /* regular monospace */
    font-family: "Courier New", Courier, monospace;
    font-size:10pt;
}

.monoLarge {             /* larger font monospace */
    font-family: "Courier New", Courier, monospace;
    font-size:12pt;
}


span.space {  /* one uint of space within an expression */

    border-style:none;
    /* cursor:crosshair;  -- :help, or :wait */
}


.buttonExistFunc {

    background-image: url('images/tip.jpg');
    

}



div.stepCap {                  /* caption for a step, instead of code win */
    
    clear:both;
    font-style:italic;
    font-weight:bold;
    color:brown;
    border-style:none;
    font-size:16pt;
    text-align:center;

}

span.stepCapOpt {

    /*font-style:normal*/;
    font-weight:normal;
    color:black;
    border-style:none;
    font-size:11pt;
    text-align:center;

}


/* ---------------------- Cursor Animation ------------------------------- */

span.scursor {
    background-color:brown;

    animation:curanim 1s;
    animation-iteration-count:infinite;

    -webkit-animation:curanim 1s;                /* For Safari and Chrome */
    -webkit-animation-iteration-count:infinite;
}

@keyframes curanim {

    0%   {background-color: brown;}
    45%  {background-color: brown;}
    50%  {background-color: white;}
    100% {background-color: white;}
}
                                                 
@-webkit-keyframes curanim  {                    /* For Safari and Chrome */

    0%   {background-color: #663300;}
    45%  {background-color: #663300;}
    50%  {background-color: white;}
    100% {background-color: white;}
}


/* ------------------- Operator Window   ------------------------------- */


table.operatorWin {
    /*clear:both;*/
    float:left;
    font-size:12px;
    border-collapse:collapse;
    border-style:none;
    margin: 8px;
}

table.operatorWin td {
    /* font-family:verdana,arial,sans-serif; */
    border-style:none;
    border-width:1px;
    padding: 0px, 0px, 0px, 4px; /* top,right, bottom, left separation */
    min-width: 10px;             /* for indentation of the input box */
    text-align:left;
}


/* ------------------- Tip Window   ------------------------------- */
div.tipWin {

    font-family:verdana,arial,sans-serif;
    clear:both;
    font-size:11px;
    text-align:left;
}

div.codeBotSep {           /* for having a vertical space after grid */

    /* height:50px; */     /* height must be set by setVSpaceAfterGrid */

    clear:both;
    height:40px;
    width:20px;
    border-style: none;

}


/* ----------------- Prgram Structre Heading  -------------------------- */


.progStructHead {                       /* main span of prog struct head */
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    float:left; 
}

.headbut {

    margin:1px;
    right-margin:6px;

    border-bottom-right-radius:0.5em;    /* rounded corners */
    border-bottom-left-radius:0.5em;    
    border-top-right-radius:0.5em;
    border-top-left-radius:0.5em;
}


.formulabut {

    right-margin:6px;

    border-bottom-right-radius:0.5em;    /* rounded corners */
    border-bottom-left-radius:0.5em;    
    border-top-right-radius:0.5em;
    border-top-left-radius:0.5em;
}

/*
.stepTitleSpan {

    min-width:40px;
    }
*/


.stepTitle {
    resize: none;
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    background-color:#fafafa;
    border:none;
    border-width:0px;

    margin:0px;

    /*
    top-margin:0px;
    bottom-margin:0px;
    left-margin:0px;
    right-margin:4px;
    */

    padding:0px;
    color:brown;
}


/* --------------- Step selection drop down box ------------------------*/
.stepsel {

    /*   background-color:#e6ffff; */
 background-color:#fafafa;

}

.grayimage {                            /* for graying an image */ 
  filter: grayscale(0.8);
  -moz-filter: grayscale(0.8);
  -ms-filter: grayscale(0.8);
  -webkit-filter: grayscale(0.8);
}

div.menu1 {

    position:absolute;   /* absolute positioning required */
    z-index:1;           /* z-index = 1 places the comment on top */
    top: 0px;
    left:200px;
    
}

span.menu1Head {
    float:right;

    font-family:verdana,arial,sans-serif;
    font-size:10pt;

    background-color:#FFF0B2;
    border-color:#FFF0B2;

    box-shadow: 0px -3px 2px #888888;   /* horiz vert */

    padding:4px;

    /* use the following to increase the length of menu button */

    padding-right:15px;
    padding-left:15px;

    border-top-right-radius:1em;    /* rounded corners */
    border-top-left-radius:1em;

    cursor:pointer;
}

span.menu1Body {

    position:absolute;   /* absolute positioning required */
    z-index:1;           /* z-index = 1 places the comment on top */


    /*top: 0px;
    left:200px;*/
}



table.ddmenu {

    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    background-color:#fafafa;
}

table.ddmenu td:hover {

    cursor:pointer;
    background-color:#FFF0B2;
}



/* -------------------------- Comment ------ -------------------------- */

.comment {
    position:absolute;   /* absolute positioning required */
    z-index:1;           /* z-index = 1 places the comment on top */
} 



/* ----------------------- A popup customizable dialog box -------------- */
.dialog {
    position:absolute;   /* absolute positioning required */
    z-index:1;           /* z-index = 1 places the comment on top */
} 


.menusel {


    background-color:#FFF0B2;
    border-color:#FFF0B2;

    box-shadow: 0px -3px 2px #888888;   /* horiz vert */

    border-bottom-right-radius:1em;    /* rounded corners */
    border-bottom-left-radius:1em;

}



/* -------------------------- Parallelism Meter -------------------------- */


table.parallelMeter {
    border-width: 1px;
    border-color: #a9c6c9;
    /*border-collapse: collapse; */
    float:left;
}

table.parallelMeter td {

    font-family: verdana,arial,sans-serif;  /* for Icon label */
    font-size:12px; 
    text-align:left; 
    background-color:#FFFFEB;
    
}

div.parallelDivFull {

    height:20px;
    background-color:#6EFF6E;
    float:left;
    border-width: 1px;
    border-style: solid;
    margin-right: 1px;
    margin-left: 1px;
    padding-left: 5px;
    padding-right: 5px;
    /* border-right-style:none; */
}

div.parallelDivEmpty {

    height:20px;
    background-color:#FF3300;
    float:left;
    border-width: 1px;
    border-style: solid;
    margin-right: 1px;
    margin-left: 1px;
    padding-left: 5px;
    padding-right: 5px;
    /* border-left-style:none; */
}


/* --------------------2D Pane ----------------------------------------- */

table.tabPane {

    font-family: verdana,arial,sans-serif;
    font-size:10pt;
    font-weight:normal;
    
    border-collapse: collapse;
    border-style:none;

    float:left;
    margin:16px 1px 0px 16px;       /* space between various 2D panes */


    /* position:relative;             need for fine adjustments, if used */

    /*box-shadow: -5px -5px 2px #888888;*/   /* horiz vert */
}

table.tabPane td.select {         /* Selected tabs drawn with this style */

    border-width: 1px;
    border-style: none;    

    border-top-right-radius:1em;    /* rounded corners */
    border-top-left-radius:1em;

    color:black;
    padding:8px;                   

    box-shadow: 0px -3px 2px #888888;   /* horiz vert */
}

table.tabPane td.noselect {      /* NOT-Selected tabs drawn with this style */

    border-width: 1px;
    border-style: none;    

    border-top-right-radius:1em;    /* rounded corners */
    border-top-left-radius:1em;

    color:black;
    padding:8px;

    box-shadow: 0px -1px 1px #888888;   /* horiz vert */
}


table.tabPane th.index {         /* index */

    /*
    border-left-style: solid;   
    border-right-style: solid;    
    border-top-style: solid;    
    border-bottom-style:none;   

    border-width:1px;
    border-color:#dcdcdc;  

    background-color:#fefefe;   
    */
    
    border-style:none;
    min-width:30px;

    color:black;
    /*color:#c3c3c3;*/                /* greyed color for text */  
    font-weight:normal;
    font-style:italic;
    font-size:11px;


    padding:4px;

}




table.tabPane th.indexSel {         /* Selected Index drawn with this style */

    border-width: 1px;
    border-style: none;    

    border-top-right-radius:1em;    /* rounded corners */
    border-top-left-radius:1em;

    color:black;
    font-weight:normal;
    font-style:italic;
    font-size:11px;

    padding:4px;
    width:60px;
    

    box-shadow: 0px -3px 2px #888888;   /* horiz vert */
}



table.tabPane th {              /* for non-selected Tabs */


    border-left-style: solid;   /* all borders except the bottom */ 
    border-right-style: solid;    
    border-top-style: solid;    
    border-bottom-style:none;   /* bottom border creates space in selected th */

    border-width:1px;
    border-color:#dcdcdc;  


    background-color:#fefefe;     /* all dims */
    color:#c3c3c3;                /* greyed color for text */  
    padding:4px;


}

table.tabPane td.type {

    text-align:center;
    font-style:italic;
}

div.emptytab {                   /* empty tab when index is selected */
    height:16px;
    
}

table.tabPane td.contents {   /* content panes for a 2D-pane */
     border-style:none;
}


/* ------ Outermost table containng 2D Panes AND assign Arrows -------------*/

table.outArrow {           /* container for the entrie output grid/panes */

    border-collapse: collapse;
    border-style:none;
    border-width:0px;

    float:left;
    margin:16px;   
    box-shadow: 0px 0px;   /* horiz vert */
    text-align:center;
}

table.outArrow td {

   border-style:none;
   padding:5px;    /* ***** This controls CELL size in all GRIDS ****** */
   margin:0px;
   text-align:center;
   float:none;
}


table.outArrow td.type {
    font-family:verdana,arial,sans-serif;
    font-size:8pt;
    text-align:center;
    font-style:italic;
    margin:0px;
    padding:0px;
}

table.outArrow td.caption {
    font-family: verdana,arial,sans-serif;
    font-style:italic;
    font-weight:bold;
    color:#5E318D; 
    border-style:none;
    font-size:16px;
    text-align:center;

    margin:0px;
    padding: 0px;
}


/************************* Grid config button & context menu *************** */

table.outArrow td.gridconfbut {

    text-align:right;
    margin:0px;
    padding:0px;
    border-style:none;
    border-width:0px;
}

span.GCmenuBody {       /* Grid config context menu span (body) */

    position:absolute;   /* absolute positioning required */
    z-index:1;           /* z-index = 1 places the comment on top */
}

table.gcMenu {         /* Grid config context menu */

    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    background-color:#fafafa;
    text-align: left;
}


table.gcMenu td:hover {
    cursor:pointer;
    background-color:#FFF0B2;
}








/* For representing grid captions as a span */

span.caption {
    font-family: verdana,arial,sans-serif;
    font-style:italic;
    font-weight:bold;
    color:#5E318D; 
    border-style:none;
    font-size:16px;
    text-align:center;
    padding: 5px;
}


span.captionParam {
    font-family: verdana,arial,sans-serif;
    font-style:normal;
    font-weight:normal;
    color:black; 
    border-style:none;
    font-size:12px;
    text-align:center;
    padding:8px;
}