/*
--------------------------------------------------------
shelleykusnetzphotography.com
Site design by Antigravity Design/Brian Lokker
Master style sheet for screen media
Revision: 14 September 2007
-------------------------------------------------------- */


* {
	margin: 0;
	padding: 0;
}
a img {
	border: none;
}
abbr, acronym {
	cursor: help;
}
.hidden { /* "phantom" elements for screen readers etc. */
	display: none;
}
/* remove Firefox outline on clicked links */
a:hover, a:focus, a:active {
	outline: none;
}

/* Styles for Vertical and Horizontal Page Centering
-------------------------------------------------------- */

html, body, table#layout {
    min-height: 100%;
    width: 100%;
    height: 100%;
}
table#layout {
    position: absolute;
    top: 0;
    left: 0;
}
table#layout td {
    height: 100%;
    text-align: center; /*for IE */
}
#page { /* the box in which all content is located */
	position: relative;
    margin: 0 auto;
	height: 430px;
	width: 770px;
	text-align: left; /*corrects for IE hack*/
}

/* Other Body, Container, and Page Styles
-------------------------------------------------------- */

body {
	background-color: #233;
	color: #000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 76%;
}
#page {
	color: #FFF;
	background: #233 url(/images/bg/bg_page.gif) top left repeat-x;
}

/* Logo Styles
-------------------------------------------------------- */

img#logo {
	position: absolute;
	top: 30px;
	left: 35px;
}

/* Primary Navigation Styles
-------------------------------------------------------- */

#primary_nav {
	position: absolute;
	top: 7px;
	left: 365px;
	height: 20px;
	margin: 0;
	padding: 0;
}
#primary_nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#primary_nav li {
	display: inline;
}
#primary_nav li a {
	margin: 0;
	padding: 0;
}

/* Styles for Left Column
   (Primary Heading, Section Navigation, Section Image)
-------------------------------------------------------- */

div#leftcolumn {
	position: relative;
	top: 100px; /* clears absolute-positioned logo */
	left: 35px;
	width: 254px; /* 244px apparent width + 10px for nav markers */
}
div#section_nav {
	position: absolute;
	width: 254px;
	height: 64px;
	top: 33px;
	right: 0;
	z-index: 5;
	text-align: right;
}
#section_nav ul {
	list-style-type: none;
}
#section_nav img {
	margin-bottom: -2px;
}
div#section_image {
	width: 244px;
	height: 194px;
	position: absolute;
	top: 106px;
	left: 0;
	background: #000 url(../images/bg/bg_section_image.gif) no-repeat top left;
}
div#section_image img {
	position: relative;
	top: 5px;
	left: 5px;
}
#home div#section_image {
	background: none;
}
#home div#section_image img {
	position: absolute;
	top: 0;
	left: 0;
}
#home div#section_image_revd {
	width: 244px;
	height: 194px;
	position: absolute;
	top: 106px;
	left: 0;
	background: #233 url(/images/bg/bg_homeImageBox.gif) no-repeat top left;
}
#home div#section_image_revd img {
	margin-top: 1px;
}

/* Styles for Thumbnail Grid in Left Column
   (Portfoliio Pages)
-------------------------------------------------------- */

div#thumbnail_grid { /* same as SECTION_IMAGE div above */
	width: 244px;
	height: 194px;
	position: absolute;
	top: 106px;
	left: 0;
}
div#thumbnail_grid div {
	width: 44px;
	height: 44px;
	position: absolute;
	background: #344 url(/images/bg/bg_thumb.gif) no-repeat top left;
}

/* positioning styles for individual thumbnails --
   rows 1 through 4, columns A through E */

div.thumb_row1 {
	top: 0;
}
div.thumb_row2 {
	top: 50px;
}
div.thumb_row3 {
	top: 100px;
}
div.thumb_row4 {
	top: 150px;
}
div.thumb_colA {
	left: 0;
}
div.thumb_colB {
	left: 50px;
}
div.thumb_colC {
	left: 100px;
}
div.thumb_colD {
	left: 150px;
}
div.thumb_colE {
	left: 200px;
}

