/*CSS*/

/*==================================== HTML ELEMENTS ====================================*/

body{
	background-color: #005a7c;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 18px;
	overflow-x:hidden;
	overflow-y:auto;
	color: #4a4a4a;
}

h2{
	font-size: 22px;
	line-height: 24px;
	margin-bottom: 20px;
}

/*==================================== NEW  FONTS ====================================*/

@font-face {
    font-family: digital;
    src: url(ds_digi.ttf);
}

/*==================================== SHARED STRUCTURE & STYLES ====================================*/

.group:after {
  content: "";
  display: table;
  clear: both;
}

#page-header{
	width: 100%;
	height: 100px;
	background-color: #FFF;
	position: absolute;
	z-index: 25;
	top:0px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
	background-image: url('../img/logo.png');
	background-repeat: no-repeat;
	background-position: center center;
}

.fullpage{
	width: 100%;
	height: 100vh;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
}

#member-toplinks-right{
	position: absolute;
	right: 0px;
	top: 40px;
	z-index: 20;
	margin-right: 10px;
}

#member-toplinks-right a{
	color: #4a4a4a;
	text-decoration: none;
	font-size: 18px;
	margin-right: 10px;
	padding: 5px 7px;
	border:2px solid #FFF;
}

#member-toplinks-right a:hover,#member-toplinks-right a:focus{
	background-color: #DDD;
}

#member-toplinks-left{
	position: absolute;
	left: 0px;
	top: 40px;
	z-index: 20;
	margin-left: 10px;
}

#member-toplinks-left a{
	color: #4a4a4a;
	text-decoration: none;
	font-size: 18px;
	margin-left: 10px;
	padding: 5px 7px;
	border:2px solid #FFF;
}

#member-toplinks-left a:hover,#member-toplinks-left a:focus{
	background-color: #DDD;
}

#hints-overlay{
	width:100%;
	height:calc(100vh - 72px);
	top: 72px;
	position:absolute; 
	z-index:11;
}

#hints-overlay-inner{
	width: 1400px;
	height:calc(100vh - 72px);
	margin: 0px auto;
}

#footer{
	width: 100%;
	background-color: #005a7c;
	position: absolute;
	z-index: 20;
	bottom:0px;
	color: #FFF;
}

#footer-inside{
	max-width:1391px;
	/*width:1391px; */
	background-color:#F00; 
	margin:0px auto;
}

#footer-section-1{
	width: 370px;
	float: left;
	margin-right: 36px;
	background-image: url('../img/uottawa_footer.png');
	background-repeat: no-repeat;
	background-position: 10px 10px;
	padding: 10px 10px 0px 70px;
}

#footer-section-2{
	width: 410px;
	float: left;
	margin-right: 35px;
	padding: 10px 10px 0px 10px;
}

#footer-section-3{
	width: 410px;
	float: left;
	padding: 10px 10px 0px 10px;
}

.dropdown_div{
	width:850px; 
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	padding: 15px 15px 0px 15px;
	position:absolute; 
	background-color:rgba(0,0,0,0.9); 
	color: #FFF;
	left:50%; 
	margin-left:-440px; 
	z-index: 250;
}

.dropdown_div2{
	width:950px; 
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	padding: 15px 15px 0px 15px;
	position:absolute; 
	background-color:rgba(0,0,0,0.9); 
	color: #FFF;
	left:50%; 
	margin-left:-490px; 
	z-index: 250;
}

.dropdown_hints_div{
	width:750px; 
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	padding: 15px 15px 0px 15px;
	position:absolute; 
	background-color:rgba(0,90,124,0.95); 
	color: #FFF;
	left:50%; 
	margin-left:-390px; 
	z-index: 250;
}

