/* Master layout */

/************************************************************
Embedded fonts */

@font-face {
	font-family:Garamond;
	src:url('../fonts/garreg.eot'); /* IE8- */
	src:url('../fonts/garreg.eot?iefix') format('embedded-opentype'), /* IE9 */
		url('../fonts/garreg.ttf') format('truetype'); /* The rest of the world */
}
@font-face {
	font-family:SnellRoundhand;
	src:url('../fonts/snellroundhand.eot'); /* IE8- */
	src:url('../fonts/snellroundhand.eot?iefix') format('embedded-opentype'), /* IE9 */
		url('../fonts/snellroundhand.ttf') format('truetype'); /* The rest of the world */
}



/************************************************************
Global styles */

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

html {
	background:#383944 url('../images/site/bg-footer.png') repeat center top;
}
body {
	margin:0;
	padding:0;
	min-width:300px;
	font:12pt/1.25 Garamond,'Times New Roman',Times,serif;
	background:#f3f1f0 url('../images/site/bg-main.jpg') repeat center top;
	color:#3f3e3e;
}


/* Links */
a:link,
a:visited,
a:hover,
a:active {
	text-decoration:none;
	color:#74131f;
}
a img {
	border:none;
}
a[href^="tel:"] {
	color:inherit;
	cursor:inherit;
}

/* Responsive images */
iframe,
img {
	max-width:100%;
}


/* Headings */
h1,h2,h3,h4,h5,h6 {
	font:12pt/1.1 Garamond,'Times New Roman',Times,serif;
	margin:0.7em 0 0.3em;
}
h1 {
	font-size:235%;
}
h2 {
	font-size:200%;
}
h3 {
	font-size:135%;
}
h4 {
	font-size:115%;
}
h5 {
	font-size:105%;
}

/* Other header stuff */
.col header>h1 {
	color:#74131f;
	border-bottom:5px solid #ebe9e7;
}
.col header>h2 {
	color:#5e5e5d;
	border-bottom:5px solid #ebe9e7;
}
.col.half header>h2 {
	color:#74131f;
}
.col.main h3 {
	color:#74131f;
}
.col.main h3+p,
.col.main h3+address {
	margin-top:0;
}

h1 small, h2 small {
	display:inline-block;
	font-size:75%;
	color:#666;
}
h1 small:before, h2 small:before {
	content:'\2013  ';
}


/* Block-level */
p {
	margin:1em 0;
}
address {
	font-style:inherit;
	margin:1em 0;
}


/************************************************************
Layout: Header */

body>header {
	position:relative;
	padding:2.2em 0 0;
	background:#74131f;
	color:#fff;
}


/*------------------------------------------------------------
Logo banner */

#logo {
	background:#f1f0ec url('../images/site/bg-header.jpg') repeat center center;
	text-align:center;
	margin:0;
	font:250%/1 Garamond,'Times New Roman',Times,serif;
	
}
#logo a {
	position:relative;
	display:inline-block;
	letter-spacing:-0.08em;
	color:#5f5e5d;
	padding:1.2em 3% 0.3em;
}
#logo strong {
	display:block;
	font:50pt/0.5 SnellRoundhand,cursive;
	letter-spacing:-0.02em;
	word-spacing:-0.1em;
	color:#74111f;

	-webkit-transform:scaleX(0.9);
	-ms-transform:scaleX(0.9);
	transform:scaleX(0.9);
}
#logo small {
	display:block;
	font-size:45%;
	letter-spacing:0;
	margin:0.8em 0;
}
#logo small:before,
#logo small:after { /* Diamonds */
	content:'\2666';
	display:inline-block;
	vertical-align:top;
	margin:0 0.7em;

	-webkit-transform:scaleX(1.8) scaleY(0.7);
	-ms-transform:scaleX(1.8) scaleY(0.7);
	transform:scaleX(1.8) scaleY(0.7);
}

/* Shadow */
#logo a:before {
	content:' ';
	position:absolute;
	height:8px;
	width:120%;
	left:-10%;
	top:0;

	background:radial-gradient(ellipse farthest-side at center top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}


/*------------------------------------------------------------
Top / locations area */

#locations {
	text-align:right;
	position:absolute;
	margin:0 0 0 -520px;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	width:1000px;
	height:2.2em;
	left:50%;
	top:0;
}
#locations h4 {
	display:inline-block;
	position:relative;
	line-height:2;
	z-index:21;
	margin:0;

}
#locations h4>strong {
	font-weight:normal;
	font-family:SnellRoundhand,cursive;
	padding:0 0.7em 0 0;
}


