* {
	padding: 0;
	margin: 0;
}

* .inputs {
	width: 300px;
	display: block;
	position: relative;
	padding: 10px;	
	border: 2px solid #2c3e50;
	border-radius: 10px;
	font-family: 'Open Sans','arial', sans-serif;
	outline: none;
}

* .buttons {
	width: 100px;
	padding: 10px;
	background: #8e44ad;
	border: none;
	border-radius: 5px;
	color: #333;
	font-family: 'Open Sans','arial', sans-serif;
	font-weight: 300;
	outline: none;
	
	-webkit-transition: background .25s ease;
	-moz-transition: background .25s ease;
	transition: background .5s ease;
}

* .buttons:hover {
	cursor: pointer;
	background: #ccc;
	color: #fff;
}

* a {
	outline: none;
	text-decoration: none!important;
}

body {
	/*background: #7f8c8d;*/
	min-width: 320px;
	background: #fff;
	font-family: 'Open Sans','tahoma', sans-serif;
	font-size: 14px;
	font-weight: normal;
	-webkit-font-smoothing: antialiased !important;
}

@font-face {
	font-family: 'Ube';
	src: url('../fonts/Ube.ttf') format('truetype');
}


/*Login Form Style*/
#login_form {
	max-width: 500px;
	width: 100%;
	height: 400px;
	min-height: 350px;
	background: transparent;
	border: 3px solid #8e44ad;
	border-radius: 10px;
	text-align: center;
	color: #FFF;
	/*box-shadow: 0 0 10px #333;*/
	position: absolute;
	margin: auto;
	right: 0;
	left: 0;
	top: 150px;
}

#login_form form {
	margin: 20px;
}

#login_form h1 {
	font-family: 'Raleway',sans-serif;
	font-size: 50px;
	font-weight: 300;
	color: #333;
	margin-top: 20px;
}

#login_form p {
	color: #222;
}

#login_form .inputs {

	border: 2px solid #8e44ad;
	clear: both;
	border-radius: 25px;
	width: 55%;
	margin-left: 20%;
	margin-right: 25%;
	margin-top: 10px;
	color:#8e44ad;
}

#login_form .buttons {
	margin-top: 50px;
	color:#fff;
	font-size: 14px;
	font-weight: bold;
	border-radius: 25px;
	width: 40%;
	margin-left: auto;

	margin-right: 5px;
}



#userLogin {
	width: 100%;
	min-height: 100px;
	position: relative;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}

#userLogin select {

	width: 55%;
	display: block;
	height: 35px;
	font-family: 'Open Sans', sans-serif;
	outline: none;
	margin:5px 20% 5px 20%;



}

#selUser::selection,#selUser,#selLoc,#selLoc::selection,#payment-type,#payment-type::selection{
	text-color:#000!important;
	color: #000!important;
	background-color: #d3bada;
	border: 1px solid #8e44ad;
	border-radius:20px;
	padding:5px;
}


#payment-type{
	margin-top:5px;
	width: 50%;
	outline:0;
}

#userLogin span {
	color: #222;
	margin: 5px;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
}

#userLogin .siteList {
	width: 100%;
}

#userLogin .userIdList {
	float: right;
	width: 40%;
}
/*navigation*/
#nav {
	width: 100%;
	height: 50px;
	background: #333;
	position: fixed;
	top: 0;
	z-index: 100;
}

#nav .logo_box {
	min-width: 200px;
	height: 40px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	margin-left: 20px;		
	text-align: center;
	float: left;
}

#nav .logo_box a {
	text-decoration: none;
	font-weight: 600;			
	font-size: 45px;
	font-family: 'Ube',sans-serif; 	
	color: #8e44ad;
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

	/*vertical-align: middle;*/
}

#nav .logo_box img {
	vertical-align: middle;
	position: relative;
	margin-right: 5px;
	width: 140px;
	height: 40px;
}

#nav .logo_box a span {
	color: #fff;
	font-weight: 400;

}

#menu {
	float: right;
	display: table;
	margin-right: 20px;
}

#menu ul {
	list-style: none;
	display: table-cell;
	vertical-align: middle;
	height: 50px;
}

#menu ul li {
	display: inline-block;
}

#menu ul li a {
	color: #fff;
	margin: 10px;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: bold;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}

#menu ul li a:hover {
	color: #8e44ad;
}

#menu ul li a i {
	margin-left: 10px;
}

#userBox {
	display: table;
	width: 100%;
}

