/* Main Structure */

html, body {
	margin:0;
	padding:0;
	height:100%;
	}

a
{
  cursor: pointer;
}


#nav {
	color:#F7D043;
	float:right;	
	font-weight:lighter;
	text-shadow:1px 1px rgba(0,0,0,0.5);
	}
	
#nav a {
	color: #F7D043;
	text-decoration:none;
	}

#nav .item {
	display:inline;
	}

#nav .separator {
	margin:0 15px;
	}
	

#header {	
	background:url(../images/header_bg.png) repeat-x #333230;
	height:60px;
	z-index:1000;
	}

#logo {
	float:left;
	position:absolute;
  }

#logo h1 {
	background:url(../images/header_logo.png) no-repeat;
	width:60px;
	height:72px;
	}
	
#logo h1 a {
	width:60px;
	height:72px;
	display:block;	
}

#logo h1 {
	text-indent:-999999px;
	float:left;
	
	margin-left:10px;
	}


#logo .username {
	font-family:'FuturaCondensed';
	font-size:22px;
	margin-top:20px;
	float:left;
	}

#logo .username a {
	color:#F7D043;
	text-decoration:none;
	}

#header .plan {
	font-family:Arial, Helvetica, sans-serif;
	background: rgba(0,0,0,0.07);
	color:rgba(255,255,255,0.6);
	border-left:1px solid rgba(0,0,0,0.15);
	border-top:1px solid rgba(0,0,0,0.15);
	border-right:1px solid rgba(0,0,0,0.02);
	border-bottom:1px solid rgba(0,0,0,0.02);
	padding:1px 5px;
	border-radius:3px;
	font-size:14px;
	display: inline-block;
}


#footer {
	background:url(../images/header_bg.png) repeat-x #333230;
	margin:0;
	color:#fff;
	text-shadow:none;
	position:absolute;
	bottom:0;
	}

#footer .wrapper {
	padding:25px 10px 35px 15px;
	}
	

#footer .legal {
	float:left;
	}

#footer .menu {
	float:right;
	}
	

#footer a {
	color:#CCC;
	}

#footer a:hover {
	border-color: #ccc;	
	}
	

/* All Dashboard Styles */


	
.widget {
	position: relative;
	width:325px;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	}

.widget.wide {
	width:680px;
	}

.widget h3 {
	font-size:16px;
	line-height:16px;
	color: #666;
	text-shadow:1px 1px 0 #fff;
	padding:8px 10px;
	font-weight:lighter;
	margin-bottom:0;
	float:left;
	}

.widget .inner {
	clear:both;
	padding:10px;
	border-top: 1px dotted #ebebeb;
	border-bottom: 1px dotted #ebebeb;
	background:#f9f9f9;
	}

.widget .viewall {
	font-size:11px;
	}

.widget h4 {
	font-size:13px;
	font-weight:bold;
	margin-bottom:3px;
	line-height:16px;
	}

.widget.blog li {
	margin-bottom:20px;
	}
	
.alert.ad,
.alert.notice {
	text-shadow:1px 1px 0 rgba(255,255,255,0.5);
	text-align:left;
	background:none;
	padding:0;
	overflow:hidden;
	/* width:640px; broken style in tablet mode*/
	padding:20px 20px 0 20px;
	}

