/* 
Site layout has two parts:
	1) Containers that block out the page content
	2) Dynamic contnet includes
*/

/**********************************************************
Layout Grid
***********************************************************/
body 
	{         
	}
#mainContainer  			
	{   
	margin: auto;			/* centers table in Firefox */

	}	
	
/* --- Header --- */
#headerContainer	
	{ 
	position: relative;
    }	
#brandingContainer	
	{ 
    }	
#navContainer  	  			/* places right header image */
	{
	position: absolute;
	top:5px; right:0;
	text-align:right;
    }	
	
/* --- Content --- */
#subContentA				/* left column */
	{ 
 	text-align:right;
    }
	
#mainContent 	
	{ 
	padding: 0 15px 15px 15px;
    }
	
/* --- Footer --- */	
#footerContainer			/* tr */
	{
	text-align:center; 
    }
#navFooter	
	{ 
	margin: 1.5em;
    }	
	
/**********************************************************
Responsive Design Width
***********************************************************/
.line {display:block;clear:both;}
.span1of6 {width: 16%;margin:0px;}
.span2of6 {width: 32%;margin:0px;}
.span3of6 {width: 50%;margin:0px;}
.span4of6 {width: 68%;margin:0px;}
.span5of6 {width: 84%;margin:0px;}
.span6of6 {width: 100%;margin:0px;}

table td[class*="span"] {}
table td.span3of6.left_column {padding-right:2%}
table td.span2of6.left_column, table td.span2of6.middle_column {padding-right:1%;}

@media (max-width: 769px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    float: none;
    display: block;  
    width: 100%;
    margin-left: 0px;
    -moz-box-sizing: border-box;
	}
	.span1of6 {width: 100%;float:none;}
	.span2of6 {width: 100%;float:none;}
	.span3of6 {width: 100%;float:none;}
	.span4of6 {width: 100%;float:none;}
	.span5of6 {width: 100%;float:none;}
	.span6of6 {width: 100%;float:none;}
	table td[class*="span"] {display:block;}
}

/**********************************************************
Contact Forms
***********************************************************/

label.control-label {
	text-align: right;
	line-height: 20px;
	}	
@media (max-width: 769px) {
	label.control-label {text-align: left;}
}	
.form-actions {
	clear: both;
	display: block;
	text-align: center;
	}	
.formField, input.form-control {
    width: 95%;
    margin-left: 4px;
	}		
input.formField, input.form-control {
	border: none;
	background: transparent;
	border-bottom: 2px solid #121212;
	font-size: 18px;
	border-radius: 0px !important;
	box-sizing: content-box;
}

div.form-control, div.form-group {
	position: relative;
	padding-top: 20px;
}
div.form-control label, div.form-group label {
	position: absolute;
	top: 34px;
	left: 2%;
	transition: all .5s ease-in-out;
	color: #484848;
	z-index: 9;
}
.require.form-control label:after, .require.form-group label:after  {
	content: '*';
	}
.fb-radio-group label, .fb-radio-group.active label,
.fb-checkbox-group label, .fb-checkbox-group.active label {
	position: relative !important;
	color: #999999;
	top: 0px !important;
	left: 0px !important;
	font-size: 1em !important;
}
.fb-radio-group input[type="radio"] {
    visibility: visible !important;
    position: relative;
    left: 0px;
}
div.form-control.active label, div.form-control.filled label,
div.form-group.active label, div.form-group.filled label, 
div.form-group label.fb-date-label , div.form-group label.fb-select-label  {	
	top: 2px; 
	left: 0px;
	font-size: .7em;
	color: #999999;
}	
.formButton, .btn {
    padding: 5px 10px !important;
    border-radius: 20px !important;
    border: none;
    color: white;
    font-size: 30px !important;
    text-transform: uppercase;
    margin: 20px 0px;
	background: #005020 !important;
	text-shadow: none !important;
	transition: all .5s ease;
}
/**********************************************************
Dynamic Content
***********************************************************/

/* --- branding --- */
#logo
	{ 
    } 
#siteName
	{ 
	font-size:2.2em;
	line-height: 1.75em;
    } 
#siteTagline	
	{ 
	position:absolute; top:0px; right:0; 
    }		

/* --- basket total --- */
#basketTotal
	{ 		
	margin-top: 1em;
	text-align: right;
	}
#basketText
	{ 
    } 
		
/* --- breadcrumb trail --- */	
#navBreadcrumb		
	{ 
    } 

/* --- Page Menu left column --- */	
#navPages	
	{ 
	margin-top:15px;
    } 
	