#userBox a {
	display: table-cell;
	vertical-align: middle;
	text-decoration: none;
	color: #FFFFFF;
}

#userBox a h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	font-weight: 400;
}

#userBox a span {
	color: #b686ca;
	font-size: 12px;
	text-transform: capitalize;
	position: relative;

}
#userBox p{
	margin-left: 60px !important;
}

#userBox a img {
	width: 50px;
	height: 50px;
	display: table-cell;
	vertical-align: middle;
	float: left;	
	background: #FFFFFF;
	margin-right: 10px;
	border-radius: 50%;
}

#sideMenu {
	display: block;
}

#sideMenu ul {	
	position: relative;
	margin-left: 15px;
}

#sideMenu ul li {
	list-style: none;
	padding: 5px;
}

#sideMenu ul li a {
	color: #fff;
	font-family: 'Open Sans',sans-serif;
	font-size: 15px;
	font-weight: 400;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;

}

#sideMenu ul li a:hover {
	color: #ac86c4;


}

#ubeBox {
	margin-left: 15px;	
	margin-top: 50px;
	position: relative;
}

#ubeBox a {
	opacity: 1;

	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
	transition: opacity .25s ease;
}

#ubeBox a:hover {
	opacity: .5;
}

#ubeBox a h1 {
	font-family: 'ube', sans-serif;
	font-size: 35px;
	font-weight: bold;
	color: #bf6ae3;
	position: relative;


}

#ubeBox a span {
	color: #fff;
}

#ubeBox .left {
	float: left;
}

#ubeBox .right {
	float: right;
	margin-right: 25px;
}

#socialBox {

	clear: both;
	width: 90%;
	margin-left: 10%;
}

#socialBox ul li {
	list-style-type: none;
	display: inline;

}

#socialBox ul li a {
	color: #ac86c4;
	margin-right: 10px;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}

#socialBox ul li a:hover {
	color: #FFFFFF;
}

#socialBox ul li a i {
	font-size: 20px;
}

#nav .cart_box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	height: 50px;
	text-align: center;
	display: table;
	vertical-align: middle;
}

#nav .cart_box a {
	text-decoration: none;
	color: #FFF;
	vertical-align: middle;
	display: block;
	position: relative;
}

#nav .cart_box .cartCount {
	position: absolute;
	z-index: 100;
	top: 5px;
	right: -5px;
	width: 20px;
	height: 20px;
	display: table;
	background: #8e44ad;
	border-radius: 50%;
	text-align: center;
}

#nav .cart_box .cartCount span {
	display: table-cell;
	vertical-align: middle;
	font-size: 10px;
	font-weight: 400;
	color: #fff;
}

#nav .cart_box img {
	width: 40px;
	vertical-align: middle;
	padding: 5px 5px 5px 0;
}

#nav .cart_box ul {
	list-style-type: none;
	text-align: center;
	padding: 0;
	margin: 0;
	position: relative;

}

#nav .cart_box ul li {
	display: inline-block;
}

#nav .cart_box ul ul {
	width: 120px;
	position: absolute;
	list-style: none;
	padding: 0;
	/*background: rgba(255,255,255,0.9);*/
	background: #fff;
	border: 1px solid #CCC;
	margin: auto;
	left: -50%;
	right: -50%;
	top: 60px;
	visibility: hidden;
	opacity: 0;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	border-radius: 20px;
	/*box-shadow: 0 0 5px #222;*/

	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

#nav .cart_box ul ul li a {
	color: #333;
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	padding: 20px 10px;
}

#nav .cart_box ul li:hover ul {
	visibility: visible;
	opacity: 1;
	top: 45px;
}

#nav .cart_box ul ul:after, #nav .cart_box ul ul:before { 
	bottom: 100%; 
	left: 50%; 
	border: solid transparent; 
	content: " "; 
	height: 0; 
	width: 0; 
	position: 
	absolute; 
	pointer-events: none; 
} 

#nav .cart_box ul ul:after { 
	border-color: rgba(51, 51, 51, 0); 
	border-bottom-color: #fff; 
	border-width: 10px; 
	margin-left: -10px; 
} 

#nav .cart_box ul ul:before { 
	border-color: rgba(204, 204, 204, 0); 
	border-bottom-color: #fff; 
	border-width: 11px; 
	margin-left: -11px; 
}

footer {
	width: 100%;
	height: 10%;
	clear: both;
	position: relative;
	border-top: 1px dotted #FFF;
	vertical-align: middle;
}

