/*

HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/

/* Reset */
.cartContent,
.cartContent ul,
.cartContent li,
.cartContent a {
	margin-top:0px;
	padding:0px;
	border: none; 
	outline: none;
}

.headercart{ margin:0px 30px 0px 500px; width:60px; height:65px; font-size:10px; line-height:20px; color:#999999; text-align: center; display:block;float:right;}
.headercart a{ color:#FFA500; text-decoration: none;}
.headercart a:hover{ color:#FFA500; text-decoration: underline;}


/* Menu */
.cartContent {	
	height: 30px;
	width: 850px;

/*	background: -webkit-linear-gradient(top, #efefef 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #efefef 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #efefef 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #efefef 0%,#2c2d33 100%);
	background: linear-gradient(top, #efefef 0%,#2c2d33 100%);*/

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.cartContent li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	/*height: 40px;*/
}

/* Links */

.cartContent li a {
	display: block;
	padding-left: 889px;
	margin-top: -125px;
	line-height: 20px;
	text-decoration: none;
	
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;
	font-size: 10px;
	letter-spacing:1px;
	text-align: center;
	color: #FFA500;
	/*text-shadow: 1px 1px 1px rgba(0,0,0,.6);*/

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.cartContent li:first-child a { border-left: none; }
.cartContent li:last-child a{ border-right: none; }

.cartContent li:hover > a { color: #7e7e7e; }

/* Sub Menu */

.cartContent ul {
	position: absolute;
	top:0px;
	left: 775px;

	opacity: 0;
	
	background: #f3f3f3;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

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

.cartContent li:hover > ul { opacity: 1; }

.cartContent ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.cartContent li:hover > ul li {
    height: auto;
	overflow: visible;
	padding: 0;
	border-top:1px solid #cc0d0d;
	border-bottom:2px solid #CCC;
	border-left:2px solid #CCC;
	border-right:2px solid #CCC;
}

.cartContent ul li a {
	width: 165px;
	padding: 4px 0 4px 10px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.cartContent ul li:last-child a { border: none; }
.cartContent a.documents { text-align:left; }
.cartContentls{ margin-right:3px;margin-left:5px;margin-top:5px; width:100px; height:35px; font-size:12px; color:#808080; text-align:left; float:left;}
.cartContentxs{ margin-right:3px;margin-top:5px; width:20px;height:35px;font-size:12px; color:#808080; text-align:left; float:left;}
.cartContentss{ margin-top:5px;width:25px;height:15px;font-size:12px; font-weight:bold; color:#808080; text-align:right; float:left;}
.cartContent a.total { width:160px;margin-right:5px;text-align:right; font-size:13px;color:#808080; }
.cartContent a.bill { width:165px;text-align:center; font-size:13px; background-color:#fed1d1; }
.cartContent a:hover.bill { background-color:#ffe1e1; }