﻿/* ========== PUBLIC ========== */

@font-face {
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Light-webfont.eot');
	src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Light-webfont.woff') format('woff'), url('fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Regular-webfont.eot');
	src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Regular-webfont.woff') format('woff'), url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
	font-weight: normal;
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Semibold-webfont.eot');
	src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Semibold-webfont.woff') format('woff'), url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Bold-webfont.eot');
	src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Bold-webfont.woff') format('woff'), url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
	font-weight: bold;
	font-weight: 700;
	font-style: normal;
}
@font-face {
    font-family: "BYekan";
    src: url('fonts/yekan/yekanweb-regular.eot') format("embedded-opentype"),
		 url('fonts/yekan/yekanweb-regular.woff') format("woff"),
		 url('fonts/yekan/yekanweb-regular.ttf') format("truetype"),
		 url('fonts/yekan/yekanweb-regular.svg') format("svg");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "BYekanNumbers";
    src: url('fonts/yekan/yekannumbers-regular.eot') format("embedded-opentype"),
		 url('fonts/yekan/yekannumbers-regular.woff') format("woff"),
		 url('fonts/yekan/yekannumbers-regular.ttf') format("truetype"),
		 url('fonts/yekan/yekannumbers-regular.svg') format("svg");
    font-style: normal;
    font-weight: normal;
}
@charset "utf-8";
 body {
	margin: 0px;
	padding: 0px;
	background: url(/images/main-bg.jpg) repeat;
}
ul,
li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0px;
	margin: 0px;
}
p {
	margin: 0px;
	padding: 0px;
}
div {
	margin: 0px;
	padding: 0px;
}

div.PriceOff {
    position: absolute;    
    bottom: -18px;    right: -27px;    
    font-size: 17px;    font-weight: bold;    
    color: #6E6B6B;
    background: #FFBB7E;
    border-radius: 61px;
    height: 53px;
    line-height: 54px;
    width: 54px;
    /* padding-left: 5px; */
    box-shadow: 0px 2px 16px #8B8484;
    text-align: center;
}

.offer ul li span.price div {
    float: left;
    margin-right: 10px;
    /* width: 100%; */
    font-size: 11px;
}
a,
a img {
	outline: none;
	border: none;
}

a[href="#TopOfSite"] {
    position: absolute;    top: 0px;    right: 10px;
}
.clear {
	clear: both;
}
/* ========== TOP MENU ========== */

.topMenuContainer {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0px;
	z-index: 999;
}
/* TOP MENU LOGO */

.topMenuLogo {
	width: 12%;
	height: 65px;
	float: left;
	background: #2a3340 url(/images/logo-orange.png) center center no-repeat;
	background-size: 70%;
	position: relative;
}
.topMenuLogo a {
	width: 100%;
	height: 100%;
	position: absolute;
	text-decoration: none;
}
/* TOP MENU CONTACT AND SEARCH */

