/********************************

 Core CSS file for Cytoscape.org
 
 Customized by Keiichiro Ono
 kono at ucsd dot edu

*********************************/
body {
	text-align: center; /* center on ie */
	width: 100%;
}

#container {
	text-align: left;
	margin: 0 auto; /* center on everything else */
	width: 950px;
}

body,th,td,div,p,h1,h2,li,dt,dd {
	font-family: Tahoma, "Gill Sans", Arial, sans-serif;
}

#indent {
	padding-left: 5px;
}

/*********************
	front page stuff 
*********************/
#feature {
	height: 220px;
	width: 100%;
	background-color: #efefff;
	background: url(../images/title_new.png);
	background-position: top left;
	border: none;
	font-family: Arial;
	border: 1px solid #999999;
	margin-top: 2px;
}

/* For Cytoscape logo on the top page */
#feature img {
	float: left;
	padding-left: 25px;
	padding-top: 20px;
}

#feature,#feature p {
	color: #ffffff;
	font-size: 12px;
}

#feature p {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#feature .title {
	font-size: 34px;
	margin: 2px;
	padding-left: 15px;
	padding-top: 5px;
	color: #333333;
}

#feature .article {
	float: right;
	margin-right: 15px;
	color: #333333;
}

#feature .article h3 {
	font-size: 14px;
	color: #333333;
}

#feature a {
	text-decoration: none;
	font-weight: bold;
	color: #4466ff;
}

#feature a:hover {
	text-decoration: underline;
}

#feature .about {
	width: 200px;
	padding: 0px;
}

#feature .about2 {
	position: absolute;
	left: 200px;
	top: 120px;
	padding-bottom: 15px;
	font-size: 12px;
	width: 250px;
}

#feature .about2 i {
	color: red;
}

#feature .about p {
	margin: 4px 0px;
}

#main {
	width: 65%;
	float: left;
}

/****************************************
	Title bar on the top of each page.
*****************************************/
#topbar {
	height: 40px;
	color: #424242;
	background-color: #FFFFFF;
	border: none;
	width: 100%;
}

#topbar .title {
	font-size: 24px;
	margine: 5px;
	padding-top: 5px;
	padding-left: 25px;
	font-family: Arial;
}

#mainblock {
	margin-left: 　auto;
	margin-right: 　auto； font-size :   12px;
	float: left;
	width: 100%;
}

/* Image on the center */
.topimage {
	text-align: center;
	width: 100%;
}

.topimage1 {
	margin: 0px auto;
	margin-top: 10px;
	padding-top: 20px;
	margin-bottom: 10px;
}

.introduction1 {
	margin: 10px;
}

.introduction1 img {
	margin: 10px;
	float: right;
}

.introduction1 p {
	margin: 0;
	padding: 24px;
	line-height: 1.5;
	color: #000000;
	background: #ffffff;
}

.introduction1 p a {
	text-decoration: none;
}

.introduction1 h2 {
	font-size: 24px;
	margin: 5px;
	padding: 5px;
	font-family: Arial;
	color: #239aff;
	border-bottom: 2px double;
	border-color: #33aaff;
}

.introduction {
	margin: 0px;
	width: 100%;
}

.introduction img {
	margin-right: 10px;
	margin-left: 15px;
	margin-bottom: 15px;
	float: left;
}

.introduction h2 {
	font-size: 24px;
	mrgine: 5px;
	padding: 10px;
	padding-bottom: 5px;
	font-family: Arial;
	width: 100%;
	border-left: 8px double;
	border-bottom: 1px double;
	border-color: #33aaff;
}

.introduction h3 {
	text-align: center;
	font-size: 18px;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 0px;
	font-family: Arial;
	color: #1111ff;
}

.introduction h4 {
	font-size: 16px;
	margin: 10px;
	padding: 5px;
	font-family: Arial;
}

.introduction p {
	font-size: 13px;
	padding-left: 5px;
	line-height: 1.5;
	color: #000000;
	margin-bottom: 25px;
}

.introduction p a {
	text-decoration: none;
}

.introduction ul {
	float: right;
}

#block {
	width: 100%;
	text-align: left;
	  margin: 0 auto;
	float: left;
	padding: 15px;
}

#block1 {
	padding: 2px;
	margin-top: 5px;
	border: none;
	float: left;
	width: 49%;
}

