/* Minification failed. Returning unminified contents.
(2471,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2472,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2473,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2474,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2475,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2476,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2477,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2478,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2479,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2480,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2490,38): run-time error CSS1039: Token not allowed after unary operator: '-ob-bg'
(2491,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2496,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2502,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(2506,37): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(2523,28): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2525,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-shadow'
(2568,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2575,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(2592,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2602,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2612,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2715,28): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2716,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-shadow'
(2734,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-surface'
(2735,28): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2738,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-shadow'
(2777,46): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(2777,65): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary-2'
(2778,44): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(2791,24): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2792,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(2827,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-surface'
(2828,28): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2830,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-shadow'
(2848,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-surface'
(2849,28): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(2851,22): run-time error CSS1039: Token not allowed after unary operator: '-ob-shadow'
(2984,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3280,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3281,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3286,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3297,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3309,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3328,49): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3332,65): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3363,17): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3714,37): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3715,31): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3717,151): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(3721,39): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3732,40): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3733,34): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3736,105): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(3750,44): run-time error CSS1039: Token not allowed after unary operator: '-ob-primary'
(3751,38): run-time error CSS1039: Token not allowed after unary operator: '-ob-ink'
(3753,125): run-time error CSS1039: Token not allowed after unary operator: '-ob-border'
(4305,18): run-time error CSS1030: Expected identifier, found '.'
(4305,57): run-time error CSS1031: Expected selector, found ')'
(4305,57): run-time error CSS1025: Expected comma or open brace, found ')'
(4381,110): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4383,94): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4413,185): run-time error CSS1039: Token not allowed after unary operator: '-surface-muted'
(4416,181): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4424,88): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4427,79): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4430,74): run-time error CSS1039: Token not allowed after unary operator: '-surface-raised'
(4432,53): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(4432,148): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(4433,91): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(4436,55): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(4437,58): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
 */
