/* Default */
body {font-size: 13px;}
a {text-decoration: none; color: #0099cc;}
a:hover {color: #000; text-decoration: none;}
a.btn {color: #FFF;}

a.hover {visibility: hidden;}
*:hover > a.hover {visibility: visible;}

input[type=text], input[type=password], select, textarea {padding: 2px 4px; border-radius: 0; margin: 0; font-size: 13px; height: 24px;}
input[type=text], input[type=password] {height: 20px;}
textarea {height: 72px;}
input[type=checkbox],input[type=radio] {margin: 0;}
label {font-size: 13px;}

h1 {
	font: bold 20px Helvetica, sans-serif; color: #999;
	padding: 14px 0 14px 30px; border-bottom: 1px solid #DDD;
}
h1 small {font-size: 14px;}

td.price, th.price, td.qty, th.qty {text-align: right;}

.hide {display:none;}
.hover {visibility: hidden;}
*:hover > .hover {visibility: visible;}

.justify{
	text-align:justify;
	text-justify:inter-word;
}

.box {border: 1px solid #ddd;}
.box .title {
	border-bottom: 1px solid #ddd;

	background: rgb(236,236,236);
	background: -moz-linear-gradient(top,  rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 );
}

.trans50{ -moz-opacity:0.5 ; filter:alpha(opacity: 0.5); opacity: 0.5; }

/* Bootstrap Fix */

.tooltip.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

.tooltip-inner{
  max-width: none;
}


/* Layout */
.left-side {float: left; width: 200px; margin-right: 10px;}
#body {min-height:680px;}

/* Form */
form .required-indicator {color: #F00; font-size: 16px; font-weight:bold;}
form .validation-failed {background: #FDD; border: 1px solid #F00;}
form .validation-failed + .tooltip .tooltip-arrow{border-right-color: #600;}
form .validation-failed + .tooltip .tooltip-inner{white-space: nowrap; background-color: #600; font-weight: bold;}

/* Gradient BG */
.title.gradient {
	color: #FFF;
	background: #747474; /* Old browsers */
	background: -moz-linear-gradient(top,  #747474 0%, #585858 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#747474), color-stop(100%,#585858)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #747474 0%,#585858 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #747474 0%,#585858 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #747474 0%,#585858 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #747474 0%,#585858 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#747474', endColorstr='#585858',GradientType=0 ); /* IE6-9 */
}
.title.gradient a {color:#FFF;}

/* Table */
table.order-total .total {border-top:1px solid #CCC;}
table.order-total th {text-align: right;}

/* Header */
#header { background: url(../img/bg-header.png) #EEE bottom repeat-x;}
#topbar {padding: 5px 0; font-size: 11px; color: #4894C8;}
#topbar a {font-size: 11px; color: inherit;}
#topbar a:hover {text-decoration: underline;}
#topbar a.first {color: #68B4E8;}

#logo {margin-bottom: 5px;}
#logo a {display: block; text-indent: -9999px;}

#header .ad {position: relative; float: right; height: 88px; width: 560px;}

#header .menu {height: 40px; line-height: 40px; margin:0; padding:0;background: url(../img/menu-bg.png) repeat-x;}
#header .menu li {list-style: none; float:left; margin: 0;}
#header .menu li a {
	background: url(../img/menu-bg.png) repeat-x; border-right: #7e7e7e solid 1px;
	font-size: 13px; font-weight: bold;
	display: inline-block;  height: 32px; line-height: 32px; padding: 4px 10px; color: #FFF;
}
#header .menu li a:hover {background: url(../img/menu-bg-hlt.png);}
#header .account-menu {float: right;}
#header .account-menu li a{background-image: url(../img/menu-bg-bld.png);}

/* Footer */
#page-footer {background: url(../img/bg-footer.png) repeat-x #FFF;}
.slogan { padding-top: 8px; color: #FFF; background: #989797;}
.slogan strong {font-size: 16px; margin: 4px 0;}
.slogan li {list-style: none; border-bottom: 1px solid #DDD; padding: 30px 0;}
.slogan li:last-child {border-bottom: none;}
.slogan li .image {float: left; text-align: center; vertical-align: middle; width: 120px;}
.slogan li .text {margin-left: 130px;}
.slogan td>p{ line-height: 16px; font-size:11px; margin: 0 20px 10px 60px; text-align: left;}

.quicklink {padding: 16px auto; background: #3B3C3C;}
.quicklink .header {color:#4894C8; font-weight: bold;}
.quicklink a {color: #EEE;}
.quicklink ul {margin:0;}
.quicklink li {list-style: none; color:#FFF;}
.quicklink td {vertical-align: top; border-right: 1px solid #DDD; padding: 0 30px;}
.quicklink td:last-child {border: none;}

/* Category Sidebar */
.category {border: 2px solid #F7F7F7; margin-bottom: 10px; padding: 0;}
.category .title {padding: 5px 10px 5px 5px;}
.category ul {margin: 0; padding: 0;}
.category li {list-style: none; margin: 0; padding: 0;}
.category li:hover {background: #EEE;}
.category li.hlt {background: #0099cc;}
.category li.hlt a {color: #FFF;}
.category li a {display: block; padding: 3px 0 3px 10px;}

/* Front page */
.promotion {float: left; width: 220px; height: 200px; margin: 20px 10px; border: 1px solid #EEE;}
.promotion .title {height: 36px; line-height: 36px; background: #FFF; padding-left: 10px;}
.promotion .price-tag {float: right; text-align: right; background: #E0211E; color: #FFF; font-size: 12px; line-height: 14px; padding: 5px;}
.promotion .detail {background: #EEE; width: 100%; height: 164px;}

/* Content Page */
.static_page {padding:0 15px; min-height: 640px;}
.static_page h1 {padding:10px 0; color:#000; font-size:24px;}

/* Product */
.product-detail {margin-right: 210px;}
.product-detail .detail-nav{
	padding: 10px 0 0 10px;
	background: rgb(236,236,236);
	background: -moz-linear-gradient(top,  rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 );
}
.product-detail .detail-nav h1 {float: left; padding: 0px; border: none; font-size: 18px; background: none;}

/* Shopping Cart */
.product .hlt {font-weight: bold; color: #6EBCEC;}

.product dl {margin: 0; padding: 0;}
.product dl dt {
    clear: left;
    float:left;
    font-weight:bold;
    margin-right:10px;
    width:60px;
}
.product dl dd {
    margin-left: 70px;
}

/* Order Status*/
.job-status {color: purple;}
.job-status.onhold {color: red;}
.job-status.shipped {color: green;}

/* Template && Design Card*/
.card {float: left; margin: 20px 0 20px 10px; border: 1px solid #EEE;}
.card .title {background: #6DA0BD; color: #FFF; padding: 3px; text-align: center;}
.card a {color: #FFF; display: block;}
.card .img {padding: 0px;}


.artwork-item {float: left; margin: 10px 5px; background: #F6F6F6; border: 1px solid #EEE; color: #39C; position: relative;}
.artwork-item .title {position: absolute; bottom:0; left:0; right:0; background: #EEE; font-size: 14px; height: 24px; line-height: 24px; font-weight:bold; padding: 10px;}

.design-item {float: left; margin: 10px 5px; background: #F6F6F6; border: 1px solid #DDD; color: #39C;}
.design-item .title{background: #EEE; font-size: 14px; height: 24px; line-height: 24px; font-weight:bold; padding: 10px;}
.design-item .menu {margin:0; background: #888; display: none;}
.design-item .menu li {list-style: none; margin: 0; padding: 0;}
.design-item .menu a {display: block; color: #FFF; padding: 5px;}
.design-item .menu a:hover {background: #666;}
.design-item:hover {background: #AAA; color: #FFF;}
.design-item:hover .menu {display: block;}

/* Template Design Page */
.design-template {margin: 10px 0;}
.design-template h1 {margin:0; border:none; padding:15px; font-size:16px;}
.design-template h1 a {}
.design-template .lightbox {border: 1px solid #999; width: 580px; box-shadow: 1px 1px 3px 1px #DDD;}
.design-template .price-table {}
.design-template .price-table td {color: #BBB; font-size: 12px;}
.design-template .price-table:hover td {color: #444; font-size: 12px;}

.design-template #review-form li {margin: 8px 0;}
.design-template .rating .icon-star-empty {color: #CCC;}
.design-template .rating .icon-star {color: #FFD700;}
.design-template .review {padding: 5px 0; margin: 5px 0; border-top: 1px solid #EEE;}



/* Popular category on homepage */
.card.template > a {display: block; padding: 5px; width: 216px; height: 130px; text-align: center;}
.card.template a.img {display: block; padding: 5px; height: 103px; margin: 10px auto;}

.card.template-category {background: #fafafa; cursor: pointer; font-weight: bold; width: 226px; text-align: center; height: 180px;}
.card.template-category:hover {background: #2D833A;}
.card.template-category .title { font-family: Helvetica, sans-serif;
	background: #f6f6f6; color: green; text-align: left; position: relative;
}
.card.template-category a {padding: 10px; color: #16a968;}
.card.template-category i {color: #16a968; position: absolute; right: 5px; top: 13px;}
.card.template-category img {box-shadow: 1px 1px 4px 0px #DDD;}
.card.template-category:hover .title {
	background: #5a9a58; color: #FFF;
}
.card.template-category:hover a, .card.template-category:hover i {color: #FFF;}

.card.template {border: 1px solid #FFF; padding: 15px 0px; background: #F6F6F6;}
.card.template:hover {background: #EEE; border: 1px solid #DDD;}
.card.template .title {background: none; padding: 5px; margin: 0 10px; font-weight:bold;}

/* Calculator */
.product-calculator {position: absolute; top: 0; right: 0; width: 200px; border: 1px solid #CCC; }
.product-calculator .header {
	background: #F0F0F0; padding: 5px 10px; border-top:1px solid #CCC; border-bottom: 1px solid #CCC; font-size: 14px; font-weight: bold;

	background: rgb(236,236,236);
	background: -moz-linear-gradient(top,  rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 );
}
.product-calculator .header:first-child {font-size: 18px; padding: 10px; border-top: 0;}
.product-calculator .panel {padding: 10px;}
.product-calculator input[type=text] {height: 18px; line-height: 18px; max-width: 170px; }
.product-calculator select {max-width: 180px;}

.product-calculator .more {display: block; text-align: right; cursor: pointer;}
.product-calculator .more:hover {color: navy;}

.price-display {background: #FFD; border: 1px solid #DDD;padding: 5px;}

#size_options .title {padding: 5px 0 10px 0;}
#size_options .title span {
	font-size: 10px; font-weight: bold; color: #999;
	cursor: pointer; padding: 3px;
	border: 1px solid #CCC; border-radius: 3px 3px;
}

#size_options .title span.selected {border: 1px solid #CCC; color: #333; background: #EEE; color: #444;}

#custom_size .left {
	margin: 0 5px; font-size: 11px;
	-webkit-text-size-adjust: none;
}
#custom_size select {width: 70px;}
#custom_size label {display: inline; margin-right: 5px; font-size: 11px; }
#custom_size label input {margin: 0;}
#custom_size td {font-size: 11px;}

#standardSizeWrapper select {width: 150px;}
#standardSizeWrapper {margin-bottom: 10px;}

#shippingRateWrapper .loading {
	float: right; width: 16px; height: 16px; margin-top: 5px;
	background: url(../img/loading.gif) no-repeat;
}

/* Clue */
.clue-dialog-title {background: #1F6888;}


/* File Upload Decorator */
/* Styling a file field, ref: http://www.quirksmode.org/dom/inputfile.html */
.upload_form {position: relative;}
.upload_form input.file {display: block; cursor: pointer; padding:0; margin: 0; width:100%; height: 100%; position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; background: red; z-index: 2;}
.upload_form .fakefile { position: absolute; top: 0px; left: 0px; padding: 0; z-index: 1; cursor: pointer;}

/* Shopping process steps */
.shopping-steps li {display: inline; color: #666;}
.shopping-steps li.sep {padding: 0 4px; color: #CCC;}
.shopping-steps li.current {color: #1F6888; font-weight: bold;}

/* Scroll bar */
.scroll::-webkit-scrollbar { width: 12px; }
.scroll::-webkit-scrollbar-track { background: #DDD; }
.scroll::-webkit-scrollbar-thumb:hover { background: #AAA; }
.scroll::-webkit-scrollbar-thumb { background: #BBB; }