.topMenuContact {
	width: 88%;
	height: 45px;
	float: left;
	background: #2d3746;
	font: bold 16px Arial , 'BYekan';
}
.topMenuContact ul {
	width: auto;
	display: table;
	float: right;
	padding: 0px 20px;
}
.topMenuContact ul:first-child {
	float: left;
	width: 40%;
}
.topMenuContact ul:last-child {
	padding-right: 0px;
}
.topMenuContact ul li {
	width: auto;
	float: left;
	display: inline;
	color: #fff;
	position: relative;
}
.topMenuContact ul li a span {
	font: normal 12px'Open Sans', 'BYekan';
	color: #fff;
	line-height: 45px;
	float: left;
	padding: 0px 5px;
	opacity: 0.25;
}
.topMenuContact ul li a:hover span {
	opacity: 0.65;
}
.topMenuContact ul li a img {
	float: left;
	padding: 2px;
	margin: 13px 1px;
	opacity: 0.4;
	transition: all 0.3s ease-out;
}
.topMenuContact ul li a:hover img {
	opacity: 1;
}
.topMenuContact ul li img {
	margin: 14px 3px 13px 21px;
}
.topMenuContact ul:first-child li {
	width: 100%;
}
.topMenuContact ul li input[type="search"] {
	width: 90%;
	height: 25px;
	margin: 10px 0px;
	padding: 1px 5px;
	font: normal 12px'Open Sans', 'BYekan';
	color: #969ba3;
	float: left;
	background: #2d3746;
	border: none;
	border-bottom: 1px solid #50576a;
	outline: none;
	transition: all 0.3s ease-out;
}
.topMenuContact ul li input[type="search"]:hover,
.topMenuContact ul li input[type="search"]:focus {
	color: #babec4;
	outline: none;
}
.topMenuContact ul li input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 12px;
	width: 12px;
	padding: 2px;
	background: url(/images/icons/icon-close.png) center right no-repeat;
	opacity: 0.5;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.topMenuContact ul li input[type="search"]::-webkit-search-cancel-button:hover {
	opacity: 1;
}
.topMenuContact ul li input[type="button"] {
	width: 10%;
	max-width: 20px;
	height: 25px;
	background: #2d3746 url(/images/icons/icon-search.png) center left no-repeat;
	margin: 10px 0px;
	float: left;
	border: none;
	border-bottom: 1px solid #50576a;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.topMenuContact ul li input[type="button"]:hover,
.topMenuContact ul li input[type="button"]:focus {
	background: #2d3746 url(/images/icons/icon-search-h.png) center left no-repeat;
}
/* --- TOP MENU LIST --- */

/* MAIN */

.topMenuList {
	width: 88%;
	height: 20px;
	float: left;
	background: #3b414e;
	font: normal 16px'Open Sans', 'BYekan';
}
.topMenuList ul {
	width: auto;
	display: table;
	float: right;
}
.topMenuList ul:first-child {
	float: left;
}
.topMenuList ul li {
	width: auto;
	float: left;
	display: inline;
	color: #fff;
	position: relative;
	background: #3b414e;
	transition: all 0.3s ease-out;
}
.topMenuList ul li a {
	transition: all 0.3s ease-out;
}
.topMenuList ul li:hover a {
	background: #2d3746;
}
.topMenuList ul li ul {
	width: 250px;
	position: absolute;
	top: 45px;
	padding: 0px;
	display: none;
	background: #2d3746;
	transition: all 0.3s ease-out;
	z-index: 100;
}
.topMenuList ul li:hover ul {
	display: block;
}
.topMenuList ul li:hover ul li ul {
	display: none;
}
.topMenuList ul li ul li {
	width: 100%;
	padding: 0px;
	border-bottom: 1px solid #2a3340;
	font: normal 12px'Open Sans', 'BYekan';
}
.topMenuList ul li a {
	color: #fff;
	text-decoration: none;
	line-height: 45px;
	float: left;
	padding: 0px 25px;
	border-left: 1px solid #2d3746;
	border-right: 1px solid #464d5d;
}
.topMenuList ul li a img {
	padding-right: 6px;
	margin: 14px 0px;
	float: left;
}
/* CLASSES */

.topMenuList a.library {
	padding: 0px 15px !important;
	border: none;
}
.topMenuList a.cart {
	border-right: none;
}
.topMenuList a.cart span:last-child {
	font-size: 12px !important;
	font-weight: normal;
	padding-left: 5px;
}
.topMenuList li.corner-left {
	width: 46px;
	background: none;
}
.topMenuList li.corner-left a.line1 {
	width: 46px;
	height: auto;
	padding: 0px !important;
	border: none;
	background: transparent url(/images/corner-left.png) no-repeat;
}
.topMenuList li.corner-right {
	width: 46px;
	background: none;
}
.topMenuList li.corner-right a.line2 {
	width: 45px;
	height: auto;
	padding: 0px !important;
	border-left: none;
	background: transparent url(/images/corner-right.png) no-repeat;
}
.topMenuList ul li:hover a.line {
	background: #3b414e;
}
/* SUB MENU */

.topMenuList ul li ul li a {
	width: 210px;
	color: #fff;
	text-decoration: none;
	line-height: 16px;
	float: left;
	padding: 10px 20px;
	border: none;
}
.topMenuList ul li ul li:hover a {
	background: #2a3340;
}
.topMenuList ul li ul li a span {
	float: right;
}
/* SUB SUB MENU */

.topMenuList ul li ul li ul {
	width: auto;
	position: absolute;
	top: 0px;
	left: 100%;
	padding: 0px;
	padding-left: 1px;
	display: none;
	background: none;
	transition: all 0.5s linear;
}
.topMenuList ul li ul li:hover ul {
	display: block;
}
.topMenuList ul li ul li ul li {
	width: 100%;
	padding: 0px;
	border-bottom: 1px solid #2a3340;
	font: bold 12px Arial , 'BYekan';
}
.topMenuList ul li ul li ul li a {
	width: 200px;
	color: #fff;
	text-decoration: none;
	line-height: 16px;
	float: left;
	background: #2a3340 !important;
	padding: 10px;
	border: none;
}
.topMenuList ul li ul li ul li a:hover {
	background: #2d3746 !important;
}
/* CART */

.topMenuList ul li.cart ul {
	width: 570px;
	height: auto;
	float: right;
	position: absolute;
	right: 0px;
}
.topMenuList ul li.cart ul li {
	width: 100%;
	float: left;
	width: 100%;
	padding: 10px 0px;
	line-height: 60px;
	border-bottom: 1px solid #464d5d;
}
.topMenuList ul li.cart ul li:hover {
	background: #2a3340;
}
.topMenuList ul li.cart ul li span {
	float: left;
	padding-left: 15px;
}
.topMenuList ul li.cart ul li span.bookTitle {
	width: 300px !important;
	height: 60px;
	overflow: hidden;
}
.topMenuList ul li.cart ul li span.bookTitle a {
	padding: 10px 0px;
	line-height: 40px;
	text-decoration: underline;
    background:none;
}
.topMenuList ul li.cart ul li span.bookTitle a:hover {
	text-decoration: none;
}
.topMenuList ul li.cart ul li span.bookPrice {
	color: #f93;
}
.topMenuList ul li.cart ul li img {
	width: 40px;
	height: auto;
	padding-left: 10px;
	margin: 0px;
	float: left;
}
.topMenuList ul li.cart ul li span input[type="number"] {
    width: 50px;
    height: 26px;
    font: normal 12px Arial , 'BYekan';
    text-align: center;
    padding: 0px;
    margin: 20px 0px;
    border: none;
    opacity: 0.85;
    transition: all 0.3s ease-out;
}
.topMenuList ul li.cart ul li span input[type="number"]:hover,
.topMenuList ul li.cart ul li span input[type="number"]:active {
	opacity: 1;
}
.topMenuList ul li.cart ul li span input[type="button"] {
	width: 20px;
	height: 20px;
	margin: 20px 0px;
	border: none;
	cursor: pointer;
	background: transparent url(/images/icons/icon-del-cart.png) center center no-repeat;
	transition: all 0.3s ease-out;
}
.topMenuList ul li.cart ul li span input[type="button"]:hover {
	background: transparent url(/images/icons/icon-del-cart-hover.png) center center no-repeat;
}
.topMenuList ul li.cart ul li span.cartOrder a {
    width: 57px;
    height: 20px;
    margin: 15px 0px;
    font: normal 14px'Open Sans', 'BYekan';
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    background: #3c3;
    border-radius: 5px;
    padding: 5px;
    padding-left: 22px;
}
.topMenuList ul li.cart ul li span.cartOrder a:hover {
	background: #393;
}
/* ========== SLIDER ========== */

.slider {
	width: 100%;
	height: 450px;
	margin-top: 47px;
	background: url(/images/slider-bg.jpg) bottom right no-repeat;
	box-shadow: 0px 0px 10px #666;
}
/* ========== PAGES HEADER & NAVIGATION ========== */

.topHeader {
	width: 100%;
	height: 100px;
	margin-bottom: 2%;
	margin-top: 65px;
	position: relative;
	background-image: url(/images/header/dot-bg.png), url(/images/header/header-bg.png);
	background-position: center top;
	background-repeat: repeat, no-repeat;
	background-size: auto, 100%;
	z-index: 99;
}
.topHeader h1 {
	font: 300 36px'Open Sans', TimesNewRoman;
	line-height: 50px;
	margin-left: 2%;
	float: left;
    margin-top:25px;
}
.topHeader ul {
	width: 100%;
	height: 25px;
	position: absolute;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.25);
}
.topHeader .topColor {
	width: 100%;
	height: 100px;
	position: absolute;
	background-color: rgba(255, 153, 51, 0.75);
	background-image: url(/images/header/dot-bg.png);
	background-repeat: repeat;
}
.topHeader ul li {
	float: left;
	font: normal 12px'Open Sans', 'BYekan';
	color: #000;
	line-height: 25px;
	padding: 0px 2px;
}
.topHeader ul li:first-child {
	margin-left: 2%;
}
.topHeader ul li:last-child {
	padding: 0px 7px;
	color: #333;
}
.topHeader ul li a {
	color: #333;
	text-decoration: underline;
	padding: 1px 5px;
	transition: all 0.3s ease-out;
}
.topHeader ul li a:hover {
	color: #000;
	text-decoration: none;
}
.topHeader ul li span {
	font-size: 14px;
	color: #333;
	cursor: default;
}
/* ========== CAREERS LOGO RIBBON ========== */

