.zlogin {
  position: fixed;
  width: 25em;
  height: 22em;
  top: 50%;
  left: 50%;
  margin-top: -11em;
  margin-left: -12.5em;
  border: 2px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-size: 1em;
  font-family: Helvetica,arial;
}

html, body {   
 width: 100%;   
 height: 100%;   
/*font-family: "Helvetica Neue", Helvetica, sans-serif;   #f0f0f0*/
color: #444;   
-webkit-font-smoothing: antialiased;    

background: white;
}


/***FIRST STYLE THE BUTTON***/
input.savechanges {
width:150px;
/*margin-left: auto;
margin-right: auto;*/
margin-left: 100px;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size: medium; /*1.5em;*/
font-family:Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
input.savechanges:hover, input.savechanges:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

input.ipv4address:invalid {
    background-color:pink;
}

input.ffmpeg_url:invalid {
    background-color:pink;
}

div.header em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}

form.znetform {
    width: 350px;
    font-size: 1.1em;
    color: #333;
    
    margin-left: auto;
    margin-right: auto;

    }
    
form.znetform legend { padding-left: 0; }
    
form.znetform legend,
form.znetform label { color: #333; }

form.znetform fieldset {
    border: none;
    border-top: 1px solid #C9DCA6;
    }
    
form.znetform fieldset fieldset { background: none; }
    
form.znetform fieldset li {
    padding: 5px 10px 7px;
    ##background: url(images/znetform-divider.gif) left bottom repeat-x;
    }

form.znetform fieldset {
  margin-bottom: 10px;
}
form.znetform legend {
  ###padding: 0 2px;
  font-weight: bold;
}
form.znetform label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
}
form.znetform fieldset ol {
  margin: 0;
  padding: 0;
}
form.znetform fieldset li {
  list-style: none;
  padding: 5px;
  margin: 0;
}
form.znetform fieldset fieldset {
  border: none;
  margin: 3px 0 0;
}
form.znetform fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.znetform fieldset fieldset label {
  display: block;
  width: auto;
}
form.znetform em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
form.znetform label {
  width: 150px; /* Width of labels */
  overflow: hidden;
}
form.znetform fieldset fieldset label {
  margin-left: 123px; /* Width plus 3 (html space) */
}

form.znetform fieldset fieldset div li:hover{
	background-color: #ffc;
}

form.znetform fieldset fieldset div li:focus{
	background-color: #ffa;
	border: lpx shaded #000;
}

@media screen and (max-width: 640px) {
	.zlogin {
		position: fixed;
		width: 300px;
		height: 160px;
		margin-top: -75px;
		margin-left: -145px;
	}
	
	form.znetform {
		width: 250px;
		font-size: 0.8em;
	}
	
	form.znetform h4 {
    	margin-top: 0.33em;
		margin-bottom: 0.33em;
		display: none;
	}
	
	form.znetform fieldset {
		margin-bottom: 0px;
		padding-bottom: 5px;
	}
	
	form.znetform legend {
		display: none;
	}
	
	input.savechanges {
		width:100px;
		/*margin-left: auto;
		margin-right: auto;*/
		margin-left: 75px;
		padding: 2px 14px 2px;
	}
}


#groupmembers
{
  margin-left: 123px; /* Width plus 3 (html space) */
  list-style-type:decimal-leading-zero;
  contenteditable: true;
}

ol#groupmembers {
    border: none;
    border-top: 1px solid #C9DCA6;
    background: none;
    list-style-type:decimal-leading-zero;
}

.gindex {
    float: left;
    width: 30px;
}


.gmember {
    float: left;
    width: 110px;
    contenteditable: true;
}


.gremover {
    width: 10px;
    font-weight: bold;
    font-style: normal;
    color: red;
}