.groups {        	
        	width:100%;
        	float: left;
        	display:block;
}

.group {
	margin: 0;
	padding: 0;
	float:left;
	width: 230px;
}

.groupHeader{
        text-align: center;
        background-color: Red; 
        color: White; 
        font-weight: bold;    	
}

.group h3 {
	background-color: Black;
	color: White;
	text-align: center;
	margin: 0;
	padding: 0;
}

.hsc {
     	margin-left: 5px;
     	margin-right: 5px;
}

.ttu {
}

.Insert_Div{
           	width: 300px;
           	margin-bottom:20px;
}

.Insert_Div .button{
           	
}

.Insert_Div label{
           	border: solid 1px black;
           	width: 20px;
           	height: 1%;
}



.SelectedRowStyle{
                 	background-color: #9FFF8F;
}

.AltRow{
       	background-color: #EFEFEF;
}

   /*
     * ==================================
     * THE INTERESTING STUFF STARTS HERE!
     * ==================================
     */

    /* The main diagram container needs to be positioned relatively, so that
       it's children can be positioned within it. */
    #diagram {
      position: relative;
      margin:   0 auto; /* Sorry, IE5.x/Win. */
      width:   100%;
      height:   85em;
      zoom: 1;
    }

    /* Turn off this Opera/Mozilla feature. */
    #diagram abbr, #diagram acronym { border-bottom: 0 }

    /* The top-level DIVs are the state boxes, which should have a border.
       We need to use ems, because the border width counts in the box size
       (except in IE5.x/Win, of course).  It will affect arrow lengths. */
    #diagram div {
      border: 0.1em solid #000;      
    }
    
    #diagram div.instructions{
             	border:none;
             	font-size: .3em;
             	line-height: 1em;
             	}

       
    #diagram .hover{
      border: 0.05em solid red;
      background-color: #FFDFDF;
      cursor: pointer;
    }

    /* All DIVs and list items in the diagram are absolutely positioned. */
    #diagram div, #diagram li {
      position: absolute;
      margin:   0;
      padding:  0;
    }

    /* State names will be centered within their boxes. */
    #diagram h3 {
      margin:      0;
      padding:     0;
      font-size:   0.9em;
      font-weight: normal;
      text-align:  center;
      line-height: 1em;
    }
    