/* Header / cities */
#locations h4:first-child {
	position:absolute;
	left:0;
	top:0;
}
#locations h4 em {
	
}
#locations h4 em:first-child {
	margin-left:1em;
}
#locations h4 em+em:before {
	content:'\2666';
	display:inline-block;
	vertical-align:top;
	font:80%/2.5 Garamond,'Times New Roman',Times,serif;
	margin:0 0.7em;

	-webkit-transform:scaleX(1.8) scaleY(0.7);
	-ms-transform:scaleX(1.8) scaleY(0.7);
	transform:scaleX(1.8) scaleY(0.7);
}


/* Locations dropdown */
#locations ul {
	position:absolute;
	list-style:none;
	text-align:left;
	z-index:20;
	top:0;
	right:0;
	padding:0;
	margin:0 -0.3em 0 0;
	border-top:2em solid transparent;
	background:#74131f;
	background-clip:padding-box;
	visibility:hidden;
	opacity:0;
	border-radius:0 0 0.3em 0.3em;

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
#locations:target ul {
	visibility:visible;
	opacity:1;
}
#locations ul li {
	position:relative;
	padding:1em 1em 0.5em 160px;
	min-height:6.8em;
	margin:0;
}
#locations ul li+li {
	border-top:1px solid rgba(156,136,133,0.5);
}
#locations ul h5 {
	font-weight:bold;
	margin:0;
}
#locations ul img {
	position:absolute;
	background:#874D52;
	max-height:90%;
	padding:0.4em;
	left:0.8em;
	top:0.8em;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#locations ul address {
	margin:0.2em 0 0 0;
	font-size:95%;
}

/* Open / close arrows */
#locations a {
	color:#fff;
}
#locations a[href="#locations"],
#locations a[href="#top"] {
	display:inline-block;
	vertical-align:middle;
	text-indent:-9999px;
	text-align:left;
	outline:none;
	height:0;
	width:0;
	margin:0 0 0 0.6em;
	border-left:0.3em solid transparent;
	border-right:0.3em solid transparent;
}
#locations a[href="#locations"] {
	border-top:0.5em solid #fff;
}
#locations a[href="#top"] {
	border-bottom:0.5em solid #fff;
	display:none;
}
#locations a[href="#locations"]:after,
#locations a[href="#top"]:after { /* Hit area */
	content:' ';
	position:absolute;
	height:100%;
	width:100%;
	left:0;
	top:0;
}

/* Swap visible arrows when the dropdown is active */
#locations:target a[href="#locations"] {
	display:none;
}
#locations:target a[href="#top"] {
	display:inline-block;
}


/************************************************************
Layout: Navigation */

#main-nav {
	position:relative;
	text-align:center;
	background:#474b66;
	padding:0.7em 0;
	z-index:10;
}
#main-nav ul {
	list-style:none;
	margin:0;
	padding:0;
	border-top:1px solid #676a80;
	border-bottom:1px solid #676a80;
}
#main-nav li {
	display:inline;
}
#main-nav a {
	display:inline-block;
	text-transform:uppercase;
	font-size:110%;
	padding:1em 1.5%;
	color:#f7f6f5;
}

/* Shadow */
#main-nav:after {
	content:' ';
	position:absolute;
	height:8px;
	width:50%;
	left:25%;
	top:100%;

	background:radial-gradient(ellipse farthest-side at center top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}


/************************************************************
Layout: Content */

#content {

}
#content>section {
	padding:1em 1.5em;
	max-width:1000px;
	margin:0 auto;
}
#content>section:last-child {
	padding-bottom:2em;
}


/* Columns */
.col.half {
	width:47%;
	margin-bottom:0;
}
.col.half+.col.half {
	margin-left:5%;
}
.col.half>header {
	text-align:center;
}

.col.main {
	width:66%;
	max-width:660px;
}
.col.side {
	width:29.5%;
	max-width:295px;
}
.col+.col {
	margin-left:3.5%;
}


/* Ribbon area */
#content #ribbon {
	text-align:center;
	max-width:none;
	background:#ebe9e7;
	color:#5f5e5d;
}



/************************************************************
Layout: Footer */

body>footer {
	position:relative;
	font-size:90%;
	padding:1.2em 1.5em;
	background:#383944 url('../images/site/bg-footer.png') repeat center top;
	color:#f7f6f5;
}
body>footer a {
	color:#f7f6f5 !important;
}


/*------------------------------------------------------------
Navigation */

#foot-nav {
	overflow:hidden;
	max-width:1000px;
	margin:0 auto 1.5em;
	padding:0 0 1em;
	border-bottom:0.35em solid rgba(235,233,231,0.25);
}
#foot-nav ul {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
}
#foot-nav li {
	display:inline;
}
#foot-nav li a {
	display:inline-block;
	padding:0.5em 1.5em 0.5em 0;
	text-transform:uppercase;
}


/*------------------------------------------------------------
Social */

#foot-nav .social {
	float:right;
	margin:0;
}
#foot-nav .social a {
	display:inline-block;
	text-indent:-9999px;
	outline:none;
	height:35px;
	width:35px;
	background:transparent url('../images/icons/social.png') no-repeat center center;

	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