.ribbon {
	width: 100%;
	height: 95px;
	background: transparent;
	overflow: hidden;
	position: relative;
	margin-top: -25px;
    z-index:999;
}
.ribbon ul {
	width: 48%;
	height: 95px;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 25%;
	padding-left: 2%;
	background: #3b414e;
}
.ribbon ul:first-child {
	width: 25%;
	height: 70px;
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: 0;
}
.ribbon ul:last-child {
	width: 25%;
	height: 70px;
	position: absolute;
	bottom: 0;
	left: 75%;
	padding-left: 0;}
.ribbon ul:first-child li {
	width: 100%;
}
.ribbon li h2 {
	font: 200 20px 'open sans', 'BYekan';
	color: #fff;
	text-align: center;
	line-height: 90px;
}
.ribbon img.cornerLeft,
.ribbon img.cornerRight {
	width: 25px;
	height: 25px;
	position: absolute;
}
.ribbon img.cornerLeft {
	top: 0;
	left: 25%;
	margin-left: -25px;
}
.ribbon img.cornerRight {
	top: 0;
	left: 75%;
}

.ribbon li {
	width: auto;
	height: 95px;
	float: left;
}

.ribbon ul li a {
	text-decoration: none;
}
.ribbon ul li a img {
    margin: 3px 10px;
    padding: 5px;
    outline: none;
    border: 0px;
    opacity: 0.75;
    transition: all 0.3s ease-out;
    width: 70px;
}
.ribbon ul li a img:hover {
	
}
.ribbon input[type=button] {
	font: normal 14px'Open Sans', 'BYekan';
	color: #fff;
	margin: 20px 0px 18px 75%;
	padding: 7px 20px;
	line-height: 16px;
	background: #3b414e;
	border: 1px solid #fff;
	border-radius: 5px;
	float: left;
	transition: all 0.2s ease-out;
	cursor: pointer;
}
.ribbon input[type=button]:hover {
	background: #fff;
	color: #3b414e;
}

