/* ===================================================== */
/*                                                       */
/*            Theme developed by ipsfocus.com            */
/*                                                       */
/*   Need support? Visit the official customer forums!   */
/*            https://www.ipsfocus.com/forums/           */
/*                                                       */
/* ===================================================== */

/*
	----------------
	Global
	Header
	User links
	Navigation
	Dropdown navigation menus
	Search
	Main Elements
	Sidebar and Widgets
	Topic View
	----------------
*/

.tee body{
	content: 'Color picker';
}

.tee .content-wrap{
	content: 'Reset to default';
}

/*
	----------------
	- Global
	----------------
*/


/* If the theme picker is enabled, set the image behaviour. Otherwise show a white overlay unless an image is uploaded, which takes preference */
{{if theme.focus_picker}}

	body{
		background-position: 50% 0;
		background-attachment: fixed;
		background-size: cover;
	}

{{else}}

	body{
		
		{{if theme.picker_i1}}
			background-color: {theme="picker_c1"};
			background-image: url('{theme="picker_i1"}');
			background-position: 50% 0;
			background-attachment: fixed;
			background-size: cover;
		{{else}}
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
		{{endif}}
		
	}

{{endif}}

@media screen and (min-width:980px){
	
	body{
		padding-top: 10px;
	}
	
}

/*
	----------------
	- Header
	----------------
*/

.ipsApp #header {
	background-color: {theme="header"};
	background-image: linear-gradient(to bottom,
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.04) 50%,
		rgba(255,255,255,0.07) 50%,
		rgba(255,255,255,0.07) calc(50% + 1px),
		rgba(255,255,255,0) calc(50% + 1px),
		rgba(0,0,0,0) 75%,
		rgba(0,0,0,0.08) 100%
	);
	box-shadow: inset rgba(255,255,255,0.1) 0px -1px 0px;
}

@media screen and (min-width:980px){
	
	#ipsLayout_header,
	#header{
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}
	
}

.logo{
	font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
    padding: 0 25px;
}



/* Sticky header */
{{if theme.feature_2}}
@media screen and (min-width: 980px) {

	@supports ( (position:-webkit-sticky) or (position:sticky) ) {

		#ipsLayout_header{
			top: -{theme="logoheight"}px;
			position: -webkit-sticky;
			position: sticky;
			z-index: 20;
		}
			
		/* Push sticky elements and scroll-to elements below fixed header */
		.ipsApp .ipsSticky_top{
			transform: translateY({theme="navigationheight"}px);
		}
		a[id^="comment-"]{
			top: -{expression="theme.navigationheight + 1"}px;
		}
		.cPostRating_controls{
			top: {expression="theme.navigationheight + 10"}px;
		}
		.focus-sticky-author .cAuthorPane_info{
			top: {theme="navigationheight"}px;
		}
		
	}

}
{{endif}}


/*
	----------------
	- User links
	----------------
*/

html[dir='ltr'] .user-links{ padding: 0 0 0 45px; }
html[dir='rtl'] .user-links{ padding: 0 45px 0 0; }

#elUserNav{
	color: {hextorgb="main_nav_font" opacity="1"};
	border: 1px solid rgba(255,255,255,0.1);
	border-width: 0 0 0 1px;
}

html[dir='rtl'] #elUserNav{
	border-width: 0 1px 0 0;
}

	#elUserNav > li{
		border-radius: 0px;
		border-color: rgba(255,255,255,0.1);
	}
	
		/* Hover */
		#elUserNav > li:hover{
			background: rgba(0,0,0,0.2);
		}



/*
	----------------
	- Navigation
	main_nav: tab background
	main_nav_font: link colour
	main_nav_tab: dropdown background
	main_nav_tab_font: dropdown link
	----------------
*/

.focus-nav{
	padding: 0 4px;
}

.nav-bar{
	/* background: {theme="main_nav"}; */
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
}

