body {
  color: black;
  background-color: white;
  font-size: 10pt;
  font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
  margin: 0px; 
  padding: 10px;
  text-align: center; 
}

div#site {
  text-align: left;  
  margin: 0 auto;
  width: 700px;
}

div#content {
  padding: 0px 0px;
  margin: 0px 0px 0px 30px;
}

h1 {
  font-weight: normal;
  color: #abc9d0;
  font-size: 26px;
  margin: 0px 0px 0px -30px;
}

h2{ 
  font-weight: normal;
  padding: 5px 0 0 10px;
  margin: 0 0 0 -10px;
  font-size: 18px;
  color: #0099ba;
}

h3{ 
  font-weight: normal;
  padding: 0 0 5 0;
  margin: 0 0 -20 0;
  font-size: 14px;
  color: #0099ff;
}

a#h1{ 
  font-weight: normal;
  font-size: 26px;
  color: #abc9d0;
  text-decoration: none;
}

a#h1:visited{ 
  font-weight: normal;
  padding: 30px 0px 4px 0px;
  margin: 0 0 20px -20px;
  font-size: 30px;
  color: #abc9d0;
  text-decoration: none;
}

p {
  text-align: justify;
}

p#back {
  text-align: right;
  font-size: 12px;
}

p#abstract {
  width: 600px;
  margin-left: 30px;
  padding: 2px 2px 2px 2px;
  border: 1px solid silver;
}

a#navi {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

a:link { 
  text-decoration: none;
}

a#navi:hover {
  text-decoration: none;
  color: red;
}

a#h1{ 
  font-weight: normal;
  font-size: 26px;
  color: #abc9d0;
  text-decoration: none;
}

a#h1:visited{ 
  font-weight: normal;
  padding: 30px 0px 4px 0px;
  margin: 0 0 20px -20px;
  font-size: 26px;
  color: #abc9d0;
  text-decoration: none;
}

a#h1:hover {
  text-decoration: none;
  color: #abc9d0;
}

a#h1:vistited {
  text-decoration: none;
  color: #C0D2C0;
}

a#tut { 
  text-decoration: none;
  color: black;
}

a#tut:visited { 
  text-decoration: none;
  color: black;
}

table#content { 
  float: left;
  font-size: 10pt;
  margin-right: 15px;
  padding-right: 10px;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}

table#content th{ 
  font-weight: normal;
  text-align: left;
  font-size: 18px;
  color: black;
}

ul#content { 
  list-style-type: none;
  color: black;
}

ul#content ul{ 
  list-style-type: none;
}

table#dat{ 
  font-size: 10pt;
  padding: 5 5 5 5;
  margin: 0 auto;
  font-size: 14px;
}

table#dat th{ 
  font-size: 10pt;
  background-color: #bbe4ec;
}

table#dat td{ 
  font-size: 10pt;
  text-align: right;
}

pre { 
  background-color: #eeeeee;
  width: 600px;
  margin: 10 40 10 40;
  padding: 10 5 0 5;
  border: 1px solid silver;
  font-size: 12px;
}

blue { 
  color: blue;
}

red { 
  color: red;
}

green{ 
  color: green;
}

cn { 
  font-family: monospace;
}

table#pic{ 
  width: 650px;
}

table#pic td{ 
  text-align: center;
}

img#middle{ 
  vertical-align: middle;
  border: 1px solid silver;
}

table#tutorials { 
  font-size: 10pt;
  border: 0px;
  text-align: justify;
}

table#tutorials td{ 
  width: 330px; 
  vertical-align: top;
}

p#back {
  text-align: right;
  font-size: 10pt;
}

div#foreach { 
  width: 80px;
  height: 80px;
  float: left;
  font-size: 10pt;
}

div#foreach a{ 
  text-decoration: none;
  color: white;
  background: url(../pics/foreach1.png) no-repeat;
  padding: 0px 80px 70px 0px; 
  font-size: 10pt;
}

div#foreach a:hover{ 
  text-decoration: none;
  background: url(../pics/foreach2.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#barplot { 
  width: 85px;
  height: 99px;
  float: left;
}

div#barplot a{ 
  text-decoration: none;
  color: #92dcec;
  background: url(../pics/barplotprev.png) no-repeat;
  padding: 0px 80px 90px 0px; 
}

div#barplot a:hover{ 
  text-decoration: none;
  background: url(../pics/barplotprev1.png) no-repeat;
  padding: 0px 80px 90px 0px; 
}

div#plot { 
  width: 85px;
  height: 80px;
  float: left;
}

div#plot a{ 
  text-decoration: none;
  color: white;
  background: url(../pics/plotprev1.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#plot a:hover{ 
  text-decoration: none;
  background: url(../pics/plotprev2.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#mindmap { 
  width: 85px;
  height: 99px;
  float: left;
}

div#mindmap a{ 
  text-decoration: none;
  color: white;
  background: url(../pics/mindmapman1.png) no-repeat;
  padding: 0px 80px 80px 0px; 
}

div#mindmap a:hover{ 
  text-decoration: none;
  background: url(../pics/mindmapman2.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#pie { 
  width: 80px;
  height: 80px;
  float: left;
}

div#pie a{ 
  text-decoration: none;
  color: white;
  background: url(../pics/pieprev.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#pie a:hover{ 
  text-decoration: none;
  background: url(../pics/pieprev1.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#game { 
  width: 85px;
  height: 80px;
  float: left;
}

div#game a{ 
  text-decoration: none;
  color: white;
  background: url(../pics/gameprev1.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}

div#game a:hover{ 
  text-decoration: none;
  background: url(../pics/gameprev2.png) no-repeat;
  padding: 0px 80px 70px 0px; 
}