/**
 *	Annelise Petlock
 *	Primary Screen and Print Styles
 *	@media		screen,print
 *	
 *	@project	annelisepetlock.ca
 *	@author		Thomas J Bradley <theman@thomasjbradley.ca>
 *	@link		http://thomasjbradley.ca
 *	@copyright	Copyright MMIX, Thomas J Bradley
 *	@version	$Id: general.css.php 412 2009-06-25 16:59:04Z thomasjbradley $
 *	
 *	@colordef	#6a4519; background brown
 *	@colordef	#3c2415; heading brown
 *	@colordef	#a09e2f; green
 *	@colordef	#e0c947; yellow
 *	@colordef	#f9eedb; beige
 */


/**
 *	@section	General
 */

@media screen,print {

html {
	height: 100%;
	margin: 0;
	overflow: auto;
	padding: 0;
	width: 100%;
	
	background: #6a4519 url("../images/common/bg-pattern.jpg") repeat left top;
	
	color: #6a4519;
	font: normal 100.01%/1.375 Georgia,Times,serif;
	}
	
body {
	height: auto;
	margin: 0 auto;
	min-height: 100%;
	padding: 0;
	position: relative;
	width: 980px;
	
	background: #f9eedb url("../images/common/body-bg.png") repeat-y center top;
	}

}

@media print {

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	
	background: none;
	
	font-size: 0.875em;
	line-height: 1.375;
}

}


/**
 *	@section	Layout
 */

@media screen {

.wrapper {
	margin: 0;
	padding: 0 0 200px;
	
	background: transparent url("../images/common/footer.jpg") no-repeat left bottom;
	}
	
#content {
	margin: 0;
	padding: 10px 50px 0 375px;
	}

}

@media print {

.wrapper,
#content {
	margin: 0;
	padding: 0;
	
	background: none;
	}

}


/**
 *	@section	Layout
 *	@subsection	Masthead
 */

@media screen,print {

#masthead {
	min-height: 250px;
	margin: 0;
	padding: 1px 0;
	position: relative;
	
	background: transparent url("../images/common/masthead.jpg") no-repeat left top;
	}
	
#wordmark {
	height: 195px;
	margin: 90px 0 0 40px;
	padding: 0;
	width: 405px;
	}
	
	#wordmark a,
	#wordmark a:link,
	#wordmark a:visited,
	#wordmark a:hover,
	#wordmark a:focus,
	#wordmark a:active {
		background: transparent;
		border: 0;
		}
	
}


/**
 *	@section	Layout
 *	@subsection	Navigation
 */

@media screen {

.nav {
	margin: 0;
	padding: 0 0 130px;
	position: absolute;
	top: 305px;
	
	background: transparent url("../images/common/nav-bg-bottom.png") no-repeat left bottom;
	}

	.nav ul {
		margin: 0;
		padding: 0 60px 0 0;
		width: 255px;

		background: transparent url("../images/common/nav-bg.gif") no-repeat right top;

		font-size: 1.5em;
		font-weight: bold;
		list-style-type: none;
		}
	
		.nav li {
			margin: 0;
			padding: 0 0 0 40px;
			}
		
			.nav li a,
			.nav li a:link,
			.nav li a:visited {
				display: block;
				margin: 0;
				padding: 0;
				
				border: 0;
				
				color: #6a4519;
				text-decoration: none;
				}
			
			.nav li a:hover,
			.nav li a:focus,
			.nav li a:active {
				background-color: transparent;
				
				color: #a09e2f;
				}
		
			.nav li span {
				display: block;
				padding: 0.2em 10px 0.3em;
				
				background: transparent url("../images/common/nav-overlay.png") repeat;
				border-bottom: 1px dotted #a09e2f;
				}
				
			.nav #nav-about span {
				background: transparent url("../images/common/nav-bg-about.png") no-repeat right -1px;
				}
			
			.nav li.top span {
				border-top: 1px dotted #a09e2f;
				}

			.nav li.current {
				background: transparent url("../images/common/nav-current.png") no-repeat 2px center;
				}
		
			.nav li.current a,
			.nav li.current a:link,
			.nav li.current a:visited {
				color: #a09e2f;
				}

}

@media print {

.nav {
	display: none;
	}

}


/**
 *	@section	Layout
 *	@subsection	Footer
 */

@media screen,print {

#footer {
	bottom: 0;
	left: 460px;
	margin: 0;
	padding: 0;
	position: absolute;
	
	color: #a09e2f;
	font-size: 0.75em;
	}

}


/**
 *	@section	Typography
 */

@media screen,print {
	
h2 {
	clear: both;
	margin: 0 -55px 0.7em 0;
	padding: 0;
	
	background: transparent url("../images/common/heading-bg.png") no-repeat right center;
	
	color: #3c2415;
	font-size: 2.25em;
	font-weight: bold;
	}

h3 {
	margin: 0 0 0.7em 0;
	padding: 0;
	
	color: #3c2415;
	font-size: 1.125em;
	font-weight: bold;
	}
	
p {
	margin: 0 0 1.375em;
	padding: 0;
	}
	
	p.intro {
		font-size: 1.125em;
		}
	
ul,
ol {
	margin: 0 0 1.375em;
	padding: 0;
	}
	
	#events ul {
		list-style-type: none;
		}
		
		#events ul li {
			margin-bottom: 0.5em;
			}
		
		#events ul strong {
			display: block;
			}
	