.ipsNavBar_primary{
	color: {hextorgb="main_nav_font" opacity="0.6"};
}

	.ipsNavBar_primary > ul > li{
		font-size: 1.3rem;
	}

	.ipsApp .ipsNavBar_primary > ul > li > a{
		padding: 0 15px;
		border-radius: 4px;
		transition: all ease-in-out 0.25s;
		box-shadow: inset 0 1px 0px rgba(255,255,255,0);
	}
		
		/* Hover link */
		.ipsApp .ipsNavBar_primary > ul > li:hover > a{
			background: linear-gradient(to bottom, {hextorgb="main_nav_font" opacity="0.12"} 0%, {hextorgb="main_nav_font" opacity="0.04"} 100%);
			box-shadow: inset 0 1px 0px rgba(255,255,255,0.1);
		}
		
		/* Active link */
		.ipsApp .ipsNavBar_primary > ul > li[data-active] > a{
			background: rgba(0,0,0,0.3);
			box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 5px 15px rgba(0,0,0,0.4);
			font-weight: bold;
		}



/*
	----------------
	- Dropdown navigation menus
	----------------
*/
	
.ipsNavBar_secondary{
	color: {theme="main_nav_tab"}; /* Background and arrow */
	box-shadow: rgba(0,0,0,0.26) 0px 8px 20px, rgba(0,0,0,0.1) 0px 2px 2px;
}

	/* Dropdown menu links */
	.ipsNavBar_secondary > li > a:hover{
		background: {hextorgb="main_nav_tab_font" opacity="0.05"};
	}



/*
	----------------
	- Search
	----------------
*/

.ipsfocus-search{
	margin: 0 15px;
}

@media screen and (min-width:980px){
	
	#elSearch{
		color: {hextorgb="main_nav_font" opacity="1"};
		background: {hextorgb="main_nav_font" opacity="0.15"};
		background-image: linear-gradient(to bottom, {hextorgb="main_nav_font" opacity="0.08"} 0%, {hextorgb="main_nav_font" opacity="0"} 100%);
		box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px;
		border-radius: 3px;
	}

}



/*
	----------------
	- Breadcrumb navigation
	----------------
*/

.ipsApp .ipsBreadcrumb{
	color: {theme="link"};
	background: {theme="area_background_reset"};
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
	border-color: {theme="page_background"};
	border-radius: 3px;
}

.ipsApp .ipsBreadcrumb_bottom{
	border-radius: 0;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

/* Border width */
.ipsBreadcrumb:before{ border-width: 1px; opacity: 0.3; }
.ipsBreadcrumb_bottom:before{ border-width: 1px 0 0 0; }
	


/*
	----------------
	- Background Picker
	----------------
*/

{{if theme.focus_picker}}

	.ipsfocus_bg1 body{
		background-color: {theme="picker_c1"};
		{{if theme.picker_i1}}background-image: url('{theme="picker_i1"}');{{endif}}
	}
	
	.ipsfocus_bg2 body{
		background-color: {theme="picker_c2"};
		{{if theme.picker_i2}}background-image: url('{theme="picker_i2"}');{{endif}}
	}
	
	.ipsfocus_bg3 body{
		background-color: {theme="picker_c3"};
		{{if theme.picker_i3}}background-image: url('{theme="picker_i3"}');{{endif}}
	}
	
	.ipsfocus_bg4 body{
		background-color: {theme="picker_c4"};
		{{if theme.picker_i4}}background-image: url('{theme="picker_i4"}');{{endif}}
	}
	
	.ipsfocus_bg5 body{
		background-color: {theme="picker_c5"};
		{{if theme.picker_i5}}background-image: url('{theme="picker_i5"}');{{endif}}
	}
	
	.ipsfocus_bg6 body{
		background-color: {theme="picker_c6"};
		{{if theme.picker_i6}}background-image: url('{theme="picker_i6"}');{{endif}}
	}

{{endif}}



/*
	----------------
	- Main Elements
	----------------
*/

#ipsLayout_body{
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.content-wrap{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.94) 100%);
	border-radius: 4px;
	box-shadow: 0 1px 16px rgba(0,0,0,0.2);
}

