/*Font-Face*/
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular-webfont.eot');
    src: url('../fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Italic-webfont.eot');
    src: url('../fonts/roboto/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Bold-webfont.eot');
    src: url('../fonts/roboto/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-BoldItalic-webfont.eot');
    src: url('../fonts/roboto/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Thin-webfont.eot');
    src: url('../fonts/roboto/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}
/*
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');
    src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-ThinItalic-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
    font-weight: 200;
    font-style: italic;
}*/
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-LightItalic-webfont.eot');
    src: url('../fonts/roboto/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-LightItalic-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Medium-webfont.eot');
    src: url('../fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-MediumItalic-webfont.eot');
    src: url('../fonts/roboto/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/Roboto-MediumItalic-webfont.woff') format('woff'),
         url('../fonts/roboto/Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto/Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

/*Fullscreen Background*/
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
	
body {
	font-family: 'Roboto', Arial, sans-serif;
	margin: 4px 4px 200px;
	background: #FAFAFA;/*#FFF;*/
	color: #444; 
	/*font: 14px/1.5 Helvetica, Arial, sans-serif;*/
	/*font: 14px/1.5 Cambria, serif;*/
	animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

h5{
	font: 18px/1.5 "Roboto", sans-serif;
	font-weight:300;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 10px;
}

h6{
	font: 25px/1.5 "Roboto", sans-serif;
	color:purple;	
	margin-top: 0;
	margin-bottom: 0;
	font-weight:300;
}

h7{
	font: 25px/1.5 "Roboto", sans-serif;
	font-weight:300;
	color:white;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 10px;
}
hr {
  background: white; 
  clear: both; 
  float: none; 
  min-width: 19%; 
  height: 1px;
  margin: 0 0 1.4em;
  border: none; 
}

hr.small{
	margin: 0 0 0;
}

#centerwrapper {
	height: auto;
	min-height: 50%;
}

#wrapper {
	width: 100%;
	min-height: 100%;
    margin: 0 auto;
	background: #b3b3b3;
	position: fixed;

}

#instructions{
	margin: 8% auto;
	margin-left: 35%;
	height: 100%;
	width: 100%;
	z-index: 2;
	position: absolute;
}

#squarebox {
        width:430px;
        height:43px;
		padding:10px;
        /*background-color:#FFFFFF;*/
        box-shadow: 0px 0px 10px 2px RED;
		border-radius: 2px;
		opacity: 0.5;
}


#greybox {
	    /*margin-top: 5%;*/
		height: auto;
		min-width: 20%;
        width:auto;		
        height:auto;
		padding-bottom: 20px;
        background-color: #8f8f8f;
       /* box-shadow: 0px 0px 10px 2px #BDBDBD;*/
		border-radius: 2px;
		background: rgba(143, 143, 143, 0.5); /*rgba(33, 100, 167, 0.5);*/
		position: absolute;
		z-index: -1;
}

#loginbox {
	    margin-top: 0%;
		margin-left: 75%;
		height: auto;
		min-width: 24%;
        width:auto;		
		padding-bottom: 5px;
        background-color: #2164a7;		
       /* box-shadow: 0px 0px 10px 2px #BDBDBD;*/
		border-radius: 2px;
		/*background: rgba(33, 100, 167, 0.5);*/
		background: rgba(255, 128, 0, 0.5);
		position: absolute;
		z-index: -1;
}

.flex
{
	width: 90%;
}

a:link { 
    text-decoration: none;
}
a:visited { 
    text-decoration: none;
}
a:active { 
    text-decoration: none;
}

/*Hover Table*/
.hoverTable{
		/*width:100%; */
		border-collapse:collapse; 
	}
.hoverTable td{ 
		padding:7px;
	}
/* Define the hover highlight color for the table row */
 .hoverTable tr:hover {
          background-color: #2164a7;
    }
/* Define the hover highlight color for the table row */
 .hoverTable2 tr:nth-child(odd):hover {
          background-color: #2164a7;
    }

a, a:active, a:visited { color: #607890; }

a:hover { color: #036; }

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
	min-width: 1250px;
	/*background-color:#D0A9F5;*/
	color:white;
}

#fontgrey
{
	font-size: 18px;
	color:grey;
}

#flex
{
	width: 90%;
}

/* Hot pink Highlight */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #FF9D00; 
    -webkit-box-shadow: inset 0 0 6px #FF9D00; 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #FF9D05; 
}

/*PAGE FADE IN from body tag*/

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/***FIRST STYLE THE BUTTON***/
input#gobutton{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:#35b128; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
input#gobutton:hover, input#gobutton:focus{
background-color :#399630; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
input#gobuttonred:hover, input#gobuttonred:focus{
background-color :#CE1D1D; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
input#gobuttonred{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:#F62323; /*the colour of the button*/
border:1px solid #952222; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
input#gobuttonblue:hover, input#gobuttonblue:focus{
background-color :#6DB3F5; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
input#gobuttonblue{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:#99C9F5; /*the colour of the button*/
border:1px solid #ccc; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
input#gobutton:disabled{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:grey; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
input#gobuttonred:disabled{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:grey; /*the colour of the button*/
border:1px solid #952222; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}

/* Text Box */
inputs:-webkit-input-placeholder { 
    color:    #b5b5b5; 
} 
 
inputs-moz-placeholder { 
    color:    #b5b5b5; 
} 
 
 .inputs  { 
    background: #E6E6E6; 
    font-size: 18px; /*0.8rem;*/ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    border: none; 
    padding: 13px 10px; 
    width: auto; /*270px; */
    margin-bottom: 20px; 
    box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 ); 
    clear: both; 
} 
.inputs:focus { 
    background: #fff; 
    box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 ); 
    outline: none;    
}