/* Helpful Classes */
.small-link:link,
.small-link:visited{
	font-size: 11px;
	color:#666;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
}
.small-link:hover{
	text-decoration: underline;
	color:#666;
}
.link 			{ text-decoration: underline; cursor: pointer;}
.link:link		{ color:#333333; }
.link:visited	{ color:#000000; }
.link:active	{ color:#999999 }
.link:hover		{ color:#333333; }

.align-center{
	text-align:center;
}

/* =Clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* =Forms */
.textfield{
	width:200px;

}
.hidden{
	display:none;
}
a.button:hover{
	color:#fff;
}
.button{
	background-color:#666;
	border:1px solid #333;
	color:#ffffff;
	font-size:.9em;
	padding:2px 6px;
	margin:0;
	cursor:pointer;
	text-decoration: none;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
}

.cta-button,
a.cta-button{
	color:#fff;
	font-weight: bold;
	font-size:16px;
	padding:5px 12px 5px;
	border:1px solid #81b035;
	text-decoration: none;
	cursor:pointer;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	margin:2px 0 3px 0;

	background: #9bcc14; /* Old browsers */
	background: -moz-linear-gradient(top,  #a8de14 0%, #9bcc14 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8de14), color-stop(100%,#9bcc14)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a8de14 0%,#9bcc14 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a8de14 0%,#9bcc14 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a8de14 0%,#9bcc14 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #a8de14 0%,#9bcc14 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8de14', endColorstr='#9bcc14',GradientType=0 ); /* IE6-8 */

	text-shadow: 0 1px 3px #333;
    filter: dropshadow(color=#333, offx=0, offy=1);

    -webkit-box-shadow:  0 1px 3px 0 #999999;
	-moz-box-shadow:  0 1px 3px 0 #999999;
    box-shadow:  0 1px 3px 0 #999999;
}

a.cta-button:hover{
	text-decoration: none;
}
.cta-button:active,
a.cta-button:active{
	margin:4px 0 1px 0;
	text-decoration: none;
}


/* =OOPC (Order: One Page Checkout) */
	#basket-contents h2{
		margin:0;
	}

	.opc-section{
		border:1px solid #ddd;
		float:left;
		margin:0 0 10px 0;
		padding:7px;
		width: 475px;

		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;

		-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	}
		.opc-section h2{
			color:#555;
			background:#f5f5f5;
			border:1px solid #d9d9d9;
			padding:4px 6px 2px 6px;
			margin:0 0 10px 0;

			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
		}
			.opc-section h2.loading-content{
				background:#f5f5f5 url('images/gif_circular_black.gif') no-repeat 99% 4px;
			}

	#opc-form label,
	#opc-form #payment-fields label{
		float: left;
		width: 150px;
		white-space: nowrap;
		text-align: right;
		padding: 4px 5px 3px 0;
		clear: both;
	}
/* =Customer Fields */

	#opc-form #opc-form{
		display:none;
	}
	#opc-form .customer-fields-label{
		float:none;
		font-size:12px;
		font-weight:normal;
	}
	#opc-form .login-section {
		font-size: 11px;
		margin: 10px;
		border-bottom: 1px solid #eee;
		padding: 0 0 10px 0;
	}

		#opc-form .login-lightbox{
			display:none;
		}

		#opc-form .login-lightbox-label{
			width:100px;
		}

		.CreateAccount_Row{
			font-size:11px;
		}
	#opc-form #customer-fields{
		margin:0 10px 0 0;
	}
		#opc-form #ship-to,
		#opc-form #bill-to{
			float:none;
			width:auto;
		}
		#opc-form #shipping_fields,
		#opc-form #billing_fields{
			margin:5px 0;
		}	
			#opc-form .textfield,
			#opc-form select,
			#opc-form #payment input[type="text"],
			#opc-form .textarea{
				border:1px solid #ddd;
			}
			#opc-form .textfield,
			#opc-form #payment input[type="text"]{
				width: 170px;
				margin: 0 0 4px 0;
				height: 20px;
			}
			#opc-form .textarea{
				width:170px;
				min-height: 40px;
			}
			#opc-form select{
				padding:4px;
				margin: 0 0 4px 0;
				width: 172px;
			}
	#opc-form .form-row-error{
		background: url('images/icon_invalid.png') no-repeat 340px 4px;
	}

		#opc-form .form-row-error label{
			color:red;
		}
	#opc-layout-table{
		border-collapse: collapse;
	}
	#opc-layout-table td{
		vertical-align: top;
	}
	.opc-left-column {
		width: 50%;
	}


