﻿/*************************************
 * Homepage
 ************************************/ 
.icon_card_magic { color: #f18400 }
.icon_ebooks { color: #0095ce }
.icon_close_up_magic { color: #bebebe }
.icon_coin_magic { color: #f6d800 }
.icon_mentalism { color: #9bc800 }f
.icon_full_dvds { color: #00c9aa }

/***********************************
 * Paging controls
 ***********************************/
.paging
{
    clear: both;
	padding: 3px;
	list-style-type: none;
    margin:  0;
}

.paging li 
{
	float: left;
	margin: 0 4px 0 0;
	display: block;
}

.paging li a 
{
	padding: 6px 10px;
	background-color: #f2f2f2;
	text-decoration: none;
	float: left;
}

.paging li a:hover 
{
	color: #fff;
	background: #ddd;
}

.paging li.currentPage a
{
	color: #fff;
	background-color: #ca230f;
	padding: 6px 10px;
	float: left;
}

th.header { 
    background: url(/pics/icons/tablesort.png) center right no-repeat; 
} 

th.headerSortUp { 
    background: url(/pics/icons/tablesort-asc.png) center right no-repeat; 
}

th.headerSortDown { 
    background: url(/pics/icons/tablesort-desc.png) center right no-repeat; 
}

/*************************************
 * Forms
 ************************************/ 

.form { padding: 0; margin: 0; }
.form .field { width: 100%; float: left; }
.form .field_help { font-size: 90%; color: #777; margin: 0 0 0 138px; }
.form label, 
.form span.label { color: #444; margin-top: 2px; padding-right: 10px; width: 125px; display: block; float: left;  font-weight: bold; text-align: right; position: relative; }
.form label em, 
.form span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
.form input:focus,
.form input.error:focus, 
.form textarea:focus {	background-color: #FFC; border-color: #FC6; }
.form .upload { margin-bottom: -5em;}


.form .buttonrow { float: left; margin: 0 0 5px 138px; display: block; }
.form .cancel { font-size: 11px; color: #C00; padding-left: 10px; }
.form .field { margin-bottom: 1.5em; }
.form .uploader { margin-bottom: .5em !important; }
.form .field input,
.form .field textarea
{
	padding: 4px;
	margin-right: 1em;
	border: 1px solid #CCC;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.form .phone_field input { margin-right: 0; }

.form .xsmall { width: 50px; }
.form .small { width: 100px; }
.form .medium { width: 200px; }
.form .large { width: 300px; }
.form .xlarge { width: 400px; }

/* Label top styles */
.label-top .field label { width: 100%; display: block; text-align: left; }
.label-top .field span.label { width: 100%; display: block; float: left; text-align: left; position: relative; }
.label-top .field .field_help { margin-left: 0; font-size: 11px; }
.label-top .buttonrow { margin-left: 0; }
.label-top .selector { width: 100%; display: block; float: left; }

.form div.controlset label, 
.form div.controlset input { display: inline; float: none; }
.form .controlset label {font-size: 11px; font-weight: normal !important; }
.controlset { margin-bottom: 2.5em; float: left; }
.controlset .controlset-pad { width: 300px; float: left;  }

.checkboxList
{
    margin: 0;
    padding: 0;
}

.checkboxList input
{
	float: left;
	margin: 6px 5px 0 0 !important;
}

.checkboxList td
{
    border: none;
    padding: 0;
    margin: 0;
}

.checkboxList label
{
	float: left;
	text-align: left;
	font-weight: normal;
	width: 350px;
}
	
/* error message */
.error {
	/* supply height to ensure consistent positioning for every browser */
	height:20px;
	background-color:#ca2410;
	border:1px solid #f2f2f2;
	font-size:11px;
	color:#fff;
	padding:4px 10px !important;
	margin-left:-2px;


	/* CSS3 spicing for mozilla and webkit */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;

	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;
}

.error p {
	margin: 0 !important;
}

/*************************************
 * Sortable
 ************************************/ 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
	html>body #sortable li { height: 1.5em; line-height: 1.2em; }
	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
	
/*************************************
 * "Porlet"
 ************************************/ 
.portlet
{
	background: #FFF;	
	margin-bottom: 1.5em;
	position: relative;
	border: 1px solid #CCC;
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.10);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.10);
	box-shadow: 1px 1px 2px rgba(0,0,0,.10);
	
}
	
	.portlet-header
	{
		background: #F0F0F0 url(../images/portlet-header-bg.png) repeat-x 0 0;
		color: #444;
		text-align: left;
		padding: 15px 0 15px 0;
		width: 100%;
		cursor: pointer;		
		position: relative;
		overflow: hidden;
		border-bottom: 1px solid #CCC;
		-webkit-border-top-left-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		-moz-border-radius-topleft: 8px;
		-moz-border-radius-topright: 8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;

	}

		.portlet-state-closed .portlet-header { padding-bottom: 10px; }
	
		.portlet-header h3
		{
			color: #263849;
			padding: 0 0 0 10px;
			margin: 0;
		}
		
		.portlet-state-closed .portlet-header { -moz-border-radius: 6px; -webkit-border-radius: 6px; }
		
	.portlet-content { 	padding: 20px 15px 0 0; position: relative; }	
	
	.portlet-state-closed .portlet-content { display: none; }
	.portlet-state-closed h4 { border: none; }
	
		.portlet-toggle-icon
		{
			background: url(../images/portlet/portlet-arrow-close.png) no-repeat 0 0 !important;
			width: 12px;
			height: 5px;
			display: block;
			position: absolute;
			right: 15px;
			top: 16px;
		}
	
		.portlet-state-closed .portlet-toggle-icon { background: url(../images/portlet/portlet-arrow-open.png) no-repeat 0 0 !important; }
		
	.portlet-tab-nav
	{
		padding: 0;
		margin: 0;
		position: absolute;
		top: 11px;
		right: 10px;
	}
	
	.portlet-state-closed .portlet-tab-nav { display: none; }

		.portlet-tab-nav li
		{
			background: transparent;
			line-height: 2em;
			list-style-type: none;
			float: left;
			margin: 0 1em 0 0;
			-moz-border-radius: 100px;
			-webkit-border-radius: 100px;
			-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
			-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
			box-shadow: 1px 1px 1px rgba(0,0,0,.1);
			
		}
		
			.portlet-tab-nav li:hover { background: #DDD; }

			.portlet-tab-nav li a
			{
				color: #444;
				font-size: 11px;
				font-weight: bold;
				text-decoration: none;
				padding: 5px 8px;
				outline: none !important;
			}
			
				.portlet-tab-nav li a:hover {  }
							
		.portlet-tab-content { display: block; }
		
		.portlet-tab-nav .portlet-tab-nav-active
		{
			background-color: #263849 !important;
			border: 1px solid transparent;
		}
		
			.portlet-tab-nav-active a { color: #FFF !important; }
			
			.portlet-tab-nav-active a:hover { text-decoration: none !important; }
		
		.portlet-tab-content-active { display: block !imporant; }		
			.portlet-tab-nav .portlet-tab-nav-active  a { color: #0B66B9; text-decoration: none; }




/*************************************
 * Product listing
 ************************************/ 
.product-listing
{
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: solid #d3d1ca 1px;
    min-height: 180px; 
    height: auto;
}

.product-listing h2
{
	margin-bottom: 4px !important;
}

.product-thumbnail
{
    float: right;
    margin-left: 10px;
}

.product-link
{
    font-size: 28px;
}

.product-link:hover
{
	text-decoration: underline;
}

.product-creator
{
    font-weight: bold;
    color: #373737;
}

.product-creator a
{
    font-weight: bold;
    color: #373737;
    text-decoration: none;
}

.product-creator a:hover
{
    text-decoration: underline;
}

.product-price
{
    font-weight: bold;
    color: #773035;
}

.product-intro
{
    margin: 10px 0;
}

/*************************************
 * Progress bar
 ************************************/ 
.spinner{ float: left;}

.progress-percent{
  display: inline-block;
  margin: 2px 0 0 8px;
  float: right;
}

.progress-bar, .progress-bar-fill{
  height: 8px;
}

.progress-bar{
  margin-top: 7px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #ccc;
  overflow: hidden;
}

.progress-bar-fill{
  width: 78%;
  background: #59a152;
}

/*************************************
 * Table
 ************************************/ 
table { width: 100%; border: 0; margin-bottom: 2em;  }

	 table thead th
	 {
	 	font-size: 13px;
		text-align: left;
		padding: 5px 10px;		
		background-color: #263849 !important;		
		color: #FFF;		
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}		
	
	table td { vertical-align: top; }
	
	table tbody tr td { background: #FFF; border-bottom: 1px dotted #DDD; font-size: 1em; }

	table th { padding: 10px 0; }
	table tbody td { padding: 10px; }
	
	table tr. even td { background: #F9F9F9; }
	
	tr:nth-child(odd) { background-color:#F9F9F9; }
	tr:nth-child(even) { background-color:#FFF; }

.alphabetic-listing
{
	background-color: #f2f2f2;
	padding: 10px 0;
	margin-top: 10px;
}
	.alphabetic-listing a
	{
		padding: 5px;
		font-size: 16px;
	}

/* -------------------------------------------------------------- 
   Reports Page
-------------------------------------------------------------- */	
#big_stats 
{ 
	width: 100%; 
	padding: 0; 
	float: left; 
	margin-bottom: 3em;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px; 	
}

	*+html #big_stats { padding-bottom: 2em; }

.stat
{
	width: 29%;
	height: 50px;
	padding: 0 2%;
	float: left;
	position: relative;
	border-left: 1px dotted #CCC;
}

	*+html .stat { height: 100px; }

.stat:first-child { border: none; }

.stat h4
{
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 1.5em;
}

.stat .value
{
	font-size: 26px;
	font-weight: bold;
	color: #263849;
	line-height: 1em;
}

.stat .view_all
{
	font-size: 11px;
	position: absolute;
	right: 20px;
	bottom: 12px;
}


.reports_table .value { width: 100px; text-align: right; }
	.reports_table .value span { background: #F90; font-size: 11px; font-weight: bold; color: #FFF; width: 40px; text-align: center;  padding: 3px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
	
.reports_table td { padding: 5px; }


/* -------------------------------------------------------------- 
   FAQ Page
-------------------------------------------------------------- */
#search-bar
{
	background: #EEE;
	
	padding: 25px 25px 10px;
	margin: 0 auto;			
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	border: 1px solid #CCC;
	
}

#search-bar #form
{
	width: 550px;
	position: relative;
	margin: 0 auto;
}

	#search-bar h2 { margin-bottom: .5em; }

	#search-bar input
	{
		width: 350px;
		padding: 10px;
		border: 1px solid #999;
		margin-right: .5em;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		float: left;
		margin-top: 8px;
	}
		
	#search-bar .button_link
	{
		float: left;
	}
	
	
	.faq { margin-bottom: 3em; }
	.faq li { list-style-type: none; padding: 0; margin: 0; }
	
	.faq .answer
	{
		border-bottom: 1px dotted #CCC;
		margin: 2.5em 0 2.5em 2em;
	}
	
	.faq .plus_icon
	{
		color: #F90;
		font-weight: bold;
		font-size: 18px;
		display: inline;
		padding-right: 1em;
	}
	
	#no_results { color: #C00; display: none; }
	

/* -------------------------------------------------------------- 
   jDrop plugin
-------------------------------------------------------------- */
/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0px;
	position: absolute;
	background: white url('Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-vline.right { right: 0px; }
.jcrop-hline.bottom { bottom: 0px; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}





/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
