body, html {
background: url(/images/bg2.jpg) !important;
margin: 0 !important;
padding: 0 !important;
/*font-family: 'Allerta', sans-serif !important;*/
font-family: 'Signika Negative', sans-serif !important;
color: #004d99 !important;
}

#Container {
margin-bottom: 40px !important;
}

img {
border: none !important;
}

#topContFixed {
position: fixed;
top: 0;
z-index: 9999 !important;
background: #fff;
}

hr.style-one {
    border: 0;
width: 600px;
clear:both;
    height: 1px;
    background: #004d99;
    background-image: -webkit-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:    -moz-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:     -ms-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:      -o-linear-gradient(left, #fff, #004d99, #fff); 
}

hr.style-two {
    border: 0;
    height: 1px;
width: 300px;
background: #004d99;
    background-image: -webkit-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:    -moz-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:     -ms-linear-gradient(left, #fff, #004d99, #fff); 
    background-image:      -o-linear-gradient(left, #fff, #004d99, #fff); 
}

h1 {font-size: 22px !important;
color: #333 !important;
}
h2 {font-size: 20px !important;
color: #333 !important;}
h3 {font-size: 18px !important;
color: #333 !important;}

p {font-size: 16px !important;
color: #004d99 !important;}

.cb {clear: both;}

#pwdByHyper {display: none !important;}

#mainbody {
border: none !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-o-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-ms-border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
/*font-family: 'Allerta', sans-serif !important;*/
font-family: 'Signika Negative', sans-serif !important;
-o-box-shadow: 0px 6px 8px rgb(100,100,100);
-ms-box-shadow: 0px 6px 8px rgb(100,100,100);
-moz-box-shadow: 0px 6px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 6px 8px rgb(100,100,100);
box-shadow: 0px 6px 8px rgb(100,100,100);
margin-bottom: 30px;
padding-top: 220px !important;
}

#header {
margin-bottom: 10px;

height: 120px !important;
}

#headerLogo {
height: 120px;
width: 216px;
margin-left: 10px;
float: left;

/*background: url(/images/SXI_full_colour.jpg) no-repeat center;
background-size: 216px 108px;*/
}

#headerMiddle {
height: 120px;
width: 572px;
float: left;
margin-right: 10px;
margin-left: 10px;
position: relative;
}

#headerRight {
height: 110px;
width: 172px;
float: left;
margin-left: 10px;
padding-top: 10px;
}

#phone {
height: 30px;
line-height: 30px;
background: url(/images/tfb.png) no-repeat;
background-size: 30px 30px;
margin-bottom: 5px;
padding-left: 40px;
color: #004d99;
background:none\9;
}
#email {
height: 30px;
line-height: 30px;
background: url(/images/emb.png) no-repeat;
background-size: 30px 30px;
padding-left: 40px;
margin-bottom: 10px;
color: #004d99;
background:none\9;
}
#headLinks {
height: 30px;
line-height: 30px;
}
#headLinks a {color: #004d99;}

#MENUTABLE {
margin-bottom: 10px !important;
}







.cssmenu {
background: #fff !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: none !important;
-moz-box-shadow: none !important;
-ms-box-shadow: none !important;
width: 100px !important;
height: 200px;
border-radius: 0 !important;
}

.cssmenu li {
float: none !important;

}

.cssmenu a {
background: #62c8f3 !important;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
display: block !important;
width: 100px !important;
}

.cssmenu a:hover {
background: #004d99 !important;
}








.adminFoot {
/*
opacity: .2;
z-index: 666;
margin-bottom: 20px;
*/
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
}

#intro {
margin-top: 45px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 45px;
}


#panelCont {
position: fixed;
bottom: 0;
width: 1000px;
z-index: 999;
}

#panel,#flip {
}

#flip {
width: 50px;
height: 30px;
cursor: pointer;
margin-left: 950px;

}

#panel {
display:none;
/*background: #004d99;*/
background: #efeff1;
color: #333;
position: relative;
border-top-left-radius: 20px;
overflow: auto;
padding: 15px 0;
box-shadow: 0px 2px 3px 0px #004d99,
                    0px -2px 3px 0px #004d99;
-webkit-box-shadow: 0px 2px 3px 0px #004d99,
                    0px -2px 3px 0px #004d99;
-o-box-shadow: 0px 2px 3px 0px #004d99,
                    0px -2px 3px 0px #004d99;
-ms-box-shadow: 0px 2px 3px 0px #004d99,
                    0px -2px 3px 0px #004d99;
