/* @override http://s3.amazonaws.com/st_andrews_conservatory/css/style.css.gz */

/* COLOR KEY ............................................................ */
/*

Main Text grey: #4f4f4f

Light grey for borders and dividers: #e5e5e5

Footer light grey: #b6b6b6

Footer dark grey: #222222

Red text: #6c1f18

*/
/* GLOBAL RESET ........................................................ */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* UTILITY CLASSES ........................................................ */

.clear { clear: both; }
.italic { font-style: italic; }
.white { color: white; }
.red { color: #6c1f18; }
.gray { color: #4f4f4f; }
.left { float: left; }
.right { float: right; }
	#footernav .right{ float: right; margin-right: 10px; }
.center {margin: 0px auto}
.divider { border-top: 1px solid #e5e5e5; }
.biggertext { font-size: 1.3em; }
.smallertext { font-size: 0.7em; }
.invisible { display: none; }
.raleway {font-family: Raleway}

/* TYPOGRAPHY ........................................................ */
a {
	color: #6c1f18;
	text-decoration: none;
}
a:hover {
	border-bottom: 1px solid;
}		
p {
	font: 19px/30px 'Crimson Text', Georgia; 
	color: #4f4f4f;
	padding-bottom: 18px;
}
h1 {
	font: 38px/38px 'Crimson Text', Georgia;
	color: #6c1f18;
	padding-bottom: 19px;
}
h2 {
	font: 30px/30px Raleway, Georgia;
	color: #6c1f18;
	text-decoration: none;
	margin-bottom: 10px;
}
		h2 a{
			width: 280px;
			padding-bottom: 10px;
			margin-bottom: 20px;
			border-bottom: 3px solid #e5e5e5;
			display: block;
		}
		h2 a:hover{
			border-bottom: 3px solid #bebebe;
		}
.textcolumn h2{
	font: 28px/38px 'Crimson Text', Georgia;
	color: #6c1f18;
	text-decoration: none;
}
h3 {
	font: 24px/24px Raleway, Georgia;	
	letter-spacing: 1px;
	text-decoration: none;
	margin-bottom: 5px;
}
h4 {
	font: 24px/24px 'Crimson Text', Georgia;
	color: #6c1f18;
	padding-bottom: 10px;
}
h5 {
	font: 24px/24px 'Crimson Text', Georgia;
	color: #6c1f18;
	margin: 18px 20px 5px 20px;
}
/* end typography*/

/* MAIN STRUCTURE ........................................................ */

html, body {
	height: 100%;
}
body {
	background: url(../images/keys.png) repeat-x #fff;
}
#container {
	width: 1000px;
	min-height: 100%;
	margin: 0 auto;
}
* html #container {
	height: 100%;
}
#contentwrapper {
	background: url(../images/page.png) no-repeat;
	width: 1000px;
	margin-top: 24px;
	display: table;
}
#content {
	width: 960px;
	margin: 21px auto 30px auto;
	display: block;
	min-height: 550px;
}

#slideshow {
	width: 940px;
	height: 367px;
	margin: 10px;
}
#clearfooter {
	height: 220px;
}

/* HEADER ........................................................ */

#topflourish {
	background: url(../images/topflourish.png) no-repeat;
	width: 1000px;
	height: 325px;
	background-position-x: -50px;
	margin: 0 auto -325px auto;
}
#header {
	height: 130px;
	width: 1000px
}
#logo {
	background: url(../images/logo.png) no-repeat;
	width: 350px;
	height: 80px;
	margin: 45px 0 0 30px;
	float: left;
}
#logo:hover {
	border: none;
}
#nav {
	width: 540px;
	height: 50px;
	float: right;
	margin-top: 69px;
}
#nav li {
	float: left;
}
#nav li a{
	height: 14px;
	margin: 10px 18px 0px 18px;
	text-transform: uppercase;
	font: 16px/16px Raleway, Georgia;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
	padding: 10px 0 8px 0;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	float: left;
}
#nav li a:hover{
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
/*page ids for active state*/
#home-page li.home-page a,
#about-page li.about-page a,
#classes-page li.classes-page a,
#events-page li.events-page a,
#contact-page li.contact-page a {
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}
/*secondary nav*/
#secondarynavwrapper {
	width: 240px;
	height: 340px;
	background-color: white;
	float: left;
	background: url(../images/secondarynav.png) no-repeat;
}
#secondarynav {
	width: 210px;
	margin: 98px 0 0 10px;
}
#secondarynav li h2, #secondarynav li a{
	width: 198px;
	height: 31px;
	color: #1c1c1c;
	font: 17px/17px Raleway, Georgia;
	text-align: right;
	padding: 17px 12px 0 0;
	border-bottom: 2px solid #fff;
	display: block;
	margin-bottom: 0px;
}
#secondarynav li a:hover {
	background: url(../images/secondarynavactive.png) no-repeat;
}
#about-page .active, #events-page .active
 {
	background: url(../images/secondarynavactive.png) no-repeat;
}
/* end navigation */

/* COLUMNS ........................................................ */

