/* CSS Document */

html, body {
	padding:0;
	margin:0;
	width:100%;
    height:100% /* added */
	display:block;
	font-family: sans-serif !important;  
/*  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; */
/*	font-family:"Times New Roman", serif;*/
	font-size:14px;
    
    background-repeat: repeat;
    background-image: url(../images/_bg_layer_0.png);
    background-blend-mode: normal;
    
/*	background:url(../images/new_bg.jpg) repeat;*/
}

h1 {
/*    font-size:30px !important;  */
    font-size:2.5rem !important;
}

h2 {
/*    font-size:25px !important;*/
        font-size:2rem !important;
}

h3 {
    font-size:20px !important;
}

#wrapper {
	width:100%;
	display:block;
	text-align:center;
	padding:0;
	margin:0;
}

#header, #nav, #content, #footer {
	display:block;
	float:left;
	padding:0;
	margin:0;
	width:100%;
}

.container {
	width:100%;
	max-width:1200px;
    background: white;
}

.newcontainer {
    padding:2% 5% 2% !important;
    background: white;
    border-radius: 10px;
}
.newcontainerOrder {
    padding:0 5% 2% !important;
    background: white;
    border-radius: 10px;
}

hr {
	border:none;
	height:2px;
	float:left;
	display:block;
	width:100%;
}
.line {
	border-top:1px solid #cccccc;
	width:100%;
}

.success {
	border-radius:10px;
	background:CornflowerBlue;
	font-weight:bold;
	color:#ffffff;
	margin:1%;
}
.failed {
	border-radius:10px;
	background:#B42E30;
	font-weight:bold;
	color:#ffffff;
	margin:1%;
}

#content section, #footer section {
	background:#ffffff;
}

.right {float:right;}
.left {float:left;}

/* HEADER ============================================ */

#logo {
	display:block;
	padding:1% 0%;
	width:40%;
}

#accountbar {
	background:black;  /*rgba(0,0,0,0.5);*/
	border-radius:0 0 5px 5px;
	color:#eeeeee;
	display:block;
	padding:1% 1%;
/*	width:40%;*/
}
#accountbar a {
	color:#79D0F1;
	font-size:14px;
    text-decoration: none;
}

#accountbar a:hover {
    color:white;
    text-decoration: none;
}

#header {
/*	background:#1c4f78; */
    /*#184569;*/
}


/* NAV ============================================ */

a {
    text-decoration:none !important;
}

a:hover {
    text-decoration:none !important;
}

#nav {
/*	border-top:1px solid rgba(255,255,255,0.1);*/
/*	background:#1c4f78;*/
/*	border-bottom:1px solid #184569;*/
    padding: 20px 0 20px; /* added */
    z-index:1000;
}

.orderNav:hover {
    color: white !important;
}

#menu {
	width:100%;
	display:block;
	padding:0;
	margin:0;
	list-style:none;
	float:left;
}
#menu li {
/*	border-right:1px solid rgba(255,255,255,0.1);*/
	padding:0;
	margin:0;
	list-style:none;
	display:inline-block;
/*	float:left;*/
/*	position:relative;*/
}
#menu li:first-child {
/*	border-left:1px solid rgba(255,255,255,0.1);*/
}
#menu li:hover {
/*	background:rgba(255,255,255,0.1);*/
/*	border-right:1px solid rgba(255,255,255,0.0);*/
}
#menu li:first-child:hover {
/*	border-left:1px solid rgba(255,255,255,0.0);*/
}
#menu li a {
	display:block;
	padding:7px 23px;
	color:#ffffff;
	text-decoration:none;
/*    font-size: 120%;*/
}

#menu li a:hover {
	display:block;
	padding:7px 23px;
	color:palegoldenrod;
	text-decoration:none;
/*    font-size: 120%;*/
}

#menu li ul {
	display:none;
	padding:0;
	margin:0;
	width:120px;
	position:absolute;
	top:30;
	left:-30;
	z-index:9999;