.hidden_acc{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.par{
	margin-bottom: 15px;
}

.lst{
	margin-bottom: 15px;
	margin-left: 20px;
}

.deci{
	list-style: decimal;
}

.disc{
	list-style: disc;
}

.lst li{
	padding: 3px 0px 3px 3px;
}

.small-par{
	font-size: 11px;
	line-height: 13px;
	margin-bottom: 10px;
}

.par-btns{
	margin-top: 10px;
	margin-bottom: 20px;
	clear: both;
}

.strong{
	font-weight: bold;
}

.orange{
	color: #ed5d2c;
}

.blue{
	color: #005a7c;
}

/*==================================== HOME PAGE ====================================*/


#fullpage_home1{
	background-image: url('../img/bg_home_layer1.png');
	z-index: 5;
}

#fullpage_home2{
	background-image: url('../img/bg_home_layer2.png');
	z-index: 8;
}

#home_clouds1{
	width: 1300px;
	height: 130px;
	background-image: url('../img/bg_home_clouds.png');
	z-index: 6;
	position: absolute;
	top: 175px;
	left: -300px;
}

#home_clouds2{
	width: 1300px;
	height: 130px;
	background-image: url('../img/bg_home_clouds.png');
	z-index: 7;
	position: absolute;
	top: 175px;
	left: -1600px;
}

#dropdown_div_home{
	top:-800px;
}

.close-dropdown{
	float: right;
	font-size: 21px;
	line-height: 24px;
	padding: 3px 5px;
	color: #FFF;
	text-decoration: none;
	border: 1px solid #FFF;
}

.close-dropdown:hover,.close-dropdown:focus{
	color: #ed5d2c;
	border-color: #ed5d2c;
}

.home_btns{
	border: 2px solid #FFF;
	background-color: transparent;
	text-decoration: none;
	color: #FFF;
	padding: 10px;
	display: inline-block;
	margin-right: 10px;
	font-size: 16px;
	line-height: 18px;
}

.home_btns:hover,.home_btns:focus{
	background-color: #FFF;
	color: #4a4a4a;
}

.formblock{
	padding-bottom: 15px;
	width: 48%;
	float: left;
}

.formblock2{
	padding-bottom: 15px;
	width: 48%;
}

.home_labels{
	display: block;
	margin-bottom: 3px;
}

.home_inputs{
	padding: 3px;
	border: 2px solid #DDD;
	width: 350px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 21px;
}
.home_textareas{
	padding: 3px;
	border: 2px solid #DDD;
	width: 450px;
	height: 50px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 21px;
}

.home_selects{
	padding: 3px;
	border: 2px solid #DDD;
	width: 300px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 21px;
}

#room2passcode_section{
	display: none;
	clear: both;
	margin-bottom: 10px;
}

#room2passcode_section2{
	display: none;
	clear: both;
	margin-bottom: 20px;
}

.home-link{
	color: #FFF;
}

.home-link:hover,.home-link:focus{
	color: #ed5d2c;
}

#homeform_valmsge1,#homeform_valmsge2,#homeform_valmsge3,#homeform_valmsge4{
	display: none;
}

/*==================================== ROOM 1 ====================================*/

#fullpage_room1{
	background-image: url('../img/bg_room1.png');
	z-index: 5;
}

body#room1_member .room1_member{
	background-color: #DDD;
}

#dropdown_div_room1{
	top:-800px;
}

#dropdown_div_hints1{
	top:-800px;
}

#dropdown_div_close1{
	top:-800px;
}

#dropdown_div_submit1{
	top:-800px;
}

#dropdown_div_timesup1{
	top: -800px;
}

#room1-hint1{
	width: 200px;
	height: 163px;
	background-image: url('../img/room1_hint1.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top:170px;
	margin-left: 705px;
	cursor: pointer;
}

#room1-hint2{
	width: 110px;
	height: 160px;
	background-image: url('../img/room1_hint2.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top:540px;
	margin-left: 285px;
	cursor: pointer;
}

#room1-hint3{
	width: 230px;
	height: 330px;
	background-image: url('../img/room1_hint3.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top:375px;
	margin-left:1200px;
	cursor: pointer;
}