/* =Basket Contents */
	#opc-form .basket-contents-container{
		max-height: 250px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	#opc-form #basket-contents{
		border:1px solid #ddd;
		margin:0 0 10px 0;
		/* width:455px; */
	}
		#opc-form #basket-contents .basket-title{
			font: bold 1.3em Arial, Helvetica, Verdana, sans-serif;
		}
		#opc-form #basket-contents td{
			border-bottom:1px solid #f5f5f5;
			border-right:1px solid #f5f5f5;
		}
			#opc-form #basket-contents td.item-name{
				border-left:none;
			}
			#opc-form #basket-contents td.basket-charge-prompt{
				border-bottom:0;
				text-align: right;
			}
		#opc-form #basket-contents .basket-heading td{
			border:none;
			border-bottom:1px solid #ddd;
		}
		#opc-form #basket-contents.non-editable td,
		#opc-form #basket-contents.editable td{
			background: transparent;
		}
		#opc-form #basket-contents .item-image{
			float:left;
			margin:0 5px 0 0;
			max-height: 50px;
			max-width: 50px;
		}
		#opc-form #basket-contents .item-cont{
			float:left;
			width:75%;
		}
		#opc-form #basket-contents .item-name p{
			margin:0;
		}
		#opc-form #basket-contents p.item-name{
			font-weight: bold;
			width:75%;
		}

		#opc-form #basket-contents .item-total{
			border-right:none;
		}

/* =Additional Information Section */
	#linebreakpadding{
		display:none;	
	}


	/* =Shipping Fields */
	#opc-form #shipping{

	}

	#opc-form #shipping-notice{
		font-style: italic;
	}

	/* =Payment Fields */
	#opc-form #payment{
		margin:0 0 10px 0;
	}

	#opc-form .secure-icon{
		vertical-align:bottom;
	}
	

	/* =Other */
	#opc-form .continue-button{
		clear:none;
		margin:
	}

	#opc-form #gift-cert,
	#opc-form #coupon{
		z-index: 10;
		position: relative;
	}

	#opc-form .link-trigger{
		position: relative;
		left: -35px;
		z-index: 9;
	}

#opc-form .error-message{
	color:#B94A48;
	background:#F2DEDE url('images/icon_invalid.png') no-repeat 6px 4px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #F2DEDE;
	border: 1px solid #EED3D7;
	padding:5px 5px 5px 30px;
	margin:10px auto;
	width:100%;
	box-sizing: border-box;

	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
}
	#opc-form #cvv_Row input[type="text"],
	#opc-form #cvv_Row input{
		width:30px !important;
	}

	#opc-form #payment #cvv_Row.form-row-error{
		background: url('images/icon_invalid.png') no-repeat 275px 4px;
	}

/* ============ Plugins ============ */

/* ---- =Plugins: Lightbox Me ---- */

/* ------------------------ lightbox-me layout ------------------------ */
	.lightbox {
		background: #fff;
		border: 1px solid #ddd;
		display: none;
		padding: 15px;
		text-align: left;
		padding:35px;
		
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;

		-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
	}
		.close-lightbox,
		a.close-lightbox:link,
		a.close-lightbox:visited{
			cursor: pointer;
			position: absolute;
			color:#999;
			top: 10px;
			right: 15px;
			z-index: 1050;
			font-size: 24px;
			text-decoration: none;
		}

		.close-lightbox:hover,
		a.close-lightbox:hover {
			color:#333;
			text-decoration: none;
		}


/* ---- =Plugins: qTip2 ---- */
/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: nightly
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue May 29 11:43:26.0000000000 2012
*/

