@charset "UTF-8";

#slider{
	
	}

body {
	background-image:url(images/bg.gif);
	background-repeat: no-repeat;
}




#toggleText{
	visibility: hidden;	
	}

#copyright {
	height: 15px;
	width: 100px;
	position: absolute;
	left: 623px;
	top: 715px;
}


#info680 {
	height: 207px;
	width: 300px;
	background-image: url(images/info_680.png);
	position: absolute;
	left: 30px;
	z-index: 100;
	top: 436px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 360px;
	padding-top:20px;
}

#info603 {
	height: 207px;
	width: 298px;
	background-image: url(images/info_603.png);
	position: absolute;
	left: 107px;
	z-index: 100;
	top: 436px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 286px;
	padding-top:21px;
}

#info545 {
	height: 207px;
	width: 298px;
	background-image: url(images/info_545.png);
	position: absolute;
	left: 165px;
	z-index: 100;
	top: 436px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 227px;
	padding-top:20px;
}

#info453 {
	height: 207px;
	width: 298px;
	background-image: url(images/info_453.png);
	position: absolute;
	left: 257px; /**/
	z-index: 100;
	top: 436px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 136px; /**/
	padding-top:21px;
}

#info623 {
	height: 207px;
	width: 298px;
	background-image: url(images/info_623.png);
	position: absolute;
	left: 87px; /**/
	z-index: 100;
	top: 436px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 305px; /**/
	padding-top:20px;
}

#info337 {
	height: 207px;
	width: 298px;
	background-image: url(images/info_337.png);
	position: absolute;
	left: 371px; /**/
	z-index: 100;
	top: 438px;
	display:table-cell;
	padding-right: 20px;
	padding-left: 20px; /**/
	padding-top:20px;
}

.infoText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999;
	text-align: left;
	line-height: 15px;
}

#hopeLogoAnim {
	height: 121px;
	width: 120px;
	padding-right:30px;
	background-repeat: no-repeat; 
	background-image:url(images/hopeLOGO.gif);
	position: absolute;
	left: 892px;
	top: 30px;
}

#hopeLogo {
	height: 121px;
	width: 120px;
	padding-right:30px;
	background-repeat: no-repeat; 
	background-image:url(images/hopeLOGO2.gif);
	position: absolute;
	left: 892px;
	top: 30px;
}


#menuInfo {
	height: 19px;
	width: 68px;
	position: absolute;
	left: 30px;
	top: 171px;
	display:table;
	overflow: hidden;
}
#menuInfo a {
	display: block;
	width:60px;
	height:16px;
	padding: 3px 0px 0px 5px;
text-decoration: none; /*lets remove the link underlines*/
}
#menuInfo a:hover {
	/*color: #ffffff;*/
	background-image:url(images/blue_info.png);
	user-select: none;
}
#menuInteract {
	height: 19px;
	width: 83px;
	position: absolute;
	left: 740px;
	top: 171px;
	display:table;
	overflow: hidden;
}
#menuInteract a {
	display: block;
	width:83px;
	height:16px;
	padding: 3px 0px 0px 0px;
	text-decoration: none; /*lets remove the link underlines*/
	
}

#menuInteractOn {
	height: 19px;
	width: 83px;
	position: absolute;
	left: 740px;
	top: 171px;
	display:table;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background-color:#DDD;
}

#menuInteractOn text {
	padding: 3px 0px 0px 0px;
	display:table-cell;
	
}

#menuInteract a:hover {
	/*color: #ffffff;*/
	background-image:url(images/blue_interactive.png);
	user-select: none;
}

#menuGraphics {
	height: 19px;
	width: 69px;
	position: absolute;
	left: 823px;
	top: 171px;
	display:table;
	overflow: hidden;
}
#menuGraphics a {
	display: block;
	width:69px;
	height:16px;
	padding: 3px 0px 0px 0px;
text-decoration: none; /*lets remove the link underlines*/
}
#menuGraphics a:hover {
	/*color: #ffffff;*/
	background-image:url(images/blue_graphics.png);
	user-select: none;
}

#menuGraphicsOn {
	height: 19px;
	width: 69px;
	position: absolute;
	left: 823px;
	top: 171px;
	display:table;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background-color:#DDD;
}

#menuGraphicsOn text {
	padding: 3px 0px 0px 0px;
	display:table-cell;
	
}

#menuAboutOn {
	height: 19px;
	width: 57px;
	position: absolute;
	left: 892px;
	top: 171px;
	display:table;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background-color:#DDD;
}

#menuAboutOn text {
	padding: 3px 0px 0px 0px;
	display:table-cell;
	
}

#menuAbout {
	height: 19px;
	width: 57px;
	position: absolute;
	left: 892px;
	top: 171px;
	display:table;
	overflow: hidden;
}
#menuAbout a {
	display: block;
	width:57px;
	height:16px;
	padding: 3px 0px 0px 0px;
text-decoration: none; /*lets remove the link underlines*/
}
#menuAbout a:hover {
	/*color: #ffffff;*/
background-image:url(images/blue_about.png);
	user-select: none;
}

.menuText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	position: relative;
}

.menuInfoText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999;
	text-align: left;
	vertical-align: middle;
	display: table-cell;
	position: absolute;
	}

.projectText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999;
	display: table-cell;
	position: relative;
}

.footerText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#BBB;
	display: table-cell;
	position: relative;
	padding-bottom:30px;
}

