@charset "utf-8";

/* LAYOUT STARTS */

html { font-family:Arial, Helvetica, sans-serif; text-align: center; } 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0; padding: 0;	border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
* html legend {margin:-18px -8px 16px 0;padding:0;}

body {line-height: 1;font-family: Arial, Helvetica, sans-serif;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through;}
html { font-size: 62.5%; font-family:Arial, Helvetica, sans-serif;}
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var, textarea { font-size: 92%; font-family: Arial, Helvetica, sans-serif; }
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

.Prod_LandingResult sup {
    vertical-align: baseline;
}

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { /zoom: 1; }

@media (max-width: 767px) {
    html {
        /*padding: 3px;*/
        background-color: #dcdcdc;
    }
    .single {
        background-color: #ffffff;
    }
    small, sup, sub {
        font-size: 65%;
    }
    sup {
        vertical-align: baseline;
    }
}

/* LAYOUT ENDS */

/* BODY BACKGROUNDS */

body {
	color: #4d4d4d;
}
body.grey {
	background: #F2F2F2;
}
body.color {
	background-color: #0c4da2;
}
body.fullImage {
	background: #fff;
}

@media (max-width: 767px) {
    body.navigation-is-open {
        overflow-x: hidden;
        background-color: #10218b;
    }
}

#container {
    /*max-width: 940px;*/
	margin: 0 auto;
    /*overflow: hidden;*/
    padding-left: 0;
    padding-right: 0;
}

.container {
    max-width: 940px;
}

/* Larger than mobile (400px)
    phablet (550px)
    tablet (750px)
    desktop (940px)
*/
@media (min-width: 400px) {
    #container {
        width: 100%;
    }
}

/*#container.imagex {
	background: #68abe5 url(/shoponline/common/img/shop_onlinex.gif) no-repeat left top;
}*/

.image {
	background: #073869 url(/common/img/shop_online2.gif) no-repeat left top;
}

#container.image1 {
	background: #c9bb03 url(/common/img/environment.jpg) no-repeat left top;
}

#container.image2 {
	background: #669900 url(/common/img/news.gif) no-repeat left top;
}

#container.image3 {
	background: #669900 url(/common/img/environment.jpg) no-repeat left top;
}

#container.image4 {
	background: #eeeef0 url(/common/img/epsonworld.jpg) no-repeat left top;
}

#container.pos {
	background: #042020 url(/common/img/epson_receipt_printing_bg.jpg) no-repeat left top;
}

#container.pos2 {
	background: #f2f2f2;
}

#container.pro {
	background: #0C0908 url(/common/img/epson_pro_printing_bg.jpg) no-repeat 50% 0;
}

#container.diskproducer {
	background: #0C0908 url(/common/img/epson_pro_printing_bg.jpg) no-repeat 50% 0;
}

#container.diskproducerxxx{
background-color: #686868;
background-image: url(/common/images/bak_business_gradient.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0pt 0pt;
}

/* USER LINKS STARTS */
/* USER LINKS ENDS */

/* HEADER STARTS */
/* HEADER ENDS */

/*
BPAY checkout process page style starts
*/
.bpay-container .red-color {
    color: red;
}

.bpay-container .disclaimer-container p {
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.3em;
}

.bpay-container form fieldset.half-width {
    width: 560px;
    margin: 0 auto;
}

.bpay-container form input[type=text] {
    padding: 15px 0 15px 15px;
    float: left;
    margin-right: 10px;
}

.bpay-container form img {
    width: 10%;
    float: left;
}

.bpay-container form span.earn-points {
    float: right;
    line-height: 50px;
}

.bpay-container form p span.color-grey {
    color: #c1c1c1;
    font-size: 10px;
}

.bpay-container .center {
    text-align: center;
}

.bpay-container form input[type=submit] {
    background-color: #66a9e2;
    color: #ffffff;
    padding: 8px 35px;
    border-radius: 15px;
    font-weight: bold;
}

/*
BPAY checkout process page style ends
*/			

/* Main */

#content {
	width: 100%;
	margin: 0 auto;
	text-align: left;
    /*max-width: 2000px;*/
    max-width: 960px;
}
@media (min-width: 768px) {
    #content {
        border-radius: 7px;
    }
}

@media (max-width: 767px) {
    .container #content.row {
        margin-top: 2%;
    }
}

.width-960 {
    width: 99%;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 1%;
    padding-left: 1%;
}

#content:after {
	content: '';
	display: block;
	clear: both;
}

#main
{
	clear: both;
    /*padding: 8px 0;*/
	background: url(/common/img/main_round_bg.png) no-repeat left top;
}

