/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #222;
}
  
body {
	font-size: 75%;
	line-height: 1.4;
	font-family: Arial;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.container {width: 800px; margin: 0 auto;}
.left-column {float: left;}
.right-column {float: right;}
.icons {display: inline-block;}
a {text-decoration: none;}
a:focus,a:active {outline: none;}
body {
	background: url('../images/bg.jpg') repeat center center;
}
#page {
	vertical-align: center;
}
#header {
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #f4f7f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f7f9));
	background: -webkit-linear-gradient(top, #ffffff 0%,#f4f7f9 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#f4f7f9 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#f4f7f9 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#f4f7f9 100%);
	border-bottom: 1px solid #ebeff3;
	padding: 10px 8px; margin-top: 20px;
	-webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
}
#header .left-column {
	width: 80%;
}
#header .right-column {
	width: 20%;
	text-align: right;
}
#header .header-content {
	text-align: center;
}
#logo {padding-right: 10px; margin-right: 10px; position: relative;}
#logo:after {
content: ""; position: absolute; height: 58px; width: 1px; top: 0; right: 0;
background: #f5f8fa;
background: -moz-linear-gradient(top, #f5f8fa 0%, #d8dddf 50%, #f5f8fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f8fa), color-stop(50%,#d8dddf), color-stop(100%,#f5f8fa));
background: -webkit-linear-gradient(top, #f5f8fa 0%,#d8dddf 50%,#f5f8fa 100%);
background: -o-linear-gradient(top, #f5f8fa 0%,#d8dddf 50%,#f5f8fa 100%);
background: -ms-linear-gradient(top, #f5f8fa 0%,#d8dddf 50%,#f5f8fa 100%);
background: linear-gradient(to bottom, #f5f8fa 0%,#d8dddf 50%,#f5f8fa 100%);
}
#logo,.slogan {float: center;}
.header-content .slogan h1 {margin: 10px 10px; color: #9a9fa2; font-size: 1.667em;text-align: center;}
.link-dn {
background-color: #fff;
display: inline-block; height: 32px; line-height: 32px;
padding: 0 10px 0 0; border: 1px solid #ed1c24; 
color: #0075BC;
-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}
.login {margin-top: 8px;}
.link-dn:hover {
	color: #ed1c24;
}
.link-dn:before {
	background: url('../page_custom/images/spirite.png') no-repeat 0 0 transparent;
	content: "";
	float: left; margin: 0 11px 0 -1px;
	width: 32px; height: 32px;
	-webkit-transition: all 0.18s linear 0s; -moz-transition: all 0.18s linear 0s; transition: all 0.18s linear 0s;
}
.link-dn:hover:before {
	margin-right: 8px;
}
#main-content .content-inner {
	padding: 30px 8px 20px;
	background-color: #fff;
}
.content {width: 484px;}
.sidebar {
	width: 300px;
}
.right-sidebar .col-inner {margin-left: 10px;}
.sidebar-content {
background: #1d9ae6; /* Old browsers */
background: -moz-linear-gradient(top,  #1d9ae6 0%, #0075bc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d9ae6), color-stop(100%,#0075bc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1d9ae6 0%,#0075bc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1d9ae6 0%,#0075bc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1d9ae6 0%,#0075bc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1d9ae6 0%,#0075bc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9ae6', endColorstr='#0075bc',GradientType=0 ); /* IE6-9 */
	padding: 27px 10px 21px;
	border: 1px solid #015fa6;
}
.right-sidebar .input-group {padding: 5px 0px;}
.right-sidebar  .ip-cb,.right-sidebar .ip-link {
	display: inline-block;
	margin: 0 15px 0px 0px;
}
.right-sidebar .ip-link  > a {
	color: #b6e3ff;
}
.right-sidebar .ip-link  > a:hover {
	color: #fff;
	text-decoration: underline;
}
.right-sidebar .input-group label {
	color: #fff;
}
.right-sidebar .ip-un label, .right-sidebar .ip-pw label {
	font-weight: bold;
}
.right-sidebar .input-group input.zLoginField {
    height: auto;
	width: 100%;
	padding: 8px;
	border: 2px solid #005a91;
	transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s;
}
.right-sidebar .input-group input.zLoginField:hover, .right-sidebar .input-group input.zLoginField:focus {
	border-color: #2aafff;
}
#btn-login {
	background: #ed1c24; /* Old browsers */
	background: -moz-linear-gradient(top,  #ed1c24 0%, #c80f16 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed1c24), color-stop(100%,#c80f16)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ed1c24 0%,#c80f16 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ed1c24 0%,#c80f16 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ed1c24 0%,#c80f16 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ed1c24 0%,#c80f16 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#c80f16',GradientType=0 ); /* IE6-9 */
	margin-top: 10px;
	border: 1px solid #fff;
	color: #fff;
	padding: 6px 12px;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 3px 0 0 rgba(0,0,0,0.5);
	height: auto;
}
#btn-login:hover {
	background: #ed1c24;
}
.list-links {list-style: none; padding: 0;}
.list-links li {float: left; width: 100%; padding-bottom: 10px; margin-bottom: 10px; position: relative;}
.list-links li:before,.list-links li:after {content: '';}
.list-links li:before {
	background-image: url('../page_custom/images/spirite.png');
	background-repeat: no-repeat;
	float: left; width: 32px; height: 30px;
	margin-right: 10px;	
}
.list-links li.hdsd:before {
	background-position: -0 -38px;
}
.list-links li.botm:before {
	background-position: -0 -75px;
}
.list-links li.tbmp:before {
	background-position: -0 -110px;
	height: 32px;
}
.list-links li:after {
background: #fbfdfe;
background: -moz-linear-gradient(left, #fbfdfe 0%, #dfe3e5 35%, #dfe3e5 50%, #dfe3e5 65%, #fbfdfe 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fbfdfe), color-stop(35%,#dfe3e5), color-stop(50%,#dfe3e5), color-stop(65%,#dfe3e5), color-stop(100%,#fbfdfe));
background: -webkit-linear-gradient(left, #fbfdfe 0%,#dfe3e5 35%,#dfe3e5 50%,#dfe3e5 65%,#fbfdfe 100%);
background: -o-linear-gradient(left, #fbfdfe 0%,#dfe3e5 35%,#dfe3e5 50%,#dfe3e5 65%,#fbfdfe 100%);
background: -ms-linear-gradient(left, #fbfdfe 0%,#dfe3e5 35%,#dfe3e5 50%,#dfe3e5 65%,#fbfdfe 100%);
background: linear-gradient(to right, #fbfdfe 0%,#dfe3e5 35%,#dfe3e5 50%,#dfe3e5 65%,#fbfdfe 100%);
position: absolute;
height: 1px; width: 100%; left: 0; bottom: 0;
}
.list-links li > a{
	font-size: 1.417em;
	color: #0075bc; line-height: 30px;
}
.list-links li > a:hover {
	text-decoration: underline;
}
.PABX {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 8px 0;
}

.footer-copyright {border-top: 1px solid #e5e9eb; text-align: center; background-color: #f8f8f8; color: #868b8e;}
.footer-copyright p > a {color: #0075BC;}
.footer-copyright p > a:hover {text-decoration: underline;}
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 768px) {
	img {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
	.img-ct img{width: 100%;}
	.PABX img {width: 100%;}
	.list-links li > a {font-size: 1.1em;}
}
@media only screen and (max-width: 639px) {
	.container,.content,.sidebar {width: auto;}
	.left-column {margin-bottom: 20px;}
}
@media only screen and (min-width: 640px) and (max-width: 768px){
	.container {width: 100%;}
	.content {width: 62%;}
	.sidebar {width: 38%;}
}

@media only screen and (min-width: 176px) and (max-width: 480px) {
	.slogan h1{font-size: 13px;}
	#logo:after {display: none;}
}
	 
@media only screen and (min-width: 176px) and (max-width: 220px) {
	#header .left-column,#header .right-column {width: 100%; text-align: center;}
	#header .left-column {margin-bottom: 5px;}
	#logo {padding: 0; margin: 0;}
	.slogan,#logo {float: none;}
	.link-dn {background-color: #f8f8f8; font-size: 1.3em;}
	.right-column {display: inline-block; float: none; width: 100%;}
	.right-sidebar .col-inner {margin: 0;}
	.list-links li > a {font-size: 1.25em;}
	.PABX img {width: 100%;}
}

@media only screen and (min-width: 221px) and (max-width: 320px) {
	#header .right-column,
	#header .left-column {width: 50%;}
}
@media only screen and (min-width: 360px) and (max-width: 480px) {
	#header .left-column {width: 60%; margin: 0;}
	#header .right-column {width: 40%;}
}

@media print,
 (-o-min-device-pixel-ratio: 5/4),
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 120dpi) {
}

/* ==========================================================================
 Helper classes
 ========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
 Print styles
 ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

#ZLoginErrorPanel {
    color: #c85305 !important;
    font-size: 80% !important;
    white-space: normal;
}

.header-content h1 {
	float: left;
	margin: 0;
}

.ImgLoginBanner {
	display: block;
	height: 42px !important;
	width: 105px !important;
	background-size: auto auto;
}