@media only screen and (min-width: 0px) {


	/* Login Picture: Use Login Picture instead of Login/Sign Up Picture */
	
	.indexLoginImage{
	    display:none;
	}
	
	.indexLoginSmallImage{
	    display:block;
	}	
	
			
	/* Two Dialog: Width:100%; with left:15px; right:15px; Remain for middle. */
	
	
	
	/* Logo: Width:100%; Left 15px, Right 15px; Remain for the middle. Picture Ratio changes automatically */
	
	.indexLogoWrapper {
		position: relative;
		margin-left: 15px;
		width: calc(100% - 30px);
		display: block;			
	}
	
	.indexLogo {
		position: relative;
		width: 100%;
		display: block;
	}
	
	

	/* Search Bars: show in Three lines. Width:100%; with left:15px; right:15px; Remain for middle. */
	
	.indexSearchContainer {
	position: relative;
	margin-top: 0px;
    margin-left: 15px;
	height: 180px;
	width:calc(100% - 30px);
	display: block;
	background-color:#cdcdcd;
	
	border-radius: 6px 6px 6px 6px;
	}
	
 
	
.indexSearchContentWrapper {
	position:relative;
    height: 60px;
    margin-left: 0px;
	width:100%;
	background-color:white;
	
	border-radius: 6px 6px 0px 0px;
	
   border-width: 1px;
   border-bottom-width:1px;
   border-bottom-color:#D1D3D4;
   border-bottom-style: solid;

	}
	
.indexSearchLocationWrapper {
	position:relative;
    margin-left: 0px;
	height: 60px;
	width:100%;
	background-color:white;
	
   border-width: 1px;
   border-bottom-width:1px;
   border-bottom-color:#D1D3D4;
   border-bottom-style: solid;	
	}	
	
.indexSearchSubmitWrapper {
	position: relative;
    margin-left: 0px;
	height: 60px;
	width:100%;
	background-color:#2f9998;
	
	border-radius: 0px 0px 6px 6px;
	}
	
.indexSearchButton {
	height: 100%;
	width: 100%;
	border: 0;
	line-height: 38px;
	background-color: #2f9998;
	cursor:pointer;
	color:white;
	
	border-radius: 0px 0px 6px 6px;
	}
	
.indexSecondSeparator {
		position: relative;
		display: block;
		height: 80px;
        width:100%;	
	}			

}

@media only screen and (min-width: 414px) {

	/* Logo: Keep the original*/
	
	.indexLogoWrapper {
		position: relative;
		width: 384px;
		height: 135px;
		left: 50%;
		margin-left: -192px;
		display: block;				
	}
	
	.indexLogo {
		position: absolute;
		width: 384px;
		height:135px;
		display: block;	
	}

}

	
@media only screen and (min-width: 760px) {
	
	/* Login/Sign Up Picture : Keep the original */	
	
	.indexLoginImage{
	    display:block;
	}
	
	.indexLoginSmallImage{
	    display:none;
	}	


    /* Two Dialogs : Keep the original */
	

	/* Search Bar  : Keep the original */
	
.indexSearchContainer {
	position: relative;
	margin-top: 0px;
	left: 50%;
	margin-left: -365px;
	height: 38px;
	width:730px;
	display: block;
	background-color:#cdcdcd;
	
	border-radius: 6px 6px 6px 6px;
	

	}
	
	

	
.indexSearchContentWrapper {
	position:absolute;
	left:0px;
	top:0px;
    height: 38px;
	width:325px;
	background-color:white;
	
	border-radius: 6px 0px 0px 6px;
	}
	
.indexSearchLocationWrapper {
	position:absolute;
	left:326px;
	top:0px;
    height: 38px;
	width:324px;
	background-color:white;
	}	
	
.indexSearchSubmitWrapper {
	position: absolute;
	left:650px;
	width: 80px;
	height: 38px;
	background-color:#2f9998;
	
	border-radius: 0px 6px 6px 0px;
	}
	
.indexSearchButton {
	height: 100%;
	width: 100%;
	border: 0;
	line-height: 38px;
	background-color: #2f9998;
	cursor:pointer;
	color:white;
	
	border-radius: 0px 6px 6px 0px;
	}	
	
.indexSecondSeparator {
		position: relative;
		display: block;
		height: 204px;
        width:100%;	
	}	
	
}


/* index.jsp */

.indexBackgroundContainer {
	position: relative; 
	top: 0;  
	left: 0; 
	right: 0; 
	width:100% ;
	height: 913px;
/* 	background: url(../images/webapps/background1.jpg); */
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	CELLPADDING:0; 
	CELLSPACING:0; 
	BORDER:0; 
}