.alert.ad.sky,
.alert.notice.sky
 {
	background: #dcf3fd; /* Old browsers */
	background: -moz-linear-gradient(top, #dcf3fd 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcf3fd), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dcf3fd 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dcf3fd 0%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dcf3fd 0%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(top, #dcf3fd 0%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcf3fd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	}

.alert.ad.yellow,
.alert.notice.yellow {
	background: #FEE77D; /* Old browsers */
	background: -moz-linear-gradient(top, #FEE77D 0%, #DDAD27 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEE77D), color-stop(100%,#DDAD27)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #FEE77D 0%,#DDAD27 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #FEE77D 0%,#DDAD27 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #FEE77D 0%,#DDAD27 100%); /* IE10+ */
	background: linear-gradient(top, #FEE77D 0%,#DDAD27 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEE77D', endColorstr='#DDAD27',GradientType=0 ); /* IE6-9 */
	}

.alert.upgrade {
	background: #ffffe0;
	border: 1px solid #e6db55;
}

.receiptDetailsBox .alert {
	margin-left:0;
	margin-right:0;
	}
	
.claimApiBox {
  padding: 20px 20px 20px 0;
  font-size: 20px;
}

body.home .claimApiBox {
  padding: 0px 20px 20px 20px;
}

.claimApiBox .apicode {
  padding-left: 20px;
  padding-bottom: 20px;
}

body.home .claimApiBox .apicode {
  padding-left: 0px;
  padding-bottom: 0px;
}

.claimApiBox .title
{
  margin-left: 10px;
}

.claimApiBox input.code
{
  margin-left: 5px;
  width:150px;
  border: 1px solid #C0C0C0;
  border-radius: 4px 4px 4px 4px;
  height: 28px;
  font-size: 18px;
  padding: 0 4px;
}


.widget .date  {
	color: #999;
	}

.widget .avatar  {
	width:18px;
	margin-right:5px;
	float:left;
}

.widget .date p  {
	line-height:18px;
	margin-bottom:5px; 
	font-size:12px;
}

.widget p  {
	font-size:13px;
	margin-bottom:14px;
	line-height:16px;
	}

.widget a:hover {
	/*text-decoration:none;*/
	/*border-bottom:1px dotted #333231;*/
	}

.widget .username {
	font-weight:bold;
	border:none !important;
	}

.widget.summary {
	padding-top:1em;
	margin-bottom: 10px;
	}

.widget.summary p {
	margin:0;
	font-size:16px;
	line-height:22px;
	}


/*.widget.summary a:hover { text-decoration:none; border-bottom-style:solid; }*/
	
.widget.summary a.invoices, .widget .summary a.ammount {
	background:#ffffe5;
	} 

.widget.summary .spent-detail {
	display: inline-block;
	}

	
	
.pagetitle {
	background:#f5f5f5;
	background:rgba(0,0,0,0.01);
	padding:30px;
/*	margin-bottom:30px;*/
	border-bottom:1px solid #e8e8e8;
	}

body.home .pagetitle {
  margin-bottom:30px;
}

.pagetitle h2 {
	font-size:32px;
	font-weight:lighter;
	float:left;
	text-shadow:1px 1px 0 #fff;
	color:#333;
	}

.pagetitle h2 a {
	color:#333230;
	}

.pagetitle h3 {
  font-size:20px;
  float:left;
  text-shadow:1px 1px 0 #fff;
  color:#333;
  }

#content .pagetitle h2 a:hover, 
#content-purchase .pagetitle h2 a:hover, 
.content-other .pagetitle h2 a:hover 
{
	border:none;
	color:#339966;	
}


.pagetitle .quantity {
	font-size:13px;
	color:#666666;
	font-weight:normal;
	}
	
.pagetitle .search {
	float:right;
	color:#666666;
	font-size:11px;
	width:240px;
	padding:8px 8px 8px 30px;
	border:1px solid #ccc;
	background:url(../images/input_ico_search.png) no-repeat #fff 9px 7px;	
	-moz-border-radius:4px;
	border-radius:4px;
	}
	
.input {
	border: 1px solid #C0C0C0;
	border-radius: 4px;
	padding:4px;
	font-size: 13px;
	}

.receiptlist.filters-left
{
  width: 460px;
  float: left;
}
	@media "all" and "max-width:320px"{
		.receiptlist.filters-left{
			width:320px;		
			}
	}


.receipt {
	display:block;
	width:440px;
	padding:0.6em 20px 1.2em;
	border-bottom:1px solid #ebebeb;
	text-shadow:1px 1px 0 #fff;
	color:#000;
	text-decoration:none;
	}
.receiptlist .receipt:hover{
	padding-bottom: 0;
	}
	.receipt.purchaseIssues,
	.receipt.purchaseIssues:hover{
		padding-bottom: 0.6em
		}

	.owned-purchase{
		color:#444;
		border:1px solid #e8e8e8;
		border-top:1px solid transparent;
		/* gradients */
		background-image: linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
		background-image: -o-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
		background-image: -moz-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
		background-image: -webkit-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
		background-image: -ms-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.6, #f7f7f7),			
			color-stop(0, #fafbfb),
			);		
		}
		.owned-purchase:first-child{
			border-top:1px solid #e8e8e8;
			}
	.not-owned-purchase{
		border:1px solid #f3f3f3;
		border-top:1px solid transparent;
		}
		.not-owned-purchase:first-child{
			border-top:1px solid #f3f3f3;
			}
	
.receipt.unread {
/*	background:#ffffe5;	*/
	}
	
.grouping {
  color:#666;
  background-color: #e8e8e8;
  text-decoration:none;
  text-shadow:1px 1px 0 rgba(255,255,255,0.5);
  display:block;
  padding:5px;
  
  }
  
.grouping .title {
    font-size: 13px;
    font-weight:normal;
    line-height: 16px;
    padding-left: 20px;
  } 

.receiptexpanded {
	/*margin-bottom:10px;*/
	width:95%;
	padding:0.6em 2.5%;
	}

.receipt.merchant {
	background-color:#fafafa;
	}
	
	
.receipt.digitized:hover,
.receiptlist.duplicated:hover {
	background:url(../images/arrow-right.png) no-repeat right #ffffe5;
	cursor: pointer;
	}

.receiptexpanded.receipt:hover {
	background:none;
	}

.receipt .img {
	float:left;
	margin-right:14px;
	width:50px;
	height:50px;
	}
	
.receipt .logo {
	border:1px solid #ccc;
	-webkit-box-shadow:0 0 4px #ccc;
	-moz-box-shadow:0 0 4px #ccc;
	box-shadow:0 0 4px #ccc;
	padding:1px;
	max-width: 50px;
  max-height: 50px;
	}

.receipt .icon {
	padding:2px;
	}
	
.receipt a,
.receipt a:hover {
	color: #333;
	}
	.receipt.not-owned-purchase a,
	.receipt.not-owned-purchase a:hover{
		color:#777;
		}
	


.merchant .title{
	font-size:1em;
	line-height:1.2em;
	font-weight: bold;
	margin-top: 0.5em;
	float: left;
	}	

	.receiptexpanded .merchant .title{
		margin-top: 1em;
		}

.receipt .categories{
	float: right;
	padding:4px 2px 2px 4px;
	margin:0 0 0 10px;
	font-size:9px;
	line-height:10px;
	letter-spacing:0.15em;
	text-transform:uppercase;
	
	border:1px solid #CCC; 
	border-left:3px solid #999;
	background:#fff;  
	}


.main-category, 
.sub-category {
	float: left;
	margin-right:5px;
	}

.main-category {
	display:none;
	border-right:1px solid #999;
	margin-right:5px;
	padding-right:5px;
	}
	.receiptdetailsheader .main-category{
		display: block;
		}
	
.receipt .information{
	overflow: hidden;
	word-wrap: break-word;
	}
	.purchaseIssues{
		background: #ffffe0;
		border-top: 1px solid #e6db55;
		color: #7f7400;
		}	
		.purchaseIssues span{
			font-weight: bold;
			}
		.purchaseIssues div{
			font-size: 0.75em;
			padding: 2px 0;
			margin-left: 17px;
			}
		.purchaseIssues div.errorcount,
		.purchaseIssues div.digitizecount{
			padding: 2px 0 2px 25px;
			}
		.purchaseIssues div.errorcount{
			background: transparent url(../images/error-icon.png) 0 0 no-repeat;
			}
		.purchaseIssues div:hover{
			color: #09C;
			cursor: pointer			
			}
	
.receipt .separator, .buttons .separator {
	margin:0 5px;
	}
	
.receipt .viewlink,
.conflictActions.viewlink{
	clear:both;
	float:right;
	font-size: 12px;
	padding-bottom: 0.6em
	}
.receipt .viewlink{
	display:none;
	}
.receipt:hover .viewlink,
.tr:hover conflictActions.viewlink {
	display: block;
	}

.receipt.receiptexpanded .viewlink {
	background:rgba(0,0,0,0.02);
	padding:3px;
	}

	
.receipt .viewlink a,
.conflictActions.viewlink a, 
.buttons a.event,
.receipt a.edit {
	border:none !important;
	color:#a3a3a3;
	font-size:12px;
	}

.receipt .viewlink a:hover,
.conflictActions.viewlink a:hover, 
.buttons a.event:hover {
	text-decoration:underline;
	}
	
.receipt a.edit, 
a.event.edit,
.conflictActions.viewlink a.edit
 {
	background:url(../images/context_ico_edit.png) no-repeat 0 0;
	padding-left:16px;
	}
	
.receipt a.vieworiginal, 
a.event.vieworiginal,
.conflictActions.viewlink a.vieworiginal{
	background:url(../images/context_ico_vieworiginal.png) no-repeat 0 1px;
	padding-left:18px;
	}

.receipt a.delete, 
a.event.delete,
.conflictActions.viewlink a.delete {
	background:url(../images/context_ico_delete.png) no-repeat;
	padding-left:14px;
	}

.receipt a.edit:hover, 
a.event.edit:hover,
.conflictActions.viewlink a.edit:hover,
.receipt a.vieworiginal:hover, 
a.event.vieworiginal:hover,
.conflictActions.viewlink a.vieworiginal:hover{
	color:#333;
	}

.receipt a.delete:hover, a.event.delete:hover, .conflictActions.viewlink a.delete:hover {
	color: #900;
	}	


	.receiptdetailsheader .labels,
	.receipt .labels,
	.receiptdetailsheader .businesslabels,
	.receipt .businesslabels{
		width:100%;
		clear:both;
		text-align: left;
		line-height: 1.2em;
		margin-bottom: 0;
		}
	
  .receiptdetailsheader .labels{
    width:auto;
    clear:left;
    display: inline;
    }
  
	.receiptdetailsheader .label-name,  
	.receipt .labels .label,
	.receiptdetailsheader .label-name,  
	.receipt .businesslabels .businesslabel{
	    position: relative;
	    display: inline;
	    margin:0 auto 0.75em 0;
	    font-size: 1em;
	    font-weight: normal;
	    line-height: 1.2em;
	    text-align: left;
	    text-shadow: none;
		}
	
	.receiptdetailsheader .label-name a,
	.receipt .labels .label a,
	.receiptdetailsheader .businesslabel-name a,
	.receipt .labels .businesslabel a  {
		color: #fff;
		}	
	.labels .label-name,
	.businesslabels .businesslabel-name{		
		display: inline-block;
	    float: left;	    
		width: auto;
		margin: 0.5em 0 0;
		font-size: 0.75em;				
		cursor: pointer;
		color: #09C;		
		}
	.receipt .labels .label .label-remove,
  	.receipt .businesslabels .businesslabel .businesslabel-remove{		
		clear: none !important;
		width: auto !important;
		float: left;
		margin-top: 0.5em;
    	margin-right: 0.4em;
		padding: 0 3px;
		line-height: 1.2em;
		font-size: 0.75em;
		font-weight: bold;
		cursor: pointer;
		color: #09C;
		/* rounded corners */
			-ms-border-radius: 10px; /* // IE 8 */
			-moz-border-radius: 10px; /* // Firefox */
			-webkit-border-radius: 10px; /* // WebKit & Safari */
			-khtml-border-radius: 10px;
			-o-border-radius: 10px;
			border-radius: 10px; /*css3 standard property*/
		}
	.receipt .businesslabels .businesslabel .businesslabel-remove,
	.receipt .businesslabels .businesslabel .businesslabel-remove:hover{
    	margin-top: 0.4em 
  		}

.receipt .description {
	clear:both;
	width:99%;
	font-size:12px;
	line-height: 18px;
	margin-top:0.25em	
	}
	.receipt.not-owned-purchase .description{
		color:#777
		}
.receipt .ammount {
	font-size: 16px;
	font-weight:bold;
	float:right;
	color: #333;
	}
.receipt .originalCurrency.ammount {
    color: #666;
	vertical-align: bottom;
    font-size: 0.9em;
    font-weight: normal;
    margin-right: 1em;
    margin-top: 0.25em;
	}
	.receipt.not-owned-purchase .ammount{
		color:#333
		}

.receipt .exportedTo {
  clear:both;
  width:99%;
  font-size:12px;
  line-height: 18px;
  margin-top:0.25em 
  }

.receipt .exportedTo .exportedToTitle {
  text-align: left;
  color: #666;
  font-size:11px;
  }
		
.receipt .exportedTo .exportedToName {
  color: #333333;
  }   
.receipt .date,
.receipt .user {
	text-align: left;
	color: #666;
	font-size:11px;
	}
	.receipt.not-owned-purchase .user,
	.receipt.not-owned-purchase .date{
		color:#999
		}
	.receipt.not-owned-purchase .user{
	  	font-weight: bold;		
		color:#333
		}

#content .receiptDetailsBox {
  display: none;
}

.receiptdetails {
	min-height:200px;
	margin:0 30px;
	margin-bottom:20px;
	}
.receiptdetails .item {
	padding:15px 0;
	border-bottom:1px solid #ebebeb;
	font-size:14px;
	color:#666;
	}
.receiptdetails .item.subtotal {
	/* border-top:1px solid #ebebeb; */
	margin-top:1px;	 
	}
.receiptdetails .item.total {
	padding:20px 0;
	font-size:22px;
	}
.receiptdetails .quantity {
  float:left;
  margin-left: 6px;
  }

.receiptdetails .description {
	float:left;
	}

.receiptdetails .detail {
	font-weight:100;
	}
	
.receiptdetails .ammount {
	float:right;
	}

.receiptdetails .discount .ammount {
  margin-right: -5px;
  }
 
 
a.backviewall {
	margin:20px;
	cursor:pointer;
	}




.paginator {
	font-size:14px;
	color:#000000;
	}

.paginator a{
  cursor: pointer;
  display: inline-block;
  margin-bottom: 10px;
  }

.paginator strong {
	font-weight:bold;
	}

.paginator .unavailable {
	color:#666;
	} 

.paginator .separator {
	margin:0 10px;
	}

  


.total.ammount {
	background:#ffffe5;
	padding:3px;
	}

#originalImage.image {
  text-align: center;
}

#originalImage.simple-text {
  font-family: courier;
  font-size: 13px;
  overflow: auto;
}
  
#originalImage.html-text {
  background: none repeat scroll 0 0 #FFFFFF;
  width: 100%;
  font-family: arial,sans-serif;
  font-size: 80%;
}    

