/* Master layout

Important Colors
	Deep red (headings, etc.): #8B0904
	Red-beige: #89756D
*/

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

@font-face{
	font-family:SheepSans;
	src: url('../fonts/sheep_sans.eot'); /* For IE */
	src: local('Sheep Sans'), url('../fonts/sheep_sans.ttf') format('opentype');
}


/************************************************************
Global styles */
body {
	margin:0 auto;
	padding:0;
	font:10pt/1.3 Helvetica,Arial,sans-serif;
	background:#f6f6f0;
}
body.mceContentBody { /* To prevent TinyMCE from stretching too wide */
   width:inherit;
}

/* Links */
a:link,
a:visited,
a:hover,
a:active {
	color:#750907;
	font-weight:bold;
	text-decoration:none;
}
a:visited {
	color:#004071;
}
a:hover {
	color:#8d0b06;
	text-decoration:none;
}
a img {
	border:none;
}


/* Headings */
h1,h2,h3,h4,h5,h6 {
	font:11pt/1.1 SheepSans,Tahoma,Arial,Helvetica,sans-serif;
	color:#8B0904;
	margin:0.4em 0;
}
h1 {
	font-size:16pt;
}
h2 {
	font-size:14pt;
}
h3 {
	font-size:12pt;
}

/* Block / icon headings */
h2.block,
h3.block {
	text-transform:uppercase;
	font-weight:bold;
	background-repeat:no-repeat;
	background-position:left center;
}
h2.block {
	font-size:18pt;
}
h3.block {
	font-size:14pt;
	margin:0.2em 0;
}
h3.block.news,
h3.block.featured,
h3.block.join {
	padding-top:1em;
	padding-bottom:1em;
}
h3.block.news {
	background-image:url('../images/icons/news.png');
	padding-left:3em;
}
h3.block.featured {
	background-image:url('../images/icons/star.png');
	padding-left:2.2em;
}
h3.block.join {
	background-image:url('../images/icons/megaphone.png');
	padding-left:3em;
}


/* Block-level */
p {
	margin:0.5em 0;
}

/* Dividers */
hr {
	border:none;
	padding:0;
	background:transparent url('../images/site/dividers.png') no-repeat center top;
	height:12px;
	margin:1.5em 0;
}
hr.invert {
	background-position:center -12px;
}
.leftCol hr {
	background-image:url('../images/site/dividers-sm.png');
	height:10px;
}
.leftCol hr.invert {
	background-position:center -10px;
}



/* Accessibility links (from old site layout; may as well keep them) */
.accessibilityNav {
	font-size:2px;
	position:absolute;
	left:-9999px;
	top:-5000px;
}
.accessibilityNav a {
	color:#fff !important;
}


/************************************************************
GET RID OF */

#siteWidth {
	width:955px;
	margin-left:auto;
	margin-right:auto;
}


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

#header {
	background:#fff;
}
#header>div {
	position:relative;
	text-align:right;
	width:955px;
	margin:0 auto;
	padding:1em 0 0.5em 0;
}


/* Logo image / link */
#logo {
	position:absolute;
	top:0.2em;
	left:0;
	margin:0;
}
#logo a {
	display:block;
	text-align:left;
	text-indent:-9999px;
	color:transparent; 
	background:transparent url('../images/logos/logo.gif') no-repeat center center;
	width:270px;
	height:100px;
}


/* Facebook like */
#fb-like {
	display:inline-block;
	vertical-align:middle;
}


/* Shared: Follow Us / My Account */
#follow-icons,
#account-btn {
	display:inline-block;
	vertical-align:middle;
	border:1px solid #CEB8A0;
	color:#fff;
	text-transform:uppercase;
	font-size:9pt;

	-moz-border-radius:0.8em;
	-webkit-border-radius:0.8em;
	border-radius:0.8em;

	-moz-box-shadow:2px 3px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow:2px 3px 3px rgba(0,0,0,0.3);
	box-shadow:2px 3px 3px rgba(0,0,0,0.3);
}


/* "Follow Us" links */
#follow-icons {
	list-style:none;
	margin:0;
	padding:0.2em 1em;
	background:#8B0904;
	border-top-color:#e6e4d3;
}
#follow-icons li {
	display:inline-block;
	vertical-align:bottom;
	line-height:1.5;
	padding:0 0.5em;
}
#follow-icons a {
	display:block;
	text-align:left;
	text-indent:-9999px;
	color:transparent;
	width:22px;
	height:22px;
	background-repeat:no-repeat;
	background-position:center center;
}
#follow-icons .facebook a {
	background-image:url('../images/icons/facebook.png');
}
#follow-icons .twitter a {
	background-image:url('../images/icons/twitter.png');
}
#follow-icons .youtube a {
	background-image:url('../images/icons/youtube.png');
}