footer p {
	font-size: 10px;
	color: #CCC;
	line-height: 30px;
}

#wrapper {
	width: 100%;
	min-height: 500px;
	position: relative;
	z-index: 0;
	margin: 50px auto;
	border-bottom: none;
	border-top: none;
	padding-top: 40px;


}


#wrapper ul {
	width: 960px;
	min-height: 500px;
	margin:0 auto;

	list-style-type: none;
	position: relative;
	overflow: hidden;
	/*background: #f1f1f1;*/
}

#wrapper ul li {
	display: inline-block;
	width: 230px;
	float:left;
	margin: 5px;
	height: 350px;
	overflow: hidden;
	position: relative;
}

#wrapper .productSearch {
	width: 960px;
	margin:0 auto;


}

#wrapper .productSearch .inputs {

	width: 250px;
	font-family: 'Open sans','tahoma',sans-serif;
	font-size: 12px;	
	font-weight: 400;
	background: transparent;
	border: none;
	/*border-bottom: 2px solid #CCC;*/
	padding: 5px 15px;
	border: 2px solid #666666;
	border-radius: 20px;
	margin-left: 10px;
	outline: none;
	color: #666666;
	float: left;
}

#wrapper .noItems {
	text-align: center;
}

#wrapper .noItems h1 {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 50px;
	color: #333;
}

#wrapper .noItems p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #666666;
}

#wrapper .noItems a {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #8e44ad;
	margin-right: 5px;

	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}

#wrapper .noItems a:hover {
	color: #9b59b6;
}

#productList {
	width: 210px;
	height: 95%;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFF;
	border: 2px solid #999999;
}


#productList.checkOut-style{
	margin: 0px;
}

#payment{
	margin-top: 10px;

	outline: none;
-webkit-appearance: none;
width: 150px;
	font-size: 24px;
	height: 40px;
	width: 200px;
	text-align: right;
}

#info .inputbox{
	margin-top: 10px;
	outline: none;
	-webkit-appearance: none;
	outline: 0;
	font-size: 14px;
	text-align: right;
}

#productList .imgBox {
	width: 200px;
	height: 150px;
	background: #FFF;
	position: relative;
	margin: 5px auto;
	overflow: hidden;
}

#productList .imgBox img {
	width: 250px;
	position: absolute;
	top: -50%;
	bottom: -50%;
	left: -50%;
	right: -50%;
	margin: auto;
}

#productList .listButton {
	width: 150px;
	height: 30px;
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;	
	margin: 20px auto;
	text-align: center;
	/*background: #8e44ad;*/
}




#productList .listButton a {

	text-decoration: none;
	color: #fff;

	border-radius: 25px;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	padding: 8px;
	display: block;
	background-color: #8e44ad;

	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	transition: all .25s linear;
}

#productList .listButton a:before{
	font-family:"Glyphicons Halflings";
	content:"\e116 \00a0";
}



#productList .listButton a:hover {
	color: #efe7f3;
	background-color: #9b59b6;
	border-color: #8e44ad;
}

#productDetail {
	display: block;
	z-index: 1;
	background: transparent;
	position: relative;
	top: 0;
	width: 200px;
	height: 60px;
	margin: 0 auto;
	/*white-space: nowrap;*/
}

#productDetail .ItemName {
	text-transform: uppercase;
	word-wrap: break-word;
	color: #8e44ad;
	font-weight: bold;
}

#productDetail p {
	padding: 5px;
	color: #666666;
	font-size: 12px;
	font-weight: 400;
	overflow: hidden;
	text-align: left;

}

#productDetail .edit {
	background: transparent;
	border: none;
	outline: none;
	width: 100px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #8e44ad;
}

#productDetail i {
	margin-right: 5px;
}

#checkOutBox {
	width: 675px;
	height: auto;
	min-height: 550px;
	float: left;
	overflow: auto;
	margin-left: 40px;

}

#checkOutBox ul {

	width: 660px;
	background-color: transparent;
}

#checkOutBox ul li {
	width: 210px;
	height: 350px;
	overflow: hidden;

}

#totalBox {
	width: 280px;
	height: 300px;
	margin-left: 5%;
	text-align: right;
	padding: 8px 10px;
	right:10%;
	position:static;

}

#totalBox span {
	font-family: 'Open sans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #8e44ad;


}

 #iconback{
	font-family:"Glyphicons Halflings";
	font-size:16px;
	color:#9b59b6;
}
 #iconback:hover{

	color:#8e44ad;
}