.feedback {
	background:#f5f5f5;
	border-top:1px solid #fff;
	padding:10px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
	}

.feedback h4 {
	color:#999999;
	font-size:14px;
	margin-bottom:10px;
}

.feedback .yes, .feedback .no {
	padding:10px;
	font-size:16px;
}


.hentry {
	padding:20px 30px;
}

.hentry h1 {
	font-size:32px;
	margin-bottom:20px;
}	
	
	
.hentry h2 {
	font-size:28px;
	margin-bottom:20px;
}

.hentry h3 {
	font-size:22px;
	margin-bottom:20px;
	}

.hentry h4 {
	font-size:18px;
	margin-bottom:20px;
	}

.hentry h5 {
	font-size:14px;
	margin-bottom:20px;
	}


.hentry p {
	font-size:14px;
	line-height:24px;
	margin-bottom:26px;
}


.hentry strong {
	font-weight:bold;
	}



.hentry a:hover {
	/*border-bottom:1px dotted #339966;*/
	
}

.hentry a.noborder {
	border-bottom: none;
}



.hentry ol {
	list-style:decimal inside;
	margin-bottom:20px;
	margin-left:25px;
}

.hentry ul {
	list-style: inside square;
	margin-bottom:20px;
	margin-left:25px;
	}

.hentry li {
	font-size:14px;
	margin-bottom:8px;
	line-height:24px;
}
	

