html {
      margin:     0;
      padding:    0;
      color:      #000;
    }

    body {
      margin:     0 3em 0 0;
      padding:    1em;
     color:      #000;
      background: #fff;
      font-family: serif;
      /* The next declaration is important for IE5.x/Win.  You don't 
have to
         use 100%, but you must specify something. */
      font-size:  100%;
    }



    h1 span {
      display:   block;
      font-size: 80%;
    }

    h2 {
      max-width:     20em;
      margin:        2em auto 0.25em;
      font-size:     1.5em;
    }

    /* This will be wasted for IE5.x/Win. */


    /* This will not benefit IE6/Win users either. */

    p samp {
      background-color: transparent;
      color:            #c00;
    }

    /* We'll sacrifice some accessibility for IE users, where max-width 
doesn't
       work. */
    * html h2 { width: 20em }
    * html p, * html ul { width: 30em }

    /* IE/Win won't get this, either. */
    h2+p { margin-top: 0.5em }

    .err { text-decoration: line-through }

    /* Some Opera-friendly stuff for the email address. */
    .at { content: "@" }
    .dot { content: "." }


    /*
     * ==================================
     * 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. */
    }

    /* 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 {

	
    }

    /* 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;
      background: #fff;
      font-size:   1em;
      font-weight: normal;
      line-height: 2;
      text-align:  center;
	    border: 1px solid #000;
    }

    #diagram h4 {
      margin:      0;
      padding:     0;
      background: #fff;
      font-size:   1em;
      font-weight: normal;
      line-height: 2;
      text-align:  center;
	    border: 1px solid #000;
    }

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

    #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 }


    #diagram div li end {
      display:          block;
      position:         relative;
      border:           1px dotted #666;
      background-color: #eee;
      width: 25em;
      padding: 1em;
      margin-bottom: 1em;
      margin-right: 1em;
    }

 #diagram end c
{
display: block;
text-align: center;
}
 #diagram end r
{
display: block;
text-align: right;
}

 #diagram end t
{
      padding: 0.5em 3em;
      font-size:   1em;
      font-weight: normal;
      text-align:  center;
      border: medium double #000;
}

 #diagram end capt
{
      font-size:   .85em;
      font-weight: normal; 
      font-style: italic;
}


    /* 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;
    }

    /* 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:         1px;
      left:        100%;
      width:       1em;
      margin-left: 1px;
      height:      1em;
      border:      1px 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:          1px;
      width:         1em;
      height:        1em;
      margin-bottom: 1px;
      border:        1px solid #000;
      border-bottom: 0;
    }
    #diagram .circ-top samp {
      position:  absolute;
      bottom:    100%;
    }

    #diagram .down { /* Straight vertical transition, top to bottom. */
      top:         100%;
      left:        50%;
      margin-top:  1px;
      border-left: 1px solid #000;
    }
    #diagram .down a {
      top:  100%;
      left: 0;
    }

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

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

    #diagram .right { /* Straight horizontal transition, left to right. 
*/
      top:           0;
      left:          100%;
      margin-left:   1px;
      border-bottom: 1px solid #000;
    }
    #diagram .right a {
      top:  0;
      left: 100%;
    }
    #diagram .right end {
     
      left: 100%;
    }

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

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


    /* Arrowheads */
    #diagram .circ-right span {
      top:           -0.3em;
      left:          0;
      border-top:    1px solid #fff;
      border-right:  1px solid #000;
      border-bottom: 1px 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;
    }

    #diagram .right-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 .right-up span {
      left:          -4px;
      lef\t:         -0.3em;
      border-width:  0 4px 4px 4px;
      b\order-width: 0 0.3em 0.5em 0.3em;
    }

    /* Rows, columns, heights, widths, and sizes. */
    .rowminus3 { top: -17.1em }
    .rowminus2 { top: -10.05em }
    .rowminus1half { top: -9.1em }
    .rowminus1 { top: -5.1em }
    .rowminushalf { top: -4.1em }
    .row0 { top : -2.1em }
    .rowquarter { top: .05em }
    .rowhalf { top : 1em}
    .rowthreequarters {top: 2.05em}
    .row1 { top: 3em }
    .row1quarter { top: 4em }
    .row1half { top: 6em }
    .row1threequarters {top: 7em}
    .row2 { top: 9em }
    .row2quarter {top: 10em}
    .row2half { top: 12em}
    .row2threequarters {top: 13em}
    .row3 { top: 15em }


    .col1 { left: 3em }
    .col1end { left: 4.55em }
    .col1end2 { left: 5em }
    .col1quarter { left: 5.5em}
    .col1right { left: 6.25em }
    .col1half { left: 9em }
    .col1threequarters { left: 10.45em }
    .col2 { left: 12em }
    .col2half { left: 17.9em}
    .col3 { left: 21em }
    .col4 { left: 30em; }

    .size1 { width: 4em }
    .size2 { width: 6em }

    .size3  { width: 10em }
    a.size3 { margin-left: -5em }

    .size4 {
      width:  6.95em;
      height: 1.95em;
    }

    .size5 {
      width:  5.95em;
      height: 1.95em;
    }

    .size6 {
      width:  5.95em;
      height: 3.9em;
    }

    .height1 { height: 3.9em }
    
    .width0 { width: 4.5em }
    .width1 { width: 4.9em }
    .width2 { width: 5.9em }

		.hide{
			position:absolute;
			left:-999em;
			height:1px;
			width:100px;
			overflow:hidden;
		}
li a img{border:none;}

img {/* border style for all images */
  border: 0;
  }

  img.strip {/* scalable em size for strip series */
  width: 12em; 
  height: 9em; 
  }

  img.proj1final {
  width: 24em; 
  height: 32em; 
  }

  img.photovert {
  width: 12em;
  height: 16em;
}

  img.chat {
  width: 24em;
  height: 8.1375em;
}

  img.chat1 {
  width: 24em;
  height: 15em;
}

  img.screenshot {
  width: 12em;
  height: 8em;
}

  img.screenshot1 {
  width: 12em;
  height: 10em;
}

.floatleft { float: left;
margin-top: 1em; }