.outer_face {
    position: relative;
    width: 400px; /* width of clock */
    height: 400px; /* height of clock */
    border-radius: 200px; /* clock round corner radius */
    background: white;
    box-shadow: inset 0 0 10px gray;
    border: 0 solid gray; /* thickness of outer border */
	/* margin:0px auto; */
	border:6px solid rgba(0,0,0,0.2);
}

.outer_face::before, .outer_face::after, .outer_face .marker { /* time markers syle */
    content: "";
    position: absolute;
    width: 8px; /* width of 12-6 and 3-9 markers */
    height: 100%;
    background: black;
    z-index: 0;
    left: 50%;
    margin-left: -4px; /* set this value of 1/2 marker width */
    top: 0
}

.outer_face::after {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
    }

.outer_face .marker {
    background: gray;
    width: 6px; /* width of all other markers */
    margin-left: -3px /* set this value of 1/2 marker width */
    }

.outer_face .marker.oneseven {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
    }

.outer_face .marker.twoeight {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
    }

.outer_face .marker.fourten {
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
    }

.outer_face .marker.fiveeleven {
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
    }

.inner_face {
    position: relative;
    width: 88%;
    height: 88%;
    background: white;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    z-index: 1000;
    left: 6%; /* set this value of 1/2 width value*/
    top: 6%; /* set this value of 1/2 height value*/
	
    }

.inner_face::before {
    /* clock center circle small */
    content: "";
    width: 18px; /* width of inner circle */
    height: 18px; /* height of inner circle */
    border-radius: 18px;
    margin-left: -9px; /* set this value of 1/2 width value*/
    margin-top: -9px; /* set this value of 1/2 height value*/
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 30px blue;
    }



.hand, .hand.hour {
    position: absolute;
    width: 4px; /* width of hour hand */
    height: 30%; /* height of hour hand */
    top: 20%; /* set top to 50% - height */
    left: 50%;
    margin-left: -2px; /* set this value to 1/2 width */
    background: black;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
	border-radius:4px;
    -moz-box-shadow: 0 0 3px gray;
    -webkit-box-shadow: 0 0 3px gray;
    box-shadow: 0 0 3px gray
    }

.hand.minute {
    height: 45%; /* height of min hand */
    top: 5%; /* set top to 50% - height */
    width: 5px; /* width of min hand */
    margin-left: -2.5px; /* set this value to 1/2 width */
	border-radius:6px;
    }

.hand.second {
    height: 50%; /* height of sec hand */
    width: 2px; /* width of sec hand */
    margin-left: -1px; /* set this value to 1/2 width */
    top: 0;
    background: red
    }
	
	
/* more */	
body
{
	
border:0px;
padding:0px;
background:#000000;
color:#ffffff;
    font-family: "QuikanouSan";
}


@font-face {
    font-family: "QuikanouSan";
    src: url('QuikanouSan.ttf');
}
.clr{
clear:both	
}
.coundownWatchDiv2{
text-align:center;
/*font-size:50px;	
padding-top:50px;*/
    text-align: center;
    /* font-size: 24px; */
    bottom: 10px;
    font-size:25px;
    /* bottom: 0px; */
    position: absolute;
    /* left: 39%; */
    width: 99%;
}
.coundownLogoDiv{
text-align:center;
}
.logo{
    width: 100%;
  margin: 100px auto;
    max-width: 300px;
}

@media (max-width:700px){
.coundownWatchDiv2{
 font-size:30px;	
}	
}
@media (max-width:500px){
.coundownWatchDiv2{
	font-size:20px;	
	padding-top:40px;
}	
}


/*login area adjustment*/