/* "My Account" link */
#account-btn {
	background:#88746B;
	margin:0 1em;
}
#account-btn a {
	display:block;
	font-weight:normal;
	padding:0.2em 1em;
	line-height:1.85;
	color:#fff;
}


/* Call header */
#header h3 {
	font-size:15pt;
	color:#88746a;
	margin:1em 0.3em 1em 0;
}
#header h3 strong {
	font-weight:normal;
	color:#8b0f04;
	padding:0 0.3em;
}



/************************************************************
Layout: Main navigation */

#main-nav {
	background-image:-moz-linear-gradient(top, #f1f1f4, #fdfdfb 10%, #d3d1b8);
	border-bottom:1px solid #cdcab1;
	margin:0;
	padding:0;
	font-size:0; /* Gets rid of space between */
	list-style:none;
	text-align:center;
}
#main-nav>li {
	display:inline-block;
	padding:0.2em 2em 0 1em;
	font-size:11pt;
	border-left:1px solid #ffffff;
	border-right:1px solid #cdcab1;
}
#main-nav a {
	color:#89756D;
}
#main-nav>li>a {
	display:block;
	padding:0.4em 0.4em 0.4em 1.6em;
	font-weight:normal;
}
#main-nav>li:first-child {
	border-left:none;
	padding-left:0;
	margin-left:-1em; /* Helps center links better */
}
#main-nav>li:last-child {
	border-right:none;
}
#main-nav>li.hasSubs>a {
	padding-right:1.5em;
	background:transparent url('../images/icons/arrow-down.png') no-repeat right center;
}


/* Second level */
#main-nav li ul {
	display:none;
	list-style:none;
	position:absolute;
	z-index:3;
	text-align:left;
	margin:0 0 0 -1em;
	padding:0;
	border:1px solid #D2CFB9;
	border-top:none;
	background-color:#d8d5bd;
	min-width:13em;
	max-width:20em; /* IE puts horizontal scrollbars otherwise, though there's no aesthetic difference */
}
#main-nav li li {
	position:relative;
	background:transparent url('../images/icons/arrow-right.png') no-repeat 0.5em center;
}
#main-nav li li a {
	display:block;
	padding:0.4em 2em 0.4em 1.5em;
	border-top:1px solid #B6AAA4;
	font-weight:normal;
	font-size:10.5pt;
}
#main-nav li strong { /* "NEW" text */
	text-transform:uppercase;
	color:#8B0904;
	padding-left:0.2em;
}
#main-nav li li:first-child a {
	border-top:none;
}

/* Hover color */
#main-nav li:hover {
	background-color:rgba(216, 213, 193, 0.3);
}


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

#content {
	background:#fff;
}
#content>div {
	position:relative;
	width:955px;
	margin:0 auto;
	padding:2em 0 3em 0;
}


/* Top-level headings (plus shadows) */
#content>div>h1 {
	font-weight:bold;
	font-size:20pt;
	line-height:1.2;
	letter-spacing:0.05em;
	position:relative;
	margin:0.7em 0 0.5em 0;
	padding:1.3em 0 1.1em 0;
}
#content>div>h1:before {
	content:' ';
	position:absolute;
	width:80%;
	height:10px;
	top:0px;
	left:0.7em;

	background-image:-moz-radial-gradient(center 11px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-webkit-radial-gradient(center 11px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-ms-radial-gradient(center 11px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-o-radial-gradient(center 11px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:radial-gradient(center 11px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
}
#content>div>h1:after {
	content:' ';
	position:absolute;
	width:80%;
	height:10px;
	bottom:0px;
	left:0.7em;

	background-image:-moz-radial-gradient(center -1px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-webkit-radial-gradient(center -1px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-ms-radial-gradient(center -1px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:-o-radial-gradient(center -1px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
	background-image:radial-gradient(center -1px, ellipse farthest-side, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0));
}


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

#footer {
	background:#f6f6f0 url('../images/site/footer-shadow.gif') no-repeat center top;
	border-top:15px solid #8b0f04;
}
#footer>div {
	width:950px;
	margin:0 auto;
	padding:2em 0 4em 0;
	position:relative;
}

/* Navigation */
#foot-nav {
	list-style:none;
	margin:0;
	padding:0;
	font-size:8pt;
}
#foot-nav li {
	display:inline-block;
	padding:0 0.1em 0 0.5em;
	border-left:1px solid #746158;
}
#foot-nav li:first-child {
	border-left:none;
}
#foot-nav a {
	color:#750907;
}