.hentry blockquote {
	font-style:italic;
	margin:0 10px 14px 22px;
	border-left:  #e8e8e8 6px solid;
	padding-left:10px;
	}

.hentry small {
	font-size:12px;
}
	
.hentry hr {
	border: none;
	border-bottom:#949494 1px solid;
	margin:20px 0;
}
	


.hentry img {
	background:#fff;
	border: 1px solid #ccc;
	padding:2px;	
}

.hentry img.noborder {
	padding:0;
	border:none;
	padding:0;
	background:none;
}


.hentry a img:hover {
	border-color:#666;
}


#content .plan {
	font-weight:bold;
}

/* NEW DASHBOARD */
	
	.widget a:hover {
	text-decoration:underline;
	}
	
	.widget h3 {
	text-transform:uppercase;
	color:#ababab;
	font-weight:bold;
	font-size:14px;
	padding-left:30px;
	}	
	
	.widget h3.date {
	background:url(../design/images-temp/summary-date-icon.png) no-repeat 10px 8px;
	}
	
	.widget h3.labels {
	background:url(../design/images-temp/summary-label-icon.png) no-repeat 10px 8px;
	}
	
	.widget h3.categories {
	background:url(../design/images-temp/summary-category-icon.png) no-repeat 10px 8px;
	}
	
  	.widget h3.users {
	background:url(../design/images-temp/dashboard-users-icon-5.png) no-repeat 5px 8px;
	}
  
	.widget h3.reports {
	background:url(../design/images-temp/summary-reports-icon.png) no-repeat 10px 8px;
	}
	
	.widget h3.blog {
	background:url(../design/images-temp/summary-rss-icon.png) no-repeat 10px 8px;
	}
	
	.widget h3.currencies{
		background:url(../design/images-temp/dashboard-currency-icon.png) no-repeat 8px 8px;
		}
		
	.widget h3 a {
	color:#ababab;
	text-decoration:none;
	line-height:14px;
	}
	
	.widget h3.date a {
	color:#999;
	font-size: 16px;
	}
	
	.widget h3 a:hover  {
	text-decoration:none;
	color:#339966;
	}
	
	.widget h3:hover  {
	background-color:#f8f8f8;
	}
	
	.summary-filters a  {
		width: auto;
	}
	
	.summary-filters a.clearFilters,
	.summary-filters a.clearFilters:link,
	.summary-filters a.clearFilters:visited,
	.summary-filters a.clearFilters:hover,
	.summary-filters a.clearFilters:active{
		display:inline-block;
		float:right;
		font-size:12px;
		padding:3px 5px;
		margin-top:-1px;
		color:#999;
		border:1px solid #ccc;	
		background-color: transparent;		
		/* rounded corners */
			-ms-border-radius: 5px; /* // IE 8 */
			-moz-border-radius: 5px; /* // Firefox */
			-webkit-border-radius: 5px; /* // WebKit & Safari */
			-khtml-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px; /*css3 standard property*/
		}
		.summary-filters a.clearFilters:hover{
			border:1px solid #999;
			color:#333;
			text-shadow: 0 -1px 0 #e8e8e8;
			text-decoration: none;
			}
	.summary-filters .arrow {
		background:url(../design/images-temp/widget-h3-arrow.png) no-repeat;
		width:14px;
		height:14px;
		float:right;
		margin-left:2px;
		}
	
	.summary-filters h3 a:hover .arrow {
		background-position:bottom;
		}
		
  .datefilter-pick{
    position:relative;
    width:auto !important;
    z-index:999   
    }
      .datefilter-pick div,
      .datefilter-pick ul{
        display:none;
        }
      .datefilter-pick div{
        cursor: default;
        position:absolute;
        top:1.8em;      
        left:1.8em;
        margin-left: -20px !important;
        padding-top: 6px;
        background:transparent url(../images/exportArrow2.png) 50% 0 no-repeat;
        height:3em;
        }
        .datefilter-pick ul{
          width:9.2em;
          border:1px solid #999;
          border-top:0;
          background-color: #fff;
          box-shadow:1px 1px 10px rgba(0,0,0,0.3);
          /* rounded corners */
            -webkit-border-bottom-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-bottomright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;         
          }
      
        .datefilter-pick:hover div{
          display: block;
          }
        .datefilter-pick:hover ul{
                display:inline-block;
              }   
        .datefilter-pick ul li{
              cursor: pointer;
          display:block;
          font-size:90%;
          padding:0.5em;
          white-space: nowrap;
          }
          .datefilter-pick ul li a:hover{
            border-bottom: 1px dotted
            }	
	
	