/*! jQuery UI - v1.10.3 - 2013-11-04
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.slider.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}

/* Component containers
----------------------------------*/
.ui-widget {
	/*font-family: Verdana,Arial,sans-serif;*/
	/*font-size: 1.1em;*/
}
.ui-widget .ui-widget {
	/*font-size: 1em;*/
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	/*font-family: Verdana,Arial,sans-serif;
	font-size: 1em;*/
}
.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
	/*color: #222222;*/
}
.ui-widget-content a {
	/*color: #222222;*/
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
	color: #222222;
	/*font-weight: bold;*/
}
.ui-widget-header a {
	/*color: #222222;*/
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	/*font-weight: normal;
	color: #555555;*/
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	/*color: #555555;
	text-decoration: none;*/
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999;
	background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
	/*font-weight: normal;
	color: #212121;*/
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	/*color: #212121;
	text-decoration: none;*/
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	/*font-weight: normal;
	color: #212121;*/
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	/*color: #212121;
	text-decoration: none;*/
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fcefa1;
	background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
	/*color: #363636;*/
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	/*color: #363636;*/
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
	/*color: #cd0a0a;*/
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	/*color: #cd0a0a;*/
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	/*color: #cd0a0a;*/
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	/*font-weight: bold;*/
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	/*font-weight: normal;*/
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
	background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-state-default .ui-icon {
	background-image: url(images/ui-icons_888888_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url(images/ui-icons_454545_256x240.png);
}
.ui-state-active .ui-icon {
	background-image: url(images/ui-icons_454545_256x240.png);
}
.ui-state-highlight .ui-icon {
	background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
}
.ui-widget-shadow {
	margin: -8px 0 0 -8px;
	padding: 8px;
	background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
	border-radius: 8px;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
table{border-collapse:collapse; border-spacing:0}

/** Base Body Styles **/
body{background:url(../img/body-bg.jpg); color:#57595d; font:12px tahoma,arial,Helvetica,"Trebuchet MS",sans-serif}

h1, h3, h4, h5, h6{font-weight:bold; font-family:'Droid Sans',sans-serif;  color:#434853;  text-shadow:0px 1px 0px #fff; letter-spacing:-0.5px}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:17px}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:10px}

input, textarea{font-family:tahoma,arial; font-size:12px; color:#57595d; outline: none;}

a{text-decoration:none; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -transition:all 0.2s linear}
p{line-height:20px}
.no-margin{margin:0px !important}
.flleft{float:left !important}
.flright{float:right !important}

/** The Magnificent Clearfix:Updated to prevent margin-collapsing on child elements.  mp/bestclearfix **/
.clearfix:before, .clearfix:after{content:"\0020"; display:block; height:0; overflow:hidden}
.clearfix:after{clear:both}
/** Fix clearfix:blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page **/
.clearfix{zoom:1}

/*------------------------- SLIDER -------------------------*/
#slider{height:352px; margin-bottom:25px; overflow:hidden}
.my_asyncslider{list-style:none; margin:0px; padding:0px; padding-top:26px !important; height:352px !important}

.my_asyncslider img{position:absolute; z-index:-1 !important}

.my_asyncslider .description{width:400px; float:left; margin-top:10px; color:#ced1d8; line-height:25px; text-shadow:0px 1px 0px #000;  font-family:Arial,Helvetica,sans-serif; font-size:14px}
.my_asyncslider h1{margin-bottom:0px; font-size:32px; color:#fff; text-shadow:0px 1px 0px #000; line-height:normal; padding-bottom:30px; font-weight:bold}

.header-wrapper-light .my_asyncslider .description{color:#5b5e66; text-shadow:0px 1px 0px #fff}
.header-wrapper-light .my_asyncslider h1{ color:#3e414a; text-shadow:0px 1px 0px #fff}

.my_asyncslider .description p{font-size:14px}
#slide-01 .description{width:370px !important; margin-top:3px}
.partner{float:left; margin-right:20px}
.partner img, .clients img{position:relative !important; border:1px solid #eaeaea; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}
.partner img:hover, .clients img:hover{border:1px solid #f00; cursor:pointer; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}

.slogan{font-weight:100; color:#666; font-size:36px}
.my_asyncslider .description ul li{width:180px; font-size:11px; float:left; margin-right:20px; padding-bottom:3px; padding-top:3px; font-style:italic; border-bottom:1px solid #dedede}
.my_asyncslider >div{min-height:342px; width:960px; margin:0 auto; display:block; padding:0px 0px 10xp; z-index:0 !important}

 /* Prev Next Nav */
#asyncslider_next_prev_nav{position:relative}
#asyncslider_next_prev_nav li{color:#000; position:absolute}
#asyncslider_next_prev_nav li a{width:48px; height:48px}
#asyncslider_next_prev_nav li.prev a{background:url(../img/arrow-prev.png) no-repeat left}
#asyncslider_next_prev_nav li.next a{background:url(../img/arrow-next.png) no-repeat left}

.header-wrapper-light #asyncslider_next_prev_nav li.prev a{background:url(../img/arrow_left.png) no-repeat left}
.header-wrapper-light #asyncslider_next_prev_nav li.next a{background:url(../img/arrow_right.png) no-repeat left}

.bannerimg{float:left}
.banner-video{float:right}
.banner-video iframe{border: 5px solid #fff;}

.header-wrapper-light .banner-video iframe{border: 5px solid #3e414a;}

.viewPro{padding-top:50px}
.viewPro a{color:#fff; font-family:'Droid Sans',sans-serif;  font-weight:bold; text-shadow:0 -1px 0px #74951b; font-size:16px}
.viewPro a:hover{color:#e1ff7b}

/*------------------------- HEADER -------------------------*/
#announcement { padding: 12px; font-size: 20px; color: #fff; text-align: center; background-color: #f79646; }
#announcement a { color: #fff; text-decoration: underline; }
#announcement a:hover { text-decoration: none; }


/*------------------------- HEADER -------------------------*/
.header-wrapper, .header-wrapper-light{height:462px; width:auto; background:url(../img/top-bg.png) repeat-x}
.header-wrapper1, .header-wrapper-lightInner{height:173px; width:auto; background:url(../img/top-bg1.png) repeat-x}
.header-wrapper-light{background:url(../img/top-bg-light.png) repeat-x}

#title{width:960px; margin:0 auto; font-size:24px; color:#434853; line-height:85px;text-shadow:1px 1px 0 #FFF; letter-spacing:-0.5px}
#title span{color:#84878c}
#header{width:960px; margin:0 auto; height:77px}
a#logo{display:block; float:left; margin-top:18px}

/********* TOP NAV ********/
.sf-menu-wrapper {height:25px; float:right; margin:24px 0 0 0; font-family:Tahoma, Arial,Helvetica,sans-serif; font-weight:bold;}
.sf-menu-wrapper ul{margin:0; padding:0; list-style:none; line-height:25px}
.sf-menu-wrapper ul a{display:block; position:relative}
.sf-menu-wrapper li.sf-with-ul a {padding-right:18px}
.sf-menu-wrapper li li a.sf-with-ul{padding-right:0}
.sf-menu-wrapper ul li{float:left; position:relative; z-index:40; margin:0 12px 0 0}
.sf-menu-wrapper ul li:hover{visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu-wrapper ul ul{position:absolute; top:-9999em; width:180px; /* left offset of submenus need to match (see below) */}
.sf-menu-wrapper ul ul li{width:100%}

.sf-menu-wrapper ul li:nth-of-type(2) ul:nth-of-type(1) { width: 300px; }


/*  Make sub menus appear */
.sf-menu-wrapper ul li:hover ul, 
.sf-menu-wrapper ul li.sfHover ul{left:-1px; top:25px; /* match top ul list item height */z-index:589}

/* Hide all subs subs (4 levels deep) */
.sf-menu-wrapper ul li:hover li ul, 
.sf-menu-wrapper ul li.sfHover li ul, 
.sf-menu-wrapper ul li li:hover li ul, 
.sf-menu-wrapper ul li li.sfHover li ul, 
.sf-menu-wrapper ul li li li:hover li ul, 
.sf-menu-wrapper ul li li li.sfHover li ul{top:-9999em}

/* Displays all subs subs (4 levels deep) */
.sf-menu-wrapper ul li li:hover ul, 
.sf-menu-wrapper ul li li.sfHover ul, 
.sf-menu-wrapper ul li li li:hover ul, 
.sf-menu-wrapper ul li li li.sfHover ul, 
.sf-menu-wrapper ul li li li li:hover ul, 
.sf-menu-wrapper ul li li li li.sfHover ul{left:180px; /* match .nav ul width */top:10px}

.sf-menu-wrapper ul li.current-menu-item ul a{background:none !important}

/* top level skin */
.sf-menu-wrapper ul a{line-height:25px; float:left; font-size:14px; height:27px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 2px 12px; }

.sf-menu-wrapper ul ul a{float:none}

.sf-menu-wrapper ul a:hover, 
.sf-menu-wrapper ul li.sfHover a, 
.sf-menu-wrapper ul li.current-cat a, 
.sf-menu-wrapper ul li.current_page_item a, 
.sf-menu-wrapper ul li.current-menu-item a{text-decoration:none}

/* 2nd level skin */
.sf-menu-wrapper ul ul{padding:0 0 0 0; margin:12px 0 0 0;  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.2);  box-shadow:0 1px 3px rgba(0,0,0,0.2)}

.tz-light .sf-menu-wrapper ul ul{margin:16px 0 0 0}

/* 3nd level skin */
.tz-light .sf-menu-wrapper ul ul ul, 
.sf-menu-wrapper ul ul ul{padding:0; margin:-9px 0 0 -37px; }

.sf-menu-wrapper ul ul li{height:30px; line-height:30px; float:none; background:none}

.sf-menu-wrapper ul ul li:last-child{padding-bottom:10px}
.sf-menu-wrapper ul ul li:last-child a, .sf-menu-wrapper ul .sub-menu li:last-child a{background:none !important}

.sf-menu-wrapper ul ul li a{line-height:25px; height:25px; font-size:12px; text-shadow:none}

.sf-menu-wrapper ul ul li a:hover{padding-left:10px}

.sf-menu-wrapper a .sf-sub-indicator{width:9px; height:6px; text-indent:-9999px; position:absolute; margin:12px 0 0 5px; right:5px; top:1px}

.sf-menu-wrapper li.current-menu-parent a{padding-right:18px}

.sf-menu-wrapper li li a .sf-sub-indicator{width:3px; margin-top:11px; right:10px}

.ie7 .sf-menu-wrapper li li a .sf-sub-indicator{width:3px; right:10px; margin-top:5px}

.ie7 .sf-menu-wrapper li li.sfHover{margin-bottom:-3px}



.sf-menu-wrapper ul li li.current-menu-item a{background:none}

.sf-menu-wrapper ul li.sfHover ul a{}

.sf-menu-wrapper ul li.sfHover ul a:hover{}

.sf-menu-wrapper ul a{ -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none; color:#f1f5f9; margin-bottom:10px; }
.sf-menu-wrapper ul a:hover, 
.sf-menu-wrapper ul li.current-menu-item a{background:url("../img/nav_bg.png") repeat-x scroll 0 0 transparent;     color:#F1F5F9;     margin-bottom:10px; border-bottom:1px solid #42454D; -webkit-box-shadow:inset 0px 4px 4px 2px rgba(29,31,36,0.5); -moz-box-shadow:inset 0px 4px 4px 2px rgba(29,31,36,0.5); box-shadow:inset 0px 4px 4px 2px rgba(29,31,36,0.5)}

.sf-menu-wrapper ul ul{background:none repeat scroll 0 0 #2A2D35;     border-top:1px solid #42454D;     border-radius:4px 4px 4px 4px}

.sf-menu-wrapper ul ul li.sfHover ul a, 
.sf-menu-wrapper ul ul a{color:#7c7c7c}

.sf-menu-wrapper ul ul li.sfHover ul a:hover, 
.sf-menu-wrapper ul li li.sfHover a, 
.sf-menu-wrapper ul ul a:hover{color:#b6d346; -webkit-box-shadow:inset 0 0px 0px 0px rgba(29,31,36,0.6); -moz-box-shadow:inset 0 0px 0px 0px rgba(29,31,36,0.6); box-shadow:inset 0 0px 0px 0px rgba(29,31,36,0.6); background:url("../img/menu-border.jpg") repeat-x scroll center bottom transparent; border-bottom:0px solid #42454d;}

.sf-menu-wrapper ul li a .sf-sub-indicator{background:url(/img/drop.png) no-repeat}

.sf-menu-wrapper ul li li a .sf-sub-indicator{background:url(../img/drop_across_arrow.png) no-repeat}

.sf-menu-wrapper ul li li a:hover .sf-sub-indicator, 
.sf-menu-wrapper ul li li.sfHover a .sf-sub-indicator{ background:url(../img/drop_across_arrow.png) no-repeat -3px 0}

.sf-menu-wrapper ul .sub-menu a, .sf-menu-wrapper ul .sub-menu ul  a{margin:0 10px; background:url(../img/menu-border.jpg) repeat-x bottom; color:#fff; height:30px; line-height:30px; font-family:tahoma,arial; font-weight:normal; font-size:14px; padding:5px 8px 0 10px; }

/*------------------------- MIDDLE -------------------------*/
#middle-wrapper{width:960px; margin:0 auto; padding-top:10px}

/** RECENT WORK **/
.Rwork{position:relative; overflow:hidden; float:left; width:960px; height:325px}
.Rwork h3{color:#434853;  line-height:50px; margin-bottom:5px; background:url(../img/h3-bg.jpg) repeat-x bottom}

/** Carousel Gallery **/
.carousel ul{    position:absolute;     overflow:hidden;     margin:0;     padding:0;     list-style:none}

.no-js .carousel ul{position:static}

.carousel .mask{    position:relative;     overflow:hidden}

.carousel ul li{float:left; width:300px;     height:235px;     color:#fff; text-align:center; margin:0; cursor:pointer}
.carousel ul li img{padding:12px;  background:url("../img/recent_work.png") repeat-x scroll center center transparent; margin-bottom:10px}

.carousel .pagination-links{   list-style:none outside none;     margin:0;     padding:0;     position:absolute;     right:0;     top:23px}
 
.carousel .pagination-links li {	background:url(../img/dot.png) no-repeat center center;	display:block;	float:left;	height:18px;width: 18px;	margin-right:3px;	width:18px}

.carousel .pagination-links li a {display:block;	float:left;	height:18px;width: 18px;	margin-right:3px;	width:18px}

.carousel .pagination-links li a:hover{text-decoration:none}

.carousel .pagination-links li.current{background:url(../img/active.png) no-repeat center center transparent;  color:#fff}
 
.carousel .disabled{ color:gray;  cursor:default}

/** my carousel 2 **/
#my-carousel-2 .mask{width:960px}
#my-carousel-2 ul{height:325px; overflow:hidden}
#my-carousel-2 ul li{margin:0 26px 0 0; padding-top:8px}
.carousel ul li img:hover{background:url("../img/recent_work_hover.png") repeat-x scroll center center transparent}
.crausal-title{display:block; float:left; padding-top:8px; text-align:center;  width:100%}
.mask a{font-family:'Droid Sans',sans-serif; font-size:14px;  color:#434853; font-weight:bold; float:left; display:block}
.mask span{font-family:tahoma,Arial;  font-size:12px; color:#84878c; display:block; font-weight:normal}
.mask a:hover{color:#779e00}

/** DIVIDER **/
.divider{background:url(../img/divider.png) no-repeat top center; margin:11px 0 17px; clear:both; float:left; width:960px; height:25px}
.lighting{background:url(../img/lighting.png) no-repeat center center; width:25px; height:25px; margin:0 auto}
.lighting:hover{background:url(../img/lighting_hover.png) no-repeat center center; cursor:normal}
.divider1, .divider2{border-top:1px solid #cfd2d7; border-bottom:1px solid #fff; height:0px; margin:35px 0 14px; float:left; width:100%}
.divider2{margin:8px 0 19px}

/** WEB DESIGN **/
.webdesign{width:300px; float:left; padding:0px; margin-right:30px}
.webdesign h3{line-height:40px}
h3.green, h3.green{color:#779e00}
.webdesign .viewPro{padding-top:13px}

/** FROM BLOG - TESTIMONIOL **/
.Fblog, .tweets, .testimonial{width:300px; float:left; padding:0px; margin-right:30px; }
.Fblog h3, .tweets h3, .testimonial h3{line-height:60px}
.blogPost{float:left; width:300px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #c3c7cc}
.blogPost a{color:#57595D}
.thumb-img{float:left; padding:3px; border:1px solid #c3c7cc; margin-right:10px}
.thumb-img a{float:left}
.thumb-img img{-webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -transition:all 0.3s linear}

.date{color:#84878c}
span.comment a{color:#729700}
span.comment a:hover, .blogPost a:hover{opacity: 0.6; text-decoration: none;}

.view-blog{background:#f9f9f9; /* Old browsers */background:-moz-linear-gradient(top, #f9f9f9 0%,#f0f0f0 100%); /* FF3.6+*/background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f9f9f9),color-stop(100%,#f0f0f0)); /* Chrome,Safari4+*/background:-webkit-linear-gradient(top, #f9f9f9 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+*/background:-o-linear-gradient(top, #f9f9f9 0%,#f0f0f0 100%); /* Opera 11.10+*/background:-ms-linear-gradient(top, #f9f9f9 0%,#f0f0f0 100%); /* IE10+*/background:linear-gradient(top, #f9f9f9 0%,#f0f0f0 100%); /* W3C */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */ border:1px solid #d2d3d5; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:8px 16px; color:#84878c; float:right; font-family:Arial,Helvetica,sans-serif; font-size:12px}
 a.view-blog:hover{color:#729700}

/** TWEET BOX **/ 
.tweet-box{width:256px; float:left; background:url(../img/quote.png) no-repeat left 5px; padding-left:35px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #c3c7cc}
.tweet-box a{color:#3c9ccd; border-bottom:1px solid #dadde2; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
.tweet-box a:hover{border-bottom:0px solid #dadde2}
.time{color:#84878c; padding-top:7px; display:block}

/** CLIENT TESTIMONIOL **/
.client-box{float:left; width:300px; font-family:tahoma,arial; padding-bottom:27px}
.client-testimonial{background:#fff; border:1px solid #cfd2d7; float:left; width:261px; padding:18px; border-bottom:none; font-style:italic}
.client-bg{background:url(../img/testimoniol-bg.png) no-repeat bottom; height:25px; float:left; width:299px; line-height:34px; text-align:right}
.name{color:#719600}

/*------------------------- FOOTER -------------------------*/
#footer{height:251px; width:100%; background:url(../img/bottom-bg.png) repeat-x top; float:left; margin-top:20px; padding-top:29px; color:#f2f5f7; text-shadow:0 1px 0 #333640}
#footer-inner{width:960px; margin:0 auto}
.footer-details{width:240px; margin-right:21px; float:left; height:190px}
.footer-details h4{color:#fff; font-size:15px; text-shadow:0 1px 0 #181a1e; background:url(../img/btm-heading.png) repeat-x bottom; line-height:25px; padding-bottom:10px; margin-bottom:17px}

/** BOTTOM SOCIAL **/
.logo-btm{float:left; width:100%; padding-bottom:20px}
ul.social{float:left; width:100%; }
ul.social li{float:left; margin-right:5px; width:28px; height:28px}
ul.social li.facebook a{background:url(../img/social.png) no-repeat; width:28px; height:28px; float:left; display:block}
ul.social li.facebook a:hover{background-position:0px -32px;}
ul.social li.twitter a{background:url(../img/social.png) no-repeat -31px 0px; width:28px; height:28px; float:left; display:block}
ul.social li.twitter a:hover{background-position:-31px -32px}
ul.social li.vimeo a{background:url(../img/social.png) no-repeat -62px 0; width:28px; height:28px; float:left; display:block}
ul.social li.vimeo a:hover{background-position:-62px -32px}
ul.social li.linkdin a{background:url(../img/social.png) no-repeat -94px 0; width:28px; height:28px; float:left; display:block}
ul.social li.linkdin a:hover{background-position:-94px -32px}
ul.social li.flickr a{background:url(../img/social.png) no-repeat -125px 0; width:28px; height:28px; float:left; display:block}
ul.social li.flickr a:hover{background-position:-125px -32px}

/** BOTTOM ADDRESS **/
.address{padding-left:20pxa; color:#babdc0; font-family:tahoma,arial; padding-bottom:19px}
.address img{float:left; padding-right:7px}
.address strong{font-weight:bold; color:#fff; display:block; float:left; padding-bottom:8px; padding-right:4px; font-family:Arial,Helvetica,sans-serif}
.address a{color:#b6d346}
.address a:hover{color:#babdc0}

/** PHOTO STREAM **/
.Stream{float:left}
.Stream img{float:left; border:3px solid #606570; margin-right:14px; cursor:pointer; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.3s linear; -transition:all 0.2s linear;}
.Stream img:hover{ border:3px solid #90959f;}

/** NEWSLETTER **/
input.newsletter{background:url(../img/news-letter.png) no-repeat center center;  padding:14px 30px 14px 8px; border:none; width:185px; color:#babdc0; font-family:tahoma,arial; text-align:center;  text-shadow:0px 1px 0px #25272f; font-size:12px;}
.Finfo{width:960px; float:left; font-family:tahoma,arial; line-height:60px; color:#bbbdc0}
.Finfo a{color:#fff}
.copyright{float:left}
.designby{float:right}

/* ----------------  About US ------------------------ */
.leftsec{width:715px; float:left; margin-right:24px; font-family:tahoma,arial}
.leftsec h3, .rightsec h3, .blogright h3, .related-post h3, .comments-sec h3, #TastingNotes h3, .respond h3{color:#434853; background:url(../img/h3-bg.jpg) repeat-x bottom; line-height:48px; margin-bottom:15px; font-size:18px; float:left; width:100%}
.whowe{border:1px solid #bec2c8; padding:5px; float:left; margin-right:16px}
.detail p a{color:#729700; border-bottom:1px solid #dadde2; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
p a:hover{border:none}
.detail, .team{width:715px; float:left; margin-right:25px}

/** MEMBER **/
.member{float:left; width:345px; margin-right:25px; margin-bottom:27px}
.team-img{float:left; border:1px solid #bec2c8; padding:3px; margin-right:18px}
.member strong{color:#729700; font-weight:bold; font-size:14px; display:block; font-family:Arial,Helvetica,sans-serif}
.member span{color:#84878c; padding-bottom:7px; display:block}

/** CLIENT TESTIMONIOL **/
.client-box1{float:left; width:300px; font-family:tahoma,arial; padding-bottom:27px; margin-top:10px}
.client-testimonial1{background:#fff url(../img/quote.jpg) no-repeat center center; border:1px solid #cfd2d7; float:left; width:677px; padding:36px 18px; border-bottom:none; font-style:italic; font-size:16px; color:#7f8186; text-align:center}
.client-bg1{background:url(../img/testimoniol-bg1.png) no-repeat bottom left; height:25px; float:left; width:655px; line-height:34px; text-align:right; padding-left:60px; text-align:left; font-size:14px; color:#719600; font-style:italic}

/** RIGHT SECTION **/
.rightsec{float:left; width:221px}
.contact, .map{float:left; width:100%}
.cont-detail{padding-left:20pxa; color:#57595d; font-family:tahoma,arial; padding-bottom:19px}
.cont-detail img{float:left; padding-right:7px}
.cont-detail strong{font-weight:bold; color:#57595d; display:block; float:left; padding-bottom:8px; padding-right:4px; font-family:Arial,Helvetica,sans-serif}
.cont-detail a{color:#729700}
.cont-detail a:hover{color:#babdc0}

.rightsec h3.map{background:none; line-height:16px;  padding-top:12px}
.map img{border:1px solid #bec2c8; padding:4px;-webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -transition:all 0.3s linear}
.map img:hover{border:1px solid #bec2c8; opacity: 0.6;}

ul.touch li{float:left; margin-right:8px}
ul.touch li a:hover{opacity:0.7}

/* ----------------  Blog ------------------------ */
.blogleft{ width:630px; float:left; margin-right:32px; font-family:tahoma,arial}
.blogright{float:left; width:298px}
.top-search{float:right; width:299px; height:39px; background:url(../img/search.png) no-repeat center center; margin-top:20px}
.top-search input{background:transparent; border:none; padding:11px 15px; color:#ccc; width:260px; display: block;}

/** BLOG POST **/
.post{width:100%; float:left; padding-bottom:20px}
.post h2{color:#434853; line-height:48px; margin-bottom:7px; font-size:20px; background:url(../img/h3-bg.jpg) repeat-x bottom; font-weight:normal}
.post_title {text-decoration: none;}
.post_title:hover {opacity: 0.7;}
.post-details{float:left; width:100%; color:#84878c}
.post-details span a{color:#64676b; border-bottom:1px solid #dadde2; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
a.comments {color:#729700;  border-bottom:1px solid #dadde2; float:none !important; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
.post-details a:hover{border:none}

.post-img{border:1px solid #bec2c8; padding:4px; float:left; margin:18px 0 15px; cursor:pointer; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -transition:all 0.3s linear}
.post-img:hover{opacity:0.7}
.post-img a {border: 0px !important;}

.post-video{padding:4px; float:left; margin:18px 0 15px; cursor:pointer;border:1px solid #bec2c8; padding:4px;}

a.readmore{padding:9px 16px; font-family:Arial,Helvetica,sans-serif; font-size:14px;  text-shadow:0 -1px 0 #68831C; color:#FFF !important;  box-shadow:0 1px 0 #68831C; margin-top:0px; float:right; border:none !important}
a.readmore:hover{color:#E1FF7B !important}

/** BLOG RIGHT **/
.blogright h3{font-weight:bold}
.blogright ul.sociallink{float:left; width:100%}
.blogright ul.sociallink li{float:left; width:50%; margin-bottom:16px}
.blogright ul.sociallink li.full{width:100%; background:url(../img/h3-bg.jpg) repeat-x top; padding-top:16px}
.blogright ul.sociallink li a{font-family:'Droid Sans',sans-serif;  color:#434853;  float:left; font-size:16px; font-weight:bold; line-height:28px}
.blogright ul.sociallink li a:hover{color:#84878c}
.blogright ul.sociallink li img{float:left; margin-right:11px}
.blogright ul.sociallink li span{font-family:tahoma,arial; font-size:12px; font-weight:normal; color:#84878c}

/** category **/
ul.category, ul.category li{float:left; width:100%; color:#adafb4; line-height:28px; margin-top:-3px}
ul.category li a{color:#57595d; line-height:32px; padding-left:5px}
ul.category li a span{color:#729700}
ul.category li a:hover{color:#969698}
ul.category b {font-weight: normal; font-size: 14px; font-family: Arial, sans-serif; color:#adafb4;}

/** tag **/
.tag{float:left; width:100%; line-height:normal; font-family:tahoma,arial}
.tag a{color:#84878c; padding-right:4px}
.tag a:hover{color:#57595D}
a.tag1{font-size:25px}
a.tag2{font-size:22px}
a.tag3{font-size:20px}
a.tag4{font-size:18px; line-height:30px}
a.tag5{font-size:15px}
a.tag6{font-size:14px; line-height:25px}
a.tag7{font-size:12px; line-height:20px}

/** POST BRIF **/
.post_birf{padding-bottom:0px}
.post_birf p{padding:0px}
.post_birf p strong{font-weight:bold}
.post_birf a{border-bottom:1px solid #DADDE2; color:#729700; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
.post_birf ul{margin-left:40px;  padding-bottom:12px}
.post_birf ul li{list-style:disc; line-height:22px}
.post_birf ul li.green{color:#779e00}
.post h3 {padding: 5px 0;}

/** POST TAG **/
.post-tag{float:left; padding-right:20px; background:url(../img/tag.png) no-repeat right; color:#94979b; letter-spacing:-0.5px}
.post-tag a{color:#94979b; border-bottom:1px solid #DADDE2; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
.post-tag a:hover{border:none}

/** REALETED POST **/
.related-post{float:left; width:100%; padding-top:12px}
.related-post .blogPost{border:0px;  margin-right:30px}

/** COMMENTS SECTION **/
.comments-sec{float:left; width:100%}
ul.commentlist{float:left; width:100%}
ul.commentlist li{float:left; border-top:1px solid #cfd2d7}
ul.commentlist li:first-child{border:none; padding-top:0px; margin-top:0px}
ul.commentlist li{padding-top:19px; margin-top:19px}
ul.commentlist img{ border:1px solid #C3C7CC;  float:left;  margin-right:10px;  padding:3px}
ol li ol.childlist{ float:right; width:87%;  margin-top:19px}
ul.commentlist li ol.childlist li:first-child{border-top:1px solid #cfd2d7; padding-top:19px}

.comments{float:left; width:100%}
ol li ol.childlist .comment-des{ float:right; width:85%}
.avtar{float:left}

.comment-des{float:right; width:87%}
.comment-des strong{float:left; color:#729700; padding-right:5px; font-family:Arial,Helvetica,sans-serif; font-size:14px}
.comment-des span{float:left; color:#8c8f93}
.comment-by{float:left; width:100%;  padding-bottom:5px; padding-top:5px}
.comment-by span.reply{ color:#729700;  float:right}
.comment-by span.reply a{color:#729700; font-weight:bold; float:right; height:17px; margin-left:5px}
.comment-by span.reply a:hover{border:none; opacity: 0.7}
.comment-by span.date{color:#84878c; padding-right:7px; float:right}

/** RESPOND **/
.respond{ width:100%; padding-bottom:21px}
.respond h3{padding-top:27px}
.respond form{float:left; margin-top:-8px}
.respond label{font-weight:bold; display:block; line-height:29px}
.respond label span, .respond span.astro{display:inline; background:none; color:red}
.respond input{width:237px; padding:8px 15px; border:none; background:transparent; color:#57595d; text-shadow:0px 1px 0px #fff}
.respond span{display:block; background:url(../img/input-bg.png) no-repeat left; width:282px; height:36px; margin-bottom:15px}

/* ---------------- Portfolio ------------------------ */
.portleft{float:left; width:220px; margin-right:28px;  font-family:tahoma,sans-serif; margin-bottom: 220px;}
.portright{float:left; width:712px}

.portfolio_container{position:relative}
.portfolio_contain{margin:9px 0 0 -7px; padding:0px; width:738px; float:left}
/* portfolio_list */
.portfolio_list{float:left; width:100%; list-style:none; position:relative; padding:0px 0px 0px 0px}
.portfolio_list li{float:left; color:#57595d; margin:0px; width:100%}
.portfolio_list li span{float:left; display:block; line-height:22px; color: #adafb4; font-family: Arial, sens-serif; font-size: 14px;}
.portfolio_list a{color:#57595d; float:left; padding:0px 10px 4px 10px; text-decoration:none; width:auto !important; line-height:26px !important;  font-size:12px}

.portfolio_list a:hover{}

ul.portfolio_list li.active a, ul.portfolio_list li a:hover{color:#729700}
.ie6 #portfolio_list li, .ie7 #portfolio_list li{display:inline}
.ie6 #magic-line{bottom:-3px}

/* ------------- portfolio structure ------------ */
.qitem, .main{float:left; width:179px; height:134px; padding:0 !important;  overflow:hidden; position:relative; cursor:hand; cursor:pointer; margin:0px 20px 20px 0px}
.omega{margin:0px !important}
.main{width:234px; margin-bottom:17px; margin-right:12px; height:200px; border:0px solid #fff}
.qitem img{border:0; position:absolute; z-index:200}

/* Setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight{position:absolute; background-repeat:no-repeat; float:left}

.topLeft{background-position:top left}

.topRight{background-position:top right}

.bottomLeft{background-position:bottom left}

.bottomRight{background-position:bottom right}

ul.portfolio_list li.active a{}

li.main img{padding:12px; background:url(../img/img-bg.png) no-repeat center center}
li.main img:hover{background:url(../img/img-bg-hvr.png) no-repeat center center}
li.main a{display:block; float:left;   color:#434853; font-family:'Droid Sans',sans-serif; font-size:14px; font-weight:bold; text-align:center}
li.main a span{  color:#84878C;  display:block; font-family:tahoma,Arial; font-size:12px; font-weight:normal; line-height:22px}

li.main a:hover{color:#779E00}

.portleft h3, .portright h3{color:#434853; background:url(../img/h3-bg.jpg) repeat-x bottom; line-height:48px; margin-bottom:15px; font-size:18px; float:left; width:100%}

/** Shortcode Styles **/
h3.shortcode{color:#434853; background:url(../img/h3-bg.jpg) repeat-x bottom; line-height:48px; margin-bottom:15px; font-size:18px; float:left; width:100%}
.one_half a.flleft{margin-right:10px}
.one_half{width:48%}
.one_third{width:30.66%}
.two_third{width:65.33%}
.one_fourth{width:22%}
.three_fourth{width:74%}
.one_fifth{width:16.8%}
.two_fifth{width:37.6%}
.three_fifth{width:58.4%}
.four_fifth{width:67.2%}
.one_sixth{width:13.33%}
.five_sixth{width:82.67%}

.one_half, 
.one_third, 
.two_third, 
.three_fourth, 
.one_fourth, 
.one_fifth, 
.two_fifth, 
.three_fifth, 
.four_fifth, 
.one_sixth, 
.five_sixth{position:relative; margin-right:4%; margin-bottom:20px; float:left; font-family:tahoma,arial; line-height:20px}

.column-last{margin-right:0!important; clear:right}

/* Tabs -------------------------------------*/
.ui-tabs .ui-tabs-hide{ list-style: none;position:absolute;  left:-10000px}
.tabs{margin:0 0 20px 0; list-style: none;}
.tabs ul.nav {list-style:none; margin:0 0 0 1px; padding:0}
.tabs ul.nav li{list-style: none;float:left; position:relative; margin:0 6px -1px -1px; z-index:10; }
.tabs ul.nav li a{list-style: none;border:1px solid #cfd2d7; border-bottom:none; display:block; overflow:hidden; padding:5px 20px 0 20px; height:24px; background:#f4f4f4; -webkit-border-radius:5px 5px 0 0;  -moz-border-radius:5px 5px 0 0;  border-radius:5px 5px 0 0; color:#888a90; font-family:Arial,Helvetica,sans-serif; font-weight:bold; line-height:22px; outline: none !important; }
.tabs ul.nav li.ui-tabs-active a {list-style: none; height:25px; background:#fff; color:#535763}
.tabs .tab {list-style: none;background:#fff; padding:15px 22px; border:1px solid #cfd2d7; color:#777b83; -webkit-border-radius:5px; -webkit-border-top-left-radius:0; -moz-border-radius:5px; -moz-border-radius-topleft:0; border-radius:5px; border-top-left-radius:0}

/* Toggle -----------------------------------*/
.toggle{margin:0 0 12px 0; float:left; width:100%}

.toggle h4{font-size:12px; padding:10px; background:#f4f4f4; border:1px solid #cfd2d7; cursor:pointer; font-family:Arial,Helvetica,sans-serif; font-weight:bold; color:#535763; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;letter-spacing:0; outline: none;}
.toggle h4.ui-state-active{background:#fff; border-bottom:none}
.toggle-inner{padding:10px; background:#fff; border:1px solid #cfd2d7; border-top:none;}

.toggle .ui-icon{background:#F00; width:10px; height:10px; float:left; margin:3px 10px 0 0}

.toggle .ui-icon{    background:url(../img/plus.png) no-repeat right;     width:12px;     height:12px;     float:right;     margin:3px 10px 0 0}

.toggle .ui-state-active .ui-icon{ background:url(../img/minus.png) no-repeat right}

/* Accordian -----------------------------------*/
.accordion{float:left; width:100%; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #cfd2d7; outline: none;}

.accordion h3{background:#f4f4f4; margin-bottom: 0; float: none; width: auto; border-bottom:1px solid #cfd2d7; height:38px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;  font-size:12px; line-height:38px; padding-left:15px; outline: none;}
.accordion h3 a{border-bottom: 0px;display:block; letter-spacing:0}
.accordion h3.ui-state-active{background:#fff; border-bottom:none}
.accordion h3.ui-state-active a{display:block; color:#535763 !important}
.accordion h3.ui-state-default a{color:#888a90}
.accordion div{padding:0px 15px 15px 15px; background:#fff;}

blockquote{border-left:4px solid #d3d4d6; padding-left:15px; float:left; width:100%; line-height: 18px; display: inline-block; margin: 15px 0; font-style: italic;}

/*! jQuery UI - v1.9.0 - 2012-10-17
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* Fix For Tabs UI */
.nav.ui-widget-header { background: none; border: none; }
.tabs.ui-widget-content { background: none; border: 0; }
li.ui-tabs-selected.ui-state-active { border: 0; }
ul.nav li.ui-state-default { border: 0; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}
/* Component containers
----------------------------------*/
.ui-widget {  }
.ui-widget .ui-widget {  }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(/img/jqueryui/smoothness/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(/img/jqueryui/smoothness/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(/img/jqueryui/smoothness/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(/img/jqueryui/smoothness/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(/img/jqueryui/smoothness/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(/img/jqueryui/smoothness/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(/img/jqueryui/smoothness/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/img/jqueryui/smoothness/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(/img/jqueryui/smoothness/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/img/jqueryui/smoothness/ui-icons_cd0a0a_256x240.png); }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(/img/jqueryui/smoothness/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(/img/jqueryui/smoothness/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(/img/jqueryui/smoothness/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }

/* ---- [ shared ] ---------------------------------------------> */
	.floatleft { float: left; }
	.floatright { float: right; }
	.floatnone { float: none !important; }
	.clearall { clear: both; }
	.content { padding: 12px; }
	.content .nopadding { padding: 0 !important; }
	.marginleft0 { margin-left: 0px !important; }
	.marginleft10 { margin-left: 10px !important; }
	.marginleft20 { margin-left: 20px !important; }
	.marginright10 { margin-right: 10px !important; }
	.marginright20 { margin-right: 20px !important; }
	.margintop2 { margin-top: 2px !important; }
	.margintop5 { margin-top: 5px !important; }
	.margintop10 { margin-top: 10px !important; }
	.margintop20 { margin-top: 20px !important; }
	.margintop30 { margin-top: 30px !important; }
	.marginbottom10 { margin-bottom: 10px !important; }
	.marginbottom20 { margin-bottom: 20px !important; }
	.marginbottom5 { margin-bottom: 5px !important; }
	.marginbottom0 { margin-bottom: 0 !important; }
	.marginright15 { margin-right: 15px !important; }
	.marginright12 { margin-right: 12px !important; }
	.padding20 { padding: 20px !important; }
	.padding18 { padding: 18px !important; }
	.paddingleft18 { padding-left: 18px !important; }
	.padding12 { padding: 12px !important; }
	.padding10 { padding: 10px !important; }
	.paddingtop0 { padding-top: 0 !important; }
	.paddingtop6 { padding-top: 6px !important; }
	.paddingtop10 { padding-top: 10px !important; }
	.paddingtop20 { padding-top: 20px !important; }

	.paddingleft10 { padding-left: 10px !important; }
	.paddingleft20 { padding-left: 20px !important; }
	.paddingleft25 { padding-left: 25px !important; }
	.paddingleft40 { padding-left: 40px !important; }
	.paddingleft50 { padding-left: 50px !important; }

	.paddingright10 { padding-right: 10px !important; }
	.paddingright20 { padding-right: 20px !important; }
	.paddingright40 { padding-right: 40px !important; }
	.paddingright50 { padding-right: 50px !important; }
	.content h1, .content h2, .content h3, .content h4, .content h5 { margin-bottom: 1em; }
	.inline { display: inline !important; }
	.block { display: block !important; }
	.inline-block { display: inline-block !important; }
	.bold { font-weight: bold;}
	.fine-print { font-size: 10px !important; color: #aaa; line-height: 10px; }
	.upper { text-transform: uppercase; }
	.aligncenter { text-align: center !important; }
	.alignleft { text-align: left !important; }
	.alignright { text-align: right !important; }
	.smalltext { font-size: 11px !important; }
	.valignmiddle { vertical-align: middle; }
	.valigntop { vertical-align: top; }
	.hidden { display: none; }
	.even { background-color: #eee; }
	p { margin-bottom: 18px; }
	input[type=text], input[type=password], textarea { font-size: 14px; }
	ul.list { margin-left: 24px; padding-left: 12px; list-style: disc; }
	ul.list li { margin-bottom: 8px; }
	ul.sub-list { margin-left: 12px; padding-left: 12px; list-style: circle; }
	ul.sub-list li { margin-top: 6px; }
	a.standout { color: #888 !important; text-decoration: underline; }
	a.standout:hover { text-decoration: none !important; }
	input.datepicker { width: 80px !important; }
	select { margin: 0; }
	.fileuploadwrapper { border: dashed 1px #ccc; padding: 6px; }
	.handle { cursor: move; }
	.nobg { background: none !important; }
	.graybox { background-color: #eee; border: solid 1px #aaa; }
	.rounded { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
	.width500 { width: 500px !important; }
	.width200 { width: 200px !important; }
	.width150 { width: 150px !important;}
	.width175 { width: 175px !important;}
	input::-ms-clear { display: none; }
	a.nodec, a.nodec:hover { text-decoration: none !important; }
	a.pointer, a.pointer * { cursor: pointer !important; }

/* ---- [ Breadcrumbs ] ------------------------------------ */
	ul.breadcrumbs { list-style: none; margin: 10px 0px 0 14px; display: inline-block; }
	ul.breadcrumbs li { display: inline-block; color: #aaa !important; font-size: 11px; }
	ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { color: #aaa !important; text-decoration: none; }
	ul.breadcrumbs li a:hover, ul.breadcrumbs li a:active { color: #aaa !important; text-decoration: underline; }
	ul.breadcrumbs li:after { content: " > "; }
	ul.breadcrumbs li:last-of-type:after { content: ""; }

/* ---- [ Summary ] ------------------------------------ */
	.summary h3 { background-image: none !important; margin-bottom: 4px; padding-bottom: 0px;}
	.summary .item { padding-bottom: 4px;}
	.summary .item label { font-weight: bold; display: inline-block; vertical-align: middle; padding: 0px;}
	.summary .item span { vertical-align: middle; }
	.summary .item p { font-size: 14px; }

/* ---- [ groupbox ] ---------------------------------------------> */
	.groupbox { border: solid 6px #888; margin-bottom: 24px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
	.groupbox > span { display: block; padding: 8px; margin: 0; background-color: #888; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
	.groupbox > span h3 { margin: -3px 0 0 0; color: #fff; text-shadow: none; text-transform: uppercase; letter-spacing: 2px; font-family: Tahoma; }
	.groupbox > div { padding: 8px; background-color: #fff; }
	.groupbox table { width: 100%; border: 0; border-collapse: collapse;}
	.groupbox tbody tr:nth-child(odd) td { background: #fff; }
	.groupbox tbody tr:nth-child(even) td { background: #eee; }
	.groupbox tbody tr { border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }	
	.groupbox td { border: solid 0px #aaa; padding: 2px 8px; vertical-align: middle; }
	.groupbox thead td, .groupbox tfoot td { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; background-color: #ddd; color: #666; padding: 4px; }
	.groupbox thead td { background-color: #eee; }
	.groupbox td.first { border-left: 0; }
	.groupbox td.last { border-right: 0; }
	.groupbox tr.last td { border: 0; border-top: solid 0 #aaa; }
	.groupbox tbody tr.even td { background-color: #eee; }
	.groupbox tfoot .options { font-size: 11px; }
	.builder .groupbox,
	.builder .groupbox > div { overflow: visible; }

/* ---- [ Mini Dialog ] ---------------------------------------------> */
	.working-dialog {  margin: 0 24px; }
	.working-dialog * { vertical-align: middle;}
	.working-dialog h3 { display: inline-block; color: #FA8136; margin-right: 8px; font-size: 18px; }

/* ---- [ layout ] ---------------------------------------------> */
	.title h1, .title h2 { float: left; font-size: 24px; font-weight: normal; width: 600px; vertical-align: middle; max-height: 60px; overflow: hidden;}
	
	#middle-wrapper a:link, #middle-wrapper a:active, #middle-wrapper a:visited { color: #888; }
	#middle-wrapper a:hover { color: #333; text-decoration: underline; }
	#other-stuff a:link, #other-stuff a:active, #other-stuff a:visited { color: #fff; }
	#other-stuff a:hover { color: #aaa; text-decoration: none; }
	
	#header { position: relative; z-index: 50; }
	#title { position: relative; z-index: 1; }
	#title .top-search { position: relative; z-index: 1; }
	#primary-nav,
	.sf-menu-wrapper {
		position: relative;
		z-index: 5000;
	}
	.sf-menu-wrapper ul ul {
		z-index: 6000;
	}
	#user-info {
		position: relative;
		z-index: 5000;
	}
	#primary-nav { float: left !important; margin-left: 10px; margin-top: 30px; }
	.header-wrapper1 { height: 163px; }
	.top-search { position: relative; }
	.top-search input[type=text] { padding-top: 9px; color: #888; }
	.top-search input[type=image] { position: absolute; width: 24px; height: 24px; top: -4px; left: 248px; }
    a.finder-link { position: absolute; top: 45px; right: 20px; font-size: 11px !important; color: #aaa; text-decoration: underline; }
    a.finder-link:hover { color: #666; text-decoration: none; }
    #view-home a.finder-link { display: none; }
	#other-stuff a { color: #fff; display: block; margin-bottom: 4px; margin-left: 4px; }
	#other-stuff { width: 150px; }
	#photo-stream { width: 250px; }
	.auth-choice { float: right; padding-right: 18px; margin-top: 24px; }
	.auth-choice a#login { color: #ccc; font-size: 12px; font-family: Tahoma, Arial; font-size: 14px; padding-left: 12px; }
	.auth-choice a#login:hover { color: #eee; text-decoration: underline; }
	#Dialogs { display: none; }
    #buildinfo { color: #666; margin-left: 12px; font-size: 11px; }
    #buildinfo:hover { text-decoration: underline; }

/* ---- [ SRM Colors ] ---------------------------------------------> */
	.srmWhite { background: #fff; border: solid 1px #ccc; }
	.srm1 { background: #FFE699; border: solid 1px #ccc; }
	.srm2 { background: #FFD878; border: solid 1px #ccc; }
	.srm3 { background: #FFCA5A; border: solid 1px #ccc; }
	.srm4 { background: #FFBF42; border: solid 1px #ccc; }
	.srm5 { background: #FBB123; border: solid 1px #ccc; }
	.srm6 { background: #F8A600; border: solid 1px #ccc; }
	.srm7 { background: #F39C00; border: solid 1px #ccc; }
	.srm8 { background: #EA8F00; border: solid 1px #ccc; }
	.srm9 { background: #E58500; border: solid 1px #ccc; }
	.srm10 { background: #DE7C00; border: solid 1px #DE7C00; }
	.srm11 { background: #D77200; border: solid 1px #D77200; }
	.srm12 { background: #CF6900; border: solid 1px #CF6900; }
	.srm13 { background: #CB6200; border: solid 1px #CB6200; }
	.srm14 { background: #C35900; border: solid 1px #C35900; }
	.srm15 { background: #BB5100; border: solid 1px #BB5100; }
	.srm16 { background: #B54C00; border: solid 1px #B54C00; }
	.srm17 { background: #B04500; border: solid 1px #B04500; }
	.srm18 { background: #A63E00; border: solid 1px #A63E00; }
	.srm19 { background: #A13700; border: solid 1px #A13700; }
	.srm20 { background: #9B3200; border: solid 1px #9B3200; }
	.srm21 { background: #952D00; border: solid 1px #952D00; }
	.srm22 { background: #8E2900; border: solid 1px #8E2900; }
	.srm23 { background: #882300; border: solid 1px #882300; }
	.srm24 { background: #821E00; border: solid 1px #821E00; }
	.srm25 { background: #7B1A00; border: solid 1px #7B1A00; }
	.srm26 { background: #771900; border: solid 1px #771900; }
	.srm27 { background: #701400; border: solid 1px #701400; }
	.srm28 { background: #6A0E00; border: solid 1px #6A0E00; }
	.srm29 { background: #660D00; border: solid 1px #660D00; }
	.srm30 { background: #5E0B00; border: solid 1px #5E0B00; }
	.srm31 { background: #5A0A02; border: solid 1px #5A0A02; }
	.srm32 { background: #600903; border: solid 1px #600903; }
	.srm33 { background: #520907; border: solid 1px #520907; }
	.srm34 { background: #4C0505; border: solid 1px #4C0505; }
	.srm35 { background: #470606; border: solid 1px #470606; }
	.srm36 { background: #440607; border: solid 1px #440607; }
	.srm37 { background: #3F0708; border: solid 1px #3F0708; }
	.srm38 { background: #3B0607; border: solid 1px #3B0607; }
	.srm39 { background: #3A070B; border: solid 1px #3A070B; }
	.srm40 { background: #36080A; border: solid 1px #36080A; }
	.srmBlack { background: #000; border: solid 1px #000; }

	.srm-circ { display: inline-block; width: 15px; height: 15px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}

/* ---- [ Homebrew Ingredient Pages ] ---------------------------------------------> */
	.ing-hero { margin-top: 12px; }
	.ing-hero .intro { width: 300px; float: left; padding-top: 8px;}
	.ing-hero p { font-size: 14px; }
	.ing-hero .intro h2 { font-size: 18px; font-family: Arial;font-weight: bold; line-height: 26px; margin-bottom: 12px; }
	.ing-hero .image { float: right; border: solid 1px #ccc; padding: 4px; }

	.ing-list { margin-bottom: 18px; border-radius: 8px; }
	.ing-list h2 { margin-bottom: 18px; font-size: 18px; }
	.top-ten h2 { font-size: 18px;  color: #849c00; }
	
	.top-ten ol { list-style: decimal; margin-left: 32px; margin-top: 12px; }
	.top-ten ol li { font-size: 18px; line-height: 28px;}

	#view-fermentables .ings .lovi { width: 15px; height: 15px; display: inline-block; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
	#view-fermentables .ings li { float: left; background-color: #fff; border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 175px; padding: 2px 8px; margin-bottom: 18px; margin-right: 10px; }
	#view-fermentables .ings li a { height: 20px; overflow-y: hidden; }
	#view-fermentables .ings li .data { display: block; background: #eee; border: solid 1px #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-top: 2px; margin-bottom: 6px; padding: 2px 8px; font-size: 11px; }
	#view-fermentables .ings li .data * { vertical-align: middle; }
	#view-fermentables .ings a { display: block; font-weight: bold; font-size: 11px }

	#view-hops .ings li { float: left; background-color: #fff; border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 175px; padding: 2px 8px; margin-bottom: 18px; margin-right: 10px; }
	#view-hops .ings li a { height: 20px; overflow-y: hidden; }
	#view-hops .ings li .data { display: block; background: #eee; border: solid 1px #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-top: 2px; margin-bottom: 6px; padding: 2px 8px; font-size: 11px; }
	#view-hops .ings li .data * { vertical-align: middle; }
	#view-hops .ings a {font-weight: bold; font-size: 11px }

	#view-yeasts .ings li { float: left; background-color: #fff; border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 175px; padding: 8px 8px; margin-bottom: 18px; margin-right: 10px; }
	#view-yeasts .ings li img { float: left; vertical-align: middle; }
	#view-yeasts .ings li a { display: block; height: 24px; line-height: 12px; padding-left: 8px; overflow-y: hidden; vertical-align: middle; }
	#view-yeasts .ings li .data { display: block; background: #eee; border: solid 1px #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-top: 2px; margin-bottom: 6px; padding: 2px 8px; font-size: 11px; }
	#view-yeasts .ings li .data * { vertical-align: middle; }
	#view-yeasts .ings a {font-weight: bold; font-size: 11px }

	#view-adjuncts .ings li { float: left; background-color: #fff; border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 175px; padding: 8px 8px; margin-bottom: 18px; margin-right: 10px; }
	#view-adjuncts .ings li img { float: left; vertical-align: middle; }
	#view-adjuncts .ings li a { display: block; height: 24px; line-height: 12px; padding-left: 8px; overflow-y: hidden; vertical-align: middle; }
	#view-adjuncts .ings li .data { display: block; background: #eee; border: solid 1px #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-top: 2px; margin-bottom: 6px; padding: 2px 8px; font-size: 11px; }
	#view-adjuncts .ings li .data * { vertical-align: middle; }
	#view-adjuncts .ings a {font-weight: bold; font-size: 11px }


/* ---- [ Recipe/User Widget ] ---------------------------------------------> */
	.recipe-widget, .user-widget { border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 10px; margin-bottom: 18px; background: #fff; height: 83px; }
	.recipe-widget .image { float: left; height: 45px; }
	.recipe-widget .image img { width: 50px; height: 50px; }
	.recipe-widget .info, .user-widget .info { float: left; height: 50px; font-size: 11px; margin-left: 12px; padding-top: 2px; }
	.recipe-widget .name, .user-widget .name { font-weight: bold; font-size: 12px; height: 14px; overflow: hidden; }
	.recipe-widget .type { margin: 2px 0; margin-top: 3px; }
	.recipe-widget .recipe-author { margin-top: 5px; }
	.recipe-widget .data { background: #eee; border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-top: 6px; padding: 4px; font-size: 11px; height: 15px; }
	.recipe-widget .data * { vertical-align: middle; }
	.recipe-widget .data div { float: left; text-align: center; display: inline-block; padding-top: 1px;}
	.recipe-widget .data .ibu { width: 70px; }
	.recipe-widget .data .abv { width: 70px; }
	.recipe-widget .data .calories { width: 75px; }
	.recipe-widget .data .srm { width: 14px; height: 14px; display: inline-block; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-right: 4px; padding-top: 0 !important; }
	.recipe-widget .data .lovi { width: 25px; }

	.user-widget .image { float: left; height: 75px; margin-top: 0; }
	.user-widget .info { padding-top: 0; margin-top: 0; }
	.user-widget .name { font-size: 14px; line-height: normal; height: auto; margin-top: 0; }
	.user-widget div { margin-top: 2px; }

	.compliment .recipe-widget { padding: 6px; }
	.compliment .recipe-widget .info { margin-left: 7px; }
	.compliment .recipe-widget .data { padding: 3px; padding-bottom: 4px; }
	.compliment .recipe-widget .data div { height: 14px; vertical-align: middle; }
	.compliment .recipe-widget .data .ibu { width: 55px; }
	.compliment .recipe-widget .data .abv { width: 60px; }
	.compliment .recipe-widget .data .calories { width: 50px; }
	.compliment .recipe-widget .name { width: 160px; }

/* ---- [ Feedback ] ---------------------------------------------> */
	#FeedbackTrigger { position: fixed; display: none; top: 200px; left: 0; }
	#view-feedback, #view-feedbackreceived { width: 575px; }
	#view-feedback textarea { width: 590px; height: 130px; }
	#FeedbackCounter { display: block; color: #aaa; font-size: 11px; }

/* ---- [ user info / user list ] ---------------------------------------------> */
	#user-info { background-color: #4a4e5a; float: right; min-width: 200px; height: 40px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; padding: 8px; margin: 10px 0; }
	#user-info > img { display: block; }
	#user-info > div a { color: #fff; margin-top: 4px; }
	#user-info > ul > li { color: #eee; font-size: 14px; font-weight: bold; margin-top: 6px; }
	#user-info ul a:hover {	background: none; border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

	.user-list .user { border-bottom: dashed 1px #aaa; padding: 24px; margin-bottom: 12px; }
	.user-list .user.last { border-bottom: 0px;  }
	.user-list .user .image { float: left; margin-right: 18px; padding: 0;}
	.user-list .user .image img { border: solid 1px #aaa; }
	.user-list .user .details { padding-top: 2px; }
	.user-list .user .details span { line-height: 18px; }
	.user-list .user h3 { margin-bottom: 6px; }
	

/* ---- [ validation ] ---------------------------------------------> */
	.field-validation-valid { display: none; }
	.validation-summary-valid { display: none; }
	span.field-validation-error { font-size: 11px; height: 11px; margin-top: 2px; margin-left: 1em; color: red; }
	div.validation-summary-errors { color: red; }

/* ---- [ buttons ] -----------------------------------------------> */
	.button { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding: 7px 16px; font-family: Arial,Helvetica,sans-serif;	font-size: 14px; cursor: pointer; }
	 .button_small { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding: 3px 4px; font-family: Arial,Helvetica,sans-serif; font-size: 12px !important; cursor: pointer; }
	 a.button { display: inline-block; font-size: 14px; }
	.button:hover, .button_small:hover { text-decoration: none !important; }
	.button_green { background:#b5d247; /* Old browsers */background:-moz-linear-gradient(top, #b5d247 0%,#b5d247 0%,#83a42c 100%); /* FF3.6+*/background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#b5d247),color-stop(0%,#b5d247),color-stop(100%,#83a42c)); /* Chrome,Safari4+*/background:-webkit-linear-gradient(top, #b5d247 0%,#b5d247 0%,#83a42c 100%); /* Chrome10+,Safari5.1+*/background:-o-linear-gradient(top, #b5d247 0%,#b5d247 0%,#83a42c 100%); /* Opera 11.10+*/background:-ms-linear-gradient(top, #b5d247 0%,#b5d247 0%,#83a42c 100%); /* IE10+*/background:linear-gradient(top, #b5d247 0%,#b5d247 0%,#83a42c 100%); /* W3C */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d247',endColorstr='#83a42c',GradientType=0 ); /* IE6-9 */ color: #fff !important; border: solid 1px #aaa; }
	
	.button_red { background:#D63333; /* Old browsers */background:-moz-linear-gradient(top, #D63333 0%,#D63333 0%,#CC0000 100%); /* FF3.6+*/background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#D63333),color-stop(0%,#D63333),color-stop(100%,#CC0000)); /* Chrome,Safari4+*/background:-webkit-linear-gradient(top, #D63333 0%,#D63333 0%,#CC0000 100%); /* Chrome10+,Safari5.1+*/background:-o-linear-gradient(top, #D63333 0%,#D63333 0%,#CC0000 100%); /* Opera 11.10+*/background:-ms-linear-gradient(top, #D63333 0%,#D63333 0%,#CC0000 100%); /* IE10+*/background:linear-gradient(top, #D63333 0%,#D63333 0%,#CC0000 100%); /* W3C */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#D63333',endColorstr='#CC0000',GradientType=0 ); /* IE6-9 */ color: #fff !important; border: solid 1px #aaa; }
	
	.button_black { background:#575b67;/* Old browsers */background:-moz-linear-gradient(top, #6e727f 0%,#6e727f 0%,#464a55 100%); /* FF3.6+*/background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6e727f),color-stop(0%,#6e727f),color-stop(100%,#464a55)); /* Chrome,Safari4+*/background:-webkit-linear-gradient(top, #6e727f 0%,#6e727f 0%,#464a55 100%); /* Chrome10+,Safari5.1+*/background:-o-linear-gradient(top, #6e727f 0%,#6e727f 0%,#464a55 100%); /* Opera 11.10+*/background:-ms-linear-gradient(top, #6e727f 0%,#6e727f 0%,#464a55 100%); /* IE10+*/background:linear-gradient(top, #6e727f 0%,#6e727f 0%,#464a55 100%); /* W3C */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e727f',endColorstr='#464a55',GradientType=0 ); /* IE6-9 */ color: #fff !important; border: solid 1px #666; }
	.button_gray { background:#f0f0f0; /* Old browsers */background:-moz-linear-gradient(top, #f9f9f9 0%,#f9f9f9 0%,#f0f0f0 100%); /* FF3.6+*/background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f9f9f9),color-stop(0%,#f9f9f9),color-stop(100%,#f0f0f0)); /* Chrome,Safari4+*/background:-webkit-linear-gradient(top, #f9f9f9 0%,#f9f9f9 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+*/background:-o-linear-gradient(top, #f9f9f9 0%,#f9f9f9 0%,#f0f0f0 100%); /* Opera 11.10+*/background:-ms-linear-gradient(top, #f9f9f9 0%,#f9f9f9 0%,#f0f0f0 100%); /* IE10+*/background:linear-gradient(top, #f9f9f9 0%,#f9f9f9 0%,#f0f0f0 100%); /* W3C */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */ color: #84878C !important; border: 1px solid #d2d3d5; }
	.button_green:hover { color: #E1FF7B !important;}
	.button_black:hover { color:#dcdcdc !important; background-color: #aaa !important; border: solid 1px #666; }
	.button_gray:hover { color: #333 !important; }
	.widebutton { width: 210px; font-weight: bold; font-size: 18px !important; text-align: center; margin-bottom:0px; }

/* ---- [ forms ] ---------------------------------------------> */
	.form-field { margin-bottom: 8px; }
	.form-field label { font-weight: bold; font-size: 12px; display: inline-block; }
	.form-field span { display: inline-block; }
	.form-field input[type=text], .form-field input[type=password], .form-field textarea { width: 225px; padding: 4px;}
	select { font-family: Tahoma, Arial; font-size: 12px; }
	.form-field input.narrow { width: 25px; min-width: 25px; }
	select, input { color: #333; padding: 4px; }
	select { font-size: 11px; }
	.input-validation-error { background-color: #fff2f2; color: #ee6b6b; border: solid 2px #ee6b6b; }
	.val-summary { color: red; }

/* ---- [ messages ] ---------------------------------------------> */
	.messages { color: #333; margin-top: 12px; }
	.messages ul { display: block; margin: 0; padding: 0; margin-bottom: 18px;  }
	.messages li { font-size: 18px; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:15px; font-family: Arial,Helvetica,sans-serif; font-weight:bold; padding: 12px; text-align: center; }
	.messages li.error, div.error { background:#fff2f2; border: solid 3px #ffc8c8; color:#ee6b6b }
	.messages li.success { background:#ecf7e2; border: solid 3px #b1db7f; color:#74a43a; }
	.messages li.warn { background:#fcfbdf; border: solid 3px #ddd487; color:#aba64e; }
	.messages li.info { background:#eaf8ff; border: solid 3px #b4d6e7; color:#68a1bd; }
	.messages.small li { font-size: 12px; width: auto; -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius:4px; padding: 8px; border-width: 1px; }
	div.error { border: solid 3px #ffc8c8; padding: 12px; font-size: 18px; width:100%; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:15px; font-family: Arial,Helvetica,sans-serif; font-weight:bold; text-align: center; } 
	input.field-error { background-color: #FFF2F2; color:#EE6B6B !important; border: solid 2px #EE6B6B; }

	.messages li.info a { color: #68a1bd !important; text-decoration: underline; }
	.messages li.info a:hover { color:#68a1bd; text-decoration: none; }

	
/* ---- [ tipsy ] ---------------------------------------------> */
	.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
	.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
	.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
	.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }
	.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
	.tipsy-arrow-n { border-bottom-color: #000; }
	.tipsy-arrow-s { border-top-color: #000; }
	.tipsy-arrow-e { border-left-color: #000; }
	.tipsy-arrow-w { border-right-color: #000; }
	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
	.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
	.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
	.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
	.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
	.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
	.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
	.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
	
	.helptip { background: url(/img/help.gif) no-repeat; height: 11px; width: 12px; display: inline-block; vertical-align: middle; margin-top: -2px;  }
	
/* ---- [ view-login / #view-loginviadialog] ---------------------------------------------> */
	#view-login { width: 725px; margin: 0 auto; }
	#view-login > .form-field, #view-loginviadialog > .form-field { padding: 8px; }
	#view-login label, #view-loginviadialog label { float: left; }	
	#view-login input[type=text], #view-login input[type=password], #view-loginviadialog input[type=text], #view-loginviadialog input[type=password] { font-size: 14px; }
	#view-login .login, #view-loginviadialog .login	{ margin-top: 18px;	width: 300px; }
	
	#view-login .sign-up, #view-loginviadialog .sign-up  
	{
		float: left;
		margin-left: 50px; 
		background-color: #eee; 
		border: solid 1px #ddd; 
		-webkit-border-radius:8px; 
		-moz-border-radius:8px; 
		border-radius:8px;
		padding: 20px; 
		width: 300px;
		height: 275px;
	}
	
	#view-login .sign-up h3, #view-loginviadialog .sign-up h3 { color: #aaa; }
	#view-login .sign-up label, #view-loginviadialog .sign-up label { color: #666; float: left;}
	#view-login .sign-up .fb-note, #view-loginviadialog .sign-up .fb-note { float: right; width: 175px; margin-right: 20px; margin-top: 8px; }
	
	#view-loginviadialog { width: 650px; margin: 0 auto; }
	#view-loginviadialog .sign-up { margin-left: 0px; }
	#view-loginviadialog .login { width: 300px; }
	
/* ---- [ reset password ] ---------------------------------------------> */
#view-resetpassword .form-field label { display: inline-block; min-width: 120px; }
#view-setpassword .form-field label { display: inline-block; min-width: 160px; }

/* ---- [ settings ] ---------------------------------------------> */	
	#view-settings {}
	#view-settings .form-field { clear: both; }
	#view-settings .form-field p { padding: 0px 2px; }
	#view-settings .form-field label { min-width: 175px; margin-bottom: 4px; }
	#view-settings .form-field span p, #view-settings .notification p { width: 225px; font-size: 11px; color: #999; margin-top: 4px; margin-left: 4px; line-height: 14px; }
	#view-settings .username-field,
	#view-settings .username-toggle { display: block; }
	#view-settings #username-avail, #view-settings #emailinuse { display: inline; margin-left: 12px; }
	#view-settings	.side-block { padding: 0 0 20px 40px; float: left; margin-left: 55px; }
	#view-settings .personal-info, #view-settings .change-password { width: 220px; }
	#view-settings .username { width: 300px; }
	#view-settings .avatar { border: 1px solid #CCC; padding: 1px; }
	#view-settings .form-field-avatar { margin-bottom:30px; }
	#view-settings #Bio { width: 400px; height: 100px; }
	#view-settings .fb-note { margin-top: 20px; width: 450px; }
	#view-settings .username { width: 225px; }
	#view-settings .notification input { color: #434853; vertical-align: middle;  }
	#view-settings .notification label { color: #434853; font-weight: bold; vertical-align: middle; display: inline-block; padding-top: 2px; }
	#view-settings .notification p { margin-left: 20px; width: 500px; }

/* ---- [ Recipe Detail ] ---------------------------------------------> */	
	#view-recipedetail .groupbox tbody td { padding: 8px 8px; }
	#view-recipedetail .groupbox:nth-of-type(3) tfoot tr { height: 30px; }
	#view-recipedetail .recipe-title { margin-top: 8px; margin-bottom: 12px; width: 280px; line-height: 21px; }
    #view-recipedetail .recipe-title  h3 { margin-bottom: 0; }
	#view-recipedetail .recipe-photo-actions { float: left; margin-right: 18px; margin-left: 6px; }
	#view-recipedetail .recipe-photo-actions img { border: solid 1px #CCC; padding: 2px; display: block; }
	#view-recipedetail .recipe-details { line-height: 14px; width: 400px; float:left; min-height: 200px; padding-bottom: 12px; }
	#view-recipedetail .recipe-info { float: left; }
	#view-recipedetail .recipe-info div { height: 18px; }
	#view-recipedetail .recipe-info label {display: inline-block; padding: 0; width: 100px; font-weight: bold; }
	#view-recipedetail .recipe-metainfo { float: right; margin-right: 18px; }
	#view-recipedetail .recipe-metainfo .action {  display: block; color: #666 !important; font-weight: bold; font-size: 14px; margin-bottom: 8px; }
	#view-recipedetail .recipe-metainfo .action * {  vertical-align: middle; }
	#view-recipedetail .recipe-desc { margin-top: 1em; line-height: 16px; }
    #view-recipedetail ul.commentlist li {width:100%;}
    #view-recipedetail #suggest-limit { background: none; height: 0px;}
    #view-recipedetail .respond .txt-area {margin-bottom:0px; margin-top:100px;}
    #view-recipedetail .avtar { float: left; width: 13%; }
    #view-recipedetail .comment-des { float: right; width: 87%; }
    #view-recipedetail .respond #add-comment-msg { color: red; font-weight: bold; margin-bottom: 18px; }
    #view-recipedetail .respond #CommentText { resize: none; border: solid 1px #ccc; border-bottom: solid 4px #ccc; width: 490px; height: 135px; padding: 12px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; margin-bottom: 12px; }
	#view-recipedetail > .info .edit-buttons { margin-top: 10px; }
	#view-recipedetail > .info .edit-buttons .button { float: left; text-align: center; width: 80px; margin-left: 2px;  }
	#view-recipedetail > .info .edit-buttons .button.last { margin-right: 0px; float: right; }
	#view-recipedetail .sharethis { padding: 9px 9px 0 9px; }
	#view-recipedetail .stButton { margin: 0; }
	#view-recipedetail ol.instructions { margin: 8px 32px; }
	#view-recipedetail ol.instructions li { list-style: decimal; font-size: 14px; color: #666; margin-bottom: 8px; }

/* ---- [ Brew Session Detail ] ---------------------------------------------> */	
	#brewsessiondetail-view .intro { margin-bottom: 24px; margin-left: 12px; }
	#brewsessiondetail-view .intro > a, #brewsessiondetail-view .intro h3 { display: inline-block; vertical-align: middle; }
	#brewsessiondetail-view .intro h3 { margin-left: 10px; margin-bottom: 0; }
	#brewsessiondetail-view .intro h3 span { font-size: 14px; color: #666; }
	#brewsessiondetail-view .intro div { display: inline-block; margin-left: 180px; vertical-align: middle; margin-top: 24px; }
	#brewsessiondetail-view .intro div a { display: inline-block; font-size: 12px; color: #666; font-weight: bold; }
	#brewsessiondetail-view .intro div a:nth-of-type(1) { margin-right: 12px; }

	#brewsessiondetail-view #brew-log div { font-size: 14px; }
	.brew-save { height: 40px; margin-top: 20px; }
	.brew-save * { vertical-align: middle; }
	 .spinner { display: none; margin-left: 8px; vertical-align: middle;  }

/* ---- [ Tasting Notes ] ---------------------------------------------> */	
	#TastingNotes h3 { float: none; }
	#tasting-note-form { border-top: solid 1px #ccc; }
	#tasting-note-form textarea { width: 600px; height: 30px; }
	#tasting-note-form .rating-field { float: left; margin-left: 50px; }
	#tasting-note-form .rating-field img { vertical-align: middle; }
	#tasting-note-form .date-field label, #tasting-note-form .rating-field label { width: 125px; }
	#tasting-note-form .messages { margin-top: 0 !important; }

/* ---- [ Style Chart ] ---------------------------------------------> */	
    #select-style { border: solid 4px #aaa; background-color: #fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; padding: 8px; width: 220px; }
    #select-style label { font-size: 14px; }
    #style-showmore { margin-top: 5px; }
    #style-hidemore { margin-top: 5px; }
    .bjcp-style-title { font-weight:bold; margin-bottom: 5px; color: #333; font-size: 11px; }
    .bjcp-style-title-current { font-size: 12px; margin-bottom: 8px; }
    .bjcp-style-chart {	border: solid 1px #aaa; padding: 8px; width: 220px; }
    .bjcp-slider { float:left; background-attachment: scroll; background-clip: border-box; background-color: #EEE; background-image: none; background-origin: padding-box; border-bottom-color: #CCC; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #CCC; border-left-style: solid; border-left-width: 1px; border-right-color: #CCC; border-right-style: solid; border-right-width: 1px; border-top-color: #CCC; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 2px 0px inset; color: #333; display: block; font-size: 12px; height: 4px; line-height: 21px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 5px; min-width: 0px; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; vertical-align: baseline; width: 122px; }
    .bjcp-slider-range { background-attachment: scroll; background-clip: border-box; background-color: green; background-image: none; background-origin: padding-box; border-bottom-color: #666; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: none; border-bottom-width: 0px; border-left-color: #666; border-left-style: none; border-left-width: 0px; border-right-color: #666; border-right-style: none; border-right-width: 0px; border-top-color: #666; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: none; border-top-width: 0px; box-shadow: rgb(0, 102, 153) 1px 1px 2px 0px inset; color: #333; display: block; font-size: 12px; height: 5px; left: 15%; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-width: 0px; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: absolute; vertical-align: baseline;}
    .bjcp-label { font-size: 11px;font-weight: bold;float:left; width: 25px; }
    .bjcp-leftnumber { font-size: 8px; font-weight: bold; float:left; width: 23px; text-align:right; margin-top: 3px; margin-right:1px; }
    .bjcp-rightnumber { font-size: 8px; font-weight: bold; float:left; width: 30px; margin-top: 3px; margin-left:1px; }
    .bjcp-check { float:left; }
    .bjcp-similarstyles { font-weight: bold; font-size: 12px; display: block; color:#333; padding:4px;}
    .bjcp-chartwrapper { padding-top: 6px; border-top: solid 4px #CCC;}
    .bjcp-marker { margin-top: -4px; margin-left: -4px; float: left; z-index: 3; position: absolute; }
	[data-name=r_StyleId] { width: 220px; }
    
/* ---- [ Recipe List / BrewSession List] ---------------------------------------------> */	
	 .recipe-list .button_small { padding-left: 8px; padding-right: 8px;  }
	 .recipe-list .recipe, .brewsession-list .brewsession { border-bottom: dashed 1px #aaa; padding: 24px; margin-bottom: 12px; }
	 .recipe-list .recipe.last, .brewsession-list .brewsession.last { border-bottom: 0px;  } 
	 .recipe-list .recipe h3, .brewsession-list .brewsession h3 { font-size: 18px; display: inline; margin-bottom: 0; float: none; width: auto; line-height: 18px; background-image: none;}
	 .recipe-list .recipe h3 a, .brewsession-list .brewsession h3 a { color: #666 !important; }
	 .recipe-list .recipe .details, .brewsession-list .brewsession .details { padding-top: 2px; margin-left: 100px; }
	 .recipe-list .recipe .data, .brewsession-list .brewsession .data { margin-top: 4px; font-size: 14px; }
	 .recipe-list .recipe .actions, .brewsession-list .brewsession .actions { margin-top: 12px; font-size: 14px; }
	 .recipe-list .recipe .actions .button_small, .brewsession-list .brewsession .actions .button_small { margin-right: 4px; }
	 .recipe-list .recipe .image, .brewsession-list .brewsession .image { float: left; margin-right: 18px; }
	 .recipe-list .recipe .image img, .brewsession-list .brewsession .image img { border: solid 1px #ddd; }
	 .recipe-list .recipe .description, .brewsession-list .brewsession .description { clear: both; font-size: 14px; padding: 12px 12px 12px 0px; margin-left: 100px; }
	 .brewsession-list .brewsession .data .datapoint { margin-right: 5px; vertical-align: middle; }
	 .brewsession-list .brewsession .data .datapoint * { vertical-align: middle; }
	
 /* --- [ Features ] -----------------------------------------> */
	#view-features .last { background-color: #eee; padding: 24px; margin-left: 640px; border: solid 1px #ccc; }
	#view-features .img-wrap { margin: 0 auto; padding: 8px; border: solid 1px #ccc; background-color: #fff; width: 510px; text-align: center; margin-bottom: 18px;}

 /* --- [ Features ] -----------------------------------------> */
	#view-faq ul { margin-left: 40px; }
	#view-faq ul li { list-style: disc; font-size: 14px; font-weight: bold; }

 /* --- [ Suggestion Form ] -----------------------------------------> */
	#suggestion-form { }
	#suggestion-form textarea { display: block; width: 220px; padding: 12px; height: 145px; border: solid 1px #ccc; resize: none; margin-bottom: 18px; }
	#suggestion-form .success-message { font-size: 10px; margin-top: 4px; display: none; color: #86a830 ; }
	#suggest-limit { font-size: 11px; color: #aaa; display: block; margin-bottom: 20px; }
	
/* --- [ Home Page ] -----------------------------------------> */
	#view-home .hero { width: 960px; margin: 0 auto; height: 77px; }
	#view-home .hero .copy { float: left; width: 350px; }
	#view-home .hero .copy h1 { margin-top: 30px; }
	#view-home .hero .copy .description { margin-top: 20px; }
	#view-home .hero .search { float: right; }
	#view-home .connect, #view-home .discover, #view-home .create { padding-left: 42px; }
	#view-home .connect { background: url(/img/connect.png) no-repeat; }
	#view-home .discover { background: url(/img/discover.png) no-repeat; }
	#view-home .create { background: url(/img/create.png) no-repeat; }
	#view-home .webdesign a:hover { text-decoration: none; }
	.Fblog h3, .tweets h3, .testimonial h3 { line-height: 40px; }

/* --- [ Terms of Use / Privacy Policy ] -----------------------------------------> */
	#terms-view ol, #privacy-view ul { list-style: disc; margin-left: 24px; padding-left: 18px; margin-bottom: 24px; }
	#terms-view ol li, #privacy-view ul li { margin-bottom: 8px; line-height: 18px; }

/* --- [ Search Results ] --------------------------------------------------------> */
	#searchresults-view { }
	.blogpost { border-bottom: dashed 1px #aaa; margin-bottom: 18px; }
	.blogpost.last { border-bottom: 0; }
	.blogpost h4 { margin-bottom: 2px !important; color: #888; font-size: 18px; }
	.blogpost .preview { font-size: 14px; margin-bottom: 18px; margin-top: 12px; line-height: 21px;}

/* --- [ About ] --------------------------------------------------------> */
	#about-view ul { margin: 8px 24px; list-style: disc; }
	
/* --- [ Contact ] --------------------------------------------------------> */
	#contact-view textarea { width: 550px; height: 200px; resize: none; }
	#contact-view .form-field { margin-bottom: 18px; }
	
/* --- [ How it works ] --------------------------------------------------------> */
	#howitworks .twocol-copyleft { margin-top:20px; }
    #howitworks .twocol-copyleft-copy { float:left; width:250px; margin-right:50px; }
    #howitworks .twocol-copyleft-copy h3 { margin-top:40px; background-image: none; margin-bottom:0px; line-height:normal; }
    #howitworks .twocol-copyright { margin-top:20px; }
    #howitworks .twocol-copyright-image { float:left; width:253px; margin-right:50px; }
    #howitworks .twocol-copyright-copy { margin-left:400px; width:300px; padding-top:25px; }
    #howitworks .twocol-copyright-copy h3 { margin-top:40px; background-image: none; margin-bottom:0px; float:none; line-height:normal; }
    #howitworks .twocol-copyleft-copy-small { float:left; width:290px; margin-right:15px; }
    #howitworks .rightsec { margin-top: 80px; }
    #howitworks .howitworksbuttons { width: 180px; height: 22px;font-weight: bold; font-size: 14px; text-align: center;border: solid 1px #AAA; }
    #howitworks .howitworksbuttons:hover { width: 180px; height: 22px; font-weight: bold; font-size: 14px; text-align: center;border: solid 1px #AAA; }
    #howitworks .howitworks-header { font-size:34px; }

/* --- [ Browse Recipes ] --------------------------------------------------------> */
	#recipes-view .style { width: 280px; height: 115px; padding: 10px; float: left; border: solid 2px #ccc; background-color: #eee; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; margin-right: 12px; margin-bottom: 12px; }
	#recipes-view .style.last { margin-right: 0; }
	#recipes-view .style h4 { font-size: 14px; }
	#recipes-view .style a { color: #666 !important; }
	#recipes-view .style:hover { background-color: #ffffee; }
	
/* --- [ Style Detail ] --------------------------------------------------------> */
	#view-styledetail .primary { background-color: #fff; border: solid 1px #ddd; border-radius: 8px; margin-right: 20px;width: 678px; }
	#view-styledetail .compliment { width: 236px; }
	#view-styledetail .primary > h3 { font-size: 20px; padding: 16px;padding-bottom: 0; }
	#view-styledetail .summary { padding: 8px 12px 24px 12px; margin-bottom: 24px; background-color: #eee; border: solid 1px #ccc; border-radius: 8px; }
	#view-styledetail .summary .item label { width: 80px; }
	#brewsessiondetail-view .summary .item label { width: 175px; }
	#view-styledetail .hero { margin: 12px 0 20px 0; }
	#view-styledetail .hero .intro { width: 300px; float: left; padding-top: 8px;}
	#view-styledetail .hero p { font-size: 14px; padding-right: 10px; }
	#view-styledetail .hero .intro h2 { font-size: 18px; font-family: Arial;font-weight: bold; line-height: 26px; margin-bottom: 12px; }
	#view-styledetail .hero .image { float: right; border: solid 1px #ccc; padding: 4px; }
	
	#view-styledetail .recipe-list .recipe { padding: 18px; border-bottom: solid 1px #ddd; margin-bottom: 0; }
	#view-styledetail .recipe-list .recipe:nth-of-type(1) { border-top: solid 1px #ddd; }
	#view-styledetail .compliment .summary { padding-bottom: 12px; }
	#view-styledetail .compliment .summary h3 { margin-bottom: 12px; }
	#view-styledetail .compliment .summary .item { padding-bottom: 8px; }

	

/* --- [ Pager ] --------------------------------------------------------> */
	.pager { margin-top: 18px; padding-top: 12px; margin-bottom: 18px; }	
	.pager .links { text-align: center; }
	.pager .links a, .pager .links span.current { background-color: #eee; border: solid 1px #aaa; padding: 8px; }
	.pager .links a.previous, .pager .links a.next { color: #fff !important; font-size: 18px; border-radius: 8px; width: 150px; text-align: center; }
	.pager .links span.current { background-color: #666; color: #eee; }
	.pager .links a { background-color: #ddd; border: solid 1px #aaa; padding: 8px; display: inline-block; margin-bottom: 8px; }
	.pager .links a:hover { text-decoration: none !important; background-color: #aaa; }
	
/* --- [ Ing Detail Pages ] --------------------------------------------------------> */
	
	.ing-detail-view .summary .item { padding-bottom: 0; }

	.ing-detail-view .summary h3 { text-align: center; padding: 0; margin: 0; }
	.ing-detail-view .summary .product { margin-top: 12px; margin-top: 30px; text-align: center;  }
	.ing-detail-view .summary .product .name { font-size: 14px; }
	.ing-detail-view .summary .product .price { font-size: 18px; margin-top: 5px; }
	.ing-detail-view .summary .button { margin-top: 12px; display: block; }

/* --- [ Tasting Notes ] --------------------------------------------------------> */
	.tasting-notes .tasting-note { border-bottom: 1px solid #CFD2D7; padding: 18px;}
	.tasting-notes .tasting-note:last-of-type { border-bottom: 0px; padding: 18px;}
	.tasting-notes .tasting-note.last { border-bottom: 0; }
	.tasting-notes .tasting-note .item { margin-bottom: 12px; }
	.tasting-notes .tasting-note .avatar { margin-right: 8px; }
	.tasting-notes .tasting-note .tasting-title, .tasting-notes .tasting-note .avatar { float: left; }
	.tasting-notes .tasting-note .rating { float: right; }

	#tasting-note-form { padding: 18px; }
    #tasting-note-form h4 { font-weight: bold; font-size: 14px; margin-bottom: 18px; }
    #tasting-note-form .values > div { width: 110px; padding: 0 5px; float: left; }
    #tasting-note-form .values > div { text-align: center; }
    #tasting-note-form .values > div:nth-of-type(1) { width: 95px; }
    #tasting-note-form .values > div:nth-of-type(2) { width: 115px; }
    #tasting-note-form .values > div:nth-of-type(2) img { padding-top: 6px; }
    #tasting-note-form label { display: block; font-weight: bold; }
    #tasting-note-form input { text-align: center; }
    #tasting-note-form .notes { padding: 12px 0 0 5px; }
    #tasting-note-form .notes textarea { height: 42px; width: 570px; border: 2px inset; padding: 8px; border-radius: 3px; }
    #tasting-note-form .save { margin-left: 5px; margin-top: 14px; display: block; }
    #tasting-note-form .save a { padding-left: 14px; padding-right: 14px; }

/* --- [ Calculations ] --------------------------------------------------------> */
	#view-calculations .formula { font-size: 18px; font-style: italic; text-align: center; }
	#view-calculations .screenshot { text-align: center; }
	#view-calculations .maincalcs { list-style: disc; margin-left: 30px; }
	#view-calculations .maincalcs li { margin-bottom: 15px; }
	#calculations-dialog { padding: 0px; }

    .calculations .primary > h3 { margin: 4px 0 10px 0; }
    .calculations .compliment { width: 187px; padding: 4px 25px; }

/* --- [ Calculators ] --------------------------------------------------------> */
    .calculations .maincalcs { list-style: disc; margin-left: 30px; }
	.calculations .maincalcs li { margin-bottom: 15px; }
	.calculations div.options { padding-bottom: 0 !important; } 

    .calculators > span { height: 20px; padding-right: 0; }
    .calculators > span h4 { margin: -3px 0 0 0; color: white; text-shadow: none;  text-transform: uppercase; letter-spacing: 2px; font-family: Tahoma; }
    .calculators input, .calculators select { font-size: 12px; }
    .calculators h4 { font-size: 17px; }
    .calculators .TempVal { width: 30px!important; }
    .calculators label { display: inline-block; width: 175px; color: #666; }
    .calculators .calculate { height: 40px; margin-top: 20px; }
    .calculators #correctedGravity { font-weight: bold; font-size: 14px; }
    
    .mash-sparge-calc .wrapper { overflow: auto; padding-bottom: 60px;}
    .mash-sparge-calc .optional-equipment-expand { cursor:pointer; }
    .mash-sparge-calc .optional-equipment-expand img { margin-left: 20px; }
    .mash-sparge-calc .rightside { float:left; width: 310px; }
    .mash-sparge-calc .leftside { float: left; width: 350px; padding-right: 20px; }
    .mash-sparge-calc .leftside label { width: 185px; }
    .mash-sparge-calc .rightside .form-field { font-size: 11px; }
    .mash-sparge-calc .rightside label { width: 200px; font-size: 11px; }

/* --- [ User Profile ] --------------------------------------------------------> */
	h2#ProfileName { margin: 0 0 12px 0; padding: 4px 0 0 0; font-size: 28px; }
	#view-userprofile .form-field { clear: both;  }
	#view-userprofile  .form-field label { float: left; min-width: 125px; }
	#view-userprofile .form-field span { float: left; margin-bottom: 4px; }
	#view-userprofile .profile-photo { float: left; padding: 5px; margin-right: 16px; border: solid 1px #ccc; }
	#view-userprofile .summary { float: left; width: 725px; }
	#view-userprofile .follow-brewer { margin-top: 10px; padding: 4px 10px; width: 75px; text-align: center; }

	.mini-user-wrapper { height: 345px; overflow-y: auto; }
	.mini-user { width: 105px; height: 120px; text-align: center; float: left; }
	.mini-user img { border: solid 1px #aaa; }
	.mini-user div { text-align: center; margin-top: 4px; font-weight: bold; }
	.mini-user div a { color: #666 !important; }

/* --- [ Modal ] --------------------------------------------------------> */
	.modal { padding: 12px 25px; }
	.modal h2 { margin-bottom: 8px; }

/* --- [ Recipe Finder] --------------------------------------------------------> */
	#view-recipefinder { padding-top: 18px; }
	#view-recipefinder .primary { width: 625px; margin-right: 0; }
	#view-recipefinder .compliment { width: 300px; margin-right: 25px; }
	#view-recipefinder .groupbox { margin-bottom: 12px; background-color: #fff; }
	#view-recipefinder label { display: inline-block; margin-right: 12px; }
	#view-recipefinder .styles label { display: block; }
	#view-recipefinder .styles { height: 150px; width: 95%; overflow-y: scroll; padding: 5px; border: solid 1px #ccc; }
	#view-recipefinder p { margin-top: 8px; }
	#view-recipefinder ul { list-style: disc; margin-left: 18px; margin-top: 10px; }
	#view-recipefinder ul li { margin-bottom: 8px; line-height: 1.5em; }
	#view-recipefinder input[type=text] { width: 95%; margin-bottom: 8px; }
	#view-recipefinder span.fine-print { color: #666; font-size: 11px !important; }

/* --- [ Import Beer Xml ] --------------------------------------------------------> */
	#view-importbeerxml { width: 490px; }
	#view-importbeerxml h2 { margin-bottom: 8px; }
	#view-importbeerxml p { line-height: 1.5; margin-bottom: 16px; }
	#view-importbeerxml input[type=file] { width: 340px; font-size: 14px; padding: 0; }
	.import-beerxml-review { max-width: 860px; margin: 36px auto 60px; }
	.import-beerxml-review h1 { margin-bottom: 8px; }
	.import-beerxml-review p { max-width: 680px; line-height: 1.55; }
	.import-beerxml-list { margin-top: 22px; border: 1px solid #d8d0c3; border-radius: 8px; overflow: hidden; background: #fff; }
	.import-beerxml-choice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin: 0; border-bottom: 1px solid #e7e0d5; cursor: pointer; }
	.import-beerxml-choice:last-child { border-bottom: 0; }
	.import-beerxml-choice:hover { background: #fbf7ef; }
	.import-beerxml-choice input { margin-top: 4px; }
	.import-beerxml-choice strong, .import-beerxml-choice small { display: block; }
	.import-beerxml-choice small { margin-top: 3px; color: #716b62; }

/* --- [ lovibond sprite ] --------------------------------------------------------> */
    .lovibond.L0 { background-position:0px 420px; }
    .lovibond.L1 { background-position:0px 0px; }
    .lovibond.L2 { background-position:0px -30px; }
    .lovibond.L3 { background-position:0px -60px; }
    .lovibond.L4 { background-position:0px -90px; }
    .lovibond.L5 { background-position:0px -120px; }
    .lovibond.L6 { background-position:0px -150px; }
    .lovibond.L7 { background-position:0px -180px; }
    .lovibond.L8 { background-position:0px -210px; }
    .lovibond.L9 { background-position:0px -240px; }
    .lovibond.L10 { background-position:0px -270px; }
    .lovibond.L11 { background-position:0px -300px; }
    .lovibond.L12 { background-position:0px -330px; }
    .lovibond.L13 { background-position:0px -360px; }
    .lovibond.L14 { background-position:0px -390px; }

    .lovibond.L15 { background-position:-30px 0px; }
    .lovibond.L16 { background-position:-30px -30px; }
    .lovibond.L17 { background-position:-30px -60px; }
    .lovibond.L18 { background-position:-30px -90px; }
    .lovibond.L19 { background-position:-30px -120px; }
    .lovibond.L20 { background-position:-30px -150px; }
    .lovibond.L21 { background-position:-30px -180px; }
    .lovibond.L22 { background-position:-30px -210px; }
    .lovibond.L23 { background-position:-30px -240px; }
    .lovibond.L24 { background-position:-30px -270px; }
    .lovibond.L25 { background-position:-30px -300px; }
    .lovibond.L26 { background-position:-30px -330px; }
    .lovibond.L27 { background-position:-30px -360px; }
    .lovibond.L28 { background-position:-30px -390px; }

    .lovibond.L29 { background-position:-60px 0px; }
    .lovibond.L30 { background-position:-60px -30px; }
    .lovibond.L31 { background-position:-60px -60px; }
    .lovibond.L32 { background-position:-60px -90px; }
    .lovibond.L33 { background-position:-60px -120px; }
    .lovibond.L34 { background-position:-60px -150px; }
    .lovibond.L35 { background-position:-60px -180px; }
    .lovibond.L36 { background-position:-60px -210px; }
    .lovibond.L37 { background-position:-60px -240px; }
    .lovibond.L38 { background-position:-60px -270px; }
    .lovibond.L39 { background-position:-60px -300px; }
    .lovibond.L40 { background-position:-60px -330px; }
    .lovibond.L41 { background-position:-60px -360px; }


/* ---- [ Print ] ------------------------------------ */
@media print
{
    body { color:#000; }
	.header-wrapper1 { height: 70px; }
	#user-info { display:none; }
	#primary-nav { display:none; }
	.title { display:none; }
	.comments-sec { display:none; }
	.respond { display:none; }
	.info .button { display:none; }
	#footer { display:none; }
	#view-recipedetail .groupbox td { padding: 2px 8px; }
	#view-recipedetail .recipe-metainfo { display:none; }
	.groupbox { margin-bottom:10px; border:0px; }
	.groupbox > span { padding: 1px; background-color:#ccc; }
	.groupbox > span h3 { color: #000; font-size: 12px; }
	ol.instructions { margin: 0px 32px; }
	ol.instructions li { font-size:100%; margin-bottom:2px; }
}



/* ---- [ Chosen Drop Down ] ------------------------------------ */
    /* @group Base */
    .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; zoom: 1; *display: inline; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-top: -5px; }
        .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #aaa; border-top: 0; background: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }
        .chosen-container.chosen-with-drop .chosen-drop { left: 0; }
        .chosen-container a { cursor: pointer; }

    /* Recipe builder selectors can extend across the following ingredient panel. */
    .builder .groupbox { position: relative; z-index: 1; }
    .builder .groupbox.dropdown-open,
    .builder .groupbox:focus-within { z-index: 2200; }
    .builder .chosen-container.chosen-open { z-index: 2201; }
    .builder .chosen-container.chosen-open .chosen-drop { z-index: 2202; }
    .builder .chosen-container.chosen-drop-up .chosen-drop { top: auto; bottom: 100%; border-top: 1px solid #aaa; border-bottom: 0; }
    .builder .chosen-container.chosen-drop-up .chosen-results { margin: 4px 4px 0 0; }

    /* @end */
    /* @group Single Chosen */
    .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 8px; height: 23px; border: 1px solid #aaa; border-radius: 5px; background-color: #fff; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background-clip: padding-box; box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #444; text-decoration: none; white-space: nowrap; line-height: 24px; }
    .chosen-container-single .chosen-default { color: #999; }
    .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; }
    .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; }
    .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url('/img/chosen-sprite.png') -42px 1px no-repeat; font-size: 1px; }
        .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; }
    .chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; }
    .chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; }
        .chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; background: url('/img/chosen-sprite.png') no-repeat 0px 2px; }
    .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap; }
        .chosen-container-single .chosen-search input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 1px 0; padding: 4px 20px 4px 5px; width: 100%; height: auto; outline: 0; border: 1px solid #aaa; background: white url('/img/chosen-sprite.png') no-repeat 100% -20px; background: url('/img/chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background: url('/img/chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); font-size: 1em; font-family: sans-serif; line-height: normal; border-radius: 0; }
    .chosen-container-single .chosen-drop { margin-top: -1px; border-radius: 0 0 4px 4px; background-clip: padding-box; }
    .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; }

    /* @end */
    /* @group Results */
    .chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch; }
        .chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 15px; }
            .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; }
            .chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default; }
            .chosen-container .chosen-results li.highlighted { background-color: #3875d7; color: #fff; }
            .chosen-container .chosen-results li.no-results { display: list-item; background: #f4f4f4; }
            .chosen-container .chosen-results li.group-result { display: list-item; font-weight: bold; cursor: default; }
            .chosen-container .chosen-results li.group-option { padding-left: 15px; }
            .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; }

    /* @end */
    /* @group Multi Chosen */
    .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: auto !important; height: 1%; border: 1px solid #aaa; background-color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); cursor: text; }
        .chosen-container-multi .chosen-choices li { float: left; list-style: none; }
            .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap; }
                .chosen-container-multi .chosen-choices li.search-field input[type="text"] { margin: 1px 0; padding: 5px; height: 15px; outline: 0; border: 0 !important; background: transparent !important; box-shadow: none; color: #666; font-size: 100%; font-family: sans-serif; line-height: normal; border-radius: 0; }
                .chosen-container-multi .chosen-choices li.search-field .default { color: #999; }
            .chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 3px 0 3px 5px; padding: 3px 20px 3px 5px; border: 1px solid #aaa; border-radius: 3px; background-color: #e4e4e4; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-clip: padding-box; box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); color: #333; line-height: 13px; cursor: default; }
                .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 4px; right: 3px; display: block; width: 12px; height: 12px; background: url('/img/chosen-sprite.png') -42px 1px no-repeat; font-size: 1px; }
                    .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { background-position: -42px -10px; }
            .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); color: #666; }
            .chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; }
                .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px; }
    .chosen-container-multi .chosen-results { margin: 0; padding: 0; }
    .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default; }

    /* @end */
    /* @group Active  */
    .chosen-container-active .chosen-single { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
    .chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid #aaa; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); box-shadow: 0 1px 0 #fff inset; }
        .chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent; }
            .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px; }
    .chosen-container-active .chosen-choices { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
        .chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #111 !important; }

    /* @end */
    /* @group Disabled Support */
    .chosen-disabled { opacity: 0.5 !important; cursor: default; }
        .chosen-disabled .chosen-single { cursor: default; }
        .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; }

    /* @end */
    /* @group Right to Left */
    .chosen-rtl { text-align: right; }
        .chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0; }
            .chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl; }
        .chosen-rtl .chosen-single-with-deselect span { margin-left: 38px; }
        .chosen-rtl .chosen-single div { right: auto; left: 3px; }
        .chosen-rtl .chosen-single abbr { right: auto; left: 26px; }
        .chosen-rtl .chosen-choices li { float: right; }
            .chosen-rtl .chosen-choices li.search-field input[type="text"] { direction: rtl; }
            .chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px; }
                .chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px; }
        .chosen-rtl.chosen-container-single-nosearch .chosen-search,
        .chosen-rtl .chosen-drop { left: 9999px; }
        .chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
        .chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0; }
        .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: none; }
        .chosen-rtl .chosen-search input[type="text"] { padding: 4px 5px 4px 20px; background: white url('/img/chosen-sprite.png') no-repeat -30px -20px; background: url('/img/chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background: url('/img/chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('/img/chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); direction: rtl; }
        .chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px; }
        .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px; }

    /* @end */
    /* @group Retina compatibility */
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
        .chosen-rtl .chosen-search input[type="text"],
        .chosen-container-single .chosen-single abbr,
        .chosen-container-single .chosen-single div b,
        .chosen-container-single .chosen-search input[type="text"],
        .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
        .chosen-container .chosen-results-scroll-down span,
        .chosen-container .chosen-results-scroll-up span { background-image: url('/img/chosen-sprite@2x.png') !important; background-size: 52px 37px !important; background-repeat: no-repeat !important; }
    }
    /* @end */

/* ---- [ Chosen Drop Down Custom ] ------------------------------------ */
    .chosen-container {  margin-top: -5px; }

/* ---- [ Comments ] ------------------------------------ */
	.comments-wrapper { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 6px; background-color: #DDD;margin-top: 12px; overflow: auto; }
	.comments-wrapper > div:first-child, .comments-wrapper .noborder > div:first-child  { box-shadow: none; }
	.comments-wrapper .comment { min-height: 35px; background-color: #EEECEC; padding: 10px; border-top: 1px solid #ddd; box-shadow: inset 0 1px 0 #fff; min-height: 30px; }
	.comments-wrapper .actual-comments .comment:nth-of-type(1) { box-shadow: 0 0 1px 0 #fff; border-top: 0; }
	.comments-wrapper .comment img { height: 32px; width: 32px; margin-right: 10px; float: left; margin-top: 2px;}
	.comments-wrapper .commenttext { margin-top: 2px;overflow: auto;line-height: 15px; }
	.comments-wrapper .commenttext a { color: #666 !important; font-weight: bold; display: inline-block; margin-right: 6px; }
	.comments-wrapper .commentdate { display: block; margin-top: 4px;font-size: .9em; color: #9E9D9D; }
	.comments-wrapper .comment .commenttext #CommentText { float:left; width:510px; display: block; padding: 4px; line-height: 1.5; color: #666; resize: none; border: solid 1px #aaa; height:21px; }
	.comments-wrapper #AddComment { margin: 0; padding: 4px 12px; margin-top: 3px; height: 16px; margin-left: 8px;}

	.dashboard-list .comments-wrapper { margin-left: 70px; padding: 3px; }
    .dashboard-list .comments-wrapper .comment .commenttext .button { padding: 1px 4px; }
    .dashboard-list .comments-wrapper .comment .commenttext #CommentText { width: 320px; }
    .dashboard-list .dashboard-more { width: 514px; text-align: center; }
    .dashboard-list .dashboard-more-holder { text-align: center;}
    .dashboard-list .dashboard-nomore { text-align: center;}
	
/* ---- [ Dashboard ] ------------------------------------ */
     #dashboard .dashboardstats th, #dashboard .dashboardstats td { box-sizing: border-box; border-bottom: 1px solid #eee; padding: 5px 10px; text-align: left; }
    #dashboard .dashboardstats th { width: 200px; }
    #dashboard .dashboardstats td { width: 87px; }
    #dashboard .dashboardstats thead th { font-weight: bold; font-size: 1.2em; }
    #dashboard .dashboard-gutteritem { border: solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 10px; margin-bottom: 18px; background: #fff; }
        #dashboard .dashboard-gutteritem h2 { font-size: 20px; }
    #dashboard .dashboardfollowing { overflow: hidden; }
        #dashboard .dashboardfollowing .viewall { float: right; }
        #dashboard .dashboardfollowing h2 a { font-size: 12px; margin-left: 5px; }
        #dashboard .dashboardfollowing ul { list-style: none; }
        #dashboard .dashboardfollowing li { display: inline-block; padding: 0; margin: 0 2px 2px 0; }
    #dashboard .dashboardnews ul { list-style: disc; margin-left: 20px; }
    #dashboard .dashboardnews li { margin-top: 10px; }
    #dashboard .create-recipe { margin-bottom: 18px; width: 240px; align-items: flex-start; text-align: center;}
    #dashboard #result-tabs .nav a{ font-size: 14px; font-weight:normal; }
    #dashboard .dashboard-spinner { margin-left:200px; }

#dashboard .dashboard-news-card {
    border-color: rgba(81, 117, 69, .22);
    background: linear-gradient(145deg, #ffffff, #f4f7ef);
}

#dashboard .dashboard-news-card .news-date {
    color: #5b8d4f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#dashboard .dashboard-news-card h4 {
    margin: 18px 0 4px;
    color: #304a2d;
    font-size: 14px;
}

#dashboard .dashboard-news-card p {
    margin: 0;
    color: #5c6659;
    line-height: 1.5;
}

.recipe-visibility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(76, 110, 66, .2);
    border-radius: 7px;
    background: rgba(241, 247, 237, .72);
}

.recipe-visibility label {
    color: #334b30;
    font-weight: 800;
}

.recipe-visibility select { min-width: 190px; }

.recipe-visibility p {
    flex: 1 1 100%;
    margin: 0;
    color: #65705f;
}

.recipe-visibility .is-draft { color: #9a650f; }
.recipe-visibility .is-private { color: #566654; }
.recipe-visibility .is-public { color: #38743a; }
     #dashboard #result-tabs #tab-tab-2 .comments-wrapper { margin-left: 100px; }
     #dashboard #result-tabs #tab-tab-3 .comments-wrapper { margin-left: 100px; }
     #dashboard #result-tabs #tab-tab-2 #CommentText { width: 290px; }
     #dashboard #result-tabs #tab-tab-3 #CommentText { width: 290px; }

    .dashboard-item { border-bottom: solid 1px #ccc; padding: 20px 4px; margin-bottom: 12px; overflow: auto; width: 100%; }
    #tab-tab-1 .spinner-dashboard div:nth-last-of-type(4) { border-bottom: none; }
    #tab-tab-2 .spinner-recipe div:nth-last-of-type(4) { border-bottom: none; }
    #tab-tab-3 .spinner-sessions div:nth-last-of-type(4) { border-bottom: none; }
    .dashboard-item .image { float: left; margin-right: 18px; }
    .dashboard-item .details { padding-top: 2px; }
    .dashboard-item .details h3 { font-size: 18px; display: inline; margin-bottom: 0; float: none; width: auto; line-height: 18px; background-image: none; }
    .dashboard-item .details .username { font-size: 15px; color: #9c9c9c; }
    .dashboard-item .details .recipe { margin-top: 10px; }
    .dashboard-item .recipe .recipe-details .actions { margin-top: 7px; font-size: 14px; }
    .dashboard-item .recipe .recipe-details .data { margin-top: 4px; font-size: 14px; }

    .dashboard-item .details .session { margin-top: 10px; }
    .dashboard-item .session .session-details .actions { margin-top: 7px; font-size: 14px; }
    .dashboard-item .session .session-details .data { margin-top: 4px; font-size: 14px; min-height: 15px; }
    .dashboard-item .session .session-details .data .datapoint { /*white-space:nowrap;*/ margin-right:8px; }

	.dashboard-item.tasting-note .details > div { margin-top: 10px; }
	.dashboard-item.tasting-note .data { margin-left: 167px; }
	.dashboard-item.tasting-note .data h4 { margin-top: 3px; margin-bottom: 0; color: #666; font-size: 13px; }
	.dashboard-item.tasting-note .notes { margin-top: 8px; margin-left: 70px; }

/* ---- [ openbrew 2026 theme override ] -------------------------------> */
:root {
    --ob-bg: #f5ede1;
    --ob-ink: #1d1410;
    --ob-soft: #f9f4ec;
    --ob-surface: rgba(255, 251, 245, 0.78);
    --ob-surface-strong: rgba(26, 18, 14, 0.82);
    --ob-border: rgba(68, 46, 36, 0.16);
    --ob-primary: #c86f24;
    --ob-primary-2: #e1a14a;
    --ob-accent: #6f9b7d;
    --ob-shadow: 0 24px 64px rgba(26, 18, 14, 0.16);
}

html,
body {
    min-height: 100%;
    background:
        radial-gradient(circle at 14% 12%, rgba(224, 143, 60, 0.22), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(111, 155, 125, 0.13), transparent 20%),
        radial-gradient(circle at 52% 110%, rgba(83, 55, 43, 0.16), transparent 28%),
        linear-gradient(180deg, var(--ob-bg), #efe3d2);
    color: var(--ob-ink);
}

body {
    background-attachment: fixed;
    color: var(--ob-ink);
    font-family: "Inter", "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}

a {
    color: var(--ob-primary);
}

a:hover {
    color: color-mix(in oklab, var(--ob-primary) 72%, white 28%);
}

#header,
#footer,
#middle-wrapper {
    width: min(1180px, calc(100% - 32px));
}

#header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 18px auto 0;
    padding: 16px 22px;
    height: auto;
    background: rgba(255, 250, 244, 0.74);
    border: 1px solid var(--ob-border);
    border-radius: 28px;
    box-shadow: var(--ob-shadow);
    backdrop-filter: blur(18px) saturate(1.1);
}

#header #logo {
    margin: 0;
    float: none;
    flex: 0 0 auto;
}

#header #logo picture,
#header #logo img {
    display: block;
}

#header #logo img {
    display: block;
    width: auto;
    height: 58px;
}

#primary-nav {
    margin: 0 0 0 auto;
    float: none !important;
}

.auth-choice {
    margin-left: 6px;
    margin-top: 0;
    padding-right: 0;
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.auth-choice .button {
    margin: 0;
}

.auth-choice a#login {
    color: var(--ob-ink);
    font-size: 14px;
    font-family: "Inter", "Segoe UI", sans-serif;
    padding-left: 0;
}

.auth-choice a#login:hover {
    color: var(--ob-primary);
    text-decoration: underline;
}

.header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
    white-space: nowrap;
}

.header-auth .g_id_signin {
    line-height: normal;
}

.header-auth .email-login {
    color: var(--ob-ink);
    font-size: 13px;
    font-weight: 600;
}

.sf-menu-wrapper {
    height: auto;
}

.sf-menu-wrapper ul a {
    color: var(--ob-ink);
    background: transparent;
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sf-menu-wrapper ul a:hover,
.sf-menu-wrapper ul li.current-menu-item a {
    background: rgba(200, 111, 36, 0.12);
    color: var(--ob-ink);
    border-bottom-color: transparent;
    box-shadow: none;
}

	.sf-menu-wrapper ul ul {
    background: rgba(33, 24, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 8px 0;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.24);
    z-index: 2500;
}

.sf-menu-wrapper ul ul a,
.sf-menu-wrapper ul ul li.sfHover ul a {
    color: rgba(255, 249, 243, 0.84);
}

.sf-menu-wrapper ul ul a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

#view-home .header-wrapper-light,
#view-home .header-wrapper,
#view-home .header-wrapper-lightInner {
    background: transparent;
    height: auto;
}

#view-home .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    margin: 18px auto 0;
    padding: 34px 0 0;
    min-height: 0;
    height: auto;
    overflow: visible;
}

#view-home .hero .copy,
#view-home .hero .search {
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
}

#view-home .hero .copy {
    padding: 32px 30px 30px;
    background: rgba(33, 24, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.26);
    color: #f7efe6;
}

#view-home .hero .eyebrow {
    margin-bottom: 10px;
    color: rgba(231, 214, 190, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 700;
}

#view-home .hero .copy .welcome {
    margin-top: 0;
    margin-bottom: 18px;
    color: #fff8f0;
    font-size: clamp(38px, 4.8vw, 70px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

#view-home .hero .description {
    max-width: 38rem;
}

#view-home .hero .description p {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(249, 242, 232, 0.88);
}

#view-home .hero .description .bold,
#view-home .hero .description .smalltext {
    color: rgba(249, 242, 232, 0.82);
}

#view-home .hero .description a {
    color: #fff1d8;
}

#view-home .hero .search {
    padding: 24px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 250, 245, 0.9), rgba(255, 250, 245, 0.76));
    border: 1px solid var(--ob-border);
    box-shadow: var(--ob-shadow);
    backdrop-filter: blur(18px) saturate(1.08);
}

#view-home .hero .search img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(26, 18, 14, 0.16);
}

#middle-wrapper {
    margin-top: 28px;
    padding: 0 0 28px;
}

#middle-wrapper .webdesign {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: 26px;
    padding: 24px;
    box-shadow: var(--ob-shadow);
    backdrop-filter: blur(16px) saturate(1.06);
}

#view-home #middle-wrapper .webdesign {
    float: left;
    width: 300px;
    margin: 0 30px 30px 0;
    min-height: 180px;
    box-sizing: border-box;
}

#view-home #middle-wrapper .webdesign.no-margin {
    margin-right: 0 !important;
}

#view-home #middle-wrapper .clearall {
    clear: both;
}

#middle-wrapper .divider {
    opacity: 0.55;
}

#middle-wrapper .divider .lighting {
    filter: saturate(0.9) contrast(1.05);
}

.button,
.button_small {
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: none;
}

.button_green {
    background: linear-gradient(135deg, var(--ob-primary), var(--ob-primary-2));
    border-color: color-mix(in oklab, var(--ob-primary) 68%, black 32%);
    color: #fffaf4 !important;
    box-shadow: 0 10px 24px rgba(200, 111, 36, 0.24);
}

.button_green:hover {
    color: #fff !important;
    box-shadow: 0 16px 32px rgba(200, 111, 36, 0.34);
}

.button_black,
.button_gray {
    background: rgba(33, 24, 20, 0.06);
    border-color: var(--ob-border);
    color: var(--ob-ink) !important;
}

.button_black:hover,
.button_gray:hover {
    background: rgba(33, 24, 20, 0.1);
}

.widebutton {
    width: auto;
    min-width: 220px;
    padding-left: 22px;
    padding-right: 22px;
}

.groupbox,
.recipe-widget,
.user-widget,
.messages li,
div.error,
#view-login .sign-up,
#view-loginviadialog .sign-up,
#view-settings .personal-info,
#view-settings .change-password,
#view-features .last,
#view-faq .two_third,
#view-opensource .two_third,
#privacy-view,
#terms-view,
#contact-view,
#view-about,
#howitworks,
#view-partnerdashboard .primary,
#view-partnersettings,
#dashboard .dashboard-item {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: 24px;
    box-shadow: var(--ob-shadow);
    backdrop-filter: blur(16px) saturate(1.05);
}

.groupbox > span {
    background: linear-gradient(135deg, rgba(200, 111, 36, 0.96), rgba(151, 82, 22, 0.96));
}

.groupbox > div {
    background: transparent;
}

#view-recipedetail .primary,
#view-recipedetail .compliment,
#view-recipeprint .primary,
#view-recipeprint .compliment,
#dashboard .primary,
#dashboard .compliment {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: 26px;
    box-shadow: var(--ob-shadow);
    padding: 18px;
    backdrop-filter: blur(16px) saturate(1.05);
}

#view-recipedetail .compliment,
#view-recipeprint .compliment {
    margin-top: 18px;
}

.recipe-widget,
.user-widget {
    height: auto;
    min-height: 83px;
}

.recipe-widget .data,
.user-widget .data {
    background: rgba(33, 24, 20, 0.06);
    border-color: rgba(33, 24, 20, 0.1);
}

.messages li.success {
    background: rgba(122, 182, 104, 0.14);
    border-color: rgba(122, 182, 104, 0.24);
    color: #285b2e;
}

.messages li.error,
div.error {
    background: rgba(202, 84, 70, 0.12);
    border-color: rgba(202, 84, 70, 0.22);
    color: #8f2f23;
}

.messages li.warn {
    background: rgba(221, 160, 59, 0.14);
    border-color: rgba(221, 160, 59, 0.24);
    color: #8d5b07;
}

#footer {
    margin: 0 auto 24px;
    padding: 26px 22px 18px;
    background: rgba(33, 24, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    color: rgba(247, 239, 230, 0.86);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px) saturate(1.08);
}

#footer a {
    color: #f7efe6;
}

#footer .logo-btm img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

#footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

#footer .footer-brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

#footer .footer-brand span {
    font-family: "Manrope", "Avenir Next", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

#footer .footer-brand strong {
    color: #fff8f0;
    font-weight: inherit;
}

#footer .footer-brand em {
    color: #e7a729;
    font-style: normal;
    font-weight: inherit;
}

#footer .logo-btm picture {
    display: block;
}

#footer .logo-btm picture img {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
}

#footer .designby {
    color: rgba(247, 239, 230, 0.68);
}

#footer .fine-print {
    color: rgba(247, 239, 230, 0.62);
}

#footer .social a {
    opacity: 0.9;
}

#view-about ul,
#view-features ul,
#view-faq ul {
    padding-left: 20px;
}

#view-about li,
#view-features li,
#view-faq li {
    margin-bottom: 8px;
}

#view-opensource a,
#privacy-view a,
#terms-view a,
#contact-view a {
    color: var(--ob-primary);
}

#FeedbackTrigger {
    opacity: 0.9;
}

@media (max-width: 1100px) {
    #header,
    #footer,
    #middle-wrapper {
        width: min(100% - 24px, 1180px);
    }

    #view-home .hero {
        grid-template-columns: 1fr;
    }

    #primary-nav {
        margin-left: 0;
    }

    .auth-choice {
        width: 100%;
        justify-content: flex-end;
        order: 4;
    }
}

@media (max-width: 820px) {
    #header {
        flex-wrap: wrap;
        gap: 14px;
        padding: 14px 16px;
    }

    #header #logo img {
        height: 50px;
    }

    .sf-menu-wrapper ul li {
        margin-right: 6px;
    }

    .sf-menu-wrapper ul a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }

    .auth-choice {
        justify-content: flex-start;
    }

    #view-home .hero .copy,
    #view-home .hero .search {
        padding: 22px;
    }

    #view-home .hero .copy .welcome {
        font-size: clamp(34px, 11vw, 52px);
    }
}

/* Final cascade: keep the home refinements after the legacy theme rules. */
#view-home .hero {
    background-image: url('/img/home-hero-brew.jpg');
    background-position: center 48%;
}

#header #logo img {
    width: 222px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
}

#header #logo.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    text-decoration: none;
}

#header #logo.brand-mark img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}

#header #logo.brand-mark span {
    font-family: "Manrope", "Avenir Next", sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

#header #logo.brand-mark strong {
    color: #fff8f0;
    font-weight: inherit;
}

#header #logo.brand-mark em {
    color: #e7a729;
    font-style: normal;
    font-weight: inherit;
}

#footer {
    padding: 34px 30px 18px;
}

#footer-inner {
    display: grid;
    grid-template-columns: minmax(230px, 1.25fr) minmax(130px, 0.7fr) minmax(280px, 1.35fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 28px;
    width: 100%;
    margin: 0;
}

#footer .footer-details,
#footer #other-stuff,
#footer #photo-stream {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
}

#footer #photo-stream { display: none; }

#footer .logo-btm {
    float: none;
    width: auto;
    padding-bottom: 14px;
}

#footer .logo-btm img {
    display: block;
    width: 190px;
    max-width: 100%;
}

#footer .footer-details h4 { margin: 0 0 14px; }
#footer .footer-details p { margin: 0; }

#footer .Finfo {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: auto;
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    float: none;
    line-height: 1.4;
}

@media (max-width: 820px) {
    #header #logo img {
        width: 188px;
        height: 32px;
    }

    #header #logo.brand-mark img {
        width: 32px;
        height: 32px;
    }

    #header #logo.brand-mark span {
        font-size: 21px;
    }

    #footer {
        padding: 28px 22px 18px;
    }

    #footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #footer .Finfo { display: block; }
    #footer .designby { margin-top: 8px; }
}

/* Keep emphasis readable after the final legacy-layout refinements. */
html[data-theme="dark"] #middle-wrapper strong,
html[data-theme="dark"] #middle-wrapper .bold {
    color: #fff2df;
    font-weight: 800;
}

html[data-theme="dark"] #dashboard .dashboard-news-card h4 {
    color: #fff1dc;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

html[data-theme="dark"] #dashboard .dashboard-news-card p { color: #e0d4c7; }

/* Keep emphasis readable after the final legacy-layout refinements. */
html[data-theme="dark"] #middle-wrapper strong,
html[data-theme="dark"] #middle-wrapper .bold {
    color: #fff2df;
    font-weight: 800;
}

html[data-theme="dark"] #dashboard .dashboard-news-card h4 {
    color: #fff1dc;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

html[data-theme="dark"] #dashboard .dashboard-news-card p { color: #e0d4c7; }

/* Final dark-theme typography pass: legacy pages place some emphasis text on
   charcoal panels after the main theme rules have loaded. */
html[data-theme="dark"] #middle-wrapper strong,
html[data-theme="dark"] #middle-wrapper .bold {
    color: #fff2df;
    font-weight: 800;
}

html[data-theme="dark"] #dashboard .dashboard-news-card h4 {
    color: #fff1dc;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

html[data-theme="dark"] #dashboard .dashboard-news-card p {
    color: #e0d4c7;
}

/* ---- [ Color theme ] -------------------------------------------------> */
.appearance-settings { max-width: 660px; }

.theme-choice-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 14px;
}

.theme-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(68, 46, 36, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    color: #34261d;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.theme-choice:hover { transform: translateY(-1px); border-color: rgba(200, 111, 36, .62); }
.theme-choice:focus-visible { outline: 3px solid rgba(225, 161, 74, .48); outline-offset: 2px; }
.theme-choice.is-selected { border-color: #c86f24; box-shadow: 0 0 0 3px rgba(200, 111, 36, .16); }
.theme-choice strong, .theme-choice small { display: block; }
.theme-choice strong { font-size: 14px; }
.theme-choice small { margin-top: 3px; color: #77685e; font-size: 11px; line-height: 1.25; }

.theme-choice-swatch {
    position: relative;
    display: block;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    overflow: hidden;
    border: 1px solid rgba(61, 43, 31, .24);
    border-radius: 50%;
}

.theme-choice-light { background: linear-gradient(135deg, #fffaf2 0 50%, #e1a14a 50%); }
.theme-choice-dark { background: linear-gradient(135deg, #25211f 0 50%, #c86f24 50%); }
.theme-choice-system { background: linear-gradient(135deg, #fffaf2 0 45%, #25211f 45% 70%, #6f9b7d 70%); }
.theme-choice-note { color: #716158; font-size: 12px; }
.theme-choice-status { margin-top: 10px; color: #94702f; font-size: 12px; font-weight: 700; }

html[data-theme="dark"] {
    color-scheme: dark;
    --ob-bg: #191513;
    --ob-ink: #f3e9dc;
    --ob-soft: #24201d;
    --ob-surface: rgba(41, 35, 31, .88);
    --ob-surface-strong: rgba(20, 17, 15, .94);
    --ob-border: rgba(241, 220, 190, .16);
    --ob-primary: #eba04d;
    --ob-primary-2: #f4bd70;
    --ob-accent: #91b99b;
    --ob-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 14% 12%, rgba(183, 100, 30, .20), transparent 25%),
        radial-gradient(circle at 84% 14%, rgba(83, 126, 93, .16), transparent 22%),
        linear-gradient(180deg, #191513, #110f0e);
    color: var(--ob-ink);
}

html[data-theme="dark"] #header {
    background: rgba(34, 29, 26, .88);
    border-color: rgba(242, 225, 202, .14);
}

html[data-theme="dark"] #title,
html[data-theme="dark"] .header-wrapper-light,
html[data-theme="dark"] .header-wrapper-lightInner {
    background-color: #211c19;
    color: var(--ob-ink);
}

html[data-theme="dark"] .header-wrapper,
html[data-theme="dark"] .header-wrapper1,
html[data-theme="dark"] .header-wrapper-light,
html[data-theme="dark"] .header-wrapper-lightInner {
    background-color: #211c19 !important;
    background-image: none !important;
}

html[data-theme="dark"] #middle-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .content h1,
html[data-theme="dark"] .content h2,
html[data-theme="dark"] .content h3,
html[data-theme="dark"] .content h4,
html[data-theme="dark"] .content h5,
html[data-theme="dark"] .title h1,
html[data-theme="dark"] .title h2 { color: var(--ob-ink); }

html[data-theme="dark"] #middle-wrapper a:link,
html[data-theme="dark"] #middle-wrapper a:active,
html[data-theme="dark"] #middle-wrapper a:visited { color: var(--ob-primary); }
html[data-theme="dark"] #middle-wrapper a:hover { color: #ffd19b; }

html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    border-color: #5c5149;
    background: #2a2522;
    color: #f6eadb;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #aa9c90; }

html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tabs .tab,
html[data-theme="dark"] .groupbox,
html[data-theme="dark"] .groupbox > div,
html[data-theme="dark"] .graybox,
html[data-theme="dark"] #dashboard .dashboard-gutteritem,
html[data-theme="dark"] .recipe-widget,
html[data-theme="dark"] .user-widget,
html[data-theme="dark"] .recipe-list .recipe,
html[data-theme="dark"] .brew-session,
html[data-theme="dark"] .comments-wrapper .comment,
html[data-theme="dark"] .pagination {
    border-color: #514740;
    background: #282320;
    color: var(--ob-ink);
}

html[data-theme="dark"] .tabs .nav,
html[data-theme="dark"] .tabs .nav li,
html[data-theme="dark"] .tabs .nav a {
    border-color: #514740;
    background: #211d1a;
    color: #e8dacb;
}

html[data-theme="dark"] .tabs .nav .ui-tabs-active a,
html[data-theme="dark"] .tabs .nav a:hover { background: #342c27; color: #ffe0b9; }

html[data-theme="dark"] table th,
html[data-theme="dark"] table td,
html[data-theme="dark"] .groupbox tbody tr,
html[data-theme="dark"] .dashboard-item { border-color: #514740; }
html[data-theme="dark"] table tr:nth-child(even) td,
html[data-theme="dark"] .groupbox tbody tr:nth-child(even) td,
html[data-theme="dark"] .even { background: #302a26; }
html[data-theme="dark"] .groupbox thead td,
html[data-theme="dark"] .groupbox tfoot td { background: #39312c; color: #f1e4d5; }

html[data-theme="dark"] #view-home .recipe-widget { border-color: #514740; background: #282320; }
html[data-theme="dark"] #view-home .recipe-widget .name { color: #f1e5d7; }
html[data-theme="dark"] #view-home .recipe-widget .type,
html[data-theme="dark"] #view-home .recipe-widget .author,
html[data-theme="dark"] #view-home .recipe-widget .data .stat { color: #c8bbae; }
html[data-theme="dark"] #view-home .recipe-widget .data { border-color: #514740; background: rgba(132, 165, 124, .11); }

html[data-theme="dark"] #dashboard .dashboard-news-card {
    border-color: rgba(145, 185, 155, .28);
    background: linear-gradient(145deg, #2d2925, #232a22);
}
html[data-theme="dark"] #dashboard .dashboard-news-card h4 { color: #cae2cc; }
html[data-theme="dark"] #dashboard .dashboard-news-card p,
html[data-theme="dark"] .recipe-visibility p { color: #c4beb4; }
html[data-theme="dark"] .recipe-visibility { border-color: rgba(145, 185, 155, .3); background: rgba(88, 124, 90, .15); }
html[data-theme="dark"] .recipe-visibility label { color: #e1efe0; }

html[data-theme="dark"] .missing-recipe-page {
    border-color: rgba(241, 220, 190, .14);
    background: radial-gradient(circle at 15% 12%, #332a23 0, #251f1b 46%, #1c1816 100%);
}
html[data-theme="dark"] .missing-recipe-copy h2 { color: #fae7cf; }
html[data-theme="dark"] .missing-recipe-copy p { color: #d1c0ae; }

/* The recipe builder has its own older stylesheet, so it needs a few
   explicit surfaces rather than inheriting the general card treatment. */
html[data-theme="dark"] .facts,
html[data-theme="dark"] #select-style,
html[data-theme="dark"] .builder .introrow > td,
html[data-theme="dark"] .builder [data-name=s_table] td,
html[data-theme="dark"] .builder [data-name=s_table] tbody tr td.placeholder {
    border-color: #5a4e45 !important;
    background: #282320 !important;
    color: #f3e9dc;
}

html[data-theme="dark"] .facts .block,
html[data-theme="dark"] .facts .first { border-color: #5a4e45; }
html[data-theme="dark"] .facts .color { border-color: #8d7c6e; }
html[data-theme="dark"] .builder label,
html[data-theme="dark"] .builder .introrow h4,
html[data-theme="dark"] .builder .groupbox:nth-of-type(7) div table thead tr td p,
html[data-theme="dark"] .builder [data-name=s_table] [data-name=s_RankLabel] { color: #eadccc; }
html[data-theme="dark"] .builder .info .values .textlabel { color: #b8a99b; }
html[data-theme="dark"] .builder .dataTable tbody tr[data-datarow] td { background: #282320; }
html[data-theme="dark"] .builder .dataTable tbody tr[data-datarow]:nth-child(even) td { background: #302a26; }

html[data-theme="dark"] .chosen-container .chosen-drop,
html[data-theme="dark"] .chosen-container-single .chosen-single,
html[data-theme="dark"] .chosen-container-single .chosen-search input[type="text"],
html[data-theme="dark"] .chosen-container-multi .chosen-choices {
    border-color: #5a4e45;
    background: #2a2522;
    box-shadow: none;
    color: #f3e9dc;
}

html[data-theme="dark"] .chosen-container-single .chosen-default,
html[data-theme="dark"] .chosen-container-multi .chosen-choices li.search-field input[type="text"] { color: #b9aa9c; }
html[data-theme="dark"] .chosen-container .chosen-results li.no-results { background: #39312c; color: #eadccc; }
html[data-theme="dark"] .chosen-container .chosen-results li.highlighted { background: #a85e25; }
html[data-theme="dark"] .chosen-container-multi .chosen-choices li.search-choice { border-color: #65564c; background: #3a312c; color: #f3e9dc; box-shadow: none; }

html[data-theme="dark"] #view-fermentables .ings li,
html[data-theme="dark"] #view-fermentables .ings li .data { border-color: #514740; background: #2b2623; color: #f3e9dc; }

/* A few legacy pages load their own view stylesheet after custom.css. */
html[data-theme="dark"] .groupbox {
    border-color: #514740 !important;
    background: #282320 !important;
    color: #f3e9dc !important;
}
html[data-theme="dark"] .groupbox > div,
html[data-theme="dark"] .groupbox > form {
    background: #282320 !important;
    color: #f3e9dc !important;
}

html[data-theme="dark"] #recipes-view .style {
    border-color: #514740;
    background: #2b2623;
    color: #eadccc;
}
html[data-theme="dark"] #recipes-view .style:hover { background: #37302b; }
html[data-theme="dark"] #recipes-view .style a { color: #f1c185 !important; }

html[data-theme="dark"] .support-intro h1,
html[data-theme="dark"] .support-copy h2 { color: #f4e6d6; }
html[data-theme="dark"] .support-lede,
html[data-theme="dark"] .support-copy p,
html[data-theme="dark"] .support-note { color: #cbbdad; }
html[data-theme="dark"] .support-intro .eyebrow { color: #9fcfa8; }
html[data-theme="dark"] .support-panel {
    border-color: #514740;
    background: #282320;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .support-copy { background: #282320; }

html[data-theme="dark"] .theme-choice { border-color: #5a4e45; background: #2a2522; color: #f3e9dc; }
html[data-theme="dark"] .theme-choice small,
html[data-theme="dark"] .theme-choice-note { color: #c6b7aa; }
html[data-theme="dark"] .theme-choice-status { color: #f2ba70; }
html[data-theme="dark"] .theme-choice.is-selected { border-color: #eba04d; box-shadow: 0 0 0 3px rgba(235, 160, 77, .19); }

@media (max-width: 640px) {
    .theme-choice-group { grid-template-columns: 1fr; }
    .theme-choice { min-height: 64px; }
}

/* Friendly, generic 404 page. Avoid naming private recipes so their existence
   remains visible only to the brewer who owns them. */
.missing-recipe-page {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 84px);
    max-width: 1040px;
    min-height: 430px;
    margin: 34px auto 54px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(82, 48, 21, .12);
    border-radius: 18px;
    background: radial-gradient(circle at 15% 12%, #fffef9 0, #fff8e9 38%, #f4ead6 100%);
    box-shadow: 0 18px 42px rgba(67, 41, 21, .11);
}

.missing-recipe-illustration {
    flex: 0 0 190px;
    width: 190px;
}

.missing-recipe-illustration img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 11px 24px rgba(83, 54, 28, .10);
}

.missing-recipe-copy { max-width: 550px; }
.missing-recipe-kicker { margin: 0 0 9px; color: #b76816; font-size: 12px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.missing-recipe-copy h2 { margin: 0 0 15px; color: #402712; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; }
.missing-recipe-copy p { max-width: 515px; color: #624b36; font-size: 16px; line-height: 1.65; }
.missing-recipe-copy .missing-recipe-note { margin-top: 15px; font-size: 14px; }
.missing-recipe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.missing-recipe-actions .button { margin: 0; padding: 9px 15px; }

@media (max-width: 650px) {
    .missing-recipe-page { display: block; margin: 20px 0 36px; padding: 30px 24px; text-align: center; }
    .missing-recipe-illustration { width: 176px; margin: 0 auto 24px; }
    .missing-recipe-copy { margin: 0 auto; }
    .missing-recipe-copy p { margin-right: auto; margin-left: auto; }
    .missing-recipe-actions { justify-content: center; }
}

/* The legacy footer floated left, which prevented its auto margins from centering.
   Keep this last so every page using the shared layout lands on the same rail. */
#footer {
    box-sizing: border-box;
    float: none;
    clear: both;
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto;
}

@media (max-width: 820px) {
    #footer {
        width: calc(100% - 24px);
        margin: 18px auto;
    }
}

.home-contact {
    margin-top: 16px;
    color: #586151;
}

.home-contact a {
    color: #3f7f37;
    font-weight: 700;
}

.support-page {
    width: min(980px, 100%);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 56px 42px 34px;
}

.support-intro {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}

.support-intro .eyebrow {
    margin: 0 0 12px;
    color: #477442;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.support-intro h1 {
    margin: 0 0 15px;
    color: #253025;
    font: 700 clamp(2.25rem, 5vw, 3.9rem)/1.04 Georgia, serif;
    letter-spacing: -.045em;
}

.support-lede {
    margin: 0;
    color: #5c6659;
    font-size: 1.14rem;
    line-height: 1.65;
}

.support-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(265px, .8fr);
    overflow: hidden;
    border: 1px solid #dde3d8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(42, 55, 39, .09);
}

.support-copy {
    padding: 38px 42px;
}

.support-copy h2,
.support-action h2 {
    margin: 0 0 14px;
    color: #293528;
    font: 700 1.65rem/1.2 Georgia, serif;
}

.support-copy p {
    color: #586151;
    font-size: 1.02rem;
    line-height: 1.65;
}

.support-copy p:last-child { margin-bottom: 0; }

.support-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px 28px;
    text-align: center;
    background: linear-gradient(145deg, #314d2e, #203a26);
    color: #edf4e8;
}

.support-action h2 { color: #fff; }
.support-action p { margin: 0 0 24px; color: #d9e7d4; line-height: 1.5; }
.support-cup { margin-bottom: 12px; font-size: 2.5rem; }

.support-action .button {
    display: inline-block;
    box-sizing: border-box;
    padding: 12px 18px;
    border-radius: 7px;
    background: #f1c75b;
    color: #283121;
    text-shadow: none;
}

.support-note {
    margin: 28px 0 0;
    color: #697266;
    text-align: center;
    font-style: italic;
}

@media (max-width: 700px) {
    .support-page { padding: 36px 16px 18px; }
    .support-panel { grid-template-columns: 1fr; }
    .support-copy { padding: 30px 26px; }
    .support-action { padding: 32px 24px; }
}

/* Keep the footer on the same centered desktop rail as the header and content. */
#footer {
    box-sizing: border-box;
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto;
    float: none;
    clear: both;
}

/* About was inheriting a legacy float layout, which collapsed its panel. */
#view-about {
    display: flow-root;
    box-sizing: border-box;
    padding: 32px;
}

#view-about .two_third {
    float: none;
    width: min(760px, 100%);
}

#view-about h3 {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.15;
}

#view-about h4 {
    margin: 26px 0 10px;
    font-size: 15px;
}

#view-about ul {
    margin: 0;
    padding-left: 22px;
}

.about-page { max-width: 980px; margin: 0 auto; padding: 46px 42px; }
.about-intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.about-intro .eyebrow { color: var(--ob-primary); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-intro h2 { color: var(--ob-ink); font-size: clamp(34px,4vw,50px); line-height: 1.04; letter-spacing: -.05em; margin: 10px 0 16px; }
.about-intro p { color: #61544b; font-size: 17px; line-height: 1.65; }
.about-story { display: grid; grid-template-columns: 1.4fr .75fr; gap: 52px; padding: 36px; background: rgba(255,250,245,.72); border: 1px solid var(--ob-border); }
.about-story h3,.about-reborn h3 { font-size: 26px; margin-bottom: 14px; }
.about-story p,.about-reborn p { font-size: 16px; line-height: 1.7; }
.about-story aside { display: grid; align-content: start; gap: 6px; padding-left: 24px; border-left: 2px solid rgba(200,111,36,.45); }
.about-story aside span { color: var(--ob-primary); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.about-story aside strong { margin-bottom: 15px; }
.about-reborn { margin-top: 28px; padding: 36px; background: rgba(43,31,25,.94); color: #fff7ee; }
.about-reborn h3,.about-reborn p { color: inherit; }
.about-actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.about-actions > a:not(.button) { color: #fff7ee; font-weight: 700; }
.about-credit { margin-top: 22px; color: #74665c; font-size: 12px; line-height: 1.5; }
@media (max-width:820px) { .about-page { padding: 28px 20px; } .about-story { grid-template-columns: 1fr; gap: 28px; padding: 24px; } .about-reborn { padding: 24px; } }

.features-page { max-width: 1080px; margin: 0 auto; padding: 44px 42px; }
.features-intro { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.features-intro .eyebrow { color: var(--ob-primary); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.features-intro h2 { color: var(--ob-ink); font-size: clamp(34px, 4vw, 48px); line-height: 1.04; margin: 10px 0 16px; letter-spacing: -.05em; }
.features-intro p { color: #61544b; font-size: 17px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feature-card { display: flex; flex-direction: column; gap: 20px; padding: 26px; border: 1px solid var(--ob-border); background: rgba(255,250,245,.72); }
.feature-card:nth-child(3n) { background: rgba(43,31,25,.94); color: #fff7ee; }
.feature-card:nth-child(3n) h3, .feature-card:nth-child(3n) p { color: inherit; }
.feature-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.feature-card div { flex: 1; }
.feature-card h3 { font-size: 22px; line-height: 1.15; margin-bottom: 10px; }
.feature-card p { font-size: 15px; line-height: 1.65; }
.feature-card img { width: 100%; height: 190px; object-fit: cover; object-position: top; box-shadow: 0 12px 28px rgba(20,14,10,.18); }
.feature-card.wide img { width: 49%; height: 250px; }
@media (max-width: 820px) { .features-page { padding: 28px 20px; } .feature-grid { grid-template-columns: 1fr; } .feature-card.wide { grid-column: auto; flex-direction: column; } .feature-card.wide img { width: 100%; height: auto; } }

.how-it-works-page { max-width: 980px; margin: 0 auto; }
.how-it-works-page { padding: 44px 42px 18px; }
.how-it-works-intro { max-width: 650px; margin: 0 auto 54px; text-align: center; }
.how-it-works-intro .eyebrow { color: var(--ob-primary); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.how-it-works-intro h2 { color: var(--ob-ink); font-size: clamp(34px, 4vw, 48px); line-height: 1.04; margin: 10px 0 16px; letter-spacing: -.05em; }
.how-it-works-intro p { color: #61544b; font-size: 17px; line-height: 1.65; }
.how-it-works-step { display: flex; align-items: center; gap: 64px; margin: 0 0 32px; padding: 34px; border: 1px solid var(--ob-border); background: rgba(255,250,245,.72); }
.how-it-works-step:nth-of-type(odd) { background: rgba(43,31,25,.94); color: #fff7ee; }
.how-it-works-step:nth-of-type(odd) h3, .how-it-works-step:nth-of-type(odd) p { color: inherit; }
.how-it-works-step.reverse { flex-direction: row-reverse; }
.how-it-works-copy { flex: 1 1 46%; }
.how-it-works-copy h3 { font-size: 25px; line-height: 1.15; margin-bottom: 14px; }
.how-it-works-copy p { font-size: 15px; line-height: 1.7; }
.how-it-works-copy a:not(.button) { display: inline-block; margin-top: 6px; font-weight: 700; }
.how-it-works-step img { max-width: 46%; height: auto; padding: 10px; background: #fff; box-shadow: 0 18px 34px rgba(20,14,10,.2); }
@media (max-width: 820px) { .how-it-works-page { padding: 28px 20px; } .how-it-works-step, .how-it-works-step.reverse { flex-direction: column; gap: 24px; padding: 24px; } .how-it-works-step img { max-width: 100%; } }

#footer .logo-btm .footer-brand img {
    width: 32px;
    height: 32px;
    max-width: none;
}

#footer .logo-btm .footer-brand img {
    width: 32px;
    height: 32px;
    max-width: none;
}

/* ---- [ home image and footer alignment ] ---------------------------> */
#view-home .hero {
    background-image: url('/img/home-hero-brew.jpg');
    background-position: center 48%;
}

#header #logo img {
    width: 222px;
    height: auto;
}

#footer {
    padding: 34px 30px 18px;
}

#footer-inner {
    display: grid;
    grid-template-columns: minmax(230px, 1.25fr) minmax(130px, 0.7fr) minmax(280px, 1.35fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 28px;
    width: 100%;
    margin: 0;
}

#footer .footer-details,
#footer #other-stuff,
#footer #photo-stream {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
}

#footer #photo-stream {
    display: none;
}

#footer .logo-btm {
    float: none;
    width: auto;
    padding-bottom: 14px;
}

#footer .logo-btm img {
    display: block;
    width: 190px;
    max-width: 100%;
}

#footer .footer-details h4 {
    margin: 0 0 14px;
}

#footer .footer-details p {
    margin: 0;
}

#footer .Finfo {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: auto;
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    float: none;
    line-height: 1.4;
}

@media (max-width: 820px) {
    #header #logo img {
        width: 188px;
    }

    #footer {
        padding: 28px 22px 18px;
    }

    #footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #footer .Finfo {
        display: block;
    }

    #footer .designby {
        margin-top: 8px;
    }
}

/* ---- [ home page: classic Brewgr proportions, refreshed ] ---------> */
/* Keep the workspace content-led on large displays; the first 2026 pass
   made every section a large floating card and left the page visually adrift. */
#header,
#footer,
#middle-wrapper {
    width: min(1180px, calc(100% - 40px));
}

#header {
    margin-top: 0;
    min-height: 70px;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    background: #292725;
    box-shadow: none;
    backdrop-filter: none;
}

#header #logo img {
    height: 52px;
}

.sf-menu-wrapper ul a,
.auth-choice a#login,
.header-auth .email-login {
    color: rgba(255, 255, 255, 0.92);
}

#header #user-info {
    margin-left: 4px;
}

#header #user-info img {
    border-radius: 50%;
    margin-right: 8px;
}

.sf-menu-wrapper ul a:hover,
.sf-menu-wrapper ul li.current-menu-item a {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

#view-home .header-wrapper-light {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

#view-home .hero {
    position: relative;
    display: block;
    min-height: 360px;
    margin-top: 12px;
    padding: 0;
    overflow: hidden;
    background: #382d25 url('/img/HomePage_20120730.jpg') center / cover no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#view-home .hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(20, 16, 13, 0.8) 0%, rgba(20, 16, 13, 0.62) 49%, rgba(20, 16, 13, 0.14) 100%);
}

#view-home .hero .copy {
    position: relative;
    width: min(560px, calc(100% - 64px));
    margin: 0;
    padding: 65px 32px 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#view-home .hero .copy .welcome {
    font-size: clamp(40px, 4.3vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

#view-home .hero .description p {
    max-width: 31rem;
    font-size: 16px;
    line-height: 1.55;
}

#view-home .hero .search {
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 24px;
    width: 300px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#view-home .hero .top-search {
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
}

#middle-wrapper {
    margin-top: 26px;
}

#view-home #middle-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

#view-home #middle-wrapper .webdesign {
    float: none;
    width: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#view-home #middle-wrapper .divider,
#view-home #middle-wrapper .clearall {
    display: none;
}

#view-home #middle-wrapper > h3,
#view-home #middle-wrapper > p {
    grid-column: 1 / -1;
    margin: 0;
}

#view-home #middle-wrapper > h3 {
    padding-top: 4px;
}

/* Recipe cards use a four-stat footer, matching the clear, scan-friendly home
   layout from the original site without relying on the legacy float widths. */
#view-home .recipe-widget {
    min-height: 0;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(68, 46, 36, .15);
    border-radius: 7px;
    background: rgba(255, 255, 255, .88);
}

#view-home .recipe-widget .recipe-summary {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 62px;
    padding: 12px 13px 10px;
}

#view-home .recipe-widget .image,
#view-home .recipe-widget .info {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
}

#view-home .recipe-widget .image img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

#view-home .recipe-widget .name {
    height: auto;
    overflow: hidden;
    color: #2a3428;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-home .recipe-widget .type,
#view-home .recipe-widget .author {
    margin: 3px 0 0;
    color: #697265;
    font-size: 11px;
    line-height: 1.25;
}

#view-home .recipe-widget .data {
    display: grid;
    grid-template-columns: 1.12fr 1fr 1fr 1fr;
    margin: 0;
    padding: 9px 6px;
    border: 0;
    border-top: 1px solid rgba(68, 46, 36, .11);
    border-radius: 0;
    background: rgba(58, 76, 53, .055);
    font-size: 11px;
}

#view-home .recipe-widget .data .stat,
#view-home .recipe-widget .data .srm,
#view-home .recipe-widget .data .lovi {
    float: none;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
}

#view-home .recipe-widget .data .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #485246;
    line-height: 1.25;
    white-space: nowrap;
}

#view-home .recipe-widget .data .srm-stat { gap: 5px; }

#view-home .recipe-widget .data .srm {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

@media (max-width: 410px) {
    #view-home .recipe-widget .data { grid-template-columns: repeat(2, 1fr); gap: 7px 0; }
}

.recipe-widget,
.user-widget {
    margin-bottom: 12px;
    border-radius: 5px;
    box-shadow: none;
    backdrop-filter: none;
}

#footer {
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

@media (max-width: 820px) {
    #header,
    #footer,
    #middle-wrapper,
    #view-home .header-wrapper-light {
        width: calc(100% - 24px);
    }

    #header {
        margin-top: 12px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    #view-home .hero {
        min-height: 0;
        margin-top: 12px;
        border-radius: 10px;
    }

    #view-home .hero .copy {
        width: auto;
        padding: 88px 24px 28px;
    }

    #view-home .hero .search {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }

    #view-home #middle-wrapper {
        display: block;
    }

    #view-home #middle-wrapper .webdesign {
        margin-bottom: 28px !important;
    }

    .header-auth {
        width: 100%;
        margin-left: 0;
    }
}

/* Final cascade: keep the home refinements after the legacy theme rules. */
#view-home .hero {
    background-image: url('/img/home-hero-brew.jpg');
    background-position: center 48%;
}

#header #logo img {
    width: 222px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
}

#footer {
    padding: 34px 30px 18px;
}

#footer-inner {
    display: grid;
    grid-template-columns: minmax(230px, 1.25fr) minmax(130px, 0.7fr) minmax(280px, 1.35fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 28px;
    width: 100%;
    margin: 0;
}

#footer .footer-details,
#footer #other-stuff,
#footer #photo-stream {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
}

#footer #photo-stream { display: none; }

#footer .logo-btm {
    float: none;
    width: auto;
    padding-bottom: 14px;
}

#footer .logo-btm img {
    display: block;
    width: 190px;
    max-width: 100%;
}

#footer .footer-details h4 { margin: 0 0 14px; }
#footer .footer-details p { margin: 0; }

#footer .Finfo {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: auto;
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    float: none;
    line-height: 1.4;
}

/* Final dark-theme text contrast overrides. */
html[data-theme="dark"] #middle-wrapper strong,
html[data-theme="dark"] #middle-wrapper .bold {
    color: #fff2df;
    font-weight: 800;
}

html[data-theme="dark"] #dashboard .dashboard-news-card h4 {
    color: #fff1dc;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

html[data-theme="dark"] #dashboard .dashboard-news-card p { color: #e0d4c7; }

/* Recipe detail tables alternate white rows in the legacy recipe stylesheet. */
html[data-theme="dark"] #view-recipedetail .groupbox tbody tr td {
    border-color: #514740 !important;
    background: #282320 !important;
    color: #f3e9dc !important;
}

html[data-theme="dark"] #view-recipedetail .groupbox tbody tr:nth-child(even) td {
    background: #342d28 !important;
}

html[data-theme="dark"] #view-recipedetail .groupbox thead td,
html[data-theme="dark"] #view-recipedetail .groupbox tfoot td {
    border-color: #5a4e45 !important;
    background: #39312c !important;
    color: #fff2df !important;
}

html[data-theme="dark"] .bjcp-style-chart {
    border-color: #5a4e45;
    background: #282320;
    color: #f3e9dc;
}

html[data-theme="dark"] .bjcp-style-title,
html[data-theme="dark"] .bjcp-style-title-current,
html[data-theme="dark"] .bjcp-label,
html[data-theme="dark"] .bjcp-leftnumber,
html[data-theme="dark"] .bjcp-rightnumber,
html[data-theme="dark"] .bjcp-similarstyles { color: #f3e9dc; }

html[data-theme="dark"] .bjcp-chartwrapper { border-color: #5a4e45; }
html[data-theme="dark"] .bjcp-slider {
    border-color: #61544b;
    background: #171412;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .bjcp-slider-range {
    background: #7ca989;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
}

/* Google marks empty ad slots after it has tried to fill them. Do not leave
   a bright, empty iframe in the layout; filled ads are left untouched. */
.ad-sense:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none !important;
}

/* The legacy ad iframe has no dependable dark-theme contract. Hide those
   placements in dark mode rather than showing a blinding empty rectangle. */
html[data-theme="dark"] .ad-sense {
    display: none !important;
}

/* BeerXML selection is a standalone review surface, so give its light-card
   treatment explicit dark values instead of inheriting legacy page colors. */
html[data-theme="dark"] .import-beerxml-review > .shell-main > p { color: #d6c9bc; }
html[data-theme="dark"] .import-beerxml-list {
    border-color: #5a4e45;
    background: #282320;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] .import-beerxml-choice { border-color: #514740; }
html[data-theme="dark"] .import-beerxml-choice:hover { background: #37302b; }
html[data-theme="dark"] .import-beerxml-choice strong { color: #fff1df !important; }
html[data-theme="dark"] .import-beerxml-choice small { color: #d0c1b2; }
html[data-theme="dark"] .import-beerxml-choice input { accent-color: #e58a35; }

/* Destructive confirmations are injected by the legacy Colorbox widget. */
.delete-confirmation { width: 350px; padding: 18px 24px 22px; }
.delete-confirmation h3 { margin: 0 0 9px; }
.delete-confirmation p { margin: 0; line-height: 1.5; }
.delete-confirmation-actions { display: flex; gap: 10px; margin-top: 18px; }
.delete-confirmation-actions .button { margin: 0; }
html[data-theme="dark"] #cboxContent,
html[data-theme="dark"] #cboxLoadedContent { background: #282320; }
html[data-theme="dark"] .delete-confirmation h3 { color: #fff1df; }
html[data-theme="dark"] .delete-confirmation p { color: #d8c9ba; }
html[data-theme="dark"] .delete-confirmation .button_red { border-color: #e36d5c; color: #fff !important; }
html[data-theme="dark"] .delete-confirmation .button_gray { border-color: #6c5e53; background: #40362f; color: #fff0df !important; }
html[data-theme="dark"] .delete-confirmation .button_gray:hover { background: #55463d; color: #fff !important; }

.style-learning-page { max-width: 920px; margin: 34px auto 64px; }
.style-learning-hero { max-width: 720px; padding: 28px 0 18px; }
.style-learning-hero h1 { margin: 6px 0 12px; }
.style-learning-hero > p:last-child { font-size: 18px; line-height: 1.65; }
.style-learning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.style-learning-grid article, .style-learning-source { padding: 22px; border: 1px solid #dfd4c7; border-radius: 10px; background: #fffdf9; }
.style-learning-grid h2, .style-learning-source h2 { margin-top: 0; font-size: 20px; }
.style-learning-grid p, .style-learning-source p { line-height: 1.55; }
.style-learning-steps { margin: 34px 0; }
.style-learning-steps > div { display: grid; grid-template-columns: 42px 180px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid #e4dbd1; }
.style-learning-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3f7857; color: #fff; font-weight: 800; }
.style-learning-steps h2 { margin: 4px 0 0; font-size: 18px; }
.style-learning-steps p { margin: 2px 0 0; line-height: 1.5; }
.style-learning-source { background: #f5eee3; }
.style-learning-source a + a { margin-left: 16px; }
.style-edition-library { margin-top: 24px; padding: 26px; border: 1px solid #dfd4c7; border-radius: 10px; background: #fffdf9; }
.style-edition-library h2 { margin: 4px 0 10px; font-size: 23px; }
.style-edition-library > div:first-child > p:last-child { max-width: 720px; line-height: 1.6; }
.style-edition-picker { margin: 20px 0 16px; padding: 18px; border-radius: 8px; background: #f5eee3; }
.style-edition-picker label { display: block; margin-bottom: 8px; font-weight: 800; }
.style-edition-picker select { box-sizing: border-box; width: min(440px, 100%); height: 39px; margin-right: 10px; padding: 0 10px; border: 1px solid #b9aa99; border-radius: 5px; background: #fff; color: #302820; font: inherit; }
.style-edition-picker .button { margin-top: 0; vertical-align: top; }
.style-edition-library .fine-print { margin-bottom: 0; }
.legacy-style-notice { display: flex; gap: 9px 12px; align-items: baseline; margin: 18px 0 26px; padding: 15px 18px; border-left: 4px solid #3f7857; border-radius: 0 8px 8px 0; background: #f5eee3; line-height: 1.5; }
.legacy-style-notice strong { color: #2f4937; }
.style-catalog-switch { margin: 18px 0; padding: 14px 16px; border-left: 4px solid #3f7857; background: #f5eee3; }
.style-catalog-switch label { margin-right: 10px; font-weight: 800; }
.style-catalog-switch select { min-width: 180px; }
.ba-style-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 20px; padding: 14px 16px; border-radius: 8px; background: #f5eee3; }
.ba-style-tools input[type="search"] { flex: 1 1 240px; min-height: 38px; padding: 0 11px; border: 1px solid #b9aa99; border-radius: 5px; background: #fff; color: #302820; font: inherit; }
.ba-style-toggle { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.ba-style-tools .button { margin: 0; }
.emailSignUp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emailSignUp .newsletter { flex: 1 1 170px; box-sizing: border-box; min-height: 36px; padding: 0 9px; }
.emailSignUp .button { margin: 0; }
.newsletter-status { flex-basis: 100%; min-height: 1.25em; margin: 0; font-size: .9em; }
.newsletter-status.success { color: #3f7857; }.newsletter-status.error { color: #bd4438; }
.newsletter-unsubscribe { display: inline-block; margin-top: 8px; font-size: .86em; }
.newsletter-page { max-width: 680px; margin: 44px auto; padding: 30px; border-radius: 10px; background: var(--surface-raised, #f4efe7); }
.newsletter-page input { display: block; width: min(100%, 390px); margin: 7px 0 12px; }
.newsletter-settings { max-width: 650px; padding: 20px; border-radius: 8px; background: var(--surface-raised, #f4efe7); }
.newsletter-settings-status { font-weight: 700; }
.google-managed-email { background: #e9e7e2 !important; border-color: #cbc6bc !important; color: #777 !important; cursor: not-allowed; opacity: .9; }
.google-email-status { color: #5e554a; font-size: .9em; margin-top: 5px; }
.unlink-google-panel { background: #f4f1eb; border-left: 3px solid #b7791f; margin-top: 10px; max-width: 430px; padding: 12px; }
.unlink-google-panel p { margin: 0 0 9px; }
.unlink-google-panel label { display: block; margin-top: 7px; }
.unlink-google-panel input { display: block; margin: 3px 0 8px; width: 235px; }
html[data-theme="dark"] .google-managed-email { background: #302d2a !important; border-color: #56504a !important; color: #bfb8af !important; }
html[data-theme="dark"] .google-email-status { color: #c9c0b5; }
html[data-theme="dark"] .unlink-google-panel { background: #302c28; border-left-color: #c49142; }
.recipe-finder-catalog { margin-bottom: 12px; }.recipe-finder-catalog label { display: block; margin-bottom: 5px; font-weight: bold; }.recipe-finder-catalog select { min-width: 190px; }
html[data-theme="dark"] .newsletter-status.success { color: #8fd4a5; } html[data-theme="dark"] .newsletter-status.error { color: #ff9b90; }
html[data-theme="dark"] .newsletter-page { background: #2b2623; color: #f5eadc; }
html[data-theme="dark"] .newsletter-settings { background: #2b2623; color: #f5eadc; }
.ba-surprise-roll { display: none; align-items: center; justify-content: center; gap: 14px; margin: -6px 0 20px; padding: 16px; border-radius: 8px; background: linear-gradient(110deg, #513016, #b87825, #513016); color: #fff9e9; font-size: 1.05em; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.ba-surprise-roll.is-rolling { display: flex; animation: ba-roll-in .16s ease-out; }
.ba-surprise-roll .ba-beer { display: inline-block; font-size: 1.55em; animation: ba-beer-roll .85s ease-in-out infinite; }
.ba-surprise-roll .ba-hop { color: #e7d66d; animation: ba-hop-pop .42s ease-in-out infinite alternate; }
.ba-surprise-roll .ba-hop:last-child { animation-delay: .2s; }
@keyframes ba-roll-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ba-beer-roll { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-4px); } }
@keyframes ba-hop-pop { from { transform: scale(.7) rotate(-12deg); } to { transform: scale(1.2) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .ba-surprise-roll .ba-beer, .ba-surprise-roll .ba-hop { animation: none; } }
html[data-theme="dark"] .ba-style-tools { background: #302923; }
html[data-theme="dark"] .ba-style-tools input[type="search"] { border-color: #65564d; background: #211d1a; color: #f2e6d7; }
html[data-theme="dark"] .style-catalog-switch { background: #302923; }
.ba-style-card { min-height: 208px; overflow: hidden; }
.ba-style-card { color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.ba-style-card:hover { color: inherit; text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,.24); }
.ba-style-image { display: block; width: calc(100% + 2px); height: auto; aspect-ratio: 21 / 10; object-fit: cover; margin: -1px -1px 12px; border-radius: 6px 6px 0 0; background: var(--surface-muted, #e8dfd1); }
.ba-style-detail { max-width: 1120px; }
.back-link { display: inline-block; margin-bottom: 18px; }
.ba-style-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 30px; align-items: center; padding: 26px; border-radius: 12px; background: var(--surface-raised, #f4efe7); }
.ba-style-hero img { display: block; width: 100%; aspect-ratio: 21 / 10; object-fit: cover; border-radius: 8px; }
.ba-style-hero h1 { margin: 6px 0 14px; }
.eyebrow { color: #b87825; font-weight: bold; text-transform: uppercase; font-size: .78em; letter-spacing: .08em; }
.ba-guideline-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0; }
.ba-sensory-profile { margin: 24px 0; }
.ba-sensory-profile > p { margin-top: -8px; opacity: .75; }
.ba-sensory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ba-sensory-grid div { padding: 16px; border-left: 3px solid #b87825; background: var(--surface-raised, #f4efe7); border-radius: 5px; }
.ba-sensory-grid strong, .ba-sensory-grid span { display: block; }
.ba-sensory-grid span { margin-top: 6px; line-height: 1.45; }
.ba-guideline-facts div { padding: 15px; border-radius: 8px; background: var(--surface-raised, #f4efe7); }
.ba-guideline-facts strong, .ba-guideline-facts span { display: block; }
.ba-guideline-facts span { margin-top: 6px; }
.ba-style-recipes { padding: 22px; border-radius: 10px; background: var(--surface-raised, #f4efe7); }
.ba-recipe-results-intro { margin-bottom: 14px; }
.ba-recipe-list { margin: 0; border: 1px solid var(--border-subtle, rgba(127,127,127,.24)); border-radius: 8px; overflow: hidden; background: var(--surface, #fff); }
.ba-recipe-list .ba-recipe-card { margin: 0; padding: 18px; border-bottom: 1px solid var(--border-subtle, rgba(127,127,127,.24)); background: transparent; }
.ba-recipe-list .ba-recipe-card:last-child { border-bottom: 0; }
.ba-recipe-list .ba-recipe-card .description { margin: 14px 0 0 100px; max-width: 70ch; line-height: 1.45; }
.ba-recipe-list .ba-recipe-card .author { color: var(--text-muted, #666); }
.ba-recipe-signals { margin: 10px 0 0 100px; color: var(--text-muted, #666); font-size: .86em; }
@media (max-width: 580px) { .ba-recipe-list .ba-recipe-card { padding: 14px; } .ba-recipe-list .ba-recipe-card .description, .ba-recipe-signals { margin-left: 0; } }
@media (max-width: 760px) { .ba-style-hero { grid-template-columns: 1fr; } .ba-guideline-facts, .ba-sensory-grid { grid-template-columns: repeat(2, 1fr); } }
html[data-theme="dark"] .ba-style-hero,
html[data-theme="dark"] .ba-style-recipes,
html[data-theme="dark"] .ba-sensory-grid div,
html[data-theme="dark"] .ba-guideline-facts div { background: #2b2623; color: #f5eadc; }
html[data-theme="dark"] .ba-style-hero h1,
html[data-theme="dark"] .ba-style-hero .ba-style-intro,
html[data-theme="dark"] .ba-style-recipes h2,
html[data-theme="dark"] .ba-style-recipes p,
html[data-theme="dark"] .ba-sensory-grid strong,
html[data-theme="dark"] .ba-sensory-grid span,
html[data-theme="dark"] .ba-guideline-facts strong,
html[data-theme="dark"] .ba-guideline-facts span { color: #f5eadc; }
html[data-theme="dark"] .ba-recipe-list { border-color: #5a4e45; background: #211d1a; }
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card { border-color: #514740; color: #f3e9dc; }
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card .name a { color: #f4bd70; }
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card .data,
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card .description,
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card .author,
html[data-theme="dark"] .ba-recipe-list .ba-recipe-card .author a,
html[data-theme="dark"] .ba-recipe-signals { color: #e0d2c3; }
.recipe-guideline-edition { margin: 0 0 14px; padding: 10px 10px 8px; border-left: 3px solid #3f7857; border-radius: 0 6px 6px 0; background: #f5eee3; }
.recipe-guideline-edition > label, #select-style > .form-field > label { display: block; margin-bottom: 7px; font-weight: 800; }
.recipe-guideline-edition .chosen-container { box-sizing: border-box; width: 100% !important; margin: 0 0 7px; }
.recipe-guideline-edition .chosen-single { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#select-style > .form-field > label { margin-top: 0; }
html[data-theme="dark"] .style-learning-hero > p:last-child { color: #ddd0c3; }
html[data-theme="dark"] .style-learning-grid article, html[data-theme="dark"] .style-learning-source { border-color: #5a4e45; background: #282320; }
html[data-theme="dark"] .style-learning-source { background: #302923; }
html[data-theme="dark"] .style-learning-grid p, html[data-theme="dark"] .style-learning-source p, html[data-theme="dark"] .style-learning-steps p { color: #d8c9ba; }
html[data-theme="dark"] .style-learning-steps > div { border-color: #514740; }
html[data-theme="dark"] .style-edition-library { border-color: #5a4e45; background: #282320; }
html[data-theme="dark"] .style-edition-library > div:first-child > p:last-child { color: #d8c9ba; }
html[data-theme="dark"] .style-edition-picker, html[data-theme="dark"] .legacy-style-notice { background: #302923; }
html[data-theme="dark"] .style-edition-picker select { border-color: #766759; background: #201c19; color: #fff0df; }
html[data-theme="dark"] .legacy-style-notice strong { color: #cce7b8; }
html[data-theme="dark"] .recipe-guideline-edition { background: #302923; }
@media (max-width: 720px) { .style-learning-grid { grid-template-columns: 1fr; } .style-learning-steps > div { grid-template-columns: 38px 1fr; } .style-learning-steps p { grid-column: 2; } .style-learning-source a + a { display: inline-block; margin: 12px 0 0; } .style-edition-picker .button { display: inline-block; margin-top: 10px; } .legacy-style-notice { display: block; } .legacy-style-notice span { display: block; margin-top: 5px; } }

@media (max-width: 820px) {
    #header #logo img {
        width: 188px;
        height: 32px;
    }

    #footer {
        padding: 28px 22px 18px;
    }

    #footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #footer .Finfo { display: block; }
    #footer .designby { margin-top: 8px; }
}


/* ---- [ Shared ] ---------------------------------------------> */	
	.primary { width: 665px; margin-right: 35px; float: left; }
	.compliment { width: 236px; float: left; }
	.primary .groupbox > span { height: 20px; padding-right: 0; }
	[data-name=styleid] { width: 220px; }

/* ---- [ Recipe Builder ] ---------------------------------------------> */	
	.save-recipe, .save-brewsession { width: 240px; height: 40px; font-weight: bold; font-size: 18px; }
	.builder-wrapper .edit-recipe { width: 210px; font-weight: bold; font-size: 18px; text-align: center; margin-bottom: 0px; }
	.builder-wrapper .spinner { display: none; position: relative; top:10px; right: -100px; margin-top: 20px; height:40px; }

	/* common builder styles */
	[data-unit] { display: none; }
	.builder input { font-size: 11px; }
	.builder label { color: #666; display: inline-block; padding-right: 0; padding-bottom: 4px;}
	.builder [data-trigger] { width: 300px;   }

	/* recipe info box / recipe Data*/
	.builder .info [data-name=r_Name] { display: block; width: 608px; padding: 8px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 18px; color: #777; margin: 8px auto 18px auto; } 
	.builder .info .values { width: 600px; margin: 0 auto; }
	.builder .info .values > div { width: 110px; padding: 0 5px; float: left; }
	.builder .info .values > div .title { text-align: center; font-size: 12px; }
	.builder .info .values > div label { font-weight: bold; text-align: center; }
	.builder .info .values > div select, .builder .info .values > div input { margin: 0 auto; width: 100px; display: block; }
	.builder .info .values [data-name=r_BatchSize], .builder .info .values [data-name=r_BoilSize] { width: 87px !important; }
	.builder .info .values .textlabel { position: absolute; margin-top: -19px; margin-left: 58px; font-size: 11px !important; color: #aaa; text-align: right; width: 35px; }
	.builder .info .more { margin-top: 18px; }
	.builder .info .more h4 { display: inline-block; margin: 0 0 0 4px;  }
	.builder .info [data-name=r_Description], .builder .info [data-name=s_Notes] { border: 2px inset; display: block; width: 608px; min-height: 120px; height: auto; padding: 8px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 12px; color: #333; margin: 8px auto 12px auto; resize: vertical; }
	.builder .actions { margin: 12px 4px; }
	.builder .actions .button_small { padding-left: 12px; padding-right: 12px; font-weight: bold; margin-right: 8px; }
	
	/* common ing table styles */
	.builder .introrow h4 { margin: 0; margin-bottom: 6px; font-size: 16px; color: #666; font-weight: bold; }
	.builder .introrow td { padding: 12px; }
	.builder .introrow > td > .starthere { float: right; margin-right: 10px; }
	.builder .introrow > td > img { float: left; margin-right: 10px; }
	.builder .introrow > td > .content { float: left; width: 450px; font-size: 14px; }
	.builder .dataTable tbody tr[data-datarow] td { cursor: move; height: 30px; }
	.builder .dataTable tbody tr.introrow td { text-align: left; }
	.builder .dataTable thead tr, .builder .dataTable tfoot tr td { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; }	
	.builder .dataTable thead td, .builder .dataTable tfoot td { padding: 4px; }
	.builder .dataTable tbody tr td.placeholder { background: #aaa !important; height: 28px; text-align: center; color: #fff; }
	.builder .dataTable { border-collapse: collapse; }
	.builder .dataTable td { text-align: center;  }
	.builder tr.ui-sortable-helper	{ border-top: solid 2px #aaa; border-bottom: solid 2px #aaa; }
	.builder .dataTable .ingName, .builder .dataTable .customname { font-weight: bold; font-size: 12px; }
	.builder [data-name=remove] { cursor: pointer; }
	.builder [data-name=sort] { cursor: move; }
	.builder .groupbox,
	.builder .groupbox > div { overflow: visible; }
	.builder .chosen-container.chosen-with-drop,
	.builder .chosen-container.chosen-open {
		position: relative;
		z-index: 25000;
	}
	.builder .chosen-container.chosen-with-drop .chosen-drop,
	.builder .chosen-container.chosen-open .chosen-drop {
		z-index: 25001;
	}

	.builder .dataTable tbody tr[data-datarow] td span { width: inherit; overflow: hidden; display: inline-block; }
	.builder .dataTable tbody tr[data-datarow] td span.hidden { display: none; }

	/* f-table styles */
	.builder [data-name=f_Amt] { width: 56px; text-align: center; }
	.builder [data-name=f_table] .customname, .builder [data-name=f_table] [data-name=f_Name] { width: 213px; }
	.builder [data-name=f_table] [data-name=f_Name] { display: inline-block; }
	.builder [data-name=f_table] thead td:nth-child(3), .builder [data-name=f_table] tbody td:nth-child(3) { text-align: left; }
	.builder [data-name=f_table] .content { width: 385px; margin-top: -36px; }
	.builder [data-name=f_table] tr td:nth-of-type(1) { width: 35px; }
	.builder [data-name=f_table] tr td:nth-of-type(2) { width: 55px; }
	.builder [data-name=f_table] tr td:nth-of-type(3) { width: 225px; }
	.builder [data-name=f_table] tr td:nth-of-type(4) { width: 50px; }
	.builder [data-name=f_table] tr td:nth-of-type(5) { width: 57px; }
	.builder [data-name=f_table] tr td:nth-of-type(6) { width: 76px; }
	.builder [data-name=f_table] tr td:nth-of-type(7) { width: 43px; }
	
	/* h-table styles */
	.builder [data-name=h_Amt] { width: 56px; text-align: center; }
	.builder [data-name=h_table] .customname, .builder [data-name=h_table] [data-name=h_Name] { width: 116px; }
	.builder [data-name=h_table] [data-name=h_Name] { display: inline-block; }
	.builder [data-name=h_table] thead td:nth-child(2), .builder [data-name=h_table] tbody td:nth-child(2) { text-align: left; }
	.builder [data-name=h_table] tr td:nth-of-type(1) { width: 52px; }
	.builder [data-name=h_table] tr td:nth-of-type(2) { width: 123px; }
	.builder [data-name=h_table] tr td:nth-of-type(3) { width: 61px; }
	.builder [data-name=h_table] tr td:nth-of-type(4) { width: 85px; }
	.builder [data-name=h_table] tr td:nth-of-type(5) { width: 72px; }
	.builder [data-name=h_table] tr td:nth-of-type(6) { width: 57px; }
	.builder [data-name=h_table] tr td:nth-of-type(7) { width: 35px; }
	.builder [data-name=h_table] tr td:nth-of-type(8) { width: 37px; }
	.builder [data-name=h_table] .options div { display: inline-block; margin-left: 8px; }
	.builder [data-name=h_table] .options { font-size: 11px; text-align: right; padding-right: 12px; }
	.builder [data-name=h_table] .options label { font-size: 11px; text-align: right; padding-right: 4px; }
	.builder [data-name=h_table] .options select { font-size: 11px; padding: 2px; }
	.builder [data-name=h_table] .options input { font-size: 11px; padding: 2px; width: 30px; }
		
	/* y-table styles */
	.builder [data-name=y_table] .customname, .builder [data-name=y_table] [data-name=y_Name] { width: 481px; }
	.builder [data-name=y_table] [data-name=y_Name] { display: inline-block; }
	.builder [data-name=y_table] [data-name=y_Name].hidden { display: none; }
	.builder [data-name=y_table] thead td:nth-child(1), .builder [data-name=y_table] tbody td:nth-child(1) { text-align: left; }
	.builder [data-name=y_table] tr td:nth-of-type(1) { width: 488px; }
	.builder [data-name=y_table] tr td:nth-of-type(2) { width: 76px; }
	.builder [data-name=y_table] tr td:nth-of-type(3) { width: 41px; }

	/* o-table styles */
	.builder [data-name=o_Amt] { width: 56px; text-align: center; }
	.builder [data-name=o_table] .customname, .builder [data-name=o_table] [data-name=o_Name] { width: 281px; }
	.builder [data-name=o_table] [data-name=o_Name] { display: inline-block; }
	.builder [data-name=o_table] thead td:nth-child(3), .builder [data-name=o_table] tbody td:nth-child(3) { text-align: left; }
	.builder [data-name=o_table] tr td:nth-of-type(1) { width: 63px; }
	.builder [data-name=o_table] tr td:nth-of-type(2) { width: 69px; }
	.builder [data-name=o_table] tr td:nth-of-type(3) { width: 293px; }
	.builder [data-name=o_table] tr td:nth-of-type(4) { width: 103px; }
	.builder [data-name=o_table] tr td:nth-of-type(5) { width: 45px; }

	/* m-table styles */
	.builder [data-name=m_table] .customname, .builder [data-name=y_table] [data-name=y_Name] { width: 180px; }
	.builder [data-name=m_table] [data-name=m_Name] { display: inline-block; }
	.builder [data-name=m_table] [data-name=m_Name].hidden { display: none; }
	.builder [data-name=m_table] thead td:nth-child(1), .builder [data-name=m_table] tbody td:nth-child(1) { text-align: left; }
	.builder [data-name=m_table] tr td:nth-of-type(1) { width: 228px; }
	.builder [data-name=m_table] tr td:nth-of-type(2) { width: 122px; }
	.builder [data-name=m_table] tr td:nth-of-type(3) { width: 120px; }
    .builder [data-name=m_table] tr td:nth-of-type(4) { width: 90px; }
    .builder [data-name=m_table] tr td:nth-of-type(5) { width: 70px; }
	.builder [data-name=m_table] [data-name=m_Temp] { width: 30px; text-align: center; }

	/* make amount fields easier to spot and edit */
	.builder [data-name=f_Amt],
	.builder [data-name=h_Amt],
	.builder [data-name=o_Amt] {
		min-height: 28px;
		min-width: 58px;
		padding: 4px 6px;
		box-sizing: border-box;
		border: 1px solid #bdb7b0;
		border-radius: 4px;
		background-color: #fff;
		display: inline-block;
		vertical-align: middle;
	}

	/* s-table styles */
	.builder .groupbox:nth-of-type(7) div table thead tr td p { font-size: 18px; color: #666; line-height: 18px; margin-bottom: 8px; margin-top: 6px; margin-left: 6px; }
	.builder .groupbox:nth-of-type(7) div table thead tr td span { display: block; margin: 12px 8px; }
	.builder [data-name=s_table] tbody tr, .builder [data-name=s_table] thead tr, .builder [data-name=s_table] tfoot tr { border: 0; }	
	.builder [data-name=s_table] thead tr td, .builder [data-name=s_table] tfoot tr td { border: 0; text-align: left; }	
	.builder [data-name=s_table] td { padding: 0; }
	.builder [data-name=s_table] [data-name=s_RankLabel] { font-size: 18px; color: #666; width: 35px; float: left; margin-top: 10px; }
	.builder [data-name=s_table] [data-name=s_Text] { width: 494px; padding: 8px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 18px; color: #777; }
	.builder [data-name=s_table] span { display: block; font-size: 11px; margin-bottom: 12px; margin-left: 12px;  }
	.builder [data-name=s_table] a  { font-weight: bold;  }
	.builder [data-name=s_table] a * { vertical-align: middle;  }
	.builder [data-name=s_table] a img { margin-right: 4px; margin-top: -4px;  }
	.builder [data-name=s_table] td { background-color: #fff !important; }
	.builder [data-name=s_table] tbody tr td.placeholder { background: #fff !important; height: 46px; }
	.builder [data-name=s_table] tr td:nth-of-type(1) { width: 45px; }
	.builder [data-name=s_table] tr td:nth-of-type(2) { width: 547px; }
	.builder [data-name=s_table] tr td:nth-of-type(3) { width: 38px; }

	/* Scale Dialog */
	#ScaleDialog { width: 508px; }
	#ScaleDialog div.wrapper {margin-left: auto; margin-right: auto; width: 400px; text-align: center;}
	#ScaleDialog .wrapper h2 { display: inline-block !important; } 
	#ScaleDialog .wrapper span { padding-left: 4px; color: #666; } 
	#ScaleDialog input.button { width: 125px; text-align: center; }
	#TargetVolume { font-size: 24px; color: #666; width: 100px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-align: center; display: inline-block; margin-top: 18px; } 

	/* Photo Dialog */
	#PhotoDialog { width: 500px; }
	#view-changerecipephoto #PhotoDialog .photo { float: left; margin-right: 18px; }
	#view-changerecipephoto .fileuploadwrapper { float: left; width: 380px; }
	#view-changerecipephoto .photo img { border: solid 1px #ccc; }

/* ---- [ Recipe Facts ] ---------------------------------------------> */
	.facts { border: solid 4px #aaa; padding: 8px; width: 220px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background-color: #fff; margin-bottom: 10px; }
    .facts [data-name=recipe-name] { font-size: 11px; }
    .facts h3 { font-family: Arial; font-size: 18px; margin-bottom: 4px; }
    .facts .first .color { float: right; width: 45px; height: 45px; padding-left: 4px; }
    .facts .first label { font-weight: normal; width: 75px;}
    .facts .block { padding: 6px 4px; border-top: solid 4px #ccc; clear: left; margin-bottom: 18px;}
    .facts .block div { clear: left; }
    .facts .first { border-top: 0; margin-bottom: 4px; padding-bottom: 12px; border-bottom: solid 6px #ccc; }
    .facts .second { border-top: 0; }
    .facts label { font-size: 11px; font-weight: bold; float: left; width: 65px; padding: 0; }
    .facts span { font-size: 11px; float: left; }
    .facts .block label { width: 90px; }
    .facts .blocktworow label {width: 65px; }
    .facts .blocktworow span { width: 73px; }
    .facts .color {border: solid 1px #AAA;}
    .facts .last a { font-size: 11px; margin-top: 2px; }
    .facts .block-head { font-weight: bold; }
	.facts .public-link { display: block; margin-top: 5px; font-weight: bold; text-decoration: underline; color: #444 !important;  }


	[data-name=facts_boilsize], [data-name=facts_batchsize] { margin-right: 4px; }
	li.partner-ing-yes, li.partner-ing-no { padding-left: 24px !important; background-repeat: no-repeat; background-position-x: 0; background-position-y: 4px; }
	li.partner-ing-yes { background-image: url(../img/icons/bullet_tick.png); }
	li.partner-ing-no { background-image: url(../img/icons/bullet_cross.png); }


/* ---- [ Brew Session Builder ] ---------------------------------------------> */
	.session input[data-name=s_BrewDate] { text-align: center; }
	.builder.session .info .values { width: auto; }
	.builder.session .info .values label { display: block; padding: 0; text-align: left; margin: 0 0 4px 2px; }
	.builder.session .info .values input, .builder.session .info .values select { margin: 0; }

	.builder.session .summary h3 { margin-bottom: 10px; }
	.builder.session .summary .item { margin-left: 4px; }
	.builder.session .summary .item label { width: 167px; }
	.builder.session .summary .item input { text-align: center; padding: 3px; width: 35px; }

	/*.builder.session .summary .item span[data-unit] { display: inline-block; width: 70px; }*/

	.builder.session span[data-unit] { display: none; width: 70px; }
	.builder.session span[data-unit].active { display: inline-block; }

	.builder.session .summary .item input[data-name=s_PrimingSugarType] { width: 135px; text-align: left; }
	.builder.session .summary .item > span > span:nth-of-type(1), .builder.session .summary .item > span > span:nth-of-type(2) { margin-left: 8px; }
	.builder.session .summary .item span.predicted { color: #aaa; }
	.builder.session .predicted span[data-unit] { width: auto; }
	.builder.session .summary .item span { vertical-align: initial; }

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(/img/colorbox/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(/img/colorbox/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/img/colorbox/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/img/colorbox/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/img/colorbox/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/img/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/img/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/img/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/img/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(/img/colorbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/img/colorbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/img/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/img/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/img/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}