#list-dot {
	width: 15px;
	height: 453px;
	left: 723px;
	top: 210px;
	position: absolute;
}
#list-dot ul {
	margin: 0; 
padding: 0;
list-style-type: none;
}
#list-dot li {
	display: block;
	background: #ffffff;
list-style-type: none;
	
	/*margin: 0px 0 3px 0;*/
	padding: 0px 0px 19px 0px;
	z-index: 100;	
}
/*
#list-dot blank {
display: block;
}

#list-dot dot {
display: block;
background-image: url(../Images/dot_grey.jpg);
	background-repeat: no-repeat;
}
*/

#email {
	width: 200px;
	height: 453px;
	left: 740px;
	top: 210px;
	position: absolute;		/* this width value is also effected by
the padding we will later set on the links.	*/
}
#email a {
text-decoration: none; /*lets remove the link underlines*/
}


#list-menu {
	width: 200px;
	height: 453px;
	left: 740px;
	top: 210px;
	position: absolute;		/* this width value is also effected by
the padding we will later set on the links.	*/
}
#list-menu ul {
margin: 0; 
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999;
}
#list-menu li {
	margin: 0px 0 3px 0;
}
#list-menu a {
display: block;
width:197px;
height:13px;
padding: 1px 2px 2px 10px;
color: #999;
/*background: #dcdcdc;*/
text-decoration: none; /*lets remove the link underlines*/
}
#list-menu a:hover {
	/*color: #ffffff;*/
	background-image:url(images/blue_project.png);
	user-select: none;
	
}

#list-menu blank {
display: block;
width:197px;
height:13px;
padding: 1px 2px 2px 10px;
background: #ffffff;
text-decoration: none; /*lets remove the link underlines*/
}

*{outline: none;}
img {border: 0;}
.container {
	width: 680px;
	padding: 0;
	margin: 0 auto;
	position: absolute;
	left: 30px;
	top: 210px;
	visibility:hidden;
}
.folio_block {
	position: absolute;
	left: 50%; top: 50%;
	margin: -140px 0 0 -395px;
}
/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height: 453px;
	width: 680px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}

.main_view603 {
	float: left;
	position: relative;
	padding-left:77px;
}
.window603 {
	height: 453px;
	width: 603px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	border: 1px solid #E1E1E1;
}/*--Window/Masking Styles--*/

.window545 {
	height: 453px;
	width: 545px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}

.main_view545 {
	float: left;
	position: relative;
	padding-left:135px;
}

.window453 {
	height: 453px;
	width: 453px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	border: 1px solid #E1E1E1;
}

.main_view453 {
	float: left;
	position: relative;
	padding-left:227px;
}

.window623 {
	height: 453px;
	width: 623px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}

.main_view623 {
	float: left;
	position: relative;
	padding-left:57px;
}

.main_view337 {
	float: left;
	position: relative;
	padding-left:341px;
}
.window337 {
	height: 453px;
	width: 337px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	border: 1px solid #E1E1E1;
}/*--Window/Masking Styles--*/

/*--Window/Masking Styles--*/

.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {
	float: left;
	}
/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: -13px;
	/*right: -10px;*/
	/*width: 92px;*/
	height:0px;
	z-index: 100;
	display: none;
	background-color: #333;
}

.paging a {
	text-decoration: none;
	color: #fff;
	background: url(images/dot_white.jpg) no-repeat;
	padding-left: 23px;
}
.paging a.active {
	font-weight: bold;
	background: url(images/dot_grey.jpg) no-repeat;
}
.paging a:hover {
background: url(images/dot_blue.jpg) no-repeat;
}
.bodybold {
	font-weight: bold;
	color: #666;
}



#viewport{
	top:-16px;
	left:0px;
	position:absolute;
	width: 678px; /* Defines the size of the visible part of the carousel
		Attention : if you only want to see plain items in the viewport,
		the width of the viewport should take into account of :
		- the items width
		- the right and left padding of items
		- the number of items you want to see in the viewport
	 */
	overflow:hidden; /* Hides extra elements, those outside the viewport area */
}
#viewport ul{
	position: relative; /* Enables positionning of elements inside viewport */
	padding: 0; /* Resets default - User Agent - style */
}
#viewport li{
	width: 339px; /* Defines the size of inner element */
	height: 226px;
	float: left; /* Places list items side by side*/
	list-style: none; /* Resets default - User Agent - style */
	
	/* Cosmetic */
	margin: 0 1px;
	padding: 0px;
	text-align:center;
}

/* Cosmetic */
#simplePrevious, #simpleNext{
	cursor: pointer;
	font-size: 0.8em;
	text-decoration: underline;	
}

#viewport2{
	width: 678px;
 /* Defines the size of the visible part of the carousel
		Attention : if you only want to see plain items in the viewport,
		the width of the viewport should take into account of :
		- the items width
		- the right and left padding of items
		- the number of items you want to see in the viewport
	 */
	 top:212px;
	 left:0px;
	position:absolute;
	overflow:hidden; /* Hides extra elements, those outside the viewport area */
}
#viewport2 ul{
	position: relative; /* Enables positionning of elements inside viewport */
	padding: 0; /* Resets default - User Agent - style */
	
	
}
#viewport2 li{
	width: 339px; /* Defines the size of inner element */
	height: 226px;
	float: left; /* Places list items side by side*/
	list-style: none; /* Resets default - User Agent - style */
	
	/* Cosmetic */
	margin: 0 1px;
	padding: 0px;
}