#block2 {
	padding: 2px;
	margin-top: 5px;
	border: none;
	float: right;
	width: 49%;
}

#code {
	height: 350px;
	width: 100%;
	color: #333399;
	font-family: Courier;
	font-size: 14px;
	font-weight: bold;
}

/* Navigation bar */
#nav {
	width: 955px;
	background: #ffffff;
	font-size: 12px;
	text-decoration: none;
}

#nav a {
	color: #ffffff;
	text-decoration: none;
}

#nav .item {
	border: 1px solid #c9c9c9;
	text-align: center;
	background: #30999a;
	height: 20px;
	width: 93px;
	float: left;
	padding-top: 4px;
}

#nav .itemlast {
	border: 1px solid #c9c9c9;
	text-align: center;
	background: #30999a;
	height: 20px;
	width: 95px;
	float: left;
	padding-top: 4px;
}

#links2 {
	list-style-type: none;
	width: 960px;
	background-color: #ffffff;
	border: none;
}

#links2 p {
	font-size: 12px;
	margin-top: 0;
	padding-top: 0px;
	padding-left: 15px;
	padding-right: 5px;
}

#links2 .naventry1 {
	background-color: #97b83a;
	color: #ffffff;
	font-size: 12pt;
	float: left;
	width: 260px;
	height: 180px;
	border: 1px solid #c9c9c9;
	padding: 0px;
}

#links2 .naventry2 {
	background-color: #ffffff;
	font-size: 12px;
	float: left;
	width: 170px;
	height: 180px;
	border: 1px solid #c9c9c9;
	padding: 0px;
}

#links2 .naventry3 {
	background-color: #98ca98;
	color: #ffffff;
	font-size: 12px;
	float: left;
	width: 172px;
	height: 180px;
	border: 1px solid #c9c9c9;
	padding: 0px;
}

#links2 .naventry3 item {
	float: left;
	margin: 2px;
	padding-left: 10px;
}

#links {
	width: 100%;
	color: #000000;
	border: none;
}

/*/*/
a {
	
}

#links {
	width: 950px;
	padding: 0px;
	border-spacing: 0px;
	background: #ffffff;
}

/* */
#links td {
	font-size: 12px;
}

#links td p,#products td li {
	margin-top: 0px;
	margin-bottom: 4px;
}

#links td h1 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}

#links td {
	vertical-align: top;
	border-left: 1px dotted #000000;
	padding-left: 10px;
}

#links #first {
	padding-left: 15px;
	border-left: none;
	padding-bottom: 45px;
	padding-top: 45px;
}

#links #caption {
	color: #000000;
	padding-left: 15px;
	text-align: center;
	vertical-align: middle;
	border: none;
	height: 32px;
}

#links h1 a {
	text-decoration: none;
}

#links h1 a:hover {
	color: #5f5fff;
	text-decoration: none;
}

#links a {
	color: #000000;
}

#links a:hover {
	color: #2299ee;
	text-decoration: underline;
}

#links ul {
	list-style-type: none;
	list-style-image: none;
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 8px;
}

#links2 h1 {
	font-size: 14px;
	margin: 3px;
	padding: 2px;
	color: #000000;
}

#links2 a {
	text-decoration: none;
}

#links2 ul li {
	list-style-type: none;
	list-style-image: none;
}

#main .item {
	width: 100%;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	font-size: 12px;
	padding-bottom: 10px;
	background-repeat: repeat-y;
	border: 1px solid #878087;
}

.item li {
	margin-left: 0px;
}

.item a {
	color: #2971A7;
	border: none;
}

.item img {
	border: none;
}

.item h2 {
	margin: 0px;
	font-size: 16px;
	padding: 5px;
	padding-left: 20px;
	background-color: #989DA5;
	color: #FFFFFF;
	font-family: Arial;
}

.item h2 i {
	color: #ff1a1a;
	font-family: Arial;
}

.item h2 a:link {
	color: #2971A7;
	text-decoration: none;
}

.item h2 a:visited {
	color: #333333;
	text-decoration: none;
}

.item h2 a:hover {
	color: #2971A7c;
	text-decoration: underline;
}

#paragraph {
	max-width: 550px : 
	 float : left;
	font-size: 12px;
	margin: 5px;
	padding: 5px;
	text-decoration: none;
}