-moz-box-shadow: 0px 2px 3px 0px #004d99,
                    0px -2px 3px 0px #004d99;
}

#footcol1 {
width: 225px;
float: left;
padding-left: 15px;
}

#footcol2 {
width: 300px;
float: left;
text-align: center;
}

#footcol3 {
width: 200px;
float: left;
text-align: center;
}

#footcol4 {
width: 150px;
float: left;
padding-left: 100px;
}



#quickLinksInfo {
height: 100px;
}



#companyInfoInfo {
height: 100px;
padding: 20px 70px;
margin-bottom: 60px;
}



#helpInfo {
overflow: auto;
}

#helpLeft {
float: left;
width: 640px;
padding: 0px 20px;
padding-top: 100px;
}

#helpRight {
float: left;
width: 300px;
height: 300px;
background: url(/images/support.png) no-repeat center;
}

#brandsInfo {
overflow: auto;
margin-bottom: 60px;
}

#brand1 {
background: #fff url(/images/Brother_Logo.png) no-repeat center;
background-size: 160px 40px;
float: left;
width: 160px;
height: 120px;
padding: 0 20px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
border-radius: 0;
-webkit-border-radius:  0;
-o-border-radius:  0;
-ms-border-radius:  0;
-moz-border-radius:  0;
}
#brand1:hover {
background: #c4c4c4 url(/images/Brother_Logo.png) no-repeat center;
background-size: 160px 40px;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-moz-border-radius: 20px;
}
#brand1 a {
display:block;
    width:160px;
    height:120px;
}
#brand2 {
background: #fff url(/images/xerox.png) no-repeat center;
background-size: 160px 80px;
float: left;
width: 160px;
height: 120px;
padding: 0 20px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
border-radius: 0;
-webkit-border-radius:  0;
-o-border-radius:  0;
-ms-border-radius:  0;
-moz-border-radius:  0;
}
#brand2:hover {
background: #c4c4c4 url(/images/xerox.png) no-repeat center;
background-size: 160px 80px;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-moz-border-radius: 20px;
}
#brand2 a {
display:block;
    width:160px;
    height:120px;
}
#brand3 {
background: #fff url(/images/Hewlett-Packard.png) no-repeat center;
background-size: 140px 100px;
float: left;
width: 160px;
height: 120px;
padding: 0 20px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
border-radius: 0;
-webkit-border-radius:  0;
-o-border-radius:  0;
-ms-border-radius:  0;
-moz-border-radius:  0;
}
#brand3:hover {
background: #c4c4c4 url(/images/Hewlett-Packard.png) no-repeat center;
background-size: 140px 100px;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-moz-border-radius: 20px;
}
#brand3 a {
display:block;
    width:160px;
    height:120px;
}
#brand4 {
background: #fff url(/images/canon.png) no-repeat center;
background-size: 160px 40px;
float: left;
width: 160px;
height: 120px;
padding: 0 20px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
border-radius: 0;
-webkit-border-radius:  0;
-o-border-radius:  0;
-ms-border-radius:  0;
-moz-border-radius:  0;
}
#brand4:hover {
background: #c4c4c4 url(/images/canon.png) no-repeat center;
background-size: 160px 40px;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-moz-border-radius: 20px;
}
#brand4 a {
display:block;
    width:160px;
    height:120px;
}
#brand5 {
background: #fff url(/images/lexmark.png) no-repeat center;
background-size: 160px 40px;
float: left;
width: 160px;
height: 120px;
padding: 0 20px;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius:  0;
-ms-border-radius:  0;
-moz-border-radius:  0;
}
#brand5:hover {
background: #c4c4c4 url(/images/lexmark.png) no-repeat center;
background-size: 160px 40px;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-moz-border-radius: 20px;
}
#brand5 a {
display:block;
    width:160px;
    height:120px;
}

#consumablesInfo {
overflow: auto;
margin-bottom: 60px;
}
#inkLeft {
float:left;
width: 575px;
height: 250px;
padding-left: 25px;
}
#inkRight {
float:left;
width:400px;
height: 190px;
padding-top: 60px;
}
#inkRight a {
color: #004d99 !important;
}

#newProductsInfo {
height: 350px;
margin-bottom: 60px;
}


.box1
{
	position: relative;
	width: 230px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
margin-top: 50px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
float:left;
}


.box1:before, .box1:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box1:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}







.box2
{
	position: relative;
	width: 230px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
margin-top: 50px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
float:left;
}


.box2:before, .box2:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box2:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}










.box3
{
	position: relative;
	width: 230px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
margin-top: 50px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
float:left;
}