.single #main 
{
	clear: both;
    padding: 8px 0;
	/*background: url(/common/img/main_round_bg.png) no-repeat left top;*/
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
}

.double #main 
{   
	clear: none;
	/*width: 710px;*/
    /*width: 76%;
	float: right;*/
	/*background-position: -1884px top;*/
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
}

@media (max-width: 767px) {
    .double #main {
        width: 100%;
        /*float: none;*/
    }
}

#mainPage .roundCorner,
.single #mainPage .roundCorner,
#main .roundCorner,
.single #main .roundCorner {
	/*padding-bottom: 13px;
	background: url(/common/img/main_round_bg.png) no-repeat -942px bottom;*/
}

.double #main .roundCorner {
	/*background-position: -2596px bottom;*/
    /*padding: 15px;*/
    padding: 10px 0px;
}

#mainPage .roundInner,
.single #mainPage .roundInner, 
#main .roundInner,
.single #main .roundInner 
{
	margin-top: 0px;
	/*border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	background: #fff url(/common/img/main_round_bg.gif) repeat-x left bottom;*/
}

/* HEROPANE STARTS */

#heroPane {
	margin:10px 0 67px;
}
#heroPaneShort {
	margin:10px 0 35px;
}


.double #heroPane {
	margin-top:0;
	width:710px;
	float:right;
}

#heroMain {
	width: 360px;
	float: right;
}

#heroMain h2 {
	color:#fff;
	font-size:4em;
	line-height:1.2;
	text-transform:uppercase;
}

#heroMain p {
	position: relative;
	margin:10px 0;
	color:#FFF;
	font-size:1.6em;
	font-weight:bold;
	line-height:1.2;
}

#heroPaneShort #heroMain p {
	margin-bottom: -15px;
}

body.grey #heroMain h2,
body.grey #heroMain p {
	color:#4D4D4D;
}

#container .container {
    padding-left: 0;
    padding-right: 0;
}

#container .container .accordion-wrapper .panel-body a {
    font-size: 1.2em;
}

@media (max-width: 767px) {
    #container .container .accordion-wrapper .panel-body a {
        font-size: 1.6em;
    }
}

@media (max-width: 350px) {
    #container .container .accordion-wrapper .panel-body a {
        font-size: 1.8em;
    }
}

#container .row {
    margin-left: 0px;
    margin-right: 0px;
}
#content.row {
    margin: 0 auto;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 5px;
    padding-right: 5px;
}

#container #content #main input[type=checkbox],
#container #content #main input[type=radio] {
    vertical-align: bottom;
}

@media (max-width: 767px) {
    #container #content #main input[type=checkbox],
    #container #content #main input[type=radio] {
        margin: 0px;
        vertical-align: middle;
    }
}

#container #content #main p,
#container #content #main li,
#container #content #main a,
#container #content #main td {
    font-size: 1.0em !important;
    line-height: 145%;
}


@media (min-width: 768px) {
    #container #content #main p,
    #container #content #main li,
    #container #content #main a,
    #container #content #main td {
        font-size: 1.0em;
    }
}

#container #content #main p a,
#container #content #main td a,
#container #content #main h3 a,
#container #content #main li a {
    font-size: 100%!important;
}

div.col-3-right ul li {
    background: transparent url(/img/bullet.gif) 0 0.45em no-repeat;
    display: block;
    padding: 0 0 0.35em 13px;
}

@media (min-width: 768px) {
    #container #left {
        padding-left: 0;
    }
}

#left {
	/*float: left;*/
	/*width: 210px;*/
    /*width: 22%;*/
	font-size: 1.2em;
}

/*@media (max-width: 767px) {
    #left {
        display: none;
        width: 100%;
        float: none;
    }
}*/

#left ul.nav {
    width: 95%;
    border-bottom: 0px;
}

#leftMenu,
.single #leftMenu {
	margin-bottom: 40px;
}

.double #leftMenu {
	margin-bottom: 20px;
}