.indexNavigationBarItemLogin {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 89;	
	cursor: pointer;
}

.indexLoginUserNameFont{
   position: absolute;
   top:18px;
   right:18px;
   z-index: 89;
   color:#2f9998; 
   font-weight:bold; 
   font-size: 24px;
}

.indexTopSeparator {
		position: relative;
		display: block;
		height: 100px;
        width:100%;	
	}
	


		

.indexSearchIcon {
    position: absolute; padding-left: 2px; top: 50%;  margin-top: -19px;
}

.indexSearchInputContentClass{
	 width:70%;color: #7E7EAB; background-color: #FFFFFF; font-family: Arial; font-size: 14px;border:0;position: absolute;left:48px;  top: 50%;  margin-top: -8px;
}	



/*
Dark background when popup dialogue appears
*/
#popUp_Background {
	width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
	background: rgba(0,0,0,0.75);
	z-index: 87;
	
	display:none;
	}

/*
Index Login Dialog
*/

.loginDialog {
  position: absolute;
  top:65px;
  right:18px;
  text-align: center;
  background: #FFFFFF;
  margin: 0px 0px 0px 0px;
  display: inline-block;
  width: 257px;
  height:390px;
  box-shadow: 0px 0px 8px rgba(68, 140, 160, 0.5);
  border-radius: 6px 6px 6px 6px;
  z-index: 90;
  
  display:none;
}
.loginDialog:after,
.loginDialog:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.loginDialog:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 15px;
  top: -29px;
  left: 210px;
  margin-left: -15px;
}
.loginDialog:before {
  border-color: rgba(170, 170, 170, 0);
  border-width: 16px;
  top: -29px;
  left: 210px;
  margin-left: -16px;
}

#loginDialog_CloseButtonImage{
	position: absolute;top:12px;right:12px;z-index:1;cursor:pointer;
}

.loginDialog_Table{
	border:0px ; height:344px ; width:227px ;position: relative; top: 15px; bottom: 15px; left:15px; right: 15px; background-color:#ffffff;border-collapse: collapse;
}

 
.loginDialog_LoginTitle_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dialogue_login_title_enter_your_detail.png');
}

.loginDialog_LoginEmail_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dialogue_login_background_1.png');
}

.loginDialog_LoginPassword_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dialogue_login_background_2.png');	
}

#loginDialog_LoginButton_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dialogue_login_button.png');	
	cursor:pointer;
}

#loginDialog_ForgotYourPasswordText_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/forgot_your_password.png');
	cursor:pointer;
}

.loginDialog_DoNotHaveAnAccountText_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dont_have_an_account.png');	
}

#loginDialog_SignUpButton_Background{ 
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/logindialog/dialogue_singup_button.png');	
	cursor:pointer;
}

.loginDialog_Input{
	 position: relative;left:0px;width:90%;color: #000000; background-color: transparent; font-family: Arial; font-size: 14px;border:0;
}

/*
Index Forget Password Dialog
*/

.forgotPasswordDialog {
  position: absolute;
  top:65px;
  right:18px;
  text-align: center;
  background: #FFFFFF;
  margin: 0px 0px 0px 0px;
  display: inline-block;
  width: 250px;
  height:230px;
  box-shadow: 0px 0px 8px rgba(68, 140, 160, 0.5);
  border-radius: 6px 6px 6px 6px;
  z-index: 90;
  
  display:none;
}

.forgotPasswordDialog:after,
.forgotPasswordDialog:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.forgotPasswordDialog:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 15px;
    top: -29px;
	left: 210px;
  margin-left: -15px;
}
.forgotPasswordDialog:before {
  border-color: rgba(170, 170, 170, 0);
  border-width: 16px;
    top: -29px;
	left: 210px;
  margin-left: -16px;
}

#forgotPasswordDialog_CloseButtonImage{
	position: absolute;top:12px;right:12px;z-index:1; 
	cursor:pointer;
}

.forgotPasswordDialog_Table{
	border:0px ; height:166px ; width:220px ; position: relative; top: 15px; bottom: 15px; left:15px; right: 15px; 
	background-color:#ffffff;border-collapse: collapse;
}


.forgotPasswordDialog_Title_Background{
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/forgetpassword/text_forget_password.png');
}

.forgotPasswordDialog_Email_Background{
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/forgetpassword/half_rectange_bg.png');
}

#forgotPasswordDialog_Submit_Background{
	background-repeat: no-repeat;background-size: 100% 100%; 
	background-image: url('../images/webapps/forgetpassword/submit.png');	
	cursor:pointer;
}

#forgotPasswordDialog_Input{
	 position: relative;left:8px;width:90%;color: #000000; background-color: transparent; font-family: Arial; font-size: 14px;border:0;
}