/* positioning of images within the grid, relative to
   the background "boxes" */

div#thumbnail_grid img {
	position: relative;
	top: 2px;
	left: 2px;
}

/* Headings with Image Replacement
   (Uses Douglas Livingstone's method detailed at
    http://www.sitepoint.com/article/header-images-css-xhtml)
-------------------------------------------------------- */

/* positioning and styles for non-replaced heading */
h1 {
	position: absolute;
	top: 0;
	left: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FC6;
}
/* non-repeated styles for replacement */
h1 span {
	display: block;
	position: relative;
	z-index: 1;
}
/* IE5 Mac Hack \*/
h1 {
	overflow: hidden;
}
/*/
h1 { text-indent: -600em; }
/* End Hack */

/* size-specific styles for replacement */
h1, h1 span {
	width: 244px; /* equals width of h1 image */
	height: 36px; /* equals height of h1 image */
	background-repeat: no-repeat;
}
h1 span {
	margin-bottom: -36px;
}
/* replacement images - repeated per heading */
#h1_portfolio, #h1_portfolio span {
	background-image: url(../images/h/h1_portfolio.gif);
}
#h1_services, #h1_services span {
	background-image: url(../images/h/h1_services.gif);
}
#h1_clientlist, #h1_clientlist span {
	background-image: url(../images/h/h1_clientlist.gif);
}
#h1_contact, #h1_contact span {
	background-image: url(../images/h/h1_contact.gif);
}

/* Styles for Content Frame (right column)
   (contains either textframe or imageframe)
-------------------------------------------------------- */

div#contentframe {
	position: relative;
	top: 30px; /* aligns with logo */
	left: 365px;
	width: 370px;
	height: 370px;
}
div.textframe {
	color: #000;
	background: #FFF url(../images/bg/bg_textframe.gif) no-repeat top left;
}
div#text {
	position: relative;
	top: 20px;
	left: 20px;
	height: 330px;
	width: 330px;
	overflow: auto;
	font-size: 90%;
	line-height: 130%;
}
div#text p {
	margin-bottom: .75em;
}
div#text p.special {
	margin-top: 2em;
}
div#text ul {
	margin: 0 0 .75em 0;
	padding: 0;
	list-style-type: none;
}
div#text li {
	margin: 0;
	padding: 0;
}
div#text a:link, div#text a:visited {
	text-decoration: none;
	border-bottom: 1px dotted #344;
	color: #344;
}
div#text a:hover {
	text-decoration: none;
	border-bottom: 1px dotted #122;
	color: #122;
}
table#imageholder {
	position: relative;
	top: 0;
	left: 0;
	width: 370px;
	height: 370px;
	color: #FFF;
	background: #233 url(../images/bg/bg_imageframe.gif) no-repeat top left;
}
table#imageholder td {
    text-align: center; /*for IE */
}
div#imagenav {
	position: absolute;
	bottom: 5px;
	left: 140px;
	z-index: 5;
}
/* hack for IE Win only \*/
* html table#imageholder {
	height: 368px;
}
* html div#imagenav {
	bottom: 7px;
}
/* end of hack */
#portfolio_index table#imageholder {
	background: #233 url(/images/bg/bg_4imagesframe.gif) no-repeat top left;
}
img#topleft {
	position: absolute;
	top: 5px;
	left: 5px;
}
img#topright {
	position: absolute;
	top: 5px;
	left: 193px;
}
img#bottomleft {
	position: absolute;
	top: 193px;
	left: 5px;
}
img#bottomright {
	position: absolute;
	top: 193px;
	left: 193px;
}
	
/* Styles for Footer
-------------------------------------------------------- */

#footer {
	position: absolute;
	bottom: 11px;
	left: 35px;
	width: 700px;
}
img#copyright, img#jasper {
	position: absolute;
	right: 0;
}
img#credit {
	position: absolute;
	left: 0;
}