#diagram h3.oneLine { margin-top:2.3em }
#diagram h3.twoLine { margin-top:1.5em }
#diagram h3.threeLine { margin-top:1.3em }
#diagram h3.fourLine { margin-top:.8em }
#diagram h3.fiveLine { margin-top:.5em }

    
    #diagram div h3 a:visited,
    #diagram div h3 a:active,
    #diagram div h3 a:link,
    #diagram div h3 a:hover {
      color: Black;
      text-decoration:none;
    }

    /* The "current" state needs to stand out. */
    #current {
      background-color: #33c;
      color:            #fff;
    }
    #current h3 { font-weight: bold }

    /* "Linked" states are indicated visually as state boxes. */
    #diagram div li a {
      display:          block;
      position:         absolute;
      border:           0.05em dotted #666;
      background-color: #eee;
      line-height:      2;
      text-align:       center;
    }
    #diagram div li a:link    { color: #00f }
    #diagram div li a:visited { color: #906 }
    #diagram div li a:hover, #diagram div li a:focus { color: #f60 }
    #diagram div li a:active  { color: #f00 }

    /* SAMPs are samples of the symbols causing a transition. */
    #diagram li samp {
      background-color: transparent;
      color:            #069;
    }

    /* VARs in SAMPs indicate a symbol _type_. */
    #diagram li samp var {
      background-color: transparent;
      color:            #930;
      font-style:       normal;
    }

    /* SPANs are used for hiding explanatory text that shouldn't be used in a
       CSS-aware environment.  Those SPANs are also used for creating the
       arrowheads on transition lines (see below). */
    #diagram li span {
      position:    absolute;
      width:       0;
      height:      0;
      overflow:    hidden;
    }

    /* IE5.x/Win is somewhat buggy.  Yes, really! */
    * html #diagram li span {
      font-size:  0;
      f\ont-size: 1em;
    }

    * html #diagram .circ-top span,
    * html #diagram .down span,
    * html #diagram .up span
    {
      width:   8px;
      w\idth:  0;
      height:  4px;
      he\ight: 0;
    }

    * html #diagram .circ-right span,
    * html #diagram .right span,
    * html #diagram .down-right span,
    * html #diagram .up-right span
    {
      width:   4px;
      w\idth:  0;
      height:  8px;
      he\ight: 0;
    }

    /* We'll use unordered lists for the transitions. */
    #diagram ul {
      margin:     0;
      padding:    0;
      list-style: none inside;
      
    }
    
    #diagram ul li {
                	background: transparent;
            background-image: none;
    }

    /* IE6/Win completely freaks out without this. */
    * html #diagram ul { width: 0 }

    /* Transition lines. */
    #diagram .circ-right { /* Circular transition to the right of a state box. */
      top:         0.5em;
      left:        100%;
      width:       1em;
      margin-left: 0.05em;
      height:      1em;
      border:      0.05em solid #000;
      border-left: 0;
    }
    #diagram .circ-right samp {
      position: absolute;
      left:     100%;
    }

    #diagram .circ-top { /* Circular transition above a state box. */
      bottom:        100%;
      left:          0.5em;
      width:         1em;
      height:        1em;
      margin-bottom: 0.05em;
      border:        0.05em solid #000;
      border-bottom: 0;
    }
    #diagram .circ-top samp {
      position:  absolute;
      bottom:    100%;
    }

    #diagram .down { /* Straight vertical transition, top to bottom. */
      top:         103%;
      left:        50%;
      margin-top:  0.05em;
      border-left: 0.05em solid #000;
    }
    
    #diagram .side-right-down{
      top:          1.8em;
      right:       -0.6em;
      margin-top:   0em;
      border-right: 0.1em solid #000;
      
    }
    
    #diagram .side-left-down{
      top:         1.9em;
      left:       -0.6em;
      margin-top:  0em;
      border-left: 0.1em solid #000;
      
    }
    
    #diagram .down a {
      top:  100%;
      left: 0;
    }

    #diagram .down-right { /* Angled transition, down and right. */
      top:           100%;
      left:          100%;
      margin-bottom: 0.05em;
      margin-left:   -1em;
      border-bottom: 0.05em solid #000;
      border-left:   0.05em solid #000;
    }
    
   #diagram .down-left { /* Angled transition, down and right. */
      top:           100%;
      right:          100%;
      margin-bottom: 0.05em;
      margin-right:   -1em;
      border-bottom: 0.05em solid #000;
      border-right:   0.05em solid #000;
    }

    #diagram .down-right a {
      bottom: -1em;
      left:   100%;
    }

    #diagram .right { /* Straight horizontal transition, left to right. */
      top:           0;
      left:          100%;
      margin-left:   0;
      border-bottom: 0.05em solid #000;
    }
    
    #diagram .up-right-down { /* Straight horizontal transition, left to right. */
      top:           -2em;
      left:          50%;
      margin-left:   0;
      border-top: 0.06em solid #000;
      border-left: 0.06em solid #000;
      border-right: 0.06em solid #000;      
    }
    
    #diagram .right a {
      top:  0;
      left: 100%;
    }

    #diagram .up { /* Straight vertical transition, bottom to top. */
      bottom:        100%;
      left:          50%;
      margin-bottom: 0.05em;
      border-left:   0.05em solid #000;
    }
    #diagram .up samp, #diagram .up-right samp {
      position: absolute;
      bottom:   0;
    }

    #diagram .up-right { /* Angled transition, up and right. */
      bottom:        100%;
      left:          50%;
      margin-bottom: 0.05em;
      margin-left:   -1em;
      border-top:    0.05em solid #000;
      border-left:   0.05em solid #000;
    }
    
    #diagram .up-left { /* Angled transition, up and right. */
      bottom:        100%;
      right:          50%;
      margin-bottom: 0.05em;
      margin-right:   -1em;
      border-top:    0.05em solid #000;
      border-right:   0.05em solid #000;
    }
    #diagram .up-right a {
      top:  -1em;
      left: 100%;
    }

    /* Arrowheads */
    #diagram .circ-right span {
      top:           -0.3em;
      left:          0;
      border-top:    0.3em solid #fff;
      border-right:  0.5em solid #000;
      border-bottom: 0.3em solid #fff;
    }
    * html #diagram .circ-right span {
      top:           -4px;
      t\op:          -0.3em;
      border-width:  4px 4px 4px 0;
      b\order-width: 0.3em 0.5em 0.3em 0;
    }

    #diagram .circ-top span, #diagram .down span {
      bottom:       0;
      left:         -0.3em;
      border-top:    0.5em solid #000;
      border-right:  0.3em solid #fff;
      border-left:   0.3em solid #fff;
    }
    * html #diagram .circ-top span, * html #diagram .down span {
      left:          -4px;
      lef\t:         -0.3em;
      border-width:  4px 4px 0;
      b\order-width: 0.5em 0.3em 0;
    }

    #diagram .down-right span, #diagram .right span {
      right:         0;
      bottom:        -0.3em;
      border-top:    0.3em solid #fff;
      border-bottom: 0.3em solid #fff;
      border-left:   0.5em solid #000;
    }
    * html #diagram .down-right span, * html #diagram .right span {
      bottom:        -4px;
      b\ottom:       -0.3em;
      border-width:  4px 0 4px 4px;
      b\order-width: 0.3em 0 0.3em 0.5em;
    }

    #diagram .up span {
      top:           0;
      left:          -0.3em;
      border-right:  0.3em solid #fff;
      border-bottom: 0.5em solid #000;
      border-left:   0.3em solid #fff;
    }
    * html #diagram .up span {
      left:          -4px;
      lef\t:         -0.3em;
      border-width:  0 4px 4px 4px;
      b\order-width: 0 0.3em 0.5em 0.3em;
    }

    #diagram .up-right span {
      top:           -0.3em;
      right:         0;
      border-top:    0.3em solid #fff;
      border-bottom: 0.3em solid #fff;
      border-left:   0.5em solid #000;
    }
    * html #diagram .up-right span {
      top:           -4px;
      t\op:          -0.3em;
      border-width:  4px 0 4px 4px;
      b\order-width: 0.3em 0 0.3em 0.5em;
    }

