style.css

/* SETTING ALL TO ZERO*/
*{
	margin: 0;
	padding: 0;
}


body {
	margin-left:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	height:100%;
	width:100%;
	background-color:#efefef;
	}
A { 
    text-decoration: none;
	color:black;
  } 

A:link {TEXT-DECORATION:none;font-weight:normal;}
A:visited {TEXT-DECORATION:none;font-weight:normal;}
A:active {TEXT-DECORATION:none;font-weight:normal;}
A:hover {TEXT-DECORATION:none;} 

h3 {
	margin-top:50px;
	text-align:center;
}

h2 {
	margin-top:50px;
	text-align:center;
}

h1 {
	margin-top:30px; 
	text-align:center;
}

a img {
     border: none; 
   }
/* SETTING ALL TO ZERO*/


/* HEADER MENU*/
#upper_menu {
	width:100%;
	background:#ccc;
} 

#upper_menu ul {
	text-align:center;
	margin:0 auto;
	padding-top: 15px;
	height:40px;
}

#upper_menu ul li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style:bold;
	font-size:19px;
	list-style-type:none;
	float:center;
	display: inline;
	margin:0 75px 0 0;
}

#upper_menu ul li:hover{
	color:#0088ff;
}

#upper_menu ul li.selected{
	color:#0088ff;
}
/* HEADER MENU*/


#add_button {
	color:black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:14px;
	width:150px;
	margin:20px auto;
}



/* FORMS STYLE */

#form_container {
	padding:20px;
	margin: 20px auto;
	border: 1px solid #cdcdcd;
	width: 800px;
	-webkit-birder-radius: 6px;
	-moz-border-radius: 6px;
	 border-radius: 6px; 
}

#form_container h2 {
	margin:0;
}
	 
	 
#form_container tbody td {
	padding: 20px 10px 20px 10px;
}

/* FORMS STYLE */

/* ALERT BOX*/
#alert_box {
	position:fixed;
	bottom:0px;
	left:0px;
	padding:20px 10px 0px 10px;
	background:#fff;
	border-top: 1px solid black;
	border-right: 1px solid black;
}
/* ALERT BOX*/


/* TABLE STYLE */

.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
  margin-bottom:20px;
  border-top: 1px solid black;
}

.features-table tr.completed td.grey
{
	background: rgba( 0, 255, 0, 0.1);
}

.features-table tr.uncompleted td.grey
{
	background: rgba( 255, 128, 0, 0.1);
}


.features-table td
{
  height: 70px;
  padding: 15px 10px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  border-right: 1px solid black;
}
.features-table tbody td
{
  text-align: center;
}
.features-table td.grey
{
  background: #efefef;
  background: rgba(144,144,144,0.15);
  border-right: none;
  word-wrap: break-word;
}
.features-table td.green
{
  background: #e7f3d4;
  background: rgba(184,243,85,0.3);
  border-left: 1px solid black;
  border-right: none;
}
.features-table td:nowrap
{
  white-space: nowrap;
}
.features-table thead td
{
  font-size: 120%;
  font-weight: bold;
  border-top: 1px solid #eaeaea;
}
.features-table tfoot td
{
  font-size: 120%;
  font-weight: bold;
  border-bottom: 1px solid #dadada;
}

/* TABLE STYLE */


#stip {
	width:50%;
	margin:50px auto;
	padding:20px; 
	border:solid 3px #ddd;
	background-color:#ddd;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style:bold;
	font-size:15px;
}











/* CHARTS AND STUFF */

/*demo styles*/
table.chart_table  {width: 65%; height: 30vw; margin:50px auto; }
table.chart_table2  {width: 65%; height: 30vw; margin:50px auto; }
table.chart_table3  {width: 65%; height: 30vw; margin:50px auto; }
table.chart_table4  {width: 65%; height: 30vw; margin:50px auto; }
table.accessHide { position: absolute; left: -999999px; }
td.chart_td, th.chart_td {  font-size: 1.2em; padding: 2px; width: 13%; }
th.chart_td { background-color:#f4f4f4; } 
caption { font-size: 1.5em;  }

/*plugin styles*/
.visualize { position: relative; }
.visualize canvas { position: absolute; }
.visualize ul,.visualize li { margin: 0; padding: 0;}

/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px;  font-size: 1.1em; }
.visualize ul.visualize-key { list-style: none;  }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px;  }
.visualize ul.visualize-key .visualize-key-label { color: #000; }

/*pie labels*/
.visualize-pie .visualize-labels { list-style: none; }
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute;  margin: 0; padding:0; }
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }

/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555;  }
.visualize-labels-x li span.line, .visualize-labels-y li span.line {  position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%;  }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

/*visualize extension styles*/
.visualize { margin: 20px 0 0 30px; padding: 70px 40px 90px; }
.visualize canvas { border: 1px solid #aaa; margin: -1px; background: #fff; }
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #444; font-size: 1.3em; padding-right: 5px; }
.visualize-labels-y li span.line { border-style: solid;  opacity: .7; }
.visualize .visualize-info { border: 0; position: static;  opacity: 1; background: none; }
.visualize .visualize-title { position: absolute; top: 20px; color: #333; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; }
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #eee; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0;  }
.visualize ul.visualize-key li { font-size: 1.2em;  margin-left: 20px; padding-left: 18px; }
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px;  margin-top: -4px; }
.visualize ul.visualize-key .visualize-key-label { color: #333; }