/* Core qTip styles */
.ui-tooltip, .qtip{
	position: absolute;
	left: -28000px;
	top: -28000px;
	display: none;

	max-width: 280px;
	min-width: 50px;
	
	font-size: 10.5px;
	line-height: 12px;

	border-width: 1px;
	border-style: solid;
}

	/* Fluid class for determining actual width in IE */
	.ui-tooltip-fluid{
		display: block;
		visibility: hidden;
		position: static !important;
		float: left !important;
	}

	.ui-tooltip-content{
		position: relative;
		padding: 5px 9px;
		overflow: hidden;

		text-align: left;
		word-wrap: break-word;
		overflow: hidden;
	}

	.ui-tooltip-titlebar{
		position: relative;
		min-height: 14px;
		padding: 5px 35px 5px 10px;
		overflow: hidden;

		border-width: 0 0 1px;
		font-weight: bold;
	}

	.ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0 !important; }

		/*! Default close button class */
		.ui-tooltip-titlebar .ui-state-default{
			position: absolute;
			right: 4px;
			top: 50%;
			margin-top: -9px;

			cursor: pointer;
			outline: medium none;

			border-width: 1px;
			border-style: solid;
		}
		
		* html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */

		.ui-tooltip-titlebar .ui-icon,
		.ui-tooltip-icon .ui-icon{
			display: block;
			text-indent: -1000em;
		}

		.ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}

			.ui-tooltip-icon .ui-icon{
				width: 18px;
				height: 14px;

				text-align: center;
				text-indent: 0;
				font: normal bold 10px/13px Tahoma,sans-serif;

				color: inherit;
				background: transparent none no-repeat -100em -100em;
			}


/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.ui-tooltip-focus{

}

/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
.ui-tooltip-hover{
	
}


/*! Default tooltip style */
.ui-tooltip-default{
	border-color: #F1D031;
	background-color: #FFFFA3;
	color: #555;
}

	.ui-tooltip-default .ui-tooltip-titlebar{
		background-color: #FFEF93;
	}

	.ui-tooltip-default .ui-tooltip-icon{
		border-color: #CCC;
		background: #F1F1F1;
		color: #777;
	}
	
	.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
		border-color: #AAA;
		color: #111;
	}

/* Tips plugin */
.ui-tooltip .ui-tooltip-tip{
	margin: 0 auto;
	overflow: hidden;
	z-index: 10;
}

	.ui-tooltip .ui-tooltip-tip,
	.ui-tooltip .ui-tooltip-tip *{
		position: absolute;
		
		line-height: 0.1px !important;
		font-size: 0.1px !important;
		color: #123456;

		background: transparent;
		border: 0 dashed transparent;
	}
	
	.ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }

/*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.ui-tooltip-shadow{
	-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/*! Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.ui-tooltip-rounded,
.ui-tooltip-tipsy,
.ui-tooltip-bootstrap{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/**
 * Twitter Bootstrap style.
 *
 * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
 * Does not work with IE 7.
 */
.ui-tooltip-bootstrap{
	font-size: 13px;
	line-height: 18px;

	color: #333333;
	background-color: #ffffff;


	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);

	*border-right-width: 2px;
	*border-bottom-width: 2px;

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

	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
}

	.ui-tooltip-bootstrap .ui-tooltip-titlebar{
		font-size: 18px;
		line-height: 22px;

		border-bottom: 1px solid #ccc;
		background-color: transparent;
	}

		.ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
			right: 9px; top: 49%;
			border-style: none;
		}

	.ui-tooltip-bootstrap .ui-tooltip-icon{
		background:transparent;
	}

		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon{
			width: auto;
			height: auto;
			float: right;
			font-size: 20px;
			font-weight: bold;
			line-height: 18px;
			color: #000000;
			text-shadow: 0 1px 0 #ffffff;
			opacity: 0.2;
			filter: alpha(opacity=20);
		}

		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon:hover{
			color: #000000;
			text-decoration: none;
			cursor: pointer;
			opacity: 0.4;
			filter: alpha(opacity=40);
		}