/* already read from line 998
	.summary-filters .separator {
		margin-right:10px;
		margin-left:10px;
		vertical-align: super;
		padding-top:6px;
		float:left;
		color:#999999;
		}
*/
	
	.summary-amount .symbol{
		font-size: 50%;
    	margin-right: 3px;
    	vertical-align: middle;
  		}
		.summary-amount.totalOriginal .symbol{
			font-size: 75%;
			vertical-align: text-bottom			
			}

  .summary-amount .cents {
    font-size: 50%;
    margin-left: 2px;
    vertical-align: super;
  }
	
	
	.widget.categories a {
	text-decoration:none;
	}

	.widget.categories .category {
	clear:both;
	padding:0.4em 0.2em 0;
	margin-bottom:10px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:lighter;
	border-bottom:1px solid #ededed;
	}
	
	.spend-categories .category-name {
	float:left;
	}
	
	.widget.categories .amount {
	float:right;
  	margin-top: 3px;
	}
	
	.widget.categories .amount .symbol {
		font-size: 75%;
		vertical-align:baseline
		}

  .widget.categories .amount .cents {
    font-size: 50%;
    vertical-align: super;
    margin-left: 1px;
  }

	.widget.categories .category a {
	color:#666;
	}
	
	.widget.categories .category:hover {
	cursor: pointer;
	background:#fff;
	}
	
	.widget.categories .category:hover a {
	color:#000;
	}
	
	.widget.categories .progress {
	height:3px;
	background:#999999;
	bottom:0;
	position:relative;
	margin-top:15px;
	width:0;
	}
	
  .widget.users a {
  text-decoration:none;
  }

  .widget.users .user {
	  clear:both;
	  padding:2px 0 0 0;
	  margin-bottom:10px;
	  font-size:12px;
	  text-transform:uppercase;
	  font-weight:lighter;
/*	  border-bottom:1px solid red;*/
	  }
  
  .spend-users .user-name {
  float:left;
  }
  
  .widget.users .amount {
  float:right;
  margin-top: 3px;
  }
  
  .widget.users .amount .symbol {
    font-size: 50%;
    margin-right: 1px;
    vertical-align: middle;
  }

  .widget.users .amount .cents {
    font-size: 50%;
    vertical-align: super;
    margin-left: 1px;
  }

  .widget.users .user a {
  color:#666;
  }
  
  .widget.users .user:hover {
  cursor: pointer;
  background:#fff;
  }
  
  .widget.users .user:hover a {
  color:#000;
  }
  
  .widget.users .progress {
  height:3px;
  background:#999999;
  bottom:0;
  position:relative;
  margin-top:15px;
  width:0;
  }
  
  .widget.familyplan img,
  .widget.familyad img
  {
    width: 100%;
  }
	
  .widget.currencies a {
  text-decoration:none;
  }

  .widget.currencies .currency {
    clear:both;
    padding:0.5em 0.2em 0.2em;
    margin-bottom:10px;
    font-size:12px;
    text-transform:uppercase;
    font-weight:lighter;
    }
  
  .spend-currencies .currency-name {
  float:left;
  }
  
  .widget.currencies .amount {
  float:right;
  margin-top: 3px;
  }
  
  .widget.currencies .amount .symbol {
    font-size: 50%;
    margin-right: 1px;
    vertical-align: middle;
  }

  .widget.currencies .amount .cents {
    font-size: 50%;
    vertical-align: super;
    margin-left: 1px;
  }

  .widget.currencies .currency a {
  color:#666;
  }
  
  .widget.currencies .currency:hover {
  cursor: pointer;
  background:#fff;
  }
  
  .widget.currencies .currency:hover a {
  color:#000;
  }
  
	.widget.labels {  
	padding-bottom: 20px;
	}
	
	.spend-labels li {
	list-style:none;
	display:inline-block;
	}
	