/* ========== CATEGORY ========== */

.category {
	width: 98%;
	height: auto;
	margin-left: 2%;
	overflow: hidden;
}
.category h3 {
	font: normal 18px'Open Sans', 'BYekan';
	color: #2d3746;
	margin-top: 2%;
	text-align: center;
}
.category ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.category ul li {
	position: relative;
}
.category ul li {
	width: 18%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin-right: 2%;
	margin-top: 2%;
	float: left;
	padding: 0px;
	border-radius: 5px;
	transition: all 0.3s ease-out;
}
.category ul li a {
	width: 100%;
	height: 130px;
	overflow: hidden;
	position: relative;
	float: left;
	padding: 0px;
	border-radius: 5px;
	transition: all 0.3s ease-out;
}
.category li img {
	width: 100%;
	height: auto;
	max-height: 150px;
}
.category li p {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -63%;
	margin: 0px;
	padding: 0px;
	background: rgba(42, 51, 64, 0.75);
	transition: all 0.3s ease-out;
}
.category li p:hover {
	bottom: -25%;
}
.category li p span.head {
    width: 90%;
    height: 34%;
    float: left;
    font: bold 16px 'Open Sans', 'byekan';
    color: #fff;
    margin: 0px;
    padding: 2% 5%;
    transition: all 0.3s linear;
    line-height: 16px;
}

.category li p:hover span.head {
	padding-top: 6%;
	padding-bottom: 0px;
}
.category li p span.content {
	width: 90%;
	height: 73%;
	float: left;
	font: normal 14px 'Open Sans' , 'BYekan';
	color: #eee;
	line-height: 16px;
	padding: 0px 5%;
}
.category li div.line {
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0px;
	z-index: 100;
}
/* ========== SUB CATEGORY ========== */

.subCategory {
	width: 75%;
	height: auto;
	padding-left: 2%;
	float: left;
	overflow: hidden;
	border-left: 1px solid #93969c;
}
.subCategory h3 {
	font: bold 16px Arial , 'BYekan';
	color: #2d3746;
	margin-bottom: 2%;
	text-align: center;
}
.subCategory ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.subCategory ul li a {
	width: 18%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin-right: 2%;
	margin-bottom: 2.5%;
	float: left;
	padding: 0px;
	border-radius: 5px;
	transition: all 0.3s ease-out;
}
.subCategory li img {
	width: 100%;
	height: 180px;
}
.subCategory li p {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -75%;
	margin: 0px;
	padding: 0px;
	background: rgba(42, 51, 64, 0.75);
	transition: all 0.3s ease-out;
}
.subCategory li p:hover {
	bottom: -25%;
}
.subCategory li p span.head {
	width: 90%;
	height: 25%;
	float: left;
	font: bold 18px Arial , 'BYekan';
	color: #fff;
	line-height: 40px;
	margin: 0px;
	padding: 0px 5%;
}
.subCategory li p span.content {
	width: 90%;
	height: 75%;
	float: left;
	font: normal 14px Arial , 'BYekan';
	color: #eee;
	line-height: 18px;
	padding: 10px 5%;
}
/* ========== BOOK DETAILE PAGE ========== */