/*	background:#1c4f78;*/
}
#menu li ul li {
	border-right:none;
    background-repeat: repeat;
    background-image: url(../images/shadowfade.png);
}

#menu li ul li {
/*    background:#1c4f78;*/
    border-right:1px solid palegoldenrod;
    border-bottom:1px solid palegoldenrod; 
    border-radius:5px; 
    box-shadow:0px 5px 5px 0px grey;
}

#menu li ul li a {
	display:block;
	width:auto;     /*74px;*/
	padding:7px;    /*7px 23px;*/
	color:#ffffff;
	text-decoration:none;
    text-align: center;
    font-size: 100%;
}
#menu li ul li a:hover {
	display:block;
	width:auto;     /*74px;*/
	padding:7px;    /*7px 23px;*/
	color:palegoldenrod;
	text-decoration:none;
    text-align: center;
    font-size: 100%;
}

#menu li:hover ul {
	display:block;
}

/* CONTENT ============================================ */

.productImg {       /*New added*/
    box-shadow:5px 5px 10px grey;
}
.product {
	border-radius:5px;
	background:#b5c5d4;
}
.product.added {
background:PaleGoldenRod; /*#89BA92;*/
}
.product h1 {
	height: 21%;
    font-size:200% !important;
    font-weight: bold;
}
.product h2 {
    font-size:150% !important;
    font-weight: bold;
}
.productCtr {
	text-align: center;
}
.prodTopPadLc {
	padding-top:37px;
}
.prodTopPadMq {
	padding-top:30px;
}
.change-border {
	margin:5px 0px;
	background:#eeeeee;
	padding:10px;
}
.legend {
	display:block;
	width:16px;
	height:16px;
	margin:0px 3px;
	float:left;
	vertical-align:middle;
}

/* FOOTER ============================================ */

#footer section {
/*	border-top:#f1f1f1 solid 1px;*/
    color:white;
}

/* TABLES ========================================== */

.list {
	border:2px solid #ffffff;
}
.list thead {
	background:#d9e0e7;
	
}
.list th {
	padding:5px;
	border-bottom:solid 1px #d9e0e7;
}
.list tr td{
	border-bottom:1px dotted #d9e0e7;
	padding:5px;
}
.list tr:nth-child(even) {
	background:#f1f1f1;
}

.list th a {
	color:#000000;
	text-decoration:none;
	padding-right:20px;
	background:url(../images/sort.png) no-repeat right;
}
.list th a.active {
	background:url(../images/sort-active.png) no-repeat right;
}

.list tr.rush td {
	background:#F1B4B5;
}


.orderflow {
	width:100%;
}
.orderflow td {
	width:25%;
	padding:0%;
	background:#E1E1E1;
	font-size:14px; 
	font-weight:bold;
	color:#000000;
	text-align:center;
	line-height:30px;
}
.orderflow td a {
	text-decoration:none;
	color:#000000;
	background:CornflowerBlue;
	width:100%;
	display:block;
}




/* TYPOGRAPHY ====================================== */

.button {
	display:inline-block;
	padding:8px 16px;
	margin:0px 15px 15px 15px;
	background:CornflowerBlue;
	border:none;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
	border-radius:5px;
	color:#ffffff;
	text-decoration:none;
	font-size:14px;
    font-family: sans-serif  !important;
/*	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;*/
	cursor:pointer;
}
.button:hover {
	display:inline-block;
	padding:8px 16px;
	margin:0px 15px 15px 15px;
	background:CornflowerBlue;
	border:none;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
	border-radius:5px;
	color:white;
	text-decoration:none;
	font-size:14px;
    font-weight: bold;
    font-family: sans-serif  !important;
/*	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;*/
	cursor:pointer;
}