input.login{
	padding:4px 12px;
	font-size:14px;
	color:#ffffff;
	cursor:pointer;
	border:none;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7728+0,c93d0a+100 */
background: #ff7728; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNzcyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOTNkMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff7728 0%, #c93d0a 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7728), color-stop(100%,#c93d0a)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #ff7728 0%,#c93d0a 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #ff7728 0%,#c93d0a 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #ff7728 0%,#c93d0a 100%); /* IE10 preview */
background: linear-gradient(to bottom, #ff7728 0%,#c93d0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7728', endColorstr='#c93d0a',GradientType=0 ); /* IE6-8 */
margin-right:6px;
}

input.cancel{
	padding:4px 12px;
	font-size:14px;
	color:#ffffff;
	cursor:pointer;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e83c3f+0,b20808+100 */
	background: #e83c3f; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4M2MzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMjA4MDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #e83c3f 0%, #b20808 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e83c3f), color-stop(100%,#b20808)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, #e83c3f 0%,#b20808 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, #e83c3f 0%,#b20808 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, #e83c3f 0%,#b20808 100%); /* IE10 preview */
	background: linear-gradient(to bottom, #e83c3f 0%,#b20808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e83c3f', endColorstr='#b20808',GradientType=0 ); /* IE6-8 */
	border:none;
	magin-left:5px;
}

/*2nd login power*/

/*login area adjustment*/

.outerArea{
	width:500px;
	height:auto;
	border:#ffffff solid 1px;
	margin:0 auto;
	border-radius:7px 7px 0px 0px;
}

.loginAreabox1{
	width:500px;
	height:30px;
	cursor: move;
	color: White;
	font-size:18px;
	font-weight:normal;
	vertical-align: middle;
	padding-top: 5px;
	/*width: 30%;*/
	text-align: center;
	margin:0 auto;
	text-transform:uppercase;
}


table.userArea1{
	text-align: left;
	color: black;
	width:502px;
	margin:2px auto;
	font-size:14px;
	padding-top:10px;
	padding-bottom:10px;
	color:#ffffff;
}

table.userArea1 td{
	line-height:25px;
}
.icon{
    cursor: pointer;
   
    float: left;
    margin-left: -20px;
    margin-top: 5px;
}
table.userArea1 input.tarea1{
    float:left;
	width:80%;
	padding:5px 4px;
	font-size:12px;
	color:#666666;
	border:#ffffff solid 1px;
	background:none;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+64,ffffff+100 */
	background: #e5e5e5; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 64%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(64%,#ffffff), color-stop(100%,#ffffff)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 64%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 64%,#ffffff 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 64%,#ffffff 100%); /* IE10 preview */
	background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 64%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
	border:#adadad solid 1px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
input.login1{
	padding:4px 12px;
	font-size:14px;
	color:#636363;
	cursor:pointer;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dddfe3+62,dddfe3+100 */
background: #f5f6f6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2RkZGZlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRmZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f5f6f6 0%, #dddfe3 62%, #dddfe3 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(62%,#dddfe3), color-stop(100%,#dddfe3)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* IE10 preview */
background: linear-gradient(to bottom, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#dddfe3',GradientType=0 ); /* IE6-8 */
border:none;

}

input.cancel1{
	padding:4px 12px;
	font-size:14px;
	color:#636363;
	cursor:pointer;

	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dddfe3+62,dddfe3+100 */
background: #f5f6f6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2RkZGZlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRmZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f5f6f6 0%, #dddfe3 62%, #dddfe3 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(62%,#dddfe3), color-stop(100%,#dddfe3)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* IE10 preview */
background: linear-gradient(to bottom, #f5f6f6 0%,#dddfe3 62%,#dddfe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#dddfe3',GradientType=0 ); /* IE6-8 */
border:none;

}



@media (max-width:600px){
	
    .outerArea{
	width:360px;
    }
	
	.loginAreabox{
		width:360px;
	}
	table.userArea{
		width:360px;
   }
   
   
   .loginAreabox1{
		width:360px;
	}
	table.userArea1{
		width:360px;
   }
}

@media (max-width:400px){
.outerArea{
	  width:310px;
    }
.loginAreabox{
		width:310px;
	}
table.userArea{
		width:310px;
   }
.loginAreabox1{
		width:310px;
	}
table.userArea1{
		width:310px;
   }
}