.box3:before, .box3:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box3:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}










.box4
{
	position: relative;
	width: 230px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
margin-top: 50px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
float:left;
}


.box4:before, .box4:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box4:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}


#logindetail {
background: #004d99;
width: 140px;
color: #fff;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
cursor: pointer;
border-bottom-left-radius: 10px;
position: absolute;
left: 281px;
box-shadow: -3px 3px 9px 3px #999;
display:none;
}

#hiddenlogin {
position: absolute;
/*display: none;*/
left: 417px;
top: -2px;
width: 120px;
height: 120px;
background: url(/images/redribbon2.png) no-repeat;
background-size: 120px 120px;
}

#cart {
position: absolute;
display:block;
height: 180px;
width: 100px;
left: 985px;
top: -25px;
/*background: url(/images/cart.png) no-repeat;
background-size: 100px 180px;*/
cursor: pointer;
}

.closecart {
position: absolute;
bottom: 3px;
right: 3px;
border-radius: 50%;
background: #333;
color: #fff;
height: 25px;
width: 25px;
line-height: 25px;
text-align:center;
cursor: pointer;
}

#lightbox {
background: #fff;
display: none;
width: 296px;
margin-left: -150px;
height: 196px;
position: absolute;
top: 300px;
left: 50%;
z-index: 2000;
border: 2px groove #004d99;
-webkit-box-shadow: 0 0 1px 5px #fc9f34;
    -moz-box-shadow: 0 0 1px 5px #fc9f34;
    box-shadow: 0 0 1px 5px #fc9f34;
}

#lightbox h2 {
position: absolute;
top: 30px;
left: 90px;
}

#lightbox a {
color: #004d99;
}

#loginStat {
width: 160px;
position: absolute;
top: 5px;
left: 335px;
}

ul#nav {
	width: 1000px;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
padding-left: 0;
}


#nav li {
float: left !important;
list-style-type: none !important;
}

#nav li a {
		display: block;
		/*padding: 8px 42px;*/
padding: 8px 40px\9;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; 
background: #004d99;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
color: #fff;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
text-align:center;
width: 199px;
padding: 8px 0;
}

#nav li a:hover {
		color: #fff;
		/*background-color: #62c8f3;*/ }

.current {
background: #62c8f3 !important;
}

.adminFoot {
width: 1000px;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 0;
opacity: 0.2 !important;
}

#vertNav {
float: left;
width: 160px;
overflow: auto;
}

.vertNavRight {
float: left;
width: 840px;
}

a.target2 {
background: #f12840 !important;
}
a.target2:hover {
background: #ff94a1 !important;
}
a.target3 {
background: #85b82d !important;
}
a.target3:hover {
background: #cbf386 !important;
}
a.target4 {
background: #f99425 !important;
}
a.target4:hover {
background: #ffd09d !important;
}
a.target5 {
background: #27a1ce !important;
}
a.target5:hover {
background: #7ddbfd !important;
}






hr.curve {
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
padding-bottom: 0;

}
hr.curve:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;    
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
padding-bottom: 0;
}

hr.curvesmall {
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
padding-bottom: 0;
width: 40%;

}
hr.curvesmall:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;    
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
padding-bottom: 0;
}


.embossed {
padding: 20px 10%  10px 10%;
background: #444;
}


a#ctl09_emailLinkButton {
display:none !important;
}

span.errorLabel {
position: fixed !important;
top: 47% !important;
left: 33%;
margin-right:200px !important;
font-size: 16px !important;
background: #333 !important;
padding: 20px 40px !important;
width: 30% !important;
}



.spinEffect{
		-moz-animation: spin 1.5s infinite linear;
	}

	@-moz-keyframes spin {
	0%  {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
	}

.spinEffect{
		-o-animation: spin 1.5s infinite linear;
	}

	@-o-keyframes spin {
	0%  {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
	}

.spinEffect{
		animation: spin 1.5s infinite linear;
	}

	@ keyframes spin {
	0%  {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
	}


.spinEffect{
		-ms-animation: spin 1.5s infinite linear;
	}

	@-ms-keyframes spin {
	0%  {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
	}


.spinEffect{
		-webkit-animation: spin 1.5s infinite linear;
	}

	@-webkit-keyframes spin {
	0%  {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
	}



.loginIndicatorHidden {
/*z-index: -99999999 !important;*/
display: none !important;
}



#linkedin {
position: absolute;
top: 96px;
left: 16px;
}


#linkedsmall {
position: absolute;
top: 3px;
left: -42px;
}

#adminHyperLink {
color: Red;
}