a,
a:link {
	border-bottom: 0.1em solid #a09e2f;
	
	color: #a09e2f;
	text-decoration: none;
	}
	
a:visited {
	border-bottom: 0.1em solid #b1b067;
	
	color: #b1b067;
	text-decoration: none;
	}
	
a:focus,
a:hover,
a:active {
	background-color: #e0c947;
	border-color: #e0c947;
	
	color: #3c2415;
	}
	
a[rel="external"]:after {
	content: " ""\2197 ";
	
	color: inherit;
	font-size: 85%;
	}
	
a[rel="external"][hreflang]:after {
	content: " ""\2197" " (" attr(hreflang) ")";
	
	color: inherit;
	font-size: 85%;
	}
	
a[rel="external"].no-mark-external:after {
	content: "";
	}
	
.hanging-quote {
	display: inline;
	float: left;
	margin: 0 0 0 -0.4em;
	}
	
}


/**
 *	@section	Forms
 */

@media screen {

form {
	display: block;
	margin: 0;
	padding: 0;
	
	border: 0;
	}
	
fieldset {
	margin: 0;
	padding: 1em 0;
	
	border: 0;
	border-top: 1px solid #e0c947;
	}

legend {
	color: #a09e2f;
	font: italic normal 1em/1.375em Georgia,Times,serif;
	}

form div {
	margin: 0 0 0.5em 0;
	}
	
label {
	position: absolute;
	margin: 0;
	padding: 0.3em 0 0.7em 0;
	width: 5.5em;

	color: #6a4519;
	font: normal 1em/2.2 Georgia,Times,serif;
	text-align: right;
	}
	
input,
textarea {
	display: block;
	padding: 0.55em 0 0.45em 6em;
	width: 79%;

	background-color: #fff;
	background-image: none;
	border: 1px solid #a09e2f;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	font: normal 1.125em/1.375 Georgia,Times,serif;
	vertical-align: middle;
	}
	
select {
	font: normal 1.125em/1.375 Georgia,Times,serif;
	vertical-align: middle;
	}
	
textarea {
	height: 150px;
	resize: vertical;
	}
	
.buttons {
	margin: 0;
	padding: 0.5em 0 0 0;
	
	text-align: right;
	}
	
button {
	background-color: #e0c947;
	border: 1px solid #a09e2f;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor: pointer;
	
	color: #3c2415;
	font: normal 1.5em/1.375 Georgia,Times,serif;
	}
	
label.error,
p.error {
	clear: both;
	display: block;
	margin: 0.2em 15px 0 0;
	padding: 0.4em 0.4em 0.4em 34px;
	position: static;
	width: auto;
	
	background: #ffc url("../images/common/error.png") no-repeat 5px center;
	border-bottom: 1px solid #cc9;
	border-top: 1px solid #cc9;
	
	color: #333;
	font-weight: bold;
	line-height: 2;
	text-align: left;
	}
	
p.error {
	background-image: url("../images/common/error-message.png");
	}
	
.thanks {
	padding: 0.55em 0.55em 0.45em;
	
	background-color: #fff;
	background-image: none;
	border: 1px solid #a09e2f;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	font-size: 1.5em;
	}
	
}

@media print {

form,
#contact {
	display: none;
	}
	
}


/**
 *	@section	Images
 */

@media screen,print {

img {
	margin: 0;
	padding: 0;
	
	border: 0;
	}
	
.figure {
	display: inline;
	float: right;
	height: 200px;
	margin: 0.4em 0 15px 10px;
	padding: 0;
	width: 175px;
	
	border: 1px solid #a09e2f;
	}
	
}


/**
 *	@section	Misc
 */

@media screen,print {
	
#playlist {
	display: inline;
	float: left;
	margin: 0;
	padding: 0 0 1.375em;
	width: 250px;
	}
	
#events {
	display: inline;
	float: right;
	margin: 0;
	padding: 0 0 1.375em;
	width: 280px;
	}
	
}


/**
 *	@section	Misc
 *	@subsection	PhotoGallery
 */

@media screen {
	
#photo-gallery {
	margin: 0 0 1.375em;
	padding: 0;
	
	text-align: center;
	}
		
	.js-active #scrollable {
		height: 415px;
		margin: 0 -1px 1em;
		overflow: hidden;
		padding: 0;
		position: relative;
		width: 555px;
						
		border: 1px solid #a09e2f;
		}
		
		#scrollable ul {
			margin: 0;
			padding: 0;
			
			list-style-type: none;
			}
		
		.js-active #scrollable ul {
			left: 0;
			position: absolute;
			width: 20000em;
			}
			
			#scrollable ul li {
				height: 415px;
				margin: 0 -1px 10px -1px;
				padding: 0;
				
				border: 1px solid #a09e2f;
				}
			
			.js-active #scrollable ul li {
				display: inline;
				float: left;
				margin: 0;

				border: 0;
				}
			
			#scrollable img {
				cursor: pointer;
				}
	
	#photo-gallery a,
	#photo-gallery span.bull {
		display: none;
		}
	
	.js-active #photo-gallery a,
	.js-active #photo-gallery a:link,
	.js-active #photo-gallery a:visited {
		display: inline;

		border: 0;
		cursor: pointer;
		
		color: #a09e2f;
		font-weight: bold;
		}
		
	.js-active #photo-gallery span.bull {
		display: inline;
		}
	
}