@charset "utf-8";

/* ****************** RESET CSS ****************** */

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;
}


html {
	overflow:-moz-scrollbars-vertical;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";
}

/* ****************** End RESET CSS ****************** */


/* ///////////////////// TAGS / GENERAL STYLES //////////////////// */
body {
	font-family: Skia, Helvetica, Arial, sans-serif;
	color: #555;
	background: #7d5d44; /* old grey #cecece*/
	letter-spacing: .1em;
}

h1 {
	font-size: 1em;
	line-height: 2em;
	color: #000;
}

h2 {
	font-size: .95em;
	line-height: 1.8em;
	color: #282828;
}

h3 {
	font-size: .85em;
	line-height: 1.6em;
	color: #666;
}

p {
	font-size: .70em; /* color is on body tag*/
	line-height: 1.3em;
	text-align:left;
	margin-bottom: 10px;
}


td,th {
	font-size: .70em; /* color is on body tag*/
	line-height: 1.3em;
	text-align:left;
	margin-bottom: 10px;
}

th {
	font-weight: bold;
}

a {
	color: #666;
	text-decoration: underline;
}

a:hover, a:active {
	color: #000;
	text-decoration: none;
}

strong {
	font-weight:bold;
}

.orange_under { /* apply orange underline */
	background:url(images/under_orange.png) bottom left repeat-x;
	padding-bottom: 3px;
}
	.contact { /* added to orange_under class above to make orange line on contact page*/
		width: 260px;
		height: 10px;
	}

.button {
	text-align: center;
	border: 1px solid #ffb400;
	padding: 10px;
	text-decoration: none;
}

	.button:hover {
		background: #F5EAE0;
	}

/* ///////////////////// LAYOUT //////////////////// */

#wrapper {
	background: #FFF;
	width: 1024px;
	min-height: 725px;
	margin: 0 auto 10px auto;
	position: relative;
	/* padding-top: 25px; */
	padding-bottom: 40px;
}
#wrapperHome {
	background: #FFF;
	width: 1024px;
	margin: 0 auto 10px auto;
	position: relative;
	/* padding-top: 25px; */
	padding-bottom: 42px;
}

/* MAIN COLUMN - width 774px */

#mainContent {
	float: left;
	width: 740px; 
	min-height: 575px;
	margin-bottom: 10px;
}

	/* 2 Column MAIN COLUMN - total width 774px */
	
	#col1 {
		float: left;
		/* padding-top: 20px; */
		width: 500px; /* FB iframe is 525px wide to avoid horiz scroll */
	}
	
		#col1Home {
			float: left;
			padding-top: 0;
			width: 500px; /* FB iframe is 525px wide to avoid horiz scroll */
		}
	
	#col2 {
		float: right;
		text-align: left;
		padding-top: 0; /* prev padding 50px */
		padding-left: 10px;
		width: 200px;
	}
	
		#col2Home {
			float: right;
			text-align: left;
			padding-top: 20px;
			padding-left: 10px;
			width: 200px;
		}


#footer {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	position: absolute;
}
#footer p {
	color: #555;
	font-size: .55em;
	line-height: .75em;
	text-align:center;
	margin-top: 15px;
}

/* SIDE COLUMN - logo */

#logo {
	background: #fff;
	padding: 25px 0 20px 17px; /* orig logo was 25px padding bottom (42px height)*/
	text-align:left;
	width: 90%;
}


#buttons {
	background: #F5EAE0;
}

/* SIDE COLUMN - left -  width 250px */

#sideColumnWrapper {
	postion: relative;
	width: 250px;
	margin-right: 24px;
	float: left;
	min-height: 400px;
	/* margin-right: 24px; */
	display: table-cell;
	vertical-align: bottom;
}

	/* #sideColumn {
		width: 250px;
		min-height:400px;
		padding-top: 25px;
		background: #F5EAE0;
	} */
	
	#staticSideBox {
		width: 202px;
		min-height: 100px;
		margin-top: 25px;
		background: #F5EAE0;
		padding: 28px 24px;
	}


/* SIDE COLUMN - navigation */

#mainNav {
	background: #f5eae0; 
	/* min-height 470px then 435px*/
	padding: 28px 0 50px 0;
	position: relative;
}

	#mainNav ul {
		margin:0;
		padding: 0;
	}
	
		#mainNav li {
			font-size: 1em;
			line-height: 2em;
			padding-left: 24px;
		}
		
		#mainNav li li{
			font-size: .85em;
			line-height: 1.8em;
			margin: 0;
			padding-left: 10px;
		}
		
		#mainNav li a, mainNav li li a {
			text-decoration:none;
			font-weight: normal;
			padding-bottom: 3px;
		}
		
		#mainNav li a:hover, mainNav li li a:hover {
			color: #000;
			text-decoration:none;
			font-weight: normal;
		}
		
		#mainNav li a.selected {
			color: #000;
			text-decoration:none;
			font-weight: normal;
			background:url(images/under_orange.png) bottom left repeat-x;
		}

#sideColumnWrapper #buttons {
	padding: 0 0 10px 24px;
