/******* http://www.panoptika.net/ *******/
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, h7, p, a,
em, font, img, q, s, ul, li,
table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;}

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td {
	text-align: left;
	font-weight: normal;
}
ul,ol,h1,h3,h4,h5,h6,h7,p  { padding: 0; margin: 0; } 
img { border: none; }

/******* GLOBAL STYLES *******/
body { font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; color: #000000; margin: 10px; padding: 0; width: 990px; background-color: #FFFFFF; line-height: 1.12em; text-align: left; }
ul { list-style: none; padding: 0 0 15px 0; } /* used on az and clientlist page **/ 
li { font-size: 1em; line-height: 1.12em; color: #333333; text-transform: none; padding-bottom: 4px; font-weight: normal; }
p { line-height: 1.6em; margin: 0 10px 10px 0px; text-align: left; }
a:link, a:visited { color: #CC6600; text-decoration: none; margin: 0; padding: 0; text-transform: lowercase; }
a:hover { color: #666666; text-decoration: none; }
h1,h2,h3, h4, h5, h5, h6, h7 { font-weight: normal; }
#leftcolumn h4 { font-size: 1.2em; margin: 0 0 15px 0px; line-height: 1.4em; color: #898375; padding-left: 105px; }
#rightcolumn h4 { font-size: 1.2em; margin: 0 0 15px 0px; line-height: 1.2em; color: #000000; } /*same as #leftcolumnwd h4 */
#totalcolumn h4 { font-size: 1.2em; margin: 0 0 5px 0px; line-height: 1.2em; color: #000000; } /*same as #leftcolumnwd h4 - used onbrowserinfo, client list, help pages sub headings*/
#totalcolumn { width: 100%; padding: 0 ; }/* only used on client list and help page*/ 
#totalcolumn   h6 { margin: 0 0 5px 0; color: #000000; padding: 0; }/* page sub headings*/ 
/* h2 used in #right column - Home page - see section **/ 
/* h2 used in #right column - work done page - see section**/
/* h3 used in #subHead - see section**/ 
/* h4 used on page header - see above - same as #leftcolumnwd h4 */ 
/* h5 used on cd's page - see section**/ 
/* h6 used as page content headers inc. on work done intro page and az page*/ 
/* h7 used on cd's enlargments page - see section**/ 
 
table { margin: 0 0 5px 0;/* padding added here because paddding doesn't show on containers (don't know why) **/ padding: 0; float: left; } /* used to hold image grids **/ 

/************  LOGO <h1> + HEADER **************/ 
h1 { float: left; padding: 20px 0 0 0; text-align: right; width: 420px; }
#header { height: 85px; background: #898375 url(../abuttons/back_col.gif) repeat; padding: 0 0 0 70px; margin: 0; }
#mainNav { float: right; margin: 0;/* 0 on margin to avoid margin collapse **/ padding: 55px 32px 0 0; text-align: left; width: 402px; }
#mainNav a:link, #mainNav a:visited { margin: 0 20px 0 0; padding: 0; }

/************ SUB-NAVIGATION **************/
#subHead { clear:both; margin: 10px 0 10px 0; padding: 0 30px 0 20px; }
#subHead h3 { font-size: 1.1em; float: left; padding: 0 0 10px 0; margin: 0; text-transform: lowercase; font-weight: bold; color: #333333; line-height: 200%; }
#subHeadNav { margin: 0; }
#subHeadNav p { padding: 0 15px 5px 0; letter-spacing: 0.2em; margin: 0; text-align: right; } /* az page - version eng/fr */
#subHeadNav p.numbers { font-size: 120%; color: #000000; } /* affects page numbers 12... */
#subHeadNav img { vertical-align: top; padding: 0 15px 0 15px; } /* for arrows on az and cd pages see individual sections below */
#subHeadNav p.new { letter-spacing: 0.2em; font-size: 90%; padding: 0; text-align: center; float: left; width: 100%; } /* affects central message */
#subHeadNav a:link, #subHeadNav a:visited { text-align:right; margin: 0; text-transform: none; color: #999999; padding: 0; }
#subHeadNav a:hover { color: #CC6600; }
#subHeadNav a:active { color: #333333; }

/************  CONTAINER **************/
#container { clear: both; padding: 0 30px 20px 70px; margin: 0px; overflow: auto; min-height: 485px; } /* all all pages except library/cd/book/portrait pages **************/
/* IE hack hide \*/
 * html #container {
	height: 485px;
}
/* IE hack hide */

/************  CONTAINER - IMAGE LIBRARY **************/
#containerlib { clear: both; padding: 0 0 10px 20px; float: none; min-height: 485px; }

/* IE hack hide \*/
 * html #containerlib { height: 485px; }
/* IE hack hide */

/*** IMAGE LIBRARY PAGES and work done ***/
#containerlib img { border: 1px solid #eee; }
#containerlib a:hover img { border: 1px solid #666666; }
#containerlib td { padding: 0px 6px 6px 0px; height: auto; width: auto; border: 0px solid #fff; vertical-align: top; text-align: left; } /** border was 1px grey before **/

/*** AZ PAGE ****/ 
#az { float: left; width: 100%; margin-top: 30px; }
#az h6 { font-size: 12px; text-align: left; font-weight: bold; padding: 0 0 10px 0; margin: 0; }
#az a:link, #az a:visited { margin: 0; padding: 0; font-weight: normal; color: #666666; text-transform: capitalize; }
#az a:hover, #az a:hover { color: #CC6600; }
#az ul { list-style: none; padding: 0 0 0px 0; } /* used on az and clientlist page **/ 
#az li { font-size: 13px; line-height: 1.15em; color: #333333; text-transform: none; font-weight: normal; }
#az li.sub, #az li.sub { margin: 0; padding-top: 7px; }
#subHeadNav img.az { vertical-align: top; padding: 0 15px 0 5px; } /* for arrows on az pages only / 5px pad btwn text and arrow */

/* WORK DONE Page*/
#leftcolumn #featurecell { width: 280px; height: auto; margin: 10px 0 0 10px; padding: 10px 0 0 0; background: #D9DDDF; }
#leftcolumn #featurecell img { padding: 0 10px 0 10px; }
#leftcolumn #featurecell p { font-size: 1.1em; line-height: 1.2em; margin: 0; padding: 0px 10px 10px 10px; }
#leftcolumn #featurecell h6 { font-size: 1em; font-weight: bold; margin: 0 0 10px 0px; color: #333333; line-height: 1.12em; }

/** cd enlargements page****/ 
#containercd { float: left; padding: 0px 0px 20px 70px; min-height: 670px; }
#containercd td { padding: 3px; height: auto; width: auto; text-align: left; }
#containercd p { font-size: 0.9em; padding: 0 0 10px 0; margin: 0 0 0 0px; line-height: 1.3em; color: #000000; }
#containercd h7 { margin: 0; padding: 5px 0; text-align: left; font-weight: bold; color: #999999; }/* h7 used on cd/bookcovers enlargments*/
#containercd img { padding: 20px 0 0 0; }
#subHeadNav img.back { vertical-align: top; padding: 0 5px 0 35px; } /* for arrows on az pages only / 5px pad btwn text and arrow */

/************ cd covers**************/
#containerworkdonecd { clear: both; padding: 0 0 0 70px; float: left; min-height: 495px;}
#containerworkdonecd a:link, #containerworkdone a:visited { text-transform: none; } /* to stop lowercase setting */
#containerworkdonecd   td { vertical-align: top; padding: 10px 10px 10px 0; width: 30%; }
#containerworkdonecd img { margin: 0 100px 0 0; }
#containerworkdonecd h5 { font-size: 1em; margin: 0; text-align: left; color: #663333; font-weight: bold; line-height: 1.1em; }
#containerworkdonecd h6 { font-size: 1em; margin: 0 0 0 0px; text-align: left; color: #000000; font-weight: bold; }
#containerworkdonecd p { font-size: 0.95em; padding: 0; margin: 0 10px 5px 0; line-height: 1.3em; color: #000000; }
#containerworkdonecd p.from { font-size: 0.95em; padding: 0; margin: 0 0 5px 0; line-height: 1.4em; color: #000000; }
#containerworkdonecd p.title { font-size: 1em; padding: 0; margin: 0 0 5px 0; line-height: 1.4em; color: #000000; font-weight: bold; }

/************ book covers**************/
#containerworkdone { clear: both; padding: 0 0 0 20px; float: left; }
#containerworkdone a:link, #containerworkdone a:visited { text-transform: none; } /*to stop lowercase setting */
#containerworkdone   td { vertical-align: top; padding: 0 0 20px; width: 20%; }
#containerworkdone img { margin: 0 35px 0 0; }
#containerworkdone h5 { font-size: 0.95em; margin: 0; text-align: left; color: #663333; font-weight: bold; line-height: 1.1em; }
#containerworkdone h6 { font-size: 0.95em; margin: 0; text-align: left; color: #000000; font-weight: bold; }
#containerworkdone p { font-size: 0.9em; padding: 0; margin: 0 0 5px 0; line-height: 1.3em; color: #000000; }

/** commisssions page****/ 
#containerworkdone #cell { float:left; width: 920px; position: relative; left: 0; top: 10px; margin-bottom: 10px; border-bottom: 3px solid #898375; }
#containerworkdone #cell img { margin: 10px 0; }
#containerworkdone #img { float:left; width: 370px; padding: 0; margin: 0 0 0; }
#containerworkdone #text { float:right; width: 540px; padding: 0; margin: 0; font-size: 1.2em;}

/************  PORTRAITS PAGE **************/
#containerport { clear: both; padding: 20px 0 10px 20px; float: left; }
#containerport td { vertical-align: top; margin: 0; padding-bottom: 20px; }
#containerport img { margin: 10px 35px 0 0; }
#containerport p { font-size: 0.95em; padding: 0; margin: 0 15px 5px 0; line-height: normal; color: #000000; font-family: Arial, Helvetica, sans-serif; }
#containerport p.title { font-weight: bold; font-size: 1em; padding: 10px 0 0 0; }

/************   HOME + INFO pages**************/
#container h6 { font-size: 1em; text-align: left; font-weight: bold; padding: 4px 0 10px 0; margin: 0; }
#leftcolumn.wd { float: left; width: 320px; height: auto; text-align: right; padding-left: 50px; } /*narrower cell to control text alignment on work done page only*/
#leftcolumn { float: left; width: 370px; height: auto; text-align: right; }
#leftcolumn p { font-size: 1.3em; line-height: 1.6em; margin: 0; letter-spacing: 0.05em; padding: 50px 0 70px 0; text-align: right; overflow: visible; } /** text only on home page **/
#leftcolumn p.email { padding: 0; margin: 0; } /** spacing above email **/
#leftcolumn img { padding: 0 0 10px 0;}
#rightcolumn { float: right; width: 402px; margin: 0; padding: 0; line-height: 1.4em; }
#rightcolumn p { font-size: 1.1em; line-height: 1.2em; padding: 0 20px 10px 0; }

.featurecell { border-bottom: 3px solid #898375; height: auto; padding: 10px 0px 10px 0px; }/* HOME + work done pages */
.featurecell2 { height: auto; padding: 10px 0px 0px 0px; } /*  for last cell of column /without border bottom */

#rightcolumn h2 { font-size: 13px; padding: 75px 0 0 15px; float: left; letter-spacing: 0.15em; }
#rightcolumn h2.workdone { font-size: 13px; padding: 45px 0 0 20px; float: left; letter-spacing: 0.15em; }
#rightcolumn h2 a:link, #rightcolumn h2 a:visited { text-transform: uppercase; color: #000000; font-weight: bold; }
#rightcolumn h2 a:hover { text-transform: uppercase; color: #CC6600; }
#rightcolumn img { float: left; padding: 10px 0px 10px 0; }
.spacer { clear:both; }	/* forces <div> container to recognise containing elemnts / to stretch vertically */

/* slideshow*/
#slideshow { margin: 0; float: left; width: 400px; }
#slideshow p { margin: 0 0 5px 0; padding: 0; clear: both; }
#SLIDESTEXT { padding: 10px 0 10px; font-size: 0.95em; text-transform: capitalize; font-family: "Univers ThinUltraCondensed"; color: #333333; letter-spacing: 0.1em; }
#slideform  { float: right; width: 402px; margin-top: 420px; }

/* client list info page*/ 
.clientscolumn { float: left; width: 29%; padding: 0; }
.clientscolumn ul { list-style: none; padding: 0 0 15px 0; margin: 0 0 0 0px; } 
.clientscolumn li { font-size: 1em; line-height: 1.12em; color: #333333; text-transform: none; padding-bottom: 4px; font-weight: normal; }
.clientscolumn li a:link, .clientscolumn li a:visited { color: #000000; text-decoration: none; margin: 0; padding: 0; text-transform: capitalize; }
.clientscolumn li a:hover { color: #CC6600; text-decoration: none; }

.column1 {
	float: left;
	height: auto;
	min-width: 35%;
	margin-right: 40px;
}
/* IE6 hack hide for Double-margin Bug on margin-left\*/
 * html .column1 { display:inline;} 
 
.column2 { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	height: auto;
	margin-right: 0px;
}
.column3 { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	height: auto;
	width: 30%;
	overflow: visible;
}
.column3 p { margin: 0; padding: 0; }


/* ========= footer styles ========= */
#footercontainer { margin: 0 0 0 0; padding: 0; clear: both; }
#footerwrapper { height:28px; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 95%; background: #898375 url(../abuttons/back_col.gif) repeat; }
* html #footerwrapper { height:45px; }
#footerwrapper img { padding: 0; vertical-align: top; }
p.footer { white-space: nowrap; margin: 0; border: 0 none; color: #333; padding: 7px 10px 0 10px; float: left; font-size: 90%; }
ul.footer { float:right; white-space: nowrap; margin: 0; border: 0 none; padding: 7px 45px 0px 1px; }
* html ul.footer { margin: 0 0 0 0; }
ul.footer li { display: inline; text-align: center; color: #333; list-style-type:none; padding:0; }
ul.footer li a:link, ul.footer li a:visited, ul.footer li a:active { padding: 0 20px 0 0px; }

/************ other **************/
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 18px; }
.fltlft { /* this class can be used to float an element left in your page */
	float: left; margin-right: 18px; }
.clearfloat { /* to be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both; height:0;font-size: 1px;line-height: 0;}
	
/* spacer div to follow multiple floated items (e.g. gallery thumbnails) to ensure the box expands to hold them all */
.spacer { clear: both;}	 /***  <div class="spacer"></div>  ***/
	

 /* bak2top*/
#bak2top { text-align: right; margin: 0 10px 20px 0; padding: 0; clear: both; }
#bak2top a { font-size: 90%; text-decoration:none; font-weight: normal; }
#bak2top a:hover { text-decoration:none; color: #CC3399;}