.widget.labels a {
	/* text-decoration:underline; */
	/* display: inline-block; */
	display:block;
	/* color:#29C5ED; */
	font-size:90%;
	margin-right:8px;
	margin-bottom:0.4em;
	color:#0099CC;
	vertical-align: use-script;
	text-shadow:1px 1px 0 #fff;
	padding:0.5em;
	/* rounded corners */
		-ms-border-radius: 7px; /* // IE 8 */
		-moz-border-radius: 7px; /* // Firefox */
		-webkit-border-radius: 7px; /* // WebKit & Safari */
		-khtml-border-radius: 7px; /* Konkeror */
		-o-border-radius: 7px; /* Opera */
		border-radius: 7px; /*css3 standard property*/
	}
	
	.widget.labels a:hover {
	color:#0099CC;
	background:#ccf2ff;
	text-shadow:none;
	text-decoration:none;
	}
	
	
	.spend-labels {
	font-size:14px;
	}
	
	.spend-labels .amount {
    font-size:14px;
	}

  .spend-labels .amount .symbol {
    font-size: 50%;
    margin-right: 1px;
    vertical-align: middle;
  }

  .spend-labels .amount .cents {
    font-size: 50%;
    vertical-align: super;
    margin-left: 1px;
  }

	.spend-labels .label-name {
	}

	.summary-purchases {
	font-size:32px;
	width:auto;
	float:left;
	}
	
	.summary-purchases a {
	color: #666 !important;
	text-decoration:none;
	background:url(../design/images-temp/summary-purchases-icon.png) no-repeat 0 9px;
	padding-left:24px;
	}
	
  .summary-amount.totaldrill {
      cursor: pointer;
      color: #000 !important;
      text-decoration: none !important;
  }
	
  .summary-amount.totaldrill:hover .amount {
      text-decoration: underline;
  }
  
	.summary-variation {
	font-size:32px;
	width:auto;
	margin-left:2em;
	float:left;
	}
	
	.summary-variation .variation.more {
	color:#CC0000;
	}
	
	.summary-variation .variation.equal {
	color:#333;
	}
	
	.summary-variation .variation.less {
		color:#009900;
		}
	.summary-filters{
		float:left;
		width:100%;		
		}
		.summary-filters div{
			width:100%;
			float:left;
			margin-left:5px;
			border:none;
			}
			.summary-filters div div{
				width:auto;
				margin-left: 0;
				}
		.summary-filters.filters-box {
			border-top:1px solid #e8e8e8;			
			}
		.summary-filters div.separator{
			margin: 0 3px;
			}
	.summary-amount{
		float:right;
		text-align: right;
		margin-bottom:0.2em
		} 		
	.summary-amount .currency {
		font-size:11px;
		padding:3px;
		border:1px solid #ccc;
		text-decoration:none;
		border-radius:3px;
		
		margin-bottom:10px;
		text-shadow:1px 1px 0 #fff;
		color:#999;
		margin-left:10px;
		}
	
	.summary-amount .currency:hover {
	text-decoration:none;
	background:#fff;
	color:#333333;
	}
	
	.currency-actual {
	vertical-align: super;
	margin-right:3px
	}
	
	.currency-picker {
	background-color: #fff;
	border:1px solid #ccc;
	display: inline-block;
	position:absolute;
	margin-top: 7px;
	padding: 9px 9px 12px 0;
	z-index:999;
	border-radius:3px;
	right:0;
	}
	
	.currency-picker .arrow {
		width:14px;
		height:8px;
		background:url(../design/images-temp/currency-picker-arrow.png) no-repeat;
	}
	
	.summary-amount.total, .summary-amount .total {
	font-size:32px;
	padding:0 0.25em
	}

  .summary-amount.totalOriginal, 
  .summary-amount .totalOriginal {
  	border-top: 1px dashed #e8e8e8;
  	clear: both;
  	width: 25%;
    text-align:right;
    color: #999;
    font-size: 0.85em;
    line-height: 1em;
    padding: 0.25em 0;
  	}
