/*
    Chathura Liyanage
    BEng. in Software Engineering
    London Metropolitan University 
    Final Project 2014
    ChathuraLy@icloud.com
    +94712255111
*/

body {
    font-family:Tahoma;
    font-size:12px;
}
/*Loader----------------------------*/
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}
/**---------------------------------*/
/*Normal Table Formatiing*/
table.GridTable {
	font-family: tahoma;
	line-height:15px;
	font-size:12px;
	color:#333333;
	border-width: 1px;
	cursor:default;
	border-color: #666666;
	border-collapse: collapse;
}
table.GridTable th {
	border-width: 1px;
    padding-top:5px;
    padding-bottom:5px;
	border-style: solid;
	border-color: #666666;
	color:#FFFFFF;
	background-color: #5A94CE; /*#66CCFF*/
}
table.GridTable td {
	border-width: 1px;
	border-style: solid;
	border-color: #666666;
	background-color: transparent;
	padding-left:5px;
	padding-right:5px;
	
	transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.02s;
}

table.GridTable tr:hover{
    background: none repeat scroll 0 0 #424242;
}

/*Div Scroll Style*/
.divScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #99A3A4;
}

.divScroll::-webkit-scrollbar {
    width: 12px;
    border-radius: 10px;
    background-color: #F5F5F5;
}

.divScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/**------------------------------------*/

