
body { font-family: arial; font-size:16px;  }

@keyframes fadeAn {
    0% { opacity: 1 }
    15% { opacity: 1 }
    25% { opacity: 0 }
    90% { opacity: 0 }
    100% { opacity: 1 }
}
@-webkit-keyframes fadeAn {
    0% { opacity: 1 }
    15% { opacity: 1 }
    25% { opacity: 0 }
    90% { opacity: 0 }
    100% { opacity: 1 }
}
.page {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.background01 {
    background: url('/img/img01blue.jpg') no-repeat center center fixed;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.background02 {
    background: url('/img/img02blue.jpg') no-repeat center center fixed;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation-name: fadeAn;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    -webkit-animation-name: fadeAn;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
}
#options {
    position: absolute;
    width: 80%;
    left: 50%;
    margin-left: -40%;
    text-align: center;
	z-index:10;

}
#options #optionsContent {
    background: #383838;
    opacity: 0.97;
    -moz-border-bottom-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -webkit-box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.75);
    border: thin solid #5d5d5d;
    border-top: none;
    display: none;
	color:#fff;
	padding:30px 50px;
	text-align:left;
}

#options #optionsContent h2 { margin:0; padding:0 0 10px 0 ;  color:#777777;  border-bottom:thin solid #555555;  margin:0 0 20px 0;     overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
#options #optionsContent ul { margin:0; padding:0; }
#options #optionsContent ul li { list-style:none; margin:3px 0;  padding:9px ;   display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
#options #optionsContent ul li span {text-decoration:underline;  	font-size:15px;
}

#options #optionsContent ul li span.selected { color:#fff; background:#e39115;  margin:-9px; padding:9px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
	text-decoration:none;

}
#options #optionsContent ul li span:hover { color:#fff; background:#e39115;  margin:-9px; padding:9px;
	-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
	cursor:pointer;
}


#options #optionsContent #country-list-holder { float:left; width:65%;  }
#options #optionsContent #language-list-holder { float:right; width:30%;}
#options #optionsContent .country-list { float:left; width:30%; }



#options #optionsHandle {
    margin: 0 auto;
    background: url('/img/grad01.png') repeat-x;
    -moz-border-bottom-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -webkit-box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 9px 0px rgba(0, 0,0, 0.75);
    padding: 10px 20px 8px;
    display: inline-block;
    border: thin solid #5d5d5d;
    border-top: none;
}
#options #optionsHandle:hover { cursor: pointer }
#options #optionsHandle #language-switcher-button {
    color: #afafaf;
    font-size: 16px;
    padding: 0;
    margin: 0;
    float: left;
}
#options #optionsHandle:hover #language-switcher-button { color: #fff }
#options #optionsHandle #optionsArrow {
    width: 10px;
    height: 10px;
    float: left;
    margin: 4px 0 0 10px;
}
#options #optionsHandle #optionsArrow.open { background: url('/img/arrows.png') 0px 0px }
#options #optionsHandle #optionsArrow { background: url('/img/arrows.png') 0px -10px }
#options #optionsHandle:hover #optionsArrow.open { background: url('/img/arrows.png') 0px -20px }
#options #optionsHandle:hover #optionsArrow { background: url('/img/arrows.png') 0px -30px }
.loginbox {
    width: 300px;
    margin: 0 auto;
    margin-top: 100px;
}
.loginbox .header { margin: 0  0 25px 0 }
.loginbox .inputarea {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fbfbfb;
    border: 1px solid #ebeae7;
    padding: 0px 13px;
}

.loginbox .inputarea input[type="text"], .loginbox .inputarea input[type="password"]  {
    width: 100%;
    border: none;
    background: none;
    color: #7398be;
    font-size: 16px;
    padding: 14px  0;
}
.loginbox .inputarea input[type="text"]:focus,  .loginbox .inputarea input[type="password"]:focus {
    outline: 0;
    border: 0;
}
.loginbox .btn {
    width: 100%;
    font-weight: bold;
    border: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: url('/img/grad02.png') top left repeat-x;
    padding: 15px  0;
    color: #fff;
    margin: 20px 0 0;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 1px 0px rgba(0, 0,0, 0.35);
    font-size: 16px;
    cursor: pointer;
}
.loginbox hr {
    background: #ebeae7;
    height: 1px;
    border: 0;
    padding: 0;
    margin: 0 -10px 0;
}
.loginbox .rememberMe {
    margin: 10px 0;
    color: #fff;
}
.loginbox .formlabel {
	display:none;
}

.clearfix {
    float: none;
    clear: both;
}
#footer {
    position: static;
    width: 80%;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
	margin-bottom:30px;
	font-size:12px;

}
#footer.sticky {
    position: fixed;
    width: 80%;
    left: 50%;
    margin: 0 auto;
    text-align: center;
    margin-left: -40%;
    bottom: 30px;
}


#footer { color: #fff; }


#authfail {    opacity: 0.80;  border:thin solid RED ; color:#fff; text-align:center;     -webkit-border-radius: 5px;
    border-radius: 5px; background:#ca0000;     -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 1px 0px rgba(0, 0,0, 0.35); padding:20px;
}


/*
::-webkit-input-placeholder {
   color: #333;
}

:-moz-placeholder {
   color: #333;
}

::-moz-placeholder {
   color: #333;
}

:-ms-input-placeholder {
   color: #333;
}
*/



/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px)  and (max-device-width : 568px) {
	.loginbox { 	margin-top: 70px; 	}
	#options {	width: 100%; margin-left: -50%; }
	#options #optionsContent { padding:10px 30px; }
	#options #optionsContent #country-list-holder {  width:100%; padding-bottom:30px; }
	#options #optionsContent #language-list-holder {  width:100%;  padding-bottom:40px;}
	#options #optionsContent .country-list { float:left; width:50%; }
}

/* iPad in portrait & landscape */
@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  {

}

/* IE8 fix */
.ie8 .background01 { background:none; background-color:#5188bc;}
.ie8 .background02 { background:none; display:none;}
.ie8 .loginbox .formlabel { display:block; color:#fff; padding:8px 6px;}
.ie8 .loginbox .inputarea { background:none; border:none; padding:0;}
.ie8 .loginbox hr { height:0;}
.ie8 .loginbox .inputarea input[type="text"], .ie8 .loginbox .inputarea input[type="password"]  {
	width: 94%;
    font-size: 16px;
    padding: 14px  3%;
	margin-bottom:6px;
	background:#fff;
	color:#5188bc;
}


/* IE8 fix */
.ie7 .background01 { background:none; background-color:#5188bc;}
.ie7 .background02 { background:none; display:none;}
.ie7 .loginbox .formlabel { display:block; color:#fff; padding:8px 6px;}
.ie7 .loginbox .inputarea { background:none; border:none; padding:0;}
.ie7 .loginbox hr { height:0; display:none;}
.ie7 .loginbox .inputarea input[type="text"], .ie7 .loginbox .inputarea input[type="password"]  {
	width: 94%;
    font-size: 16px;
    padding: 14px  3%;
	margin-bottom:6px;
	background:#fff;
	color:#5188bc;
}
