/* reset margins */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li,
blockquote, pre, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, section, summary, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* setup body */
body, p{
    text-decoration:none;
	line-height: 1;
    font-family: Tahoma;
    font-size: 11pt;
	color: black;
	/*background-color:BLACK;*/
}

/* reasonable starting margins */
p, h1, h2, h3, h4, h5, h6, ol, ul, li { margin: 9pt; }
li { margin-left: 2em; }

/* setup headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    font-family: Tahoma, Verdana, sans-serif;
    font-weight: bold;
}

h1 { font-size: 24px; }
h2 { font-size: 14px; font-style: italic;}
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 100%; }

/* setup pre */
pre { font-family: consolas, monospace; }
/*/////////////////////////////////////////////////////////////////////*/

/*video background*/
#video_background {
	position: absolute; 
	bottom: 0px;
	right:0px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
}

/*background image*/
#backgroundimage{  
    position: fixed;
    height: 200%;   
    width: 200%;
	/*min-width: 1024px;*/
    top: -50%;   
    left: -50%;
	z-index: -2; 
    }
#backgroundimage img{  
    position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
	min-width: 50%;
	min-height: 50%;
} 
/*/////////////////////////////////////////////////////////////////////*/

/*logo layout*/
#logo_position{
	margin-left:1.5cm; 
}

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

/*bottom button*/
#centring{
	text-align: center;
	position:absolute;
	bottom: 0px;
	width: 100%;
	margin-left: auto;
	margin-top: auto;
	/*margin-left: -480px;
	margin-top: 229px;*/
}

#bottom_menu li {
	display:inline-block;
	list-style:none;
	margin: 0px 0px;
}
#bottom_menu{
	margin: 0 auto;
	text-align: center;
}

.work_b{
	display: block;
	width: 320px;
	height: 80px;
	z-index:5;
	background-image: url(../img/button_work_place.png);
	background-repeat: no-repeat;
}
.work_b:hover{
	width: 320px;
	height: 80px;
	z-index: 6;
	background-image: url(../img/button_work_place2.png);
	background-repeat: no-repeat;
}

.traffic_b{
	display: block;
	width: 320px;
	height: 80px;
	z-index:5;
	background-image: url(../img/button_traffic.png);
	background-repeat: no-repeat;
}
.traffic_b:hover{
	display:bloack;
	width: 320px;
	height: 80px;
	z-index: 6;
	background-image: url(../img/button_traffic2.png);
	background-repeat: no-repeat;
}

.neighbordhood_b{
	display: block;
	width: 320px;
	height: 80px;
	z-index:5;
	background-image: url(../img/button_neighborhood.png);
	background-repeat: no-repeat;
}
.neighbordhood_b:hover{
	width: 320px;
	height: 80px;
	z-index: 6;
	background-image: url(../img/button_neighborhood2.png);
	background-repeat: no-repeat;
}



/*/////////////////////////////////////////////////////////////////////*
/*main page wrapper*/

/*writting centrebox*/
#platform2{
	margin:-130px auto;
	width: 950px;
/*	border-style:solid;
	border-width:1px;
	border-color:white;*/
	z-index: -1;
}

#platform{
	margin:-150px auto;
	width: 990px; /*950*/
	height: 500px;
/*	border-style:solid;
	border-width:1px;
	border-color:white;*/
	z-index: -1;
}

/*button list at top*/
#button_list{
	text-align:right;
	margin-right: 45px;
}

#button_lay{
	text-decoration:none;
	font-family: Tahoma;
	font-weight:900;
	/*font-style: italic;*/
	font-size: 10pt;
	color: #000000;
	background-color:white;
	border-style:solid;
	border-color:#AAAAAA;
	border-width:1px;
	/*border-radius:3px;*/
	padding: 5px 12px;
	margin: 0px;
}

#current{
	text-decoration:none;
	font-family: Tahoma;
	font-weight:900;
	/*font-style: italic;*/
	font-size: 10pt;
	color: #FFFFFF;
	background-color:black;
	border-style:solid;
	border-width:1px; 
	border-color:#AAAAAA;
	padding: 5px 12px;
	margin: 0px;
}

#button_lay:hover{
	color: #FFFFFF;
	background-color:black;
}

#text_content{
	width: 990px;
	height: 480px;
	/*	background-color:white;
	border-style:solid;
	border-width:1px;
	border-color:white;*/
	margin-left: 13px;
}

/*
#text_content_white{
	z-index:9;
	width: 950px;
	height: 480px;
	background-color:white;
	border-style:solid;
	border-width:1px;
	border-color:white;
}
*/

#the_video{
	float: left;
	width: 480px;
	margin-top: 100px;
	margin-left: 35px;
	border-style:solid;
	border-width:1px;
	border-color:grey;
	
	background-color: white;
	padding: 5px;
	opacity:1;
}

#actual_text_content{
	float: right;
	margin-top: 100px;
	margin-right: 40px;
	width: 390px;
	padding: 10px;
	background-color:white;
	border-style:solid;
	border-width:1px;
	border-color:white;
	opacity:1;
}
/*/////////////////////////////////////////////////////////////////////*/