/* Rows, columns, heights, widths, and sizes. */
    .row1 { top: 0 }
    .row2 { top: 10em }
    .row3 { top: 20em }
    .row4 { top: 30em }
    .row5 { top: 40em }
    .row6 { top: 50em }
    .row7 { top: 60em }
    .row8 { top: 70em }

    .col1 { left: -0.65em }
    .col1_5 { left: 5em }
    .col2 { left: 10em }
    .col2_5 { left: 10.1em }
    .col3 { left: 21em }
    .col3_5 { left: 21.1em }
    .col4 { left: 32em }
    .col4_5 { left: 32.1em }
    .col5 { left: 43em }
    .col5_5 { left: 49.1em }
    .col6 { left: 54em }
    .col6_5 { left: 54.1em }

    .size1 { width: 4em }
    .size2 { width: 8em }
    .size3 { width: 9.5em; }
    .size4 { width: 6.95em; }
    .size5 { width: 20.85em; }

    .height1 { height: 5.7em }
    .height2 { height: 5.7em }
    .height3 { height: 10.7em }
    .height4 { height: 15.7em }
    .height5 { height: 20.7em }
    .height6 { height: 25.7em }
    
    .lheight1 { height: 1.7em }
    .lheight2 { height: 3.7em }
    .lheight3 { height: 10.7em }
    .lheight4 { height: 15.7em }
    .lheight5 { height: 21.7em }
    .lheight6 { height: 23.6em }
    .lheight7 { height: 25.7em }
    .lheight8 { height: 45.7em }
.lheight16 { height: 47.7em }
    
    .lwidthshort { width: 0.4em}
    .lwidth1 { width: 5.4em}
    .lwidth2 { width: 10em}
    .lwidth3 { width: 6.6em}
    .lwidth4 { width: 6em}
    .lwidth5 { width: 32.3em}
    .lwidth6 { width: 6em}
    .lwidth7 { width: 6em}
    .lwidth8 { width: 22.1em}
    .lwidth9 { width: 6em}
    
    .center { text-align:center}