/*
SITE: 		FraserSpeirs.com
VERSION: 	1.0
AUTHOR: 	Pat Dryburgh
EMAIL:		hello@patdryburgh.com
WEBSITE: 	https://patdryburgh.com


TABLE OF CONTENTS:

=Global Elements
=Header
=Navigation
=Content
=Footer

*/

@import url(library/css/reset.css);
@import url(library/css/forms.css);
@import url(library/css/typography.css);
@import url(library/css/enrichment.css);
@import url(library/css/fancybox.css);
 
/* =Global Elements */

body { 
	background: #fdfdfd url(library/images/body_bg.jpg) top center;
	color: #313235
}

body.grid {
	background: url(library/images/grid.jpg) top center repeat-y
}

#grid {
	position: fixed;
	top: 1em;
	left: 1em;
	padding: .5em 1.5em;
	background: #000;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 18px; -webkit-border-radius: 18px; 	border-radius: 18px; 
	border: 0;
	display: none
}

/* =Header */

header { 
	width: 840px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 13px
}

header h1 {
	width: 193px;
	height: 46px;
	margin-top: 25px;
	background: url(library/images/logo.png) no-repeat;
	text-indent: -9999px;
	padding: 0
}

header h1 a {
	display: block;
	width: 100%;
	height: 100%;
	border: 0!important
}

/* =Navigation */

header nav {
	position: absolute;
	right: 0;
	bottom: 7px;
}

header nav li {
	float: left;
	margin: 0 0 0 2em;
}

header nav li a { 
	padding: 6px 18px 7px;
	text-transform: uppercase;
	text-decoration: none;
	display: block
}

header nav li a:hover, header nav li a:focus {
	background: #e8e8e8
}

header nav li a.current {
	background: #991122;
	color: #fff;
}

/* =Content */

#masthead, .content {
	width: 888px;
	margin: 0 auto;
	overflow: hidden;
}

#masthead {
	background: url(library/images/masthead.jpg) no-repeat;
	width: 896px;
	height: 428px;
	position: relative
}

#masthead div {
	width: 385px;
	height: 336px;
	position: absolute;
	left: 435px;
	top: 88px;
	background: #000;
	overflow: hidden
}

#masthead div img {
	position: absolute;
	top: 0;
	left: 0
}

#upcoming, #contact {
	background: url(library/images/masthead-interior.jpg) no-repeat;
	padding-top: 1em
}

#about, #upcoming, #video, #testimonials, #contact {
	overflow: hidden;
	margin-bottom: 60px
}

#about h1 {
	margin: 0 24px
}

.intro {
	float: left;
	width: 408px;
	margin-left: 24px;
}

.intro, #past li h2 {
	border-top: 2px solid #5a5b5d;
	padding-top: 1em
}

#about .intro {
	width: 480px;
	padding: 0 0 0 72px;
	background: url(library/images/icon.png) top left no-repeat;
	border: 0;
}

#help {
	float: right;
	width: 262px;
	border: 1px solid #7a3941;
	background: #eaeaea;
	margin-right: 24px
}

#help ul {
	margin: 12px 0 
}

#help li {
	list-style-image: url(library/images/checkmark.png);
	margin: 0 18px 1em 36px;
}

#ade {
	float: right;
	margin: 12px 24px 0 0;
	width: 262px;
	text-align: center
}

#ade a:hover, #ade a:focus {
	border: 0
}

.sidebar h2 {
	color: #fff;
	padding: 6px 12px;
}

#video h1 {
	margin: 0 36px;
	text-align: center
}

#video ul {
	margin: 0 12px 18px; 
}

#video li {
	float: left;
	width: 248px;
	height: 167px;
	padding: 8px;
	background: #fff;
	list-style: none;
	margin: 0 12px;
	position: relative
}

#video p {
	text-align: center
}

#video img {
	position: absolute
}

#video .play {
	position: absolute;
	width: 86px;
	height: 86px;
	top: 50%;
	left: 50%;
	margin: -43px 0 0 -43px;
	z-index: 6;
	text-decoration: none;
	background: url(library/images/playbtn.png) no-repeat;
	text-indent: -9999px
}

#video a:hover .play, #video a:focus .play {
	background-position: 0 -86px
}

#video .youtube {
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background: url(https://fraserspeirs.com/library/images/overlay.png);
	background: rgba(0,0,0,.8);
	z-index: 9;
}

#video .display-video {
	left: 0
}

#video .youtube iframe {
	position: absolute;
	top: 50%; 
	left: 50%;
	margin: -255px 0 0 -438px;
	padding: 6px;
	background: #222;
	border: rgba(0,0,0,.4)
}

#testimonials li {
	list-style: none;
	float: left;
	width: 264px;
	margin: 1em 0 0 24px
}

#testimonials li:first-child { 
	width: 888px;
	margin: 0 0 1em
}

#testimonials li:first-child blockquote {
	background: url(library/images/quotemarks.png) 0 30px no-repeat;
	padding: 0 24px
}

#upcoming h1, #past h1, #contact h1 {
	margin: 0 24px;
	border-bottom: 1px solid #5a5b5d;
	padding: .5em 0 .125em
}

#lanyrd {
	margin: 2em 24px;
	float: left;
	width: 406px;
	border: 1px solid #7a3941;
	background: #eaeaea;
}

#lanyrd .vevent {
	position: relative;
	padding: 1em 36px;
	margin: 0;
	list-style: none
}

#lanyrd .vevent:nth-child(even) {
	background: #f3f3f3
}

#lanyrd .see-more {
	display: block;
	padding: .5em 24px;
	text-align: right;
	background: #991122;
	color: #fff
}

#lanyrd .see-more:hover, #lanyrd .see-more:focus {
	border: 0
}

#lanyrd .vevent img {
	position: absolute;
	top: 1.25em;
	left: 10px
}

#past li {
	margin: 3em 24px;
	list-style: none;
	border-top: 1px solid #5a5b5d;
	overflow: hidden;
}

#past li:first-child {
	border: 0;
	margin-top: 0
}

#past li h2, #past li .info {
	float: left;
	width: 408px;
}

#past li .info {
	margin-left: 24px;
	padding-top: 2em
}

#contact ul {
	list-style: none
}

/* =Contact Form */

#contact {
	position: relative
}

input[type="text"], textarea {
	padding: .5em 0;
	border: 0;
	border-bottom: 2px solid #5a5b5d
}

input[type="text"]:focus, textarea:focus {
	border-color: #991122
}

#form {
	float: left;
	width: 408px;
	margin-left: 24px
}

#thanks {
	padding-top: 1.2em
}

.fieldwrap, .textareawrap, .submit {
	margin: 1em 0;
}

form h1 { margin: 0 12px }

.submit {
	margin-top: 0;
	text-align: right
}

textarea {
	width: 840px
}

label {
	display: none
}

.required {
	float: left
}

/* =Footer */

footer {
	border-top: 1px solid #5a5b5d;
	width: 840px;
	margin: 2em auto;
	overflow: hidden;
	padding: 1em 0
}

footer li {
	list-style: none;
	padding: 0 0 0 1em;
	text-indent: -1em
}

#blog, #contact-info, #elsewhere {
	width: 192px;
	float: left;
	margin-left: 24px
}

#elsewhere {
	width: 120px
}

#desc {
	background: url(library/images/icon.png) 0 0 no-repeat;
	float: left;
	width: 192px;
	padding: 0 0 0 72px;
}