/* --- login box --- */
#loginForm
	{
	float:right;
	text-align: left;
	width: 140px;
	margin:15px 0 20px 0;
	}
#loginForm fieldset
	{
	padding:.4em;
	}
#loginForm legend
	{
	}
#loginForm label
	{
	font-size: .8em;
	}
#loginForm .formField
	{
	width: 125px;
	}
.rememberme
	{
	margin: 2px 0 4px 0;
	}
.submit
	{
	text-align: center;
	}
	
#loginForm .formButton
	{
	width: 48%;
	}
#loginForm .forgotpassword
	{
	text-align: center;
	margin-top:5px;
	font-size: 10px;
	}
	
#navAccount  			/* --- When logged in --- */
	{
	margin: 0;
	padding: 5px 0 5px 20px;
	text-align: left;
	}
	
	
/* --- search --- */	
#searchBox input
	{ 
	margin-top: 1em;
	width: 150px;
    }
			
/* --- select menus--- */
#brandSelect, #productTypeSelect, #languageSelect, #currencySelect 
	{ 
	margin-top: 1.8em;
    } 
#brandSelect select, #productTypeSelect select	
	{ 
	width: 150px;
    } 
#languageSelect select, #currencySelect  select	
	{ 
	width: 150px;
    } 
form h4
	{
	font-size: 1em;
	}		
	
/* --- footer --- */
#copyright
	{ 
	margin-right: 0px;
    } 
#footerText 
	{ 

	margin-left: 0px;
    } 
	
/*============== video cover ============*/
.video-large {
	position: relative;
	width: 100%;
	padding: 0px;
	overflow: hidden;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,.5);
	}
.video-large a {
	padding: 0px;
	width: 100%;
	height: inherit;
	}	
img.video-icon {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0px;
	margin: -20% 0px;
	
	}	
.video-large a i {
    font-size: 24px;
    line-height: 40px;
    display: block;
    width: 60px;
    height: 40px;
    color: white;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px;
    text-align: center;
	background: rgba(0,0,0,.4)
	}
.video-large a:hover  i {
	background: #C61711;	
	}
a.adminLink	{
	clear: both;
	display: block;
	max-width: 150px;
	min-height: 2.0em;
	font-size: .9em !important;
	line-height: 2.0;
	background: none;
	box-shadow: inset -2px -2px 2px rgba(0,0,0,.3);
	border-radius: 3px;
	transition: ease .5s all;
	text-transform: uppercase;
	text-align: center;
	font-weight: 400;
	}
a.adminLink:hover {
	box-shadow: inset 2px 2px 2px rgba(0,0,0,.3);
	text-decoration: none;
	}
#adminLinks-cats a.adminLink	{
	display: inline-block;
	clear: none;
	float: none;
	width: auto;
	max-width: 9999px;
	border-radius: 0px;
	padding: 0px 10px;
	}
#adminLinks-cats {
	background-color: #FAFAFA;
	background-image: linear-gradient(to bottom, #FFF, #F2F2F2);
	border: 1px solid #D4D4D4;
	border-radius: 4px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
	}	
/* --- adminMenu --- */
#adminMenu {margin: 0;padding:0px;position:relative;}
#adminPanel {width: 100%;margin:0px;border-bottom:1px solid #000000;background:#36393D;padding: 0px 0px 0px 0px;background: url(../images/admin/ap-back.png)}
#adminPanelToggle {position: absolute; z-index:999;top: 5px; left: 10px;}
#admin-title {display: block;width: 980px;height:30px;margin: 0px auto;}
#action-tiles {float:right;display: block; height: 55px; background:rgb(46,43,48);border-radius: 10px 0px 0px 0px;  width:30%;color: white;text-align:right;}
#admin-title a {color:white}
ul.admin {margin:auto; width: 980px;padding:0px;text-style:none;background:rgb(46,43,48);border-radius: 5px 0px 0px 0px;box-shadow:-1px -1px 3px 1px rgb(0,0,0);}
.admin li {display:block;float:left;list-style-type:none;padding: 0px 0px;margin:0px;border-right:1px solid black;border-left:1px solid rgba(200,200,200,.5);}
.admin li:first-child{border-left:none;} 
.admin li.last-child {border-right: none;}
.admin a,.admin a:visited {display: block; color: #9baa58;text-decoration:none;padding:0px 10px;line-height: 25px;height: 25px;font-weight:400;font-size:12px;}
.admin a:hover {font-weight:400;color:white;box-shadow: inset 0px 0px 2px 2px rgba(0,0,0,.6);}
#adminPanel h1 {float:left;width: 40%;margin: 0px;text-indent: 20px;font-size:20px;line-height:30px;}	
#adminPanel h1 a {color: #B4BAA5;;border: none;font-weight:normal;text-shadow: 2px 2px 1px black;text-decoration: none}
#adminPanel h1 a:hover {color:white;}

#action-tiles .action a {
	float:right;
	position: relative;
	margin: 5px 2px;
	width: 40px;
	height:45px;
	display:block;
	transition: all ease 1s;
	line-height:14px;
	padding-right: 5px;
	}