/*	position: absolute;
	left: 24px;
	bottom: 5px;	
*/}

/* VERTICAL BOTTOM BOXES - overlay everything else for tall Vertical Images that extend between vertically-aligned bottom boxes, fixed to bottom of wrapper */

#bottomBoxes {
	position: absolute;
	z-index: 100;
	width: 1024px;
	height: 205px;
	left: 0px;
	bottom: 0px;
}

		#leftBox {
			float:left;
			/*background: #f0f0f0 url(images/cornerUR.gif) no-repeat right top;*/
			background: #f5eae0; /* old grey #f0f0f0 */
			width: 250px;
			height: 100px;
			padding-top: 28px;
		}
		#leftBoxBottom {
			/*background: #f0f0f0 url(images/cornerBR.gif) no-repeat right bottom;*/
			background: #f5eae0; /* old grey #f0f0f0 */
			width: 250px;
			height: 100px;
			padding-bottom: 28px;
		}
		#leftBoxBottom p {
			text-align: left;
			padding: 0 5px 0 22px;
		}
		
		#rightBox {
			float:right;
			/*background: #f0f0f0 url(images/cornerUL.gif) no-repeat left top;*/
			background: #f5eae0; /* old grey #f0f0f0 */
			width:250px;
			height: 100px;
			padding-top: 28px;
		}
		#rightBoxBottom {
			/*background: #f0f0f0 url(images/cornerBL.gif) no-repeat left bottom;*/
			background: #f5eae0; /* old grey #f0f0f0 */
			width: 230px;
			height: 100px;
			padding: 0 0 28px 20px;
		}

				/* ----------  Gallery Menu (Next/Previous to cycle through Vertical portfolio images) ------------ */
				
				#gallery_menu {
					height: 25px;
					width: 1024px;
					text-align: right;
				}
				#gallery_menu_text {
					width: 250px; /* same as rightBox */
					float: right;
					text-align:right;
				}
				#gallery_menu_text ul {
					display: inline;
					text-align: center;
				}
				#gallery_menu_text li {
					display: inline;
					text-align: center;
					font-size: .75em;
					line-height: .85em;
					padding: 10px 20px;
				}


/* HORIZONTAL BOTTOM BOXES - standard div below everything else that gets pushed down by mainContent */

#horiz_bottomBoxes {
	width: 1024px;
	min-height: 160px;
	clear:both;
}

		#horiz_leftBox {
			float:left;
			background: #f5eae0; 
			width: 223px;
			height: 105px;
			padding: 28px 5px 28px 22px;
		}
			#horiz_leftBoxBottom {
				background: #f5eae0;
				width: 250px;
				height: 105px;
				padding-bottom: 28px;
			}
				#horiz_leftBoxBottom p {
					text-align: left;
					padding: 0 5px 0 22px;
				}
		
		#horiz_LongDesc {
			float: left;
			padding: 0 0 0 58px;
			margin: 0;
			width: 470px;
		}
		
		#horiz_rightBox {
			float:right;
			background: #f5eae0; 
			width: 225px;
			height: 105px;
			padding: 28px 5px 28px 20px;
		}
		
			#horiz_rightBoxBottom {
				background: #f5eae0; /* old grey #f0f0f0 */
				width: 230px;
				height: 105px;
				padding: 0 0 28px 20px;
			}
			
				#horiz_rightBoxBottom h2{
					margin-bottom: 10px;
				}


/* general purpose clear div for clearing floats */

.clear {
	clear:both;
}


/* ///////////////////// SPECIAL AND PAGES //////////////////// */


/* regular pages - About, Contact, etc.*/

#regPage {
	width: 477px;
	height: auto;
	padding-top: 20px;
}

#regPage_wide {
	width: 90%;
	height:auto;
	padding-top: 20px;
}

#regPage p {
	width: inherit;
}

table#prices td, table#prices th {
	padding-left: 10px;
}

/* porfolio image page styles */

#collectionsTitle {
	float: right;
	text-align:left;
	padding-right:10px;
	padding-bottom: 31px;
	width: 210px;
}

#vertImg {
	width: 477px;
	height: 716px;
}
		#vertImgHome {
			width: 477px;
		}
		
		#vertLongDesc {
			text-align: left;
			padding: 29px 0px 0px 0px; /* previously 78 px top? */
			margin: 0;
		}
		
		#vertLongDesc img {
			margin: 0 auto;
		}
		
#horizImg {
	width: 716px;
	height: 476px;
	clear:both;
}

		#horizLongDesc {
			padding: 55px 0 0 0;
			margin: 0;
			 width: 430px;
			 clear:both;
		}

/* New portfolio layout for square images and arrow navigation (added 6/12) */