/*Arrow button*/
#arrow_turn_l{ 
	position: fixed;
	top: 50%;
	left: 8%;
	margin-top: -50px;
	margin-right: -20px;
}

#arrow_turn_r{
	position: fixed;
	top: 50%;
	left: 90%;
	margin-top: -50px;
	margin-left: -20px;
}

/*
.arrowl{
	display: block;
	position: fixed;
	z-index: 5;
	width: 62;
	height: 155;
	background-image: url(../img/arrow_left.png);
	background-repeat: no-repeat;
}

.arrowr{
	display: block;
	position: fixed;
	z-index:5;
	width: 62;
	height: 155;
	background-image: url(../img/arrow_right.png);
	background-repeat: no-repeat;
}
*/



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

/*video page*/
#centered {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -280px; /*240*/
	margin-left: -430px;
}
#video_tailer{
	background-color: white;
	padding: 10px;
	border-radius:3px;
}

#video_tailer2{
	background-color: white;
	padding: 10px;
	border-radius:3px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -270px; /*240*/
	margin-left: -430px;
}

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

/* people button objects */
#centre_meanu_people li{
	display:inline-block;
	list-style:none;
	margin: 0px 0px;
	padding: 0px;
}
#wrap_people{
	/*position: fixed;
	margin-top: auto;/*240
	margin-left: auto;*/
	/*
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -280px; /*240
	margin-left: -430px;
	*/
	
	margin:-20% auto;
	text-align: center;
}

/*traffic/////////////////////////////////////////////////////////////////////////////////////*/
.worker{
	display: block;
	position: fixed;
	top: 40%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 297px;
	z-index:5;
	background-image: url(../img/construction_jim1.png);
	background-repeat: no-repeat;
}
.worker:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 297px;
	z-index:6;
	background-image: url(../img/construction_jim2.png);
	background-repeat: no-repeat;
}

.donuts{
	display: block;
	position: fixed;
	top: 37%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 340px;
	z-index:5;
	background-image: url(../img/hardy1.png);
	background-repeat: no-repeat;
}
.donuts:hover{
	display: block;
	position: fixed;
	top: 37%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 340px;
	z-index:6;
	background-image: url(../img/hardy2.png);
	background-repeat: no-repeat;
}

.technician1{
	display: block;
	position: fixed;
	top: 40%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 303px;
	z-index:5;
	background-image: url(../img/skytrain_technician1.png);
	background-repeat: no-repeat;
}
.technician1:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 303px;
	z-index:6;
	background-image: url(../img/skytrain_technician2.png);
	background-repeat: no-repeat;
}
/*end//////////////////////////////////////////////////////////////////////////////////////////*/

/*workplace/////////////////////////////////////////////////////////////////////////////////////*/
.printer1{
	display: block;
	position: fixed;
	top: 35%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 357px;
	z-index:5;
	background-image: url(../img/david_p1.png);
	background-repeat: no-repeat;
}
.printer1:hover{
	display: block;
	position: fixed;
	top: 35%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 357px;
	z-index:6;
	background-image: url(../img/david_p2.png);
	background-repeat: no-repeat;
}

.fire{
	display: block;
	position: fixed;
	top: 40%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 299px;
	z-index:5;
	background-image: url(../img/firefighter1.png);
	background-repeat: no-repeat;
}
.fire:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 299px;
	z-index:6;
	background-image: url(../img/firefighter2.png);
	background-repeat: no-repeat;
}

.air{
	display: block;
	position: fixed;
	top: 42%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 290px;
	z-index:5;
	background-image: url(../img/esther1.png);
	background-repeat: no-repeat;
}
.air:hover{
	display: block;
	position: fixed;
	top: 42%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width:300px;
	height: 290px;
	z-index:6;
	background-image: url(../img/esther2.png);
	background-repeat: no-repeat;
}
/*end/////////////////////////////////////////////////////////////////////////////////////*/

/*neighbrorhood/////////////////////////////////////////////////////////////////////////////////////*/
.girls{
	display: block;
	position: fixed;
	top: 40%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 276px;
	z-index:5;
	background-image: url(../img/girl1.png);
	background-repeat: no-repeat;
}
.girls:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 27%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 276px;
	z-index:6;
	background-image: url(../img/girl2.png);
	background-repeat: no-repeat;
}


.ubc{
	display: block;
	position: fixed;
	top: 40%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 276px;
	z-index:5;
	background-image: url(../img/ubc1.png);
	background-repeat: no-repeat;
}
.ubc:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 47%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 268px;
	z-index:6;
	background-image: url(../img/ubc2.png);
	background-repeat: no-repeat;
}
.downtown{
	display: block;
	position: fixed;
	top: 40%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 271px;
	z-index:5;
	background-image: url(../img/downtown_g1.png);
	background-repeat: no-repeat;
}
.downtown:hover{
	display: block;
	position: fixed;
	top: 40%;
	left: 68%;
	margin-top: -50px;
	margin-left: -100px;
	width: 300px;
	height: 271px;
	z-index:6;
	background-image: url(../img/downtown_g2.png);
	background-repeat: no-repeat;
}