/*
  	.summary-amount.totalOriginal:after, 
	.summary-amount .totalOriginal:after{
		content: " )";
		} 
  	.summary-amount.totalOriginal:before, 
	.summary-amount .totalOriginal:before{
		content: "( ";
		}
*/
ul.features {
	margin:2em 0 0;
	width:95%;
	background: transparent url(../images/getFamilyPlan.png) top right no-repeat;
	padding:10px 0 35px;
	}	
	ul.features li {
		width:50%;
		padding-left:30px;
		margin-bottom:1.6em;
		list-style:none;
		background:url(../images/check.png) no-repeat;
		font-size:16px;
		line-height:18px;
		}
		

/* Upgrade Plans page */
	.upgradePlan ul.features{
		background-image: none;
		padding-bottom: 1.2em
		}
	.upgradePlan img{
		margin:0 1.2em 1.2em;	
		float:right;
		}
	hr.upgradePlan{
		margin-top:2.4em;		
		padding-bottom:1.2em;
		border:none;
		border-top:1px dashed #ccc;
		}	

/* Get a Data plan features list*/
	.dataPlan ul.features{
		background-image: none;
		margin-bottom:-2.4em
		}
		.dataPlan ul.features li{
			width:100%;
			}
		
				
/* 	
	Get a family Plan form 
  Get a business Plan form 
	Get a Data plan form
*/
form.getFamilyForm,
form.getBusinessForm,
form.getDataPlanForm{
	margin:2em auto 2em 0;
	padding:1em 2em;
	background: #ffffe0;
	border: 1px solid #e6db55;
	line-height: 2.4em;
	}
	form.getBusinessForm p,
	form.getFamilyForm p{
		margin:0;
		}
	form.getFamilyForm span,
  form.getBusinessForm span,
	form.getDataPlanForm span{
		margin-right:0.5em;
		}
	form.getFamilyForm input.input,
  form.getBusinessForm input.input,
	form.getDataPlanForm input.input{
		width:26em;
		}
		form.getFamilyForm input.button,
    form.getBusinessForm input.button,
		form.getDataPlanForm input.button{
			width:auto;
			margin-left: -0.5em;
			margin-top: 1em;
			}
		form.getFamilyForm input[name="packDescription"],
		form.getBusinessForm input[name="packDescription"]{
			width:18.75em;
			}
		form.getFamilyForm input[type="radio"],
    form.getBusinessForm input[type="radio"],
		form.getDataPlanForm input[type="radio"]{
			width:auto;
			margin-right: 0.5em;			
			position:relative;
			}
		form.getFamilyForm .planPayment,
    form.getBusinessForm .planPayment,
		form.getDataPlanForm .planPayment{
			display:block;
			float:left;
			width:15em;
			margin:0.6em 2% 1.2em 0;
			padding:1.2em 0.6em;
			line-height:1.2em;
			border:1px solid #e5e5ca;
			background-color: #f2f2d6;
				/* rounded corners */
				-ms-border-radius: 5px; /* // IE 8 */
				-moz-border-radius: 5px; /* // Firefox */
				-webkit-border-radius: 5px; /* // WebKit & Safari */
				-khtml-border-radius: 5px;
				-o-border-radius: 5px;
				border-radius: 5px; /*css3 standard property*/
			}
			form.getFamilyForm .planPayment label,
      form.getBusinessForm .planPayment label,
			form.getDataPlanForm .planPayment label{
				}
			
			form.getFamilyForm .planPayment strong,
      form.getBusinessForm .planPayment strong,
			form.getDataPlanForm .planPayment strong{
				display:inline-block;
				max-width: 100%;
				font-size: 150%;				
				color: #e17200;
				color: #069;
				}
			form.getFamilyForm .planPayment span,
      form.getBusinessForm .planPayment span,
			form.getDataPlanForm .planPayment span{
				margin-left: 2em; 
				color: #555
				}
				
		form.getFamilyForm span.planDescription,
    form.getBusinessForm span.planDescription,
		form.getDataPlanForm span.planDescription{
			font-size: 80%
			}
		form.getFamilyForm hr,
    form.getBusinessForm hr,
		form.getDataPlanForm hr{
			border: 1px dashed #ffeeb2;
			}

/* Family pack welcome */

div.myFamilyPacks h2 a{
  font-size: 0.5em;
  vertical-align: middle;
  }

div.myFamilyPacks h2 .input{
  font-size: 1em;
  }

div.myFamilyPacks h2 .button{
  margin-left: 6px;
  vertical-align: text-bottom;
  }

