/* --- main / misc classes -------------------------------------------------------------------------------------------*/  

html, body {
	overflow: auto;
    border: 0px 0px;
	padding: 0px 0px;
	margin: 0px auto; 
	width: 1024px; 
	height: auto; 
	background-color: #FFFFFF;
	font-family: "Arial";
	text-decoration: none;	

}
	
img
{  
	border-style: none; /* stop IE putting blue border around image links */
}


.headerclass {
 
	text-align:left; 
	color: white; 
	height: 110px; 
	border: 0px 0px;
	padding: 0px 0px;
	margin: 0 auto;
	background-color: white;
	width: 100%;

	
}	
	
.pageclass{
    
	width: 100%;
	border: 0px 0px;
	padding: 0px 0px;
	margin: 0px auto; 
	background-color: white;
		
}	
	
.pageclassinner{
	position: absolute;
	top: 160px;
	bottom: 0px;
	text-align:left; 
	font-size: 14px;
	color: black; 
	width:1024px; 
	margin: 0px 0px; 
	background-color: white;
		
}	

.bigfatbuttonclass{
	
	position: absolute;
	left:475px;
	bottom: 30px;
	width:100px;
	height:50px;
	
}

.usernameclass {
  position: absolute;  
  top: 155px;
  height: 20px;
  padding-top: 1px;
  text-align:right;
  font-size: 11px;
  font-family: arial;
  color: silver;
  width: 1014px;
  z-index:999;
}


.grayshadowpanelclass {
    
	position: absolute;
	width: 1018px;
	background-color: #eff4f6;
	/*box-shadow: 4px 4px 4px #CCCCCC;*/
	border-radius: 8px; 	
}

/* --- title classes -------------------------------------------------------------------------------------------*/  

.styleimageclass {
float: left;     	
	background-size: 70%; 
	background-position: center;
	background-repeat: no-repeat; 
	background-color:none; 
	width:200px; 
	height:200px; 
	border-radius: 8px;"
}
/* --- title classes -------------------------------------------------------------------------------------------*/  

.titleclass {
    text-align:left; 
	color: black; 
	font-weight:bold;
	font-size: 20px;	
	background-color: white; 
	height: 40px;
	Line-Height: 40px;
}

.subtitleclass {
    text-align:left; 
	color: black; 
	font-weight:bold;
	font-size: 14px;	
	background-color: white; 
	height: 30px;
	Line-Height: 30px;

}

.subtitleclass2 {
    text-align:left; 
	color: black; 
	font-weight:bold;
	font-size: 16px;	
	background-color: background-color: none; 
	height: 40px;
	Line-Height: 20px;

}
	

/* --- kiosks panel classes -------------------------------------------------------------------------------------------*/  

.kioskscontainerclass {
    
	position: absolute;
	left: 80px;
	top: 80px;
	bottom: 100px;
	right: 80px;
	/*background-color: red;*/
	

}



/* --- edit text panel classes -------------------------------------------------------------------------------------------*/  


.listouterclass	{

    position: absolute;
	left: 20px;
	top: 21px;
	bottom: 130px;
	width: 952px;
	max-width: 972px;
	resize: none;
	background-color: red;
		
}

.edittextareaclass {    
	font-family: arial;
    font-size: 14px;	
	line-height: 22px;
	width: 100%;
	height: 100%;
	resize: none;
	overflow: auto;
	padding: 10px;
}


/* --- list classes (image/users etc.) -----------------------------------------------------------------------------------*/  


.listclass	{

    position: absolute;
	left: 20px;
	top: 21px;
	bottom: 110px;
	width: 952px;
	max-width: 972px;
	resize: none;
	background-color: white;
	/*border:1px solid silver;*/
	padding: 10px;
	overflow: auto;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	
}

.listclass > div:nth-child(even) {
     background-color: GhostWhite;
	 background-repeat:no-repeat;
	 background-position:center; 
	 background-size: contain;
}

.listitemclass	{
   padding-left: 10px;
   white-space: nowrap;
   height: 50px;
   line-height: 50px;
   font-family: arial;
   font-size: 14px;	
   overflow: hidden;
   text-overflow: ellipsis;
}

.listremoveclass {
   float: left;
   font-weight: bold;
   width: 24px;
   height: 24px;
   color: red; 
   padding: 0px 0px;
   margin-right: 10px;
   margin-top: 13px;
}
 
 /* --- button bar classes -------------------------------------------------------------------------------------------*/  
 
.floatLclass {
  float: left;
}

.floatRclass{
  float: right;
  /*overflow: hidden;*/
}

 
.buttonselectedclass {
	float:bottom; 
	height: 3px; 
	background-color: #00811f 
}
 
