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

body {
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;	
	font-size:17px;
}

#wrapper {
	display:block;
	width:960px;
	margin-top:100px;
	position:relative;	
}

#wrapper .tagline {
	display:block;
	width:960px;
	height:261px;
}

#wrapper .city_buttons {
	display:block;
	width:960px;
	height:392px;
	background:url(images/city.jpg) no-repeat;
	text-align:center;
}

.buttons {
	width:960px;
	height:202px;
	padding:17px 0px 50px 0px;
}

.button_left {
	float:left;
	width:201px;
	height:203px;
	margin-left:84px;	
}

.button_middle {
	float:left;
	width:201px;
	height:203px;
	margin-left:99px;	
}

.button_right {
	float:left;
	width:201px;
	height:203px;	
	margin-left:96px;
}

.ourstory {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 201px;
	height: 203px;
	background: url(images/btn_ourstory.png) no-repeat;
	background-position: 0 -203px;
}

.ourstory span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_ourstory.png) no-repeat;
	background-position: 0 0px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.ourstory:hover span {
	opacity: 1;
}


.knowledge {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 201px;
	height: 203px;
	background: url(images/btn_knowledge.png) no-repeat;
	background-position: 0 -203px;
}

.knowledge span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_knowledge.png) no-repeat;
	background-position: 0 0px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.knowledge:hover span {
	opacity: 1;
}

.events {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 201px;
	height: 203px;
	background: url(images/btn_events.png) no-repeat;
	background-position: 0 -203px;
}

.events span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_events.png) no-repeat;
	background-position: 0 0px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.events:hover span {
	opacity: 1;
}

#eco_system {
	position:absolute;
	width:960px;
	height:390px;	
	z-index:100;
	top:0px;
}


/*partners
===================================*/

.partners_container {
	width: 105px;
	height: 159px;
	position:absolute;
	top:0px;
	left:560px;
}

.partners {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 105px;
	height: 159px;
	background: url(images/btn_partners.png) no-repeat;
}

.partners span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_partners.png) no-repeat;
	background-position: 0 -159px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.partners:hover span {
	opacity: 1;
}

.partners_text {
	display:none;
	font-size:20px;
	font-weight:bold;
	background:url(images/right_arrow.png) right no-repeat;	
	width:250px;
	z-index:300;
	position:absolute;
	top:45px;
	left:275px;
	padding-right:24px;
	text-align:right;
}

/*member/delegates
===================================*/

.members_container {
	width: 130px;
	height: 122px;
	position:absolute;
	top:190px;
	left:0px;
	z-index:930;
}

.members {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 130px;
	height: 122px;
	background: url(images/btn_member.png) no-repeat; 
}

.members span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_member.png) no-repeat;
	background-position: 0 -122px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.members:hover span {
	opacity: 1;
}

.members_text {
	display:none;	
	font-size:20px;
	font-weight:bold;
	background:url(images/left_arrow.png) no-repeat 0px 40px;	
	width:100px;
	padding-left:20px;
	z-index:300;
	position:absolute;
	top:160px;
	left:135px;
}

/*usergroups
===================================*/

.usergroups_container {
	width: 132px;
	height: 120px; 
	position:absolute;
	top:190px;
	left:800px;
	z-index:930;
}

.usergroups {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 132px;
	height: 120px; 
	background: url(images/btn_usergroups.png) no-repeat;
}

.usergroups span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_usergroups.png) no-repeat;
	background-position: 0 -120px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.usergroups:hover span {
	opacity: 1;
}

.usergroups_text {
	display:none;	
	font-size:20px;
	font-weight:bold;
	background:url(images/right_arrow.png) right no-repeat;	
	width:140px;
	z-index:300;
	position:absolute;
	top:220px;
	left:655px;
}

/*independent
===================================*/

.independent_container {
	width: 130px;
	height: 179px;  
	position:absolute;
	top:35px;
	left:100px;
}

.independent {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 130px;
	height: 179px; 
	background: url(images/btn_independent.png) no-repeat;
}

.independent span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_independent.png) no-repeat;
	background-position: 0 -179px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.independent:hover span {
	opacity: 1;
}

.independent_text {
	display:none;	
	font-size:20px;
	font-weight:bold;
	background:url(images/right_arrow.png) right no-repeat;	
	width:100px;
	z-index:300;
	position:absolute;
	top:100px;
	left:10px;
}

/*press
===================================*/

.press_container {
	width: 122px;
	height: 165px;  
	position:absolute;
	top:0px;
	left:280px;
}

.press {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 122px;
	height: 165px; 
	background: url(images/btn_press.png) no-repeat;
}

.press span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_press.png) no-repeat;
	background-position: 0 -165px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.press:hover span {
	opacity: 1;
}

.press_text {
	display:none;	
	font-size:20px;
	font-weight:bold;
	background:url(images/left_arrow.png) no-repeat 0px 15px;	
	width:150px;
	padding-left:20px;
	z-index:300;
	position:absolute;
	top:50px;
	left:420px;
}

/*education
===================================*/

.education_container {
	width: 150px;
	height: 197px;
	position:absolute;
	top:35px;
	left:730px;  
}

.education {	
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 150px;
	height: 197px; 
	background: url(images/btn_education.png) no-repeat;
}

.education span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(images/btn_education.png) no-repeat;
	background-position: 0 -197px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.education:hover span {
	opacity: 1;
}

.education_text {
	display:none;	
	font-size:20px;
	font-weight:bold;
	background:url(images/right_arrow.png) right no-repeat;	
	width:210px;
	z-index:300;
	position:absolute;
	top:84px;
	left:520px;
}


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }