@import url(reset.css);

/* For http://sappphotography.com, all rights reserved
/* Designed by Kyle Gach (http://kylegach.com)
/* Last updated on 2-1-09
/*
/* COLORS
/* ---------------------------------------------------------
/* Background          cocoa brown          #xxxxxx
/* Copy                color name           #xxxxxx
/* Accent & Links      teal                 #xxxxxx
/* Link hovers         lighter teal         #xxxxxx
/*
============================================================ */


/*   C O M M O N
============================================================ */

html {
	text-align: center;
	}

body {
	width: 960px;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -480px;
	font: 13px/1.6 Georgia, "Times New Roman", Times, serif;
	color: #746c5a;
	background: #1a0d04;
	}

h2, h3, h4 {
	margin-bottom: 6px;
	padding-bottom: 4px;
	}

h2 {
	font-family: Cochin, Georgia, "Times New Roman", Times, serif;
	font-size: 26px;
	font-style: italic;
	margin-bottom: 8px;
	border-bottom: 1px solid #211907;
	}

h3 {
	font-size: 22px;
	font-style: italic;
	letter-spacing: -.05em;
	color: #413927;
	margin-top: 32px;
	border-bottom: 1px double #211907;
	}

h4 {
	font-size: 18px;
	}
	
a:link {
	color: #688789;
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px dotted #233233;
	}

a:visited {
	color: #485654;
	text-decoration: none;
	border-bottom: 1px dotted #233233;
	}

a:hover, a:focus, a:active {
	color: #8aa9ab;
	text-decoration: none;
	border-bottom: 1px solid #688789;
	}

ul, ol, p {
	margin-bottom: 22px;
	}

ul {
	list-style-type: disc;
	}

ol {
	list-style-type: lower-roman;
	}

strong {
	font-weight: bold;
	}

em {
	font-style: italic;
	}

	
/*   P R I M A R Y   N A V I G A T I O N   (ribbon)
============================================================ */

#nav {
	width: 200px;
	float: left;
	margin-left: 75px;
	padding-bottom: 55px;
	background: url(../img/ribbon-bg.jpg) right bottom no-repeat;
	text-align: left;
	}
	
/* logo */
	
#nav h1 a {
	display: block;
	width: 156px;
	height: 98px;
	margin: 0 0 15px 17px;
	padding-bottom: 10px;
	text-indent: -9999px;
	border: none;
	background: url(../img/logo.jpg) 9px 32px no-repeat;
	}

#nav ul {
	list-style-type: none;
	margin-bottom: 0;
	}

#nav ul li {
	float: left;
	clear: both;
	margin-left: 20px;
	}
	
#nav ul li a:link, #nav ul li a:visited {
	display: block;
	width: 130px;
	height: 34px;
	margin-left: 10px;
	padding: 0;
	text-indent: -9999px;
	border: none;
	}
	
#nav ul li a:hover, #nav ul li a:focus, #nav ul li a:active {
	border: none;
	}

/* Idle States */
	
#nav ul li a#nav-weddings:link, #nav ul li a#nav-weddings:visited {
	background: url(../img/nav-bg.jpg) 5px -193px no-repeat;
	}

#nav ul li a#nav-seniors:link, #nav ul li a#nav-seniors:visited {
	background: url(../img/nav-bg.jpg) 5px -227px no-repeat;
	}

#nav ul li a#nav-families:link, #nav ul li a#nav-families:visited  {
	height: 54px;
	background: url(../img/nav-bg.jpg) 5px -263px no-repeat;
	}

#nav ul li a#nav-engagements:link, #nav ul li a#nav-engagements:visited {
	background: url(../img/nav-bg.jpg) 5px -318px no-repeat;
	}

#nav ul li a#nav-commercial:link, #nav ul li a#nav-commercial:visited {
	background: url(../img/nav-bg.jpg) 5px -351px no-repeat;
	}

/* Hover & Current States */

#nav ul li a#nav-weddings:hover, #nav ul li a#nav-weddings:focus,
#nav ul li a#nav-weddings:active, #sapp-weddings #nav ul li a#nav-weddings {
	background: url(../img/nav-bg.jpg) 5px 0px no-repeat;
	}

#nav ul li a#nav-seniors:hover, #nav ul li a#nav-seniors:focus,
#nav ul li a#nav-seniors:active, #sapp-seniors #nav ul li a#nav-seniors {
	background: url(../img/nav-bg.jpg) 5px -34px no-repeat;
	}

#nav ul li a#nav-families:hover, #nav ul li a#nav-families:focus,
#nav ul li a#nav-families:active, #sapp-families #nav ul li a#nav-families {
	background: url(../img/nav-bg.jpg) 5px -70px no-repeat;
	}

#nav ul li a#nav-engagements:hover, #nav ul li a#nav-engagements:focus,
#nav ul li a#nav-engagements:active, #sapp-engagements #nav ul li a#nav-engagements {
	background: url(../img/nav-bg.jpg) 5px -125px no-repeat;
	}

