/*

  Hartridge Suppport Admin
  
  http://www.hartridge.com
  
  Copyright (c) 2014 Hartridge Ltd
  
  admin_stylesheet.css

*/

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

html, body{
background-color:#EFEFEF;
background-position: center top;
background-repeat:no-repeat;
background-attachment:fixed;

height:100%;
text-align:center;
}

A:link {font-family: Arial,Helvetica,sans-serif; text-decoration: underlined; color: #006C85;}
A:visited {font-family: Arial,Helvetica,sans-serif; text-decoration: none; color: #006C85;}
A:active {font-family: Arial,Helvetica,sans-serif; text-decoration: none; color: #006C85;}
A:hover {font-family: Arial,Helvetica,sans-serif; text-decoration: none; color: #777;}



/* Header */
#header_cont {
margin-left:auto;
margin-right:auto;
width:1050px;
height:240px;
}

#header {
margin-left:auto;
margin-right:auto;
width:1000px;
height:240px;
}



/*Wrapper/container*/
#container {
position: relative;
margin-left:auto;
margin-right:auto;
width:1050px;
height: 100%;
min-height: 100%;
}

#content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -135px auto;
/*The -100px mentioned above needs to be the exact height of the footer.*/
width:1000px;
}



/*Footer*/
#footer {
height: 135px;
clear: both;
position: relative;
font-size: 18px;
font-family: 'Open Sans',sans-serif; 
color:#777;
margin: 0px auto 10px auto;
width:1050px;
}

#nudge{
height: 100px;
clear: both;
}


