/* CSS Document */
*
{ font-family:Arial, Helvetica, sans-serif;}

a
{ text-decoration:none; color:#0066FF; cursor: pointer; }
a.btnftobig
{ color:#999999;}
.kp_wrap
{
 	margin: 0 auto;
    max-width: 55em;
}
.bigbtn_action .red a
{ color:#FF0000 !important;}

pre
{ font-family:"Courier New", Courier, monospace;}

.bigbtn_action
{ background-color:#0066FF; height:40px; margin-bottom:.5em; border-left:#CCCCCC solid 1px;}
.bigbtn_action a
{ color:#0066FF;}


.bigbtn
{ width:40px; margin-right:1em; background-color:#FFFFFF; height:38px; float:left;  border-bottom:#CCCCCC solid 1px; border-top:#CCCCCC solid 1px;}
.bigbtn_r
{ width:40px; margin-right:1em; background-color:#FFFFFF; height:38px; float:right; border-bottom:#CCCCCC solid 1px; border-top:#CCCCCC solid 1px;}

.ui-dialog 
{
position:fixed;
}

.mg, .groupinfo
{ clear:both; float:left; width:75%;}

.box 
{ background-color:#F4F4F4; padding-bottom:1em; padding-top:1em; border:#000000 solid 1px; padding-left:.5em;}
.groupinfo
{ font-size:.8em; color:#999999; font-style:italic;}
legent
{ width:220px; float:left;}

.ui-dialog .fitem
{ padding:5px;background-color:#EFEFEF; min-width:400px; float:left; clear:both; margin:5px;}
.ui-dialog .fitem input
{ width:200px; }

main
{ overflow:auto;}

nav
{ float:left;
min-width:160px;
width:20%;}

footer
{ padding-top:1em;}

.kp_p100
{ width:100%;}

.kp_msg, .kp_head, .kp_main
{ float:left; width:100%;}

.grouptitle h3
{
float:left; width:50%; margin-top:.5em;
}
.kp_group_action
{ text-align:right; float:left; width:50%;margin-top:.5em;}



#generate, #dtyear, .dt,.btn, .color
{ background-color:#CCCCCC; padding:5px; cursor:pointer; margin:5px;}
#generate:hover,#dtyear:hover,.dt:hover,.btn:hover
{ background-color:#0099FF;}

.mini
{ font-size:.8em; color:#666666;}

.kp_wrap_wid
{
 	margin: 0 auto;
    max-width: 65em;
}
.exp, a.expi1
{ text-decoration:line-through;}



.kp_wrap_footer
{ float:left;}

.action
{ padding-bottom:25px;}

.kp_wrap_footer_txt
{ width:100%; float:left; border-top:#999999 solid 1px; font-size:.8em;}

.kp_footer
{ width:100%; float:left;}

.kp_inside_group a
{ padding-right:5px;}

.kp_inside_group table
{ font-size:.9em;}

#pwmsg,#pwmsg2
{ padding-left:210px; font-size:.8em; color:#666666; font-style:italic; padding-top:.4em;}

.kp_inside_group
{ float:left; }



.kp_form
{ width:100%;float:left;}

.kp_form .fitem
{ padding-bottom:1em; background-color:#F3F3F3; padding-top:.5em; padding-left:.5em; overflow:auto; }
.kp_form .factionitem
{ padding-bottom:1em; background-color:#0066FF;  padding-left:.5em; padding-top:1em; margin-top:.5em; color:#FFFFFF;}

.msg 
{ padding:5px; margin-bottom:5px; background-color:#000; color:#FFFFFF;}

.kp_inside_group
{ width:80%;}
.full
{ width:100%;}


.alert
{ background-color:#FF0000; color:#FFFFFF; font-weight:bold; text-align:center;}

.kp_form .legent, .kp_form legent
{ float:left; width:30%; overflow:auto;}
.kp_form .value, .kp_form div.value
{ float:right; width:69%; overflow:auto;}
.kpitem
{ width:100%; overflow:auto;}


ul.filelist li, ul.filelist
{ list-style:none; margin-left:0px; padding-left:.5em;cursor: pointer;}

div.iconframe
{ float:left; width:30px; height:30px;}



li.jpg:before, li.png:before {    
font-family: 'FontAwesome';
content: '\f1c5';
margin:0 5px 0 -15px;
color: #ccc;
}

li.txt:before {
min-width:50px;
font-family: 'FontAwesome';
content: '\f0f6';
margin:0 5px 0 -15px;
color: #ccc;
}


select
{
-webkit-appearance: none;
}

select option {
    padding-left:32px;
   background-repeat:no-repeat;
   background-position:5px;
}

select option[value="0"]{ background-image:url('../img/0.gif'); }
select option[value="1"]{ background-image:url('../img/1.gif'); }
select option[value="2"]{ background-image:url('../img/2.gif'); }
select option[value="3"]{ background-image:url('../img/3.gif'); }
select option[value="4"]{ background-image:url('../img/4.gif'); }


select option[value="1"], .icon1{
   /* background: rgba(100,100,100,0.3);*/
    
   	position: absolute;
    clip: rect(0px,42px,42px,0px);
	/*content: url("../img/all.gif");*/
}

dl {
    border: 3px double #ccc;
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 200px;
    text-align: right;
    font-weight: bold;
    color:#ccc;
  }
  dt::after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.2em 0;
  }

dl.view dt
{ width:100px;}

/* 
	Generic Styling, for Desktops/Laptops 
	*/
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
	}
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}
	
	
.ui-btn	
{
	display: inline-block;
padding: 0.5em 2em;
border: 0.16em solid #000;
    border-top-color: rgb(0, 0, 0);
    border-right-color: rgb(0, 0, 0);
    border-bottom-color: rgb(0, 0, 0);
    border-left-color: rgb(0, 0, 0);
margin: 0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration: none;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
font-weight: 400;
text-align: center;
transition: all 0.15s;
cursor: pointer;

}

a.ui-btn
{
font-size:.8em;
}

input.ui-btn, a.ui-btn, button.ui-btn {

    background-color: #fff !important;
    color: #0066FF !important;

}

input.ui-btn:hover, a.ui-btn:hover, button.ui-btn:hover {

    background-color: #ccc !important;
    color: #00FF00 !important;

}


.ui-btn-corner-all {

    border-radius: .6em;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {

		.kp_inside_group, .kp_form
		{ width:100%;}
		.fitem input, .fitem textarea
		{ width:95%;}
		.factionitem input
		{ width:95%; height:2.5em;}
		.fitem span, .kp_form div
		{  float:left;}
		#pwmsg2
		{ background-color:#EAEAEA; border:#FFFFFF solid 1px; overflow:auto; padding-left:0;}
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}
		.fitem
		{ width:100%;}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr { border: 1px solid #ccc; }

		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "Icon"; }
		td:nth-of-type(2):before { content: "Title"; }
		td:nth-of-type(3):before { content: "Username"; }
		td:nth-of-type(4):before { content: "Password"; }
		td:nth-of-type(5):before { content: "Url"; }
		td:nth-of-type(6):before { content: "Name"; }
		td:nth-of-type(7):before { content: "action"; }
		 
		table.full th
		{ visibility:hidden; display:none !important;}
		
		#dialog .fitem legent
		{ width: 100px; }
		.ui-dialog .ui-dialog-content
		{ padding:0px;}
		#dialog .fitem
		{
		
			min-width: 320px;
		}
		.char
		{ font-size:.7em;}
		.lastaccess .value, .UUID .value, .ParentUUID .value
		{font-size:.7em}
		.kp_form .legent, .kp_form legent
		{ width:200px; !important;}
		
	}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		table.full
		{ overflow:auto;}
		table.th
		{ visibility:hidden; display:none;}
	
		body {
			padding: 0;
			margin: 0;
			/*width: 320px; */
			}
		}

	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body {
			width: 495px;
		}
	}