@charset "utf-8";
/* CSS Document */
/*------------------------structure----------------------------*/

.container{
	width:960px;
	margin-left:auto;
	margin-right:auto;

}
.topnav{
	float:right;
	height:auto;
	text-align:right;
	padding-right:20px;
}
.main{
}
.leftwing{
	float:left;
	text-align:right;
	width:50%;
	margin-right:5px;
	margin-bottom:0px;
	margin-top:-20px;
	}
.rightwing{
	float:right;
	text-align:left;
	width:50%;
	margin-left:5px;
	margin-bottom:0px;
	margin-top:-20px;
	}
.clear{clear:both;}
.footer{
	text-align:center;
	line-height:30px;
	}
/*------------------------text------------------------ */
h1{
	color:#018aff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
}
h2, h3, h4 {color:#3d3832;}
p{
	margin-bottom:0px;
	margin-top:10px;
}
.bigfont{ font-size:24px;}
.bodytext{
	font-family:Arial, Helvetica, sans-serif;
	color:#858585;
	font-size:12px;
	font-weight: normal;
}
.bodytext a:link{
	color:#018aff;
	display: block;
	text-decoration:none;
	line-height:20px;
}
.bodytext a:hover{
	color:#fff;
	display:block;
	background-color:#018aff;
	line-height:20px;
}
.bodytext a:visited{
	color:#6CF;
	display:block;
	text-decoration:none;
	line-height:20px;
}
.interview a:link, .interview a:hover, .interview a:visited{display:inline; line-height:20px;}
.noblock a:link, .noblock a:hover, .noblock a:visited{display:inline; color:#fff;}
.graytext{
	font-family:Arial, Helvetica, sans-serif;
	color:#404040;
	font-size:12px;
	font-weight:bold;
}
li a:link{
	text-decoration:none;
	display:block;
	width: 45px; 
	height: 45px;
	}
li a:hover{
	background: url(../images/global.png) no-repeat top left;
	background-position: 0 -285px;
	text-decoration:none;
	}
.tip{ color:#F60;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;}
.top a{
	text-decoration:none;
	display:block;
	width: 45px; 
	height: 45px;
	}
/*------------------------global images------------------------*/
.logo{
   background: url(../images/global.png) no-repeat top left;
   background-position: 0 -475px; 
   width: 100px; 
   height: 73px;
   float: left;
   margin-left:20px;
   margin-top:10px;
}
.top {background: url(../images/global.png) no-repeat top left; width: 45px; height: 45px; }
.top-about 	{ background-position: 0 0; } 
.top-about2  	{background-position: 0 -95px; } 
.top-blog 	{background-position: 0 -190px;}
.top-home 	{background-position: -53px 0;}
.top-link {background-position: 0 -380px;}
.top-share 	{background-position: 0 -598px;} 

/*------------------------list------------------------*/
.topnav ul{ 
	margin-top:0px;	
	list-style:none;}
.topnav li{
	float:right;
	margin-left:5px;
	list-style:none;
}
.leftwing ul{
	margin-top:8px;	
	width:90%;
	list-style:none;
	margin-right:0px;
}
.leftwing li{
	float:right;
	margin-left:5px;
	margin-bottom:8px;
}
.littleicon li{
		background-image: url(../images/icons.png);
		background-repeat: no-repeat ;
}
.newlittleicon li{
		background-image: url(../images/iconsNew.png);
		background-repeat: no-repeat ;
}
.rightwing ul{
	margin-top:8px;
	width:90%;
	list-style:none;
	margin-left:-35px;
}
.rightwing li{
	float:left;
	margin-right:5px;
	margin-bottom:8px;
}

/*------------------------list images------------------------*/
.b2007-1 { background-position: -190px -855px;  } 
.b2007-2 { background-position: -190px -950px;  } 
.b2007-3 { background-position: -190px -1045px; } 
.b2007-4 { background-position: -190px -1140px; } 
.b2007-5 { background-position: -190px -1235px; } 
.b2007-6 { background-position: -190px -1330px;  } 
.b2007-7 { background-position: -190px -1425px; } 

.o2007-1 {background-position: 0 0;  } 
.o2007-10 { background-position: 0 -95px;  } 
.o2007-11 { background-position: 0 -190px; } 
.o2007-2 { background-position: 0 -285px; } 
.o2007-3 { background-position: 0 -380px;} 
.o2007-4 { background-position: 0 -475px; }
.o2007-5 { background-position: 0 -570px; }
.o2007-6 { background-position: 0 -665px;  } 
.o2007-7 { background-position: 0 -760px;  } 
.o2007-8 { background-position: 0 -855px;  } 
.o2007-9 { background-position: 0 -950px;} 

.o2008-1 { background: url(../images/icons.png) no-repeat top left; background-position: 0 -1045px;  } 
.o2008-10 { background-position: 0 -1140px;  } 
.o2008-11 { background-position: 0 -1235px;  } 
.o2008-12 { background-position: 0 -1330px;} 
.o2008-13 { background-position: 0 -1425px; } 
.o2008-14 { background-position: 0 -1520px;  } 
.o2008-15 { background-position: 0 -1615px;  } 
.o2008-16 { background-position: 0 -1710px;  } 
.o2008-17 { background-position: 0 -1805px;  } 
.o2008-18 { background-position: 0 -1900px; } 
.o2008-2 { background: url(../images/icons.png) no-repeat top left; background-position: -95px 0;  } 
.o2008-3 { background: url(../images/icons.png) no-repeat top left; background-position: -95px -95px;  } 
.o2008-4 { background: url(../images/icons.png) no-repeat top left; background-position: -95px -190px;  } 
.o2008-5 { background: url(../images/icons.png) no-repeat top left; background-position: -95px -285px;  } 
.o2008-6 { background: url(../images/icons.png) no-repeat top left;background-position: -95px -380px;  } 
.o2008-7 { background: url(../images/icons.png) no-repeat top left;background-position: -95px -475px;  } 
.o2008-8 { background: url(../images/icons.png) no-repeat top left;background-position: -95px -570px; } 
.o2008-9 { background-position: -95px -665px; } 

.o2009-1 { background-position: -95px -760px; } 
.o2009-10 { background-position: -95px -855px; } 
.o2009-11 { background-position: -95px -950px; } 
.o2009-12 { background-position: -95px -1045px; } 
.o2009-13 { background-position: -95px -1140px;  } 
.o2009-2 { background-position: -95px -1235px; } 
.o2009-3 { background-position: -95px -1330px;  } 
.o2009-4 { background-position: -95px -1425px; } 
.o2009-5 { background-position: -95px -1520px;  } 
.o2009-6 { background-position: -95px -1615px;  } 
.o2009-7 { background-position: -95px -1710px;  } 
.o2009-8 { background-position: -95px -1805px; } 
.o2009-9 { background-position: -95px -1900px;  } 

.o2010-1 { background-position: -190px 0;  } 
.o2010-2 { background-position: -190px -95px; } 
.o2010-3 { background-position: -190px -190px;  } 
.o2010-4 { background-position: -190px -285px; } 
.o2010-5 { background-position: -190px -380px;  } 
.o2010-6 { background-position: -190px -475px;  } 
.o2010-7 { background-position: -190px -570px; } 
.o2010-8 { background-position: -190px -665px;  } 
.o2010-9 { background-position: -190px -760px;} 
.o2010-10 {background-position: 0 0;}
.o2010-11 {background-position: 0 -95px;}
.o2010-12 {background-position: 0 -190px;}
.o2010-13 {background-position: 0 -285px;}

.o2011-1 {background-position: 0 -380px;}
.o2011-2 {background-position: 0 -475px;}
.o2011-3 {background-position: 0 -570px;}
.o2011-4 {background-position: 0 -665px;}
.o2011-5 {background-position: 0 -760px;}

.showdiv{display: none;}
.showbox{width:713px; height:auto; overflow:hidden; overflow-x: hidden;}
.showbox500{width:500px;height:auto;overflow: hidden; }
.showbox550{width:550px;height:auto;overflow: auto;}
.showbox600{width:650px; height:auto; overflow:hidden; overflow-x: hidden;}

/*------------------------list show images------------------------*/
.showb2007{background: url(../images/pictureb2007.jpg) no-repeat top left;}
.Pb2007-1{ background-position: 0 0; width: 500px; height: 375px; } 
.Pb2007-2{ background-position: 0 -425px; width: 703px; height: 380px; } 
.Pb2007-3{ background-position: 0 -855px; width: 703px; height: 380px; } 
.Pb2007-4{ background-position: 0 -1285px; width: 703px; height: 380px; }
.Pb2007-5{ background-position: 0 -1700px; width: 703px; height: 380px; }
.Pb2007-6{ background-position: 0 -2130px; width: 703px; height: 380px; }
.Pb2007-7{ background-position: 0 -2550px; width: 500px; height: 268px; }

.show2007{background: url(../images/picture2007.jpg) no-repeat top left;}
.P2007-1{ background-position: 0 0; width: 703px; height: 380px; } 
.P2007-2{ background-position: 0 -400px; width: 703px; height: 380px; }
.P2007-3{ background-position: 0 -800px; width: 703px; height: 380px; }
.P2007-4{ background-position: 0 -1200px; width: 703px; height: 380px; }
.P2007-5{ background-position: 0 -1600px; width: 703px; height: 380px; }
.P2007-6{ background-position: 0 -2000px; width: 703px; height: 380px; }
.P2007-7{ background-position: 0 -2400px; width: 703px; height: 380px; }
.P2007-8{ background-position: 0 -2800px; width: 703px; height: 380px; }
.P2007-9{ background-position: 0 -3200px; width: 703px; height: 380px; }
.P2007-10{ background-position: 0 -3600px; width: 703px; height: 380px; }
.P2007-11{ background-position: 0 -4000px; width: 703px; height: 380px; } 

.show2008{background: url(../images/picture2008.jpg) no-repeat top left;}
.P2008-1{ background-position: 0 0; width: 703px; height: 380px; } 
.P2008-2{ background-position: 0 -400px; width: 703px; height: 380px; }
.P2008-3{ background-position: 0 -800px; width: 703px; height: 380px; }
.P2008-4{ background-position: 0 -1200px; width: 703px; height: 380px; }
.P2008-5{ background-position: 0 -1600px; width: 703px; height: 380px; }
.P2008-6{ background-position: 0 -2000px; width: 703px; height: 380px; }
.P2008-7{ background-position: 0 -2400px; width: 703px; height: 380px; }
.P2008-8{ background-position: 0 -2800px; width: 703px; height: 380px; }
.P2008-9{ background-position: 0 -3200px; width: 703px; height: 380px; }
.P2008-10{ background-position: 0 -3600px; width: 703px; height: 380px; }
.P2008-11{ background-position: 0 -4000px; width: 703px; height: 380px; }
.P2008-12{ background-position: 0 -4400px; width: 703px; height: 380px; }
.P2008-13{ background-position: 0 -4800px; width: 703px; height: 380px; }
.P2008-14{ background-position: 0 -5200px; width: 703px; height: 380px; }
.P2008-15{ background-position: 0 -5600px; width: 703px; height: 380px; }
.P2008-16{ background-position: 0 -6000px; width: 703px; height: 380px; }
.P2008-17{ background-position: 0 -6400px; width: 703px; height: 380px; }
.P2008-18{ background-position: 0 -6800px; width: 703px; height: 380px; }

.show2009{background: url(../images/picture2009.jpg) no-repeat top left;}
.P2009-1{ background-position: 0 0; width: 481px; height: 382px; } 
.P2009-2{ background-position: 0 -400px; width: 347px; height: 454px; } 
.P2009-3{ background-position: 0 -1100px; width: 500px; height: 383px; } 
.P2009-4{ background-position: 0 -1500px; width: 500px; height: 305px; }
.P2009-5{ background-position: 0 -1806px; width: 587px; height: 375px; }
.P2009-6{ background-position: 0 -2250px; width: 500px; height: 504px; }
.P2009-7{ background-position: 0 -2750px; width: 500px; height: 293px; }
.P2009-8{ background-position: 0 -3100px; width: 584px; height: 512px; }
.P2009-9{ background-position: 0 -3650px; width: 500px; height: 388px; }
.P2009-10{ background-position: 0 -4100px; width: 500px; height: 388px; }
.P2009-11{ background-position: 0 -4500px; width: 500px; height: 281px; }
.P2009-12{ background-position: 0 -4850px; width: 500px; height: 133px; }

.show2010{background: url(../images/picture2010.jpg) no-repeat top left;}
.P2010-1{ background-position: 0 0; width: 500px; height: 317px; } 
.P2010-2{ background-position: 0 -340px; width: 500px; height: 317px; }
.P2010-3{ background-position: 0 -680px; width: 500px; height: 309px; }
.P2010-4{ background-position: 0 -1150px; width: 500px; height: 317px; }
.P2010-5{ background-position: 0 -1500px; width: 500px; height: 200px; }
.P2010-6{ background-position: 0 -1720px; width: 500px; height: 400px; }
.P2010-7{ background-position: 0 -2150px; width: 500px; height: 340px; }
.P2010-8{ background-position: 0 -2520px; width: 500px; height: 340px; }
.P2010-9{ background-position: 0 -2900px; width: 500px; height: 340px; }
.P2010-10{ background-position: 0 -3300px; width: 500px; height: 340px; }
.P2010-11{ background-position: 0 -3650px; width: 500px; height: 340px; }
.P2010-12{ background-position: 0 -4050px; width: 500px; height: 340px; }
.P2010-13{ background-position: 0 -4450px; width: 500px; height: 340px; }
/*------------------------for round corners subpage------------------------*/
.leftspace{margin-left:20px;}

.cbb {
	margin:1em 0;
	padding:0 10px;
	border:1px solid #666;
	background:#fff;
}
.cbb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
/* Normal styling */
.cb {margin:0.5em 0;}
/* Top corners and border */
.bt {
	height:17px;
	margin:0 0 0 18px;
	background:url(../images/box.png) no-repeat 100% 0;
}
.bt div {
	position:relative;
	left:-18px;
	width:18px;
	height:17px;
	background:url(../images/box.png) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

/* Bottom corners and border */
.bb {
	height:17px;
	margin:0 0 0 18px;
	background:url(../images/box.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left:-18px;
	width:18px;
	height:17px;
	background:url(../images/box.png) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

/* Left border */
.i1 {
	padding:0 0 0 12px;
	background:url(../images/borders.png) repeat-y 0 0;
}
/* Right border */
.i2 {
	padding:0 12px 0 0;
	background:url(../images/borders.png) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	display:block;
	margin:10;
	padding:0 20px 0 20px;
	background:#fff;
}
/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}

[if lt IE 8]>
<style type="text/css">
/* Required IE fixes
================================================*/
/* Serve gif images to IE/Win pre version 7 */
* html .i1,
* html .i2 {background-image:url(../images/borders.png);}
* html .bt,
* html .bt div,
* html .bb,
* html .bb div {background-image:url(../images/box.png);}
/* Set a height to fix up some rendering issues. */
* html .i1,
* html .i3 {height:1px;}

</style>
<![endif]

/*---------------Table style----------------*/
.newspaper{ 
	font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
	font-size: 12px;
	text-align: left;
	border-collapse: collapse;
	border:#6699cc 1px solid;
	margin: 20px;
}
.newspaper th{
	font: normal 14px;
	color: #018aff;
	border-bottom: 1px dashed #6699cc;
	padding: 12px  17px 12px 17px;
}

.newspaper td {
	color: #858585;
	padding: 7px 17px 7px 17px;
}

.newspaper tbody tr:hover td {
	color: #1b1a19;
	background-color: #e2f0d7;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}

.newspaper ul{
	list-style:circle;
	text-indent:0px;
	padding-left:0;
	margin:0;
}

.leftborder {border-left: 1px solid #e2f0d7;}
	

/*----------------user interview----------*/
.userbox{
	width:680px;
	margin-top:20px;
	height:auto;
}
.userinfo {
	width:157px;
	float:left;
	height: 109px;
	background-color:#fff;
	background-image:url(../project/Thesis/user.png);
	background-position:right;
}
.personas{
	width:157px;
	float:left;
	background-color:#fff;
	height:auto;
}
.interview{
	width:500px;
	float:left;
	background-color:#f1f2ec;
	padding: 0 0px 5px 20px ;
}
div.interview:hover{
	color: #1b1a19;
	background-color: #e2f0d7;
}
.20pxblock{height:20px;}