#leftMenu h3 {
	padding: 9px 10px 8px;
	/*background: url(/common/img/left_menu_bg.png) no-repeat left top;*/
	line-height: 1.2;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+25,eaeaea+59,c9c9c9+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 25%, rgba(234,234,234,1) 59%, rgba(201,201,201,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(234,234,234,1) 59%,rgba(201,201,201,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 25%,rgba(234,234,234,1) 59%,rgba(201,201,201,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.heroNavigation {
	background: url(/common/img/black_60.png);
	font-weight: bold;
}

.heroNavigation ul {
	background: none;
	font-family: Verdana,Arial,sans-serif;
	text-transform: none;
	font-weight: normal;
	font-size: 0.917em;
}

.heroNavigation ul ul {
	font-size: 1em;
}

.heroNavigation li {
	/*width: 210px;*/
	line-height: 1.2;
}

.heroNavigation strong,
.heroNavigation a {
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
}

.heroNavigation a:link,
.heroNavigation a:visited {
	color: #fff;
}

.heroNavigation a:hover {
	text-decoration: none;
	background: #272727;
}

.heroNavigation h4 a {
	background: #252122 url(/common/img/left_menu_header_bg.gif) no-repeat left top;
	padding:6px 20px 6px 10px;
}

.heroNavigation h4 a:hover {
	background: #252122 url(/common/img/left_menu_header_bg.gif) no-repeat left top;
}

.heroNavigation h4.selected a,
.heroNavigation h4.selected a:hover {
	background-position: -210px top;
}

.heroNavigation strong {
	background: #fff;
	color: #000;
}
.heroNavigation strong a {
	margin: -5px -10px;
	background: #fff;
	color: #000;
}

.heroNavigation strong a:link,
.heroNavigation strong a:visited {
	color: #000;
}

.heroNavigation strong a:hover {
	background: none;
	background: #fff;
}

.heroNavigation ul ul strong,
.heroNavigation ul ul a {
	padding-left: 30px;
}

.heroNavigation ul ul strong 
{
    color: #fff;
	background: #272727;
    font-weight:normal;
}

.heroNavigation ul ul strong a {
	margin-left: -30px;
	padding-left: 30px;
}

/* HEROPANE ENDS */

/* FOOTER TEASERS STARTS */
/* FOOTER TEASERS ENDS */

/* BREADCRUMBS STARTS */

.breadCrumbs {
	margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    max-width: 940px;
    padding-left: 8px!important;
}

.breadCrumbs ol,
.breadCrumbs ul {
	overflow: hidden;
	margin-left: 5px;
}

.breadCrumbs li {
	float: left;
	margin-right: 5px;
	text-transform: uppercase;
	font-family: Verdana,Arial,sans-serif;
	color: #fff;
	padding-bottom: 1px;
}

.breadCrumbs a {
	margin-right: 5px;
	text-transform: uppercase;
	color: #fff;
	font-weight: normal;
}

.grey .breadCrumbs li,
.grey .breadCrumbs a,
.breadCrumbs.grey li,
.breadCrumbs.grey a {
	color: #4d4d4d;
}

.white .breadCrumbs li,
.white .breadCrumbs a,
.breadCrumbs.white li,
.breadCrumbs.white a {
	color: #ffffff;
}

.breadCrumbs a:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
    .breadCrumbs a.glyphicon, .breadCrumbs a.visible-xs {
        display: inline-block!important;
        font-size: 97%;
    }
}

/* BREADCRUMBS ENDS */

/*Accordion Starts*/
.panel-heading {
    background-color: #e9edee!important;
}

.panel-title a {
    font-size: 0.7em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .panel-title a {
        font-size: 0.8em;
    }
}

@media (max-width: 350px) {
    .panel-title a {
        font-size: 1em;
    }
}

.panel-title span.icon {
    float: right;
    width: 16px;
    height: 16px;
}

.panel-body li {
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (max-width: 767px) {
    .panel-body li {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

a[aria-expanded="false"] span.icon {
    /*background-image: url("images/ui-icons_444444_256x240.png");*/
    background-image: url("images/ui-icons_ffffff_256x240.png");
    background-position: -15px -128px;
}

a[aria-expanded="true"] span.icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
    background-position: -47px -128px;
}

.panel-group .panel-heading {
    color: #fff!important;
    background-color: #4899d2!important;
    background-image: none;
    filter: none;
}

/*.collapsed span.icon {
    background-image: url("images/ui-icons_444444_256x240.png");
    background-position: -15px -130px;
}*/
/*Accordion Ends*/

/*Epson Icons From epson.com*/
@font-face {
  font-family: 'epson-icons';
  src: url('/shoponline/common/fonts/epson-icons.eot?-9bzojg');
  src: url('/shoponline/common/fonts/epson-icons.eot?-9bzojg#iefix') format('embedded-opentype'), url('/shoponline/common/fonts/epson-icons.woff2?-9bzojg') format('woff2'), url('/shoponline/common/fonts/epson-icons.ttf?-9bzojg') format('truetype'), url('/shoponline/common/fonts/epson-icons.woff?-9bzojg') format('woff'), url('/shoponline/common/fonts/epson-icons.svg?-9bzojg#epson-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  font-family: 'epson-icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-hamburger:before {
  content: "\e800";
}
.icon-down-right-arrow:before {
  content: "\e801";
}
.icon-left-arrow:before {
  content: "\e600";
}
.icon-left-arrow_hover:before {
  content: "\e601";
}
.icon-right-arrow:before {
  content: "\e603";
}
.icon-right-arrow_hover:before {
  content: "\e602";
}
.icon-close:before {
  content: "\e604";
}
.icon-phone:before {
  content: "\e802";
}
.icon-person-headset:before {
  content: "\e803";
}

/*Generic classes to override bootstrap padding */
.no-padding {
    padding: 0;
}

.no-left-padding {
    padding-left: 0;
}

@media (max-width: 767px) {
    .no-gutter-xs-left {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .no-gutter-xs-right {
        padding-right: 0;
    }
}

.totheright {
    text-align: right;
}

/*Bootstrap Modal Styles Override Starts*/
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
    background-color: #ffffff;
}

/*.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 15%;
}*/
.modal {
    top: 40%;
}
/*Bootstrap Modal Styles Override Ends*/
/*Bootstrap Tooltip Styles Override Starts*/
#main #tooltip {
    position: relative;
}

.white-tooltip + .tooltip.top {
    margin-top: -10px;
    opacity: 1;
    padding: 0;
}

.white-tooltip + .tooltip.left {
    opacity: 1;
    margin-top: -10px;
    /*right: 116%;
    left: -515%!important;
    top: 11%!important;*/
    padding: 0;
}

.white-tooltip + .tooltip > .tooltip-inner {
    background-color: #fff;
    color: #000000;
    border: 1px solid #d8d5d5;
    max-width: 320px;
    min-height: 57px;
}

.white-tooltip + .tooltip > .tooltip-inner:before,
.white-tooltip + .tooltip > .tooltip-inner:after {
    display: block;
    content: "";
    position: absolute;
    z-index: -100;
    width: 100%;
    top: 2%;
    bottom: 3%;
    left: -1%;
    box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 200ms ease-out;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #d8d5d5;
    border-width: 15px 15px 0 15px;
    bottom: -24%;
    margin-left: -13px!important;
    /*left: 81%!important;*/
}

.tooltip.left .tooltip-arrow {
    border-left-color: #d8d5d5;
    border-width: 15px 0 15px 15px;
    top: 12px!important;
    left: 100%;
}
/*Bootstrap Tooltip Styles Override Ends*/

/*iPhone Chrome hack*/
@media (max-width: 767px) {
    hidden-xs.desktop {
        display: none;
    }
}
@media (max-width: 767px) {
    option.hidden-xs.desktop {
        display: none;
    }
}

input.new-button,
a.new-button {
    background-color: #689dcf;
    color: #fff!important;
    padding: 9px;
    font-weight: bold;
    vertical-align: bottom;
    border-radius: 3px;
}

a.new-button {
    line-height: 3em;
}

.new-blue-button {
    color: #fff!important;
    padding: 9px;
    font-weight: bold;
    vertical-align: bottom;
    border-radius: 3px;
    border: 0;
    letter-spacing: 0.2em;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2081c6+0,2783ce+48,1f97c6+70,22a4f8+100 */
    background: rgb(32,129,198); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(32,129,198,1) 0%, rgba(39,131,206,1) 48%, rgba(31,151,198,1) 70%, rgba(34,164,248,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(32,129,198,1) 0%,rgba(39,131,206,1) 48%,rgba(31,151,198,1) 70%,rgba(34,164,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(32,129,198,1) 0%,rgba(39,131,206,1) 48%,rgba(31,151,198,1) 70%,rgba(34,164,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2081c6', endColorstr='#22a4f8',GradientType=0 ); /* IE6-9 */
}

.new-blue-button:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#22a4f8+0,1f97c6+30,2783ce+52,2081c6+100 */
    background: rgb(34,164,248); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(34,164,248,1) 0%, rgba(31,151,198,1) 30%, rgba(39,131,206,1) 52%, rgba(32,129,198,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(34,164,248,1) 0%,rgba(31,151,198,1) 30%,rgba(39,131,206,1) 52%,rgba(32,129,198,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(34,164,248,1) 0%,rgba(31,151,198,1) 30%,rgba(39,131,206,1) 52%,rgba(32,129,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22a4f8', endColorstr='#2081c6',GradientType=0 ); /* IE6-9 */
}
#removevar{
  display:none;
}

@media screen and (min-width: 1024px) {
  #setvar, #removevar{
    display:none;
  }
}

.container #main .subscribe-heading {
    margin-bottom: 10px;
    font-size: 1.875em;
    font-weight: normal;
    color: #db4d69;
}
.container #main h2.subscribe-heading {
    font-size: 2.6em;
}
.container #main .subscribe-blue-heading {
    color: #002486;
    margin-bottom: 10px;
    font-size: 1.875em;
    font-weight: bold;
}