/* JB Logo */
#jb-logo {
	position:absolute;
	right:0;
	top:1em;
	margin:0;
}


/************************************************************
Buttons / Links */

/* Arrow links */
a.arrow {
	background:transparent url('../images/icons/arrow-circle-red.png') no-repeat left bottom;
	padding-left:1.5em;
}
a.arrow.invert { /* Inverted / white arrows */
	background:url('../images/icons/arrow-circle-white.png') no-repeat right center;
	padding:0.3em 2em 0.1em 0;
	font:bold 9.5pt/1 Arial,Helvetica,sans-serif;
	color:#fff;
	text-transform:uppercase;
}


/* Buttons */
.button {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	border:1px solid #CEB8A0;
	color:#fff !important;
	font:bold 9pt/1.3 Arial,Helvetica,sans-serif;
	margin:0.3em 0.3em 0.2em 0;
	padding:0.5em 4em 0.5em 1.5em;
	background:#8B0904;

	-moz-border-radius:0.8em;
	-webkit-border-radius:0.8em;
	border-radius:0.8em;

	-moz-box-shadow:2px 3px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow:2px 3px 3px rgba(0,0,0,0.3);
	box-shadow:2px 3px 3px rgba(0,0,0,0.3);
}
.button:after {
	content:' ';
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:4em;
	background:transparent url('../images/icons/arrow-circle-white.png') no-repeat center center;
}

/* Submit buttons inside (have to use container b/c of :after) */
.button input {
	border:none;
	padding:0;
	margin:0;
	cursor:pointer;
	color:#fff;
	background:transparent;
	font:bold 9pt/1.3 Arial,Helvetica,sans-serif;
}


/* Large button */
.button-lg {
	display:inline-block;
	vertical-align:middle;
	color:#fff !important;
	font:bold 18pt/1.3 SheepSans,Tahoma,Arial,Helvetica,sans-serif;
	padding:0.4em 1.3em 0.2em 1.3em;
	margin:0.3em 0.3em 0.3em 0;

	-moz-border-radius:0.3em / 0.4em;
	-webkit-border-radius:0.3em / 0.4em;
	border-radius:0.3em / 0.4em;

	background-color:#9A2720;
	background-image:-moz-linear-gradient(top, #A34344, #8E0A06);
	background-image:-webkit-linear-gradient(top, #A34344, #8E0A06);
	background-image:-ms-linear-gradient(top, #A34344, #8E0A06);
	background-image:-o-linear-gradient(top, #A34344, #8E0A06);
	background-image:linear-gradient(top, #A34344, #8E0A06);
}



/************************************************************
Columns */

.leftCol,
.rightCol,
.col {
	display:inline-block;
	vertical-align:top;
}

.leftCol {
	width:67%;
}
.rightCol {
	width:30%;
	padding-left:2.5%;
}


/************************************************************
Forms */

form {
	margin:0;
}

/* Form elements */
fieldset {
	border:none;
	padding:0;
	margin:1em 0;
}
label,
.label {
	font-weight:bold;
	color:#8B0904;
}
input[type="text"],
textarea {
	font:10pt/1 Arial,sans-serif;
	border:1px solid #89756D;
	padding:0.1em;
}
input[type="text"]:focus,
textarea:focus {
	border-color:#8B0904;
}
textarea {
	width:98%;
}

/* Tableless forms */
.tableless p {
	margin-left:7em;
	clear:left;
}
.tableless p.auto {
	margin-left:0 !important;
}
.tableless p label,
.tableless p .label {
	float:left;
	width:6.8em;
	margin-left:-6.8em;
}
.tableless p label.auto,
.tableless p .label.auto,
p input[type="checkbox"]+label,
p input[type="radio"]+label {
	float:none !important;
	width:auto !important;
	margin-left:0 !important;
	font-weight:normal !important;
}

/* Required label (*) */
.req {
	font-size:110%;
	font-weight:bold;
	color:#f00;
}



/* Captcha image */
p.captcha {
	overflow:hidden;
}
p.captcha label {
	float:none;
	margin:0;
	width:auto;
	display:block;
}
p.captcha .leftCol {
	margin:1em;
	width:auto;
}
p.captcha .rightCol {
	float:left;
	width:auto;
	margin-top:2em;
}


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

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

/* Font sizes */
.smaller { font-size:90%; }
.larger { font-size:115%; }
.small { font-size:60%; }

/* Padding */
.topPad { padding-top:1em; }
.bottomPad { padding-bottom:1em; }

/* Floating/clearing */
.clear { clear:both; }


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