.button.small {
	margin:1px 0px;
    font-size: 85%;
    padding: 8px 16px;
}
.button.small:hover {
	display:inline-block;
	padding:8px 16px;
	margin:1px 0px;
	background:CornflowerBlue;
	border:none;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
	border-radius:5px;
	color:white;
    font-weight: bold;
	text-decoration:none;
	font-size: 85%;
    font-family: sans-serif  !important;
/*	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;*/
	cursor:pointer;
}

.buttonres {
    background: tomato;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
    border-radius: 5px;
    padding: 9px;
    margin-left: 70px;
    color: white;
}
.buttonres:hover {
    background: tomato;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
    border-radius: 5px;
    padding: 9px;
    margin-left: 70px;
    color: white;
    font-weight: bold;
}

label {
	display:block;
	margin-bottom:8px;
	font-weight:bold;
}

input[type='text'], input[type='password'], textarea {
	padding:6px;
	font-weight:normal;
	font-size:14px; 
	border-radius:3px;	
	border:1px solid #cccccc;
	margin:3px 0px;
	width:90%;
}

/*Start Input textbox transition*/
/*
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 90%;
}
*/
/*End Input textbox transition

.error {
	border:1px solid #B42E30 !important;
	padding-left:5px !important;
}

select {
	margin:12px 5px;
	padding:6px;
	border:1px solid #bbbbbb;
	border-radius:3px;
	color:#333333;
	font-size:14px;
	display:block;
}
.inline {
	display:inline-block !important;
}

p {
	color:#333333;
	line-height:22px;
}

.pricefont {
	font-size:18px;
}



/* MESSAGE BOARD =================================== */

.message {
	border-radius:5px;
	padding:2%;
	background:#f1f1f1;
	width:96%;
	display:block;
	margin:3px 0px;
}


/* FILE UPLOAD ===================================== */

.dragandrophandler {
	border:2px dotted #0B85A1;
	width:89%;
	color:#92AAB0;
	text-align:center;vertical-align:middle;
	padding:5%;
	margin-bottom:10px;
	font-size:200%;
	display:block;
}
#dragandrophandler {
	border:2px dotted #0B85A1;
	width:89%;
	color:#92AAB0;
	text-align:center;vertical-align:middle;
	padding:5%;
	margin-bottom:10px;
	font-size:200%;
	display:block;
}
.dragandrophandler small {
	font-size:50%;
}
#dragandrophandler small {
	font-size:50%;
}

.statusbar {
	display:table-cell;
	width:96%;
	float:left;
	padding:2%;
	margin-bottom:5px;
	border-bottom:1px solid #cccccc;
	vertical-align:middle;
}

.filename, .filesize {
	float:left;
	margin-top:6px;
	margin-right:15px;
}
.progressBar {
	float:left;
	width:100%;
	background:#eeeeee;
	height:4px;
	display:block;
	margin-bottom:3px;
}
.progressBar div {
	background:#1c4f78;
	display:block;
	float:left;
	height:4px;
}
.abort, .remove {
	float:right;
	display:inline-block;
	padding:8px 16px;
	margin:1px 0px;
	background:CornflowerBlue; /*#1c4f78;*/
	border:none;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
	border-radius:5px;
	color:#ffffff;
	text-decoration:none;
	font-size:14px;
    font-family: sans-serif !important;
/*	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;*/
	cursor:pointer;
}
.abort:hover, .remove:hover {
	float:right;
	display:inline-block;
	padding:8px 16px;
	margin:1px 0px;
	background:CornflowerBlue; /*#1c4f78;*/
	border:none;
    border-right:1px solid DarkGrey;
    border-bottom:1px solid DarkGrey;
	border-radius:5px;
	color:#ffffff;
	text-decoration:none;
	font-size:14px;
    font-weight: bold;
    font-family: sans-serif !important;
/*	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;*/
	cursor:pointer;
}

/*Placeholder text*/
::placeholder {opacity: .25;}
:-ms-input-placeholder {opacity: .25 } /* IE 10-11 */
::-ms-input-placeholder  {opacity: .25 } /* MS Edge */