#paragraph .pub {
	padding: 5px;
	margin: 0px;
	background-color: #eeeefe;
}

#paragraph pub h3 {
	font-size: 12px;
	padding: 3px;
}

#paragraph a {
	text-decoration: none;
}

#paragraph ul {
	text-decoration: none;
	padding-left: 10px;
}

#paragraph ul li {
	text-decoration: none;
}

#paragraph i2 {
	padding-left: 30px;
}

.item img {
	float: right;
	margin: 5px;
	padding: 5px;
}

.item .details {
	font-size: smaller;
	margin-top: 4px;
}

#prefooter {
	font-size: smaller;
	clear: both;
	border: none;
	background: #ffffff;
	margin-top: 10px;
	padding-left: 30px;
	padding-top: 1px;
	padding-bottom: 10px;
	border-top: 2px solid #335599;
	border-bottom: 2px solid #335599;
}

#footer {
	font-size: 12px;
	clear: both;
	border: none;
	color: #878087;
	background-color: #ECECEC;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#footer a {
	text-decoration: none;
}

#footer a:link {
	color: #444444;
}

#footer a:active,.footer a:hover {
	color: #005599;
}

#footer a:visited {
	color: #777777;
}

#rightbox {
	float: right;
	width: 34%;
	margin-top: 10px;
	margin-bottom: 0px;
}

a {
	color: #2971A7;
}

#rightbox .roundbox {
	font-family: trebuchet MS, trebuchet, verdana, arial, sans-serif;
	font-size: 11px;
	padding: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #CCE6FF;
}

#rightbox .roundbox h2 {
	font-size: 14px;
	padding: 2px;
	text-align: center;
}

#rightbox .roundbox h3 {
	text-transform: uppercase;
	margin: 2px;
}

#rightbox .roundbox navigation {
	padding: 3px;
	width: 34%;
	text-align: center;
	float: center;
}

#rightbox .navigation ul {
	padding: 3px;

}

#rightbox .navigation a img{
	border-style:none;
}

#rightbox .navigation li {
	text-decoration: none;
	margin: 7px;
	padding: 5px;
	text-align: center;
	list-style-type: none;
	list-style-image: none;
	border: 1px solid #999999;
}

#rightbox .navigation li:before {
	display: none;
	}

#rightbox .roundbox ul {
	padding: 0px;
	margin: 0.5em;
	padding-left: 0.5em;
	list-style: none;
}

#rightbox .roundbox li:before {
	content: "\00BB \0020";
}

.blue {
	background-color: #ECECEC;
	border: 1px solid #CCE6FF;
}

.roundbox a {
	text-decoration: none;
}

.blue_outline {
	background-color: #FFFFFF;
	border: 1px solid #CCE6FF;
}

.peach {
	background-color: #FFFFFF;
	border: 1px solid #878087;
}

.peach a:link {
	color: #2971A7;
}

.peach a:visited {
	color: #AD9357;
}

.lavendar {
	background-color: #F2BAF9;
	border: 1px solid #D3A3D9;
}

.slate {
	background-color: #D8D8EC;
	border: 1px solid #B5B5D8;
}

.slate a:link {
	color: #5B5BB2;
}

.slate a:visited {
	color: #5E5E77;
}

.codebox {
	color: #333399;
	font-family: Courier;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.codebox h3 {
	color: #333399;
}

.codebox ul {
	padding: 0px;
	margin: 0.5em;
	padding-left: 0.5em;
	list-style: none;
}

.codebox li:before {
	content: "\00BB \0020";
}

.lightyellow {
	background-color: #FDFDCA;
	border: 1px solid #007100;
}

#screenshots {
	width: 100%;
}

#screenshots .item {
	width: 30%;
	float: left;
	margin: 5px;
	margin-bottom: 10px;
	font-size: 12px;
	padding: 10px;
	text-align: center;
}

#screenshots h2 {
	margin: 10px;
	padding: 5px;
	font-size: 16px;
	font-family: Arial;
	color: #30999a;
	border-bottom: 1.5px solid #30999a;
}

#screenshots .item a {
	text-decoration: none;
}

#screenshots .item img {
	text-decoration: none;
}

#screenshots .paragraph {
	font-size: 14px;
}