.bookList {
	width: 75%;
	height: auto;
	padding-left: 1%;
	float: left;
	overflow: hidden;
	border-left: 1px solid #93969c;
}
.bookList h3 {
	font: bold 16px Arial , 'BYekan';
	color: #2d3746;
	margin-bottom: 2%;
	text-align: center;
}
.bookList ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.bookList ul li {
	width: 22.5%;
	height: auto;
	font: 200 12px'Open Sans', 'BYekan';
	margin: 1%;
	padding: 0px;
	float: left;
	background: #fff;
	background: -webkit-linear-gradient(#fff, #eee);
	background: -o-linear-gradient(#fff, #eee);
	background: -moz-linear-gradient(#fff, #eee);
	background: linear-gradient(#fff, #eee);
	box-shadow: 0px 2px 5px #ccc;
	border: 1px solid #ccc;
	transition: all 0.3s ease-out;
}
.bookList li a {
	width: 70%;
	height: auto;
	font: normal 12px'Open Sans', 'BYekan';
	line-height: 17px;
	color: #09c;
	text-decoration: none;
	float: left;
	margin: 10% 15%;
	margin-bottom: 5%;
	padding: 0px;
	transition: all 0.3s ease-out;
}
.bookList li a img {
	width: 100%;
	height: auto;
	margin-bottom: 5px;
}
.bookList li a.bookImg {
	height: 100%;
	max-height: 210px;
	overflow: hidden;
}
.bookList li a.bookImg:hover {
	opacity: 0.75;
}
.bookList li a.bookTitle {
	height: 51px;
	overflow: hidden;
	margin: 0px 8%;
	float: left;
}
.bookList li a:hover span {
	text-decoration: underline;
}
.bookList li span.author {
	width: 84%;
	height: 17px;
	overflow: hidden;
	float: left;
	margin: 5px 8%;
}
.bookList li span.year {
	width: 84%;
	font-weight: normal;
	float: left;
	color: #c00;
	margin: 0px 8%;
}
.bookList li button {
	width: 30%;
	height: 25px;
	margin: 5% 35% 7% 35%;
	font: normal 14px'Open Sans', 'BYekan';
	line-height: 20px;
	color: #fff;
	border: none;
	border-radius: 5px;
	background: #3c3;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.bookList li button img {
	width: 12px;
	height: 12px;
	padding-right: 5px;
}
.bookList li button:hover {
	background: #393;
}
/* ========== ADVANCED SEARCH ========== */

.advSearch {
	width: 19%;
	height: auto;
	margin-left: 2%;
	padding-right: 2%;
	float: left;
	overflow: hidden;
}
.advSearch h3 {
	font: 200 18px'Open Sans', 'BYekan';
	font-weight: 200;
	color: #2d3746;
	text-align: center;
	margin-bottom: 5px;
}
.advSearch ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.advSearch ul li {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin-right: 2%;
	margin-top: 0px;
	float: left;
	padding: 0px;
	transition: all 0.3s ease-out;
}
.advSearch ul li span {
	width: 100%;
	float: left;
	font: 200 14px'Open Sans', 'BYekan';
	color: #2d3746;
	margin-bottom: 2px;
}
.advSearch ul li input[type="search"] {
	width: 92%;
	height: 25px;
	margin: 0px 0px 10px 0px;
	padding: 1px 5px;
	font: normal 12px Arial , 'BYekan';
	color: #969ba3;
	float: left;
	background: #fff;
	border: none;
	border-bottom: 1px solid #969ba3;
	outline: none;
	transition: all 0.3s ease-out;
}
.advSearch ul li input[type="search"]:hover,
.advSearch ul li input[type="search"]:focus {
	color: #50576a;
	outline: none;
}
.advSearch ul li input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 12px;
	width: 12px;
	padding: 2px;
	background: url(/images/icons/icon-close2.png) center right no-repeat;
	opacity: 0.5;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.advSearch ul li input[type="search"]::-webkit-search-cancel-button:hover {
	opacity: 1;
}
.advSearch ul li input.searchButton {
	width: 8%;
	height: 25px;
	background: #fff url(/images/icons/icon-search.png) center left no-repeat;
	margin: 0px 0px 10px 0px;
	float: left;
	border: none;
	border-bottom: 1px solid #969ba3;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.advSearch ul li input.searchButton:hover,
.advSearch ul li input.searchButton:focus {
	background: #fff url(/images/icons/icon-search-h2.png) center left no-repeat;
}
.advSearch ul li input.addBtn {
	width: 100%;
	height: 40px;
	font: 200 18px'Open Sans', 'BYekan';
	color: #fff;
	margin: 10px 0px 10px 0px;
	float: left;
	border: none;
	border-bottom: 2px solid #393;
	background: #3c3;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.advSearch ul li input.addBtn:hover,
.advSearch ul li input.addBtn:focus {
	background: #393;
}
.advSearch ul li input.searchBtn {
	width: 100%;
	height: 40px;
	font: 200 18px'Open Sans', 'BYekan';
	color: #fff;
	margin: 10px 0px 10px 0px;
	float: left;
	border: none;
	border-bottom: 2px solid #06f;
	background: #09f;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.advSearch ul li input.searchBtn:hover,
.advSearch ul li input.searchBtn:focus {
	background: #06f;
}
/* ========== SIGN UP ========== */

form.signup {
	width: 95%;
	max-width: 600px;
	height: auto;
	margin: 0px auto;
	margin-top: 65px !important;
	color: #2d3746;
}
form.signup ul {
	width: 100%;
}
form.signup ul li {
	float: left;
	width: 100%;
}
form.signup h2 {
	width: 100%;
	font: 200 30px'Open Sans', 'BYekan';
	text-align: center;
	color: #2d3746;
	padding: 20px 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #a7abb4;
}
form.signup span {
	width: 100%;
	font: 500 14px'Open Sans', 'BYekan';
	line-height: 16px;
	float: left;
	padding: 10px 0px 5px 1px;
}
form.signup input {
	width: 96%;
	height: 25px;
	font: normal 14px'Open Sans', 'BYekan';
	float: left;
	padding: 3px 2%;
	margin: 0px 2% 5px 0px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
form.signup input[type="button"] {
	width: 100%;
	height: auto;
	font: normal 18px'Open Sans', 'BYekan';
	color: #fff;
	float: left;
	padding: 10px 0px;
	margin: 15px 0px 25px 0px;
	background: #3c3;
	background: #3c3;
	border: none;
	border-bottom: 3px solid #393;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
form.signup input[type="button"]:hover,
form.signup input[type="button"]:focus {
	background: #393;
	outline: none;
}
form.signup select {
	width: 29%;
	height: 33px;
	font: normal 14px'Open Sans', 'BYekan';
	float: left;
	padding: 5px 2%;
	margin: 0px 2% 5px 0px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
form.signup label {
	font: normal 14px'Open Sans', 'BYekan';
	float: left;
	line-height: 20px;
}
form.signup label a {
	color: #09f;
}
form.signup label a:hover {
	text-decoration: none;
}
form.signup #firstName,
form.signup #lastName {
	width: 44%;
}
form.signup #lastName {
	float: right;
	margin: 0px 0px 5px 0px;
}
form.signup #password,
form.signup #repassword {
	width: 44%;
}
form.signup #repassword {
	float: right;
	margin: 0px 0px 5px 0px;
}
form.signup span.emailNote {
	font: normal 12px'Open Sans', 'BYekan';
	color: #666;
	padding: 0px 0px 5px 1px;
}
form.signup span.catNote {
	font: normal 12px'Open Sans', 'BYekan';
	color: #666;
	padding: 0px 0px 5px 1px;
	margin-bottom: 10px;
}
form.signup span.orangeSignin {
	text-align: center;
	padding-top: 3%;
	border-top: 1px solid #a7abb4;
}
form.signup span.orangeSignin a {
	color: #09f;
}
form.signup span.orangeSignin a:hover {
	text-decoration: none;
}
form.signup #birthDay,
form.signup #birthYear {
	width: 28.5%;
}
form.signup #birthYear {
	margin: 0px 0px 5px 0px;
	float: right;
}
form.signup input[type="radio"],
form.signup input[type="checkbox"] {
	width: 15px;
	height: 20px;
}
form.signup #female {
	margin-left: 30px;
}
form.signup #city,
form.signup #mainStreet,
form.signup #subStreet,
form.signup #ally,
form.signup #subAlly,
form.signup #number,
form.signup #ring,
form.signup #postCode,
form.signup #phone,
form.signup #fax {
	width: 44%;
}
form.signup #mainStreet,
form.signup #ally,
form.signup #number,
form.signup #postCode,
form.signup #fax {
	float: right;
	margin: 0px 0px 5px 0px;
}
form.signup #degree {
	width: 100%;
}
/* ========== LOG IN ========== */