.loaderx {
    border: 3px solid #545454;
    border-radius: 50%;
    border-top: 3px solid #ffffff;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/*Button Modification*/
input[type=submit] {
    height: 22px;
    -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
    -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
    box-shadow: 0px 0px 0px 0px #f0f7fa;
    background: #1A5276; /* Old browsers */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999;
    display: inline-block;
    color: #fff;
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    padding: 0px 5px;
    text-decoration: none;
    text-shadow: 0px 0px 0px #5b6178;
    text-align: center; /*Delete if no necessary*/ 
    cursor:pointer;
}

input[type=submit]:hover {
    color: #000000;
    /*background-color:#FF6600;*/
    background: #F1C40F; /* Old browsers */
    /*
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
    background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); 
    background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
    */
    text-align: center; /*Delete if no necessary*/
}

input[type=submit]:active {
    position: relative;
    top: 1px;
    /*text-align: right;*/
    text-align: center; /*Delete if no necessary*/
}

input[type=submit]:disabled {
    background: #85929E;
    color:black;
}

/*Text Box Formatting*/
input[type=text] { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 100%; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
input[type=text]:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

/*Password Text Box Formatting*/
input[type=password] { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 100%; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
input[type=password]:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
}

/*Email Text Box Formatting*/
input[type=email] { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 100%; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
input[type=email]:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

/*Number Text Box Formatting*/
input[type=number] { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 100%; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
input[type=number]:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
}
/*Main Division*/
.DevDeco{
    border-radius:5px;
    background-color:#ffffff;
	border:#CCC solid 1px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    position:absolute;
    padding:10px;
}

/*Drop Down List Formatting*/
select { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 200px; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 
/*textarea Format*/
textarea { 
    border: 1px solid #c4c4c4; 
    height: 22px; 
    width: 100%; 
    font-size: 10pt; 
    padding: 0px 0px 0px 2px; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    box-shadow: 0px 0px 4px #d9d9d9; 
    -moz-box-shadow: 0px 0px 4px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 4px #d9d9d9; 
} 
 
textarea:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 


input[type=button] {
    height: 37vw;
	width:37vw;
	border:none;
    background: #2980B9; /* Old browsers */
    border-radius: 500px;
    color: #ffffff;
    font-family: tahoma;
    font-size: 15vw;
    font-weight: normal;
    padding: 0px 5px;
    text-decoration: none;
    text-shadow: 2px 2px 2px #000000;
    text-align: center; /*Delete if no necessary*/
	margin:10px;
	outline: none;
}

input[type=button]:hover {
    color: #000000;
    background: #F1C40F; /* Old browsers */
    text-align: center; /*Delete if no necessary*/
	outline: none;
}

input[type=button]:active {
    position: relative;
    top: 1px;
    outline: none;
    text-align: center; /*Delete if not necessary*/
}

input[type=reset] {
    height: 22px;
    -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
    -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
    box-shadow: 0px 0px 0px 0px #f0f7fa;
    background: #CCC; /* Old browsers */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999;
    display: inline-block;
    color: #000000;
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    padding: 0px 5px;
    text-decoration: none;
    text-shadow: 0px 0px 0px #5b6178;
    text-align: center; /*Delete if not necessary*/ 
}

input[type=reset]:hover {
    color: #000000;
    /*background-color:#FF6600;*/
    background: #fceabb; /* Old browsers */
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    text-align: center; /*Delete if no necessary*/
}

input[type=reset]:active {
    position: relative;
    top: 1px;
    /*text-align: right;*/
    text-align: center; /*Delete if no necessary*/
}

@font-face {
font-family: "MyFont";
	src: url(eurostyle.ttf) format("truetype");
}

/*----------------------------- Tooltip --------------------------*/
.tooltip {
    position: relative;
    /*8display: inline-block;*/
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #666666;
    color: #fff;
	font-size:14px;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 115%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #666666 transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*----------------------------- Tooltip --------------------------*/
.stripe-4 {
    background: -webkit-repeating-linear-gradient(145deg, #222, #222 10px, #333 10px, #333 20px);
    background: repeating-linear-gradient(-55deg, #222, #222 10px, #333 10px, #333 20px);
    color:#FFF;
}
/*----------------------------------------------------------------------------*/
.MenuHov{
    background-color:#406578;
    color:#ffffff;
}
.MenuHov:hover{
    background-color:#F1C40F;
    color:#000000;
}

.HovDiv{
	margin-left:10px;
	cursor:pointer;
}
.HovDiv:hover{
	transition-duration: 0.2s;
	transition-delay:0.05s;
	margin-left:20px;
}
/*----------------------------BounceIn Animation------------------------------*/
.BounceIn {
	position: relative;	
	-webkit-animation: bounce 1.2s ease-out;
	-moz-animation: bounce 800ms ease-out;
	-o-animation: bounce 800ms ease-out;
	animation: bounce 1.2s ease-out;
}

/* Webkit, Chrome and Safari */

@-webkit-keyframes bounce {
	0% {
		-webkit-transform:translateY(-100%);
	}
	5% {
		-webkit-transform:translateY(-100%);
	}
	15% {
		-webkit-transform:translateY(0);
		padding: 4px auto;
	}
	20% {
		-webkit-transform:translateY(-80%);
	}
	25% {
		-webkit-transform:translateY(0%);
		padding: 4px auto;
	}
	30% {
		-webkit-transform:translateY(-70%);
	}
	35% {
		-webkit-transform:translateY(0%);
		padding: 5px auto;
	}
	40% {
		-webkit-transform:translateY(-60%);
	}
	45% {
		-webkit-transform:translateY(0%);
		padding: 5px auto;
	}
	50% {
		-webkit-transform:translateY(-50%);
	}
	55% {
		-webkit-transform:translateY(0%);
		padding: 6px auto;
	}
	60% {
		-webkit-transform:translateY(-30%);
	}
	65% {
		-webkit-transform:translateY(0%);
		padding: 6px auto;
	}
	70% {
		-webkit-transform:translateY(-15%);
	}
	75% {
		-webkit-transform:translateY(0);
		padding: 8px auto;
	}
	80% {
		-webkit-transform:translateY(-10%);
	}
	85% {
		-webkit-transform:translateY(0);
		padding: 8px auto;
	}
	90% {
		-webkit-transform:translateY(-5%);
	}
	95% {
		-webkit-transform:translateY(0);
		padding: 10px;
	}
	100% {
		-webkit-transform:translateY(0);
		padding: 10px;
	}
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
	-moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	-moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	-moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	-moz-transform:translateY(-50%);
  }
  40% {
  	-moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	-moz-transform:translateY(-30%);
  }
  70% {
  	-moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	-moz-transform:translateY(-15%);
  }
  90% {
  	-moz-transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	-moz-transform:translateY(-10%);
  }
  97% {
  	-moz-transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	-moz-transform:translateY(-5%);
  }
  100% {
  	-moz-transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
	-o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	-o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	-o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	-o-transform:translateY(-50%);
  }
  40% {
  	-o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	-o-transform:translateY(-30%);
  }
  70% {
  	-o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	-o-transform:translateY(-15%);
  }
  90% {
  	-o-transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	-o-transform:translateY(-10%);
  }
  97% {
  	-o-transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	-o-transform:translateY(-5%);
  }
  100% {
  	-o-transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
	transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	transform:translateY(-50%);
  }
  40% {
  	transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	transform:translateY(-30%);
  }
  70% {
  	transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	transform:translateY(-15%);
  }
  90% {
  	transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	transform:translateY(-7%);
  }
  97% {
  	transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	transform:translateY(-3%);
  }
  100% {
  	transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}