div.myFamilyPacks h3{
	}
	
	form.inviteFamilyMembers input.memberEmail{
		width:20em;
		}
		span.role{
			font-weight: bold;
			color:#339966
			}	

	/* Lists */
	ul#familyMemberRole,
	ul#familyMemberRole li,
	ul#myFamilyPacks,
	ul#myFamilyPacks li,
	ul.fpack-member-list,
	ul.fpack-member-list li{
		list-style: none;
		list-style-type: none;
		margin-left: 0;
		}
		ul#familyMemberRole li span{
			display:inline-block
			}
	/* Pack's list and member's list	*/
	ul.fpack-list{
		background-color: #fafafa;
		border:1px solid #e8e8e8
		}	
	ul.fpack-member-list,
	ul.fpack-list,
	ul.fpack-list li{
		list-style: none;
		list-style-type: none;
		margin:0;
		padding:0;
		}
		ul.fpack-list li{
			border:1px solid transparent; /* fix height while hovering */
			padding:1em;
			/* gradients */
			background-image: linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -o-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -moz-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -webkit-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -ms-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0.6, #f7f7f7),			
				color-stop(0, #fafbfb),
				);
			}
		.hentry li.fpack-member-item{
			margin:0;
			padding:0.6em 0.6em 1.2em;
			min-height:1.2em;
			color:#333;
			border:1px solid #e8e8e8;
			border-top-color:#fff;
			/* gradients */
			background-image: linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -o-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -moz-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -webkit-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -ms-linear-gradient(top, #fafbfb 0%, #f7f7f7 60%);
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0.6, #f7f7f7),			
				color-stop(0, #fafbfb),
				);
			}
			.hentry li.fpack-member-item:first-child{
				border-top-color:#e8e8e8;
				
			}
		 .hentry li.fpack-member-item.fpack-member-self {
			 /* gradients */
			background-image: linear-gradient(top, #EFF8FA 0%, #ECF4F6 60%);
			background-image: -o-linear-gradient(top, #EFF8FA 0%, #ECF4F6 60%);
			background-image: -moz-linear-gradient(top, #EFF8FA 0%, #ECF4F6 60%);
			background-image: -webkit-linear-gradient(top, #EFF8FA 0%, #ECF4F6 60%);
			background-image: -ms-linear-gradient(top, #EFF8FA 0%, #ECF4F6 60%);
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0.6, #ECF4F6),			
				color-stop(0, #EFF8FA),
				);
			 }
			 
			 /*.change-role {
				 border:0;
				 background:0;
				 }
			*/
		 
			.fpack-name,
			.fpack-member-name{
				display: block;
				font-weight:bold;
				font-size:120%;
				margin-bottom:0.4em;
				float:left;
				margin-right:0.6em;
				}
			 .hentry li.fpack-member-item.fpack-member-self .fpack-member-name {
				 font-size:140%;
				 }
			 
			 .fpack-member-username{
				 color:#666;
				}
			.fpack-member-role{
				font-weight:bold;
				}

			.fpack-status,
			.fpack-member-status,
			.fpack-member-date,
			span.detailed{
				color:#666;
				font-size:90%
				}	
			.change-role {
				background:none;
				border:0;
				color:#339966;
				padding:0;
				text-decoration:underline;
				font-size:90%;
				font-family:Arial, Helvetica, sans-serif;
				}
				
			 .change-role:hover {
				 cursor:pointer;
				}
								
		ul.fpack-list li:nth-child(even){
			border-top:1px solid #e8e8e8;			
			}
			form.packsListForm,
			form.changeRole{
				display:inline-block;
				}
			form.packsListForm{
				margin-left:1em;
				float:right;
				}
			.fpack-member-item form{
				display:inline;
				}
			
				form.packsListForm input.small,
				.fpack-member-item form input.small{
					padding:0.35em 0.75em;					
					}
				.fpack-member-item form input.small{
					margin-top:-0.5em;
					}
.membersLeft{
	font-size:80%;
	color:#666;
	}	
.familyWelcome hr{
	border-color:#e8e8e8
	}

	/* Zuora checkout */
	.payment{
		width: 90%;
		margin: 1.2em auto
		}
		.payment iframe {
			width: 100%;
			height: 22em;
			}
		.payment iframe{
			overflow: hidden;
			}
			.confirmPayment{
				width: 95%;
				margin: -2em auto 0
				}
			.abouttopay{
				margin-bottom:1.2em
				}
			#payOption1,
			#payOption2{
				border: 1px solid #e8e8e8;
				width: 100%;
				padding: 1.2em 0.6em
				}
			#payOption2{
				border-top: none;
				margin-bottom: 1.2em
				}
				#payOption1 input,
				#payOption2 input{
					float: left;
					margin-right: 1.2em;
					margin-bottom: 0;
					}
					p.card{
						display: inline;
						margin-left: 5%;
						margin-bottom: 1.2em;
						font-size: 90%;
						color: #333;
						}
						p.card span{
							font-size:110%;
							font-weight: bold;
							color: #069;
							}
							
.ui-widget 
{
  font-size: 1em !important;
}


/* 
--------------------------------
Account Settings - Import&Export 
--------------------------------
*/

.importExport hr{
	border-bottom: 1px solid #e8e8e8
	}

.importExport a,
.importExport a:link,
.importExport a:visited,
.importExport a:hover,
.importExport a:active{
	display: block;
	padding: 0.5em;
	margin-bottom: 1.5em;
	border: 1px solid #e8e8e8;
	/* rounded corners */
		-ms-border-radius: 5px; /* // IE 8 */
		-moz-border-radius: 5px; /* // Firefox */
		-webkit-border-radius: 5px; /* // WebKit & Safari */
		-khtml-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px; /*css3 standard property*/
		}
.importExport a:hover{
	background-color: #f8f8f8;
	border: 1px solid #fff;
	text-shadow: 0 1px 1px #ccc;
	box-shadow: inset 0 2px 7px #d8d8d8;
	}
h3.authorized,
h3.notAuthorized{
	margin: 0;
	line-height: 1em;
	min-height: 2.5em;
	vertical-align: middle;
	}
	h3.authorized{
		background: transparent url('../images/check.png') center right no-repeat;
		width:90%;
		padding-right:10%
		}
	h3.authorized img,
	h3.notAuthorized img,
	h3.authorized img:hover,
	h3.notAuthorized img:hover{
		float: left;
		border: none;
		border: 1px solid #e8e8e8
		}		
	h3.authorized span,
	h3.notAuthorized span{
		float: left;
		padding: 0.75em 0 0 1em
		}