/* ................ Radio Button Below ............. */
/* The containerXradio */
.containerXradio {
    display: block;
    position: relative;
/*    padding-left: 35px;*/
/*    margin-bottom: 35px;*/
    cursor: pointer;
/*    font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*lable bottom margin*/
.margbot {
    margin-bottom: 35px;
}

.margbot img {
    height: 168px;
}

/* Hide the browser's default radio button */
.containerXradio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
/*    top: 0;*/
/*    left: 0;*/
    height: 20px;
    width: 20px;
    background: lightgrey;
    border-radius: 50%;
    border: 1px solid grey;
}

/* On mouse-over, add a grey background color */
.containerXradio:hover input ~ .checkmark {
    background-color: #2E86C1;
}

/* When the radio button is checked, add a blue background */
.containerXradio input:checked ~ .checkmark {
    background-color: #2E86C1;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerXradio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.containerXradio .checkmark:after {
 	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

/* RESPONSIVE GRID =================================== */

section {
	width:100%;
	display:block;
	float:left;
	padding:0;
	margin:0;
}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
	margin:.5% 1%;
	padding:.5% 1%;
	float:left;
	display:inline-block;
}
.span1 {width:4.33%;}
.span2 {width:12.66%;}
.span3 {width:23%;}
.span4 {width:31.33%;}
.span5 {width:37.66%;}
.span6 {width:46%;}
.span7 {width:54.33%;}
.span8 {width:62.66%;}
.span9 {width:71%;}
.span10 {width:79.33%;}
.span11 {width:87.66%;}
.span12 {width:98%;}

@media screen and (max-width: 700px) {
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		width:98%;	
	}
}

@media screen and (max-width: 1000px) {
  .container {border-left:none;border-right:none;}
}

/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (min-device-width : 1025px) and (max-device-width : 3000px)  {
body { min-width: 1025px; max-width: 3000px; }
  .main { width: auto !important; margin: 0 !important; }
  .mobileOff {display: block !important;}
  .mobileOn {display: none !important;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
  body { min-width: 768px; max-width: 1024px; }
  .main { width: auto !important; margin: 0 !important; }
    /*Set Carosel Image block width smaller*/
  .mobileOff {display: block !important;}
  .mobileOn {display: none !important;}
}
@media only screen and (max-device-width : 767px)  {
  body { min-width: 601px; }
  .mobileOff {display: none !important;}
  .mobileOn {display: block !important;}
  .newcontainer {height: auto !important;}
  iframe.productImg {width: auto !important; height: auto !important;}
  .copyInfo {width: 100% !important;}
  .list {background: white;}
    
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {width:98%;}
  #header, #nav, #content, #footer {width:90%;}
  .table {width:98% !important;}
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;border: none !important;
  /*Set Carosel Image block width smaller*/
  .carousel-inner>.item>div {float: left; width: 100% !important;}
  .carousel-inner>.item>div, .carousel-inner>.item>div>div {text-align: center !important; text-align: -webkit-center !important;}
  .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img  {width: 275px; margin-bottom: 5%;}
  .carousel-inner>.item>div, .carousel-inner>.item>div>div>div>div {margin:-3% 0 15%;}
}
@media only screen and (max-device-width : 600px) {
  body { min-width: 420px; }
  .mobileOff {display: none !important;}
  .mobileOn {display: block !important;}
  .newcontainer {height: auto !important;}
  iframe.productImg {width: auto !important; height: auto !important;}
  .copyInfo {width: 100% !important;}
  .list {background: white;}
    
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {width:90%;}
  #header, #nav, #content, #footer {width:90%;}
  .table {width:98% !important;}
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;border: none !important;
  /*Set Carosel Image block width smaller*/
  .carousel-inner>.item>div, .carousel-inner>.item>div>div {float: left; width: 100% !important; text-align: center !important; text-align: -webkit-center !important;}
  .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img  {width: 275px;}
  .carousel-inner>.item>div, .carousel-inner>.item>div>div>div>div {margin:-3% 0 20%;}
}