/* three column layout */
.threecolumns {
	width: 280px;
	margin: 20px 20px 30px 20px;
	float: left;
}
.threecolumns p{
	padding-bottom: 0;
}
.threecolumns a img {
	border: 5px solid #e5e5e5;
	float: left;
	margin-right: 10px;
}
.threecolumns a:hover img {
	border: 5px solid #cfcfcf;
}
/* four column layout */
.fourcolumns {
	width: 220px;
	margin: 10px;
	float: left;
}
.fourcolumns a:hover{
	border: none;
}
.fourcolumns a img {
	border: 5px solid #e5e5e5;
}
.fourcolumns a:hover img {
	border: 5px solid #cfcfcf;
}
/* two column layout */
.twocolumns {
	width: 440px;
	margin: 0px 20px 10px 20px;
	float: left;
}
/* text column on subpages */
.textcolumn {
	width: 650px;
	margin: 50px 50px 30px 0;
	float: right;
}
.textcolumn p {
	font-size: 19px;
	line-height: 30px;
}
.textcolumn img{
	float: left;
	border: 5px solid #e5e5e5;
	margin: 10px 10px 10px 15px;
}
.textcolumn .opening {
	font: 26px/37px Raleway, Georgia;
	color: #1e1e1e;
}
/* end columns */

/* PAGE SPECIFIC DIVS ........................................................  */

#eventslink {
	width:440px;
	height: 30px;
	border-bottom: 1px solid #e5e5e5;
	display: block;
	margin: 13px 0 12px;
}
#eventslink:hover {
	border-bottom: 1px solid #6c1f18;
}
#eventslink .title{
	float: left;
	margin-top: -5px;
	font: 24px/24px 'Crimson Text', Georgia;
	color: #6c1f18;
}
#musictriviabox {
	background: url(../images/musictriviabox.png) no-repeat;
	float: right;
	height: 180px;
	width: 434px;
}
#musictriviabox p{
	margin: 0 20px 0 20px;
}

.instructorsframe {
	background: url(../images/instructorsframe.png) no-repeat;
	width: 240px;
	height: 246px;
	overflow: hidden;
	float: left;
	margin: -20px 0px 0px -20px;
}
.instructorsframe img{
	border: none;
	margin: 25px;
	width: 190px;
}
#contact {
	width: 415px;
	height: 360px;
	float: left;
	margin: 40px 0px 0px 40px;
}
#maps {
	background: url(../images/mapframe.png) no-repeat;
	width: 420px;
	height: 310px;
	float: right;
	padding: 25px;
	margin: 20px 25px 0px 0px;
}
#maps a {
	text-align: center;
	display: block;
	margin-top: 5px;
	padding-bottom: 5px;
}
.eventspicture {
	margin-top: -88px;
}
.divider { border-top: 1px solid #e5e5e5; margin-top: 12px; margin-bottom: 36px;}

.email {
	display: block;
	background: url(../images/emaillink.png) no-repeat;
	width: 430px;
	height: 40px;
	float: right;
	margin-top: -1px;
	margin-bottom: 24px;
}
.email:hover {
	background-position: 0 -40px;
	border: none;
}
/* end spcific divs */

/* FOOTER STUFF ........................................................ */

#footer {
	background: url(../images/footertopbar.png) repeat-x #222;
	height: 267px;
	padding-top: 20px;
	margin: -270px auto 30px;
}
#footer, #footer p, #footernav li, #footernav li a{
	color: #b6b6b6;
}
#footerwrapper {
	background: url(../images/footerbg.png) no-repeat #222;
	width: 960px;
	height: 200px;
	margin: 50px auto 0 auto;
}
.footercolumn {
	width: 200px;
	margin: 8px 20px 0 20px;
	* margin-top: 18px;
	float: left;
}
.footercolumn a, #footer {
	color: #fff;
}
#footernav {
	width: 960px;
	border-top: 1px solid #ccc;
	padding: 13px 0 5px;
	font-size: 14px;
	height: 22px;
}
#footernav li {
	float: left;
}
#footernav li a{
	float: left;
	margin: 0 10px 0 10px;
	text-transform: uppercase;
	text-decoration: none;
}
/* end footer stuff */

/* SLIDESHOW ........................................................ */

.images {
	position:relative;
	width: 940px;	
	height: 367px;
	cursor:pointer;
	overflow: hidden;
}
/* single slide */
.images div {
	display:none;
	position:absolute;
	top: 10px;
	left:0;		
}
/* tabs */
.tabs {
	z-index: 1000;
	margin: 0 auto;
	width: 100px;
	margin-bottom: -5px;
	background: #fff;
}
.tabline {
	height: 1px;
	background: url(../images/tabline.png) no-repeat;
	margin: -11px 0 0 10px;
	* margin-top: -1px;
	float: left;
	width: 940px;
	display: block;
}
/* single tab */
.tabs a {
	display: inline;
	width:12px;
	height:12px;
	float:left;
	margin:4px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;	
}
.tabs a:hover {
	background-position:0 -12px;
	border: none;      
}
/* active state */
.tabs a.current {
	background-position:0 -24px;
	border: none;       
}