form.login {
	width: 95%;
	max-width: 600px;
	height: auto;
	margin: 0px auto;
	margin-top: 65px !important;
	color: #2d3746;
}
form.login ul {
	width: 100%;
}
form.login ul li {
	width: 49%;
	float: left;
}
form.login ul li:first-child {
	margin-right: 2%;
}
form.login ul li:last-child {
	width: 100%;
}
form.login h2 {
	width: 100%;
	font: 200 30px'Open Sans', 'BYekan';
	text-align: center;
	color: #2d3746;
	padding: 20px 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #a7abb4;
}
form.login span {
	width: 100%;
	font: 500 14px'Open Sans', 'BYekan';
	line-height: 16px;
	padding: 10px 0px 5px 1px;
}
form.login li.forgotten,
form.login li.forgotten a {
	width: 100%;
	font: normal 14px'Open Sans', 'BYekan';
	text-align: center;
	color: #09f;
	margin-top: 1%;
	margin-bottom: 3%;
	padding: 5px 0px;
	clear: both;
}
form.login input {
	width: 96%;
	height: 25px;
	font: normal 14px'Open Sans', 'BYekan';
	float: left;
	padding: 3px 2%;
	margin: 0px 2% 0px 0px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
form.login input[type="button"] {
	width: 100%;
	height: auto;
	font: 500 14px'Open Sans', 'BYekan';
	color: #fff;
	padding: 7px 0px;
	margin: 4% 0px 0px 4%;
	background: #09f;
	border: none;
	border-bottom: 3px solid #09c;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
form.login input[type="button"]:hover,
form.login input[type="button"]:focus {
	background: #09c;
	outline: none;
}
form.login label {
	font: normal 14px'Open Sans', 'BYekan';
	float: left;
	line-height: 20px;
	margin-top: 6%;
}
form.login label a {
	color: #09f;
}
form.login label a:hover {
	text-decoration: none;
}
form.login input[type="checkbox"] {
	width: 15px;
	height: 20px;
	margin-top: 6%;
}
form.login li:last-child {
	text-align: center;
	padding-top: 3%;
	border-top: 1px solid #a7abb4;
}
form.login span.orangeSignup {
	font: 200 14px'Open Sans', 'BYekan';
	line-height: 16px;
	padding: 10px 0px 5px 1px;
}
form.login span.orangeSignup a {
	font: 200 14px'Open Sans', 'BYekan';
	color: #09f;
}
form.login span.orangeSignup a:hover {
	text-decoration: none;
}
/* ========== TERMS AND AGREEMENTS ========== */

.terms {
	width: 90%;
	max-width: 600px;
	overflow: hidden;
	padding: 0px 5%;
	height: auto;
	margin: 0px auto;
}
.terms h2 {
	width: 100%;
	font: 200 30px'Open Sans', 'BYekan';
	text-align: left;
	color: #2d3746;
	padding: 20px 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #a7abb4;
}
.terms ul {
	width: 100%;
	font: 500 14px'Open Sans', 'BYekan';
	color: #2d3746;
	margin-top: 10px;
}
.terms ul li {
	width: 95%;
	float: left;
	margin-left: 18px;
	margin-bottom: 10px;
	list-style: outside disc;
}
.terms ul li ul li {
	font-weight: normal;
	list-style: outside circle;
	margin-bottom: 5px;
}
.terms ul li ul li ul li {
	list-style: outside square;
}
.terms ul li span {
	font-weight: 500;
}
.terms ul li img {
	width: auto;
	height: 20px;
	padding-right: 7px;
}
/* ========== BOTTOM MENU ========== */

.bottomMenu {
	width: 100%;
	height: auto;
	float: left;
	background: #2d3746;
	margin-top: 1.5%;
	padding-bottom: 20px;
}
.bottomMenu ul {
	width: 15%;
	height: auto;
	float: left;
	margin-top: 25px;
	margin-right: 2%;
}
.bottomMenu ul:first-child {
	width: 27%;
	margin-left: 2%;
}
.bottomMenu ul li,
.bottomMenu ul li a {
	width: 100%;
	height: auto;
	font-size: 12px ;
    font-family: 'Open Sans' , 'BYekan';
	color: #ddd;
	text-decoration: none;
	padding: 5px 0px;
}
.bottomMenu ul li a:hover {
	color: #fff;
	text-decoration: underline;
}
.bottomMenu ul li img {
	width: 120px;
	height: auto;
}
.bottomMenu ul li:first-child {
	font: bold 13px Arial , 'BYekan';
	color: #f28628;
}
.bottomMenu li.bottomMenuInfo {
	font: bold 13px Arial , 'BYekan';
	color: #fff;
	padding-bottom: 0px !important;
}
/* ========== BOTTOM PAGE & COPYRIGHT ========== */

.bottomPage {
	width: 100%;
	height: auto;
	float: left;
	background: #2a3340;
	padding-bottom: 20px;
}
.bottomPage ul {
	width: auto;
	height: auto;
	float: left;
	margin: 20px 2% 0px 2%;
}
.bottomPage ul:last-child {
	float: right;
}
.bottomPage ul li {
	width: auto;
	height: auto;
	font: normal 12px 'Open Sans' , 'BYekan';
	color: #9599a0;
	float: left;
	border-right: 1px solid #999;
	padding: 0px 15px;
}
.bottomPage ul li a {
	color: #9599a0;
	text-decoration: none;
	padding: 10px 0px;
	border-right: none;
	transition: all 0.3s ease-out;
}
.bottomPage ul li a:hover {
	color: #eee;
}
.bottomPage ul li:first-child {
	padding-left: 0px;
}
.bottomPage ul li:last-child {
	border-right: none;
}
/* ========== RESPONSIVE ========== */

/* large screen */

/* ---------- desktop ---------- */

@media only screen and (min-device-width: 1824px) {
	/* Styles */
}
/* ---------- wide screen ---------- */

@media only screen and (max-width: 1224px) {
	/* Styles */
}
@media only screen and (max-width: 1180px) {
	.category li p span.head {
		font: 500 14px'Open Sans', 'BYekan';
	}
	.bottomPage ul {
		margin: 20px 0px 0px 20%;
	}
	.bottomPage ul:last-child {
		float: left;
		margin-left: 22%;
	}
}
/* ---------- normal screen ---------- */

@media only screen and (max-width: 1024px) {
	.category ul li {
		width: 23%;
	}
	.category li p span.head {
		font: bold 18px'Open Sans', 'BYekan';
	}
}
/* ---------- tablet landscape ---------- */

@media only screen and (max-width: 961px) {
	.ribbon h2 {
		margin-left: 5%;
	}
	.ribbon ul {
		width: 60%;
	}
	.ribbon input[type=button] {
		margin-right: 5%;
	}
}
@media only screen and (max-width: 900px) {
	.category li p span.head {
		font: 500 14px'Open Sans', 'BYekan';
	}
}
/* for top menu  */

@media only screen and (max-width: 850px) {
	.topMenuList a.help span,
	.topMenuList a.signup span {
		display: none;
	}
}
/* ---------- tablet portrait ---------- */

@media only screen and (max-width: 768px) {
	.category ul li {
		width: 31.3%;
	}
	.category li p span.head {
		font: bold 18px'Open Sans', 'BYekan';
	}
	.ribbon ul {
		width: 55%;
	}
	.bottomPage ul {
		margin: 20px 0px 0px 13%;
	}
	.bottomPage ul:last-child {
		float: left;
		margin-left: 15%;
	}
	.topMenuContact ul:last-child {
		display: none;
	}
	.topMenuList a.login span {
		display: none;
	}
}
/* for top menu */

@media only screen and (max-width: 670px) {
	.topMenuList a.cart span {
		display: none;
	}
	.category li p span.head {
		font: 500 14px'Open Sans', 'BYekan';
	}
}
/* ---------- smartphone landscape ---------- */

@media only screen and (max-width: 481px) {
	.topMenuList a.library span {
		display: none;
	}
}
/* ---------- smartphone portrait ---------- */

@media only screen and (max-device-width: 320px) {
	/* Styles */
}


.SignupLink{
    width: 100%;
    font: normal 14px'Open Sans', 'BYekan';
    text-align: center;
    color: #09f;
    margin-top: 1%;
    margin-bottom: 3%;
    padding: 5px 0px;
    clear: both;
}