#wall-timer{
	width: 140px;
	padding: 15px;
	background-color: #4a4a4a;
	position: absolute;
	top: 110px;
	left: 50%;
	font-size: 32px;
	font-family: digital;
	margin-left: -85px;
	text-align: center;
	color: #FFF;
}

#hint-nav{
	margin-bottom:20px; 
	border-bottom:2px solid #FFF;
}

.hint-nav-opt{
	color: #FFF;
	padding: 10px;
	display: inline-block;
	text-decoration: none;
}

.hint-nav-sel{
	background-color: #FFF;
	color: rgb(0,90,124)
}

#hint-div-static, #hint-div-temporal{
	display: none;
}

.hint-div-selected{
	display: block !important;
}

#bot-right-mesge{
	width:300px;
	box-shadow: 0px 2px 8px rgba(0,0,0,0.7);
	background-color: #ed5d2c;
	color: #FFF;
	position: fixed;
	z-index: 200;
	bottom:-200px;
	right: 15px;
	padding: 10px;
	opacity: 0;
}

#bot-right-mesge h3{
	font-size: 21px;
	margin-bottom: 10px;
}

#bot-left-mesge{
	width:300px;
	box-shadow: 0px 2px 8px rgba(0,0,0,0.7);
	background-color: #ed5d2c;
	color: #FFF;
	position: fixed;
	z-index: 200;
	bottom:-200px;
	left:15px;
	padding: 10px;
	opacity: 0;
}

#bot-left-mesge h3{
	font-size: 21px;
	margin-bottom: 10px;
}

.close-smlmesge{
	float: right;
	font-size: 18px;
	line-height: 21px;
	padding: 3px 5px;
	color: #FFF;
	text-decoration: none;
	border: 1px solid #FFF;
}

.close-smlmesge:hover,.close-smlmesge:focus{
	color: #005a7c;
	border-color: #005a7c;
}

#file_to_upload{
	margin-right: 10px;
}

#submit-error-msge{
	color: #ed5d2c;
}

#finish_div1{
	width:750px; 
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	padding: 15px 15px 0px 15px;
	position:absolute; 
	background-color:rgba(0,0,0,0.9);
	background-image: url('../img/finish_pic1.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	color: #FFF;
	top: 130px;
	left:50%; 
	margin-left:-390px; 
	z-index: 250;
}

#finish_div2{
	width:750px; 
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	padding: 15px 15px 0px 15px;
	position:absolute; 
	background-color:rgba(0,0,0,0.9);
	background-image: url('../img/finish_pic2.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	color: #FFF;
	top: 130px;
	left:50%; 
	margin-left:-390px; 
	z-index: 250;
}

#index-form-scroll{
	height: 150px;
	overflow-y:scroll;
	margin-bottom: 20px;
	border:2px dashed #F1F1F1;
	padding: 10px;
}

.accordion{
	background-color: #FFF;
	color: #4a4a4a;
	padding: 10px 10px 1px 10px;
	margin-bottom: 10px;
}

.accordion-show{
	margin-bottom: 10px;
	display: block;
	color: #4a4a4a;
	text-decoration: none;
	background-repeat: no-repeat;
	padding-left: 25px;
}

#acc1-click, #acc2-click{
	background-image: url('../img/icon_acc1.png');
}

.accordion-hide{
	display: none;
}

/*==================================== ROOM 2 ====================================*/

#fullpage_room2{
	background-image: url('../img/bg_room2.png');
	z-index: 5;
}

body#room2_member .room2_member{
	background-color: #DDD;
}

#dropdown_div_room2{
	top:-800px;
}

#dropdown_div_hints2{
	top:-800px;
}

#dropdown_div_close2{
	top:-800px;
}

#dropdown_div_submit2{
	top:-800px;
}

#dropdown_div_timesup2{
	top: -800px;
}

#room2-hint1{
	width: 255px;
	height: 240px;
	background-image: url('../img/room2_hint1.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top:-15px;
	margin-left:-70px;
	cursor: pointer;
}