/* IE9 fix - removes all filters */
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{
	filter: none;
	-ms-filter: none;
}
/**
 * Warning Tooltip Style.
 */

	.ui-tooltip-warning{
		color:#C09853;
		background:#FFFFDB;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		background-color: #fcf8e3;
		border: 1px solid #fbeed5;
	}

	.ui-tooltip-warning.ui-tooltip-bootstrap .ui-tooltip-titlebar{
		border-bottom: 1px solid #C09853;
	}

/**
 * Error Tooltip Style.
 */

	.ui-tooltip-error{
		color:#B94A48;
		background:#F2DEDE;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		background-color: #F2DEDE;
		border: 1px solid #EED3D7;
	}

	.ui-tooltip-error.ui-tooltip-bootstrap .ui-tooltip-titlebar{
		border-bottom: 1px solid #B94A48;
	}

/**
 * Success Tooltip Style.
 */

	.ui-tooltip-success{
		color:#468847;
		background:#DFF0D8;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		background-color: #DFF0D8;
		border: 1px solid #D6E9C6;
	}

	.ui-tooltip-success.ui-tooltip-bootstrap .ui-tooltip-titlebar{
		border-bottom: 1px solid #468847;
	}

/**
 * Info Tooltip Style.
 */

	.ui-tooltip-info{
		color:#3A87AD;
		background:#D9EDF7;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		background-color: #D9EDF7;
		border: 1px solid #BCE8F1;
	}

	.ui-tooltip-info.ui-tooltip-bootstrap .ui-tooltip-titlebar{
		border-bottom: 1px solid #3A87AD;
	}

/* ---- BEGIN: Table Scroll Plugin ---- */

.tablescroll_wrapper{
	border-bottom:1px solid #ddd;
}

/* ---- END: Table Scroll Plugin ---- */

body#OOPC div#main-content{
	background: #fff;
	text-align: left;
	padding:20px 0;
}

body#OOPC h1{
	font-size: 24px;
	margin: 0 0 10px 15px;
}

#opc_left{
	display:inline-block;
	width:410px;
	margin-left:15px;
}
#opc_left img{
	margin: 0 0 -1px -3px;
}
#opc_left div#customer-fields.opc-section{
	width:400px;
}

#opc_right{
	display: inline-block;
	vertical-align: top;
	width: 400px;
}

div#payment-fields select{width:120px;}

div#shipping.opc-section select{width:200px;}


/* Fixes for OOPC to be responsive */
@media (max-width: 979px) {
    #opc_left {
        width: 405px;
        margin:0 auto;
        display: block;
    }
        #opc_left div#customer-fields.opc-section {
            width: 475px;
            margin-bottom: 10px;
        }
    #opc_right {
        display: block;
        width: 405px;
        margin:0 auto;
    }
}
@media (max-width: 767px) {
    #opc_left,
    #opc_right,
    #opc_left div#customer-fields.opc-section,
    #opc-form #basket-contents,
    #opc-form #shipping,
    .opc-section,
    #opc-form #payment {
        width: 100%;
    }
    #opc-form label, #opc-form #payment-fields label {
        text-align: left;
        display: block;
        width: 100%;
        float: none;
    }
    #opc-form select,
    div#shipping.opc-section select {
        width: 93%;
    }
    div#payment-fields select {
        width: 40%;
    }
    #opc-form .textfield, #opc-form #payment input[type="text"] {
        width: 90%;
    }
        #OOPC .tablescroll_head,
        #OOPC .tablescroll_wrapper,
        #OOPC #basket-content-table,
        #OOPC .tablescroll_foot {
            width: 100% !important;
            overflow: inherit !important;
            height: 100% !important;
            
        }
        #OOPC .tablescroll .item-name {
            width: 45% !important;
        }
        #OOPC .tablescroll .item-quantity,
        #OOPC .tablescroll .item-price,
        #OOPC .tablescroll .item-total {
            width:15% !important;
        }
        #OOPC #opc-form #basket-contents .item-image {
            max-width: 24%;
            margin: 0 1% 0 0;
        }
}