.buttonbarcontainerclass {
	height: 40px; 
}
 
.buttonbarclass {
	text-align:left; 
	color: white; 
	height: 37px; 
	margin: 0px; 
	padding: 0px; 
	border: 0px;
	Line-Height: 37px;
	background-color: whitesmoke; 
	background-image:url('gfx/button_bar_gradient.png'); 
	background-repeat:repeat-x;

	box-shadow: 0px 4px 4px #eff4f6;
}

.buttonspacerclass {
    
	background-image:url('gfx/button_bar_spacer.png'); 
	width: 1px;
	height:100%;	
}
 
.buttonbarclass a:link
  {       
    /* these remain same - NOTE: have to repeat for Opera, others you can just set the differences */
	color: #FFFFFF;	
	font-family: "Arial";
	text-decoration: none;
	font-size: 13px;	
	text-align: center;
	display: block;
	float: left;  
	vertical-align:middle;
	width:110px;
	height:100%;
 }
 
.buttonbarclass a:visited
  { 
	/* these remain same - NOTE: have to repeat for Opera, others you can just set the differences */
	color: #FFFFFF;	
	font-family: "Arial";
	text-decoration: none;
	font-size: 13px;	
	text-align: center;
	display: block;
	float: left;  
	vertical-align:middle;
	width:110px;
	height:100%;
 }
 
.buttonbarclass a:hover
 {
	
	background-image:url('gfx/button_hover.png'); 
	background-repeat:repeat-x;
	/* these remain same - NOTE: have to repeat for Opera, others you can just set the differences */
	color: white;
	font-family: "Arial";
	text-decoration: none;
	font-size: 13px;	
	text-align: center;
	display: block;
	float: left;  
	vertical-align:middle;
	width:110px;
	height:100%;
 }
 
   
.buttonbarclass a:active
  {
    background-image:url('gfx/button_active.png'); 
	background-repeat:repeat-x;
	/* these remain same - NOTE: have to repeat for Opera, others you can just set the differences */
	color: white;
	font-family: "Arial";
	text-decoration: none;
	font-size: 13px;	
	text-align: center;
	display: block;
	float: left;  
	vertical-align:middle;
	width:110px;
	height:100%;
 }
 
 /* --- new sign/user classes -------------------------------------------------------------------------------------------*/  
 
.dlgcontainerclass{
	position: relative;	
	margin: 100px auto;
	padding: 40px;
	width: 90%;
	background-color: #eff4f6;	
	border-radius: 8px; 	
	font-size: 14px;
	/*border:1px solid Gainsboro;*/
} 

.dlgtitleclass {
  font-weight: bold;
  height: 30px;
}

.dlgsubtitleclass {
  height: 40px;
}

.dlglineclass{
  width: 100%;
  text-align: left;
  float: left;     
  height: 30px;  
  line-height: 30px;
}

.dlglabel2class{  
  font-size: 12px;
  height: 20px;   
  line-height: 20px;
}

.dlglabelclass{
   padding-left: 0px;
   text-align: left;   
   float: left;
   width: 100%;
}

.dlginputclass{   
  width: 100%;
}

.dlgbuttonclass {
  position: absolute;	
  width: 75px;
  height: 40px;
}

 /* --- loading classes -------------------------------------------------------------------------------------------*/  
 
.loadingbackclass{
	position: fixed;
	top: 0px;
	bottom: 0px;
	font-size: 14px;
	color: black; 
	text-align:center;	
	width: 1024px;
	height: 100%;
	line-height: 100%;
	margin: 0px 0px; 
	background-color: white;
	opacity: 0.85;
	z-index: 1000;		
}

.loadingmsgclass{
	position: absolute;
	width: 500px;
	height: 100px;
	left: 50%;
	top: 50%;
	margin-top: -50px; /* half of height to centre correctly */ 
	margin-left: -250px;  
	border: 0px 0px;
	padding: 10px 0px;	
	background-color: none;	
	z-index: 1001;
	text-align:center;	
	line-height: 100px;	
	font-size: 20px;
	background-repeat:no-repeat;		
	background-position:center top;
}

.reloadbuttonclass{
	
	position: absolute;
	left: 50%;
	margin-left: -50px;  
	bottom: 10px;
	width:100px;
	height:25px;
	
} 

/* --- radio buttons -------------------------------------------------------------------------------------------*/  

 
 /* Customize the label (the container) */
.rbcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.rbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px;
  width: 21px;
  border:1px solid silver;
  background-color: white;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.rbcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.rbcontainer input:checked ~ .checkmark {
  background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.rbcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.rbcontainer .checkmark:after {
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00811f;
}

</style>