#nav ul li a#nav-commercial:hover, #nav ul li a#nav-commercial:focus,
#nav ul li a#nav-commercial:active, #sapp-commercial #nav ul li a#nav-commercial {
	background: url(../img/nav-bg.jpg) 5px -158px no-repeat;
	}

	
/*   S E C O N D A R Y    N A V I G A T I O N   (top-right links)
============================================================ */

ul#subnav {
	float: right;
	margin-bottom: 0;
	list-style-type: none;
	line-height: 1;
	}
	
ul#subnav li {
	float: left;
	margin: 0 0 0 10px;
	}

ul#subnav li a:link, ul#subnav li a:visited {
	display: block;
	padding: 7px 5px 1px;
	border: none;
	}

ul#subnav li a:visited {
	color: #688789;
	}

ul#subnav li a:hover, ul#subnav li a:focus, ul#subnav li a:active {
	color: #8aa9ab;
	}

	
/*   P A G E   C O N T E N T
============================================================ */

#content {
	float: right;
	}

.showcase {
	width: 600px;
	margin: 20px 0 10px;
	}

.copy {
	width: 500px;
	margin: 60px 85px 30px 0;
	text-align: left;
	}

span.h3price {
	float: right;
	margin-top: -45px;
	font-size: 22px;
	font-style: italic;
	letter-spacing: -.05em;
	color: #413927;
	}

span.h4price {
	float: right;
	margin-top: -41px;
	font-size: 18px
	}

.copy ul {
	margin-bottom: 8px;
	padding-bottom: 16px;
	border-bottom: 1px double #211907;
	}

.copy ul:last-child {
	border: none;
	}

.copy ul span {
	text-transform: uppercase;
	}

#subcontent {
	float: left;
	clear: left;
	width: 340px;
	margin: 8px 0 10px;
	text-align: left;
	}

#subcontent h3 {
	font-family: Cochin, Georgia, "Times New Roman", Times, serif;
	padding-bottom: 0;
	border: none;
	}

a.zoom, a.zoom:link, a.zoom:visited, a.zoom:hover, a.zoom:focus, a.zoom:active {
	display: block;
	border: none;
	}

a.pricing {
	text-transform: uppercase;
	}


/*   F O O T E R   (contact info)
============================================================ */

p#contact-info {
	clear: both;
	display: block;
	width: 100%;
	margin-bottom: 8px;
	padding: 5px 5px 0 0;
	text-align: right;
	font-size: 95%;
	color: #372f1d;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-top: 1px solid #211907;
	}

p#contact-info a:link, p#contact-info a:visited, p#contact-info a:hover,
p#contact-info a:focus, p#contact-info a:active {
	color: #372f1d;
	border: none;
	}

	
/*   H O M E P A G E   S L I D E S H O W   (see jq_fade.css)
============================================================ */

#sapp-home #content {
	margin-top: 20px;
	height: 525px;
	}
	
ol#auto-slideshow {
	list-style-type: none;
	}


/*   G A L L E R I F I C   T H U M B S   (noscript, see jq_gallerific.css)
============================================================ */

#navigation ul {
	margin: 30px 0 0 7px;
	list-style-type: none;
	}

#navigation ul li {
	display: block;
	float: left;
	width: 84px;
	height: 98px;
	}
	
#navigation ul li a {
	display: block;
	width: 77px;
	height: 91px;
	padding: 7px 0 0 7px;
	border: none;
	background: url(../img/thumb-bg.jpg) center bottom no-repeat;
	}

#navigation ul li a img {
	display: block;
	width: 70px;
	height: 70px;
	background: #333;
	}
	
#navigation ul li.selected a, #navigation ul li a:hover, #navigation ul li a:focus,
#navigation ul li a:active {
	background: url(../img/thumb-bg.jpg) center top no-repeat;
	}


/*   R O T A T I O N   H E L P E R S   (what a pain...)
============================================================ */

.small-pos3 {
	margin-left: 46px;
	}

.small-neg3 {
	margin-left: 54px;
	}

.front-v-pos2, .front-v-neg2 {
	margin: 5px 0 0 120px;
	}

.front-v-pos4, .front-v-neg4 {
	margin: 0 0 0 120px;
	}

.front-h-pos2, .front-h-neg2 {
	margin: 40px 0 0 55px;
	}

.front-h-pos4, .front-h-neg4 {
	margin: 40px 0 0 50px;
	}

.gallery-v-pos2, .gallery-v-neg2 {
	
	}

.gallery-v-pos4, .gallery-v-neg4 {
	
	}

.gallery-h-pos2, .gallery-h-neg2 {
	
	}

.gallery-h-pos4, .gallery-h-neg4 {
	
	}


/* Special rules to hide things when Javascript is disabled */

#ourfamily {
	display: none;
	}

#ourfamily-helper {
	display: none;
	text-align: center;
	padding-left: 5px;
	font-style: italic;
	color: #372f1d;
	}