#foot-nav .social a:hover {
	opacity:0.9;
}

/* If adding additional icons later...
#foot-nav .social .fb { background-position:0 0; }
#foot-nav .social ...
*/


/*------------------------------------------------------------
Copyright */

#foot-nav+p {
	max-width:1000px;
	padding:0 30% 0 0;
	margin:0 auto;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#foot-nav+p span {
	display:inline-block;
}
#foot-nav+p a {
	font-weight:bold;
}
#foot-nav+p span:first-child:after,
#foot-nav+p span:first-child+span+span:after {
	content:'  |  ';
}

#foot-nav+p em {
	display:block;
}
#foot-nav+p em a {
	font-weight:normal;
}
#foot-nav+p em a+a:before {
	content:'  |  ';
}


/*------------------------------------------------------------
JB Logo */

#jb {
	position:absolute;
	margin:0 -495px 0 0;
	bottom:1.5em;
	right:50%;
}
#jb a {
	display:block;
	text-indent:-9999px;
	outline:none;
	width:130px;
	height:50px;
	background:transparent url('../images/site/jb-logo.png') no-repeat center center;
}


/************************************************************
Buttons / links */

/* Buttons */
.button {
	display:inline-block;
	vertical-align:middle;
	background:#383c56;
	color:#ebe9e7 !important;
	text-transform:uppercase;
	padding:0.35em 10% 0.3em;
	border:none;
	border-radius:2em;
	cursor:pointer;

	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
.button:hover {
	background:#ebe9e7;
	color:#74131f !important;
}
input.button {
	font:100%/1.3 Garamond,'Times New Roman',Times,serif;
}


/* Arrow links */
.arrow {
	text-transform:uppercase;
	color:#383c56 !important;
}
.arrow:after,
.arrow.left:before {
	content:' ';
	display:inline-block;
	position:relative;
	vertical-align:middle;
	border-left:9px solid #383c56;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	margin:0 0 0 5px;
	line-height:0;
	font-size:0;
	top:-2px;
}

.arrow.left:after {
	display:none;
}
.arrow.left:before {
	margin:0 5px 0 0;
	border-left:none;
	border-right:9px solid #383c56;
}

.arrow.down:after {
	border-top:9px solid #383c56;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-bottom:none;
}



/************************************************************
Modal */

#simplemodal-container {
	max-width:800px;
	/*min-width:300px;*/
}
#modal {
	display:none;
	position:relative;
	background:#fff;
	border-radius:0.4em;
}
#modal-content>header {
	font-size:85%;
	background:#EBE9E7;
	padding:0.4em 30px 0.2em 15px;
	border-radius:0.3em 0.3em 0 0;
}
#modal-content>header h2 {
	margin:0;
}
#modal-content>section {
	padding:0 15px 0.5em;
	min-width:300px;
}
#modal .simplemodal-close {
	position:absolute;
	font:bold 15pt/1 Arial,Helvetica,sans-serif;
	cursor:pointer;
	color:#999;
	right:0.4em;
	top:0.2em;
	padding:0.2em;
}

#modal .button {
	padding-right:0.7em;
	padding-left:0.7em;
}


/************************************************************
Miscellaneous */

/* Text alignment */
.left { text-align:left !important; }
.center { text-align:center !important; }
.right { text-align:right !important; }

/* Font sizes */
small { font-size:90%; }
big { font-size:115%; }


/* Columns */
.col {
	display:inline-block;
	vertical-align:top;
	text-align:left;
}

/* This has been moved to pages.css under Staff List
.col figure {
	margin: 0 0 0 0;
	padding-bottom: 1em;
}
.col figure h3 {
	font-weight: bold;
}
.col img {
	float: left;
	margin: 0 1em 2em 0;
	border: 0.2em solid #FFFFFF;
    border-radius: 1.2em;
}
*/


/* Fix extra button padding in Firefox */
input[type="submit"]::-moz-focus-inner {
	border:none;
	padding:0;
	line-height:1;
}

/*************************
   Generic Site Styles
*************************/
.table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  /*float: none !important;*/
}
.table.page, .container{
  max-width: 1024px;
  margin: 0 auto;
}
.container{
	padding: 0 20px;
}
main .table.page,
.table.auto-height {
  height: auto;
}

.table.auto-width {
  width: auto;
}

.table.auto-all {
  height: auto;
  width: auto;
}

.row {
  display: table-row;
}
.cell {
  display: table-cell;
  vertical-align: top;
  height: 100%;
  float: none !important;
}
.padding {
  padding: 0px 20px;
}
.padding-left {
  padding-left: 20px;
}
.padding-right {
  padding-right: 20px;
}
.middle {
  vertical-align: middle;
}
.bottom {
  vertical-align: bottom;
}
.table-header-group {
  display: table-header-group;
}
.table-footer-group {
  display: table-footer-group;
}