#squareImgOuter {
	position: relative;
	width: 640px;
	margin: 25px 0 0 0;
}

	.viewAll { /* View All at bottom */
		display: block;
		width: 40px;
		height: auto;
		position: absolute;
		right: -45px;
		top: 0;
		text-align: center;
		border: 1px solid #ffb400;
		padding: 10px;
		text-decoration: none;
	}
		.viewAll:hover {
			background: #F5EAE0;
		}

	#squareImgOuter .left {
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -50px;
		display: block;
		width: 29px;
		height: 53px;
		text-indent: -5000px;
	}
	
		#squareImgOuter .left span {
			background: url(images/arrowLeft.png);
			width: 29px;
			height: 53px;
			position: absolute;
			left: 0;
			top: 0;
		}
	
	#squareImgOuter .right {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -50px;
		display: block;
		width: 29px;
		height: 53px;
		text-indent: -5000px;
	}
	
		#squareImgOuter .right span {
			background: url(images/arrowRight.png);
			width: 29px;
			height: 53px;
			position: absolute;
			left: 0;
			top: 0;
		}


#squareImgInner {
	width: 540px;
	margin: 0 auto;
}

/* Flexible Works Viewer Layout */

#works {
	background: url(images/leftcolbg.gif) top left repeat-y #FFF;
	padding: 0 0 0 250px;
	position: relative;
	/* min-height: 533px; */
	margin-bottom: 40px;
}
	
	#worksSideColumn {
		width: 250px;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#works #buttons {
		position: absolute;
		left: 24px;
		bottom: 5px;	
	}

#worksWrapper {
	position: relative;
	padding: 0 60px;
}

	#worksWrapper .viewAllWorks { /* View All at bottom */
		display: block;
		width: 40px;
		height: auto;
		position: absolute;
		right: -25px;
		bottom: 0;
		text-align: center;
		border: 1px solid #ffb400;
		padding: 10px;
		text-decoration: none;
	}
		.viewAllWorks:hover {
			background: #F5EAE0;
		}

	#worksWrapper .left {
		position: absolute;
		left: 25px;
		top: 50%;
		margin-top: -50px;
		display: block;
	}
		
	#worksWrapper .right {
		position: absolute;
		right: 25px;
		top: 50%;
		margin-top: -50px;
		display: block;
	}
	
	/* #works .viewAllWorks {
		position: absolute;
		bottom: 0;
		right: 45px;
		display: block;
		width: 40px;
		height: 35px;
		text-align: center;
		border: 1px solid #ffb400;
		padding: 10px;
		text-decoration: none;
	}
		#works .viewAll:hover {
			background: #F5EAE0;
		}


#imageWrapper {
	float: left;
	min-width: 367px;
	max-width: 560px;
}

.arrowWrapper {
	float: left;
	width: 29px;
	padding: 0 20px;
}

	.arrowWrapper .left {
		display: block;
		width: 29px;
		height: 53px;
		margin-top: 250px;
	}
		
	.arrowWrapper .right {
		display: block;
		width: 29px;
		height: 53px;
		margin-top: 250px
	}
	*/

/* portfolio sub pages main (pictorialist, etc.) */

#gallery_main td {
	padding: 0 12px 20px 12px;
}

/* portfolio main (portfolio.php) */

.collection_intro {
	padding-top: 20px;
}

	.collection_intro img {
		float:left;
		margin: 0 10px 55px 0;
	}
	
	.collection_intro_desc {
		float:left;
		width: 350px;
	}
	
	.collection_intro_desc p{
		padding-top: 5px;
	}
	
	.collection_intro_desc h2 {
		background:url(images/under_grey.gif) left bottom repeat-x;
		padding: 0 0 5px 0;
		display:block;
	}
	
	.collection_intro_desc h2 a {
		text-decoration: none;
		color: #000;
	}

.collectionIntro {
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 30px;
}

	.collectionIntro img {
		float: left;
		padding: 0 10px 10px 0;
	}
	.collectionIntro h2 {
		float: left;
		width: 67%;
		background:url(images/under_grey.gif) left bottom repeat-x;
		margin-bottom: 10px;
	}
	.collectionIntro a {
		text-decoration: none;
	}
	.collectionIntro a.button {
		display: block;
		width: 100px;
		margin-top: 15px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
			.collectionIntro a.button:hover {
				background: #F5EAE0;
			}


/* Process page with images */

.processIntro {
	position: relative;
	margin-bottom: 20px;
}

	.processIntro img {
		float: left;
		padding: 0 10px 10px 0;
	}
	.processIntro h2 {
		display: inline;
		background:url(images/under_grey.gif) left bottom repeat-x;
		margin-bottom: 10px;
	}
	.processIntro a {
		text-decoration: none;
	}
	.processIntro a.button {
		display: block;
		width: 100px;
		margin-top: 15px;
		float: left;
	}
			.processIntro a.button:hover {
				background: #F5EAE0;
			}


/* CV Page styles */

.cv h2 {
	margin: 10px 0;
	padding-bottom: 3px;
	background: url(../images/under_orange.png) repeat-x bottom left;
}

.cv th {
	width: 120px;
}

.cv td {
	text-align: left;
	padding: 5px;
}


/* ///////////////////// FORMS //////////////////// */



/* ///////////////////// EXTRA/FIXES //////////////////// */

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.contactLink {
	text-decoration: none;
	background: url(images/underline.gif) bottom left repeat-x;
	padding-bottom: 1px;
	line-height: 100%;
}
	.contactLink:hover {
	background: none;
}