/* warning: maybe pandas are inside */

/* reset styles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	background: transparent;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/* master styles */

body {	
	font-family: verdana, Arial, sans-serif;
	font-size: 100%;
	color: #999;
	background: #fff;
	overflow: hidden;
	}
	
#container {
	margin: 20% auto 20px auto;
	width: 400px;
	height: 300px;
	display: block;
	text-align:  center;
	}	
	
#logo {
	display:  block;
	margin: 20px auto;
	background: url(../img/logo.png) no-repeat;
	width: 75px;
	height: 75px;
	opacity: .1;
	-webkit-transition: opacity .8s ease;
	-moz-transition: opacity .8s ease;
	-o-transition: opacity .8s ease;
	transition: opacity .8s ease;
	}
#logo:hover { opacity: .4; }

h1 {
	text-indent: -3000px;
	background: url(../img/dc_text.png) no-repeat;
	width: 185px;
	height: 30px;
	margin: 20px auto;
	opacity: .8;
	}

#navigation {

	}
	
#navigation li {
	display: inline-block;
	}
#navigation li:after {
	content: url(../img/dot.png);
}
#navigation li:last-child:after {
	content: "";
}
a:link,
a:visited {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #9a9a9a;
	-webkit-transition: color .6s ease;
	-moz-transition: color .6s ease;
	-o-transition: color .6s ease;
	transition: color .6s ease;
	}
a:hover {
	color: #a80505;
	}
#dr:hover {
	color: #ea4c89;
	}
#be:hover {
	color: #005cff;
	}
#fl:hover {
	color: #ff0084;
	}	
#fb:hover {
	color: #3b5998;
	}
#tw:hover {
	color: #60d7ff;
	}


/* the story will be contiuned */