.content-padding{
	padding: 10px;
}

/* Box styles */
.ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments{
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: rgba(0,0,0,0.1) 0px 1px 4px;
	border-radius: 3px;
	background-clip: padding-box;
}

	/* Box background */
	.ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ),
	.ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments{
		background-color: {hextorgb="area_background_reset" opacity="1"};
	}
	


/* Maintitle */
.ipsType_sectionTitle{
	border: 1px solid rgba(0,0,0,0.1);
	border-bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%,rgba(255,255,255,0) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	border-radius: 3px 3px 0 0;
	font-size: 1.3rem;
	font-weight: bold;
	padding: 9px 12px;
	margin: -1px -1px 0 -1px;
}



/*
	----------------
	- Sidebar and Widgets
	----------------
*/

.ipsWidget.ipsWidget_vertical .ipsWidget_title,
.ipsWidget.ipsWidget_horizontal .ipsWidget_title{
	border: 1px solid rgba(0,0,0,0.1);
	border-bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%,rgba(255,255,255,0) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	border-radius: 3px 3px 0 0;
	font-size: 1.3rem;
	font-weight: bold;
	padding: 9px 12px;
	margin: -1px -1px 0 -1px;
}



/*
	----------------
	- Topic View
	----------------
*/

/* -- Post headers -- */
.cPost:before,
#ipsLayout_body .cAuthorPane_mobile{
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%,rgba(255,255,255,0) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
	margin: -1px -1px 0 -1px;
}

.cPost:before{
	box-sizing: content-box;
}


/*
	----------------
	- Other
	----------------
*/

.ipsfocus_megaFooter{
	border-color: rgba(0,0,0,0.15);
	background-clip: padding-box;
}

.ipsButtonBar,
#elMobileNav{
	background-image: linear-gradient(to bottom, {hextorgb="button_bar" opacity="0.4"} 0%, {hextorgb="button_bar" opacity="0.4"} 100%);
}

#elMobileNav li:not(#elMobileBreadcrumb){ position: relative; }

/*
	----------------
	- Color Picker
	----------------
*/

.ipsfocus_toggleColour{
	position: relative;
}

.ipsApp input.jscolor{ font-size: 16px; }

	.jscolor{
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		cursor: pointer;
		opacity: 0;
		padding: 0;
		border: 0;
		height: {theme="userheight"}px;
		width: {theme="userheight"}px;

	}
	
		.jscolor:focus{
			visibility: hidden;
		}

{{if !theme.focus_picker}}body,{{endif}}
.ipsApp #header,
.nav-bar,
.content-wrap,
.ipsType_sectionTitle,
.ipsWidget.ipsWidget_vertical .ipsWidget_title,
.ipsWidget.ipsWidget_horizontal .ipsWidget_title,
.ipsItemStatus.ipsItemStatus_large,
.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read,
.cPost:before,
#ipsLayout_body .cAuthorPane_mobile,
.focus-post-buttons .cTopic .ipsComment_controls a,
.focus-post-buttons .cTopic .ipsComment_controls .ipsButton,
.ipsButtonBar,
html .ipsApp .ipsBox .ipsBox .ipsWidget_title,
html .ipsApp .ipsTabs_panels .ipsBox .ipsWidget_title,
html .ipsApp .ipsBox .ipsBox .ipsType_sectionTitle,
html .ipsApp .ipsTabs_panels .ipsBox .ipsType_sectionTitle,
#elMobileNav,
.ipsApp .ipsButton_important{
	background-color: {theme="page_background"};
}

.ipsApp .ipsBreadcrumb{
	border-color: {theme="page_background"};
}