#totalBox  #icon{
	font-family:"Glyphicons Halflings";
	font-size:16px;
	color:#9b59b6;
}
#totalBox  #icon:hover{

	color:#8e44ad;
}

#totalBox h1 {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 45px;
	color: #333;
}

#totalBox .buttons {
	width: 300px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	background: #8e44ad;
	border-radius: 25px;
	margin-top: 20px;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;

}




#totalBox .CheckOut-style:after{
	font-family:"Glyphicons Halflings"!important;
	font-size: 20px;
	content:"\e066"!important;
}
#totalBox .buttons:hover {
	border-color: #9b59b6;
	background: #9b59b6;
	color: #FFF;
}

#totalBox a {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #333;
	margin-right: 5px;

	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}

#totalBox a:hover {
	color: #9b59b6;
}

#withDepoBox {
	text-align: center;
}

#withDepoBox h1 {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 60px;
	color: #8e44ad;

}

#withDepoBox p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #666666;
}

#withDepoBox .inputs {
	position: relative;
	margin: 0 auto;
	text-align: right;
	border-radius: 25px;
	border: 2px solid #8e44ad;
}

#historyBox {
	width: 100%;
	position: relative;
	margin: 0 auto;
}

#historyBox .optionBox {
	text-align: center;
}

#historyBox .optionBox p {
	font-weight: bold;
	color:#8e44ad;
}

#historyBox .optionBox .datepicker{
	width: 150px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	border: 2px solid #8e44ad;
	border-radius: 25px;
	color:#8e44ad;
	padding: 6px;
}

#historyBox .optionBox select{
	width: 150px;
	height: 35px;
	color:#8e44ad;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	border: 2px solid #8e44ad;
	border-radius: 25px;
	padding: 6px;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 25px;


}


#historyBox .optionBox .buttons {
	width: 150px;
	background: #9b59b6;
	border-radius: 25px;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	padding:8px;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

#historyBox .optionBox .buttons:hover {
	background: #8e44ad;
	border-color: #8e44ad;
	color: #fff;
}

#historyBox table, #historyBox th, #historyBox td, #historyBox tr {
	border: 2px solid #fff;
	border-collapse: collapse;
	padding: 5px;
	color:#702f8c;

}
table th{
	color:#efe7f3;
}
table tr{
	color:#702f8c;
}

table tr:nth-child(odd) th{
	background: #ac86c4;
}

table tr:nth-child(odd) td{
	background: #efe7f3;
}
table tr:nth-child(even) td{
	background: #decfe7;
}






#historyBox table {
	position: relative;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

#historyBox th {
	padding: 10px;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 14px;
}

#historyBox td {
	font-weight: 400;
}

#historyBox table a {
	color: #8e44ad;
	font-weight: bold;
}


.panel{
	background: #8e44ad!important;
	border:none!important;
}

#back{
	bottom: 20px;
	text-decoration: none;
	color: #712086;
	font-family: 'Raleway', sans-serif, bold;
	font-size: 14px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	text-align: center;
	-webkit-transition: color 0.25s linear;
	-moz-transition: color 0.25s linear;
}


#back:hover{

	text-decoration: none;
	color: #712086;

}

.btn{
	outline: none;
	width:150px;
	margin-top:25px;
	border-radius:25px;
	color:#fff;
	font-weight: 400;
}

.button{
	width: 120px;
	height: 30px;
	border:none;
	text-align: center;
	outline: 0;
	background: none;
	color: #712086;
	text-align: right;
}

#discount input,#addtlpayment input{
	margin-top: 3px;
	outline: 0;
}

#totalBox .button{
	font-family:"Glyphicons Halflings";
}

#totalBox .button:after{
	content:"\00a0 \2b";
	text-align: right;
}



.button:hover{
	color: #9b59b6;
	outline: none;
}


.btn:hover{
	color: #712086;
	outline: none;
}

.btn:focus {outline:0;}

#addtlpayment input{
	height: 30px;
	width: 100px;
	font-size: 16px;
	font-weight: bold;
	border: 1px ridge #ccc;
	margin-left: 10px;
	text-align: right;
}

#addtlpayment select{
	width: 100px;

}

#addtlpayment .button-link{
	width: 120px;
	height: 30px;
	border:none;
	text-align: center;
	outline: 0;
	background: none;
	color: #712086;
	text-align: right;
	text-decoration: underline;

}

#totalBox hr {
	margin-top: 10px;
	margin-bottom: 5px;
	border: 0;
	border-top: 1px solid #eee;
}