/*Buttons*/
.button {
  position: relative;
  color: #efefef;
  padding: 0px 0px 0px 0px;
  line-height: 100%;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  box-shadow: 0px 0px 0px #222;
  -webkit-box-shadow: 0px 0px 0px #222;
  -moz-box-shadow: 0px 0px 0px #222;  
  
background: #17617c;
background: -moz-linear-gradient(top,  #17617c 0%, #006c85 100%, #006c85 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17617c), color-stop(100%,#006c85), color-stop(100%,#006c85));
background: -webkit-linear-gradient(top,  #17617c 0%,#006c85 100%,#006c85 100%);
background: -o-linear-gradient(top,  #17617c 0%,#006c85 100%,#006c85 100%);
background: -ms-linear-gradient(top,  #17617c 0%,#006c85 100%,#006c85 100%);
background: linear-gradient(to bottom,  #17617c 0%,#006c85 100%,#006c85 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17617c', endColorstr='#006c85',GradientType=0 );

  border: solid 1px #115290;
  }
  
  
.button a {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  color: #efefef;
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

.button:hover {
background: #1f93a8;
background: -moz-linear-gradient(top,  #1f93a8 0%, #006c85 100%, #006c85 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f93a8), color-stop(100%,#006c85), color-stop(100%,#006c85));
background: -webkit-linear-gradient(top,  #1f93a8 0%,#006c85 100%,#006c85 100%);
background: -o-linear-gradient(top,  #1f93a8 0%,#006c85 100%,#006c85 100%);
background: -ms-linear-gradient(top,  #1f93a8 0%,#006c85 100%,#006c85 100%);
background: linear-gradient(to bottom,  #1f93a8 0%,#006c85 100%,#006c85 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f93a8', endColorstr='#006c85',GradientType=0 );
}

.button:active {	
background: #006c85;
background: -moz-linear-gradient(top,  #006c85 0%, #006c85 0%, #1f93a8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006c85), color-stop(0%,#006c85), color-stop(100%,#1f93a8));
background: -webkit-linear-gradient(top,  #006c85 0%,#006c85 0%,#1f93a8 100%);
background: -o-linear-gradient(top,  #006c85 0%,#006c85 0%,#1f93a8 100%);
background: -ms-linear-gradient(top,  #006c85 0%,#006c85 0%,#1f93a8 100%);
background: linear-gradient(to bottom,  #006c85 0%,#006c85 0%,#1f93a8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006c85', endColorstr='#1f93a8',GradientType=0 );
}
  
  
  
  
  
.button2 {
  position: relative;
  padding: 0px 0px 0px 0px;
  line-height: 100%;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  box-shadow: 0px 0px 0px #222;
  -webkit-box-shadow: 0px 0px 0px #222;
  -moz-box-shadow: 0px 0px 0px #222;  
  
background: #575757;
background: -moz-linear-gradient(top,  #575757 0%, #3d3d3d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#575757), color-stop(100%,#3d3d3d));
background: -webkit-linear-gradient(top,  #575757 0%,#3d3d3d 100%);
background: -o-linear-gradient(top,  #575757 0%,#3d3d3d 100%);
background: -ms-linear-gradient(top,  #575757 0%,#3d3d3d 100%);
background: linear-gradient(to bottom,  #575757 0%,#3d3d3d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575757', endColorstr='#3d3d3d',GradientType=0 );

border-right: solid 1px #585858;
}
  
  
.button2 a {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  color: #efefef;
  text-decoration: none;
  display: block;
  margin: 0;  
}

.button2:hover {
background: #7f7f7f;
background: -moz-linear-gradient(top,  #7f7f7f 0%, #545454 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#545454));
background: -webkit-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -o-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -ms-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: linear-gradient(to bottom,  #7f7f7f 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#545454',GradientType=0 );
}

.button2:active {
background: #7f7f7f;
background: -moz-linear-gradient(top,  #7f7f7f 0%, #545454 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#545454));
background: -webkit-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -o-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -ms-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: linear-gradient(to bottom,  #7f7f7f 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#545454',GradientType=0 );
}    
  
  
  

.redbut { 
background: #f85032;
background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
border: solid 1px #f85032;
} 

.redbut:hover { 
background: #7f7f7f;
background: -moz-linear-gradient(top,  #7f7f7f 0%, #545454 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#545454));
background: -webkit-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -o-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -ms-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: linear-gradient(to bottom,  #7f7f7f 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#545454',GradientType=0 );
border: solid 1px #7f7f7f;
}


 
 
.greenbut { 
background: #bfd730;
background: -moz-linear-gradient(top,  #bfd730 0%, #bfd730 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd730), color-stop(100%,#bfd730));
background: -webkit-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -o-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -ms-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: linear-gradient(to bottom,  #bfd730 0%,#bfd730 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd730', endColorstr='#bfd730',GradientType=0 );
border: solid 1px #bfd730;
}
 
.greenbut:hover { 
background: #7f7f7f;
background: -moz-linear-gradient(top,  #7f7f7f 0%, #545454 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#545454));
background: -webkit-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -o-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -ms-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: linear-gradient(to bottom,  #7f7f7f 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#545454',GradientType=0 );
border: solid 1px #7f7f7f;
} 
 
 
 
 
.bluebut { 
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #6483ba 100%);
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#6483ba 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#6483ba 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#6483ba',GradientType=0 );
border-right: solid 1px #1e5799;
}
 
.bluebut:hover { 
background: #7f7f7f;
background: -moz-linear-gradient(top,  #7f7f7f 0%, #545454 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#545454));
background: -webkit-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -o-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: -ms-linear-gradient(top,  #7f7f7f 0%,#545454 100%);
background: linear-gradient(to bottom,  #7f7f7f 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#545454',GradientType=0 );
border: solid 1px #7f7f7f;
} 
 
 
 
 
 
 
 
 

 
/*Boxes*/ 
.whitebox {
  font-family: 'Open Sans',sans-serif; 
  color:#777;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
  box-shadow:0 1px 3px rgba(0,0,0,.13);
  background-color: rgb(255, 255, 255);
  border: 0px solid black;
}


.greybox {
  position:relative;
  font-family: 'Open Sans',sans-serif; 
  color: #575757;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
  box-shadow:0 1px 3px rgba(0,0,0,.13);   
  background-color: #DBDBDB;
  border: 1px solid #cccccc;
}


.greybox0 {
  position:relative;
  float:left;
  font-family: 'Open Sans',sans-serif; 
  color: #575757;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
  box-shadow:0 1px 3px rgba(0,0,0,.13);   
  background-color: #DBDBDB;
  border: 1px solid #cccccc;  
 
/*translate animation*/
    -moz-animation-name: greybox0;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: greybox0;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.5s;

    animation-name:greybox0;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.5s;
}

@-moz-keyframes greybox0 {
    0% {
        -moz-transform: scale(0);
    }
	
    100% {
        -moz-transform: scale(1);	
    }
}

@-webkit-keyframes greybox0 {
    0% {
		-webkit-transform: scale(0);
    }
	
    100% {
		-webkit-transform: scale(1);
    }
}

@keyframes greybox0 {
    0% {
		transform: scale(0);
    }
	
    100% {
		transform: scale(1);
    }
} 



.greybox1 {
  position:relative;
  float:left;
  font-family: 'Open Sans',sans-serif; 
  color: #575757;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
  box-shadow:0 1px 3px rgba(0,0,0,.13);   
  background-color: #DBDBDB;
  border: 1px solid #cccccc;  
 
/*translate animation*/
    -moz-animation-name: greybox1;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.8s;

    -webkit-animation-name: greybox1;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.8s;

    animation-name:greybox1;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.8s;
}

@-moz-keyframes greybox1 {
    0% {
        -moz-transform: translateY(-100px);
		-moz-opacity: 0;
    }
	
    50% {
        -moz-transform: translateY(-100px);
		-moz-opacity: 0;
    }	
	
    100% {
        -moz-transform: translateY(0);	
		-moz-opacity: 1;
    }
}

@-webkit-keyframes greybox1 {
    0% {
		-webkit-transform: translateY(-100px);
		-webkit-opacity: 0;
    }
	
    50% {
		-webkit-transform: translateY(-100px);
		-webkit-opacity: 0;
    }	
	
    100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
    }
}

@keyframes greybox1 {
    0% {
		transform: translateY(-100px);
		opacity: 0;
    }
	
    50% {
		transform: translateY(-100px);
		opacity: 0;		
    }	
	
    100% {
		transform: translateY(0);
		opacity: 1;		
    }
} 



.greybox2 {
  position:relative;
  float:left;
  font-family: 'Open Sans',sans-serif; 
  color: #575757;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);
  box-shadow:0 1px 3px rgba(0,0,0,.13);   
  background-color: #DBDBDB;
  border: 1px solid #cccccc;  

/*translate animation*/
  -moz-animation-name: greybox2;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-duration: 1.1s;

  -webkit-animation-name: greybox2;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.1s;

  animation-name:greybox2;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 1.1s;
}

@-moz-keyframes greybox2 {
    0% {
        -moz-transform: translateY(-87px);
		-moz-opacity: 0;
	}

    50% {
        -moz-transform: translateY(-87px);		
	    -moz-opacity: 0;
    }
	
    100% {
        -moz-transform: translateY(0);
		-moz-opacity: 1;
    }
}

@-webkit-keyframes greybox2 {
    0% {
		-webkit-transform: translateY(-87px);
		-webkit-opacity: 0;
	}	
		
    50% {
        -webkit-transform: translateY(-87px);	
		-webkit-opacity: 0;
    }
	
    100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
    }
}

@keyframes greybox2 {
    0% {
		transform: translateY(-87px);
	    opacity: 0;
	}

	50% {
        transform: translateY(-87px);	
	    opacity: 0;		
    }
	
    100% {
		transform: translateY(0);
	    opacity: 1;		
    }
} 





/*Inputs*/
.input {
  background-color: rgb(251, 251, 251);
  font-size: 18px;
  width:75%;
  height:30px;
  border: 1px solid #DDD;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07) inset;
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07) inset;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07) inset;
  color: #333;
}




/*Text*/
.title {
  float:left;
  font-size: 32px;
  width:1000px; 
  color: #575757;
  font-family: Arial, Helvetica, sans-serif;
  margin:20px 0px 30px 0px;
  text-align:left;
}

.stitle {
  float:left;
  font-size: 24px;
  width:1000px; 
  color: #575757;
  font-family: Arial, Helvetica, sans-serif;
  margin:0px 0px 30px 0px;
  text-align:left;
}  
   
.text {
  float:left;
  font-size: 16px;
  width:1000px; 
  color: #575757;
  font-family: Arial, Helvetica, sans-serif;
  margin:0px 0px 30px 0px;
  text-align:left;
}    
   
 .hl_text {
  float:left;
  font-size: 16px;
  width:1000px; 
  color: #575757;
  font-family: Arial, Helvetica, sans-serif;
  margin:0px 0px 0px 0px;
  text-align:left;

  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -ms-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear; 
}   
  
.hl_text:hover {
  background: #b2b2b2;  
  z-index:50;    
}  



.hl_text2 {
  float:left;
  font-size: 16px;
  width:1000px; 
  color: #575757;
  font-family: Arial, Helvetica, sans-serif;
  margin:0px 0px 0px 0px;
  text-align:left;	
  
  background: #e0a3a3;  
  z-index:50;		
}








  
  
  
.fadeText {
  -moz-animation-name: fadeText;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 3s;

  -webkit-animation-name: fadeText;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 3s;

  animation-name: fadeText;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 3s;	
}
  
 @-moz-keyframes fadeText {
    0%   { opacity: 0; }
    33%   { opacity: 0; }	
    100% { opacity: 1; }
}

@-webkit-keyframes fadeText {
    0%   { opacity: 0; }
    33%   { opacity: 0; }	
    100% { opacity: 1; }
}

@keyframes fadeText {
    0%   { opacity: 0; }
    33%   { opacity: 0; }	
    100% { opacity: 1; }
}  
  
   
.ShortFadeText {
  -moz-animation-name: ShortFadeText;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 1s;

  -webkit-animation-name: ShortFadeText;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 1s;

  animation-name: ShortFadeText;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;	
}
  
 @-moz-keyframes ShortFadeText {
    0%   { opacity: 0; }
    50%   { opacity: 0; }		
    100% { opacity: 1; }
}

@-webkit-keyframes ShortFadeText {
    0%   { opacity: 0; }
	50%   { opacity: 0; }	
    100% { opacity: 1; }
}

@keyframes ShortFadeText {
    0%   { opacity: 0; }
    50%   { opacity: 0; }	
    100% { opacity: 1; }
}   
  
  

/*Colours*/
.red {
  color:#FF0000;
}

.green {
  color:#009900;
}

.grey {
  color:#575757;
}



.red_grad {
background: rgb(255,26,0);
background: -moz-linear-gradient(left,  rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1)));
background: -webkit-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -o-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -ms-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: linear-gradient(to right,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=1 );

/*transform animation*/
  -moz-animation-name: redBar;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 2s;

  -webkit-animation-name: redBar;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 2s;

  animation-name: redBar;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;

}

@-moz-keyframes redBar {
    0% {
        -moz-transform: scaleY(0);
		-moz-transform-origin : 50% 100%;
    }
	
    50% {
        -moz-transform: scaleY(0);
		-moz-transform-origin : 50% 100%;		
    }	
	
    100% {
        -moz-transform: scaleY(1);
		-moz-transform-origin : 50% 100%;		
    }
}

@-webkit-keyframes redBar {
    0% {
		-webkit-transform: scaleY(0);
		-webkit-transform-origin : 50% 100%;
    }

    50% {
		-webkit-transform: scaleY(0);
		-webkit-transform-origin : 50% 100%;
    }
	
    100% {
		-webkit-transform: scaleY(1);
		-webkit-transform-origin : 50% 100%;
    }
}

@keyframes redBar {
    0% {
		transform: scaleY(0);
		transform-origin : 50% 100%;
    }
	
    50% {
		transform: scaleY(0);
		transform-origin : 50% 100%;
    }	
	
    100% {
		transform: scaleY(1);
		transform-origin : 50% 100%;
    }
} 



.green_grad {
position:relative;
background: #bfd730;
background: -moz-linear-gradient(top,  #bfd730 0%, #bfd730 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd730), color-stop(100%,#bfd730));
background: -webkit-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -o-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -ms-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: linear-gradient(to bottom,  #bfd730 0%,#bfd730 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd730', endColorstr='#bfd730',GradientType=0 );

/*transform animation*/
  -moz-animation-name: greenBar;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 1.5s;

  -webkit-animation-name: greenBar;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 1.5s;

  animation-name: greenBar;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1.5s;

}
  
@-moz-keyframes greenBar {
    0% {
        -moz-transform: scaleY(0);
		-moz-transform-origin : 50% 100%;
    }
	
    50% {
        -moz-transform: scaleY(0);
		-moz-transform-origin : 50% 100%;		
    }	
	
    100% {
        -moz-transform: scaleY(1);
		-moz-transform-origin : 50% 100%;		
    }
}

@-webkit-keyframes greenBar {
    0% {
		-webkit-transform: scaleY(0);
		-webkit-transform-origin : 50% 100%;
    }
	
    50% {
		-webkit-transform: scaleY(0);
		-webkit-transform-origin : 50% 100%;
    }	
		
    100% {
		-webkit-transform: scaleY(1);
		-webkit-transform-origin : 50% 100%;
    }
}

@keyframes greenBar {
    0% {
		transform: scaleY(0);
		transform-origin : 50% 100%;
    }
	
    50% {
		transform: scaleY(0);
		transform-origin : 50% 100%;
    }	
	
    100% {
		transform: scaleY(1);
		transform-origin : 50% 100%;
    }
} 
 

 
 
 
 

.circle {
float:left;	
position:relative;
width:15px;
height:15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}


.greenCircle {	
border: solid 2px #a1b522;	
background: #bfd730;
background: -moz-linear-gradient(top,  #bfd730 0%, #bfd730 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd730), color-stop(100%,#bfd730));
background: -webkit-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -o-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: -ms-linear-gradient(top,  #bfd730 0%,#bfd730 100%);
background: linear-gradient(to bottom,  #bfd730 0%,#bfd730 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd730', endColorstr='#bfd730',GradientType=0 );	
}


.amberCircle {	
border: solid 2px #e28009;	
background: #ffaf4b;
background: -moz-linear-gradient(top,  #ffaf4b 0%, #ff920a 100%);
background: -webkit-linear-gradient(top,  #ffaf4b 0%,#ff920a 100%);
background: linear-gradient(to bottom,  #ffaf4b 0%,#ff920a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
}


.redCircle {	
border: solid 2px #bf2211;	
background: rgb(255,26,0);
background: -moz-linear-gradient(left,  rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1)));
background: -webkit-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -o-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -ms-linear-gradient(left,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: linear-gradient(to right,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=1 );
}


.greyCircle {	
border: solid 2px #bab8b8;	
background: #cecccc;
}


/*tables*/

.trafficTable {
float:left; 
border:solid 1px #777; 
width:60px; 
margin:0px 0px 0px 0px;		
}

 
 
 
 
/*Flipswitch*/
.flipswitch {
  position: relative;
  width: 86px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.flipswitch input[type=checkbox] {
  display: none;
}
.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #828282;
  border-radius: 50px;
}
.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -ms-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 18px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.flipswitch-inner:before {
  content: "ON";
  padding-left: 12px;
  background-color: #006C85;
  color: #EFEFEF;
}
.flipswitch-inner:after {
  content: "OFF";
  padding-right: 12px;
  background-color: #EFEFEF;
  color: #575757;
  text-align: right;
}
.flipswitch-switch {
  width: 31px;
  margin: -3.5px;
  background: #FFFFFF;
  border: 2px solid #828282;
  border-radius: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 59px;
  -webkit-transition: all 0.3s ease-in 0s;
  -moz-transition: all 0.3s ease-in 0s;
  -ms-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}