#action-tiles .action a:after,
#action-tiles .support-help:after 			
	{position:absolute;display:block;bottom:3px;left:3px;width:9px;font-size:9px;height:9px;line-height:9px;color:rgba(255,255,255,.8);}
		
#action-tiles .tile {
	transition: all ease 1s;
	}
#action-tiles .action a:hover {
	width: 44px;
	height: 55px;
	margin: 0px 0px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	}	
#action-tiles [class^="fa-"],#action-tiles[class*=" fa-"], #action-tiles .fa	{display:block;font-size:14px; text-align:left;padding-left:5px;}
#action-tiles .action .action-text {display: none;}
#action-tiles .action .billing {display: none;}	
#action-tiles .action .pending {background: #9ABC32;}
#action-tiles .action .pending:after {content: "pending"}
#action-tiles .action .process {background: #1B6AAA;}
#action-tiles .action .process:after {content:"process"}
#action-tiles .action .response {background: #762C59;}
#action-tiles .action .response:after {content:"mail";}
#action-tiles .support-help {float: right;position: relative;margin: 5px 2px; display:block;width: 21px;height:21px;background: #B72610;text-align: center;padding:12px;}
#action-tiles .support-help:hover {padding:17px 14px;margin:0px;border-radius: 5px;} 
#action-tiles .support-help .help {display: block; width: 16px; height: 16px;line-height: 16px; font-size:13px;border: 2px solid white; font-weight: bold;border-radius: 50%;}
#action-tiles .support-help:after {content: "help"}
#action-tiles .welcome {float: right;position:relative;margin: 5px 4px 5px 2px; display:block;width: 90px;height:45px;background: #6FB3E0;text-align: center;cursor:pointer;}
#action-tiles .welcome .user-name {margin: 4px auto; width: 80px; }
#action-tiles .welcome .fa-caret-right {position: absolute; top: 15px; right: 4px; font-size:16px;transition: all ease-in .5s;}
#action-tiles .welcome #welcome-extras {
	display: block;
	height:0px;
	width:0px;
	overflow: hidden;
	background:#2E2B30;
	color:rgb(100,100,100);
	position: absolute; z-index:999; top:100%;left:0px;
	border-radius: 0px 0px 10px 10px; box-shadow: 2px 2px 2px 3px rgba(55,55,55,.4);
	transition: all ease-out .5s;
	}
#action-tiles .welcome #welcome-extras a {
	color: white;
	}	
#action-tiles .welcome:hover #welcome-extras {display: block;
	width: 70px;
	height: auto;
	overflow: auto;
	padding: 10px; 
	}
#action-tiles .welcome:hover .fa-caret-right	{transform:rotate(90deg);top:12px;}

#action-tiles .welcome .log a:hover {
	text-decoration: none;
	color: red;
	}
.fa-share {float: right;}	

.impersonateBar {
	background: black;
	text-align: center;
	padding: 2px 0px;
	display: block;
	}
.impersonateBar a {	color: white;}


@media (max-width: 979px) {
	ul.admin, #admin-title {width: 100%;}
	#adminPanel h1 {text-indent: 50px; width: 45%}
	#action-tiles {height: 30px; width: 50%;}
	#action-tiles .action a, #action-tiles .tile {height: 25px;}
	#action-tiles .support-help {padding:4px 12px;height:17px;}
	#action-tiles .support-help:hover {padding:9px 14px;}
	#action-tiles .action a:after, #action-tiles .support-help:after {display:none;}
	#action-tiles [class^="icon-"],#action-tiles[class*=" icon-"]	{display:block;font-size:10px; text-align:left;padding-left:5px;}
	#action-tiles .action a:hover {height: 35px;}
	#action-tiles .welcome .pre-text {display: none;}
	#action-tiles .welcome .fa-caret-right { top: 5px;}
	#action-tiles .welcome:hover .fa-caret-right {top: 3px;}
}	

@media (max-width: 767px) {
	.admin li {display: block;float: none;width: 100%;border: none;}
	ul.admin {box-shadow: none;}
	}
@media (max-width: 480px)	{
	#action-tiles {display: none;}
	#adminPanel h1 {width: 100%; }
	}