#room2-hint2{
	width: 160px;
	height: 370px;
	background-image: url('../img/room2_hint2.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top:330px;
	margin-left:-90px;
	cursor: pointer;
}

#room2-hint3{
	width: 110px;
	height: 140px;
	background-image: url('../img/room2_hint3.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 195px;
	margin-left: 275px;
	cursor: pointer;
}

#room2-hint4{
	width: 75px;
	height: 80px;
	background-image: url('../img/room2_hint4.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 420px;
	margin-left: 410px;
	cursor: pointer;
}

#room2-hint5{
	width: 120px;
	height: 110px;
	background-image: url('../img/room2_hint5.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 588px;
	margin-left: 220px;
	cursor: pointer;
}

#room2-hint6{
	width: 120px;
	height: 110px;
	background-image: url('../img/room2_hint6.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 405px;
	margin-left: 810px;
	cursor: pointer;
}

#room2-hint7{
	width: 130px;
	height: 130px;
	background-image: url('../img/room2_hint7.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 95px;
	margin-left: 1180px;
	cursor: pointer;
}

#room2-hint8{
	width: 130px;
	height: 130px;
	background-image: url('../img/room2_hint8.png');
	cursor: default;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 15;
	margin-top: 251px;
	margin-left: 1310px;
	cursor: pointer;
}

/*==================================== Less than 1390px width ====================================*/

@media only screen and (max-width: 1390px) {
	#fullpage_home1{
		background-image: url('../img/bg_home_layer1_smll.png');
	}

	#fullpage_home2{
		background-image: url('../img/bg_home_layer2_smll.png');
	}

	#home_clouds1{
		width: 950px;
		height: 95px;
		background-image: url('../img/bg_home_clouds_smll.png');
	}

	#home_clouds2{
		width: 950px;
		height: 95px;
		background-image: url('../img/bg_home_clouds_smll.png');
	}

	#fullpage_room1{
		background-image: url('../img/bg_room1_smll.png');
		z-index: 5;
	}

	#fullpage_room2{
		background-image: url('../img/bg_room2_smll.png');
		z-index: 5;
	}

	#footer-section-1{
		width: calc(30% - 80px);
	}

	#footer-section-2{
		width: calc(30% - 20px);
	}

	#footer-section-3{
		width: calc(30% - 20px);
	}

	#hints-overlay-inner{
		width: 980px;
	}

	#room1-hint1{
		width: 120px;
		height: 100px;
		background-size: 120px;
		margin-top:100px;
		margin-left: 505px;
	}

	#room1-hint2{
		width: 75px;
		height: 110px;
		background-size: 75px;
		margin-top:365px;
		margin-left: 185px;
	}

	#room1-hint3{
		width: 150px;
		height: 330px;
		background-size: 150px;
		margin-top: 260px;
		margin-left: 835px;
	}

	#room2-hint1{
		width: 165px;
		height: 155px;
		background-size: 165px;
		margin-top:10px;
		margin-left:-45px;
	}

	#room2-hint2{
		width: 95px;
		height: 225px;
		background-size: 95px;
		margin-top:258px;
		margin-left:-50px;
	}

	#room2-hint3{
		width: 75px;
		height: 100px;
		background-size: 75px;
		margin-top: 125px;
		margin-left: 190px;
	}

	#room2-hint4{
		width: 50px;
		height: 60px;
		background-size: 50px;
		margin-top: 284px;
		margin-left: 290px;
	}

	#room2-hint5{
		width: 85px;
		height: 75px;
		background-size: 85px;
		margin-top: 402px;
		margin-left: 155px;
	}

	#room2-hint6{
		width: 80px;
		height: 100px;
		background-size: 80px;
		margin-top: 273px;
		margin-left: 570px;
	}

	#room2-hint7{
		width: 75px;
		height: 110px;
		background-size: 75px;
		margin-top: 70px;
		margin-left: 830px;
	}

	#room2-hint8{
		width: 75px;
		height: 110px;
		background-size: 75px;
		margin-top: 180px;
		margin-left: 920px;
	}
}